index.js

import { event_types, eventSource, saveSettingsDebounced, substituteParams } from '../../../../script.js';
import { MacrosParser } from '../../../macros.js';
import { debounce, delay } from '../../../utils.js';
import { loadWorldInfo, world_names } from '../../../world-info.js';
import { morphdom } from '../../../../lib.js';
import { Settings } from './src/Settings.js';
import { debounce_timeout } from '../../../constants.js';

const shuffleList = (value)=>{
    const list = [...value];
    for (let i = list.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [list[i], list[j]] = [list[j], list[i]];
    }
    return list;
};

const substituteParamsOrNot = (value)=>{
    if (settings.substitute) {
        return substituteParams(value);
    }
    return value;
};

const settings = new Settings();
const handleSettingsChange = async()=>{
    for (const name of Object.keys(cache)) {
        onWorldInfoUpdated(name, await loadWorldInfo(name));
    }
    saveSettingsDebounced();
};
const handleSettingsChangeDebounced = debounce(handleSettingsChange, debounce_timeout.relaxed);
settings.onSettingsChange = ()=>handleSettingsChangeDebounced();


const dom = {
    /**@type {HTMLElement} */
    picker: undefined,
    /**@type {HTMLElement} */
    content: undefined,
    /**@type {HTMLInputElement} */
    query: undefined,
    /**@type {HTMLTextAreaElement} */
    input: undefined,
    /**@type {{ comment:string, dom:HTMLElement }[]} */
    entries: [],
};
const collapseState = {};
const cache = {};

const wiMacroMatcher = /^\{\{wi::(?:(?!\}\}).)+::(?:uid::\d+|(?:(?!\}\}).)+|random::\d+)\}\}$/;

const encodeMacroComponent = (text)=>text.replace(/\}\}|::/g, '__');
const registerMacrosForWorld = async(name, world)=>{cache[name] = [];
    for (let cnt = 1; cnt < (settings.registerRandom ? settings.randomCount + 1 : 0); cnt++) {
        MacrosParser.registerMacro(`wi::${encodeMacroComponent(name)}::random::${cnt}`, ()=>{
            return substituteParamsOrNot(
                shuffleList(Object.values(world.entries))
                    .slice(0, cnt)
                    .map(it=>it?.content)
                    .filter(Boolean)
                    .join('\n')
                ,
            );
        });
    }
    for (const [k,entry] of Object.entries(world.entries)) {
        cache[name].push({ uid:entry.uid, comment:entry.comment, content:entry.content });
        if (!settings.registerEmpty && entry.content.trim().length == 0) continue;
        if (!settings.registerMacro && wiMacroMatcher.test(entry.content.trim())) continue;
        if (settings.registerUid) {
            MacrosParser.registerMacro(`wi::${encodeMacroComponent(name)}::uid::${entry.uid}`, ()=>substituteParamsOrNot(entry.content));
        }
        if (settings.registerComment && entry.comment?.length) {
            MacrosParser.registerMacro(`wi::${encodeMacroComponent(name)}::${encodeMacroComponent(entry.comment)}`, ()=>substituteParamsOrNot(entry.content));
        }
    }
};
const registerMacros = async()=>{
    for (const name of world_names) {
        const world = await loadWorldInfo(name);
        registerMacrosForWorld(name, world);
    }
};
registerMacros();

const onWorldInfoUpdated = (name, world)=>{
    const unreg = [];
    for (const m of MacrosParser) {
        if (m.key.startsWith(`wi::${encodeMacroComponent(name)}::`)) unreg.push(m.key);
    }
    for (const key of unreg) {
        MacrosParser.unregisterMacro(key);
    }
    registerMacrosForWorld(name, world);
    updateMacroPickerDebounced();
};
const onWorldInfoUpdatedDebounced = debounce(onWorldInfoUpdated);

eventSource.on(event_types.WORLDINFO_UPDATED, (name, world)=>onWorldInfoUpdatedDebounced(name, world));

const filter = ()=>{
    const query = dom.query?.value?.toLowerCase();
    const hasQuery = query?.length;
    for (const e of dom.entries) {
        if (!hasQuery || e.comment.toLowerCase().includes(dom.query.value.toLowerCase())) {
            e.dom.classList.remove('stwim--isFiltered');
        } else {
            e.dom.classList.add('stwim--isFiltered');
        }
    }
};
const filterDebounced = debounce(filter);
const injectMacroPicker = ()=>{
    const parent = document.querySelector('#WorldInfo .stwid--body .world_entry_form_control:has([name="content"])');
    if (!parent) return;
    dom.input = parent.querySelector('[name="content"]');
    const label = parent.querySelector('label > small > span');
    if (!label) return;
    const triggerWrap = document.createElement('div'); {
        triggerWrap.classList.add('stwim--pickerTriggerWrap');
        const trigger = document.createElement('div'); {
            trigger.classList.add('stwim--pickerTrigger');
            trigger.classList.add('menu_button');
            trigger.textContent = '{{wi::}}';
            trigger.title = 'World Info Macro Picker';
            trigger.addEventListener('click', (evt)=>{
                const is = dom.picker.classList.toggle('stwim--isActive');
                localStorage.setItem('stwim--picker', is ? '1' : '0');
            });
            triggerWrap.append(trigger);
        }
        label.append(triggerWrap);
    }
    const picker = document.createElement('div'); {
        dom.picker = picker;
        picker.classList.add('stwim--picker');
        if (localStorage.getItem('stwim--picker') != '0') picker.classList.add('stwim--isActive');
        picker.classList.add('text_pole');
        picker.addEventListener('pointerdown', (evt)=>evt.preventDefault());
        picker.addEventListener('click', (evt)=>evt.preventDefault());
        picker.addEventListener('pointerup', (evt)=>evt.preventDefault());
        const query = document.createElement('input'); {
            dom.query = query;
            query.classList.add('stwim--query');
            query.classList.add('text_pole');
            query.type = 'search';
            query.placeholder = 'filter entries';
            query.addEventListener('pointerdown', (evt)=>evt.stopPropagation());
            query.addEventListener('click', (evt)=>evt.stopPropagation());
            query.addEventListener('pointerup', (evt)=>evt.stopPropagation());
            query.addEventListener('input', ()=>filterDebounced());
            picker.append(query);
        }
        const content = document.createElement('div'); {
            dom.content = content;
            content.classList.add('stwim--content');
            picker.append(content);
        }
        parent.append(picker);
    }
    updateMacroPickerDebounced();
};
const updateMacroPicker = ()=>{
    if (!dom.picker) return;
    while (dom.entries.pop());
    dom.content.innerHTML = '';
    const frag = document.createElement('div');
    for (const [name, entries] of Object.entries(cache).toSorted((a,b)=>a[0].toLowerCase().localeCompare(b[0].toLowerCase()))) {
        const world = document.createElement('div'); {
            world.classList.add('stwim--world');
            if (collapseState[name]) world.classList.add('stwim--isCollapsed');
            const head = document.createElement('div'); {
                head.classList.add('stwim--head');
                head.title = 'Collapse world';
                head.addEventListener('click', (evt)=>{
                    const is = world.classList.toggle('stwim--isCollapsed');
                    toggle.classList[is ? 'remove' : 'add']('fa-chevron-up');
                    toggle.classList[is ? 'add' : 'remove']('fa-chevron-down');
                    collapseState[name] = is;
                });
                const title = document.createElement('div'); {
                    title.classList.add('stwim--title');
                    title.textContent = name;
                    head.append(title);
                }
                const toggle = document.createElement('div'); {
                    toggle.classList.add('stwim--toggle');
                    toggle.classList.add('fa-solid', 'fa-fw');
                    toggle.classList.add(collapseState[name] ? 'fa-chevron-down' : 'fa-chevron-up');
                    head.append(toggle);
                }
                world.append(head);
            }
            const list = document.createElement('div'); {
                list.classList.add('stwim--list');
                for (let cnt = 1; cnt < (settings.registerRandom ? settings.randomCount + 1 : 0); cnt++) {
                    const entry = document.createElement('div'); {
                        dom.entries.push({ comment:`Random: ${cnt}`, dom:entry });
                        entry.classList.add('stwim--entry');
                        entry.classList.add('stwim--random');
                        entry.title = `Replace with ${cnt} random entr${cnt == 1 ? 'y' : 'ies'}\n---\n{{wi::${encodeMacroComponent(name)}::random::${cnt}}}`;
                        entry.addEventListener('click', ()=>{
                            if (!dom.input) return;
                            if (document.activeElement != dom.input) dom.input.focus();
                            document.execCommand('insertText', false, `{{wi::${encodeMacroComponent(name)}::random::${cnt}}}`);
                        });
                        const i = document.createElement('i'); {
                            i.classList.add('fa-solid', 'fa-fw', 'fa-dice');
                            entry.append(i);
                        }
                        const num = document.createElement('span'); {
                            num.textContent = cnt.toString();
                            entry.append(num);
                        }
                        list.append(entry);
                    }
                }
                for (const e of entries.toSorted((a,b)=>a.comment.toLowerCase().localeCompare(b.comment.toLowerCase()))) {
                    if (!settings.registerEmpty && e.content.trim().length == 0) continue;
                    if (!settings.registerMacro && wiMacroMatcher.test(e.content.trim())) continue;
                    const entry = document.createElement('div'); {
                        dom.entries.push({ comment:e.comment, dom:entry });
                        entry.classList.add('stwim--entry');
                        entry.textContent = e.comment;
                        entry.title = `${e.comment}\n---\n${e.content}`;
                        entry.addEventListener('click', ()=>{
                            if (!dom.input) return;
                            if (document.activeElement != dom.input) dom.input.focus();
                            if (e.comment?.length) {
                                document.execCommand('insertText', false, `{{wi::${encodeMacroComponent(name)}::${encodeMacroComponent(e.comment)}}}`);
                            } else {
                                document.execCommand('insertText', false, `{{wi::${encodeMacroComponent(name)}::uid::${e.uid}}}`);
                            }
                        });
                        list.append(entry);
                    }
                }
                world.append(list);
            }
            frag.append(world);
        }
    }
    morphdom(dom.content, frag, { childrenOnly: true });
    filter();
};
const updateMacroPickerDebounced = debounce(updateMacroPicker);
injectMacroPicker();

const mo = new MutationObserver((muts)=>{
    for (const mut of muts) {
        for (const node of mut.addedNodes) {
            if (!(node instanceof HTMLElement)) continue;
            if (node.querySelector('.world_entry > .world_entry_form')) {
                injectMacroPicker();
                return;
            }
        }
    }
});
(async()=>{
    let body = document.querySelector('#WorldInfo .stwid--body');
    while (!body) {
        await delay(100);
        body = document.querySelector('#WorldInfo .stwid--body');
    }
    mo.observe(body, { childList:true, subtree:true });
})();


// update notices
eventSource.once(event_types.APP_READY, ()=>{
    if (settings.knownVersion == null) {
        const dom = `
            <p>
                World Info Macros now has extension settings!
            </p>
            <p>
                <img src="/scripts/extensions/third-party/SillyTavern-WorldInfoMacros/img/updates/1.3.0--settings.png">
            </p>
        `;
        toastr.info(dom, 'World Info Macros', {
            escapeHtml: false,
            timeOut: 0,
            extendedTimeOut: 0,
            toastClass: 'stwim--update',
            onCloseClick: ()=>{
                settings.knownVersion = '1.3.0';
            },
            onclick: async()=>{
                settings.knownVersion = '1.3.0';
                try {
                    const drawerToggle = /**@type {HTMLElement}*/(document.querySelector('#extensions-settings-button > .drawer-toggle'));
                    if (drawerToggle.querySelector('.drawer-icon').classList.contains('.closedIcon')) {
                        drawerToggle.click();
                        await delay(100);
                    }
                    /**@type {HTMLElement}*/(document.querySelector('.stem--tab[title="Extension settings"]'))?.click();
                    const inlineToggle = /**@type {HTMLElement}*/(document.querySelector('#stwim--settings  > .inline-drawer > .inline-drawer-toggle'));
                    if (inlineToggle.querySelector('.inline-drawer-icon').classList.contains('down')) {
                        inlineToggle.click();
                        await delay(100);
                    }
                    /**@type {HTMLElement}*/(document.querySelector('#stwim--settings  > .inline-drawer > .inline-drawer-content > *')).scrollIntoView();
                } catch { /* empty */ }
            },
        });
    }
});