import { callPopup, eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders } from "../script.js"; import { isSubsetOf, debounce } from "./utils.js"; export { getContext, getApiUrl, loadExtensionSettings, runGenerationInterceptors, doExtrasFetch, modules, extension_settings, ModuleWorkerWrapper, }; let extensionNames = []; let manifests = []; const defaultUrl = "http://localhost:5100"; export const saveMetadataDebounced = debounce(async () => await getContext().saveMetadata(), 1000); // Disables parallel updates class ModuleWorkerWrapper { constructor(callback) { this.isBusy = false; this.callback = callback; } // Called by the extension async update() { // Don't touch me I'm busy... if (this.isBusy) { return; } // I'm free. Let's update! try { this.isBusy = true; await this.callback(); } finally { this.isBusy = false; } } } const extension_settings = { apiUrl: defaultUrl, apiKey: '', autoConnect: false, disabledExtensions: [], expressionOverrides: [], memory: {}, note: { default: '', chara: [], wiAddition: [], }, caption: { refine_mode: false, }, expressions: {}, dice: {}, regex: [], tts: {}, sd: { prompts: {}, character_prompts: {}, }, chromadb: {}, translate: {}, objective: {}, quickReply: {}, randomizer: { controls: [], fluctuation: 0.1, enabled: false, }, speech_recognition: {}, rvc: {}, }; let modules = []; let activeExtensions = new Set(); const getContext = () => window['SillyTavern'].getContext(); const getApiUrl = () => extension_settings.apiUrl; let connectedToApi = false; function showHideExtensionsMenu() { // Get the number of menu items that are not hidden const hasMenuItems = $('#extensionsMenu').children().filter((_, child) => $(child).css('display') !== 'none').length > 0; // We have menu items, so we can stop checking if (hasMenuItems) { clearInterval(menuInterval); } // Show or hide the menu button $('#extensionsMenuButton').toggle(hasMenuItems); } // Periodically check for new extensions const menuInterval = setInterval(showHideExtensionsMenu, 1000); async function doExtrasFetch(endpoint, args) { if (!args) { args = {} } if (!args.method) { Object.assign(args, { method: 'GET' }); } if (!args.headers) { args.headers = {} } Object.assign(args.headers, { 'Authorization': `Bearer ${extension_settings.apiKey}`, 'Bypass-Tunnel-Reminder': 'bypass' }); const response = await fetch(endpoint, args); return response; } async function discoverExtensions() { try { const response = await fetch('/discover_extensions'); if (response.ok) { const extensions = await response.json(); return extensions; } else { return []; } } catch (err) { console.error(err); return []; } } function onDisableExtensionClick() { const name = $(this).data('name'); disableExtension(name); } function onEnableExtensionClick() { const name = $(this).data('name'); enableExtension(name); } async function enableExtension(name) { extension_settings.disabledExtensions = extension_settings.disabledExtensions.filter(x => x !== name); await saveSettings(); location.reload(); } async function disableExtension(name) { extension_settings.disabledExtensions.push(name); await saveSettings(); location.reload(); } async function getManifests(names) { const obj = {}; const promises = []; for (const name of names) { const promise = new Promise((resolve, reject) => { fetch(`/scripts/extensions/${name}/manifest.json`).then(async response => { if (response.ok) { const json = await response.json(); obj[name] = json; resolve(); } else { reject(); } }).catch(err => reject() && console.log('Could not load manifest.json for ' + name, err)); }); promises.push(promise); } await Promise.allSettled(promises); return obj; } async function activateExtensions() { const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order); const promises = []; for (let entry of extensions) { const name = entry[0]; const manifest = entry[1]; const elementExists = document.getElementById(name) !== null; if (elementExists || activeExtensions.has(name)) { continue; } // all required modules are active (offline extensions require none) if (isSubsetOf(modules, manifest.requires)) { try { const isDisabled = extension_settings.disabledExtensions.includes(name); const li = document.createElement('li'); if (!isDisabled) { const promise = Promise.all([addExtensionScript(name, manifest), addExtensionStyle(name, manifest)]); promise .then(() => activeExtensions.add(name)) .catch(err => console.log('Could not activate extension: ' + name, err)); promises.push(promise); } else { li.classList.add('disabled'); } li.id = name; li.innerText = manifest.display_name; $('#extensions_list').append(li); } catch (error) { console.error(`Could not activate extension: ${name}`); console.error(error); } } } await Promise.allSettled(promises); } async function connectClickHandler() { const baseUrl = $("#extensions_url").val(); extension_settings.apiUrl = baseUrl; const testApiKey = $("#extensions_api_key").val(); extension_settings.apiKey = testApiKey; saveSettingsDebounced(); await connectToApi(baseUrl); } function autoConnectInputHandler() { const value = $(this).prop('checked'); extension_settings.autoConnect = !!value; if (value && !connectedToApi) { $("#extensions_connect").trigger('click'); } saveSettingsDebounced(); } function addExtensionsButtonAndMenu() { const buttonHTML = `
`; const extensionsMenuHTML = ``; $(document.body).append(extensionsMenuHTML); $('#send_but_sheld').prepend(buttonHTML); const button = $('#extensionsMenuButton'); const dropdown = $('#extensionsMenu'); //dropdown.hide(); let popper = Popper.createPopper(button.get(0), dropdown.get(0), { placement: 'top-end', }); $(button).on('click', function () { popper.update() dropdown.fadeIn(250); }); $("html").on('touchstart mousedown', function (e) { let clickTarget = $(e.target); if (dropdown.is(':visible') && clickTarget.closest(button).length == 0 && clickTarget.closest(dropdown).length == 0) { $(dropdown).fadeOut(250); } }); } /* $(document).on('click', function (e) { const target = $(e.target); if (target.is(dropdown)) return; if (target.is(button) && dropdown.is(':hidden')) { dropdown.toggle(200); popper.update(); } if (target !== dropdown && target !== button && dropdown.is(":visible")) { dropdown.hide(200); } }); } */ async function connectToApi(baseUrl) { if (!baseUrl) { return; } const url = new URL(baseUrl); url.pathname = '/api/modules'; try { const getExtensionsResult = await doExtrasFetch(url); if (getExtensionsResult.ok) { const data = await getExtensionsResult.json(); modules = data.modules; await activateExtensions(); eventSource.emit(event_types.EXTRAS_CONNECTED, modules); } updateStatus(getExtensionsResult.ok); } catch { updateStatus(false); } } function updateStatus(success) { connectedToApi = success; const _text = success ? 'Connected to API' : 'Could not connect to API'; const _class = success ? 'success' : 'failure'; $('#extensions_status').text(_text); $('#extensions_status').attr('class', _class); } function addExtensionStyle(name, manifest) { if (manifest.css) { return new Promise((resolve, reject) => { const url = `/scripts/extensions/${name}/${manifest.css}`; if ($(`link[id="${name}"]`).length === 0) { const link = document.createElement('link'); link.id = name; link.rel = "stylesheet"; link.type = "text/css"; link.href = url; link.onload = function () { resolve(); } link.onerror = function (e) { reject(e); } document.head.appendChild(link); } }); } return Promise.resolve(); } function addExtensionScript(name, manifest) { if (manifest.js) { return new Promise((resolve, reject) => { const url = `/scripts/extensions/${name}/${manifest.js}`; let ready = false; if ($(`script[id="${name}"]`).length === 0) { const script = document.createElement('script'); script.id = name; script.type = 'module'; script.src = url; script.async = true; script.onerror = function (err) { reject(err, script); }; script.onload = script.onreadystatechange = function () { // console.log(this.readyState); // uncomment this line to see which ready states are called. if (!ready && (!this.readyState || this.readyState == 'complete')) { ready = true; resolve(); } }; document.body.appendChild(script); } }); } return Promise.resolve(); } /** * Generates HTML string for displaying an extension in the UI. * * @param {string} name - The name of the extension. * @param {object} manifest - The manifest of the extension. * @param {boolean} isActive - Whether the extension is active or not. * @param {boolean} isDisabled - Whether the extension is disabled or not. * @param {boolean} isExternal - Whether the extension is external or not. * @param {string} checkboxClass - The class for the checkbox HTML element. * @return {string} - The HTML string that represents the extension. */ async function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass) { const displayName = manifest.display_name; let displayVersion = manifest.version ? ` v${manifest.version}` : ""; let isUpToDate = true; let updateButton = ''; let originHtml = ''; if (isExternal) { let data = await getExtensionVersion(name.replace('third-party', '')); let branch = data.currentBranchName; let commitHash = data.currentCommitHash; let origin = data.remoteUrl isUpToDate = data.isUpToDate; displayVersion = ` (${branch}-${commitHash.substring(0, 7)})`; updateButton = isUpToDate ? `` : ``; originHtml = ``; } let toggleElement = isActive || isDisabled ? `` : ``; let deleteButton = isExternal ? `` : ''; // if external, wrap the name in a link to the repo let extensionHtml = `Optional modules: ${optionalString}
`; } } else if (!isDisabled) { // Neither active nor disabled const requirements = new Set(manifest.requires); modules.forEach(x => requirements.delete(x)); const requirementsString = DOMPurify.sanitize([...requirements].join(', ')); extensionHtml += `Missing modules: ${requirementsString}
`; } return extensionHtml; } /** * Gets extension data and generates the corresponding HTML for displaying the extension. * * @param {Array} extension - An array where the first element is the extension name and the second element is the extension manifest. * @return {object} - An object with 'isExternal' indicating whether the extension is external, and 'extensionHtml' for the extension's HTML string. */ async function getExtensionData(extension) { const name = extension[0]; const manifest = extension[1]; const isActive = activeExtensions.has(name); const isDisabled = extension_settings.disabledExtensions.includes(name); const isExternal = name.startsWith('third-party'); const checkboxClass = isDisabled ? "checkbox_disabled" : ""; const extensionHtml = await generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass); return { isExternal, extensionHtml }; } /** * Gets the module information to be displayed. * * @return {string} - The HTML string for the module information. */ function getModuleInformation() { let moduleInfo = modules.length ? `${DOMPurify.sanitize(modules.join(', '))}
` : 'Not connected to the API!
'; return `