Merge pull request #3145 from SillyTavern/redesign-extension-manager Redesign extension manager

00006aa072b9cf3bd53e5253419c876a7274102d

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: 4bf58ca2d52131ce4815fb8a5fd1a939f8b7adcc 62be0939d01c1144bedb5ee9f98aedf5157fe5f0

.dockerignore+1 -0 Viewed

 /data
 /cache
 .DS_Store
 +/public/scripts/extensions/third-party

.gitignore+2 -0 Viewed

 /default/scaffold
 public/scripts/extensions/third-party
 /certs
 +.aider*
 +.env

.npmignore+1 -0 Viewed

 .github
 .vscode
 .git
 +/public/scripts/extensions/third-party

public/css/extensions-panel.css+47 -6 Viewed

@@ -65,7 +65,7 @@ label[for="extensions_autoconnect"] {
65	65	}
66	66
67	67	.extensions_info .extension_enabled {
68	68	colorfont-weight: greenbold;
69	69	}
70	70
71	71	.extensions_info .extension_disabled {

     color: gray;
+}
 -input.extension_missing[type="checkbox"] {
 +.extensions_info .extension_modules {
     opacityfont-size: 0.58em;
 +    font-weight: normal;
+}
 #extensions_list.extensions_info .disabledextension_block {
     text-decorationdisplay: line-throughflex;
     colorflex-wrap: lightgraynowrap;
 +    padding: 5px;
 +    margin-bottom: 5px;
 +    border: 1px solid var(--SmartThemeBorderColor);
 +    border-radius: 10px;
 +    align-items: baseline;
 +    justify-content: space-between;
 +    gap: 5px;
 +}
++
 +.extensions_info .extension_name {
 +    font-size: 1.05em;
 +}
++
 +.extensions_info .extension_version {
 +    opacity: 0.8;
 +    font-size: 0.8em;
 +    font-weight: normal;
 +    margin-left: 2px;
 +}
++
 +.extensions_info .extension_block a {
 +    color: var(--SmartThemeBodyColor);
 +}
++
 +.extensions_info .extension_name.update_available {
 +    color: limegreen;
 +}
++
 +input.extension_missing[type="checkbox"] {
 +    opacity: 0.5;
+}
 .update-button {

 #extensionsMenu>div.extension_container:empty {
     display: none;
+}
++
 +.extensions_info .extension_text_block {
 +    white-space: nowrap;
 +    overflow: hidden;
 +    text-overflow: ellipsis;
 +}
++
 +.extensions_info .extension_actions {
 +    flex-wrap: nowrap;
 +}

public/scripts/extensions.js+447 -173 Viewed

 import { showLoader } from './loader.js';
 import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
 import { renderTemplate, renderTemplateAsync } from './templates.js';
 import { delay, isSubsetOf, setValueByPath } from './utils.js';
 import { getContext } from './st-context.js';
 +import { isAdmin } from './user.js';
 +import { t } from './i18n.js';
 +import { debounce_timeout } from './constants.js';
++
 export {
     getContext,
     getApiUrl,
 -    loadExtensionSettings,
 -    runGenerationInterceptors,
 -    doExtrasFetch,
 -    modules,
 -    extension_settings,
 -    ModuleWorkerWrapper,
 };
 /** @type {string[]} */
 export let extensionNames = [];
 +/**
 + * Holds the type of each extension.
 + * Don't use this directly, use getExtensionType instead!
 + * @type {Record<string, string>}
 + */
 +export let extensionTypes = {};
++
 +/**
 + * A list of active modules provided by the Extras API.
 + * @type {string[]}
 + */
 +export let modules = [];
++
 +/**
 + * A set of active extensions.
 + * @type {Set<string>}
 + */
 +let activeExtensions = new Set();
++
 +const getApiUrl = () => extension_settings.apiUrl;
 +const sortManifests = (a, b) => a.loading_order - b.loading_order;
 +let connectedToApi = false;
++
 +/**
 + * Holds manifest data for each extension.
 + * @type {Record<string, object>}
 + */
 let manifests = {};
 -const defaultUrl = 'http://localhost:5100';
 -let saveMetadataTimeout = null;
 +/**
 + * Default URL for the Extras API.
 + */
 +const defaultUrl = 'http://localhost:5100';
 let requiresReload = false;
 let stateChanged = false;
 +let saveMetadataTimeout = null;
 export function saveMetadataDebounced() {
     const context = getContext();

@@ -51,9 +79,9 @@ export function saveMetadataDebounced() {
51	79	}
52	80
53	81	console.debug('Saving metadata...');
54	82	await newContext.saveMetadata();
55	83	console.debug('Saved metadata...');
56	84	}, 1000debounce_timeout.relaxed);
57	85	}
58	86
59	87	/**

+}
 // Disables parallel updates
 export class ModuleWorkerWrapper {
     constructor(callback) {
         this.isBusy = false;
         this.callback = callback;

@@ -107,7 +135,7 @@ class ModuleWorkerWrapper {
107	135	}
108	136	}
109	137
110	138	export const extension_settings = {
111	139	apiUrl: defaultUrl,
112	140	apiKey: '',
113	141	autoConnect: false,

     disabled_attachments: [],
 };
 -let modules = [];
 -let activeExtensions = new Set();
+-
 -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;

 // Periodically check for new extensions
 const menuInterval = setInterval(showHideExtensionsMenu, 1000);
 -async function doExtrasFetch(endpoint, args) {
 +/**
 + * Gets the type of an extension based on its external ID.
 + * @param {string} externalId External ID of the extension (excluding or including the leading 'third-party/')
 + * @returns {string} Type of the extension (global, local, system, or empty string if not found)
 + */
 +function getExtensionType(externalId) {
 +    const id = Object.keys(extensionTypes).find(id => id === externalId || (id.startsWith('third-party') && id.endsWith(externalId)));
 +    return id ? extensionTypes[id] : '';
 +}
++
 +/**
 + * Performs a fetch of the Extras API.
 + * @param {string|URL} endpoint Extras API endpoint
 + * @param {RequestInit} args Request arguments
 + * @returns {Promise<Response>} Response from the fetch
 + */
 +export async function doExtrasFetch(endpoint, args = {}) {
     if (!args) {
         args = {};
+    }

         });
+    }
     const response =return await fetch(endpoint, args);
 -    return response;
+}
 +/**
 + * Discovers extensions from the API.
 + * @returns {Promise<{name: string, type: string}[]>}
 + */
 async function discoverExtensions() {
     try {
         const response = await fetch('/api/extensions/discover');

     enableExtension(name, false);
+}
 +/**
 + * Enables an extension by name.
 + * @param {string} name Extension name
 + * @param {boolean} [reload=true] If true, reload the page after enabling the extension
 + */
 export async function enableExtension(name, reload = true) {
     extension_settings.disabledExtensions = extension_settings.disabledExtensions.filter(x => x !== name);
     stateChanged = true;

+    }
+}
 +/**
 + * Disables an extension by name.
 + * @param {string} name Extension name
 + * @param {boolean} [reload=true] If true, reload the page after disabling the extension
 + */
 export async function disableExtension(name, reload = true) {
     extension_settings.disabledExtensions.push(name);
     stateChanged = true;

+    }
+}
 +/**
 + * Loads manifest.json files for extensions.
 + * @param {string[]} names Array of extension names
 + * @returns {Promise<Record<string, object>>} Object with extension names as keys and their manifests as values
 + */
 async function getManifests(names) {
     const obj = {};
     const promises = [];

     return obj;
+}
 +/**
 + * Tries to activate all available extensions that are not already active.
 + * @returns {Promise<void>}
 + */
 async function activateExtensions() {
     const extensions = Object.entries(manifests).sort((a, b) => sortManifests(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)
 +        const meetsModuleRequirements = !Array.isArray(manifest.requires) || isSubsetOf(modules, manifest.requires);
 -        if (isSubsetOf(modules, manifest.requires)) {
 -            try {
         const isDisabled = extension_settings.disabledExtensions.includes(name);
 -                const li = document.createElement('li');
                         if (meetsModuleRequirements && !isDisabled) {
 +            try {
 +                console.debug('Activating extension', name);
                 const promise = Promise.all([addExtensionScript(name, manifest), addExtensionStyle(name, manifest)]);
                 await 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);
+            }
+        }

+}
 async function connectClickHandler() {
     const baseUrl = String($('#extensions_url').val());
     extension_settings.apiUrl = String(baseUrl);
     const testApiKey = $('#extensions_api_key').val();
     extension_settings.apiKey = String(testApiKey);
     saveSettingsDebounced();

+    }
+}
 -/*     $(document).on('click', function (e) {
 +/**
 -        const target = $(e.target);
 + * Connects to the Extras API.
 -        if (target.is(dropdown)) return;
 + * @param {string} baseUrl Extras API base URL
 -        if (target.is(button) && dropdown.is(':hidden')) {
 + * @returns {Promise<void>}
 -            dropdown.toggle(200);
 + */
 -            popper.update();
 -        }
 -        if (target !== dropdown &&
 -            target !== button &&
 -            dropdown.is(":visible")) {
 -            dropdown.hide(200);
 -        }
 -    });
 -} */
+-
 async function connectToApi(baseUrl) {
     if (!baseUrl) {
         return;

             const data = await getExtensionsResult.json();
             modules = data.modules;
             await activateExtensions();
             await eventSource.emit(event_types.EXTRAS_CONNECTED, modules);
+        }
         updateStatus(getExtensionsResult.ok);

+    }
+}
 +/**
 + * Updates the status of Extras API connection.
 + * @param {boolean} success Whether the connection was successful
 + */
 function updateStatus(success) {
     connectedToApi = success;
     const _text = success ? 't`Connected to API'` : 't`Could not connect to API'`;
     const _class = success ? 'success' : 'failure';
     $('#extensions_status').text(_text);
     $('#extensions_status').attr('class', _class);
+}
 +/**
 + * Adds a CSS file for an extension.
 + * @param {string} name Extension name
 + * @param {object} manifest Extension manifest
 + * @returns {Promise<void>} When the CSS is loaded
 + */
 function addExtensionStyle(name, manifest) {
     if (!manifest.css) {
 +        return Promise.resolve();
 +    }
++
     return new Promise((resolve, reject) => {
         const url = `/scripts/extensions/${name}/${manifest.css}`;

     });
+}
 +/**
 + * Loads a JS file for an extension.
 + * @param {string} name Extension name
 + * @param {object} manifest Extension manifest
 + * @returns {Promise<void>} When the script is loaded
 + */
 +function addExtensionScript(name, manifest) {
 +    if (!manifest.js) {
         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;

             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) {
 -                    if (!ready && (!this.readyState || this.readyState == 'complete')) {
                     ready = true;
                     resolve();
+                }

     });
+}
 -    return Promise.resolve();
 -}
+-
+-
+-
 /**
  * Generates HTML string for displaying an extension in the UI.
+ *

  * @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 {Promise<string>} - The HTML string that represents the extension.
  */
 async function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass) {
 +    function getExtensionIcon() {
 +        const type = getExtensionType(name);
 +        switch (type) {
 +            case 'global':
 +                return '<i class="fa-sm fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
 +            case 'local':
 +                return '<i class="fa-sm fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
 +            case 'system':
 +                return '<i class="fa-sm fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>';
 +            default:
 +                return '<i class="fa-sm fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
 +        }
 +    }
++
 +    const isUserAdmin = isAdmin();
 +    const extensionIcon = getExtensionIcon();
     const displayName = manifest.display_name;
     letconst displayVersion = manifest.version ? ` v${manifest.version}` :|| '';
 -    let isUpToDate = true;
 +    const externalId = name.replace('third-party', '');
 -    let updateButton = '';
     let originHtml = '';
     if (isExternal) {
 -        let data = await getExtensionVersion(name.replace('third-party', ''));
 +        originHtml = '<a>';
 -        let branch = data.currentBranchName;
 -        let commitHash = data.currentCommitHash;
 -        let origin = data.remoteUrl;
 -        isUpToDate = data.isUpToDate;
 -        displayVersion = ` (${branch}-${commitHash.substring(0, 7)})`;
 -        updateButton = isUpToDate ?
 -            `<span class="update-button"><button class="btn_update menu_button" data-name="${name.replace('third-party', '')}" title="Up to date"><i class="fa-solid fa-code-commit fa-fw"></i></button></span>` :
 -            `<span class="update-button"><button class="btn_update menu_button" data-name="${name.replace('third-party', '')}" title="Update available"><i class="fa-solid fa-download fa-fw"></i></button></span>`;
 -        originHtml = `<a href="${origin}" target="_blank" rel="noopener noreferrer">`;
+    }
     let toggleElement = isActive || isDisabled ?
         `<input type="checkbox" title="Click to toggle" data-name="${name}" class="${isActive ? 'toggle_disable' : 'toggle_enable'} ${checkboxClass}" ${isActive ? 'checked' : ''}>` :
         `<input type="checkbox" title="Cannot enable extension" data-name="${name}" class="extension_missing ${checkboxClass}" disabled>`;
     let deleteButton = isExternal ? `<span class="delete-button"><button class="btn_delete menu_button" data-name="${name.replace('third-party', '')externalId}" title="Delete"><i class="fa-fw fa-solid fa-trash-can"></i></button></span>` : '';
+-
 +    let updateButton = isExternal ? `<button class="btn_update menu_button displayNone" data-name="${externalId}" title="Update available"><i class="fa-solid fa-download fa-fw"></i></button>` : '';
 -    // if external, wrap the name in a link to the repo
 +    let moveButton = isExternal && isUserAdmin ? `<button class="btn_move menu_button" data-name="${externalId}" title="Move"><i class="fa-solid fa-folder-tree fa-fw"></i></button>` : '';
+-
 +    let modulesInfo = '';
 -    let extensionHtml = `<hr>
 -        <h4>
 -            ${updateButton}
 -            ${deleteButton}
 -            ${originHtml}
 -            <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">
 -                ${DOMPurify.sanitize(displayName)}${displayVersion}
 -            </span>
 -            ${isExternal ? '</a>' : ''}
+-
 -            <span style="float:right;">${toggleElement}</span>
 -        </h4>`;
     if (isActive && Array.isArray(manifest.optional)) {
         const optional = new Set(manifest.optional);
         modules.forEach(x => optional.delete(x));
         if (optional.size > 0) {
             const optionalString = DOMPurify.sanitize([...optional].join(', '));
             extensionHtmlmodulesInfo += `<pdiv class="extension_modules">Optional modules: <span class="optional">${optionalString}</span></pdiv>`;
+        }
     } else if (!isDisabled) { // Neither active nor disabled
         const requirements = new Set(manifest.requires);
         modules.forEach(x => requirements.delete(x));
         if (requirements.size > 0) {
             const requirementsString = DOMPurify.sanitize([...requirements].join(', '));
             extensionHtmlmodulesInfo += `<pdiv class="extension_modules">Missing modules: <span class="failure">${requirementsString}</span></pdiv>`;
+        }
+    }
 +    // if external, wrap the name in a link to the repo
++
 +    let extensionHtml = `
 +        <div class="extension_block" data-name="${externalId}">
 +            <div class="extension_toggle">
 +                ${toggleElement}
 +            </div>
 +            <div class="extension_icon">
 +                ${extensionIcon}
 +            </div>
 +            <div class="flexGrow extension_text_block">
 +                ${originHtml}
 +                <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">
 +                    <span class="extension_name">${DOMPurify.sanitize(displayName)}</span>
 +                    <span class="extension_version">${DOMPurify.sanitize(displayVersion)}</span>
 +                    ${modulesInfo}
 +                </span>
 +                ${isExternal ? '</a>' : ''}
 +            </div>
++
 +            <div class="extension_actions flex-container alignItemsCenter">
 +                ${updateButton}
 +                ${moveButton}
 +                ${deleteButton}
 +            </div>
 +        </div>`;
++
     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 {Promise<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);

@@ -591,7 +664,7 @@ async function getExtensionData(extension) {
591	664
592	665	const checkboxClass = isDisabled ? 'checkbox_disabled' : '';
593	666
594	667	const extensionHtml = await generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal, checkboxClass);
595	668
596	669	return { isExternal, extensionHtml };
597	670	}

  * Generates the HTML strings for all extensions and displays them in a popup.
  */
 async function showExtensionsDetails() {
 +    const abortController = new AbortController();
     let popupPromise;
     try {
 -        const htmlDefault = $('<h3>Built-in Extensions:</h3>');
 +        // If we are updating an extension, the "old" popup is still active. We should close that.
 -        const htmlExternal = $('<h3>Installed Extensions:</h3>').addClass('opacity50p');
 +        let initialScrollTop = 0;
 -        const htmlLoading = $(`<h3 class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5">
 +        const oldPopup = Popup.util.popups.find(popup => popup.content.querySelector('.extensions_info'));
 +        if (oldPopup) {
 +            initialScrollTop = oldPopup.content.scrollTop;
 +            await oldPopup.completeCancelled();
 +        }
 +        const htmlDefault = $('<div class="marginBot10"><h3 class="textAlignCenter">Built-in Extensions:</h3></div>');
 +        const htmlExternal = $('<div class="marginBot10"><h3 class="textAlignCenter">Installed Extensions:</h3></div>');
 +        const htmlLoading = $(`<div class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5">
             <i class="fa-solid fa-spinner fa-spin"></i>
             <span>Loading third-party extensions... Please wait...</span>
         </h3div>`);
 -        /** @type {Promise<any>[]} */
 +        htmlExternal.append(htmlLoading);
 -        const promises = [];
 -        const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order);
 -        for (const extension of extensions) {
 +        const extensions = Object.entries(manifests).sort((a, b) => sortManifests(a[1], b[1])).map(getExtensionData);
 -            promises.push(getExtensionData(extension));
 -        }
         promisesextensions.forEach(promisevalue => {
 -            promise.then(value => {
             const { isExternal, extensionHtml } = value;
             const container = isExternal ? htmlExternal : htmlDefault;
             container.append(extensionHtml);
         });
 -        });
+-
 -        Promise.allSettled(promises).then(() => {
 -            htmlLoading.remove();
 -            htmlExternal.removeClass('opacity50p');
 -        });
         const html = $('<div></div>')
             .addClass('extensions_info')
 -            .append(getModuleInformation())
             .append(htmlDefault)
             .append(htmlLoadinghtmlExternal)
             .append(htmlExternalgetModuleInformation());
         /** @type {import('./popup.js').CustomPopupButton} */
         const updateAllButton = {

             },
         };
 -        // If we are updating an extension, the "old" popup is still active. We should close that.
 -        const oldPopup = Popup.util.popups.find(popup => popup.content.querySelector('.extensions_info'));
 -        if (oldPopup) {
 -            await oldPopup.complete(POPUP_RESULT.CANCELLED);
 -        }
+-
         let waitingForSave = false;
         const popup = new Popup(html, POPUP_TYPE.TEXT, '', {

+                }
                 if (stateChanged) {
                     waitingForSave = true;
                     const toast = toastr.info('t`The page will be reloaded shortly...'`, 't`Extensions state changed'`);
                     await saveSettings();
                     toastr.clear(toast);
                     waitingForSave = false;

             },
         });
         popupPromise = popup.show();
 +        popup.content.scrollTop = initialScrollTop;
 +        checkForUpdatesManual(abortController.signal).finally(() => htmlLoading.remove());
     } catch (error) {
         toastr.error('t`Error loading extensions. See browser console for details.'`);
         console.error(error);
+    }
     if (popupPromise) {
         await popupPromise;
 +        abortController.abort();
+    }
     if (requiresReload) {
         showLoader();

+    }
+}
+-
 /**
  * Handles the click event for the update button of an extension.
  * This function makes a POST request to '/update_extensionapi/extensions/update' with the extension's name.
  * If the extension is already up to date, it displays a success message.
  * If the extension is not up to date, it updates the extension and displays a success message with the new commit hash.
  */
 async function onUpdateClick() {
 +    const isCurrentUserAdmin = isAdmin();
     const extensionName = $(this).data('name');
 -    $(this).find('i').addClass('fa-spin');
 +    const isGlobal = getExtensionType(extensionName) === 'global';
 +    if (isGlobal && !isCurrentUserAdmin) {
 +        toastr.error(t`You don't have permission to update global extensions.`);
 +        return;
 +    }
++
 +    const icon = $(this).find('i');
 +    icon.addClass('fa-spin');
     await updateExtension(extensionName, false);
 +    // updateExtension eats the error, but we can at least stop the spinner
 +    icon.removeClass('fa-spin');
+}
 /**

         const response = await fetch('/api/extensions/update', {
             method: 'POST',
             headers: getRequestHeaders(),
             body: JSON.stringify({ extensionName }),
 +                extensionName,
 +                global: getExtensionType(extensionName) === 'global',
 +            }),
         });
 +        if (!response.ok) {
 +            const text = await response.text();
 +            toastr.error(text || response.statusText, t`Extension update failed`, { timeOut: 5000 });
 +            console.error('Extension update failed', response.status, response.statusText, text);
 +            return;
 +        }
++
         const data = await response.json();
         if (!quiet) {
             void showExtensionsDetails();
+        }
         if (data.isUpToDate) {

  */
 async function onDeleteClick() {
     const extensionName = $(this).data('name');
 +    const isCurrentUserAdmin = isAdmin();
 +    const isGlobal = getExtensionType(extensionName) === 'global';
 +    if (isGlobal && !isCurrentUserAdmin) {
 +        toastr.error(t`You don't have permission to delete global extensions.`);
 +        return;
 +    }
++
     // use callPopup to create a popup for the user to confirm before delete
     const confirmation = await callGenericPopup(t`Are you sure you want to delete ${extensionName}?`, POPUP_TYPE.CONFIRM, '', {});
     if (confirmation === POPUP_RESULT.AFFIRMATIVE) {
         await deleteExtension(extensionName);
+    }
+}
 +async function onMoveClick() {
 +    const extensionName = $(this).data('name');
 +    const isCurrentUserAdmin = isAdmin();
 +    const isGlobal = getExtensionType(extensionName) === 'global';
 +    if (isGlobal && !isCurrentUserAdmin) {
 +        toastr.error(t`You don't have permission to move extensions.`);
 +        return;
 +    }
++
 +    const source = getExtensionType(extensionName);
 +    const destination = source === 'global' ? 'local' : 'global';
++
 +    const confirmationHeader = t`Move extension`;
 +    const confirmationText = source == 'global'
 +        ? t`Are you sure you want to move ${extensionName} to your local extensions? This will make it available only for you.`
 +        : t`Are you sure you want to move ${extensionName} to the global extensions? This will make it available for all users.`;
++
 +    const confirmation = await Popup.show.confirm(confirmationHeader, confirmationText);
++
 +    if (!confirmation) {
 +        return;
 +    }
++
 +    $(this).find('i').addClass('fa-spin');
 +    await moveExtension(extensionName, source, destination);
 +}
++
 +/**
 + * Moves an extension via the API.
 + * @param {string} extensionName Extension name
 + * @param {string} source Source type
 + * @param {string} destination Destination type
 + * @returns {Promise<void>}
 + */
 +async function moveExtension(extensionName, source, destination) {
 +    try {
 +        const result = await fetch('/api/extensions/move', {
 +            method: 'POST',
 +            headers: getRequestHeaders(),
 +            body: JSON.stringify({
 +                extensionName,
 +                source,
 +                destination,
 +            }),
 +        });
++
 +        if (!result.ok) {
 +            const text = await result.text();
 +            toastr.error(text || result.statusText, t`Extension move failed`, { timeOut: 5000 });
 +            console.error('Extension move failed', result.status, result.statusText, text);
 +            return;
 +        }
++
 +        toastr.success(t`Extension ${extensionName} moved.`);
 +        await loadExtensionSettings({}, false, false);
 +        void showExtensionsDetails();
 +    } catch (error) {
 +        console.error('Error:', error);
 +    }
 +}
++
 +/**
 + * Deletes an extension via the API.
 + * @param {string} extensionName Extension name to delete
 + */
 export async function deleteExtension(extensionName) {
     try {
         await fetch('/api/extensions/delete', {
             method: 'POST',
             headers: getRequestHeaders(),
             body: JSON.stringify({ extensionName }),
 +                extensionName,
 +                global: getExtensionType(extensionName) === 'global',
 +            }),
         });
     } catch (error) {
         console.error('Error:', error);
+    }
     toastr.success(t`Extension ${extensionName} deleted`);
 -    showExtensionsDetails();
 +    delay(1000).then(() => location.reload());
 -    // reload the page to remove the extension from the list
 -    location.reload();
+}
 /**
  * Fetches the version details of a specific extension.
+ *
  * @param {string} extensionName - The name of the extension.
 + * @param {AbortSignal} [abortSignal] - The signal to abort the operation.
  * @return {Promise<object>} - An object containing the extension's version details.
  * This object includes the currentBranchName, currentCommitHash, isUpToDate, and remoteUrl.
  * @throws {error} - If there is an error during the fetch operation, it logs the error to the console.
  */
 async function getExtensionVersion(extensionName, abortSignal) {
     try {
         const response = await fetch('/api/extensions/version', {
             method: 'POST',
             headers: getRequestHeaders(),
             body: JSON.stringify({ extensionName }),
 +                extensionName,
 +                global: getExtensionType(extensionName) === 'global',
 +            }),
 +            signal: abortSignal,
         });
         const data = await response.json();

 /**
  * Installs a third-party extension via the API.
  * @param {string} url Extension repository URL
 + * @param {boolean} global Is the extension global?
  * @returns {Promise<void>}
  */
 export async function installExtension(url, global) {
     console.debug('Extension installation started', url);
     toastr.info('t`Please wait...'`, 't`Installing extension'`);
     const request = await fetch('/api/extensions/install', {
         method: 'POST',
         headers: getRequestHeaders(),
         body: JSON.stringify({ url }),
 +            url,
 +            global,
 +        }),
     });
     if (!request.ok) {
         const text = await request.text();
         toastr.warning(text || request.statusText, 't`Extension installation failed'`, { timeOut: 5000 });
         console.error('Extension installation failed', request.status, request.statusText, text);
         return;
+    }

  * @param {boolean} versionChanged Is this a version change?
  * @param {boolean} enableAutoUpdate Enable auto-update
  */
 export async function loadExtensionSettings(settings, versionChanged, enableAutoUpdate) {
     if (settings.extension_settings) {
         Object.assign(extension_settings, settings.extension_settings);
+    }

     // Activate offline extensions
     await eventSource.emit(event_types.EXTENSIONS_FIRST_LOAD);
     extensionNamesconst extensions = await discoverExtensions();
 +    extensionNames = extensions.map(x => x.name);
 +    extensionTypes = Object.fromEntries(extensions.map(x => [x.name, x.type]));
     manifests = await getManifests(extensionNames);
     if (versionChanged && enableAutoUpdate) {

     }, 1);
+}
 +const concurrencyLimit = 5;
 +let activeRequestsCount = 0;
 +const versionCheckQueue = [];
++
 +function enqueueVersionCheck(fn) {
 +    return new Promise((resolve, reject) => {
 +        versionCheckQueue.push(() => fn().then(resolve).catch(reject));
 +        processVersionCheckQueue();
 +    });
 +}
++
 +function processVersionCheckQueue() {
 +    if (activeRequestsCount >= concurrencyLimit || versionCheckQueue.length === 0) {
 +        return;
 +    }
 +    activeRequestsCount++;
 +    const fn = versionCheckQueue.shift();
 +    fn().finally(() => {
 +        activeRequestsCount--;
 +        processVersionCheckQueue();
 +    });
 +}
++
 +/**
 + * Performs a manual check for updates on all 3rd-party extensions.
 + * @param {AbortSignal} abortSignal Signal to abort the operation
 + * @returns {Promise<any[]>}
 + */
 +async function checkForUpdatesManual(abortSignal) {
 +    const promises = [];
 +    for (const id of Object.keys(manifests).filter(x => x.startsWith('third-party')).sort((a, b) => sortManifests(manifests[a], manifests[b]))) {
 +        const externalId = id.replace('third-party', '');
 +        const promise = enqueueVersionCheck(async () => {
 +            try {
 +                const data = await getExtensionVersion(externalId, abortSignal);
 +                const extensionBlock = document.querySelector(`.extension_block[data-name="${externalId}"]`);
 +                if (extensionBlock && data) {
 +                    if (data.isUpToDate === false) {
 +                        const buttonElement = extensionBlock.querySelector('.btn_update');
 +                        if (buttonElement) {
 +                            buttonElement.classList.remove('displayNone');
 +                        }
 +                        const nameElement = extensionBlock.querySelector('.extension_name');
 +                        if (nameElement) {
 +                            nameElement.classList.add('update_available');
 +                        }
 +                    }
 +                    let branch = data.currentBranchName;
 +                    let commitHash = data.currentCommitHash;
 +                    let origin = data.remoteUrl;
++
 +                    const originLink = extensionBlock.querySelector('a');
 +                    if (originLink) {
 +                        try {
 +                            const url = new URL(origin);
 +                            if (!['https:', 'http:'].includes(url.protocol)) {
 +                                throw new Error('Invalid protocol');
 +                            }
 +                            originLink.href = url.href;
 +                            originLink.target = '_blank';
 +                            originLink.rel = 'noopener noreferrer';
 +                        } catch (error) {
 +                            console.log('Error setting origin link', originLink, error);
 +                        }
 +                    }
++
 +                    const versionElement = extensionBlock.querySelector('.extension_version');
 +                    if (versionElement) {
 +                        versionElement.textContent += ` (${branch}-${commitHash.substring(0, 7)})`;
 +                    }
 +                }
 +            } catch (error) {
 +                console.error('Error checking for extension updates', error);
 +            }
 +        });
 +        promises.push(promise);
 +    }
 +    return Promise.allSettled(promises);
 +}
++
 /**
  * Checks if there are updates available for 3rd-party extensions.
  * @param {boolean} force Skip nag check

         localStorage.setItem(STORAGE_NAG_KEY, currentDate);
+    }
 +    const isCurrentUserAdmin = isAdmin();
     const updatesAvailable = [];
     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
 +        const isGlobal = getExtensionType(id) === 'global';
 +        if (isGlobal && !isCurrentUserAdmin) {
 +            console.debug(`Skipping global extension: ${manifest.display_name} (${id}) for non-admin user`);
 +            continue;
 +        }
++
         if (manifest.auto_update && id.startsWith('third-party')) {
             const promise = new PromiseenqueueVersionCheck(async (resolve, reject) => {
                 try {
                     const data = await getExtensionVersion(id.replace('third-party', ''));
                     if (!data.isUpToDate === false) {
                         updatesAvailable.push(manifest.display_name);
+                    }
 -                    resolve();
                 } catch (error) {
                     console.error('Error checking for extension updates', error);
 -                    reject();
+                }
             });
             promises.push(promise);

+    }
     const banner = toastr.info('Auto-updating extensions. This may take several minutes.', 'Please wait...', { timeOut: 10000, extendedTimeOut: 10000 });
 +    const isCurrentUserAdmin = isAdmin();
     const promises = [];
     for (const [id, manifest] of Object.entries(manifests)) {
 +        const isGlobal = getExtensionType(id) === 'global';
 +        if (isGlobal && !isCurrentUserAdmin) {
 +            console.debug(`Skipping global extension: ${manifest.display_name} (${id}) for non-admin user`);
 +            continue;
 +        }
         if ((forceAll || manifest.auto_update) && id.startsWith('third-party')) {
             console.debug(`Auto-updating 3rd-party extension: ${manifest.display_name} (${id})`);
             promises.push(updateExtension(id.replace('third-party', ''), true));

  * @param {number} contextSize Context size
  * @returns {Promise<boolean>} True if generation should be aborted
  */
 export async function runGenerationInterceptors(chat, contextSize) {
     let aborted = false;
     let exitImmediately = false;

         exitImmediately = immediately;
     };
     for (const manifest of Object.values(manifests).filter(x => x.generate_interceptor).sort((a, b) => sortManifests(a.loading_order -, b.loading_order))) {
         const interceptorKey = manifest.generate_interceptor;
         if (typeof windowglobalThis[interceptorKey] === 'function') {
             try {
                 await windowglobalThis[interceptorKey](chat, contextSize, abort);
             } catch (e) {
                 console.error(`Failed running interceptor for ${manifest.display_name}`, e);
+            }

  * @returns {Promise<void>}
  */
 export async function openThirdPartyExtensionMenu(suggestUrl = '') {
     const htmlisCurrentUserAdmin = await renderTemplateAsyncisAdmin('installExtension');
     const inputhtml = await callGenericPopuprenderTemplateAsync(html, POPUP_TYPE.INPUT'installExtension', suggestUrl{ ??isCurrentUserAdmin ''});
 +    const okButton = isCurrentUserAdmin ? t`Install just for me` : t`Install`;
++
 +    let global = false;
 +    const installForAllButton = {
 +        text: t`Install for all users`,
 +        appendAtEnd: false,
 +        action: async () => {
 +            global = true;
 +            await popup.complete(POPUP_RESULT.AFFIRMATIVE);
 +        },
 +    };
++
 +    const customButtons = isCurrentUserAdmin ? [installForAllButton] : [];
 +    const popup = new Popup(html, POPUP_TYPE.INPUT, suggestUrl ?? '', { okButton, customButtons });
 +    const input = await popup.show();
     if (!input) {
         console.debug('Extension install cancelled');

@@ -1042,11 +1317,9 @@ export async function openThirdPartyExtensionMenu(suggestUrl = '') {
1042	1317	}
1043	1318
1044	1319	const url = String(input).trim();
1045	1320	await installExtension(url, global);
1046	1321	}
1047	1322
1048		-
1049		-
1050	1323	export async function initExtensions() {
1051	1324	await addExtensionsButtonAndMenu();
1052	1325	$('#extensionsMenuButton').css('display', 'flex');

     $('#extensions_autoconnect').on('input', autoConnectInputHandler);
     $('#extensions_details').on('click', showExtensionsDetails);
     $('#extensions_notify_updates').on('input', notifyUpdatesInputHandler);
     $(document).on('click', '.extensions_info .extension_block .toggle_disable', onDisableExtensionClick);
     $(document).on('click', '.extensions_info .extension_block .toggle_enable', onEnableExtensionClick);
     $(document).on('click', '.extensions_info .extension_block .btn_update', onUpdateClick);
     $(document).on('click', '.extensions_info .extension_block .btn_delete', onDeleteClick);
 +    $(document).on('click', '.extensions_info .extension_block .btn_move', onMoveClick);
     /**
      * Handles the click event for the third-party extension import button.

public/scripts/extensions/third-party/.gitkeep+0 -0 Viewed

public/scripts/user.js+1 -1 Viewed

  * Check if the current user is an admin.
  * @returns {boolean} True if the current user is an admin
  */
 export function isAdmin() {
     if (!currentUser) {
         return false;
+    }

src/constants.js+1 -0 Viewed

     backups: 'backups/',
     sounds: 'public/sounds',
     extensions: 'public/scripts/extensions',
 +    globalExtensions: 'public/scripts/extensions/third-party',
 };
 export const SETTINGS_FILE = 'settings.json';

src/endpoints/extensions.js+117 -32 Viewed

             fs.mkdirSync(path.join(request.user.directories.extensions));
+        }
 -        const url = request.body.url;
 +        if (!fs.existsSync(PUBLIC_DIRECTORIES.globalExtensions)) {
 -        const extensionPath = path.join(request.user.directories.extensions, path.basename(url, '.git'));
 +            fs.mkdirSync(PUBLIC_DIRECTORIES.globalExtensions);
 +        }
++
 +        const { url, global } = request.body;
++
 +        if (global && !request.user.profile.admin) {
 +            console.warn(`User ${request.user.profile.handle} does not have permission to install global extensions.`);
 +            return response.status(403).send('Forbidden: No permission to install global extensions.');
 +        }
++
 +        const basePath = global ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
 +        const extensionPath = path.join(basePath, sanitize(path.basename(url, '.git')));
         if (fs.existsSync(extensionPath)) {
             return response.status(409).send(`Directory already exists at ${extensionPath}`);

         await git.clone(url, extensionPath, { '--depth': 1 });
         console.log(`Extension has been cloned at ${extensionPath}`);
+-
         const { version, author, display_name } = await getManifest(extensionPath);
+-
         return response.send({ version, author, display_name, extensionPath });
     } catch (error) {
         console.log('Importing custom content failed', error);

+    }
     try {
         const { extensionName, global } = request.body.extensionName;
 -        const extensionPath = path.join(request.user.directories.extensions, extensionName);
++
 +        if (global && !request.user.profile.admin) {
 +            console.warn(`User ${request.user.profile.handle} does not have permission to update global extensions.`);
 +            return response.status(403).send('Forbidden: No permission to update global extensions.');
 +        }
++
 +        const basePath = global ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
 +        const extensionPath = path.join(basePath, extensionName);
         if (!fs.existsSync(extensionPath)) {
             return response.status(404).send(`Directory does not exist at ${extensionPath}`);

         const { isUpToDate, remoteUrl } = await checkIfRepoIsUpToDate(extensionPath);
         const currentBranch = await git.cwd(extensionPath).branch();
         if (!isUpToDate) {
+-
             await git.cwd(extensionPath).pull('origin', currentBranch.current);
             console.log(`Extension has been updated at ${extensionPath}`);
         } else {

+    }
 });
 +router.post('/move', jsonParser, async (request, response) => {
 +    try {
 +        const { extensionName, source, destination } = request.body;
++
 +        if (!extensionName || !source || !destination) {
 +            return response.status(400).send('Bad Request. Not all required parameters are provided.');
 +        }
++
 +        if (!request.user.profile.admin) {
 +            console.warn(`User ${request.user.profile.handle} does not have permission to move extensions.`);
 +            return response.status(403).send('Forbidden: No permission to move extensions.');
 +        }
++
 +        const sourceDirectory = source === 'global' ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
 +        const destinationDirectory = destination === 'global' ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
 +        const sourcePath = path.join(sourceDirectory, sanitize(extensionName));
 +        const destinationPath = path.join(destinationDirectory, sanitize(extensionName));
++
 +        if (!fs.existsSync(sourcePath) || !fs.statSync(sourcePath).isDirectory()) {
 +            console.error(`Source directory does not exist at ${sourcePath}`);
 +            return response.status(404).send('Source directory does not exist.');
 +        }
++
 +        if (fs.existsSync(destinationPath)) {
 +            console.error(`Destination directory already exists at ${destinationPath}`);
 +            return response.status(409).send('Destination directory already exists.');
 +        }
++
 +        if (source === destination) {
 +            console.error('Source and destination directories are the same');
 +            return response.status(409).send('Source and destination directories are the same.');
 +        }
++
 +        fs.cpSync(sourcePath, destinationPath, { recursive: true, force: true });
 +        fs.rmSync(sourcePath, { recursive: true, force: true });
 +        console.log(`Extension has been moved from ${sourcePath} to ${destinationPath}`);
++
 +        return response.sendStatus(204);
 +    } catch (error) {
 +        console.log('Moving extension failed', error);
 +        return response.status(500).send('Internal Server Error. Try again later.');
 +    }
 +});
++
 /**
  * HTTP POST handler function to get the current git commit hash and branch name for a given extension.
  * It checks whether the repository is up-to-date with the remote, and returns the status along with

+    }
     try {
         const { extensionName, global } = request.body.extensionName;
         const extensionPathbasePath = pathglobal ? PUBLIC_DIRECTORIES.join(globalExtensions : request.user.directories.extensions, extensionName);
 +        const extensionPath = path.join(basePath, sanitize(extensionName));
         if (!fs.existsSync(extensionPath)) {
             return response.status(404).send(`Directory does not exist at ${extensionPath}`);
+        }
 +        let currentCommitHash;
 +        try {
 +            currentCommitHash = await git.cwd(extensionPath).revparse(['HEAD']);
 +        } catch (error) {
 +            // it is not a git repo, or has no commits yet, or is a bare repo
 +            // not possible to update it, most likely can't get the branch name either
 +            return response.send({ currentBranchName: null, currentCommitHash, isUpToDate: true, remoteUrl: null });
 +        }
++
         const currentBranch = await git.cwd(extensionPath).branch();
         // get only the working branch
         const currentBranchName = currentBranch.current;
         await git.cwd(extensionPath).fetch('origin');
 -        const currentCommitHash = await git.cwd(extensionPath).revparse(['HEAD']);
 +        console.log(extensionName, currentBranchName, currentCommitHash);
 -        console.log(currentBranch, currentCommitHash);
         const { isUpToDate, remoteUrl } = await checkIfRepoIsUpToDate(extensionPath);
         return response.send({ currentBranchName, currentCommitHash, isUpToDate, remoteUrl });

         return response.status(400).send('Bad Request: extensionName is required in the request body.');
+    }
 -    // Sanitize the extension name to prevent directory traversal
 -    const extensionName = sanitize(request.body.extensionName);
+-
     try {
 -        const extensionPath = path.join(request.user.directories.extensions, extensionName);
 +        const { extensionName, global } = request.body;
++
 +        if (global && !request.user.profile.admin) {
 +            console.warn(`User ${request.user.profile.handle} does not have permission to delete global extensions.`);
 +            return response.status(403).send('Forbidden: No permission to delete global extensions.');
 +        }
++
 +        const basePath = global ? PUBLIC_DIRECTORIES.globalExtensions : request.user.directories.extensions;
 +        const extensionPath = path.join(basePath, sanitize(extensionName));
         if (!fs.existsSync(extensionPath)) {
             return response.status(404).send(`Directory does not exist at ${extensionPath}`);

  * If the folder is called third-party, search for subfolders instead
  */
 router.get('/discover', jsonParser, function (request, response) {
 -    // get all folders in the extensions folder, except third-party
 -    const extensions = fs
 -        .readdirSync(PUBLIC_DIRECTORIES.extensions)
 -        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.extensions, f)).isDirectory())
 -        .filter(f => f !== 'third-party');
+-
 -    // get all folders in the third-party folder, if it exists
+-
     if (!fs.existsSync(path.join(request.user.directories.extensions))) {
 -        return response.send(extensions);
 +        fs.mkdirSync(path.join(request.user.directories.extensions));
+    }
 -    const thirdPartyExtensions = fs
 +    if (!fs.existsSync(PUBLIC_DIRECTORIES.globalExtensions)) {
 -        .readdirSync(path.join(request.user.directories.extensions))
 +        fs.mkdirSync(PUBLIC_DIRECTORIES.globalExtensions);
 -        .filter(f => fs.statSync(path.join(request.user.directories.extensions, f)).isDirectory());
 +    }
+-
 -    // add the third-party extensions to the extensions array
 -    extensions.push(...thirdPartyExtensions.map(f => `third-party/${f}`));
 -    console.log(extensions);
 +    // Get all folders in system extensions folder, excluding third-party
 +    const builtInExtensions = fs
 +        .readdirSync(PUBLIC_DIRECTORIES.extensions)
 +        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.extensions, f)).isDirectory())
 +        .filter(f => f !== 'third-party')
 +        .map(f => ({ type: 'system', name: f }));
 -    return response.send(extensions);
 +    // Get all folders in local extensions folder
 +    const userExtensions = fs
 +        .readdirSync(path.join(request.user.directories.extensions))
 +        .filter(f => fs.statSync(path.join(request.user.directories.extensions, f)).isDirectory())
 +        .map(f => ({ type: 'local', name: `third-party/${f}` }));
++
 +    // Get all folders in global extensions folder
 +    // In case of a conflict, the extension will be loaded from the user folder
 +    const globalExtensions = fs
 +        .readdirSync(PUBLIC_DIRECTORIES.globalExtensions)
 +        .filter(f => fs.statSync(path.join(PUBLIC_DIRECTORIES.globalExtensions, f)).isDirectory())
 +        .map(f => ({ type: 'global', name: `third-party/${f}` }))
 +        .filter(f => !userExtensions.some(e => e.name === f.name));
++
 +    // Combine all extensions
 +    const allExtensions = [...builtInExtensions, ...userExtensions, ...globalExtensions];
 +    console.log(allExtensions);
++
 +    return response.send(allExtensions);
 });

src/users.js+29 -1 Viewed

+}
 /**
 + * Creates a route handler for serving extensions.
 + * @param {(req: import('express').Request) => string} directoryFn A function that returns the directory path to serve files from
 + * @returns {import('express').RequestHandler}
 + */
 +function createExtensionsRouteHandler(directoryFn) {
 +    return async (req, res) => {
 +        try {
 +            const directory = directoryFn(req);
 +            const filePath = decodeURIComponent(req.params[0]);
++
 +            const existsLocal = fs.existsSync(path.join(directory, filePath));
 +            if (existsLocal) {
 +                return res.sendFile(filePath, { root: directory });
 +            }
++
 +            const existsGlobal = fs.existsSync(path.join(PUBLIC_DIRECTORIES.globalExtensions, filePath));
 +            if (existsGlobal) {
 +                return res.sendFile(filePath, { root: PUBLIC_DIRECTORIES.globalExtensions });
 +            }
++
 +            return res.sendStatus(404);
 +        } catch (error) {
 +            return res.sendStatus(500);
 +        }
 +    };
 +}
++
 +/**
  * Verifies that the current user is an admin.
  * @param {import('express').Request} request Request object
  * @param {import('express').Response} response Response object

 router.use('/assets/*', createRouteHandler(req => req.user.directories.assets));
 router.use('/user/images/*', createRouteHandler(req => req.user.directories.userImages));
 router.use('/user/files/*', createRouteHandler(req => req.user.directories.files));
 router.use('/scripts/extensions/third-party/*', createRouteHandlercreateExtensionsRouteHandler(req => req.user.directories.extensions));