migrate

public/scripts/extensions/assets/character.html

@@ -0,0 +1,9 @@
+<div class="characterAsset">
+    <div class="characterAssetName">{{name}}</div>
+    <img class="characterAssetImage" alt="{{name}}" src="{{url}}" />
+    <div class="characterAssetDescription" title="{{description}}">{{description}}</div>
+    <div class="characterAssetButtons flex-container">
+        <div class="characterAssetDownloadButton right_menu_button fa-fw fa-solid fa-download" title="Download"></div>
+        <div class="characterAssetCheckMark right_menu_button fa-fw fa-solid fa-check" title="Installed"></div>
+    </div>
+</div>

public/scripts/extensions/assets/index.js

@@ -0,0 +1,472 @@
+/*
+TODO:
+*/
+//const DEBUG_TONY_SAMA_FORK_MODE = true
+
+import { DOMPurify } from '../../../lib.js';
+import { getRequestHeaders, processDroppedFiles, eventSource, event_types } from '../../../script.js';
+import { deleteExtension, extensionNames, getContext, installExtension, renderExtensionTemplateAsync } from '../../extensions.js';
+import { POPUP_TYPE, Popup, callGenericPopup } from '../../popup.js';
+import { executeSlashCommands } from '../../slash-commands.js';
+import { accountStorage } from '../../util/AccountStorage.js';
+import { flashHighlight, getStringHash, isValidUrl } from '../../utils.js';
+import { t } from '../../i18n.js';
+export { MODULE_NAME };
+
+const MODULE_NAME = 'assets';
+const DEBUG_PREFIX = '<Assets module> ';
+let previewAudio = null;
+let ASSETS_JSON_URL = 'https://raw.githubusercontent.com/ChuQuadrant/ChuQuadrant-Content/main/index.json';
+
+
+// DBG
+//if (DEBUG_TONY_SAMA_FORK_MODE)
+//    ASSETS_JSON_URL = "https://raw.githubusercontent.com/Tony-sama/ChuQuadrant-Content/main/index.json"
+let availableAssets = {};
+let currentAssets = {};
+
+//#############################//
+//  Extension UI and Settings  //
+//#############################//
+
+function filterAssets() {
+    const searchValue = String($('#assets_search').val()).toLowerCase().trim();
+    const typeValue = String($('#assets_type_select').val());
+
+    if (typeValue === '') {
+        $('#assets_menu .assets-list-div').show();
+        $('#assets_menu .assets-list-div h3').show();
+    } else {
+        $('#assets_menu .assets-list-div h3').hide();
+        $('#assets_menu .assets-list-div').hide();
+        $(`#assets_menu .assets-list-div[data-type="${typeValue}"]`).show();
+    }
+
+    if (searchValue === '') {
+        $('#assets_menu .asset-block').show();
+    } else {
+        $('#assets_menu .asset-block').hide();
+        $('#assets_menu .asset-block').filter(function () {
+            return $(this).text().toLowerCase().includes(searchValue);
+        }).show();
+    }
+}
+
+const KNOWN_TYPES = {
+    'extension': 'Extensions',
+    'character': 'Characters',
+    'ambient': 'Ambient sounds',
+    'bgm': 'Background music',
+    'blip': 'Blip sounds',
+};
+
+async function downloadAssetsList(url) {
+    updateCurrentAssets().then(async function () {
+        fetch(url, { cache: 'no-cache' })
+            .then(response => response.json())
+            .then(async function(json) {
+
+                availableAssets = {};
+                $('#assets_menu').empty();
+
+                console.debug(DEBUG_PREFIX, 'Received assets dictionary', json);
+
+                for (const i of json) {
+                    //console.log(DEBUG_PREFIX,i)
+                    if (availableAssets[i['type']] === undefined)
+                        availableAssets[i['type']] = [];
+
+                    availableAssets[i['type']].push(i);
+                }
+
+                console.debug(DEBUG_PREFIX, 'Updated available assets to', availableAssets);
+                // First extensions, then everything else
+                const assetTypes = Object.keys(availableAssets).sort((a, b) => (a === 'extension') ? -1 : (b === 'extension') ? 1 : 0);
+
+                $('#assets_type_select').empty();
+                $('#assets_search').val('');
+                $('#assets_type_select').append($('<option />', { value: '', text: t`All` }));
+
+                for (const type of assetTypes) {
+                    const option = $('<option />', { value: type, text: t([KNOWN_TYPES[type] || type]) });
+                    $('#assets_type_select').append(option);
+                }
+
+                if (assetTypes.includes('extension')) {
+                    $('#assets_type_select').val('extension');
+                }
+
+                $('#assets_type_select').off('change').on('change', filterAssets);
+                $('#assets_search').off('input').on('input', filterAssets);
+
+                for (const assetType of assetTypes) {
+                    let assetTypeMenu = $('<div />', { id: 'assets_audio_ambient_div', class: 'assets-list-div' });
+                    assetTypeMenu.attr('data-type', assetType);
+                    assetTypeMenu.append(`<h3>${KNOWN_TYPES[assetType] || assetType}</h3>`).hide();
+
+                    if (assetType == 'extension') {
+                        assetTypeMenu.append(await renderExtensionTemplateAsync('assets', 'installation'));
+                    }
+
+                    for (const i in availableAssets[assetType].sort((a, b) => a?.name && b?.name && a['name'].localeCompare(b['name']))) {
+                        const asset = availableAssets[assetType][i];
+                        const elemId = `assets_install_${assetType}_${i}`;
+                        let element = $('<div />', { id: elemId, class: 'asset-download-button right_menu_button' });
+                        const label = $('<i class="fa-fw fa-solid fa-download fa-lg"></i>');
+                        element.append(label);
+
+                        //if (DEBUG_TONY_SAMA_FORK_MODE)
+                        //    asset["url"] = asset["url"].replace("https://github.com/ChuQuadrant/","https://github.com/Tony-sama/"); // DBG
+
+                        console.debug(DEBUG_PREFIX, 'Checking asset', asset['id'], asset['url']);
+
+                        const assetInstall = async function () {
+                            element.off('click');
+                            label.removeClass('fa-download');
+                            this.classList.add('asset-download-button-loading');
+                            await installAsset(asset['url'], assetType, asset['id']);
+                            label.addClass('fa-check');
+                            this.classList.remove('asset-download-button-loading');
+                            element.on('click', assetDelete);
+                            element.on('mouseenter', function () {
+                                label.removeClass('fa-check');
+                                label.addClass('fa-trash');
+                                label.addClass('redOverlayGlow');
+                            }).on('mouseleave', function () {
+                                label.addClass('fa-check');
+                                label.removeClass('fa-trash');
+                                label.removeClass('redOverlayGlow');
+                            });
+                        };
+
+                        const assetDelete = async function () {
+                            if (assetType === 'character') {
+                                toastr.error('Go to the characters menu to delete a character.', 'Character deletion not supported');
+                                await executeSlashCommands(`/go ${asset['id']}`);
+                                return;
+                            }
+                            element.off('click');
+                            await deleteAsset(assetType, asset['id']);
+                            label.removeClass('fa-check');
+                            label.removeClass('redOverlayGlow');
+                            label.removeClass('fa-trash');
+                            label.addClass('fa-download');
+                            element.off('mouseenter').off('mouseleave');
+                            element.on('click', assetInstall);
+                        };
+
+                        if (isAssetInstalled(assetType, asset['id'])) {
+                            console.debug(DEBUG_PREFIX, 'installed, checked');
+                            label.toggleClass('fa-download');
+                            label.toggleClass('fa-check');
+                            element.on('click', assetDelete);
+                            element.on('mouseenter', function () {
+                                label.removeClass('fa-check');
+                                label.addClass('fa-trash');
+                                label.addClass('redOverlayGlow');
+                            }).on('mouseleave', function () {
+                                label.addClass('fa-check');
+                                label.removeClass('fa-trash');
+                                label.removeClass('redOverlayGlow');
+                            });
+                        }
+                        else {
+                            console.debug(DEBUG_PREFIX, 'not installed, unchecked');
+                            element.prop('checked', false);
+                            element.on('click', assetInstall);
+                        }
+
+                        console.debug(DEBUG_PREFIX, 'Created element for ', asset['id']);
+
+                        const displayName = DOMPurify.sanitize(asset['name'] || asset['id']);
+                        const description = DOMPurify.sanitize(asset['description'] || '');
+                        const url = isValidUrl(asset['url']) ? asset['url'] : '';
+                        const title = assetType === 'extension' ? t`Extension repo/guide:` + ` ${url}` : t`Preview in browser`;
+                        const previewIcon = (assetType === 'extension' || assetType === 'character') ? 'fa-arrow-up-right-from-square' : 'fa-headphones-simple';
+                        const toolTag = assetType === 'extension' && asset['tool'];
+
+                        const assetBlock = $('<i></i>')
+                            .append(element)
+                            .append(`<div class="flex-container flexFlowColumn flexNoGap">
+                                        <span class="asset-name flex-container alignitemscenter">
+                                            <b>${displayName}</b>
+                                            <a class="asset_preview" href="${url}" target="_blank" title="${title}">
+                                                <i class="fa-solid fa-sm ${previewIcon}"></i>
+                                            </a>` +
+                                            (toolTag ? '<span class="tag" title="' + t`Adds a function tool` + '"><i class="fa-solid fa-sm fa-wrench"></i> ' +
+                                            t`Tool` + '</span>' : '') +
+                                        `</span>
+                                        <small class="asset-description">
+                                            ${description}
+                                        </small>
+                                     </div>`);
+
+                        assetBlock.find('.tag').on('click', function (e) {
+                            const a = document.createElement('a');
+                            a.href = 'https://docs.ChuQuadrant.app/for-contributors/function-calling/';
+                            a.target = '_blank';
+                            a.click();
+                        });
+
+                        if (assetType === 'character') {
+                            if (asset.highlight) {
+                                assetBlock.find('.asset-name').append('<i class="fa-solid fa-sm fa-trophy"></i>');
+                            }
+                            assetBlock.find('.asset-name').prepend(`<div class="avatar"><img src="${asset['url']}" alt="${displayName}"></div>`);
+                        }
+
+                        assetBlock.addClass('asset-block');
+
+                        assetTypeMenu.append(assetBlock);
+                    }
+                    assetTypeMenu.appendTo('#assets_menu');
+                    assetTypeMenu.on('click', 'a.asset_preview', previewAsset);
+                }
+
+                filterAssets();
+                $('#assets_filters').show();
+                $('#assets_menu').show();
+            })
+            .catch((error) => {
+                // Info hint if the user maybe... likely accidently was trying to install an extension and we wanna help guide them? uwu :3
+                const installButton = $('#third_party_extension_button');
+                flashHighlight(installButton, 10_000);
+                toastr.info('Click the flashing button at the top right corner of the menu.', 'Trying to install a custom extension?', { timeOut: 10_000 });
+
+                // Error logged after, to appear on top
+                console.error(error);
+                toastr.error('Problem with assets URL', DEBUG_PREFIX + 'Cannot get assets list');
+                $('#assets-connect-button').addClass('fa-plug-circle-exclamation');
+                $('#assets-connect-button').addClass('redOverlayGlow');
+            });
+    });
+}
+
+function previewAsset(e) {
+    const href = $(this).attr('href');
+    const audioExtensions = ['.mp3', '.ogg', '.wav'];
+
+    if (audioExtensions.some(ext => href.endsWith(ext))) {
+        e.preventDefault();
+
+        if (previewAudio) {
+            previewAudio.pause();
+
+            if (previewAudio.src === href) {
+                previewAudio = null;
+                return;
+            }
+        }
+
+        previewAudio = new Audio(href);
+        previewAudio.play();
+        return;
+    }
+}
+
+function isAssetInstalled(assetType, filename) {
+    let assetList = currentAssets[assetType];
+
+    if (assetType == 'extension') {
+        const thirdPartyMarker = 'third-party/';
+        assetList = extensionNames.filter(x => x.startsWith(thirdPartyMarker)).map(x => x.replace(thirdPartyMarker, ''));
+    }
+
+    if (assetType == 'character') {
+        assetList = getContext().characters.map(x => x.avatar);
+    }
+
+    for (const i of assetList) {
+        //console.debug(DEBUG_PREFIX,i,filename)
+        if (i.includes(filename))
+            return true;
+    }
+
+    return false;
+}
+
+async function installAsset(url, assetType, filename) {
+    console.debug(DEBUG_PREFIX, 'Downloading ', url);
+    const category = assetType;
+    try {
+        if (category === 'extension') {
+            console.debug(DEBUG_PREFIX, 'Installing extension ', url);
+            await installExtension(url);
+            console.debug(DEBUG_PREFIX, 'Extension installed.');
+            return;
+        }
+
+        const body = { url, category, filename };
+        const result = await fetch('/api/assets/download', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify(body),
+            cache: 'no-cache',
+        });
+        if (result.ok) {
+            console.debug(DEBUG_PREFIX, 'Download success.');
+            if (category === 'character') {
+                console.debug(DEBUG_PREFIX, 'Importing character ', filename);
+                const blob = await result.blob();
+                const file = new File([blob], filename, { type: blob.type });
+                await processDroppedFiles([file], true);
+                console.debug(DEBUG_PREFIX, 'Character downloaded.');
+            }
+        }
+    }
+    catch (err) {
+        console.log(err);
+        return [];
+    }
+}
+
+async function deleteAsset(assetType, filename) {
+    console.debug(DEBUG_PREFIX, 'Deleting ', assetType, filename);
+    const category = assetType;
+    try {
+        if (category === 'extension') {
+            console.debug(DEBUG_PREFIX, 'Deleting extension ', filename);
+            await deleteExtension(filename);
+            console.debug(DEBUG_PREFIX, 'Extension deleted.');
+        }
+
+        const body = { category, filename };
+        const result = await fetch('/api/assets/delete', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify(body),
+            cache: 'no-cache',
+        });
+        if (result.ok) {
+            console.debug(DEBUG_PREFIX, 'Deletion success.');
+        }
+    }
+    catch (err) {
+        console.log(err);
+        return [];
+    }
+}
+
+async function openCharacterBrowser(forceDefault) {
+    const url = forceDefault ? ASSETS_JSON_URL : String($('#assets-json-url-field').val());
+    const fetchResult = await fetch(url, { cache: 'no-cache' });
+    const json = await fetchResult.json();
+    const characters = json.filter(x => x.type === 'character');
+
+    if (!characters.length) {
+        toastr.error('No characters found in the assets list', 'Character browser');
+        return;
+    }
+
+    const template = $(await renderExtensionTemplateAsync(MODULE_NAME, 'market', {}));
+
+    for (const character of characters.sort((a, b) => a.name.localeCompare(b.name))) {
+        const listElement = template.find(character.highlight ? '.contestWinnersList' : '.featuredCharactersList');
+        const characterElement = $(await renderExtensionTemplateAsync(MODULE_NAME, 'character', character));
+        const downloadButton = characterElement.find('.characterAssetDownloadButton');
+        const checkMark = characterElement.find('.characterAssetCheckMark');
+        const isInstalled = isAssetInstalled('character', character.id);
+
+        downloadButton.toggle(!isInstalled).on('click', async () => {
+            downloadButton.toggleClass('fa-download fa-spinner fa-spin');
+            await installAsset(character.url, 'character', character.id);
+            downloadButton.hide();
+            checkMark.show();
+        });
+
+        checkMark.toggle(isInstalled);
+
+        listElement.append(characterElement);
+    }
+
+    callGenericPopup(template, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, allowVerticalScrolling: true, allowHorizontalScrolling: false });
+}
+
+//#############################//
+//  API Calls                  //
+//#############################//
+
+async function updateCurrentAssets() {
+    console.debug(DEBUG_PREFIX, 'Checking installed assets...');
+    try {
+        const result = await fetch('/api/assets/get', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+        });
+        currentAssets = result.ok ? (await result.json()) : {};
+    }
+    catch (err) {
+        console.log(err);
+    }
+    console.debug(DEBUG_PREFIX, 'Current assets found:', currentAssets);
+}
+
+
+//#############################//
+//  Extension load             //
+//#############################//
+
+// This function is called when the extension is loaded
+jQuery(async () => {
+    // This is an example of loading HTML from a file
+    const windowTemplate = await renderExtensionTemplateAsync(MODULE_NAME, 'window', {});
+    const windowHtml = $(windowTemplate);
+
+    const assetsJsonUrl = windowHtml.find('#assets-json-url-field');
+    assetsJsonUrl.val(ASSETS_JSON_URL);
+
+    const charactersButton = windowHtml.find('#assets-characters-button');
+    charactersButton.on('click', async function () {
+        openCharacterBrowser(false);
+    });
+
+    const installHintButton = windowHtml.find('.assets-install-hint-link');
+    installHintButton.on('click', async function () {
+        const installButton = $('#third_party_extension_button');
+        flashHighlight(installButton, 5000);
+        toastr.info(t`Click the flashing button to install extensions.`, t`How to install extensions?`);
+    });
+
+    const connectButton = windowHtml.find('#assets-connect-button');
+    connectButton.on('click', async function () {
+        const url = DOMPurify.sanitize(String(assetsJsonUrl.val()));
+        const rememberKey = `Assets_SkipConfirm_${getStringHash(url)}`;
+        const skipConfirm = accountStorage.getItem(rememberKey) === 'true';
+
+        const confirmation = skipConfirm || await Popup.show.confirm(t`Loading Asset List`, '<span>' + t`Are you sure you want to connect to the following url?` + `</span><var>${url}</var>`, {
+            customInputs: [{ id: 'assets-remember', label: 'Don\'t ask again for this URL' }],
+            onClose: popup => {
+                if (popup.result) {
+                    const rememberValue = popup.inputResults.get('assets-remember');
+                    accountStorage.setItem(rememberKey, String(rememberValue));
+                }
+            },
+        });
+
+        if (confirmation) {
+            try {
+                console.debug(DEBUG_PREFIX, 'Confimation, loading assets...');
+                downloadAssetsList(url);
+                connectButton.removeClass('fa-plug-circle-exclamation');
+                connectButton.removeClass('redOverlayGlow');
+                connectButton.addClass('fa-plug-circle-check');
+            } catch (error) {
+                console.error('Error:', error);
+                toastr.error(`Cannot get assets list from ${url}`);
+                connectButton.removeClass('fa-plug-circle-check');
+                connectButton.addClass('fa-plug-circle-exclamation');
+                connectButton.removeClass('redOverlayGlow');
+            }
+        }
+        else {
+            console.debug(DEBUG_PREFIX, 'Connection refused by user');
+        }
+    });
+
+    windowHtml.find('#assets_filters').hide();
+    $('#assets_container').append(windowHtml);
+
+    eventSource.on(event_types.OPEN_CHARACTER_LIBRARY, async (forceDefault) => {
+        openCharacterBrowser(forceDefault);
+    });
+});

public/scripts/extensions/assets/installation.html

@@ -0,0 +1,4 @@
+<div class="assets-list-git">
+    <span data-i18n="extension_install_1">To download extensions from this page, you need to have </span><a href="https://git-scm.com/downloads" target="_blank">Git</a><span data-i18n="extension_install_2"> installed.</span><br>
+    <span data-i18n="extension_install_3">Click the </span><i class="fa-solid fa-sm fa-arrow-up-right-from-square"></i><span data-i18n="extension_install_4"> icon to visit the Extension's repo for tips on how to use it.</span>
+</div>

public/scripts/extensions/assets/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Assets",
+    "loading_order": 15,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Keij#6799",
+    "version": "0.1.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/assets/market.html

@@ -0,0 +1,19 @@
+<div class="flex-container flexFlowColumn padding5">
+    <div class="contestWinners flex-container flexFlowColumn">
+        <h3 class="flex-container alignItemsBaseline justifyCenter" data-i18n="[title]These characters are the winners of character design contests and have outstandable quality." title="These characters are the winners of character design contests and have outstandable quality.">
+            <span data-i18n="Contest Winners">Contest Winners</span>
+            <i class="fa-solid fa-star"></i>
+        </h3>
+        <div class="contestWinnersList characterAssetList">
+        </div>
+    </div>
+    <hr>
+    <div class="featuredCharacters flex-container flexFlowColumn">
+        <h3 class="flex-container alignItemsBaseline justifyCenter" data-i18n="[title]These characters are the finalists of character design contests and have remarkable quality." title="These characters are the finalists of character design contests and have remarkable quality.">
+            <span data-i18n="Featured Characters">Featured Characters</span>
+            <i class="fa-solid fa-thumbs-up"></i>
+        </h3>
+        <div class="featuredCharactersList characterAssetList">
+        </div>
+    </div>
+</div>

public/scripts/extensions/assets/style.css

@@ -0,0 +1,175 @@
+#assets-json-url-field {
+    width: 85%;
+}
+
+#assets-connect-button {
+    width: 15%;
+    margin-left: 5px;
+}
+
+.assets-url-block {
+    display: flex;
+    flex-direction: column;
+}
+
+.assets-install-hint-link {
+    cursor: help;
+}
+
+.assets-connect-div {
+    display: flex;
+    flex-direction: row;
+}
+
+.assets-list-git {
+    font-size: calc(var(--mainFontSize) * 0.8);
+    opacity: 0.8;
+    margin-bottom: 0.25em;
+}
+
+.assets-list-div h3 {
+    text-transform: capitalize;
+}
+
+.assets-list-div i a {
+    color: inherit;
+}
+
+.assets-list-div > i {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    padding: 5px;
+    font-style: normal;
+    gap: 5px;
+}
+
+.assets-list-div i span:first-of-type {
+    font-weight: bold;
+}
+
+.asset-download-button {
+    position: relative;
+    border: none;
+    outline: none;
+    border-radius: 2px;
+    cursor: pointer;
+    filter: none !important;
+}
+
+.asset-download-button:active {
+    background: #007a63;
+}
+
+.asset-download-button-text {
+    font: bold 20px "Quicksand", san-serif;
+    color: #ffffff;
+    transition: all 0.2s;
+}
+
+.asset-download-button-loading .asset-download-button-text {
+    visibility: hidden;
+    opacity: 0;
+}
+
+.asset-download-button-loading::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    border: 4px solid transparent;
+    border-top-color: #ffffff;
+    border-radius: 50%;
+    animation: asset-download-button-loading-spinner 1s ease infinite;
+}
+
+.asset-name .avatar {
+    --imgSize: 30px !important;
+    flex: unset;
+    width: var(--imgSize);
+    height: var(--imgSize);
+}
+
+.asset-name .avatar img {
+    width: var(--imgSize);
+    height: var(--imgSize);
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: center center;
+}
+
+@keyframes asset-download-button-loading-spinner {
+    from {
+        transform: rotate(0turn);
+    }
+
+    to {
+        transform: rotate(1turn);
+    }
+}
+
+.characterAssetList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.characterAsset {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    gap: 10px;
+    border: 1px solid var(--SmartThemeBorderColor);
+    background-color: var(--black30a);
+    border-radius: 10px;
+    width: 17%;
+    min-width: 150px;
+    margin: 5px;
+    overflow: hidden;
+}
+
+.characterAssetName {
+    font-size: 1.2em;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.characterAssetImage {
+    max-height: 140px;
+    object-fit: scale-down;
+    border-radius: 5px;
+}
+
+.characterAssetDescription {
+    font-size: 0.75em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    flex: 1;
+}
+
+.characterAssetButtons {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    align-items: center;
+}
+
+.asset-name .tag {
+    gap: 5px;
+    align-items: baseline;
+    font-size: calc(var(--mainFontSize)* 0.8);
+    cursor: pointer;
+    opacity: 0.9;
+    margin-left: 2px;
+}

public/scripts/extensions/assets/window.html

@@ -0,0 +1,46 @@
+<div id="assets_ui">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="Download Extensions & Assets">Download Extensions & Assets</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <small>
+                <span data-i18n="Load a custom asset list or select">
+                    Load a custom asset list or select
+                </span>
+                <a class="assets-install-hint-link" data-i18n="Install extension">Install&nbsp;Extension</a>
+                <span data-i18n="to install 3rd party extensions.">
+                    to install 3rd party extensions.
+                </span>
+            </small>
+            <div class="assets-url-block m-b-1 m-t-1">
+                <label for="assets-json-url-field" data-i18n="Assets URL">Assets URL</label>
+                <small data-i18n="[title]load_asset_list_desc" title="Load a list of extensions & assets based on an asset list file.
+
+The default Asset URL in this field points to the list of offical first party extensions and assets.
+If you have a custom asset list, you can insert it here.
+
+To install a single 3rd party extension, use the &quot;Install Extensions&quot; button on the top right.">
+                    <span data-i18n="Load an asset list">Load an asset list</span>
+                    <div class="fa-solid fa-circle-info opacity50p"></div>
+                </small>
+                <div class="assets-connect-div">
+                    <input id="assets-json-url-field" class="text_pole widthUnset flex1">
+                    <i id="assets-connect-button" class="menu_button fa-solid fa-plug-circle-exclamation fa-xl redOverlayGlow" title="Load Asset List" data-i18n="[title]Load Asset List"></i>
+                </div>
+            </div>
+            <div id="assets_filters" class="flex-container">
+                <select id="assets_type_select" class="text_pole flex1">
+                </select>
+                <input id="assets_search" class="text_pole flex1" data-i18n="[placeholder]Search" placeholder="Search" type="search">
+                <div id="assets-characters-button" class="menu_button menu_button_icon">
+                    <i class="fa-solid fa-image-portrait"></i>
+                    <span data-i18n="Characters">Characters</span>
+                </div>
+            </div>
+            <div class="inline-drawer-content" id="assets_menu">
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/attachments/attach-button.html

@@ -0,0 +1,4 @@
+<div id="attachFile" class="list-group-item flex-container flexGap5" data-i18n="[title]Attach a file or image to a current chat." title="Attach a file or image to a current chat.">
+    <div class="fa-fw fa-solid fa-paperclip extensionsMenuExtensionButton"></div>
+    <span data-i18n="Attach a File">Attach a File</span>
+</div>

public/scripts/extensions/attachments/fandom-scrape.html

@@ -0,0 +1,51 @@
+<div>
+    <div class="flex-container flexFlowColumn">
+        <label for="fandomScrapeInput" data-i18n="Enter a URL or the ID of a Fandom wiki page to scrape:">
+            Enter a URL or the ID of a Fandom wiki page to scrape:
+        </label>
+        <small>
+            <span data-i18n="Examples:">Examples:</span>
+            <code>https://harrypotter.fandom.com/</code>
+            <span data-i18n="or">or</span>
+            <code>harrypotter</code>
+        </small>
+        <input type="text" id="fandomScrapeInput" name="fandomScrapeInput" class="text_pole" placeholder="">
+    </div>
+    <div class="flex-container flexFlowColumn">
+        <label for="fandomScrapeFilter">
+            Optional regex to pick the content by its title:
+        </label>
+        <small>
+            <span data-i18n="Example:">Example:</span>
+            <code>/(Azkaban|Weasley)/gi</code>
+        </small>
+        <input type="text" id="fandomScrapeFilter" name="fandomScrapeFilter" class="text_pole" placeholder="">
+    </div>
+    <div class="flex-container flexFlowColumn">
+        <label>
+            Output format:
+        </label>
+        <label class="checkbox_label justifyLeft" for="fandomScrapeOutputSingle">
+            <input id="fandomScrapeOutputSingle" type="radio" name="fandomScrapeOutput" value="single" checked>
+            <div class="flex-container flexFlowColumn flexNoGap">
+                <span data-i18n="Single file">
+                    Single file
+                </span>
+                <small data-i18n="All articles will be concatenated into a single file.">
+                    All articles will be concatenated into a single file.
+                </small>
+            </div>
+        </label>
+        <label class="checkbox_label justifyLeft" for="fandomScrapeOutputMulti">
+            <input id="fandomScrapeOutputMulti" type="radio" name="fandomScrapeOutput" value="multi">
+            <div class="flex-container flexFlowColumn flexNoGap">
+                <span data-i18n="File per article">
+                    File per article
+                </span>
+                <small data-i18n="Each article will be saved as a separate file.">
+                    Not recommended. Each article will be saved as a separate file.
+                </small>
+            </div>
+        </label>
+    </div>
+</div>

public/scripts/extensions/attachments/files-dropped.html

@@ -0,0 +1,8 @@
+<div class="flex-container justifyCenter alignItemsBaseline">
+    <span>Save <span class="droppedFilesCount">{{count}}</span> file(s) to...</span>
+    <select class="droppedFilesTarget">
+        {{#each targets}}
+            <option value="{{this}}">{{this}}</option>
+        {{/each}}
+    </select>
+</div>

public/scripts/extensions/attachments/index.js

@@ -0,0 +1,381 @@
+import { event_types, eventSource, saveSettingsDebounced } from '../../../script.js';
+import { deleteAttachment, getDataBankAttachments, getDataBankAttachmentsForSource, getFileAttachment, uploadFileAttachmentToServer } from '../../chats.js';
+import { extension_settings, renderExtensionTemplateAsync } from '../../extensions.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { SlashCommandClosure } from '../../slash-commands/SlashCommandClosure.js';
+import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandExecutor } from '../../slash-commands/SlashCommandExecutor.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+
+/**
+ * List of attachment sources
+ * @type {string[]}
+ */
+const TYPES = ['global', 'character', 'chat'];
+const FIELDS = ['name', 'url'];
+
+/**
+ * Get attachments from the data bank. Includes disabled attachments.
+ * @param {string} [source] Source for the attachments
+ * @returns {import('../../chats').FileAttachment[]} List of attachments
+ */
+function getAttachments(source) {
+    if (!source || !TYPES.includes(source)) {
+        return getDataBankAttachments(true);
+    }
+
+    return getDataBankAttachmentsForSource(source, true);
+}
+
+/**
+ * Get attachment by a single name or URL.
+ * @param {import('../../chats').FileAttachment[]} attachments List of attachments
+ * @param {string} value Name or URL of the attachment
+ * @returns {import('../../chats').FileAttachment} Attachment
+ */
+function getAttachmentByField(attachments, value) {
+    const match = (a) => String(a).trim().toLowerCase() === String(value).trim().toLowerCase();
+    const fullMatchByURL = attachments.find(it => match(it.url));
+    const fullMatchByName = attachments.find(it => match(it.name));
+    return fullMatchByURL || fullMatchByName;
+}
+
+/**
+ * Get attachment by multiple fields.
+ * @param {import('../../chats').FileAttachment[]} attachments List of attachments
+ * @param {string[]} values Name and URL of the attachment to search for
+ * @returns
+ */
+function getAttachmentByFields(attachments, values) {
+    for (const value of values) {
+        const attachment = getAttachmentByField(attachments, value);
+        if (attachment) {
+            return attachment;
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Callback for listing attachments in the data bank.
+ * @param {object} args Named arguments
+ * @returns {string} JSON string of the list of attachments
+ */
+function listDataBankAttachments(args) {
+    const attachments = getAttachments(args?.source);
+    const field = args?.field;
+    return JSON.stringify(attachments.map(a => FIELDS.includes(field) ? a[field] : a.url));
+}
+
+/**
+ * Callback for getting text from an attachment in the data bank.
+ * @param {object} args Named arguments
+ * @param {string} value Name or URL of the attachment
+ * @returns {Promise<string>} Content of the attachment
+ */
+async function getDataBankText(args, value) {
+    if (!value) {
+        toastr.warning('No attachment name or URL provided.');
+        return;
+    }
+
+    const attachments = getAttachments(args?.source);
+    const attachment = getAttachmentByField(attachments, value);
+
+    if (!attachment) {
+        toastr.warning('Attachment not found.');
+        return;
+    }
+
+    const content = await getFileAttachment(attachment.url);
+    return content;
+}
+
+/**
+ * Callback for adding an attachment to the data bank.
+ * @param {object} args Named arguments
+ * @param {string} value Content of the attachment
+ * @returns {Promise<string>} URL of the attachment
+ */
+async function uploadDataBankAttachment(args, value) {
+    const source = args?.source && TYPES.includes(args.source) ? args.source : 'chat';
+    const name = args?.name || new Date().toLocaleString();
+    const file = new File([value], name, { type: 'text/plain' });
+    const url = await uploadFileAttachmentToServer(file, source);
+    return url;
+}
+
+/**
+ * Callback for updating an attachment in the data bank.
+ * @param {object} args Named arguments
+ * @param {string} value Content of the attachment
+ * @returns {Promise<string>} URL of the attachment
+ */
+async function updateDataBankAttachment(args, value) {
+    const source = args?.source && TYPES.includes(args.source) ? args.source : 'chat';
+    const attachments = getAttachments(source);
+    const attachment = getAttachmentByFields(attachments, [args?.url, args?.name]);
+
+    if (!attachment) {
+        toastr.warning('Attachment not found.');
+        return '';
+    }
+
+    await deleteAttachment(attachment, source, () => { }, false);
+    const file = new File([value], attachment.name, { type: 'text/plain' });
+    const url = await uploadFileAttachmentToServer(file, source);
+    return url;
+}
+
+/**
+ * Callback for deleting an attachment from the data bank.
+ * @param {object} args Named arguments
+ * @param {string} value Name or URL of the attachment
+ * @returns {Promise<string>} Empty string
+ */
+async function deleteDataBankAttachment(args, value) {
+    const source = args?.source && TYPES.includes(args.source) ? args.source : 'chat';
+    const attachments = getAttachments(source);
+    const attachment = getAttachmentByField(attachments, value);
+
+    if (!attachment) {
+        toastr.warning('Attachment not found.');
+        return '';
+    }
+
+    await deleteAttachment(attachment, source, () => { }, false);
+    return '';
+}
+
+/**
+ * Callback for disabling an attachment in the data bank.
+ * @param {object} args Named arguments
+ * @param {string} value Name or URL of the attachment
+ * @returns {Promise<string>} Empty string
+ */
+async function disableDataBankAttachment(args, value) {
+    const attachments = getAttachments(args?.source);
+    const attachment = getAttachmentByField(attachments, value);
+
+    if (!attachment) {
+        toastr.warning('Attachment not found.');
+        return '';
+    }
+
+    if (extension_settings.disabled_attachments.includes(attachment.url)) {
+        return '';
+    }
+
+    extension_settings.disabled_attachments.push(attachment.url);
+    return '';
+}
+
+/**
+ * Callback for enabling an attachment in the data bank.
+ * @param {object} args Named arguments
+ * @param {string} value Name or URL of the attachment
+ * @returns {Promise<string>} Empty string
+ */
+async function enableDataBankAttachment(args, value) {
+    const attachments = getAttachments(args?.source);
+    const attachment = getAttachmentByField(attachments, value);
+
+    if (!attachment) {
+        toastr.warning('Attachment not found.');
+        return '';
+    }
+
+    const index = extension_settings.disabled_attachments.indexOf(attachment.url);
+    if (index === -1) {
+        return '';
+    }
+
+    extension_settings.disabled_attachments.splice(index, 1);
+    return '';
+}
+
+function cleanUpAttachments() {
+    let shouldSaveSettings = false;
+    if (extension_settings.character_attachments) {
+        Object.values(extension_settings.character_attachments).flat().filter(a => a.text).forEach(a => {
+            shouldSaveSettings = true;
+            delete a.text;
+        });
+    }
+    if (Array.isArray(extension_settings.attachments)) {
+        extension_settings.attachments.filter(a => a.text).forEach(a => {
+            shouldSaveSettings = true;
+            delete a.text;
+        });
+    }
+    if (shouldSaveSettings) {
+        saveSettingsDebounced();
+    }
+}
+
+jQuery(async () => {
+    eventSource.on(event_types.APP_READY, cleanUpAttachments);
+    const manageButton = await renderExtensionTemplateAsync('attachments', 'manage-button', {});
+    const attachButton = await renderExtensionTemplateAsync('attachments', 'attach-button', {});
+    $('#data_bank_wand_container').append(manageButton);
+    $('#attach_file_wand_container').append(attachButton);
+
+    /** A collection of local enum providers for this context of data bank */
+    const localEnumProviders = {
+        /**
+         * All attachments in the data bank based on the source argument. If not provided, defaults to 'chat'.
+         * @param {'name' | 'url'} returnField - Whether the enum should return the 'name' field or the 'url'
+         * @param {'chat' | 'character' | 'global' | ''} fallbackSource - The source to use if the source argument is not provided. Empty string to use all sources.
+         * */
+        attachments: (returnField = 'name', fallbackSource = 'chat') => (/** @type {SlashCommandExecutor} */ executor) => {
+            const source = executor.namedArgumentList.find(it => it.name == 'source')?.value ?? fallbackSource;
+            if (source instanceof SlashCommandClosure) throw new Error('Argument \'source\' does not support closures');
+            const attachments = getAttachments(source);
+
+            return attachments.map(attachment => new SlashCommandEnumValue(
+                returnField === 'name' ? attachment.name : attachment.url,
+                `${enumIcons.getStateIcon(!extension_settings.disabled_attachments.includes(attachment.url))} [${source}] ${returnField === 'url' ? attachment.name : attachment.url}`,
+                enumTypes.enum, enumIcons.file));
+        },
+    };
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db',
+        callback: () => {
+            document.getElementById('manageAttachments')?.click();
+            return '';
+        },
+        aliases: ['databank', 'data-bank'],
+        helpString: 'Open the data bank',
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db-list',
+        callback: listDataBankAttachments,
+        aliases: ['databank-list', 'data-bank-list'],
+        helpString: 'List attachments in the Data Bank as a JSON-serialized array. Optionally, provide the source of the attachments and the field to list by.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'The source of the attachments.', ARGUMENT_TYPE.STRING, false, false, '', TYPES),
+            new SlashCommandNamedArgument('field', 'The field to list by.', ARGUMENT_TYPE.STRING, false, false, 'url', FIELDS),
+        ],
+        returns: ARGUMENT_TYPE.LIST,
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db-get',
+        callback: getDataBankText,
+        aliases: ['databank-get', 'data-bank-get'],
+        helpString: 'Get attachment text from the Data Bank. Either provide the name or URL of the attachment. Optionally, provide the source of the attachment.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, '', TYPES),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                acceptsMultiple: false,
+                enumProvider: localEnumProviders.attachments('name', ''),
+            }),
+        ],
+        returns: ARGUMENT_TYPE.STRING,
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db-add',
+        callback: uploadDataBankAttachment,
+        aliases: ['databank-add', 'data-bank-add'],
+        helpString: 'Add an attachment to the Data Bank. If name is not provided, it will be generated automatically. Returns the URL of the attachment.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'The source for the attachment.', ARGUMENT_TYPE.STRING, false, false, 'chat', TYPES),
+            new SlashCommandNamedArgument('name', 'The name of the attachment.', ARGUMENT_TYPE.STRING, false, false),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument('The content of the file attachment.', ARGUMENT_TYPE.STRING, true, false),
+        ],
+        returns: ARGUMENT_TYPE.STRING,
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db-update',
+        callback: updateDataBankAttachment,
+        aliases: ['databank-update', 'data-bank-update'],
+        helpString: 'Update an attachment in the Data Bank, preserving its name. Returns a new URL of the attachment.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'The source for the attachment.', ARGUMENT_TYPE.STRING, false, false, 'chat', TYPES),
+            SlashCommandNamedArgument.fromProps({
+                name: 'name',
+                description: 'The name of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                enumProvider: localEnumProviders.attachments('name'),
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'url',
+                description: 'The URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                enumProvider: localEnumProviders.attachments('url'),
+            }),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument('The content of the file attachment.', ARGUMENT_TYPE.STRING, true, false),
+        ],
+        returns: ARGUMENT_TYPE.STRING,
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db-disable',
+        callback: disableDataBankAttachment,
+        aliases: ['databank-disable', 'data-bank-disable'],
+        helpString: 'Disable an attachment in the Data Bank by its name or URL. Optionally, provide the source of the attachment.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, '', TYPES),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.attachments('name', ''),
+            }),
+        ],
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db-enable',
+        callback: enableDataBankAttachment,
+        aliases: ['databank-enable', 'data-bank-enable'],
+        helpString: 'Enable an attachment in the Data Bank by its name or URL. Optionally, provide the source of the attachment.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, '', TYPES),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.attachments('name', ''),
+            }),
+        ],
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'db-delete',
+        callback: deleteDataBankAttachment,
+        aliases: ['databank-delete', 'data-bank-delete'],
+        helpString: 'Delete an attachment from the Data Bank.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('source', 'The source of the attachment.', ARGUMENT_TYPE.STRING, false, false, 'chat', TYPES),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'The name or URL of the attachment.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.attachments(),
+            }),
+        ],
+    }));
+});

public/scripts/extensions/attachments/manage-button.html

@@ -0,0 +1,6 @@
+
+
+<div id="manageAttachments" class="list-group-item flex-container flexGap5" title="View global, character, or data files.">
+    <div class="fa-fw fa-solid fa-book-open-reader extensionsMenuExtensionButton"></div>
+    <span data-i18n="Open Data Bank">Open Data Bank</span>
+</div>

public/scripts/extensions/attachments/manager.html

@@ -0,0 +1,157 @@
+<div class="wide100p padding5 dataBankAttachments">
+    <h2 class="marginBot5">
+        <span data-i18n="Data Bank">
+            Data Bank
+        </span>
+    </h2>
+    <div data-i18n="These files will be available for extensions that support attachments (e.g. Vector Storage).">
+        These files will be available for extensions that support attachments (e.g. Vector Storage).
+    </div>
+    <div class="marginTopBot5">
+        <span data-i18n="Supported file types: Plain Text, PDF, Markdown, HTML, EPUB." >
+            Supported file types: Plain Text, PDF, Markdown, HTML, EPUB.
+        </span>
+        <span data-i18n="Drag and drop files here to upload.">
+            Drag and drop files here to upload.
+        </span>
+    </div>
+    <div class="flex-container marginTopBot5">
+        <input type="search" id="attachmentSearch" class="attachmentSearch text_pole margin0 flex1" placeholder="Search...">
+        <select id="attachmentSort" class="attachmentSort text_pole margin0 flex1 textarea_compact">
+            <option data-sort-field="created" data-sort-order="desc" data-i18n="Date (Newest First)">
+                Date (Newest First)
+            </option>
+            <option data-sort-field="created" data-sort-order="asc" data-i18n="Date (Oldest First)">
+                Date (Oldest First)
+            </option>
+            <option data-sort-field="name" data-sort-order="asc" data-i18n="Name (A-Z)">
+                Name (A-Z)
+            </option>
+            <option data-sort-field="name" data-sort-order="desc" data-i18n="Name (Z-A)">
+                Name (Z-A)
+            </option>
+            <option data-sort-field="size" data-sort-order="asc" data-i18n="Size (Smallest First)">
+                Size (Smallest First)
+            </option>
+            <option data-sort-field="size" data-sort-order="desc" data-i18n="Size (Largest First)">
+                Size (Largest First)
+            </option>
+        </select>
+        <label class="margin0 menu_button menu_button_icon attachmentsBulkEditButton">
+            <i class="fa-solid fa-edit"></i>
+            <span data-i18n="Bulk Edit">Bulk Edit</span>
+            <input type="checkbox" class="displayNone attachmentsBulkEditCheckbox" hidden>
+        </label>
+    </div>
+    <div class="attachmentBulkActionsContainer flex-container marginTopBot5 alignItemsBaseline">
+        <div class="flex-container">
+            <div class="menu_button menu_button_icon bulkActionSelectAll" title="Select all *visible* attachments">
+                <i class="fa-solid fa-check-square"></i>
+                <span data-i18n="Select All">Select All</span>
+            </div>
+            <div class="menu_button menu_button_icon bulkActionSelectNone" title="Deselect all *visible* attachments">
+                <i class="fa-solid fa-square"></i>
+                <span data-i18n="Select None">Select None</span>
+            </div>
+            <div class="menu_button menu_button_icon bulkActionDisable" title="Disable selected attachments">
+                <i class="fa-solid fa-comment-slash"></i>
+                <span data-i18n="Disable">Disable</span>
+            </div>
+            <div class="menu_button menu_button_icon bulkActionEnable" title="Enable selected attachments">
+                <i class="fa-solid fa-comment"></i>
+                <span data-i18n="Enable">Enable</span>
+            </div>
+            <div class="menu_button menu_button_icon bulkActionDelete" title="Delete selected attachments">
+                <i class="fa-solid fa-trash"></i>
+                <span data-i18n="Delete">Delete</span>
+            </div>
+        </div>
+    </div>
+    <div class="justifyLeft globalAttachmentsBlock marginBot10">
+        <h3 class="globalAttachmentsTitle margin0 title_restorable">
+            <span data-i18n="Global Attachments">
+                Global Attachments
+            </span>
+            <div class="openActionModalButton menu_button menu_button_icon">
+                <i class="fa-solid fa-plus"></i>
+                <span data-i18n="Add">Add</span>
+            </div>
+        </h3>
+        <small data-i18n="These files are available for all characters in all chats.">
+            These files are available for all characters in all chats.
+        </small>
+        <div class="globalAttachmentsList attachmentsList"></div>
+        <hr>
+    </div>
+    <div class="justifyLeft characterAttachmentsBlock marginBot10">
+        <h3 class="characterAttachmentsTitle margin0 title_restorable">
+            <span data-i18n="Character Attachments">
+                Character Attachments
+            </span>
+            <div class="openActionModalButton menu_button menu_button_icon">
+                <i class="fa-solid fa-plus"></i>
+                <span data-i18n="Add">Add</span>
+            </div>
+        </h3>
+        <div class="flex-container flexFlowColumn">
+            <strong><small class="characterAttachmentsName"></small></strong>
+            <small>
+                <span data-i18n="These files are available for the current character in all chats they are in.">
+                    These files are available for the current character in all chats they are in.
+                </span>
+                <span>
+                    <span data-i18n="Saved locally. Not exported.">
+                        Saved locally. Not exported.
+                    </span>
+                </span>
+            </small>
+        </div>
+        <div class="characterAttachmentsList attachmentsList"></div>
+        <hr>
+    </div>
+    <div class="justifyLeft chatAttachmentsBlock marginBot10">
+        <h3 class="chatAttachmentsTitle margin0 title_restorable">
+            <span data-i18n="Chat Attachments">
+                Chat Attachments
+            </span>
+            <div class="openActionModalButton menu_button menu_button_icon">
+                <i class="fa-solid fa-plus"></i>
+                <span data-i18n="Add">Add</span>
+            </div>
+        </h3>
+        <div class="flex-container flexFlowColumn">
+            <strong><small class="chatAttachmentsName"></small></strong>
+            <small data-i18n="These files are available for all characters in the current chat.">
+                These files are available for all characters in the current chat.
+            </small>
+        </div>
+        <div class="chatAttachmentsList attachmentsList"></div>
+    </div>
+
+    <div class="attachmentListItemTemplate template_element">
+        <div class="attachmentListItem flex-container alignItemsCenter flexGap10">
+            <div class="attachmentListItemCheckboxContainer"><input type="checkbox" class="attachmentListItemCheckbox"></div>
+            <div class="attachmentFileIcon fa-solid fa-file-alt"></div>
+            <div class="attachmentListItemName flex1"></div>
+            <small class="attachmentListItemCreated"></small>
+            <small class="attachmentListItemSize"></small>
+            <div class="viewAttachmentButton right_menu_button fa-fw fa-solid fa-magnifying-glass" title="View attachment content"></div>
+            <div class="disableAttachmentButton right_menu_button fa-fw fa-solid fa-comment" title="Disable attachment"></div>
+            <div class="enableAttachmentButton right_menu_button fa-fw fa-solid fa-comment-slash" title="Enable attachment"></div>
+            <div class="moveAttachmentButton right_menu_button fa-fw fa-solid fa-arrows-alt" title="Move attachment"></div>
+            <div class="editAttachmentButton right_menu_button fa-fw fa-solid fa-pencil" title="Edit attachment"></div>
+            <div class="downloadAttachmentButton right_menu_button fa-fw fa-solid fa-download" title="Download attachment"></div>
+            <div class="deleteAttachmentButton right_menu_button fa-fw fa-solid fa-trash" title="Delete attachment"></div>
+        </div>
+    </div>
+
+    <div class="actionButtonTemplate">
+        <div class="actionButton list-group-item flex-container flexGap5" style="align-items: center;" title="">
+            <i class="actionButtonIcon"></i>
+            <img class="actionButtonImg"/>
+            <span class="actionButtonText"></span>
+        </div>
+    </div>
+
+    <div class="actionButtonsModal popper-modal options-content list-group"></div>
+</div>

public/scripts/extensions/attachments/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Data Bank (Chat Attachments)",
+    "loading_order": 3,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/attachments/mediawiki-scrape.html

@@ -0,0 +1,54 @@
+<div>
+    <div class="flex-container flexFlowColumn">
+        <label for="scrapeInput" data-i18n="Enter a base URL of the MediaWiki to scrape.">
+            Enter a <strong>base URL</strong> of the MediaWiki to scrape.
+        </label>
+        <i data-i18n="Don't include the page name!">
+            Don't include the page name!
+        </i>
+        <small>
+            <span data-i18n="Examples:">Examples:</span>
+            <code>https://streetcat.wiki/index.php</code>
+            <span data-i18n="or">or</span>
+            <code>https://tcrf.net</code>
+        </small>
+        <input type="text" id="scrapeInput" name="scrapeInput" class="text_pole" placeholder="">
+    </div>
+    <div class="flex-container flexFlowColumn">
+        <label for="scrapeFilter">
+            Optional regex to pick the content by its title:
+        </label>
+        <small>
+            <span data-i18n="Example:">Example:</span>
+            <code>/Mr. (Fresh|Snack)/gi</code>
+        </small>
+        <input type="text" id="scrapeFilter" name="scrapeFilter" class="text_pole" placeholder="">
+    </div>
+    <div class="flex-container flexFlowColumn">
+        <label>
+            Output format:
+        </label>
+        <label class="checkbox_label justifyLeft" for="scrapeOutputSingle">
+            <input id="scrapeOutputSingle" type="radio" name="scrapeOutput" value="single" checked>
+            <div class="flex-container flexFlowColumn flexNoGap">
+                <span data-i18n="Single file">
+                    Single file
+                </span>
+                <small data-i18n="All articles will be concatenated into a single file.">
+                    All articles will be concatenated into a single file.
+                </small>
+            </div>
+        </label>
+        <label class="checkbox_label justifyLeft" for="scrapeOutputMulti">
+            <input id="scrapeOutputMulti" type="radio" name="scrapeOutput" value="multi">
+            <div class="flex-container flexFlowColumn flexNoGap">
+                <span data-i18n="File per article">
+                    File per article
+                </span>
+                <small data-i18n="Each article will be saved as a separate file.">
+                    Not recommended. Each article will be saved as a separate file.
+                </small>
+            </div>
+        </label>
+    </div>
+</div>

public/scripts/extensions/attachments/move-attachment.html

@@ -0,0 +1,8 @@
+<div class="flex-container justifyCenter alignItemsBaseline">
+    <span>Move <strong class="moveAttachmentName">{{name}}</strong> to...</span>
+    <select class="moveAttachmentTarget">
+        {{#each targets}}
+            <option value="{{this}}">{{this}}</option>
+        {{/each}}
+    </select>
+</div>

public/scripts/extensions/attachments/notepad.html

@@ -0,0 +1,10 @@
+<div class="flex-container flexFlowColumn height100p">
+    <label for="notepadFileName">
+        File Name
+    </label>
+    <input type="text" class="text_pole" id="notepadFileName" name="notepadFileName" value="" />
+    <labels>
+        File Content
+    </label>
+    <textarea id="notepadFileContent" name="notepadFileContent" class="text_pole textarea_compact monospace flex1" placeholder="Enter your notes here."></textarea>
+</div>

public/scripts/extensions/attachments/style.css

@@ -0,0 +1,63 @@
+.attachmentsList:empty {
+    width: 100%;
+    height: 100%;
+}
+
+.attachmentsList:empty::before {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    content: "No data";
+    font-weight: bolder;
+    width: 100%;
+    height: 100%;
+    opacity: 0.8;
+    min-height: 3rem;
+}
+
+.attachmentListItem {
+    padding: 10px;
+}
+
+.attachmentListItem.disabled .attachmentListItemName {
+    text-decoration: line-through;
+    opacity: 0.75;
+}
+
+.attachmentListItem.disabled .attachmentFileIcon {
+    opacity: 0.75;
+    cursor: not-allowed;
+}
+
+.attachmentListItemSize {
+    min-width: 4em;
+    text-align: right;
+}
+
+.attachmentListItemCreated {
+    text-align: right;
+}
+
+.attachmentListItemCheckboxContainer,
+.attachmentBulkActionsContainer,
+.attachmentsBulkEditCheckbox {
+    display: none;
+}
+
+@supports selector(:has(*)) {
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentsBulkEditButton {
+        color: var(--golden);
+    }
+
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentBulkActionsContainer {
+        display: flex;
+    }
+
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentListItemCheckboxContainer {
+        display: inline-flex;
+    }
+
+    .dataBankAttachments:has(.attachmentsBulkEditCheckbox:checked) .attachmentFileIcon {
+        display: none;
+    }
+}

public/scripts/extensions/attachments/web-scrape.html

@@ -0,0 +1,3 @@
+<div data-i18n="Enter web URLs to scrape (one per line):">
+    Enter web URLs to scrape (one per line):
+</div>

public/scripts/extensions/attachments/youtube-scrape.html

@@ -0,0 +1,20 @@
+<div>
+    <strong data-i18n="Enter a video URL to download its transcript.">
+        Enter a video URL or ID to download its transcript.
+    </strong>
+    <div data-i18n="Examples:" class="m-t-1">
+        Examples:
+    </div>
+    <ul class="justifyLeft">
+        <li>https://www.youtube.com/watch?v=jV1vkHv4zq8</li>
+        <li>https://youtu.be/nlLhw1mtCFA</li>
+        <li>TDpxx5UqrVU</li>
+    </ul>
+    <label>
+        Language code (optional 2-letter ISO code):
+    </label>
+    <input type="text" class="text_pole" name="youtubeLanguageCode" placeholder="e.g. en">
+    <label>
+        Video ID:
+    </label>
+</div>

public/scripts/extensions/caption/index.js

@@ -0,0 +1,650 @@
+import { ensureImageFormatSupported, getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
+import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
+import { appendMediaToMessage, callPopup, eventSource, event_types, getRequestHeaders, saveChatConditional, saveSettingsDebounced, substituteParamsExtended } from '../../../script.js';
+import { getMessageTimeStamp } from '../../RossAscends-mods.js';
+import { SECRET_KEYS, secret_state } from '../../secrets.js';
+import { getMultimodalCaption } from '../shared.js';
+import { textgen_types, textgenerationwebui_settings } from '../../textgen-settings.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+export { MODULE_NAME };
+
+const MODULE_NAME = 'caption';
+
+const PROMPT_DEFAULT = 'What\'s in this image?';
+const TEMPLATE_DEFAULT = '[{{user}} sends {{char}} a picture that contains: {{caption}}]';
+
+/**
+ * Migrates old extension settings to the new format.
+ * Must keep this function for compatibility with old settings.
+ */
+function migrateSettings() {
+    if (extension_settings.caption.local !== undefined) {
+        extension_settings.caption.source = extension_settings.caption.local ? 'local' : 'extras';
+    }
+
+    delete extension_settings.caption.local;
+
+    if (!extension_settings.caption.source) {
+        extension_settings.caption.source = 'extras';
+    }
+
+    if (extension_settings.caption.source === 'openai') {
+        extension_settings.caption.source = 'multimodal';
+        extension_settings.caption.multimodal_api = 'openai';
+        extension_settings.caption.multimodal_model = 'gpt-4-turbo';
+    }
+
+    if (!extension_settings.caption.multimodal_api) {
+        extension_settings.caption.multimodal_api = 'openai';
+    }
+
+    if (!extension_settings.caption.multimodal_model) {
+        extension_settings.caption.multimodal_model = 'gpt-4-turbo';
+    }
+
+    if (!extension_settings.caption.prompt) {
+        extension_settings.caption.prompt = PROMPT_DEFAULT;
+    }
+
+    if (!extension_settings.caption.template) {
+        extension_settings.caption.template = TEMPLATE_DEFAULT;
+    }
+}
+
+/**
+ * Sets an image icon for the send button.
+ */
+async function setImageIcon() {
+    try {
+        const sendButton = $('#send_picture .extensionsMenuExtensionButton');
+        sendButton.addClass('fa-image');
+        sendButton.removeClass('fa-hourglass-half');
+    }
+    catch (error) {
+        console.log(error);
+    }
+}
+
+/**
+ * Sets a spinner icon for the send button.
+ */
+async function setSpinnerIcon() {
+    try {
+        const sendButton = $('#send_picture .extensionsMenuExtensionButton');
+        sendButton.removeClass('fa-image');
+        sendButton.addClass('fa-hourglass-half');
+    }
+    catch (error) {
+        console.log(error);
+    }
+}
+
+/**
+ * Wraps a caption with a message template.
+ * @param {string} caption Raw caption
+ * @returns {Promise<string>} Wrapped caption
+ */
+async function wrapCaptionTemplate(caption) {
+    let template = extension_settings.caption.template || TEMPLATE_DEFAULT;
+
+    if (!/{{caption}}/i.test(template)) {
+        console.warn('Poka-yoke: Caption template does not contain {{caption}}. Appending it.');
+        template += ' {{caption}}';
+    }
+
+    let messageText = substituteParamsExtended(template, { caption: caption });
+
+    if (extension_settings.caption.refine_mode) {
+        messageText = await callPopup(
+            '<h3>Review and edit the generated caption:</h3>Press "Cancel" to abort the caption sending.',
+            'input',
+            messageText,
+            { rows: 5, okButton: 'Send' });
+
+        if (!messageText) {
+            throw new Error('User aborted the caption sending.');
+        }
+    }
+
+    return messageText;
+}
+
+/**
+ * Appends caption to an existing message.
+ * @param {Object} data Message data
+ * @returns {Promise<void>}
+ */
+async function captionExistingMessage(data) {
+    if (!(data?.extra?.image)) {
+        return;
+    }
+
+    const imageData = await fetch(data.extra.image);
+    const blob = await imageData.blob();
+    const type = imageData.headers.get('Content-Type');
+    const file = new File([blob], 'image.png', { type });
+    const caption = await getCaptionForFile(file, null, true);
+
+    if (!caption) {
+        console.warn('Failed to generate a caption for the image.');
+        return;
+    }
+
+    const wrappedCaption = await wrapCaptionTemplate(caption);
+
+    const messageText = String(data.mes).trim();
+
+    if (!messageText) {
+        data.extra.inline_image = false;
+        data.mes = wrappedCaption;
+        data.extra.title = wrappedCaption;
+    }
+    else {
+        data.extra.inline_image = true;
+        data.extra.append_title = true;
+        data.extra.title = wrappedCaption;
+    }
+}
+
+/**
+ * Sends a captioned message to the chat.
+ * @param {string} caption Caption text
+ * @param {string} image Image URL
+ */
+async function sendCaptionedMessage(caption, image) {
+    const messageText = await wrapCaptionTemplate(caption);
+
+    const context = getContext();
+    const message = {
+        name: context.name1,
+        is_user: true,
+        send_date: getMessageTimeStamp(),
+        mes: messageText,
+        extra: {
+            image: image,
+            title: messageText,
+        },
+    };
+    context.chat.push(message);
+    const messageId = context.chat.length - 1;
+    await eventSource.emit(event_types.MESSAGE_SENT, messageId);
+    context.addOneMessage(message);
+    await eventSource.emit(event_types.USER_MESSAGE_RENDERED, messageId);
+    await context.saveChat();
+}
+
+/**
+ * Generates a caption for an image using a selected source.
+ * @param {string} base64Img Base64 encoded image without the data:image/...;base64, prefix
+ * @param {string} fileData Base64 encoded image with the data:image/...;base64, prefix
+ * @param {string} externalPrompt Caption prompt
+ * @returns {Promise<{caption: string}>} Generated caption
+ */
+async function doCaptionRequest(base64Img, fileData, externalPrompt) {
+    switch (extension_settings.caption.source) {
+        case 'local':
+            return await captionLocal(base64Img);
+        case 'extras':
+            return await captionExtras(base64Img);
+        case 'horde':
+            return await captionHorde(base64Img);
+        case 'multimodal':
+            return await captionMultimodal(fileData, externalPrompt);
+        default:
+            throw new Error('Unknown caption source.');
+    }
+}
+
+/**
+ * Generates a caption for an image using Extras API.
+ * @param {string} base64Img Base64 encoded image without the data:image/...;base64, prefix
+ * @returns {Promise<{caption: string}>} Generated caption
+ */
+async function captionExtras(base64Img) {
+    if (!modules.includes('caption')) {
+        throw new Error('No captioning module is available.');
+    }
+
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/caption';
+
+    const apiResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Bypass-Tunnel-Reminder': 'bypass',
+        },
+        body: JSON.stringify({ image: base64Img }),
+    });
+
+    if (!apiResult.ok) {
+        throw new Error('Failed to caption image via Extras.');
+    }
+
+    const data = await apiResult.json();
+    return data;
+}
+
+/**
+ * Generates a caption for an image using a local model.
+ * @param {string} base64Img Base64 encoded image without the data:image/...;base64, prefix
+ * @returns {Promise<{caption: string}>} Generated caption
+ */
+async function captionLocal(base64Img) {
+    const apiResult = await fetch('/api/extra/caption', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ image: base64Img }),
+    });
+
+    if (!apiResult.ok) {
+        throw new Error('Failed to caption image via local pipeline.');
+    }
+
+    const data = await apiResult.json();
+    return data;
+}
+
+/**
+ * Generates a caption for an image using a Horde model.
+ * @param {string} base64Img Base64 encoded image without the data:image/...;base64, prefix
+ * @returns {Promise<{caption: string}>} Generated caption
+ */
+async function captionHorde(base64Img) {
+    const apiResult = await fetch('/api/horde/caption-image', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ image: base64Img }),
+    });
+
+    if (!apiResult.ok) {
+        throw new Error('Failed to caption image via Horde.');
+    }
+
+    const data = await apiResult.json();
+    return data;
+}
+
+/**
+ * Generates a caption for an image using a multimodal model.
+ * @param {string} base64Img Base64 encoded image with the data:image/...;base64, prefix
+ * @param {string} externalPrompt Caption prompt
+ * @returns {Promise<{caption: string}>} Generated caption
+ */
+async function captionMultimodal(base64Img, externalPrompt) {
+    let prompt = externalPrompt || extension_settings.caption.prompt || PROMPT_DEFAULT;
+
+    if (!externalPrompt && extension_settings.caption.prompt_ask) {
+        const customPrompt = await callPopup('<h3>Enter a comment or question:</h3>', 'input', prompt, { rows: 2 });
+        if (!customPrompt) {
+            throw new Error('User aborted the caption sending.');
+        }
+        prompt = String(customPrompt).trim();
+    }
+
+    const caption = await getMultimodalCaption(base64Img, prompt);
+    return { caption };
+}
+
+/**
+ * Handles the image selection event.
+ * @param {Event} e Input event
+ * @param {string} prompt Caption prompt
+ * @param {boolean} quiet Suppresses sending a message
+ * @returns {Promise<string>} Generated caption
+ */
+async function onSelectImage(e, prompt, quiet) {
+    if (!(e.target instanceof HTMLInputElement)) {
+        return '';
+    }
+
+    const file = e.target.files[0];
+    const form = e.target.form;
+
+    if (!file || !(file instanceof File)) {
+        form && form.reset();
+        return '';
+    }
+
+    const caption = await getCaptionForFile(file, prompt, quiet);
+    form && form.reset();
+    return caption;
+}
+
+/**
+ * Gets a caption for an image file.
+ * @param {File} file Input file
+ * @param {string} prompt Caption prompt
+ * @param {boolean} quiet Suppresses sending a message
+ * @returns {Promise<string>} Generated caption
+ */
+async function getCaptionForFile(file, prompt, quiet) {
+    try {
+        setSpinnerIcon();
+        const context = getContext();
+        const fileData = await getBase64Async(await ensureImageFormatSupported(file));
+        const base64Format = fileData.split(',')[0].split(';')[0].split('/')[1];
+        const base64Data = fileData.split(',')[1];
+        const { caption } = await doCaptionRequest(base64Data, fileData, prompt);
+        if (!quiet) {
+            const imagePath = await saveBase64AsFile(base64Data, context.name2, '', base64Format);
+            await sendCaptionedMessage(caption, imagePath);
+        }
+        return caption;
+    }
+    catch (error) {
+        const errorMessage = error.message || 'Unknown error';
+        toastr.error(errorMessage, 'Failed to caption image.');
+        console.error(error);
+        return '';
+    }
+    finally {
+        setImageIcon();
+    }
+}
+
+function onRefineModeInput() {
+    extension_settings.caption.refine_mode = $('#caption_refine_mode').prop('checked');
+    saveSettingsDebounced();
+}
+
+/**
+ * Callback for the /caption command.
+ * @param {object} args Named parameters
+ * @param {string} prompt Caption prompt
+ */
+async function captionCommandCallback(args, prompt) {
+    const quiet = isTrueBoolean(args?.quiet);
+    const mesId = args?.mesId ?? args?.id;
+
+    if (!isNaN(Number(mesId))) {
+        const message = getContext().chat[mesId];
+        if (message?.extra?.image) {
+            try {
+                const fetchResult = await fetch(message.extra.image);
+                const blob = await fetchResult.blob();
+                const file = new File([blob], 'image.jpg', { type: blob.type });
+                return await getCaptionForFile(file, prompt, quiet);
+            } catch (error) {
+                toastr.error('Failed to get image from the message. Make sure the image is accessible.');
+                return '';
+            }
+        }
+    }
+
+    return new Promise(resolve => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = async (e) => {
+            const caption = await onSelectImage(e, prompt, quiet);
+            resolve(caption);
+        };
+        input.oncancel = () => resolve('');
+        input.click();
+    });
+}
+
+jQuery(async function () {
+    function addSendPictureButton() {
+        const sendButton = $(`
+        <div id="send_picture" class="list-group-item flex-container flexGap5">
+            <div class="fa-solid fa-image extensionsMenuExtensionButton"></div>
+            <span data-i18n="Generate Caption">Generate Caption</span>
+        </div>`);
+
+        $('#caption_wand_container').append(sendButton);
+        $(sendButton).on('click', () => {
+            const hasCaptionModule = (() => {
+                const settings = extension_settings.caption;
+
+                // Handle non-multimodal sources
+                if (settings.source === 'extras' && modules.includes('caption')) return true;
+                if (settings.source === 'local' || settings.source === 'horde') return true;
+
+                // Handle multimodal sources
+                if (settings.source === 'multimodal') {
+                    const api = settings.multimodal_api;
+
+                    // APIs that support reverse proxy
+                    const reverseProxyApis = {
+                        'openai': SECRET_KEYS.OPENAI,
+                        'mistral': SECRET_KEYS.MISTRALAI,
+                        'google': SECRET_KEYS.MAKERSUITE,
+                        'anthropic': SECRET_KEYS.CLAUDE,
+                    };
+
+                    if (reverseProxyApis[api]) {
+                        if (secret_state[reverseProxyApis[api]] || settings.allow_reverse_proxy) {
+                            return true;
+                        }
+                    }
+
+                    const chatCompletionApis = {
+                        'openrouter': SECRET_KEYS.OPENROUTER,
+                        'zerooneai': SECRET_KEYS.ZEROONEAI,
+                        'groq': SECRET_KEYS.GROQ,
+                        'cohere': SECRET_KEYS.COHERE,
+                    };
+
+                    if (chatCompletionApis[api] && secret_state[chatCompletionApis[api]]) {
+                        return true;
+                    }
+
+                    const textCompletionApis = {
+                        'ollama': textgen_types.OLLAMA,
+                        'llamacpp': textgen_types.LLAMACPP,
+                        'ooba': textgen_types.OOBA,
+                        'koboldcpp': textgen_types.KOBOLDCPP,
+                        'vllm': textgen_types.VLLM,
+                    };
+
+                    if (textCompletionApis[api] && textgenerationwebui_settings.server_urls[textCompletionApis[api]]) {
+                        return true;
+                    }
+
+                    // Custom API doesn't need additional checks
+                    if (api === 'custom') {
+                        return true;
+                    }
+                }
+
+                return false;
+            })();
+
+            if (!hasCaptionModule) {
+                toastr.error('Choose other captioning source in the extension settings.', 'Captioning is not available');
+                return;
+            }
+
+            $('#img_file').trigger('click');
+        });
+    }
+    function addPictureSendForm() {
+        const inputHtml = '<input id="img_file" type="file" hidden accept="image/*">';
+        const imgForm = document.createElement('form');
+        imgForm.id = 'img_form';
+        $(imgForm).append(inputHtml);
+        $(imgForm).hide();
+        $('#form_sheld').append(imgForm);
+        $('#img_file').on('change', (e) => onSelectImage(e.originalEvent, '', false));
+    }
+    async function switchMultimodalBlocks() {
+        await addOpenRouterModels();
+        const isMultimodal = extension_settings.caption.source === 'multimodal';
+        $('#caption_multimodal_block').toggle(isMultimodal);
+        $('#caption_prompt_block').toggle(isMultimodal);
+        $('#caption_multimodal_api').val(extension_settings.caption.multimodal_api);
+        $('#caption_multimodal_model').val(extension_settings.caption.multimodal_model);
+        $('#caption_multimodal_block [data-type]').each(function () {
+            const type = $(this).data('type');
+            const types = type.split(',');
+            $(this).toggle(types.includes(extension_settings.caption.multimodal_api));
+        });
+    }
+    async function addSettings() {
+        const html = await renderExtensionTemplateAsync('caption', 'settings', { TEMPLATE_DEFAULT, PROMPT_DEFAULT });
+        $('#caption_container').append(html);
+    }
+    async function addOpenRouterModels() {
+        const dropdown = document.getElementById('caption_multimodal_model');
+        if (!(dropdown instanceof HTMLSelectElement)) {
+            return;
+        }
+        if (extension_settings.caption.source !== 'multimodal' || extension_settings.caption.multimodal_api !== 'openrouter') {
+            return;
+        }
+        const options = Array.from(dropdown.options);
+        const response = await fetch('/api/openrouter/models/multimodal', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+        });
+        if (!response.ok) {
+            return;
+        }
+        const modelIds = await response.json();
+        if (Array.isArray(modelIds) && modelIds.length > 0) {
+            modelIds.forEach((modelId) => {
+                if (!modelId || typeof modelId !== 'string' || options.some(o => o.value === modelId)) {
+                    return;
+                }
+                const option = document.createElement('option');
+                option.value = modelId;
+                option.textContent = modelId;
+                option.dataset.type = 'openrouter';
+                dropdown.add(option);
+            });
+        }
+    }
+
+    await addSettings();
+    addPictureSendForm();
+    addSendPictureButton();
+    setImageIcon();
+    migrateSettings();
+    await switchMultimodalBlocks();
+
+    $('#caption_refine_mode').prop('checked', !!(extension_settings.caption.refine_mode));
+    $('#caption_allow_reverse_proxy').prop('checked', !!(extension_settings.caption.allow_reverse_proxy));
+    $('#caption_prompt_ask').prop('checked', !!(extension_settings.caption.prompt_ask));
+    $('#caption_auto_mode').prop('checked', !!(extension_settings.caption.auto_mode));
+    $('#caption_source').val(extension_settings.caption.source);
+    $('#caption_prompt').val(extension_settings.caption.prompt);
+    $('#caption_template').val(extension_settings.caption.template);
+    $('#caption_refine_mode').on('input', onRefineModeInput);
+    $('#caption_source').on('change', () => {
+        extension_settings.caption.source = String($('#caption_source').val());
+        switchMultimodalBlocks();
+        saveSettingsDebounced();
+    });
+    $('#caption_prompt').on('input', () => {
+        extension_settings.caption.prompt = String($('#caption_prompt').val());
+        saveSettingsDebounced();
+    });
+    $('#caption_template').on('input', () => {
+        extension_settings.caption.template = String($('#caption_template').val());
+        saveSettingsDebounced();
+    });
+    $('#caption_allow_reverse_proxy').on('input', () => {
+        extension_settings.caption.allow_reverse_proxy = $('#caption_allow_reverse_proxy').prop('checked');
+        saveSettingsDebounced();
+    });
+    $('#caption_prompt_ask').on('input', () => {
+        extension_settings.caption.prompt_ask = $('#caption_prompt_ask').prop('checked');
+        saveSettingsDebounced();
+    });
+    $('#caption_auto_mode').on('input', () => {
+        extension_settings.caption.auto_mode = !!$('#caption_auto_mode').prop('checked');
+        saveSettingsDebounced();
+    });
+    $('#caption_ollama_pull').on('click', (e) => {
+        const presetModel = extension_settings.caption.multimodal_model !== 'ollama_current' ? extension_settings.caption.multimodal_model : '';
+        e.preventDefault();
+        $('#ollama_download_model').trigger('click');
+        $('#dialogue_popup_input').val(presetModel);
+    });
+    $('#caption_multimodal_api').on('change', () => {
+        const api = String($('#caption_multimodal_api').val());
+        const model = String($(`#caption_multimodal_model option[data-type="${api}"]`).first().val());
+        extension_settings.caption.multimodal_api = api;
+        extension_settings.caption.multimodal_model = model;
+        saveSettingsDebounced();
+        switchMultimodalBlocks();
+    });
+    $('#caption_multimodal_model').on('change', () => {
+        extension_settings.caption.multimodal_model = String($('#caption_multimodal_model').val());
+        saveSettingsDebounced();
+    });
+
+    const onMessageEvent = async (index) => {
+        if (!extension_settings.caption.auto_mode) {
+            return;
+        }
+
+        const data = getContext().chat[index];
+        await captionExistingMessage(data);
+    };
+
+    eventSource.on(event_types.MESSAGE_SENT, onMessageEvent);
+    eventSource.on(event_types.MESSAGE_FILE_EMBEDDED, onMessageEvent);
+
+    $(document).on('click', '.mes_img_caption', async function () {
+        const animationClass = 'fa-fade';
+        const messageBlock = $(this).closest('.mes');
+        const messageImg = messageBlock.find('.mes_img');
+        if (messageImg.hasClass(animationClass)) return;
+        messageImg.addClass(animationClass);
+        try {
+            const index = Number(messageBlock.attr('mesid'));
+            const data = getContext().chat[index];
+            await captionExistingMessage(data);
+            appendMediaToMessage(data, messageBlock, false);
+            await saveChatConditional();
+        } catch (e) {
+            console.error('Message image recaption failed', e);
+        } finally {
+            messageImg.removeClass(animationClass);
+        }
+    });
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'caption',
+        callback: captionCommandCallback,
+        returns: 'caption',
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'quiet', 'suppress sending a captioned message', [ARGUMENT_TYPE.BOOLEAN], false, false, 'false',
+            ),
+            SlashCommandNamedArgument.fromProps({
+                name: 'mesId',
+                description: 'get image from a message with this ID',
+                typeList: [ARGUMENT_TYPE.NUMBER],
+                enumProvider: commonEnumProviders.messages(),
+            }),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'prompt', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: `
+            <div>
+                Caption an image with an optional prompt and passes the caption down the pipe.
+            </div>
+            <div>
+                Only multimodal sources support custom prompts.
+            </div>
+            <div>
+                Provide a message ID to get an image from a message instead of uploading one.
+            </div>
+            <div>
+                Set the "quiet" argument to true to suppress sending a captioned message, default: false.
+            </div>
+        `,
+    }));
+
+    document.body.classList.add('caption');
+});

public/scripts/extensions/caption/manifest.json

@@ -0,0 +1,13 @@
+{
+    "display_name": "Image Captioning",
+    "loading_order": 4,
+    "requires": [],
+    "optional": [
+        "caption"
+    ],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/caption/settings.html

@@ -0,0 +1,170 @@
+
+<div class="caption_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="Image Captioning">Image Captioning</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <label for="caption_source" data-i18n="Source">Source</label>
+            <select id="caption_source" class="text_pole">
+                <option value="local" data-i18n="Local">Local</option>
+                <option value="multimodal" data-i18n="Multimodal (OpenAI / Anthropic / llama / Google)">Multimodal (OpenAI / Anthropic / llama / Google)</option>
+                <option value="extras" data-i18n="Extras">Extras (deprecated)</option>
+                <option value="horde" data-i18n="Horde">Horde</option>
+            </select>
+            <div id="caption_multimodal_block" class="flex-container wide100p">
+                <div class="flex1 flex-container flexFlowColumn flexNoGap">
+                    <label for="caption_multimodal_api" data-i18n="API">API</label>
+                    <select id="caption_multimodal_api" class="flex1 text_pole">
+                        <option value="zerooneai">01.AI (Yi)</option>
+                        <option value="anthropic">Anthropic</option>
+                        <option value="cohere">Cohere</option>
+                        <option value="custom" data-i18n="Custom (OpenAI-compatible)">Custom (OpenAI-compatible)</option>
+                        <option value="google">Google AI Studio</option>
+                        <option value="groq">Groq</option>
+                        <option value="koboldcpp">KoboldCpp</option>
+                        <option value="llamacpp">llama.cpp</option>
+                        <option value="mistral">MistralAI</option>
+                        <option value="ollama">Ollama</option>
+                        <option value="openai">OpenAI</option>
+                        <option value="openrouter">OpenRouter</option>
+                        <option value="ooba" data-i18n="Text Generation WebUI (oobabooga)">Text Generation WebUI (oobabooga)</option>
+                        <option value="vllm">vLLM</option>
+                    </select>
+                </div>
+                <div class="flex1 flex-container flexFlowColumn flexNoGap">
+                    <label for="caption_multimodal_model" data-i18n="Model">Model</label>
+                    <select id="caption_multimodal_model" class="flex1 text_pole">
+                        <option data-type="cohere" value="c4ai-aya-vision-8b">c4ai-aya-vision-8b</option>
+                        <option data-type="cohere" value="c4ai-aya-vision-32b">c4ai-aya-vision-32b</option>
+                        <option data-type="mistral" value="pixtral-12b-latest">pixtral-12b-latest</option>
+                        <option data-type="mistral" value="pixtral-12b-2409">pixtral-12b-2409</option>
+                        <option data-type="mistral" value="pixtral-large-latest">pixtral-large-latest</option>
+                        <option data-type="mistral" value="pixtral-large-2411">pixtral-large-2411</option>
+                        <option data-type="mistral" value="mistral-large-pixtral-2411">mistral-large-pixtral-2411</option>
+                        <option data-type="mistral" value="mistral-small-2503">mistral-small-2503</option>
+                        <option data-type="mistral" value="mistral-small-latest">mistral-small-latest</option>
+                        <option data-type="zerooneai" value="yi-vision">yi-vision</option>
+                        <option data-type="openai" value="gpt-4-vision-preview">gpt-4-vision-preview</option>
+                        <option data-type="openai" value="gpt-4-turbo">gpt-4-turbo</option>
+                        <option data-type="openai" value="gpt-4o">gpt-4o</option>
+                        <option data-type="openai" value="gpt-4o-mini">gpt-4o-mini</option>
+                        <option data-type="openai" value="chatgpt-4o-latest">chatgpt-4o-latest</option>
+                        <option data-type="openai" value="o1">o1</option>
+                        <option data-type="openai" value="o1-2024-12-17">o1-2024-12-17</option>
+                        <option data-type="openai" value="gpt-4.5-preview">gpt-4.5-preview</option>
+                        <option data-type="openai" value="gpt-4.5-preview-2025-02-27">gpt-4.5-preview-2025-02-27</option>
+                        <option data-type="anthropic" value="claude-3-7-sonnet-latest">claude-3-7-sonnet-latest</option>
+                        <option data-type="anthropic" value="claude-3-7-sonnet-20250219">claude-3-7-sonnet-20250219</option>
+                        <option data-type="anthropic" value="claude-3-5-sonnet-latest">claude-3-5-sonnet-latest</option>
+                        <option data-type="anthropic" value="claude-3-5-sonnet-20241022">claude-3-5-sonnet-20241022</option>
+                        <option data-type="anthropic" value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</option>
+                        <option data-type="anthropic" value="claude-3-5-haiku-latest">claude-3-5-haiku-latest</option>
+                        <option data-type="anthropic" value="claude-3-5-haiku-20241022">claude-3-5-haiku-20241022</option>
+                        <option data-type="anthropic" value="claude-3-opus-20240229">claude-3-opus-20240229</option>
+                        <option data-type="anthropic" value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
+                        <option data-type="anthropic" value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
+                        <option data-type="google" value="gemini-2.5-pro-exp-03-25">gemini-2.5-pro-exp-03-25</option>
+                        <option data-type="google" value="gemini-2.0-pro-exp">gemini-2.0-pro-exp</option>
+                        <option data-type="google" value="gemini-2.0-pro-exp-02-05">gemini-2.0-pro-exp-02-05</option>
+                        <option data-type="google" value="gemini-2.0-flash-lite-preview">gemini-2.0-flash-lite-preview</option>
+                        <option data-type="google" value="gemini-2.0-flash-lite-preview-02-05">gemini-2.0-flash-lite-preview-02-05</option>
+                        <option data-type="google" value="gemini-2.0-flash">gemini-2.0-flash</option>
+                        <option data-type="google" value="gemini-2.0-flash-001">gemini-2.0-flash-001</option>
+                        <option data-type="google" value="gemini-2.0-flash-exp">gemini-2.0-flash-exp</option>
+                        <option data-type="google" value="gemini-2.0-flash-exp-image-generation">gemini-2.0-flash-exp-image-generation</option>
+                        <option data-type="google" value="gemini-2.0-flash-thinking-exp">gemini-2.0-flash-thinking-exp</option>
+                        <option data-type="google" value="gemini-2.0-flash-thinking-exp-01-21">gemini-2.0-flash-thinking-exp-01-21</option>
+                        <option data-type="google" value="gemini-2.0-flash-thinking-exp-1219">gemini-2.0-flash-thinking-exp-1219</option>
+                        <option data-type="google" value="gemini-1.5-flash">gemini-1.5-flash</option>
+                        <option data-type="google" value="gemini-1.5-flash-latest">gemini-1.5-flash-latest</option>
+                        <option data-type="google" value="gemini-1.5-flash-001">gemini-1.5-flash-001</option>
+                        <option data-type="google" value="gemini-1.5-flash-002">gemini-1.5-flash-002</option>
+                        <option data-type="google" value="gemini-1.5-flash-exp-0827">gemini-1.5-flash-exp-0827</option>
+                        <option data-type="google" value="gemini-1.5-flash-8b-exp-0827">gemini-1.5-flash-8b-exp-0827</option>
+                        <option data-type="google" value="gemini-1.5-flash-8b-exp-0924">gemini-1.5-flash-8b-exp-0924</option>
+                        <option data-type="google" value="gemini-exp-1114">gemini-exp-1114</option>
+                        <option data-type="google" value="gemini-exp-1121">gemini-exp-1121</option>
+                        <option data-type="google" value="gemini-exp-1206">gemini-exp-1206</option>
+                        <option data-type="google" value="gemini-1.5-pro">gemini-1.5-pro</option>
+                        <option data-type="google" value="gemini-1.5-pro-latest">gemini-1.5-pro-latest</option>
+                        <option data-type="google" value="gemini-1.5-pro-001">gemini-1.5-pro-001</option>
+                        <option data-type="google" value="gemini-1.5-pro-002">gemini-1.5-pro-002</option>
+                        <option data-type="google" value="gemini-1.5-pro-exp-0801">gemini-1.5-pro-exp-0801</option>
+                        <option data-type="google" value="gemini-1.5-pro-exp-0827">gemini-1.5-pro-exp-0827</option>
+                        <option data-type="groq" value="llama-3.2-11b-vision-preview">llama-3.2-11b-vision-preview</option>
+                        <option data-type="groq" value="llama-3.2-90b-vision-preview">llama-3.2-90b-vision-preview</option>
+                        <option data-type="groq" value="llava-v1.5-7b-4096-preview">llava-v1.5-7b-4096-preview</option>
+                        <option data-type="openrouter" value="openai/gpt-4-vision-preview">openai/gpt-4-vision-preview</option>
+                        <option data-type="openrouter" value="openai/gpt-4o">openai/gpt-4o</option>
+                        <option data-type="openrouter" value="openai/gpt-4o-2024-05-13">openai/gpt-4o-2024-05-13</option>
+                        <option data-type="openrouter" value="openai/gpt-4o-2024-08-06">openai/gpt-4o-2024-08-06</option>
+                        <option data-type="openrouter" value="openai/gpt-4-turbo">openai/gpt-4-turbo</option>
+                        <option data-type="openrouter" value="openai/gpt-4o-mini">openai/gpt-4o-mini</option>
+                        <option data-type="openrouter" value="openai/gpt-4o-mini-2024-07-18">openai/gpt-4o-mini-2024-07-18</option>
+                        <option data-type="openrouter" value="openai/chatgpt-4o-latest">openai/chatgpt-4o-latest</option>
+                        <option data-type="openrouter" value="haotian-liu/llava-13b">haotian-liu/llava-13b</option>
+                        <option data-type="openrouter" value="fireworks/firellava-13b">fireworks/firellava-13b</option>
+                        <option data-type="openrouter" value="anthropic/claude-3.5-sonnet">anthropic/claude-3.5-sonnet</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-haiku">anthropic/claude-3-haiku</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-sonnet">anthropic/claude-3-sonnet</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-opus">anthropic/claude-3-opus</option>
+                        <option data-type="openrouter" value="anthropic/claude-3.5-sonnet:beta">anthropic/claude-3.5-sonnet:beta</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-haiku:beta">anthropic/claude-3-haiku:beta</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-sonnet:beta">anthropic/claude-3-sonnet:beta</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-opus:beta">anthropic/claude-3-opus:beta</option>
+                        <option data-type="openrouter" value="nousresearch/nous-hermes-2-vision-7b">nousresearch/nous-hermes-2-vision-7b</option>
+                        <option data-type="openrouter" value="google/gemini-flash-8b-1.5-exp">google/gemini-flash-8b-1.5-exp</option>
+                        <option data-type="openrouter" value="google/gemini-flash-1.5">google/gemini-flash-1.5</option>
+                        <option data-type="openrouter" value="google/gemini-flash-1.5-exp">google/gemini-flash-1.5-exp</option>
+                        <option data-type="openrouter" value="google/gemini-pro-1.5">google/gemini-pro-1.5</option>
+                        <option data-type="openrouter" value="google/gemini-pro-1.5-exp">google/gemini-pro-1.5-exp</option>
+                        <option data-type="openrouter" value="google/gemini-pro-vision">google/gemini-pro-vision</option>
+                        <option data-type="openrouter" value="liuhaotian/llava-yi-34b">liuhaotian/llava-yi-34b</option>
+                        <option data-type="ollama" value="ollama_current" data-i18n="currently_selected">[Currently selected]</option>
+                        <option data-type="ollama" value="bakllava">bakllava</option>
+                        <option data-type="ollama" value="llava">llava</option>
+                        <option data-type="ollama" value="llava-llama3">llava-llama3</option>
+                        <option data-type="ollama" value="llava-phi3">llava-phi3</option>
+                        <option data-type="ollama" value="moondream">moondream</option>
+                        <option data-type="llamacpp" value="llamacpp_current" data-i18n="currently_loaded">[Currently loaded]</option>
+                        <option data-type="ooba" value="ooba_current" data-i18n="currently_loaded">[Currently loaded]</option>
+                        <option data-type="koboldcpp" value="koboldcpp_current" data-i18n="currently_loaded">[Currently loaded]</option>
+                        <option data-type="vllm" value="vllm_current" data-i18n="currently_selected">[Currently selected]</option>
+                        <option data-type="custom" value="custom_current" data-i18n="currently_selected">[Currently selected]</option>
+                    </select>
+                </div>
+                <div data-type="ollama">
+                    The model must be downloaded first! Do it with the <code>ollama pull</code> command or <a href="#" id="caption_ollama_pull">click here</a>.
+                </div>
+                <label data-type="openai,anthropic,google,mistral" class="checkbox_label flexBasis100p" for="caption_allow_reverse_proxy" title="Allow using reverse proxy if defined and valid.">
+                    <input id="caption_allow_reverse_proxy" type="checkbox" class="checkbox">
+                    <span data-i18n="Allow reverse proxy">Allow reverse proxy</span>
+                </label>
+                <div class="flexBasis100p m-b-1">
+                    <small><b data-i18n="Hint:">Hint:</b> <span data-i18n="Set your API keys and endpoints in the 'API Connections' tab first.">Set your API keys and endpoints in the 'API Connections' tab first.</span></small>
+                </div>
+            </div>
+            <div id="caption_prompt_block">
+                <label for="caption_prompt" data-i18n="Caption Prompt">Caption Prompt</label>
+                <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">{{PROMPT_DEFAULT}}</textarea>
+                <label class="checkbox_label margin-bot-10px" for="caption_prompt_ask" title="Ask for a custom prompt every time an image is captioned.">
+                    <input id="caption_prompt_ask" type="checkbox" class="checkbox">
+                    <span data-i18n="Ask every time">Ask every time</span>
+                </label>
+            </div>
+            <label for="caption_template"><span data-i18n="Message Template">Message Template</span> <small><span data-i18n="(use _space">(use </span> <code>&lcub;&lcub;caption&rcub;&rcub;</code> <span data-i18n="macro)">macro)</span></small></label>
+            <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">{{TEMPLATE_DEFAULT}}</textarea>
+            <label class="checkbox_label" for="caption_auto_mode">
+                <input id="caption_auto_mode" type="checkbox" class="checkbox">
+                <span data-i18n="Automatically caption images">Automatically caption images</span>
+                <i class="fa-solid fa-info-circle" title="Automatically caption images when they are pasted into the chat or attached to messages."></i>
+            </label>
+            <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
+                <input id="caption_refine_mode" type="checkbox" class="checkbox">
+                <span data-i18n="Edit captions before saving">Edit captions before saving</span>
+            </label>
+        </div>
+    </div>
+</div>

public/scripts/extensions/caption/style.css

@@ -0,0 +1,3 @@
+#img_form {
+    display: none;
+}

public/scripts/extensions/connection-manager/edit.html

@@ -0,0 +1,12 @@
+<div>
+    <h3 data-i18n="Included settings:">Included settings:</h3>
+    <div class="justifyLeft flex-container flexFlowColumn flexNoGap">
+        {{#each settings}}
+        <label class="checkbox_label">
+            <input type="checkbox" value="{{@key}}" name="exclude"{{#if this}} checked{{/if}}>
+            <span data-i18n="{{@key}}">{{@key}}</span>
+        </label>
+        {{/each}}
+    </div>
+    <h3 data-i18n="Profile name:">Profile name:</h3>
+</div>

public/scripts/extensions/connection-manager/index.js

@@ -0,0 +1,782 @@
+import { DOMPurify, Fuse } from '../../../lib.js';
+
+import { event_types, eventSource, main_api, saveSettingsDebounced } from '../../../script.js';
+import { extension_settings, renderExtensionTemplateAsync } from '../../extensions.js';
+import { callGenericPopup, Popup, POPUP_RESULT, POPUP_TYPE } from '../../popup.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { SlashCommandAbortController } from '../../slash-commands/SlashCommandAbortController.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { commonEnumProviders, enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandDebugController } from '../../slash-commands/SlashCommandDebugController.js';
+import { enumTypes, SlashCommandEnumValue } from '../../slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommandScope } from '../../slash-commands/SlashCommandScope.js';
+import { collapseSpaces, getUniqueName, isFalseBoolean, uuidv4 } from '../../utils.js';
+import { t } from '../../i18n.js';
+
+const MODULE_NAME = 'connection-manager';
+const NONE = '<None>';
+const EMPTY = '<Empty>';
+
+const DEFAULT_SETTINGS = {
+    profiles: [],
+    selectedProfile: null,
+};
+
+// Commands that can record an empty value into the profile
+const ALLOW_EMPTY = [
+    'stop-strings',
+    'start-reply-with',
+];
+
+const CC_COMMANDS = [
+    'api',
+    'preset',
+    // Do not fix; CC needs to set the API twice because it could be overridden by the preset
+    'api',
+    'api-url',
+    'model',
+    'proxy',
+    'stop-strings',
+    'start-reply-with',
+    'reasoning-template',
+];
+
+const TC_COMMANDS = [
+    'api',
+    'preset',
+    'api-url',
+    'model',
+    'sysprompt',
+    'sysprompt-state',
+    'instruct',
+    'context',
+    'instruct-state',
+    'tokenizer',
+    'stop-strings',
+    'start-reply-with',
+    'reasoning-template',
+];
+
+const FANCY_NAMES = {
+    'api': 'API',
+    'api-url': 'Server URL',
+    'preset': 'Settings Preset',
+    'model': 'Model',
+    'proxy': 'Proxy Preset',
+    'sysprompt-state': 'Use System Prompt',
+    'sysprompt': 'System Prompt Name',
+    'instruct-state': 'Instruct Mode',
+    'instruct': 'Instruct Template',
+    'context': 'Context Template',
+    'tokenizer': 'Tokenizer',
+    'stop-strings': 'Custom Stopping Strings',
+    'start-reply-with': 'Start Reply With',
+    'reasoning-template': 'Reasoning Template',
+};
+
+/**
+ * A wrapper for the connection manager spinner.
+ */
+class ConnectionManagerSpinner {
+    /**
+     * @type {AbortController[]}
+     */
+    static abortControllers = [];
+
+    /** @type {HTMLElement} */
+    spinnerElement;
+
+    /** @type {AbortController} */
+    abortController = new AbortController();
+
+    constructor() {
+        // @ts-ignore
+        this.spinnerElement = document.getElementById('connection_profile_spinner');
+        this.abortController = new AbortController();
+    }
+
+    start() {
+        ConnectionManagerSpinner.abortControllers.push(this.abortController);
+        this.spinnerElement.classList.remove('hidden');
+    }
+
+    stop() {
+        this.spinnerElement.classList.add('hidden');
+    }
+
+    isAborted() {
+        return this.abortController.signal.aborted;
+    }
+
+    static abort() {
+        for (const controller of ConnectionManagerSpinner.abortControllers) {
+            controller.abort();
+        }
+        ConnectionManagerSpinner.abortControllers = [];
+    }
+}
+
+/**
+ * Get named arguments for the command callback.
+ * @param {object} [args] Additional named arguments
+ * @param {string} [args.force] Whether to force setting the value
+ * @returns {object} Named arguments
+ */
+function getNamedArguments(args = {}) {
+    // None of the commands here use underscored args, but better safe than sorry
+    return {
+        _scope: new SlashCommandScope(),
+        _abortController: new SlashCommandAbortController(),
+        _debugController: new SlashCommandDebugController(),
+        _parserFlags: {},
+        _hasUnnamedArgument: false,
+        quiet: 'true',
+        ...args,
+    };
+}
+
+/** @type {() => SlashCommandEnumValue[]} */
+const profilesProvider = () => [
+    new SlashCommandEnumValue(NONE),
+    ...extension_settings.connectionManager.profiles.map(p => new SlashCommandEnumValue(p.name, null, enumTypes.name, enumIcons.server)),
+];
+
+/**
+ * @typedef {Object} ConnectionProfile
+ * @property {string} id Unique identifier
+ * @property {string} mode Mode of the connection profile
+ * @property {string} [name] Name of the connection profile
+ * @property {string} [api] API
+ * @property {string} [preset] Settings Preset
+ * @property {string} [model] Model
+ * @property {string} [proxy] Proxy Preset
+ * @property {string} [instruct] Instruct Template
+ * @property {string} [context] Context Template
+ * @property {string} [instruct-state] Instruct Mode
+ * @property {string} [tokenizer] Tokenizer
+ * @property {string} [stop-strings] Custom Stopping Strings
+ * @property {string} [start-reply-with] Start Reply With
+ * @property {string} [reasoning-template] Reasoning Template
+ * @property {string[]} [exclude] Commands to exclude
+ */
+
+/**
+ * Finds the best match for the search value.
+ * @param {string} value Search value
+ * @returns {ConnectionProfile|null} Best match or null
+ */
+function findProfileByName(value) {
+    // Try to find exact match
+    const profile = extension_settings.connectionManager.profiles.find(p => p.name === value);
+
+    if (profile) {
+        return profile;
+    }
+
+    // Try to find fuzzy match
+    const fuse = new Fuse(extension_settings.connectionManager.profiles, { keys: ['name'] });
+    const results = fuse.search(value);
+
+    if (results.length === 0) {
+        return null;
+    }
+
+    const bestMatch = results[0];
+    return bestMatch.item;
+}
+
+/**
+ * Reads the connection profile from the commands.
+ * @param {string} mode Mode of the connection profile
+ * @param {ConnectionProfile} profile Connection profile
+ * @param {boolean} [cleanUp] Whether to clean up the profile
+ */
+async function readProfileFromCommands(mode, profile, cleanUp = false) {
+    const commands = mode === 'cc' ? CC_COMMANDS : TC_COMMANDS;
+    const opposingCommands = mode === 'cc' ? TC_COMMANDS : CC_COMMANDS;
+    const excludeList = Array.isArray(profile.exclude) ? profile.exclude : [];
+    for (const command of commands) {
+        try {
+            if (excludeList.includes(command)) {
+                continue;
+            }
+
+            const allowEmpty = ALLOW_EMPTY.includes(command);
+            const args = getNamedArguments();
+            const result = await SlashCommandParser.commands[command].callback(args, '');
+            if (result || (allowEmpty && result === '')) {
+                profile[command] = result;
+                continue;
+            }
+        } catch (error) {
+            console.error(`Failed to execute command: ${command}`, error);
+        }
+    }
+
+    if (cleanUp) {
+        for (const command of commands) {
+            if (command.endsWith('-state') && profile[command] === 'false') {
+                delete profile[command.replace('-state', '')];
+            }
+        }
+        for (const command of opposingCommands) {
+            if (commands.includes(command)) {
+                continue;
+            }
+
+            delete profile[command];
+        }
+    }
+}
+
+/**
+ * Creates a new connection profile.
+ * @param {string} [forceName] Name of the connection profile
+ * @returns {Promise<ConnectionProfile>} Created connection profile
+ */
+async function createConnectionProfile(forceName = null) {
+    const mode = main_api === 'openai' ? 'cc' : 'tc';
+    const id = uuidv4();
+    /** @type {ConnectionProfile} */
+    const profile = {
+        id,
+        mode,
+        exclude: [],
+    };
+
+    await readProfileFromCommands(mode, profile);
+
+    const profileForDisplay = makeFancyProfile(profile);
+    const template = $(await renderExtensionTemplateAsync(MODULE_NAME, 'profile', { profile: profileForDisplay }));
+    template.find('input[name="exclude"]').on('input', function () {
+        const fancyName = String($(this).val());
+        const keyName = Object.entries(FANCY_NAMES).find(x => x[1] === fancyName)?.[0];
+        if (!keyName) {
+            console.warn('Key not found for fancy name:', fancyName);
+            return;
+        }
+
+        if (!Array.isArray(profile.exclude)) {
+            profile.exclude = [];
+        }
+
+        const excludeState = !$(this).prop('checked');
+        if (excludeState) {
+            profile.exclude.push(keyName);
+        } else {
+            const index = profile.exclude.indexOf(keyName);
+            index !== -1 && profile.exclude.splice(index, 1);
+        }
+    });
+    const isNameTaken = (n) => extension_settings.connectionManager.profiles.some(p => p.name === n);
+    const suggestedName = getUniqueName(collapseSpaces(`${profile.api ?? ''} ${profile.model ?? ''} - ${profile.preset ?? ''}`), isNameTaken);
+    let name = forceName ?? await callGenericPopup(template, POPUP_TYPE.INPUT, suggestedName, { rows: 2 });
+    // If it's cancelled, it will be false
+    if (!name) {
+        return null;
+    }
+    name = DOMPurify.sanitize(String(name));
+    if (!name) {
+        toastr.error('Name cannot be empty.');
+        return null;
+    }
+
+    if (isNameTaken(name) || name === NONE) {
+        toastr.error('A profile with the same name already exists.');
+        return null;
+    }
+
+    if (Array.isArray(profile.exclude)) {
+        for (const command of profile.exclude) {
+            delete profile[command];
+        }
+    }
+
+    profile.name = String(name);
+    return profile;
+}
+
+/**
+ * Deletes the selected connection profile.
+ * @returns {Promise<void>}
+ */
+async function deleteConnectionProfile() {
+    const selectedProfile = extension_settings.connectionManager.selectedProfile;
+    if (!selectedProfile) {
+        return;
+    }
+
+    const index = extension_settings.connectionManager.profiles.findIndex(p => p.id === selectedProfile);
+    if (index === -1) {
+        return;
+    }
+
+    const profile = extension_settings.connectionManager.profiles[index];
+    const name = profile.name;
+    const confirm = await Popup.show.confirm(t`Are you sure you want to delete the selected profile?`, name);
+
+    if (!confirm) {
+        return;
+    }
+
+    extension_settings.connectionManager.profiles.splice(index, 1);
+    extension_settings.connectionManager.selectedProfile = null;
+    saveSettingsDebounced();
+
+    await eventSource.emit(event_types.CONNECTION_PROFILE_DELETED, profile);
+}
+
+/**
+ * Formats the connection profile for display.
+ * @param {ConnectionProfile} profile Connection profile
+ * @returns {Object} Fancy profile
+ */
+function makeFancyProfile(profile) {
+    return Object.entries(FANCY_NAMES).reduce((acc, [key, value]) => {
+        const allowEmpty = ALLOW_EMPTY.includes(key);
+        if (!profile[key]) {
+            if (profile[key] === '' && allowEmpty) {
+                acc[value] = EMPTY;
+            }
+            return acc;
+        }
+
+        acc[value] = profile[key];
+        return acc;
+    }, {});
+}
+
+/**
+ * Applies the connection profile.
+ * @param {ConnectionProfile} profile Connection profile
+ * @returns {Promise<void>}
+ */
+async function applyConnectionProfile(profile) {
+    if (!profile) {
+        return;
+    }
+
+    // Abort any ongoing profile application
+    ConnectionManagerSpinner.abort();
+
+    const mode = profile.mode;
+    const commands = mode === 'cc' ? CC_COMMANDS : TC_COMMANDS;
+    const spinner = new ConnectionManagerSpinner();
+    spinner.start();
+
+    for (const command of commands) {
+        if (spinner.isAborted()) {
+            throw new Error('Profile application aborted');
+        }
+
+        const argument = profile[command];
+        const allowEmpty = ALLOW_EMPTY.includes(command);
+        if (!argument && !(allowEmpty && argument === '')) {
+            continue;
+        }
+        try {
+            const args = getNamedArguments(allowEmpty ? { force: 'true' } : {});
+            await SlashCommandParser.commands[command].callback(args, argument);
+        } catch (error) {
+            console.error(`Failed to execute command: ${command} ${argument}`, error);
+        }
+    }
+
+    spinner.stop();
+}
+
+/**
+ * Updates the selected connection profile.
+ * @param {ConnectionProfile} profile Connection profile
+ * @returns {Promise<void>}
+ */
+async function updateConnectionProfile(profile) {
+    profile.mode = main_api === 'openai' ? 'cc' : 'tc';
+    await readProfileFromCommands(profile.mode, profile, true);
+}
+
+/**
+ * Renders the connection profile details.
+ * @param {HTMLSelectElement} profiles Select element containing connection profiles
+ */
+function renderConnectionProfiles(profiles) {
+    profiles.innerHTML = '';
+    const noneOption = document.createElement('option');
+
+    noneOption.value = '';
+    noneOption.textContent = NONE;
+    noneOption.selected = !extension_settings.connectionManager.selectedProfile;
+    profiles.appendChild(noneOption);
+
+    for (const profile of extension_settings.connectionManager.profiles.sort((a, b) => a.name.localeCompare(b.name))) {
+        const option = document.createElement('option');
+        option.value = profile.id;
+        option.textContent = profile.name;
+        option.selected = profile.id === extension_settings.connectionManager.selectedProfile;
+        profiles.appendChild(option);
+    }
+}
+
+/**
+ * Renders the content of the details element.
+ * @param {HTMLElement} detailsContent Content element of the details
+ */
+async function renderDetailsContent(detailsContent) {
+    detailsContent.innerHTML = '';
+    if (detailsContent.classList.contains('hidden')) {
+        return;
+    }
+    const selectedProfile = extension_settings.connectionManager.selectedProfile;
+    const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+    if (profile) {
+        const profileForDisplay = makeFancyProfile(profile);
+        const templateParams = { profile: profileForDisplay };
+        if (Array.isArray(profile.exclude) && profile.exclude.length > 0) {
+            templateParams.omitted = profile.exclude.map(e => FANCY_NAMES[e]).join(', ');
+        }
+        const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', templateParams);
+        detailsContent.innerHTML = template;
+    } else {
+        detailsContent.textContent = t`No profile selected`;
+    }
+}
+
+(async function () {
+    extension_settings.connectionManager = extension_settings.connectionManager || structuredClone(DEFAULT_SETTINGS);
+
+    for (const key of Object.keys(DEFAULT_SETTINGS)) {
+        if (extension_settings.connectionManager[key] === undefined) {
+            extension_settings.connectionManager[key] = DEFAULT_SETTINGS[key];
+        }
+    }
+
+    const container = document.getElementById('rm_api_block');
+    const settings = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
+    container.insertAdjacentHTML('afterbegin', settings);
+
+    /** @type {HTMLSelectElement} */
+    // @ts-ignore
+    const profiles = document.getElementById('connection_profiles');
+    renderConnectionProfiles(profiles);
+
+    function toggleProfileSpecificButtons() {
+        const profileId = extension_settings.connectionManager.selectedProfile;
+        const profileSpecificButtons = ['update_connection_profile', 'reload_connection_profile', 'delete_connection_profile'];
+        profileSpecificButtons.forEach(id => document.getElementById(id).classList.toggle('disabled', !profileId));
+    }
+    toggleProfileSpecificButtons();
+
+    profiles.addEventListener('change', async function () {
+        const selectedProfile = profiles.selectedOptions[0];
+        if (!selectedProfile) {
+            // Safety net for preventing the command getting stuck
+            await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
+            return;
+        }
+
+        const profileId = selectedProfile.value;
+        extension_settings.connectionManager.selectedProfile = profileId;
+        saveSettingsDebounced();
+        await renderDetailsContent(detailsContent);
+
+        toggleProfileSpecificButtons();
+
+        // None option selected
+        if (!profileId) {
+            await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
+            return;
+        }
+
+        const profile = extension_settings.connectionManager.profiles.find(p => p.id === profileId);
+
+        if (!profile) {
+            console.log(`Profile not found: ${profileId}`);
+            return;
+        }
+
+        await applyConnectionProfile(profile);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+    });
+
+    const reloadButton = document.getElementById('reload_connection_profile');
+    reloadButton.addEventListener('click', async () => {
+        const selectedProfile = extension_settings.connectionManager.selectedProfile;
+        const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+        if (!profile) {
+            console.log('No profile selected');
+            return;
+        }
+        await applyConnectionProfile(profile);
+        await renderDetailsContent(detailsContent);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+        toastr.success('Connection profile reloaded', '', { timeOut: 1500 });
+    });
+
+    const createButton = document.getElementById('create_connection_profile');
+    createButton.addEventListener('click', async () => {
+        const profile = await createConnectionProfile();
+        if (!profile) {
+            return;
+        }
+        extension_settings.connectionManager.profiles.push(profile);
+        extension_settings.connectionManager.selectedProfile = profile.id;
+        saveSettingsDebounced();
+        renderConnectionProfiles(profiles);
+        await renderDetailsContent(detailsContent);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_CREATED, profile);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+    });
+
+    const updateButton = document.getElementById('update_connection_profile');
+    updateButton.addEventListener('click', async () => {
+        const selectedProfile = extension_settings.connectionManager.selectedProfile;
+        const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+        if (!profile) {
+            console.log('No profile selected');
+            return;
+        }
+        const oldProfile = structuredClone(profile);
+        await updateConnectionProfile(profile);
+        await renderDetailsContent(detailsContent);
+        saveSettingsDebounced();
+        await eventSource.emit(event_types.CONNECTION_PROFILE_UPDATED, oldProfile, profile);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+        toastr.success('Connection profile updated', '', { timeOut: 1500 });
+    });
+
+    const deleteButton = document.getElementById('delete_connection_profile');
+    deleteButton.addEventListener('click', async () => {
+        await deleteConnectionProfile();
+        renderConnectionProfiles(profiles);
+        await renderDetailsContent(detailsContent);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
+    });
+
+    const editButton = document.getElementById('edit_connection_profile');
+    editButton.addEventListener('click', async () => {
+        const selectedProfile = extension_settings.connectionManager.selectedProfile;
+        const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+        if (!profile) {
+            console.log('No profile selected');
+            return;
+        }
+        if (!Array.isArray(profile.exclude)) {
+            profile.exclude = [];
+        }
+
+        let saveChanges = false;
+        const sortByViewOrder = (a, b) => Object.keys(FANCY_NAMES).indexOf(a) - Object.keys(FANCY_NAMES).indexOf(b);
+        const commands = profile.mode === 'cc' ? CC_COMMANDS : TC_COMMANDS;
+        const settings = commands.slice().sort(sortByViewOrder).reduce((acc, command) => {
+            const fancyName = FANCY_NAMES[command];
+            acc[fancyName] = !profile.exclude.includes(command);
+            return acc;
+        }, {});
+        const template = $(await renderExtensionTemplateAsync(MODULE_NAME, 'edit', { name: profile.name, settings }));
+        let newName = await callGenericPopup(template, POPUP_TYPE.INPUT, profile.name, {
+            rows: 2,
+            customButtons: [{
+                text: t`Save and Update`,
+                classes: ['popup-button-ok'],
+                result: POPUP_RESULT.AFFIRMATIVE,
+                action: () => {
+                    saveChanges = true;
+                },
+            }],
+        });
+
+        // If it's cancelled, it will be false
+        if (!newName) {
+            return;
+        }
+        newName = DOMPurify.sanitize(String(newName));
+        if (!newName) {
+            toastr.error('Name cannot be empty.');
+            return;
+        }
+
+        if (profile.name !== newName && extension_settings.connectionManager.profiles.some(p => p.name === newName)) {
+            toastr.error('A profile with the same name already exists.');
+            return;
+        }
+
+        const newExcludeList = template.find('input[name="exclude"]:not(:checked)').map(function () {
+            return Object.entries(FANCY_NAMES).find(x => x[1] === String($(this).val()))?.[0];
+        }).get();
+
+        const oldProfile = structuredClone(profile);
+        if (newExcludeList.length !== profile.exclude.length || !newExcludeList.every(e => profile.exclude.includes(e))) {
+            profile.exclude = newExcludeList;
+            for (const command of newExcludeList) {
+                delete profile[command];
+            }
+            if (saveChanges) {
+                await updateConnectionProfile(profile);
+            } else {
+                toastr.info('Press "Update" to record them into the profile.', 'Included settings list updated');
+            }
+        }
+
+        if (profile.name !== newName) {
+            toastr.success('Connection profile renamed.');
+            profile.name = newName;
+        }
+
+        saveSettingsDebounced();
+        await eventSource.emit(event_types.CONNECTION_PROFILE_UPDATED, oldProfile, profile);
+        renderConnectionProfiles(profiles);
+        await renderDetailsContent(detailsContent);
+    });
+
+    /** @type {HTMLElement} */
+    const viewDetails = document.getElementById('view_connection_profile');
+    const detailsContent = document.getElementById('connection_profile_details_content');
+    viewDetails.addEventListener('click', async () => {
+        viewDetails.classList.toggle('active');
+        detailsContent.classList.toggle('hidden');
+        await renderDetailsContent(detailsContent);
+    });
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile',
+        helpString: 'Switch to a connection profile or return the name of the current profile in no argument is provided. Use <code>&lt;None&gt;</code> to switch to no profile.',
+        returns: 'name of the profile',
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'Name of the connection profile',
+                enumProvider: profilesProvider,
+                isRequired: false,
+            }),
+        ],
+        namedArgumentList: [
+            SlashCommandNamedArgument.fromProps({
+                name: 'await',
+                description: 'Wait for the connection profile to be applied before returning.',
+                isRequired: false,
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                defaultValue: 'true',
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+            }),
+        ],
+        callback: async (args, value) => {
+            if (!value || typeof value !== 'string') {
+                const selectedProfile = extension_settings.connectionManager.selectedProfile;
+                const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+                if (!profile) {
+                    return NONE;
+                }
+                return profile.name;
+            }
+
+            if (value === NONE) {
+                profiles.selectedIndex = 0;
+                profiles.dispatchEvent(new Event('change'));
+                return NONE;
+            }
+
+            const profile = findProfileByName(value);
+
+            if (!profile) {
+                return '';
+            }
+
+            const shouldAwait = !isFalseBoolean(String(args?.await));
+            const awaitPromise = new Promise((resolve) => eventSource.once(event_types.CONNECTION_PROFILE_LOADED, resolve));
+
+            profiles.selectedIndex = Array.from(profiles.options).findIndex(o => o.value === profile.id);
+            profiles.dispatchEvent(new Event('change'));
+
+            if (shouldAwait) {
+                await awaitPromise;
+            }
+
+            return profile.name;
+        },
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-list',
+        helpString: 'List all connection profile names.',
+        returns: 'list of profile names',
+        callback: () => JSON.stringify(extension_settings.connectionManager.profiles.map(p => p.name)),
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-create',
+        returns: 'name of the new profile',
+        helpString: 'Create a new connection profile using the current settings.',
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'name of the new connection profile',
+                isRequired: true,
+                typeList: [ARGUMENT_TYPE.STRING],
+            }),
+        ],
+        callback: async (_args, name) => {
+            if (!name || typeof name !== 'string') {
+                toastr.warning('Please provide a name for the new connection profile.');
+                return '';
+            }
+            const profile = await createConnectionProfile(name);
+            if (!profile) {
+                return '';
+            }
+            extension_settings.connectionManager.profiles.push(profile);
+            extension_settings.connectionManager.selectedProfile = profile.id;
+            saveSettingsDebounced();
+            renderConnectionProfiles(profiles);
+            await renderDetailsContent(detailsContent);
+            await eventSource.emit(event_types.CONNECTION_PROFILE_CREATED, profile);
+            return profile.name;
+        },
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-update',
+        helpString: 'Update the selected connection profile.',
+        callback: async () => {
+            const selectedProfile = extension_settings.connectionManager.selectedProfile;
+            const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+            if (!profile) {
+                toastr.warning('No profile selected.');
+                return '';
+            }
+            const oldProfile = structuredClone(profile);
+            await updateConnectionProfile(profile);
+            await renderDetailsContent(detailsContent);
+            saveSettingsDebounced();
+            await eventSource.emit(event_types.CONNECTION_PROFILE_UPDATED, oldProfile, profile);
+            return profile.name;
+        },
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-get',
+        helpString: 'Get the details of the connection profile. Returns the selected profile if no argument is provided.',
+        returns: 'object of the selected profile',
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'Name of the connection profile',
+                enumProvider: profilesProvider,
+                isRequired: false,
+            }),
+        ],
+        callback: async (_args, value) => {
+            if (!value || typeof value !== 'string') {
+                const selectedProfile = extension_settings.connectionManager.selectedProfile;
+                const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+                if (!profile) {
+                    return '';
+                }
+                return JSON.stringify(profile);
+            }
+
+            const profile = findProfileByName(value);
+            if (!profile) {
+                return '';
+            }
+            return JSON.stringify(profile);
+        },
+    }));
+})();

public/scripts/extensions/connection-manager/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Connection Profiles",
+    "loading_order": 1,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/connection-manager/profile.html

@@ -0,0 +1,22 @@
+<div>
+    <h2 data-i18n="Creating a Connection Profile">
+        Creating a Connection Profile
+    </h2>
+    <div class="justifyLeft flex-container flexFlowColumn flexNoGap">
+        {{#each profile}}
+        <label class="checkbox_label">
+            <input type="checkbox" value="{{@key}}" name="exclude" checked>
+            <span><strong data-i18n="{{@key}}">{{@key}}:</strong>&nbsp;{{this}}</span>
+        </label>
+        {{/each}}
+    </div>
+    <div class="marginTop5">
+        <small>
+            <b data-i18n="Hint:">Hint:</b>
+            <i data-i18n="Click on the setting name to omit it from the profile.">Click on the setting name to omit it from the profile.</i>
+        </small>
+    </div>
+    <h3 data-i18n="Enter a name:">
+        Enter a name:
+    </h3>
+</div>

public/scripts/extensions/connection-manager/settings.html

@@ -0,0 +1,21 @@
+<div class="wide100p">
+    <div class="flex-container alignItemsBaseline">
+        <h3 class="margin0">
+            <span data-i18n="Connection Profile">Connection Profile</span>
+            <a href="https://docs.ChuQuadrant.app/usage/core-concepts/connection-profiles" target="_blank" class="notes-link">
+                <span class="fa-solid fa-circle-question note-link-span"></span>
+            </a>
+        </h3>
+        <i id="connection_profile_spinner" class="fa-solid fa-spinner fa-spin hidden"></i>
+    </div>
+    <div class="flex-container">
+        <select class="text_pole flex1" id="connection_profiles"></select>
+        <i id="view_connection_profile" class="menu_button fa-solid fa-info-circle" title="View connection profile details" data-i18n="[title]View connection profile details"></i>
+        <i id="create_connection_profile" class="menu_button fa-solid fa-file-circle-plus" title="Create a new connection profile" data-i18n="[title]Create a new connection profile"></i>
+        <i id="update_connection_profile" class="menu_button fa-solid fa-save" title="Update a connection profile" data-i18n="[title]Update a connection profile"></i>
+        <i id="edit_connection_profile" class="menu_button fa-solid fa-pencil" title="Edit a connection profile" data-i18n="[title]Edit a connection profile"></i>
+        <i id="reload_connection_profile" class="menu_button fa-solid fa-recycle" title="Reload a connection profile" data-i18n="[title]Reload a connection profile"></i>
+        <i id="delete_connection_profile" class="menu_button fa-solid fa-trash-can" title="Delete a connection profile" data-i18n="[title]Delete a connection profile"></i>
+    </div>
+    <div id="connection_profile_details_content" class="hidden"></div>
+</div>

public/scripts/extensions/connection-manager/style.css

@@ -0,0 +1,11 @@
+#connection_profile_details_content {
+    margin: 5px 0;
+}
+
+#connection_profile_details_content ul {
+    margin: 0;
+}
+
+#connection_profile_spinner {
+    margin-left: 5px;
+}

public/scripts/extensions/connection-manager/view.html

@@ -0,0 +1,10 @@
+<ul>
+    {{#each profile}}
+    <li><strong data-i18n="{{@key}}">{{@key}}:</strong>&nbsp;{{this}}</li>
+    {{/each}}
+</ul>
+{{#if omitted}}
+<div class="margin5">
+    <strong data-i18n="Omitted Settings:">Omitted Settings:</strong>&nbsp;<span>{{omitted}}</span>
+</div>
+{{/if}}

public/scripts/extensions/expressions/add-custom-expression.html

@@ -0,0 +1,14 @@
+<h3>
+    Enter a name for the custom expression:
+</h3>
+<h4>
+    Requirements:
+</h4>
+<ol class="justifyLeft">
+    <li>
+        The name must be unique and not already in use by the default expression.
+    </li>
+    <li>
+        The name must contain only letters, numbers, dashes and underscores. Don't include any file extensions.
+    </li>
+</ol>

public/scripts/extensions/expressions/list-item.html

@@ -0,0 +1,21 @@
+{{#each images}}
+<div class="expression_list_item interactable" data-expression="{{../expression}}" data-expression-type="{{this.type}}" data-filename="{{this.fileName}}">
+    <div class="expression_list_buttons">
+        <div class="menu_button expression_list_upload" title="Upload image">
+            <i class="fa-solid fa-upload"></i>
+        </div>
+        <div class="menu_button expression_list_delete" title="Delete image">
+            <i class="fa-solid fa-trash"></i>
+        </div>
+    </div>
+    <div class="expression_list_title">
+        <span>{{../expression}}</span>
+        {{#if ../isCustom}}
+            <small class="expression_list_custom">(custom)</small>
+        {{/if}}
+    </div>
+    <div class="expression_list_image_container" title="{{this.title}}">
+        <img class="expression_list_image" src="{{this.imageSrc}}" alt="{{this.title}}" data-epression="{{../expression}}" />
+    </div>
+</div>
+{{/each}}

public/scripts/extensions/expressions/manifest.json

@@ -0,0 +1,13 @@
+{
+    "display_name": "Character Expressions",
+    "loading_order": 6,
+    "requires": [],
+    "optional": [
+        "classify"
+    ],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/expressions/remove-custom-expression.html

@@ -0,0 +1,7 @@
+<h3>
+    Are you sure you want to remove the expression <tt>&quot;{{expression}}&quot;</tt>?
+</h3>
+<div>
+    Uploaded images will not be deleted, but will no longer be used by the extension.
+</div>
+<br>

public/scripts/extensions/expressions/settings.html

@@ -0,0 +1,109 @@
+<div class="expression_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="Character Expressions">Character Expressions</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+
+        <div class="inline-drawer-content">
+            <label class="checkbox_label" for="expression_translate" title="Use the selected API from Chat Translation extension settings." data-i18n="[title]Use the selected API from Chat Translation extension settings.">
+                <input id="expression_translate" type="checkbox">
+                <span data-i18n="Translate text to English before classification">Translate text to English before classification</span>
+            </label>
+            <label class="checkbox_label" for="expressions_allow_multiple" title="A single expression can have multiple sprites. Whenever the expression is chosen, a random sprite for this expression will be selected." data-i18n="[title]A single expression can have multiple sprites. Whenever the expression is chosen, a random sprite for this expression will be selected.">
+                <input id="expressions_allow_multiple" type="checkbox">
+                <span data-i18n="Allow multiple sprites per expression">Allow multiple sprites per expression</span>
+            </label>
+            <label class="checkbox_label" for="expressions_reroll_if_same" title="If the same expression is used again, re-roll the sprite. This only applies to expressions that have multiple available sprites assigned." data-i18n="[title]If the same expression is used again, re-roll the sprite. This only applies to expressions that have multiple available sprites assigned.">
+                <input id="expressions_reroll_if_same" type="checkbox">
+                <span data-i18n="Re-roll if same expression is used again">Re-roll if same sprite is used again</span>
+            </label>
+            <div class="expression_api_block m-b-1 m-t-1">
+                <label for="expression_api" data-i18n="Classifier API">Classifier API</label>
+                <small data-i18n="Select the API for classifying expressions.">Select the API for classifying expressions.</small>
+                <select id="expression_api" class="flex1 margin0">
+                    <option value="99" data-i18n="[ None ]">[ None ]</option>
+                    <option value="0" data-i18n="Local">Local</option>
+                    <option value="1" data-i18n="Extras">Extras (deprecated)</option>
+                    <option value="2" data-i18n="Main API">Main API</option>
+                    <option value="3" data-i18n="WebLLM Extension">WebLLM Extension</option>
+                </select>
+            </div>
+            <div class="expression_llm_prompt_block m-b-1 m-t-1">
+                <label class="checkbox_label" for="expressions_filter_available" title="When using LLM or WebLLM classifier, only show and use expressions that have sprites assigned to them." data-i18n="[title]When using LLM or WebLLM classifier, only show and use expressions that have sprites assigned to them.">
+                    <input id="expressions_filter_available" type="checkbox">
+                    <span data-i18n="Filter expressions for available sprites">Filter expressions for available sprites</span>
+                </label>
+                <label for="expression_llm_prompt" class="title_restorable m-t-1">
+                    <span data-i18n="LLM Prompt">LLM Prompt</span>
+                    <div id="expression_llm_prompt_restore" title="Restore default value" class="right_menu_button">
+                        <i class="fa-solid fa-clock-rotate-left fa-sm"></i>
+                    </div>
+                </label>
+                <small data-i18n="Will be used if the API doesn't support JSON schemas or function calling.">Will be used if the API doesn't support JSON schemas or function calling.</small>
+                <textarea id="expression_llm_prompt" type="text" class="text_pole textarea_compact" rows="2" placeholder="Use &lcub;&lcub;labels&rcub;&rcub; special macro."></textarea>
+            </div>
+            <div class="expression_fallback_block m-b-1 m-t-1">
+                <label for="expression_fallback" data-i18n="Default / Fallback Expression">Default / Fallback Expression</label>
+                <small data-i18n="Set the default and fallback expression being used when no matching expression is found.">Set the default and fallback expression being used when no matching expression is found.</small>
+                <select id="expression_fallback" class="flex1 margin0"></select>
+            </div>
+            <div class="expression_custom_block m-b-1 m-t-1">
+                <label for="expression_custom" data-i18n="Custom Expressions">Custom Expressions</label>
+                <small><span data-i18n="Can be set manually or with an _space">Can be set manually or with an </span><tt>/emote</tt><span data-i18n="space_ slash command."> slash command.</span></small>
+                <div class="flex-container">
+                    <select id="expression_custom" class="flex1 margin0"><select>
+                    <i id="expression_custom_add" class="menu_button fa-solid fa-plus margin0" title="Add"></i>
+                    <i id="expression_custom_remove" class="menu_button fa-solid fa-xmark margin0" title="Remove"></i>
+                </div>
+            </div>
+            <div id="no_chat_expressions" data-i18n="Open a chat to see the character expressions.">
+                Open a chat to see the character expressions.
+            </div>
+            <div id="open_chat_expressions">
+                <div class="offline_mode">
+                    <small data-i18n="You are in offline mode. Click on the image below to set the expression.">You are in offline mode. Click on the image below to set the expression.</small>
+                </div>
+                <label for="expression_override" data-i18n="Sprite Folder Override">Sprite Folder Override</label>
+                <small><span data-i18n="Use a forward slash to specify a subfolder. Example: _space">Use a forward slash to specify a subfolder. Example: </span><tt>Bob/formal</tt></small>
+                <div class="flex-container flexnowrap">
+                    <input id="expression_override" type="text" class="text_pole" placeholder="Override folder name" />
+                    <input id="expression_override_button" class="menu_button" type="submit" value="Submit" />
+                </div>
+                <div class="expression_buttons flex-container spaceEvenly">
+                    <div id="expression_upload_pack_button" class="menu_button">
+                        <i class="fa-solid fa-file-zipper"></i>
+                        <span data-i18n="Upload sprite pack (ZIP)">Upload sprite pack (ZIP)</span>
+                    </div>
+                    <div id="expression_override_cleanup_button" class="menu_button">
+                        <i class="fa-solid fa-trash-can"></i>
+                        <span data-i18n="Remove all image overrides">Remove all image overrides</span>
+                    </div>
+                </div>
+                <p class="hint">
+                    <b data-i18n="Hint:">Hint:</b>
+                    <i>
+                        <span data-i18n="Create new folder in the _space">Create new folder in the </span><b>/characters/</b> <span data-i18n="folder of your user data directory and name it as the name of the character.">folder of your user data directory and name it as the name of the character.</span>
+                        <span data-i18n="Put images with expressions there. File names should follow the pattern:">Put images with expressions there. File names should follow the pattern: </span><tt data-i18n="expression_label_pattern">[expression_label].[image_format]</tt>
+                    </i>
+                </p>
+                <p>
+                    <i>
+                        <span>In case of multiple files per expression, file names can contain a suffix, either separated by a dot or a
+                            dash.
+                            Examples: </span><tt>joy.png</tt>, <tt>joy-1.png</tt>, <tt>joy.expressive.png</tt>
+                    </i>
+                </p>
+                <h3 id="image_list_header">
+                    <strong data-i18n="Sprite set:">Sprite set:</strong>&nbsp;<span id="image_list_header_name"></span>
+                </h3>
+                <div id="image_list"></div>
+
+            </div>
+        </div>
+    </div>
+    <form>
+        <input type="file" id="expression_upload_pack" name="expression_upload_pack" accept="application/zip" hidden>
+        <input type="file" id="expression_upload" name="expression_upload" accept="image/*" hidden>
+    </form>
+</div>

public/scripts/extensions/expressions/style.css

@@ -0,0 +1,220 @@
+.expression-helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+#expression-wrapper {
+    display: flex;
+    height: calc(100vh - var(--topBarBlockSize));
+    width: 100vw;
+}
+
+#visual-novel-wrapper {
+    display: flex;
+    height: calc(100vh - var(--topBarBlockSize));
+    width: 100vw;
+    overflow: hidden;
+}
+
+#visual-novel-wrapper .expression-holder {
+    width: max-content;
+    display: flex;
+    left: unset;
+    right: unset;
+}
+
+#visual-novel-wrapper .hidden {
+    display: none !important;
+    visibility: hidden !important;
+}
+
+/*#visual-novel-wrapper img.expression {
+    object-fit: cover;
+}*/
+
+.expression-holder {
+    min-width: 100px;
+    min-height: 100px;
+    max-height: 90vh;
+    max-width: 90vh;
+    width: calc((100vw - var(--sheldWidth)) /2);
+    position: absolute;
+    bottom: 0;
+    padding: 0;
+    left: 0;
+    filter: drop-shadow(2px 2px 2px #51515199);
+    z-index: 2;
+    overflow: hidden;
+    resize: both;
+    display: flex;
+    justify-content: center;
+}
+
+#no_chat_expressions {
+    text-align: center;
+    margin: 10px 0;
+    font-weight: bold;
+    opacity: 0.8;
+}
+
+#image_list_header_name {
+    font-weight: 400;
+}
+
+img.expression {
+    min-width: 100px;
+    min-height: 100px;
+    max-height: 90vh;
+    max-width: 90vh;
+    top: 0;
+    bottom: 0;
+    padding: 0;
+    vertical-align: bottom;
+    object-fit: contain;
+}
+
+img.expression[src=""] {
+    visibility: hidden;
+}
+
+img.expression.default {
+    vertical-align: middle;
+    max-height: 120px;
+    object-fit: contain !important;
+    margin-top: 50px;
+}
+
+.expression-clone {
+    position: absolute;
+}
+
+.debug-image {
+    display: none;
+    visibility: collapse;
+    opacity: 0;
+    width: 0px;
+    height: 0px;
+}
+
+.expression_list_item {
+    position: relative;
+    max-width: 20%;
+    min-width: 100px;
+    max-height: 200px;
+    background-color: #515151b0;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.expression_list_image_container {
+    overflow: hidden;
+}
+
+.expression_list_title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    font-weight: 600;
+    background-color: #000000a8;
+    width: 100%;
+    height: 20%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    line-height: 1;
+}
+.expression_list_custom {
+    font-size: 0.66rem;
+}
+
+.expression_list_buttons {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    /* height: 20%; */
+    padding: 0.25rem;
+}
+
+.menu_button.expression_list_delete,
+.menu_button.expression_list_upload {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.expression_list_image {
+    max-width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+#image_list {
+    display: flex;
+    flex-direction: row;
+    column-gap: 1rem;
+    margin: 1rem;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    row-gap: 1rem;
+}
+
+#image_list .expression_list_item[data-expression-type="success"] .expression_list_title {
+    color: green;
+}
+
+#image_list .expression_list_item[data-expression-type="additional"] .expression_list_title {
+    color: darkolivegreen;
+}
+#image_list .expression_list_item[data-expression-type="additional"] .expression_list_title::before {
+    content: '➕';
+    position: absolute;
+    top: -7px;
+    left: -9px;
+    font-size: 14px;
+    color: transparent;
+    text-shadow: 0 0 0 darkolivegreen;
+}
+
+#image_list .expression_list_item[data-expression-type="failure"] .expression_list_title {
+    color: red;
+}
+
+.expression_settings label {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    margin-left: 0px;
+}
+
+.expression_settings label input {
+    margin-left: 0px !important;
+}
+
+.expression_buttons .menu_button {
+    width: fit-content;
+    display: flex;
+    gap: 10px;
+    align-items: baseline;
+    flex-direction: row;
+}
+
+#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"],
+#expressions_container:has(#expressions_allow_multiple:not(:checked)) label[for="expressions_reroll_if_same"] {
+    opacity: 0.3;
+    transition: opacity var(--animation-duration) ease;
+}
+#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:hover,
+#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:focus {
+    opacity: unset;
+}

public/scripts/extensions/expressions/templates/upload-expression.html

@@ -0,0 +1,12 @@
+<div class="m-b-1" data-i18n="upload_expression_request">Please enter a name for the sprite (without extension).</div>
+<div class="m-b-1" data-i18n="upload_expression_naming_1">
+    Sprite names must follow the naming schema for the selected expression: {{expression}}
+</div>
+<div data-i18n="upload_expression_naming_2">
+    For multiple expressions, the name must follow the expression name and a valid suffix. Allowed separators are '-' or dot '.'.
+</div>
+<span class="m-b-1" data-i18n="Examples:">Examples:</span> <tt>{{expression}}.png</tt>, <tt>{{expression}}-1.png</tt>, <tt>{{expression}}.expressive.png</tt>
+{{#if clickedFileName}}
+<div class="m-t-1" data-i18n="upload_expression_replace">Click 'Replace' to replace the existing expression:</div>
+<tt>{{clickedFileName}}</tt>
+{{/if}}

public/scripts/extensions/gallery/index.i18n.html

@@ -0,0 +1,2 @@
+<!-- I18n data for tools used to auto generate translations -->
+<div data-i18n="Show Gallery">Show Gallery</div>

public/scripts/extensions/gallery/index.js

@@ -0,0 +1,726 @@
+import {
+    eventSource,
+    this_chid,
+    characters,
+    getRequestHeaders,
+    event_types,
+} from '../../../script.js';
+import { groups, selected_group } from '../../group-chats.js';
+import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename } from '../../utils.js';
+import { loadMovingUIState } from '../../power-user.js';
+import { dragElement } from '../../RossAscends-mods.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { DragAndDropHandler } from '../../dragdrop.js';
+import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { t, translate } from '../../i18n.js';
+
+const extensionName = 'gallery';
+const extensionFolderPath = `scripts/extensions/${extensionName}/`;
+let firstTime = true;
+
+// Exposed defaults for future tweaking
+let thumbnailHeight = 150;
+let paginationVisiblePages = 10;
+let paginationMaxLinesPerPage = 2;
+let galleryMaxRows = 3;
+
+// Remove all draggables associated with the gallery
+$('#movingDivs').on('click', '.dragClose', function () {
+    const relatedId = $(this).data('related-id');
+    if (!relatedId) return;
+    $(`#movingDivs > .draggable[id="${relatedId}"]`).remove();
+});
+
+const CUSTOM_GALLERY_REMOVED_EVENT = 'galleryRemoved';
+
+const mutationObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        mutation.removedNodes.forEach((node) => {
+            if (node instanceof HTMLElement && node.tagName === 'DIV' && node.id === 'gallery') {
+                eventSource.emit(CUSTOM_GALLERY_REMOVED_EVENT);
+            }
+        });
+    });
+});
+
+mutationObserver.observe(document.body, {
+    childList: true,
+    subtree: false,
+});
+
+const SORT = Object.freeze({
+    NAME_ASC: { value: 'nameAsc', field: 'name', order: 'asc', label: t`Sort By: Name (A-Z)` },
+    NAME_DESC: { value: 'nameDesc', field: 'name', order: 'desc', label: t`Sort By: Name (Z-A)` },
+    DATE_ASC: { value: 'dateAsc', field: 'date', order: 'asc', label: t`Sort By: Date (Oldest First)` },
+    DATE_DESC: { value: 'dateDesc', field: 'date', order: 'desc', label: t`Sort By: Date (Newest First)` },
+});
+
+const defaultSettings = Object.freeze({
+    folders: {},
+    sort: SORT.DATE_ASC.value,
+});
+
+/**
+ * Initializes the settings for the gallery extension.
+ */
+function initSettings() {
+    let shouldSave = false;
+    const context = ChuQuadrant.getContext();
+    if (!context.extensionSettings.gallery) {
+        context.extensionSettings.gallery = structuredClone(defaultSettings);
+        shouldSave = true;
+    }
+    for (const key of Object.keys(defaultSettings)) {
+        if (!Object.hasOwn(context.extensionSettings.gallery, key)) {
+            context.extensionSettings.gallery[key] = structuredClone(defaultSettings[key]);
+            shouldSave = true;
+        }
+    }
+    if (shouldSave) {
+        context.saveSettingsDebounced();
+    }
+}
+
+/**
+ * Retrieves the gallery folder for a given character.
+ * @param {import('../../char-data.js').v1CharData} char Character data
+ * @returns {string} The gallery folder for the character
+ */
+function getGalleryFolder(char) {
+    return ChuQuadrant.getContext().extensionSettings.gallery.folders[char?.avatar] ?? char?.name;
+}
+
+/**
+ * Retrieves a list of gallery items based on a given URL. This function calls an API endpoint
+ * to get the filenames and then constructs the item list.
+ *
+ * @param {string} url - The base URL to retrieve the list of images.
+ * @returns {Promise<Array>} - Resolves with an array of gallery item objects, rejects on error.
+ */
+async function getGalleryItems(url) {
+    const sortValue = getSortOrder();
+    const sortObj = Object.values(SORT).find(it => it.value === sortValue) ?? SORT.DATE_ASC;
+    const response = await fetch('/api/images/list', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({
+            folder: url,
+            sortField: sortObj.field,
+            sortOrder: sortObj.order,
+        }),
+    });
+
+    url = await getSanitizedFilename(url);
+
+    const data = await response.json();
+    const items = data.map((file) => ({
+        src: `user/images/${url}/${file}`,
+        srct: `user/images/${url}/${file}`,
+        title: '', // Optional title for each item
+    }));
+
+    return items;
+}
+
+/**
+ * Retrieves a list of gallery folders. This function calls an API endpoint
+ * @returns {Promise<string[]>} - Resolves with an array of gallery folders.
+ */
+async function getGalleryFolders() {
+    try {
+        const response = await fetch('/api/images/folders', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error. Status: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('Failed to fetch gallery folders:', error);
+        return [];
+    }
+}
+
+/**
+ * Sets the sort order for the gallery.
+ * @param {string} order Sort order
+ */
+function setSortOrder(order) {
+    const context = ChuQuadrant.getContext();
+    context.extensionSettings.gallery.sort = order;
+    context.saveSettingsDebounced();
+}
+
+/**
+ * Retrieves the current sort order for the gallery.
+ * @returns {string} The current sort order for the gallery.
+ */
+function getSortOrder() {
+    return ChuQuadrant.getContext().extensionSettings.gallery.sort ?? defaultSettings.sort;
+}
+
+/**
+ * Initializes a gallery using the provided items and sets up the drag-and-drop functionality.
+ * It uses the nanogallery2 library to display the items and also initializes
+ * event listeners to handle drag-and-drop of files onto the gallery.
+ *
+ * @param {Array<Object>} items - An array of objects representing the items to display in the gallery.
+ * @param {string} url - The URL to use when a file is dropped onto the gallery for uploading.
+ * @returns {Promise<void>} - Promise representing the completion of the gallery initialization.
+ */
+async function initGallery(items, url) {
+    const nonce = `nonce-${Math.random().toString(36).substring(2, 15)}`;
+    const gallery = $('#dragGallery');
+    gallery.addClass(nonce);
+    gallery.nanogallery2({
+        'items': items,
+        thumbnailWidth: 'auto',
+        thumbnailHeight: thumbnailHeight,
+        paginationVisiblePages: paginationVisiblePages,
+        paginationMaxLinesPerPage: paginationMaxLinesPerPage,
+        galleryMaxRows: galleryMaxRows,
+        galleryPaginationTopButtons: false,
+        galleryNavigationOverlayButtons: true,
+        galleryTheme: {
+            navigationBar: { background: 'none', borderTop: '', borderBottom: '', borderRight: '', borderLeft: '' },
+            navigationBreadcrumb: { background: '#111', color: '#fff', colorHover: '#ccc', borderRadius: '4px' },
+            navigationFilter: { color: '#ddd', background: '#111', colorSelected: '#fff', backgroundSelected: '#111', borderRadius: '4px' },
+            navigationPagination: { background: '#111', color: '#fff', colorHover: '#ccc', borderRadius: '4px' },
+            thumbnail: { background: '#444', backgroundImage: 'linear-gradient(315deg, #111 0%, #445 90%)', borderColor: '#000', borderRadius: '0px', labelOpacity: 1, labelBackground: 'rgba(34, 34, 34, 0)', titleColor: '#fff', titleBgColor: 'transparent', titleShadow: '', descriptionColor: '#ccc', descriptionBgColor: 'transparent', descriptionShadow: '', stackBackground: '#aaa' },
+            thumbnailIcon: { padding: '5px', color: '#fff', shadow: '' },
+            pagination: { background: '#181818', backgroundSelected: '#666', color: '#fff', borderRadius: '2px', shapeBorder: '3px solid var(--SmartThemeQuoteColor)', shapeColor: '#444', shapeSelectedColor: '#aaa' },
+        },
+        galleryDisplayMode: 'pagination',
+        fnThumbnailOpen: viewWithDragbox,
+        fnThumbnailInit: function (/** @type {JQuery<HTMLElement>} */ $thumbnail, /** @type {{src: string}} */ item) {
+            if (!item?.src) return;
+            $thumbnail.attr('title', String(item.src).split('/').pop());
+        },
+    });
+
+    const dragDropHandler = new DragAndDropHandler(`#dragGallery.${nonce}`, async (files) => {
+        if (!Array.isArray(files) || files.length === 0) {
+            return;
+        }
+
+        // Upload each file
+        for (const file of files) {
+            await uploadFile(file, url);
+        }
+
+        // Refresh the gallery
+        const newItems = await getGalleryItems(url);
+        $('#dragGallery').closest('#gallery').remove();
+        await makeMovable(url);
+        await delay(100);
+        await initGallery(newItems, url);
+    });
+
+    const resizeHandler = function () {
+        gallery.nanogallery2('resize');
+    };
+
+    eventSource.on('resizeUI', resizeHandler);
+
+    eventSource.once(event_types.CHAT_CHANGED, function () {
+        gallery.closest('#gallery').remove();
+    });
+
+    eventSource.once(CUSTOM_GALLERY_REMOVED_EVENT, function () {
+        gallery.nanogallery2('destroy');
+        dragDropHandler.destroy();
+        eventSource.removeListener('resizeUI', resizeHandler);
+    });
+
+    // Set dropzone height to be the same as the parent
+    gallery.css('height', gallery.parent().css('height'));
+
+    //let images populate first
+    await delay(100);
+    //unset the height (which must be getting set by the gallery library at some point)
+    gallery.css('height', 'unset');
+    //force a resize to make images display correctly
+    gallery.nanogallery2('resize');
+}
+
+/**
+ * Displays a character gallery using the nanogallery2 library.
+ *
+ * This function takes care of:
+ * - Loading necessary resources for the gallery on the first invocation.
+ * - Preparing gallery items based on the character or group selection.
+ * - Handling the drag-and-drop functionality for image upload.
+ * - Displaying the gallery in a popup.
+ * - Cleaning up resources when the gallery popup is closed.
+ *
+ * @returns {Promise<void>} - Promise representing the completion of the gallery display process.
+ */
+async function showCharGallery() {
+    // Load necessary files if it's the first time calling the function
+    if (firstTime) {
+        await loadFileToDocument(
+            `${extensionFolderPath}nanogallery2.woff.min.css`,
+            'css',
+        );
+        await loadFileToDocument(
+            `${extensionFolderPath}jquery.nanogallery2.min.js`,
+            'js',
+        );
+        firstTime = false;
+        toastr.info('Images can also be found in the folder `user/images`', 'Drag and drop images onto the gallery to upload them', { timeOut: 6000 });
+    }
+
+    try {
+        let url = selected_group || this_chid;
+        if (!selected_group && this_chid !== undefined) {
+            url = getGalleryFolder(characters[this_chid]);
+        }
+
+        const items = await getGalleryItems(url);
+        // if there already is a gallery, destroy it and place this one in its place
+        $('#dragGallery').closest('#gallery').remove();
+        await makeMovable(url);
+        await delay(100);
+        await initGallery(items, url);
+    } catch (err) {
+        console.trace();
+        console.error(err);
+    }
+}
+
+/**
+ * Uploads a given file to a specified URL.
+ * Once the file is uploaded, it provides a success message using toastr,
+ * destroys the existing gallery, fetches the latest items, and reinitializes the gallery.
+ *
+ * @param {File} file - The file object to be uploaded.
+ * @param {string} url - The URL indicating where the file should be uploaded.
+ * @returns {Promise<void>} - Promise representing the completion of the file upload and gallery refresh.
+ */
+async function uploadFile(file, url) {
+    try {
+        // Convert the file to a base64 string
+        const base64Data = await getBase64Async(file);
+
+        // Create the payload
+        const payload = {
+            image: base64Data,
+            ch_name: url,
+        };
+
+        const response = await fetch('/api/images/upload', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        toastr.success(t`File uploaded successfully. Saved at: ${result.path}`);
+    } catch (error) {
+        console.error('There was an issue uploading the file:', error);
+
+        // Replacing alert with toastr error notification
+        toastr.error(t`Failed to upload the file.`);
+    }
+}
+
+/**
+ * Creates a new draggable container based on a template.
+ * This function takes a template with the ID 'generic_draggable_template' and clones it.
+ * The cloned element has its attributes set, a new child div appended, and is made visible on the body.
+ * Additionally, it sets up the element to prevent dragging on its images.
+ * @param {string} url - The URL of the image source.
+ * @returns {Promise<void>} - Promise representing the completion of the draggable container creation.
+ */
+async function makeMovable(url) {
+    console.debug('making new container from template');
+    const id = 'gallery';
+    const template = $('#generic_draggable_template').html();
+    const newElement = $(template);
+    newElement.css('background-color', 'var(--SmartThemeBlurTintColor)');
+    newElement.attr('forChar', id);
+    newElement.attr('id', id);
+    newElement.find('.drag-grabber').attr('id', `${id}header`);
+    const dragTitle = newElement.find('.dragTitle');
+    dragTitle.addClass('flex-container justifySpaceBetween alignItemsBaseline');
+    const titleText = document.createElement('span');
+    titleText.textContent = t`Image Gallery`;
+    dragTitle.append(titleText);
+    const sortSelect = document.createElement('select');
+    sortSelect.classList.add('gallery-sort-select');
+
+    for (const sort of Object.values(SORT)) {
+        const option = document.createElement('option');
+        option.value = sort.value;
+        option.textContent = sort.label;
+        sortSelect.appendChild(option);
+    }
+
+    sortSelect.addEventListener('change', async () => {
+        const selectedOption = sortSelect.options[sortSelect.selectedIndex].value;
+        setSortOrder(selectedOption);
+        closeButton.trigger('click');
+        await showCharGallery();
+    });
+
+    sortSelect.value = getSortOrder();
+    dragTitle.append(sortSelect);
+
+    // add no-scrollbar class to this element
+    newElement.addClass('no-scrollbar');
+
+    // get the close button and set its id and data-related-id
+    const closeButton = newElement.find('.dragClose');
+    closeButton.attr('id', `${id}close`);
+    closeButton.attr('data-related-id', `${id}`);
+
+    const topBarElement = document.createElement('div');
+    topBarElement.classList.add('flex-container', 'alignItemsCenter');
+
+    const onChangeFolder = async (/** @type {Event} */ e) => {
+        if (e instanceof KeyboardEvent && e.key !== 'Enter') {
+            return;
+        }
+
+        try {
+            const newUrl = await getSanitizedFilename(galleryFolderInput.value);
+            updateGalleryFolder(newUrl);
+            closeButton.trigger('click');
+            await showCharGallery();
+            toastr.info(t`Gallery folder changed to ${newUrl}`);
+            galleryFolderInput.value = newUrl;
+        } catch (error) {
+            console.error('Failed to change gallery folder:', error);
+            toastr.error(error?.message || t`Unknown error`, t`Failed to change gallery folder`);
+        }
+    };
+
+    const onRestoreFolder = async () => {
+        try {
+            restoreGalleryFolder();
+            closeButton.trigger('click');
+            await showCharGallery();
+        } catch (error) {
+            console.error('Failed to restore gallery folder:', error);
+            toastr.error(error?.message || t`Unknown error`, t`Failed to restore gallery folder`);
+        }
+    };
+
+    const galleryFolderInput = document.createElement('input');
+    galleryFolderInput.type = 'text';
+    galleryFolderInput.placeholder = t`Folder Name`;
+    galleryFolderInput.title = t`Enter a folder name to change the gallery folder`;
+    galleryFolderInput.value = url;
+    galleryFolderInput.classList.add('text_pole', 'gallery-folder-input', 'flex1');
+    galleryFolderInput.addEventListener('keyup', onChangeFolder);
+
+    const galleryFolderAccept = document.createElement('div');
+    galleryFolderAccept.classList.add('right_menu_button', 'fa-solid', 'fa-check', 'fa-fw');
+    galleryFolderAccept.title = t`Change gallery folder`;
+    galleryFolderAccept.addEventListener('click', onChangeFolder);
+
+    const galleryFolderRestore = document.createElement('div');
+    galleryFolderRestore.classList.add('right_menu_button', 'fa-solid', 'fa-recycle', 'fa-fw');
+    galleryFolderRestore.title = t`Restore gallery folder`;
+    galleryFolderRestore.addEventListener('click', onRestoreFolder);
+
+    topBarElement.appendChild(galleryFolderInput);
+    topBarElement.appendChild(galleryFolderAccept);
+    topBarElement.appendChild(galleryFolderRestore);
+    newElement.append(topBarElement);
+
+    // Populate the gallery folder input with a list of available folders
+    const folders = await getGalleryFolders();
+    $(galleryFolderInput)
+        .autocomplete({
+            source: (i, o) => {
+                const term = i.term.toLowerCase();
+                const filtered = folders.filter(f => f.toLowerCase().includes(term));
+                o(filtered);
+            },
+            select: (e, u) => {
+                galleryFolderInput.value = u.item.value;
+                onChangeFolder(e);
+            },
+            minLength: 0,
+        })
+        .on('focus', () => $(galleryFolderInput).autocomplete('search', ''));
+
+    //add a div for the gallery
+    newElement.append('<div id="dragGallery"></div>');
+
+    $('#dragGallery').css('display', 'block');
+
+    $('#movingDivs').append(newElement);
+
+    loadMovingUIState();
+    $(`.draggable[forChar="${id}"]`).css('display', 'block');
+    dragElement(newElement);
+
+    $(`.draggable[forChar="${id}"] img`).on('dragstart', (e) => {
+        console.log('saw drag on avatar!');
+        e.preventDefault();
+        return false;
+    });
+}
+
+/**
+ * Sets the gallery folder to a new URL.
+ * @param {string} newUrl - The new URL to set for the gallery folder.
+ */
+function updateGalleryFolder(newUrl) {
+    if (!newUrl) {
+        throw new Error('Folder name cannot be empty');
+    }
+    const context = ChuQuadrant.getContext();
+    if (context.groupId) {
+        throw new Error('Cannot change gallery folder in group chat');
+    }
+    if (context.characterId === undefined) {
+        throw new Error('Character is not selected');
+    }
+    const avatar = context.characters[context.characterId]?.avatar;
+    const name = context.characters[context.characterId]?.name;
+    if (!avatar) {
+        throw new Error('Character PNG ID is not found');
+    }
+    if (newUrl === name) {
+        // Default folder name is picked, remove the override
+        delete context.extensionSettings.gallery.folders[avatar];
+    } else {
+        // Custom folder name is provided, set the override
+        context.extensionSettings.gallery.folders[avatar] = newUrl;
+    }
+    context.saveSettingsDebounced();
+}
+
+/**
+ * Restores the gallery folder to the default value.
+ */
+function restoreGalleryFolder() {
+    const context = ChuQuadrant.getContext();
+    if (context.groupId) {
+        throw new Error('Cannot change gallery folder in group chat');
+    }
+    if (context.characterId === undefined) {
+        throw new Error('Character is not selected');
+    }
+    const avatar = context.characters[context.characterId]?.avatar;
+    if (!avatar) {
+        throw new Error('Character PNG ID is not found');
+    }
+    const existingOverride = context.extensionSettings.gallery.folders[avatar];
+    if (!existingOverride) {
+        throw new Error('No folder override found');
+    }
+    delete context.extensionSettings.gallery.folders[avatar];
+    context.saveSettingsDebounced();
+}
+
+/**
+ * Creates a new draggable image based on a template.
+ *
+ * This function clones a provided template with the ID 'generic_draggable_template',
+ * appends the given image URL, ensures the element has a unique ID,
+ * and attaches the element to the body. After appending, it also prevents
+ * dragging on the appended image.
+ *
+ * @param {string} id - A base identifier for the new draggable element.
+ * @param {string} url - The URL of the image to be added to the draggable element.
+ */
+function makeDragImg(id, url) {
+    // Step 1: Clone the template content
+    const template = document.getElementById('generic_draggable_template');
+
+    if (!(template instanceof HTMLTemplateElement)) {
+        console.error('The element is not a <template> tag');
+        return;
+    }
+
+    const newElement = document.importNode(template.content, true);
+
+    // Step 2: Append the given image
+    const imgElem = document.createElement('img');
+    imgElem.src = url;
+    let uniqueId = `draggable_${id}`;
+    const draggableElem = /** @type {HTMLElement} */ (newElement.querySelector('.draggable'));
+    if (draggableElem) {
+        draggableElem.appendChild(imgElem);
+
+        // Find a unique id for the draggable element
+
+        let counter = 1;
+        while (document.getElementById(uniqueId)) {
+            uniqueId = `draggable_${id}_${counter}`;
+            counter++;
+        }
+        draggableElem.id = uniqueId;
+
+        // Ensure that the newly added element is displayed as block
+        draggableElem.style.display = 'block';
+        //and has no padding unlike other non-zoomed-avatar draggables
+        draggableElem.style.padding = '0';
+
+        // Add an id to the close button
+        // If the close button exists, set related-id
+        const closeButton = /** @type {HTMLElement} */ (draggableElem.querySelector('.dragClose'));
+        if (closeButton) {
+            closeButton.id = `${uniqueId}close`;
+            closeButton.dataset.relatedId = uniqueId;
+        }
+
+        // Find the .drag-grabber and set its matching unique ID
+        const dragGrabber = draggableElem.querySelector('.drag-grabber');
+        if (dragGrabber) {
+            dragGrabber.id = `${uniqueId}header`; // appending _header to make it match the parent's unique ID
+        }
+    }
+
+    // Step 3: Attach it to the movingDivs container
+    document.getElementById('movingDivs').appendChild(newElement);
+
+    // Step 4: Call dragElement and loadMovingUIState
+    const appendedElement = document.getElementById(uniqueId);
+    if (appendedElement) {
+        var elmntName = $(appendedElement);
+        loadMovingUIState();
+        dragElement(elmntName);
+
+        // Prevent dragging the image
+        $(`#${uniqueId} img`).on('dragstart', (e) => {
+            console.log('saw drag on avatar!');
+            e.preventDefault();
+            return false;
+        });
+    } else {
+        console.error('Failed to append the template content or retrieve the appended content.');
+    }
+}
+
+/**
+ * Sanitizes a given ID to ensure it can be used as an HTML ID.
+ * This function replaces spaces and non-word characters with dashes.
+ * It also removes any non-ASCII characters.
+ * @param {string} id - The ID to be sanitized.
+ * @returns {string} - The sanitized ID.
+ */
+function sanitizeHTMLId(id) {
+    // Replace spaces and non-word characters
+    id = id.replace(/\s+/g, '-')
+        .replace(/[^\x00-\x7F]/g, '-')
+        .replace(/\W/g, '');
+
+    return id;
+}
+
+/**
+ * Processes a list of items (containing URLs) and creates a draggable box for the first item.
+ *
+ * If the provided list of items is non-empty, it takes the URL of the first item,
+ * derives an ID from the URL, and uses the makeDragImg function to create
+ * a draggable image element based on that ID and URL.
+ *
+ * @param {Array} items - A list of items where each item has a responsiveURL method that returns a URL.
+ */
+function viewWithDragbox(items) {
+    if (items && items.length > 0) {
+        const url = items[0].responsiveURL(); // Get the URL of the clicked image/video
+        // ID should just be the last part of the URL, removing the extension
+        const id = sanitizeHTMLId(url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.')));
+        makeDragImg(id, url);
+    }
+}
+
+
+// Registers a simple command for opening the char gallery.
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+    name: 'show-gallery',
+    aliases: ['sg'],
+    callback: () => {
+        showCharGallery();
+        return '';
+    },
+    helpString: 'Shows the gallery.',
+}));
+SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+    name: 'list-gallery',
+    aliases: ['lg'],
+    callback: listGalleryCommand,
+    returns: 'list of images',
+    namedArgumentList: [
+        SlashCommandNamedArgument.fromProps({
+            name: 'char',
+            description: 'character name',
+            typeList: [ARGUMENT_TYPE.STRING],
+            enumProvider: commonEnumProviders.characters('character'),
+        }),
+        SlashCommandNamedArgument.fromProps({
+            name: 'group',
+            description: 'group name',
+            typeList: [ARGUMENT_TYPE.STRING],
+            enumProvider: commonEnumProviders.characters('group'),
+        }),
+    ],
+    helpString: 'List images in the gallery of the current char / group or a specified char / group.',
+}));
+
+async function listGalleryCommand(args) {
+    try {
+        let url = args.char ?? (args.group ? groups.find(it => it.name == args.group)?.id : null) ?? (selected_group || this_chid);
+        if (!args.char && !args.group && !selected_group && this_chid !== undefined) {
+            url = getGalleryFolder(characters[this_chid]);
+        }
+
+        const items = await getGalleryItems(url);
+        return JSON.stringify(items.map(it => it.src));
+
+    } catch (err) {
+        console.trace();
+        console.error(err);
+    }
+    return JSON.stringify([]);
+}
+
+// On extension load, ensure the settings are initialized
+(function () {
+    initSettings();
+    eventSource.on(event_types.CHARACTER_RENAMED, (oldAvatar, newAvatar) => {
+        const context = ChuQuadrant.getContext();
+        const galleryFolder = context.extensionSettings.gallery.folders[oldAvatar];
+        if (galleryFolder) {
+            context.extensionSettings.gallery.folders[newAvatar] = galleryFolder;
+            delete context.extensionSettings.gallery.folders[oldAvatar];
+            context.saveSettingsDebounced();
+        }
+    });
+    eventSource.on(event_types.CHARACTER_DELETED, (data) => {
+        const avatar = data?.character?.avatar;
+        if (!avatar) return;
+        const context = ChuQuadrant.getContext();
+        delete context.extensionSettings.gallery.folders[avatar];
+        context.saveSettingsDebounced();
+    });
+    eventSource.on('charManagementDropdown', (selectedOptionId) => {
+        if (selectedOptionId === 'show_char_gallery') {
+            showCharGallery();
+        }
+    });
+
+    // Add an option to the dropdown
+    $('#char-management-dropdown').append(
+        $('<option>', {
+            id: 'show_char_gallery',
+            text: translate('Show Gallery'),
+        }),
+    );
+})();

public/scripts/extensions/gallery/manifest.json

@@ -0,0 +1,12 @@
+{
+    "display_name": "Gallery",
+    "loading_order": 6,
+    "requires": [],
+    "optional": [
+    ],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "City-Unit",
+    "version": "1.5.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/gallery/style.css

@@ -0,0 +1,45 @@
+.nGY2 .nGY2GalleryBottom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gallery-folder-input {
+    background-color: transparent;
+    font-size: calc(var(--mainFontSize)* 0.9);
+    opacity: 0.8;
+    flex-grow: 1;
+}
+
+.gallery-folder-input:placeholder-shown {
+    font-style: italic;
+    opacity: 0.5;
+    border-color: transparent;
+}
+
+.gallery-sort-select {
+    width: max-content;
+    flex: 1;
+    cursor: pointer;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    opacity: 0.8;
+    background: none;
+    background-image: url(/img/down-arrow.svg);
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    background-size: 8px 5px;
+    padding-right: 20px;
+    font-size: calc(var(--mainFontSize)* 0.9);
+    margin-bottom: 0;
+}
+
+#gallery .dragTitle {
+    margin-right: 30px;
+}
+
+#dragGallery {
+    min-height: 25dvh;
+}

public/scripts/extensions/memory/manifest.json

@@ -0,0 +1,13 @@
+{
+    "display_name": "Summarize",
+    "loading_order": 9,
+    "requires": [],
+    "optional": [
+        "summarize"
+    ],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/memory/settings.html

@@ -0,0 +1,148 @@
+<div id="memory_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <div class="flex-container alignitemscenter margin0">
+                <b data-i18n="ext_sum_title">Summarize</b>
+                <i id="summaryExtensionPopoutButton" class="fa-solid fa-window-restore menu_button margin0"></i>
+            </div>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <div id="summaryExtensionDrawerContents">
+                <label for="summary_source" data-i18n="ext_sum_with">Summarize with:</label>
+                <select id="summary_source" class="text_pole">
+                    <option value="main" data-i18n="ext_sum_main_api">Main API</option>
+                    <option value="extras">Extras API (deprecated)</option>
+                    <option value="webllm" data-i18n="ext_sum_webllm">WebLLM Extension</option>
+                </select><br>
+
+                <div class="flex-container justifyspacebetween alignitemscenter">
+                    <span data-i18n="ext_sum_current_summary">Current summary:</span>
+                    <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="memory_contents" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
+                    <span class="flex1">&nbsp;</span>
+                    <div id="memory_restore" class="menu_button margin0" data-i18n="[title]ext_sum_restore_tip" title="Restore a previous summary; use repeatedly to clear summarization state for this chat.">
+                        <small data-i18n="ext_sum_restore_previous">Restore Previous</small>
+                    </div>
+                </div>
+
+                <textarea id="memory_contents" class="text_pole textarea_compact" rows="6" data-i18n="[placeholder]ext_sum_memory_placeholder" placeholder="Summary will be generated here..."></textarea>
+                <div class="memory_contents_controls">
+                    <div id="memory_force_summarize" data-summary-source="main,webllm" class="menu_button menu_button_icon" title="Trigger a summary update right now." data-i18n="[title]ext_sum_force_tip">
+                        <i class="fa-solid fa-database"></i>
+                        <span data-i18n="ext_sum_force_text">Summarize now</span>
+                    </div>
+                    <label for="memory_frozen" title="Disable automatic summary updates. While paused, the summary remains as-is. You can still force an update by pressing the Summarize now button (which is only available with the Main API)." data-i18n="[title]Disable automatic summary updates. While paused, the summary remains as-is. You can still force an update by pressing the Summarize now button (which is only available with the Main API)."><input id="memory_frozen" type="checkbox" /><span data-i18n="ext_sum_pause">Pause</span></label>
+                    <label data-summary-source="main" for="memory_skipWIAN" title="Omit World Info and Author's Note from text to be summarized. Only has an effect when using the Main API. The Extras API always omits WI/AN." data-i18n="[title]Omit World Info and Author's Note from text to be summarized. Only has an effect when using the Main API. The Extras API always omits WI/AN.">
+                        <input id="memory_skipWIAN" type="checkbox" />
+                        <span data-i18n="ext_sum_no_wi_an">No WI/AN</span>
+                    </label>
+                </div>
+                <div class="memory_contents_controls">
+                    <div id="summarySettingsBlockToggle" class="menu_button menu_button_icon" data-i18n="[title]ext_sum_settings_tip" title="Edit summarization prompt, insertion position, etc.">
+                        <i class="fa-solid fa-cog"></i>
+                        <span data-i18n="ext_sum_settings">Summary Settings</span>
+                    </div>
+                </div>
+                <div id="summarySettingsBlock" style="display:none;">
+                    <div data-summary-source="main">
+                        <label data-i18n="ext_sum_prompt_builder">
+                            Prompt builder
+                        </label>
+                        <label class="checkbox_label" for="memory_prompt_builder_raw_blocking" data-i18n="[title]ext_sum_prompt_builder_1_desc" title="Extension will build its own prompt using messages that were not summarized yet. Blocks the chat until the summary is generated.">
+                            <input id="memory_prompt_builder_raw_blocking" type="radio" name="memory_prompt_builder" value="1" />
+                            <span data-i18n="ext_sum_prompt_builder_1">Raw, blocking</span>
+                        </label>
+                        <label class="checkbox_label" for="memory_prompt_builder_raw_non_blocking" data-i18n="[title]ext_sum_prompt_builder_2_desc" title="Extension will build its own prompt using messages that were not summarized yet. Does not block the chat while the summary is being generated. Not all backends support this mode.">
+                            <input id="memory_prompt_builder_raw_non_blocking" type="radio" name="memory_prompt_builder" value="2" />
+                            <span data-i18n="ext_sum_prompt_builder_2">Raw, non-blocking</span>
+                        </label>
+                        <label class="checkbox_label" id="memory_prompt_builder_default" data-i18n="[title]ext_sum_prompt_builder_3_desc" title="Extension will use the regular main prompt builder and add the summary request to it as the last system message.">
+                            <input id="memory_prompt_builder_default" type="radio" name="memory_prompt_builder" value="0" />
+                            <span data-i18n="ext_sum_prompt_builder_3">Classic, blocking</span>
+                        </label>
+                    </div>
+                    <div data-summary-source="main,webllm">
+                        <label for="memory_prompt" class="title_restorable">
+                            <span data-i18n="Summary Prompt">Summary Prompt</span>
+                            <div id="memory_prompt_restore" data-i18n="[title]ext_sum_restore_default_prompt_tip" title="Restore default prompt" class="right_menu_button">
+                                <div class="fa-solid fa-clock-rotate-left"></div>
+                            </div>
+                        </label>
+                        <textarea id="memory_prompt" class="text_pole textarea_compact" rows="6" data-i18n="[placeholder]ext_sum_prompt_placeholder" placeholder="This prompt will be sent to AI to request the summary generation. &lcub;&lcub;words&rcub;&rcub; will resolve to the 'Number of words' parameter."></textarea>
+                        <label for="memory_prompt_words"><span data-i18n="ext_sum_target_length_1">Target summary length</span> <span data-i18n="ext_sum_target_length_2">(</span><span id="memory_prompt_words_value"></span><span data-i18n="ext_sum_target_length_3"> words)</span></label>
+                        <input id="memory_prompt_words" type="range" value="{{defaultSettings.promptWords}}" min="{{defaultSettings.promptMinWords}}" max="{{defaultSettings.promptMaxWords}}" step="{{defaultSettings.promptWordsStep}}" />
+                        <label for="memory_override_response_length">
+                            <span data-i18n="ext_sum_api_response_length_1">API response length</span> <span data-i18n="ext_sum_api_response_length_2">(</span><span id="memory_override_response_length_value"></span><span data-i18n="ext_sum_api_response_length_3"> tokens)</span>
+                            <small class="memory_disabled_hint" data-i18n="ext_sum_0_default">0 = default</small>
+                        </label>
+                        <input id="memory_override_response_length" type="range" value="{{defaultSettings.overrideResponseLength}}" min="{{defaultSettings.overrideResponseLengthMin}}" max="{{defaultSettings.overrideResponseLengthMax}}" step="{{defaultSettings.overrideResponseLengthStep}}" />
+                        <label for="memory_max_messages_per_request">
+                            <span data-i18n="ext_sum_raw_max_msg">[Raw/WebLLM] Max messages per request</span> (<span id="memory_max_messages_per_request_value"></span>)
+                            <small class="memory_disabled_hint" data-i18n="ext_sum_0_unlimited">0 = unlimited</small>
+                        </label>
+                        <input id="memory_max_messages_per_request" type="range" value="{{defaultSettings.maxMessagesPerRequest}}" min="{{defaultSettings.maxMessagesPerRequestMin}}" max="{{defaultSettings.maxMessagesPerRequestMax}}" step="{{defaultSettings.maxMessagesPerRequestStep}}" />
+                        <h4 data-i18n="Update frequency" class="textAlignCenter">
+                            Update frequency
+                        </h4>
+                        <label for="memory_prompt_interval" class="title_restorable">
+                            <span>
+                                <span data-i18n="ext_sum_update_every_messages_1">Update every</span> <span id="memory_prompt_interval_value"></span><span data-i18n="ext_sum_update_every_messages_2"> messages</span>
+                                <small class="memory_disabled_hint" data-i18n="ext_sum_0_disable">0 = disable</small>
+                            </span>
+                            <div id="memory_prompt_interval_auto" data-i18n="[title]ext_sum_auto_adjust_desc" title="Try to automatically adjust the interval based on the chat metrics." class="right_menu_button">
+                                <div class="fa-solid fa-wand-magic-sparkles"></div>
+                            </div>
+                        </label>
+                        <input id="memory_prompt_interval" type="range" value="{{defaultSettings.promptInterval}}" min="{{defaultSettings.promptMinInterval}}" max="{{defaultSettings.promptMaxInterval}}" step="{{defaultSettings.promptIntervalStep}}" />
+                        <label for="memory_prompt_words_force" class="title_restorable">
+                            <span>
+                                <span data-i18n="ext_sum_update_every_words_1">Update every</span> <span id="memory_prompt_words_force_value"></span><span data-i18n="ext_sum_update_every_words_2"> words</span>
+                                <small class="memory_disabled_hint" data-i18n="ext_sum_0_disable">0 = disable</small>
+                            </span>
+                            <div id="memory_prompt_words_auto" data-i18n="[title]ext_sum_auto_adjust_desc" title="Try to automatically adjust the interval based on the chat metrics." class="right_menu_button">
+                                <div class="fa-solid fa-wand-magic-sparkles"></div>
+                            </div>
+                        </label>
+                        <input id="memory_prompt_words_force" type="range" value="{{defaultSettings.promptForceWords}}" min="{{defaultSettings.promptMinForceWords}}" max="{{defaultSettings.promptMaxForceWords}}" step="{{defaultSettings.promptForceWordsStep}}" />
+                        <small data-i18n="ext_sum_both_sliders">If both sliders are non-zero, then both will trigger summary updates at their respective intervals.</small>
+                        <hr>
+                    </div>
+                    <div class="memory_template">
+                        <label for="memory_template" data-i18n="ext_sum_injection_template">Injection Template</label>
+                        <textarea id="memory_template" class="text_pole textarea_compact" rows="2" data-i18n="[placeholder]ext_sum_memory_template_placeholder" placeholder="&lcub;&lcub;summary&rcub;&rcub; will resolve to the current summary contents."></textarea>
+                    </div>
+                    <label for="memory_position" data-i18n="ext_sum_injection_position">Injection Position</label>
+                    <label class="checkbox_label" for="memory_include_wi_scan" data-i18n="[title]ext_sum_include_wi_scan_desc" title="Include the latest summary in the WI scan.">
+                        <input id="memory_include_wi_scan" type="checkbox" />
+                        <span data-i18n="ext_sum_include_wi_scan">Include in World Info Scanning</span>
+                    </label>
+                    <div class="radio_group">
+                        <label>
+                            <input type="radio" name="memory_position" value="-1" />
+                            <span data-i18n="None (not injected)">None (not injected)</span>
+                            <i class="fa-solid fa-info-circle" title="The summary will not be injected into the prompt. You can still access it via the &lcub;&lcub;summary&rcub;&rcub; macro." data-i18n="[title]ext_sum_injection_position_none"></i>
+                        </label>
+                        <label>
+                            <input type="radio" name="memory_position" value="2" />
+                            <span data-i18n="Before Main Prompt / Story String">Before Main Prompt / Story String</span>
+                        </label>
+                        <label>
+                            <input type="radio" name="memory_position" value="0" />
+                            <span data-i18n="After Main Prompt / Story String">After Main Prompt / Story String</span>
+                        </label>
+                        <label class="flex-container alignItemsCenter" title="How many messages before the current end of the chat." data-i18n="[title]How many messages before the current end of the chat.">
+                            <input type="radio" name="memory_position" value="1" />
+                            <span data-i18n="In-chat @ Depth">In-chat @ Depth</span> <input id="memory_depth" class="text_pole widthUnset" type="number" min="0" max="999" />
+                            <span data-i18n="as">as</span>
+                            <select id="memory_role" class="text_pole widthNatural">
+                                <option value="0" data-i18n="System">System</option>
+                                <option value="1" data-i18n="User">User</option>
+                                <option value="2" data-i18n="Assistant">Assistant</option>
+                            </select>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/memory/style.css

@@ -0,0 +1,47 @@
+#memory_settings {
+    display: flex;
+    flex-direction: column;
+}
+
+#memory_contents {
+    field-sizing: content;
+    max-height: 50dvh;
+}
+
+#memory_restore {
+    width: max-content;
+}
+
+label[for="memory_frozen"],
+label[for="memory_skipWIAN"] {
+    display: flex;
+    align-items: center;
+    margin: 0 !important;
+}
+
+label[for="memory_frozen"] input {
+    margin-right: 10px;
+}
+
+.memory_contents_controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.memory_disabled_hint {
+    margin-left: 2px;
+}
+
+#summarySettingsBlock {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+
+#summaryExtensionPopout {
+    display: flex;
+    flex-direction: column;
+    padding-top: 25px;
+}

public/scripts/extensions/quick-reply/api/QuickReplyApi.js

@@ -0,0 +1,505 @@
+import { QuickReply } from '../src/QuickReply.js';
+import { QuickReplyContextLink } from '../src/QuickReplyContextLink.js';
+import { QuickReplySet } from '../src/QuickReplySet.js';
+import { QuickReplySettings } from '../src/QuickReplySettings.js';
+import { SettingsUi } from '../src/ui/SettingsUi.js';
+import { onlyUnique } from '../../../utils.js';
+
+export class QuickReplyApi {
+    /** @type {QuickReplySettings} */ settings;
+    /** @type {SettingsUi} */ settingsUi;
+
+
+
+
+    constructor(/** @type {QuickReplySettings} */settings, /** @type {SettingsUi} */settingsUi) {
+        this.settings = settings;
+        this.settingsUi = settingsUi;
+    }
+
+
+
+
+    /**
+     * @param {QuickReply} qr
+     * @returns {QuickReplySet}
+     */
+    getSetByQr(qr) {
+        return QuickReplySet.list.find(it=>it.qrList.includes(qr));
+    }
+
+    /**
+     * Finds and returns an existing Quick Reply Set by its name.
+     *
+     * @param {string} name name of the quick reply set
+     * @returns the quick reply set, or undefined if not found
+     */
+    getSetByName(name) {
+        return QuickReplySet.get(name);
+    }
+
+    /**
+     * Finds and returns an existing Quick Reply by its set's name and its label.
+     *
+     * @param {string} setName name of the quick reply set
+     * @param {string|number} label label or numeric ID of the quick reply
+     * @returns the quick reply, or undefined if not found
+     */
+    getQrByLabel(setName, label) {
+        const set = this.getSetByName(setName);
+        if (!set) return;
+        if (Number.isInteger(label)) return set.qrList.find(it=>it.id == label);
+        return set.qrList.find(it=>it.label == label);
+    }
+
+
+
+
+    /**
+     * Executes a quick reply by its index and returns the result.
+     *
+     * @param {Number} idx the index (zero-based) of the quick reply to execute
+     * @returns the return value of the quick reply, or undefined if not found
+     */
+    async executeQuickReplyByIndex(idx) {
+        const qr = [...this.settings.config.setList, ...(this.settings.chatConfig?.setList ?? [])]
+            .map(it=>it.set.qrList)
+            .flat()[idx]
+        ;
+        if (qr) {
+            return await qr.onExecute();
+        } else {
+            throw new Error(`No quick reply at index "${idx}"`);
+        }
+    }
+
+    /**
+     * Executes an existing quick reply.
+     *
+     * @param {string} setName name of the existing quick reply set
+     * @param {string|number} label label of the existing quick reply (text on the button) or its numeric ID
+     * @param {object} [args] optional arguments
+     * @param {import('../../../slash-commands.js').ExecuteSlashCommandsOptions} [options] optional execution options
+     */
+    async executeQuickReply(setName, label, args = {}, options = {}) {
+        const qr = this.getQrByLabel(setName, label);
+        if (!qr) {
+            throw new Error(`No quick reply with label "${label}" in set "${setName}" found.`);
+        }
+        return await qr.execute(args, false, false, options);
+    }
+
+
+    /**
+     * Adds or removes a quick reply set to the list of globally active quick reply sets.
+     *
+     * @param {string} name the name of the set
+     * @param {boolean} isVisible whether to show the set's buttons or not
+     */
+    toggleGlobalSet(name, isVisible = true) {
+        const set = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        if (this.settings.config.hasSet(set)) {
+            this.settings.config.removeSet(set);
+        } else {
+            this.settings.config.addSet(set, isVisible);
+        }
+    }
+
+    /**
+     * Adds a quick reply set to the list of globally active quick reply sets.
+     *
+     * @param {string} name the name of the set
+     * @param {boolean} isVisible whether to show the set's buttons or not
+     */
+    addGlobalSet(name, isVisible = true) {
+        const set = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        this.settings.config.addSet(set, isVisible);
+    }
+
+    /**
+     * Removes a quick reply set from the list of globally active quick reply sets.
+     *
+     * @param {string} name the name of the set
+     */
+    removeGlobalSet(name) {
+        const set = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        this.settings.config.removeSet(set);
+    }
+
+
+    /**
+     * Adds or removes a quick reply set to the list of the current chat's active quick reply sets.
+     *
+     * @param {string} name the name of the set
+     * @param {boolean} isVisible whether to show the set's buttons or not
+     */
+    toggleChatSet(name, isVisible = true) {
+        if (!this.settings.chatConfig) return;
+        const set = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        if (this.settings.chatConfig.hasSet(set)) {
+            this.settings.chatConfig.removeSet(set);
+        } else {
+            this.settings.chatConfig.addSet(set, isVisible);
+        }
+    }
+
+    /**
+     * Adds a quick reply set to the list of the current chat's active quick reply sets.
+     *
+     * @param {string} name the name of the set
+     * @param {boolean} isVisible whether to show the set's buttons or not
+     */
+    addChatSet(name, isVisible = true) {
+        if (!this.settings.chatConfig) return;
+        const set = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        this.settings.chatConfig.addSet(set, isVisible);
+    }
+
+    /**
+     * Removes a quick reply set from the list of the current chat's active quick reply sets.
+     *
+     * @param {string} name the name of the set
+     */
+    removeChatSet(name) {
+        if (!this.settings.chatConfig) return;
+        const set = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        this.settings.chatConfig.removeSet(set);
+    }
+
+
+    /**
+     * Creates a new quick reply in an existing quick reply set.
+     *
+     * @param {string} setName name of the quick reply set to insert the new quick reply into
+     * @param {string} label label for the new quick reply (text on the button)
+     * @param {object} [props]
+     * @param {string} [props.icon] the icon to show on the QR button
+     * @param {boolean} [props.showLabel] whether to show the label even when an icon is assigned
+     * @param {string} [props.message] the message to be sent or slash command to be executed by the new quick reply
+     * @param {string} [props.title] the title / tooltip to be shown on the quick reply button
+     * @param {boolean} [props.isHidden] whether to hide or show the button
+     * @param {boolean} [props.executeOnStartup] whether to execute the quick reply when ChuQuadrant starts
+     * @param {boolean} [props.executeOnUser] whether to execute the quick reply after a user has sent a message
+     * @param {boolean} [props.executeOnAi] whether to execute the quick reply after the AI has sent a message
+     * @param {boolean} [props.executeOnChatChange] whether to execute the quick reply when a new chat is loaded
+     * @param {boolean} [props.executeOnGroupMemberDraft] whether to execute the quick reply when a group member is selected
+     * @param {boolean} [props.executeOnNewChat] whether to execute the quick reply when a new chat is created
+     * @param {string} [props.automationId] when not empty, the quick reply will be executed when the WI with the given automation ID is activated
+     * @returns {QuickReply} the new quick reply
+     */
+    createQuickReply(setName, label, {
+        icon,
+        showLabel,
+        message,
+        title,
+        isHidden,
+        executeOnStartup,
+        executeOnUser,
+        executeOnAi,
+        executeOnChatChange,
+        executeOnGroupMemberDraft,
+        executeOnNewChat,
+        automationId,
+    } = {}) {
+        const set = this.getSetByName(setName);
+        if (!set) {
+            throw new Error(`No quick reply set with named "${setName}" found.`);
+        }
+        const qr = set.addQuickReply();
+        qr.label = label ?? '';
+        qr.icon = icon ??  '';
+        qr.showLabel = showLabel ?? false;
+        qr.message = message ?? '';
+        qr.title = title ?? '';
+        qr.isHidden = isHidden ?? false;
+        qr.executeOnStartup = executeOnStartup ?? false;
+        qr.executeOnUser = executeOnUser ?? false;
+        qr.executeOnAi = executeOnAi ?? false;
+        qr.executeOnChatChange = executeOnChatChange ?? false;
+        qr.executeOnGroupMemberDraft = executeOnGroupMemberDraft ?? false;
+        qr.executeOnNewChat = executeOnNewChat ?? false;
+        qr.automationId = automationId ?? '';
+        qr.onUpdate();
+        return qr;
+    }
+
+    /**
+     * Updates an existing quick reply.
+     *
+     * @param {string} setName name of the existing quick reply set
+     * @param {string|number} label label of the existing quick reply (text on the button) or its numeric ID
+     * @param {object} [props]
+     * @param {string} [props.icon] the icon to show on the QR button
+     * @param {boolean} [props.showLabel] whether to show the label even when an icon is assigned
+     * @param {string} [props.newLabel] new label for quick reply (text on the button)
+     * @param {string} [props.message] the message to be sent or slash command to be executed by the quick reply
+     * @param {string} [props.title] the title / tooltip to be shown on the quick reply button
+     * @param {boolean} [props.isHidden] whether to hide or show the button
+     * @param {boolean} [props.executeOnStartup] whether to execute the quick reply when ChuQuadrant starts
+     * @param {boolean} [props.executeOnUser] whether to execute the quick reply after a user has sent a message
+     * @param {boolean} [props.executeOnAi] whether to execute the quick reply after the AI has sent a message
+     * @param {boolean} [props.executeOnChatChange] whether to execute the quick reply when a new chat is loaded
+     * @param {boolean} [props.executeOnGroupMemberDraft] whether to execute the quick reply when a group member is selected
+     * @param {boolean} [props.executeOnNewChat] whether to execute the quick reply when a new chat is created
+     * @param {string} [props.automationId] when not empty, the quick reply will be executed when the WI with the given automation ID is activated
+     * @returns {QuickReply} the altered quick reply
+     */
+    updateQuickReply(setName, label, {
+        icon,
+        showLabel,
+        newLabel,
+        message,
+        title,
+        isHidden,
+        executeOnStartup,
+        executeOnUser,
+        executeOnAi,
+        executeOnChatChange,
+        executeOnGroupMemberDraft,
+        executeOnNewChat,
+        automationId,
+    } = {}) {
+        const qr = this.getQrByLabel(setName, label);
+        if (!qr) {
+            throw new Error(`No quick reply with label "${label}" in set "${setName}" found.`);
+        }
+        qr.updateIcon(icon ?? qr.icon);
+        qr.updateShowLabel(showLabel ?? qr.showLabel);
+        qr.updateLabel(newLabel ?? qr.label);
+        qr.updateMessage(message ?? qr.message);
+        qr.updateTitle(title ?? qr.title);
+        qr.isHidden = isHidden ?? qr.isHidden;
+        qr.executeOnStartup = executeOnStartup ?? qr.executeOnStartup;
+        qr.executeOnUser = executeOnUser ?? qr.executeOnUser;
+        qr.executeOnAi = executeOnAi ?? qr.executeOnAi;
+        qr.executeOnChatChange = executeOnChatChange ?? qr.executeOnChatChange;
+        qr.executeOnGroupMemberDraft = executeOnGroupMemberDraft ?? qr.executeOnGroupMemberDraft;
+        qr.executeOnNewChat = executeOnNewChat ?? qr.executeOnNewChat;
+        qr.automationId = automationId ?? qr.automationId;
+        qr.onUpdate();
+        return qr;
+    }
+
+    /**
+     * Deletes an existing quick reply.
+     *
+     * @param {string} setName name of the existing quick reply set
+     * @param {string|number} label label of the existing quick reply (text on the button) or its numeric ID
+     */
+    deleteQuickReply(setName, label) {
+        const qr = this.getQrByLabel(setName, label);
+        if (!qr) {
+            throw new Error(`No quick reply with label "${label}" in set "${setName}" found.`);
+        }
+        qr.delete();
+    }
+
+
+    /**
+     * Adds an existing quick reply set as a context menu to an existing quick reply.
+     *
+     * @param {string} setName name of the existing quick reply set containing the quick reply
+     * @param {string|number} label label of the existing quick reply or its numeric ID
+     * @param {string} contextSetName name of the existing quick reply set to be used as a context menu
+     * @param {boolean} isChained whether or not to chain the context menu quick replies
+     */
+    createContextItem(setName, label, contextSetName, isChained = false) {
+        const qr = this.getQrByLabel(setName, label);
+        const set = this.getSetByName(contextSetName);
+        if (!qr) {
+            throw new Error(`No quick reply with label "${label}" in set "${setName}" found.`);
+        }
+        if (!set) {
+            throw new Error(`No quick reply set with name "${contextSetName}" found.`);
+        }
+        const cl = new QuickReplyContextLink();
+        cl.set = set;
+        cl.isChained = isChained;
+        qr.addContextLink(cl);
+    }
+
+    /**
+     * Removes a quick reply set from a quick reply's context menu.
+     *
+     * @param {string} setName name of the existing quick reply set containing the quick reply
+     * @param {string|number} label label of the existing quick reply or its numeric ID
+     * @param {string} contextSetName name of the existing quick reply set to be used as a context menu
+     */
+    deleteContextItem(setName, label, contextSetName) {
+        const qr = this.getQrByLabel(setName, label);
+        const set = this.getSetByName(contextSetName);
+        if (!qr) {
+            throw new Error(`No quick reply with label "${label}" in set "${setName}" found.`);
+        }
+        if (!set) {
+            throw new Error(`No quick reply set with name "${contextSetName}" found.`);
+        }
+        qr.removeContextLink(set.name);
+    }
+
+    /**
+     * Removes all entries from a quick reply's context menu.
+     *
+     * @param {string} setName name of the existing quick reply set containing the quick reply
+     * @param {string|number} label label of the existing quick reply or its numeric ID
+     */
+    clearContextMenu(setName, label) {
+        const qr = this.getQrByLabel(setName, label);
+        if (!qr) {
+            throw new Error(`No quick reply with label "${label}" in set "${setName}" found.`);
+        }
+        qr.clearContextLinks();
+    }
+
+
+    /**
+     * Create a new quick reply set.
+     *
+     * @param {string} name name of the new quick reply set
+     * @param {object} [props]
+     * @param {boolean} [props.disableSend] whether or not to send the quick replies or put the message or slash command into the char input box
+     * @param {boolean} [props.placeBeforeInput] whether or not to place the quick reply contents before the existing user input
+     * @param {boolean} [props.injectInput] whether or not to automatically inject the user input at the end of the quick reply
+     * @returns {Promise<QuickReplySet>} the new quick reply set
+     */
+    async createSet(name, {
+        disableSend,
+        placeBeforeInput,
+        injectInput,
+    } = {}) {
+        const set = new QuickReplySet();
+        set.name = name;
+        set.disableSend = disableSend ?? false;
+        set.placeBeforeInput = placeBeforeInput ?? false;
+        set.injectInput = injectInput ?? false;
+        const oldSet = this.getSetByName(name);
+        if (oldSet) {
+            QuickReplySet.list.splice(QuickReplySet.list.indexOf(oldSet), 1, set);
+        } else {
+            const idx = QuickReplySet.list.findIndex(it=>it.name.localeCompare(name) == 1);
+            if (idx > -1) {
+                QuickReplySet.list.splice(idx, 0, set);
+            } else {
+                QuickReplySet.list.push(set);
+            }
+        }
+        await set.save();
+        this.settingsUi.rerender();
+        return set;
+    }
+
+    /**
+     * Update an existing quick reply set.
+     *
+     * @param {string} name name of the existing quick reply set
+     * @param {object} [props]
+     * @param {boolean} [props.disableSend] whether or not to send the quick replies or put the message or slash command into the char input box
+     * @param {boolean} [props.placeBeforeInput] whether or not to place the quick reply contents before the existing user input
+     * @param {boolean} [props.injectInput] whether or not to automatically inject the user input at the end of the quick reply
+     * @returns {Promise<QuickReplySet>} the altered quick reply set
+     */
+    async updateSet(name, {
+        disableSend,
+        placeBeforeInput,
+        injectInput,
+    } = {}) {
+        const set = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        set.disableSend = disableSend ?? false;
+        set.placeBeforeInput = placeBeforeInput ?? false;
+        set.injectInput = injectInput ?? false;
+        await set.save();
+        this.settingsUi.rerender();
+        return set;
+    }
+
+    /**
+     * Delete an existing quick reply set.
+     *
+     * @param {string} name name of the existing quick reply set
+     */
+    async deleteSet(name) {
+        const set  = this.getSetByName(name);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        await set.delete();
+        this.settingsUi.rerender();
+    }
+
+
+    /**
+     * Gets a list of all quick reply sets.
+     *
+     * @returns array with the names of all quick reply sets
+     */
+    listSets() {
+        return QuickReplySet.list.map(it=>it.name);
+    }
+    /**
+     * Gets a list of all globally active quick reply sets.
+     *
+     * @returns array with the names of all quick reply sets
+     */
+    listGlobalSets() {
+        return this.settings.config.setList.map(it=>it.set.name);
+    }
+    /**
+     * Gets a list of all quick reply sets activated by the current chat.
+     *
+     * @returns array with the names of all quick reply sets
+     */
+    listChatSets() {
+        return this.settings.chatConfig?.setList?.flatMap(it=>it.set.name) ?? [];
+    }
+
+    /**
+     * Gets a list of all quick replies in the quick reply set.
+     *
+     * @param {string} setName name of the existing quick reply set
+     * @returns array with the labels of this set's quick replies
+     */
+    listQuickReplies(setName) {
+        const set = this.getSetByName(setName);
+        if (!set) {
+            throw new Error(`No quick reply set with name "${name}" found.`);
+        }
+        return set.qrList.map(it=>it.label);
+    }
+
+    /**
+     * Gets a list of all Automation IDs used by quick replies.
+     *
+     * @returns {String[]} array with all automation IDs used by quick replies
+     */
+    listAutomationIds() {
+        return this
+            .listSets()
+            .flatMap(it => ({ set: it, qrs: this.listQuickReplies(it) }))
+            .map(it => it.qrs?.map(qr => this.getQrByLabel(it.set, qr)?.automationId))
+            .flat()
+            .filter(Boolean)
+            .filter(onlyUnique)
+            .map(String);
+    }
+}

public/scripts/extensions/quick-reply/html/qrEditor.html

@@ -0,0 +1,157 @@
+<div id="qr--modalEditor">
+	<div id="qr--main">
+		<h3 data-i18n="Labels and Message">Labels and Message</h3>
+		<div class="qr--labels">
+			<label class="qr--fit">
+				<span class="qr--labelText" data-i18n="Label">Icon</span>
+				<small class="qr--labelHint">&nbsp;</small>
+				<div class="menu_button fa-fw" id="qr--modal-icon" title="Click to change icon"></div>
+			</label>
+			<div class="label">
+				<span class="qr--labelText" data-i18n="Label">Label</span>
+				<small class="qr--labelHint" data-i18n="(label of the button, if no icon is chosen) ">(label of the button, if no icon is chosen)</small>
+				<div class="qr--inputGroup">
+					<label class="checkbox_label" title="Show label even if an icon is assigned">
+						<input type="checkbox" id="qr--modal-showLabel">
+						Show
+					</label>
+					<input type="text" class="text_pole" id="qr--modal-label">
+					<div class="menu_button fa-fw fa-solid fa-chevron-down" id="qr--modal-switcher" title="Switch to another QR"></div>
+				</div>
+			</div>
+			<label>
+				<span class="qr--labelText" data-i18n="Title">Title</span>
+				<small class="qr--labelHint" data-i18n="(tooltip, leave empty to show message or /command)">(tooltip, leave empty to show message or /command)</small>
+				<input type="text" class="text_pole" id="qr--modal-title">
+			</label>
+		</div>
+		<div class="qr--modal-messageContainer">
+			<label for="qr--modal-message" data-i18n="Message / Command:">
+				Message / Command:
+			</label>
+			<div class="qr--modal-editorSettings">
+				<label class="checkbox_label">
+					<input type="checkbox" id="qr--modal-wrap">
+					<span data-i18n="Word wrap">Word wrap</span>
+				</label>
+				<label class="checkbox_label">
+					<span data-i18n="Tab size:">Tab size:</span>
+					<input type="number" min="1" max="9" id="qr--modal-tabSize" class="text_pole">
+				</label>
+				<label class="checkbox_label">
+					<input type="checkbox" id="qr--modal-executeShortcut">
+					<span data-i18n="Ctrl+Enter to execute">Ctrl+Enter to execute</span>
+				</label>
+				<label class="checkbox_label">
+					<input type="checkbox" id="qr--modal-syntax">
+					<span>Syntax highlight</span>
+				</label>
+				<small>Ctrl+Alt+Click (or F9) to set / remove breakpoints</small>
+				<small>Ctrl+<span id="qr--modal-commentKey"></span> to toggle block comments</small>
+			</div>
+			<div id="qr--modal-messageHolder">
+				<pre id="qr--modal-messageSyntax"><code id="qr--modal-messageSyntaxInner" class="hljs language-stscript"></code></pre>
+				<textarea id="qr--modal-message" spellcheck="false"></textarea>
+			</div>
+		</div>
+	</div>
+
+
+
+	<div id="qr--resizeHandle"></div>
+
+
+
+	<div id="qr--qrOptions">
+		<h3 data-i18n="Context Menu">Context Menu</h3>
+		<div id="qr--ctxEditor">
+			<template id="qr--ctxItem">
+				<div class="qr--ctxItem" data-order="0">
+					<div class="drag-handle ui-sortable-handle">☰</div>
+					<select class="qr--set"></select>
+					<label class="qr--isChainedLabel checkbox_label" title="When enabled, the current Quick Reply will be sent together with (before) the clicked QR from the context menu.">
+						<span data-i18n="Chaining:">Chaining:</span>
+						<input type="checkbox" class="qr--isChained">
+					</label>
+					<div class="qr--delete menu_button menu_button_icon fa-solid fa-trash-can" title="Remove entry"></div>
+				</div>
+			</template>
+		</div>
+		<div class="qr--ctxEditorActions">
+			<span id="qr--ctxAdd" class="menu_button menu_button_icon fa-solid fa-plus" title="Add quick reply set to context menu"></span>
+		</div>
+
+
+		<h3 data-i18n="Auto-Execute">Auto-Execute</h3>
+		<div id="qr--autoExec" class="flex-container flexFlowColumn">
+			<label class="checkbox_label" title="Prevent this quick reply from triggering other auto-executed quick replies while auto-executing (i.e., prevent recursive auto-execution)">
+				<input type="checkbox" id="qr--preventAutoExecute" >
+				<span><i class="fa-solid fa-fw fa-plane-slash"></i><span data-i18n="Don't trigger auto-execute">Don't trigger auto-execute</span></span>
+			</label>
+			<label class="checkbox_label">
+				<input type="checkbox" id="qr--isHidden" >
+				<span><i class="fa-solid fa-fw fa-eye-slash"></i><span data-i18n="Invisible (auto-execute only)">Invisible (auto-execute only)</span></span>
+			</label>
+			<label class="checkbox_label">
+				<input type="checkbox" id="qr--executeOnStartup" >
+				<span><i class="fa-solid fa-fw fa-rocket"></i><span data-i18n="Execute on startup">Execute on startup</span></span>
+			</label>
+			<label class="checkbox_label">
+				<input type="checkbox" id="qr--executeOnUser" >
+				<span><i class="fa-solid fa-fw fa-user"></i><span data-i18n="Execute on user message">Execute on user message</span></span>
+			</label>
+			<label class="checkbox_label">
+				<input type="checkbox" id="qr--executeOnAi" >
+				<span><i class="fa-solid fa-fw fa-robot"></i><span data-i18n="Execute on AI message">Execute on AI message</span></span>
+			</label>
+			<label class="checkbox_label">
+				<input type="checkbox" id="qr--executeOnChatChange" >
+				<span><i class="fa-solid fa-fw fa-message"></i><span data-i18n="Execute on chat change">Execute on chat change</span></span>
+			</label>
+            <label class="checkbox_label">
+                <input type="checkbox" id="qr--executeOnNewChat">
+                <span><i class="fa-solid fa-fw fa-comments"></i><span data-i18n="Execute on new chat">Execute on new chat</span></span>
+            </label>
+            <label class="checkbox_label">
+                <input type="checkbox" id="qr--executeOnGroupMemberDraft">
+                <span><i class="fa-solid fa-fw fa-people-group"></i><span data-i18n="Execute on group member draft">Execute on group member draft</span></span>
+            </label>
+            <div class="flex-container alignItemsBaseline flexFlowColumn flexNoGap" title="Activate this quick reply when a World Info entry with the same Automation ID is triggered.">
+                <small data-i18n="Automation ID:">Automation ID</small>
+                <input type="text" id="qr--automationId" class="text_pole flex1" placeholder="( None )">
+            </div>
+		</div>
+
+
+		<h3 data-i18n="Testing">Testing</h3>
+		<div id="qr--modal-executeButtons">
+			<div id="qr--modal-execute" class="qr--modal-executeButton menu_button" title="Execute the quick reply now">
+				<i class="fa-solid fa-play"></i>
+				<span data-i18n="Execute">Execute</span>
+			</div>
+			<div id="qr--modal-pause" class="qr--modal-executeButton menu_button" title="Pause / continue execution">
+				<span class="qr--modal-executeComboIcon">
+					<i class="fa-solid fa-play"></i>
+					<i class="fa-solid fa-pause"></i>
+				</span>
+			</div>
+			<div id="qr--modal-stop" class="qr--modal-executeButton menu_button" title="Abort execution">
+				<i class="fa-solid fa-stop"></i>
+			</div>
+		</div>
+		<div id="qr--modal-executeProgress"></div>
+		<div id="qr--modal-executeErrors"></div>
+		<div id="qr--modal-executeResult"></div>
+
+		<div id="qr--modal-debugButtons">
+			<div title="Resume" id="qr--modal-resume" class="qr--modal-debugButton menu_button"></div>
+			<div title="Step Over" id="qr--modal-step" class="qr--modal-debugButton menu_button"></div>
+			<div title="Step Into" id="qr--modal-stepInto" class="qr--modal-debugButton menu_button"></div>
+			<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton menu_button"></div>
+			<div title="Minimize" id="qr--modal-minimize" class="qr--modal-debugButton menu_button fa-solid fa-minimize"></div>
+			<div title="Maximize" id="qr--modal-maximize" class="qr--modal-debugButton menu_button fa-solid fa-maximize"></div>
+		</div>
+		<textarea rows="1" id="qr--modal-send_textarea" placeholder="Chat input for use with {{input}}" title="Chat input for use with {{input}}"></textarea>
+		<div id="qr--modal-debugState"></div>
+	</div>
+</div>

public/scripts/extensions/quick-reply/html/settings.html

@@ -0,0 +1,86 @@
+<div id="qr--settings">
+	<div class="inline-drawer">
+		<div class="inline-drawer-toggle inline-drawer-header">
+			<strong data-i18n="Quick Reply">Quick Reply</strong>
+			<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+		</div>
+		<div class="inline-drawer-content">
+			<label class="flex-container">
+				<input type="checkbox" id="qr--isEnabled"><span data-i18n="Enable Quick Replies">Enable Quick Replies</span>
+			</label>
+			<label class="flex-container">
+				<input type="checkbox" id="qr--isCombined"><span data-i18n="Combine Quick Replies">Combine Quick Replies</span>
+			</label>
+            <label class="flex-container">
+                <input type="checkbox" id="qr--showPopoutButton"><span data-i18n="Show Popout Button">Show Popout Button (on Desktop)</span>
+            </label>
+
+			<hr>
+
+			<div id="qr--global">
+				<div class="qr--head">
+					<div class="qr--title" data-i18n="Global Quick Reply Sets">Global Quick Reply Sets</div>
+					<div class="qr--actions">
+						<div class="qr--setListAdd menu_button menu_button_icon fa-solid fa-plus" id="qr--global-setListAdd" title="Add quick reply set"></div>
+					</div>
+				</div>
+				<div id="qr--global-setList" class="qr--setList"></div>
+			</div>
+
+			<hr>
+
+			<div id="qr--chat">
+				<div class="qr--head">
+					<div class="qr--title" data-i18n="Chat Quick Reply Sets">Chat Quick Reply Sets</div>
+					<div class="qr--actions">
+						<div class="qr--setListAdd menu_button menu_button_icon fa-solid fa-plus" id="qr--chat-setListAdd" title="Add quick reply set"></div>
+					</div>
+				</div>
+				<div id="qr--chat-setList" class="qr--setList"></div>
+			</div>
+
+			<hr>
+
+			<div id="qr--editor">
+				<div class="qr--head">
+					<div class="qr--title" data-i18n="Edit Quick Replies">Edit Quick Replies</div>
+					<div class="qr--actions">
+						<select id="qr--set" class="text_pole"></select>
+						<div class="qr--add menu_button menu_button_icon fa-solid fa-pencil" id="qr--set-rename" title="Rename quick reply set"></div>
+						<div class="qr--add menu_button menu_button_icon fa-solid fa-plus" id="qr--set-new" title="Create new quick reply set"></div>
+						<div class="qr--add menu_button menu_button_icon fa-solid fa-file-import" id="qr--set-import" title="Import quick reply set"></div>
+						<input type="file" id="qr--set-importFile" accept=".json" hidden>
+						<div class="qr--add menu_button menu_button_icon fa-solid fa-file-export" id="qr--set-export" title="Export quick reply set"></div>
+                        <div class="qr-add menu_button menu_button_icon fa-solid fa-paste" id="qr--set-duplicate" title="Duplicate quick reply set"></div>
+						<div class="qr--del menu_button menu_button_icon fa-solid fa-trash redWarningBG" id="qr--set-delete" title="Delete quick reply set"></div>
+					</div>
+				</div>
+				<div id="qr--set-settings">
+					<label class="flex-container">
+						<input type="checkbox" id="qr--disableSend"> <span data-i18n="Disable Send (Insert Into Input Field)">Disable send (insert into input field)</span>
+					</label>
+					<label class="flex-container">
+						<input type="checkbox" id="qr--placeBeforeInput"> <span data-i18n="Place Quick Reply Before Input">Place quick reply before input</span>
+					</label>
+					<label class="flex-container" id="qr--injectInputContainer">
+						<input type="checkbox" id="qr--injectInput"> <span><span data-i18n="Inject user input automatically">Inject user input automatically</span> <small><span data-i18n="(if disabled, use ">(if disabled, use</span><code>{{input}}</code> <span data-i18n="macro for manual injection)">macro for manual injection)</span></small></span>
+					</label>
+					<div class="flex-container alignItemsCenter">
+						<toolcool-color-picker id="qr--color"></toolcool-color-picker>
+						<div class="menu_button" id="qr--colorClear">Clear</div>
+						<span data-i18n="Color">Color</span>
+					</div>
+					<label class="flex-container" id="qr--onlyBorderColorContainer">
+						<input type="checkbox" id="qr--onlyBorderColor"> <span data-i18n="Only apply color as accent">Only apply color as accent</span>
+					</label>
+				</div>
+				<div id="qr--set-qrList" class="qr--qrList"></div>
+				<div class="qr--set-qrListActions">
+					<div class="qr--add menu_button menu_button_icon fa-solid fa-plus" id="qr--set-add" title="Add quick reply"></div>
+					<div class="qr--paste menu_button menu_button_icon fa-solid fa-paste" id="qr--set-paste" title="Paste quick reply from clipboard"></div>
+					<div class="qr--import menu_button menu_button_icon fa-solid fa-file-import" id="qr--set-importQr" title="Import quick reply from file"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

public/scripts/extensions/quick-reply/index.js

@@ -0,0 +1,244 @@
+import { chat, chat_metadata, eventSource, event_types, getRequestHeaders } from '../../../script.js';
+import { extension_settings } from '../../extensions.js';
+import { QuickReplyApi } from './api/QuickReplyApi.js';
+import { AutoExecuteHandler } from './src/AutoExecuteHandler.js';
+import { QuickReply } from './src/QuickReply.js';
+import { QuickReplyConfig } from './src/QuickReplyConfig.js';
+import { QuickReplySet } from './src/QuickReplySet.js';
+import { QuickReplySettings } from './src/QuickReplySettings.js';
+import { SlashCommandHandler } from './src/SlashCommandHandler.js';
+import { ButtonUi } from './src/ui/ButtonUi.js';
+import { SettingsUi } from './src/ui/SettingsUi.js';
+import { debounceAsync } from '../../utils.js';
+export { debounceAsync };
+
+
+
+
+const _VERBOSE = true;
+export const debug = (...msg) => _VERBOSE ? console.debug('[QR2]', ...msg) : null;
+export const log = (...msg) => _VERBOSE ? console.log('[QR2]', ...msg) : null;
+export const warn = (...msg) => _VERBOSE ? console.warn('[QR2]', ...msg) : null;
+
+
+const defaultConfig = {
+    setList: [{
+        set: 'Default',
+        isVisible: true,
+    }],
+};
+
+const defaultSettings = {
+    isEnabled: false,
+    isCombined: false,
+    config: defaultConfig,
+};
+
+
+/** @type {Boolean}*/
+let isReady = false;
+/** @type {Function[]}*/
+let executeQueue = [];
+/** @type {QuickReplySettings}*/
+let settings;
+/** @type {SettingsUi} */
+let manager;
+/** @type {ButtonUi} */
+let buttons;
+/** @type {AutoExecuteHandler} */
+let autoExec;
+/** @type {QuickReplyApi} */
+export let quickReplyApi;
+
+
+
+
+const loadSets = async () => {
+    const response = await fetch('/api/settings/get', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({}),
+    });
+
+    if (response.ok) {
+        const setList = (await response.json()).quickReplyPresets ?? [];
+        for (const set of setList) {
+            if (set.version !== 2) {
+                // migrate old QR set
+                set.version = 2;
+                set.disableSend = set.quickActionEnabled ?? false;
+                set.placeBeforeInput = set.placeBeforeInputEnabled ?? false;
+                set.injectInput = set.AutoInputInject ?? false;
+                set.qrList = set.quickReplySlots.map((slot,idx)=>{
+                    const qr = {};
+                    qr.id = idx + 1;
+                    qr.label = slot.label ?? '';
+                    qr.title = slot.title ?? '';
+                    qr.message = slot.mes ?? '';
+                    qr.isHidden = slot.hidden ?? false;
+                    qr.executeOnStartup = slot.autoExecute_appStartup ?? false;
+                    qr.executeOnUser = slot.autoExecute_userMessage ?? false;
+                    qr.executeOnAi = slot.autoExecute_botMessage ?? false;
+                    qr.executeOnChatChange = slot.autoExecute_chatLoad ?? false;
+                    qr.executeOnGroupMemberDraft = slot.autoExecute_groupMemberDraft ?? false;
+                    qr.executeOnNewChat = slot.autoExecute_newChat ?? false;
+                    qr.automationId = slot.automationId ?? '';
+                    qr.contextList = (slot.contextMenu ?? []).map(it=>({
+                        set: it.preset,
+                        isChained: it.chain,
+                    }));
+                    return qr;
+                });
+            }
+            if (set.version == 2) {
+                QuickReplySet.list.push(QuickReplySet.from(JSON.parse(JSON.stringify(set))));
+            }
+        }
+        // need to load QR lists after all sets are loaded to be able to resolve context menu entries
+        setList.forEach((set, idx)=>{
+            QuickReplySet.list[idx].qrList = set.qrList.map(it=>QuickReply.from(it));
+            QuickReplySet.list[idx].init();
+        });
+        log('sets: ', QuickReplySet.list);
+    }
+};
+
+const loadSettings = async () => {
+    if (!extension_settings.quickReplyV2) {
+        if (!extension_settings.quickReply) {
+            extension_settings.quickReplyV2 = defaultSettings;
+        } else {
+            extension_settings.quickReplyV2 = {
+                isEnabled: extension_settings.quickReply.quickReplyEnabled ?? false,
+                isCombined: false,
+                isPopout: false,
+                config: {
+                    setList: [{
+                        set: extension_settings.quickReply.selectedPreset ?? extension_settings.quickReply.name ?? 'Default',
+                        isVisible: true,
+                    }],
+                },
+            };
+        }
+    }
+    try {
+        settings = QuickReplySettings.from(extension_settings.quickReplyV2);
+    } catch (ex) {
+        settings = QuickReplySettings.from(defaultSettings);
+    }
+};
+
+const executeIfReadyElseQueue = async (functionToCall, args) => {
+    if (isReady) {
+        log('calling', { functionToCall, args });
+        await functionToCall(...args);
+    } else {
+        log('queueing', { functionToCall, args });
+        executeQueue.push(async()=>await functionToCall(...args));
+    }
+};
+
+
+
+
+const init = async () => {
+    await loadSets();
+    await loadSettings();
+    log('settings: ', settings);
+
+    manager = new SettingsUi(settings);
+    document.querySelector('#qr_container').append(await manager.render());
+
+    buttons = new ButtonUi(settings);
+    buttons.show();
+    settings.onSave = ()=>buttons.refresh();
+
+    window['executeQuickReplyByName'] = async(name, args = {}, options = {}) => {
+        let qr = [...settings.config.setList, ...(settings.chatConfig?.setList ?? [])]
+            .map(it=>it.set.qrList)
+            .flat()
+            .find(it=>it.label == name)
+            ;
+        if (!qr) {
+            let [setName, ...qrName] = name.split('.');
+            qrName = qrName.join('.');
+            let qrs = QuickReplySet.get(setName);
+            if (qrs) {
+                qr = qrs.qrList.find(it=>it.label == qrName);
+            }
+        }
+        if (qr && qr.onExecute) {
+            return await qr.execute(args, false, true, options);
+        } else {
+            throw new Error(`No Quick Reply found for "${name}".`);
+        }
+    };
+
+    quickReplyApi = new QuickReplyApi(settings, manager);
+    const slash = new SlashCommandHandler(quickReplyApi);
+    slash.init();
+    autoExec = new AutoExecuteHandler(settings);
+
+    eventSource.on(event_types.APP_READY, async()=>await finalizeInit());
+
+    window['quickReplyApi'] = quickReplyApi;
+};
+const finalizeInit = async () => {
+    debug('executing startup');
+    await autoExec.handleStartup();
+    debug('/executing startup');
+
+    debug(`executing queue (${executeQueue.length} items)`);
+    while (executeQueue.length > 0) {
+        const func = executeQueue.shift();
+        await func();
+    }
+    debug('/executing queue');
+    isReady = true;
+    debug('READY');
+};
+await init();
+
+const onChatChanged = async (chatIdx) => {
+    log('CHAT_CHANGED', chatIdx);
+    if (chatIdx) {
+        settings.chatConfig = QuickReplyConfig.from(chat_metadata.quickReply ?? {});
+    } else {
+        settings.chatConfig = null;
+    }
+    manager.rerender();
+    buttons.refresh();
+
+    await autoExec.handleChatChanged();
+};
+eventSource.on(event_types.CHAT_CHANGED, (...args)=>executeIfReadyElseQueue(onChatChanged, args));
+
+const onUserMessage = async () => {
+    await autoExec.handleUser();
+};
+eventSource.makeFirst(event_types.USER_MESSAGE_RENDERED, (...args)=>executeIfReadyElseQueue(onUserMessage, args));
+
+const onAiMessage = async (messageId) => {
+    if (['...'].includes(chat[messageId]?.mes)) {
+        log('QR auto-execution suppressed for swiped message');
+        return;
+    }
+
+    await autoExec.handleAi();
+};
+eventSource.makeFirst(event_types.CHARACTER_MESSAGE_RENDERED, (...args)=>executeIfReadyElseQueue(onAiMessage, args));
+
+const onGroupMemberDraft = async () => {
+    await autoExec.handleGroupMemberDraft();
+};
+eventSource.on(event_types.GROUP_MEMBER_DRAFTED, (...args) => executeIfReadyElseQueue(onGroupMemberDraft, args));
+
+const onWIActivation = async (entries) => {
+    await autoExec.handleWIActivation(entries);
+};
+eventSource.on(event_types.WORLD_INFO_ACTIVATED, (...args) => executeIfReadyElseQueue(onWIActivation, args));
+
+const onNewChat = async () => {
+    await autoExec.handleNewChat();
+};
+eventSource.on(event_types.CHAT_CREATED, (...args) => executeIfReadyElseQueue(onNewChat, args));

public/scripts/extensions/quick-reply/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Quick Replies",
+    "loading_order": 12,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "RossAscends#1779",
+    "version": "2.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/quick-reply/src/AutoExecuteHandler.js

@@ -0,0 +1,108 @@
+import { warn } from '../index.js';
+import { QuickReply } from './QuickReply.js';
+import { QuickReplySettings } from './QuickReplySettings.js';
+
+export class AutoExecuteHandler {
+    /** @type {QuickReplySettings} */ settings;
+
+    /** @type {Boolean[]}*/ preventAutoExecuteStack = [];
+
+
+
+
+    constructor(/** @type {QuickReplySettings} */settings) {
+        this.settings = settings;
+    }
+
+
+    checkExecute() {
+        return this.settings.isEnabled && !this.preventAutoExecuteStack.slice(-1)[0];
+    }
+
+
+
+
+    async performAutoExecute(/** @type {QuickReply[]} */qrList) {
+        for (const qr of qrList) {
+            this.preventAutoExecuteStack.push(qr.preventAutoExecute);
+            try {
+                await qr.execute({ isAutoExecute:true });
+            } catch (ex) {
+                warn(ex);
+            } finally {
+                this.preventAutoExecuteStack.pop();
+            }
+        }
+    }
+
+
+    async handleStartup() {
+        if (!this.checkExecute()) return;
+        const qrList = [
+            ...this.settings.config.setList.map(link=>link.set.qrList.filter(qr=>qr.executeOnStartup)).flat(),
+            ...(this.settings.chatConfig?.setList?.map(link=>link.set.qrList.filter(qr=>qr.executeOnStartup))?.flat() ?? []),
+        ];
+        await this.performAutoExecute(qrList);
+    }
+
+    async handleUser() {
+        if (!this.checkExecute()) return;
+        const qrList = [
+            ...this.settings.config.setList.map(link=>link.set.qrList.filter(qr=>qr.executeOnUser)).flat(),
+            ...(this.settings.chatConfig?.setList?.map(link=>link.set.qrList.filter(qr=>qr.executeOnUser))?.flat() ?? []),
+        ];
+        await this.performAutoExecute(qrList);
+    }
+
+    async handleAi() {
+        if (!this.checkExecute()) return;
+        const qrList = [
+            ...this.settings.config.setList.map(link=>link.set.qrList.filter(qr=>qr.executeOnAi)).flat(),
+            ...(this.settings.chatConfig?.setList?.map(link=>link.set.qrList.filter(qr=>qr.executeOnAi))?.flat() ?? []),
+        ];
+        await this.performAutoExecute(qrList);
+    }
+
+    async handleChatChanged() {
+        if (!this.checkExecute()) return;
+        const qrList = [
+            ...this.settings.config.setList.map(link=>link.set.qrList.filter(qr=>qr.executeOnChatChange)).flat(),
+            ...(this.settings.chatConfig?.setList?.map(link=>link.set.qrList.filter(qr=>qr.executeOnChatChange))?.flat() ?? []),
+        ];
+        await this.performAutoExecute(qrList);
+    }
+
+    async handleGroupMemberDraft() {
+        if (!this.checkExecute()) return;
+        const qrList = [
+            ...this.settings.config.setList.map(link=>link.set.qrList.filter(qr=>qr.executeOnGroupMemberDraft)).flat(),
+            ...(this.settings.chatConfig?.setList?.map(link=>link.set.qrList.filter(qr=>qr.executeOnGroupMemberDraft))?.flat() ?? []),
+        ];
+        await this.performAutoExecute(qrList);
+    }
+
+    async handleNewChat() {
+        if (!this.checkExecute()) return;
+        const qrList = [
+            ...this.settings.config.setList.map(link=>link.set.qrList.filter(qr=>qr.executeOnNewChat)).flat(),
+            ...(this.settings.chatConfig?.setList?.map(link=>link.set.qrList.filter(qr=>qr.executeOnNewChat))?.flat() ?? []),
+        ];
+        await this.performAutoExecute(qrList);
+    }
+
+    /**
+     * @param {any[]} entries Set of activated entries
+     */
+    async handleWIActivation(entries) {
+        if (!this.checkExecute() || !Array.isArray(entries) || entries.length === 0) return;
+        const automationIds = entries.map(entry => entry.automationId).filter(Boolean);
+        if (automationIds.length === 0) return;
+
+        const qrList = [
+            ...this.settings.config.setList.map(link=>link.set.qrList.filter(qr=>qr.automationId && automationIds.includes(qr.automationId))).flat(),
+            ...(this.settings.chatConfig?.setList?.map(link=>link.set.qrList.filter(qr=>qr.automationId && automationIds.includes(qr.automationId)))?.flat() ?? []),
+        ];
+
+        await this.performAutoExecute(qrList);
+    }
+}

public/scripts/extensions/quick-reply/src/QuickReplyConfig.js

@@ -0,0 +1,127 @@
+import { getSortableDelay } from '../../../utils.js';
+import { QuickReplySetLink } from './QuickReplySetLink.js';
+import { QuickReplySet } from './QuickReplySet.js';
+
+export class QuickReplyConfig {
+    /**@type {QuickReplySetLink[]}*/ setList = [];
+    /**@type {Boolean}*/ isGlobal;
+
+    /**@type {Function}*/ onUpdate;
+    /**@type {Function}*/ onRequestEditSet;
+
+    /**@type {HTMLElement}*/ dom;
+    /**@type {HTMLElement}*/ setListDom;
+
+
+
+
+    static from(props) {
+        props.setList = props.setList?.map(it=>QuickReplySetLink.from(it))?.filter(it=>it.set) ?? [];
+        const instance = Object.assign(new this(), props);
+        instance.init();
+        return instance;
+    }
+
+
+
+
+    init() {
+        this.setList.forEach(it=>this.hookQuickReplyLink(it));
+    }
+
+
+    hasSet(qrs) {
+        return this.setList.find(it=>it.set == qrs) != null;
+    }
+    addSet(qrs, isVisible = true) {
+        if (!this.hasSet(qrs)) {
+            const qrl = new QuickReplySetLink();
+            qrl.set = qrs;
+            qrl.isVisible = isVisible;
+            this.hookQuickReplyLink(qrl);
+            this.setList.push(qrl);
+            this.setListDom.append(qrl.renderSettings(this.setList.length - 1));
+            this.update();
+        }
+    }
+    removeSet(qrs) {
+        const idx = this.setList.findIndex(it=>it.set == qrs);
+        if (idx > -1) {
+            this.setList.splice(idx, 1);
+            this.update();
+            this.updateSetListDom();
+        }
+    }
+
+
+
+
+    renderSettingsInto(/**@type {HTMLElement}*/root) {
+        /**@type {HTMLElement}*/
+        this.setListDom = root.querySelector('.qr--setList');
+        root.querySelector('.qr--setListAdd').addEventListener('click', ()=>{
+            const newSet = QuickReplySet.list.find(qr=>!this.setList.find(qrl=>qrl.set == qr));
+            if (newSet) {
+                this.addSet(newSet);
+            } else {
+                toastr.warning('All existing QR Sets have already been added.');
+            }
+        });
+        this.updateSetListDom();
+    }
+    updateSetListDom() {
+        this.setListDom.innerHTML = '';
+        // @ts-ignore
+        $(this.setListDom).sortable({
+            delay: getSortableDelay(),
+            stop: ()=>this.onSetListSort(),
+        });
+        this.setList.filter(it=>!it.set.isDeleted).forEach((qrl,idx)=>this.setListDom.append(qrl.renderSettings(idx)));
+    }
+
+
+    onSetListSort() {
+        this.setList = Array.from(this.setListDom.children).map((it,idx)=>{
+            const qrl = this.setList[Number(it.getAttribute('data-order'))];
+            qrl.index = idx;
+            it.setAttribute('data-order', String(idx));
+            return qrl;
+        });
+        this.update();
+    }
+
+
+
+
+    /**
+     * @param {QuickReplySetLink} qrl
+     */
+    hookQuickReplyLink(qrl) {
+        qrl.onDelete = ()=>this.deleteQuickReplyLink(qrl);
+        qrl.onUpdate = ()=>this.update();
+        qrl.onRequestEditSet = ()=>this.requestEditSet(qrl.set);
+    }
+
+    deleteQuickReplyLink(qrl) {
+        this.setList.splice(this.setList.indexOf(qrl), 1);
+        this.update();
+    }
+
+    update() {
+        if (this.onUpdate) {
+            this.onUpdate(this);
+        }
+    }
+
+    requestEditSet(qrs) {
+        if (this.onRequestEditSet) {
+            this.onRequestEditSet(qrs);
+        }
+    }
+
+    toJSON() {
+        return {
+            setList: this.setList,
+        };
+    }
+}

public/scripts/extensions/quick-reply/src/QuickReplyContextLink.js

@@ -0,0 +1,22 @@
+import { QuickReplySet } from './QuickReplySet.js';
+
+export class QuickReplyContextLink {
+    static from(props) {
+        props.set = QuickReplySet.get(props.set);
+        const x = Object.assign(new this(), props);
+        return x;
+    }
+
+
+
+
+    /**@type {QuickReplySet}*/ set;
+    /**@type {Boolean}*/ isChained = false;
+
+    toJSON() {
+        return {
+            set: this.set?.name,
+            isChained: this.isChained,
+        };
+    }
+}

public/scripts/extensions/quick-reply/src/QuickReplySet.js

@@ -0,0 +1,403 @@
+import { getRequestHeaders, substituteParams } from '../../../../script.js';
+import { Popup, POPUP_RESULT, POPUP_TYPE } from '../../../popup.js';
+import { executeSlashCommandsOnChatInput, executeSlashCommandsWithOptions } from '../../../slash-commands.js';
+import { SlashCommandScope } from '../../../slash-commands/SlashCommandScope.js';
+import { SlashCommandParser } from '../../../slash-commands/SlashCommandParser.js';
+import { debounceAsync, warn } from '../index.js';
+import { QuickReply } from './QuickReply.js';
+
+export class QuickReplySet {
+    /**@type {QuickReplySet[]}*/ static list = [];
+
+    static from(props) {
+        props.qrList = []; //props.qrList?.map(it=>QuickReply.from(it));
+        const instance = Object.assign(new this(), props);
+        // instance.init();
+        return instance;
+    }
+
+    /**
+     * @param {string} name - name of the QuickReplySet
+     */
+    static get(name) {
+        return this.list.find(it=>it.name == name);
+    }
+
+    /**@type {string}*/ name;
+    /**@type {boolean}*/ disableSend = false;
+    /**@type {boolean}*/ placeBeforeInput = false;
+    /**@type {boolean}*/ injectInput = false;
+    /**@type {string}*/ color = 'transparent';
+    /**@type {boolean}*/ onlyBorderColor = false;
+    /**@type {QuickReply[]}*/ qrList = [];
+    /**@type {number}*/ idIndex = 0;
+    /**@type {boolean}*/ isDeleted = false;
+    /**@type {function}*/ save;
+    /**@type {HTMLElement}*/ dom;
+    /**@type {HTMLElement}*/ settingsDom;
+
+    constructor() {
+        this.save = debounceAsync(()=>this.performSave(), 200);
+    }
+
+    init() {
+        this.qrList.forEach(qr=>this.hookQuickReply(qr));
+    }
+
+    unrender() {
+        this.dom?.remove();
+        this.dom = null;
+    }
+    render() {
+        this.unrender();
+        if (!this.dom) {
+            const root = document.createElement('div'); {
+                this.dom = root;
+                root.classList.add('qr--buttons');
+                this.updateColor();
+                this.qrList.filter(qr=>!qr.isHidden).forEach(qr=>{
+                    root.append(qr.render());
+                });
+            }
+        }
+        return this.dom;
+    }
+    rerender() {
+        if (!this.dom) return;
+        this.dom.innerHTML = '';
+        this.qrList.filter(qr=>!qr.isHidden).forEach(qr=>{
+            this.dom.append(qr.render());
+        });
+    }
+    updateColor() {
+        if (!this.dom) return;
+        if (this.color && this.color != 'transparent') {
+            this.dom.style.setProperty('--qr--color', this.color);
+            this.dom.classList.add('qr--color');
+            if (this.onlyBorderColor) {
+                this.dom.classList.add('qr--borderColor');
+            } else {
+                this.dom.classList.remove('qr--borderColor');
+            }
+        } else {
+            this.dom.style.setProperty('--qr--color', 'transparent');
+            this.dom.classList.remove('qr--color');
+            this.dom.classList.remove('qr--borderColor');
+        }
+    }
+
+    renderSettings() {
+        if (!this.settingsDom) {
+            this.settingsDom = document.createElement('div'); {
+                this.settingsDom.classList.add('qr--set-qrListContents');
+                this.qrList.forEach((qr,idx)=>{
+                    this.renderSettingsItem(qr, idx);
+                });
+            }
+        }
+        return this.settingsDom;
+    }
+    /**
+     *
+     * @param {QuickReply} qr
+     * @param {number} idx
+     */
+    renderSettingsItem(qr, idx) {
+        this.settingsDom.append(qr.renderSettings(idx));
+    }
+
+    /**
+     *
+     * @param {QuickReply} qr
+     */
+    async debug(qr) {
+        const parser = new SlashCommandParser();
+        const closure = parser.parse(qr.message, true, [], qr.abortController, qr.debugController);
+        closure.source = `${this.name}.${qr.label}`;
+        closure.onProgress = (done, total) => qr.updateEditorProgress(done, total);
+        closure.scope.setMacro('arg::*', '');
+        return (await closure.execute())?.pipe;
+    }
+
+    /**
+     *
+     * @param {QuickReply} qr The QR to execute.
+     * @param {object} options
+     * @param {string} [options.message] (null) altered message to be used
+     * @param {boolean} [options.isAutoExecute] (false) whether the execution is triggered by auto execute
+     * @param {boolean} [options.isEditor] (false) whether the execution is triggered by the QR editor
+     * @param {boolean} [options.isRun] (false) whether the execution is triggered by /run or /: (window.executeQuickReplyByName)
+     * @param {SlashCommandScope} [options.scope] (null) scope to be used when running the command
+     * @param {import('../../../slash-commands.js').ExecuteSlashCommandsOptions} [options.executionOptions] ({}) further execution options
+     * @returns
+     */
+    async executeWithOptions(qr, options = {}) {
+        options = Object.assign({
+            message:null,
+            isAutoExecute:false,
+            isEditor:false,
+            isRun:false,
+            scope:null,
+            executionOptions:{},
+        }, options);
+        const execOptions = options.executionOptions;
+        /**@type {HTMLTextAreaElement}*/
+        const ta = document.querySelector('#send_textarea');
+        const finalMessage = options.message ?? qr.message;
+        let input = ta.value;
+        if (!options.isAutoExecute && !options.isEditor && !options.isRun && this.injectInput && input.length > 0) {
+            if (this.placeBeforeInput) {
+                input = `${finalMessage} ${input}`;
+            } else {
+                input = `${input} ${finalMessage}`;
+            }
+        } else {
+            input = `${finalMessage} `;
+        }
+
+        if (input[0] == '/' && !this.disableSend) {
+            let result;
+            if (options.isAutoExecute || options.isRun) {
+                result = await executeSlashCommandsWithOptions(input, Object.assign(execOptions, {
+                    handleParserErrors: true,
+                    scope: options.scope,
+                    source: `${this.name}.${qr.label}`,
+                }));
+            } else if (options.isEditor) {
+                result = await executeSlashCommandsWithOptions(input, Object.assign(execOptions, {
+                    handleParserErrors: false,
+                    scope: options.scope,
+                    abortController: qr.abortController,
+                    source: `${this.name}.${qr.label}`,
+                    onProgress: (done, total) => qr.updateEditorProgress(done, total),
+                }));
+            } else {
+                result = await executeSlashCommandsOnChatInput(input, Object.assign(execOptions, {
+                    scope: options.scope,
+                    source: `${this.name}.${qr.label}`,
+                }));
+            }
+            return typeof result === 'object' ? result?.pipe : '';
+        }
+
+        ta.value = substituteParams(input);
+        ta.focus();
+
+        if (!this.disableSend) {
+            // @ts-ignore
+            document.querySelector('#send_but').click();
+        }
+    }
+
+    /**
+     * @param {QuickReply} qr
+     * @param {string} [message] - optional altered message to be used
+     * @param {SlashCommandScope} [scope] - optional scope to be used when running the command
+     */
+    async execute(qr, message = null, isAutoExecute = false, scope = null) {
+        return this.executeWithOptions(qr, {
+            message,
+            isAutoExecute,
+            scope,
+        });
+    }
+
+    addQuickReply(data = {}) {
+        const id = Math.max(this.idIndex, this.qrList.reduce((max,qr)=>Math.max(max,qr.id),0)) + 1;
+        data.id =
+        this.idIndex = id + 1;
+        const qr = QuickReply.from(data);
+        this.qrList.push(qr);
+        this.hookQuickReply(qr);
+        if (this.settingsDom) {
+            this.renderSettingsItem(qr, this.qrList.length - 1);
+        }
+        if (this.dom) {
+            this.dom.append(qr.render());
+        }
+        this.save();
+        return qr;
+    }
+
+    addQuickReplyFromText(qrJson) {
+        let data;
+        if (qrJson) {
+            try {
+                data = JSON.parse(qrJson ?? '{}');
+                delete data.id;
+            } catch {
+                // not JSON data
+            }
+            if (data) {
+                // JSON data
+                if (data.label === undefined || data.message === undefined) {
+                    // not a QR
+                    toastr.error('Not a QR.');
+                    return;
+                }
+            } else {
+                // no JSON, use plaintext as QR message
+                data = { message: qrJson };
+            }
+        } else {
+            data = {};
+        }
+        const newQr = this.addQuickReply(data);
+        return newQr;
+    }
+
+    /**
+     *
+     * @param {QuickReply} qr
+     */
+    hookQuickReply(qr) {
+        qr.onDebug = ()=>this.debug(qr);
+        qr.onExecute = (_, options)=>this.executeWithOptions(qr, options);
+        qr.onDelete = ()=>this.removeQuickReply(qr);
+        qr.onUpdate = ()=>this.save();
+        qr.onInsertBefore = (qrJson)=>{
+            this.addQuickReplyFromText(qrJson);
+            const newQr = this.qrList.pop();
+            this.qrList.splice(this.qrList.indexOf(qr), 0, newQr);
+            if (qr.settingsDom) {
+                qr.settingsDom.insertAdjacentElement('beforebegin', newQr.settingsDom);
+            }
+            this.save();
+        };
+        qr.onTransfer = async()=>{
+            /**@type {HTMLSelectElement} */
+            let sel;
+            let isCopy = false;
+            const dom = document.createElement('div'); {
+                dom.classList.add('qr--transferModal');
+                const title = document.createElement('h3'); {
+                    title.textContent = 'Transfer Quick Reply';
+                    dom.append(title);
+                }
+                const subTitle = document.createElement('h4'); {
+                    const entryName = qr.label;
+                    const bookName = this.name;
+                    subTitle.textContent = `${bookName}: ${entryName}`;
+                    dom.append(subTitle);
+                }
+                sel = document.createElement('select'); {
+                    sel.classList.add('qr--transferSelect');
+                    sel.setAttribute('autofocus', '1');
+                    const noOpt = document.createElement('option'); {
+                        noOpt.value = '';
+                        noOpt.textContent = '-- Select QR Set --';
+                        sel.append(noOpt);
+                    }
+                    for (const qrs of QuickReplySet.list) {
+                        const opt = document.createElement('option'); {
+                            opt.value = qrs.name;
+                            opt.textContent = qrs.name;
+                            sel.append(opt);
+                        }
+                    }
+                    sel.addEventListener('keyup', (evt)=>{
+                        if (evt.key == 'Shift') {
+                            (dlg.dom ?? dlg.dlg).classList.remove('qr--isCopy');
+                            return;
+                        }
+                    });
+                    sel.addEventListener('keydown', (evt)=>{
+                        if (evt.key == 'Shift') {
+                            (dlg.dom ?? dlg.dlg).classList.add('qr--isCopy');
+                            return;
+                        }
+                        if (!evt.ctrlKey && !evt.altKey && evt.key == 'Enter') {
+                            evt.preventDefault();
+                            if (evt.shiftKey) isCopy = true;
+                            dlg.completeAffirmative();
+                        }
+                    });
+                    dom.append(sel);
+                }
+                const hintP = document.createElement('p'); {
+                    const hint = document.createElement('small'); {
+                        hint.textContent = 'Type or arrows to select QR Set. Enter to transfer. Shift+Enter to copy.';
+                        hintP.append(hint);
+                    }
+                    dom.append(hintP);
+                }
+            }
+            const dlg = new Popup(dom, POPUP_TYPE.CONFIRM, null, { okButton:'Transfer', cancelButton:'Cancel' });
+            const copyBtn = document.createElement('div'); {
+                copyBtn.classList.add('qr--copy');
+                copyBtn.classList.add('menu_button');
+                copyBtn.textContent = 'Copy';
+                copyBtn.addEventListener('click', ()=>{
+                    isCopy = true;
+                    dlg.completeAffirmative();
+                });
+                (dlg.ok ?? dlg.okButton).insertAdjacentElement('afterend', copyBtn);
+            }
+            const prom = dlg.show();
+            sel.focus();
+            await prom;
+            if (dlg.result == POPUP_RESULT.AFFIRMATIVE) {
+                const qrs = QuickReplySet.list.find(it=>it.name == sel.value);
+                qrs.addQuickReply(qr.toJSON());
+                if (!isCopy) {
+                    qr.delete();
+                }
+            }
+        };
+    }
+
+    removeQuickReply(qr) {
+        this.qrList.splice(this.qrList.indexOf(qr), 1);
+        this.save();
+    }
+
+    toJSON() {
+        return {
+            version: 2,
+            name: this.name,
+            disableSend: this.disableSend,
+            placeBeforeInput: this.placeBeforeInput,
+            injectInput: this.injectInput,
+            color: this.color,
+            onlyBorderColor: this.onlyBorderColor,
+            qrList: this.qrList,
+            idIndex: this.idIndex,
+        };
+    }
+
+    async performSave() {
+        const response = await fetch('/api/quick-replies/save', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify(this),
+        });
+
+        if (response.ok) {
+            this.rerender();
+        } else {
+            warn(`Failed to save Quick Reply Set: ${this.name}`);
+            console.error('QR could not be saved', response);
+        }
+    }
+
+    async delete() {
+        const response = await fetch('/api/quick-replies/delete', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify(this),
+        });
+
+        if (response.ok) {
+            this.unrender();
+            const idx = QuickReplySet.list.indexOf(this);
+            if (idx > -1) {
+                QuickReplySet.list.splice(idx, 1);
+                this.isDeleted = true;
+            } else {
+                warn(`Deleted Quick Reply Set was not found in the list of sets: ${this.name}`);
+            }
+        } else {
+            warn(`Failed to delete Quick Reply Set: ${this.name}`);
+        }
+    }
+}

public/scripts/extensions/quick-reply/src/QuickReplySetLink.js

@@ -0,0 +1,129 @@
+import { QuickReplySet } from './QuickReplySet.js';
+
+export class QuickReplySetLink {
+    static from(props) {
+        props.set = QuickReplySet.get(props.set);
+        /**@type {QuickReplySetLink}*/
+        const instance = Object.assign(new this(), props);
+        return instance;
+    }
+
+
+
+
+    /**@type {QuickReplySet}*/ set;
+    /**@type {Boolean}*/ isVisible = true;
+
+    /**@type {Number}*/ index;
+
+    /**@type {Function}*/ onUpdate;
+    /**@type {Function}*/ onRequestEditSet;
+    /**@type {Function}*/ onDelete;
+
+    /**@type {HTMLElement}*/ settingsDom;
+
+
+
+
+    renderSettings(idx) {
+        this.index = idx;
+        const item = document.createElement('div'); {
+            this.settingsDom = item;
+            item.classList.add('qr--item');
+            item.setAttribute('data-order', String(this.index));
+            const drag = document.createElement('div'); {
+                drag.classList.add('drag-handle');
+                drag.classList.add('ui-sortable-handle');
+                drag.textContent = '☰';
+                item.append(drag);
+            }
+            const set = document.createElement('select'); {
+                set.classList.add('qr--set');
+                // fix for jQuery sortable breaking childrens' touch events
+                set.addEventListener('touchstart', (evt)=>evt.stopPropagation());
+                set.addEventListener('change', ()=>{
+                    this.set = QuickReplySet.get(set.value);
+                    this.update();
+                });
+                QuickReplySet.list.toSorted((a,b)=>a.name.toLowerCase().localeCompare(b.name.toLowerCase())).forEach(qrs=>{
+                    const opt = document.createElement('option'); {
+                        opt.value = qrs.name;
+                        opt.textContent = qrs.name;
+                        opt.selected = qrs == this.set;
+                        set.append(opt);
+                    }
+                });
+                item.append(set);
+            }
+            const visible = document.createElement('label'); {
+                visible.classList.add('qr--visible');
+                visible.title = 'Show buttons';
+                const cb = document.createElement('input'); {
+                    cb.type = 'checkbox';
+                    cb.checked = this.isVisible;
+                    cb.addEventListener('click', ()=>{
+                        this.isVisible = cb.checked;
+                        this.update();
+                    });
+                    visible.append(cb);
+                }
+                visible.append('Buttons');
+                item.append(visible);
+            }
+            const edit = document.createElement('div'); {
+                edit.classList.add('menu_button');
+                edit.classList.add('menu_button_icon');
+                edit.classList.add('fa-solid');
+                edit.classList.add('fa-pencil');
+                edit.title = 'Edit quick reply set';
+                edit.addEventListener('click', ()=>this.requestEditSet());
+                item.append(edit);
+            }
+            const del = document.createElement('div'); {
+                del.classList.add('qr--del');
+                del.classList.add('menu_button');
+                del.classList.add('menu_button_icon');
+                del.classList.add('fa-solid');
+                del.classList.add('fa-trash-can');
+                del.title = 'Remove quick reply set';
+                del.addEventListener('click', ()=>this.delete());
+                item.append(del);
+            }
+        }
+        return this.settingsDom;
+    }
+    unrenderSettings() {
+        this.settingsDom?.remove();
+        this.settingsDom = null;
+    }
+
+
+
+
+    update() {
+        if (this.onUpdate) {
+            this.onUpdate(this);
+        }
+    }
+    requestEditSet() {
+        if (this.onRequestEditSet) {
+            this.onRequestEditSet(this.set);
+        }
+    }
+    delete() {
+        this.unrenderSettings();
+        if (this.onDelete) {
+            this.onDelete();
+        }
+    }
+
+
+
+
+    toJSON() {
+        return {
+            set: this.set.name,
+            isVisible: this.isVisible,
+        };
+    }
+}

public/scripts/extensions/quick-reply/src/QuickReplySettings.js

@@ -0,0 +1,87 @@
+import { chat_metadata, saveChatDebounced, saveSettingsDebounced } from '../../../../script.js';
+import { extension_settings } from '../../../extensions.js';
+import { QuickReplyConfig } from './QuickReplyConfig.js';
+
+export class QuickReplySettings {
+    static from(props) {
+        props.config = QuickReplyConfig.from(props.config);
+        const instance = Object.assign(new this(), props);
+        instance.init();
+        return instance;
+    }
+
+
+
+
+    /**@type {Boolean}*/ isEnabled = false;
+    /**@type {Boolean}*/ isCombined = false;
+    /**@type {Boolean}*/ isPopout = false;
+    /**@type {Boolean}*/ showPopoutButton = true;
+    /**@type {QuickReplyConfig}*/ config;
+    /**@type {QuickReplyConfig}*/ _chatConfig;
+    get chatConfig() {
+        return this._chatConfig;
+    }
+    set chatConfig(value) {
+        if (this._chatConfig != value) {
+            this.unhookConfig(this._chatConfig);
+            this._chatConfig = value;
+            this.hookConfig(this._chatConfig);
+        }
+    }
+
+    /**@type {Function}*/ onSave;
+    /**@type {Function}*/ onRequestEditSet;
+
+
+
+
+    init() {
+        this.hookConfig(this.config);
+        this.hookConfig(this.chatConfig);
+    }
+
+    hookConfig(config) {
+        if (config) {
+            config.onUpdate = ()=>this.save();
+            config.onRequestEditSet = (qrs)=>this.requestEditSet(qrs);
+        }
+    }
+    unhookConfig(config) {
+        if (config) {
+            config.onUpdate = null;
+            config.onRequestEditSet = null;
+        }
+    }
+
+
+
+
+    save() {
+        extension_settings.quickReplyV2 = this.toJSON();
+        saveSettingsDebounced();
+        if (this.chatConfig) {
+            chat_metadata.quickReply = this.chatConfig.toJSON();
+            saveChatDebounced();
+        }
+        if (this.onSave) {
+            this.onSave();
+        }
+    }
+
+    requestEditSet(qrs) {
+        if (this.onRequestEditSet) {
+            this.onRequestEditSet(qrs);
+        }
+    }
+
+    toJSON() {
+        return {
+            isEnabled: this.isEnabled,
+            isCombined: this.isCombined,
+            isPopout: this.isPopout,
+            showPopoutButton: this.showPopoutButton,
+            config: this.config,
+        };
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ButtonUi.js

@@ -0,0 +1,163 @@
+import { animation_duration } from '../../../../../script.js';
+import { dragElement } from '../../../../RossAscends-mods.js';
+import { loadMovingUIState } from '../../../../power-user.js';
+import { QuickReplySettings } from '../QuickReplySettings.js';
+
+export class ButtonUi {
+    /** @type {QuickReplySettings} */ settings;
+
+    /**@type {HTMLElement}*/ dom;
+    /**@type {HTMLElement}*/ popoutDom;
+
+
+
+
+    constructor(/**@type {QuickReplySettings}*/settings) {
+        this.settings = settings;
+    }
+
+
+
+
+    render() {
+        if (this.settings.isPopout) {
+            return this.renderPopout();
+        }
+        return this.renderBar();
+    }
+    unrender() {
+        this.dom?.remove();
+        this.dom = null;
+        this.popoutDom?.remove();
+        this.popoutDom = null;
+    }
+
+    show() {
+        if (!this.settings.isEnabled) return;
+        if (this.settings.isPopout) {
+            document.body.append(this.render());
+            loadMovingUIState();
+            $(this.render()).fadeIn(animation_duration);
+            dragElement($(this.render()));
+        } else {
+            const sendForm = document.querySelector('#send_form');
+            if (sendForm.children.length > 0) {
+                sendForm.children[0].insertAdjacentElement('beforebegin', this.render());
+            } else {
+                sendForm.append(this.render());
+            }
+        }
+    }
+    hide() {
+        this.unrender();
+    }
+    refresh() {
+        this.hide();
+        this.show();
+    }
+
+
+
+
+    renderBar() {
+        if (!this.dom) {
+            let buttonHolder;
+            const root = document.createElement('div'); {
+                this.dom = root;
+                buttonHolder = root;
+                root.id = 'qr--bar';
+                root.classList.add('flex-container');
+                root.classList.add('flexGap5');
+                if (this.settings.showPopoutButton) {
+                    root.classList.add('popoutVisible');
+                    const popout = document.createElement('div'); {
+                        popout.id = 'qr--popoutTrigger';
+                        popout.classList.add('menu_button');
+                        popout.classList.add('fa-solid');
+                        popout.classList.add('fa-window-restore');
+                        popout.addEventListener('click', ()=>{
+                            this.settings.isPopout = true;
+                            this.refresh();
+                            this.settings.save();
+                        });
+                        root.append(popout);
+                    }
+                }
+                if (this.settings.isCombined) {
+                    const buttons = document.createElement('div'); {
+                        buttonHolder = buttons;
+                        buttons.classList.add('qr--buttons');
+                        root.append(buttons);
+                    }
+                }
+                [...this.settings.config.setList, ...(this.settings.chatConfig?.setList ?? [])]
+                    .filter(link=>link.isVisible)
+                    .forEach(link=>buttonHolder.append(link.set.render()))
+                ;
+            }
+        }
+        return this.dom;
+    }
+
+
+
+
+    renderPopout() {
+        if (!this.popoutDom) {
+            let buttonHolder;
+            const root = document.createElement('div'); {
+                this.popoutDom = root;
+                root.id = 'qr--popout';
+                root.classList.add('qr--popout');
+                root.classList.add('draggable');
+                const head = document.createElement('div'); {
+                    head.classList.add('qr--header');
+                    root.append(head);
+                    const controls = document.createElement('div'); {
+                        controls.classList.add('qr--controls');
+                        controls.classList.add('panelControlBar');
+                        controls.classList.add('flex-container');
+                        const drag = document.createElement('div'); {
+                            drag.id = 'qr--popoutheader';
+                            drag.classList.add('fa-solid');
+                            drag.classList.add('fa-grip');
+                            drag.classList.add('drag-grabber');
+                            drag.classList.add('hoverglow');
+                            controls.append(drag);
+                        }
+                        const close = document.createElement('div'); {
+                            close.classList.add('qr--close');
+                            close.classList.add('fa-solid');
+                            close.classList.add('fa-circle-xmark');
+                            close.classList.add('hoverglow');
+                            close.addEventListener('click', ()=>{
+                                this.settings.isPopout = false;
+                                this.refresh();
+                                this.settings.save();
+                            });
+                            controls.append(close);
+                        }
+                        head.append(controls);
+                    }
+                }
+                const body = document.createElement('div'); {
+                    buttonHolder = body;
+                    body.classList.add('qr--body');
+                    if (this.settings.isCombined) {
+                        const buttons = document.createElement('div'); {
+                            buttonHolder = buttons;
+                            buttons.classList.add('qr--buttons');
+                            body.append(buttons);
+                        }
+                    }
+                    [...this.settings.config.setList, ...(this.settings.chatConfig?.setList ?? [])]
+                        .filter(link=>link.isVisible)
+                        .forEach(link=>buttonHolder.append(link.set.render()))
+                    ;
+                    root.append(body);
+                }
+            }
+        }
+        return this.popoutDom;
+    }
+}

public/scripts/extensions/quick-reply/src/ui/SettingsUi.js

@@ -0,0 +1,503 @@
+import { Popup } from '../../../../popup.js';
+import { getSortableDelay } from '../../../../utils.js';
+import { log, warn } from '../../index.js';
+import { QuickReply } from '../QuickReply.js';
+import { QuickReplySet } from '../QuickReplySet.js';
+import { QuickReplySettings } from '../QuickReplySettings.js';
+
+export class SettingsUi {
+    /** @type {QuickReplySettings} */ settings;
+
+    /** @type {HTMLElement} */ template;
+    /** @type {HTMLElement} */ dom;
+
+    /**@type {HTMLInputElement}*/ isEnabled;
+    /**@type {HTMLInputElement}*/ isCombined;
+    /**@type {HTMLInputElement}*/ showPopoutButton;
+
+    /**@type {HTMLElement}*/ globalSetList;
+
+    /**@type {HTMLElement}*/ chatSetList;
+
+    /**@type {QuickReplySet}*/ currentQrSet;
+    /**@type {HTMLInputElement}*/ disableSend;
+    /**@type {HTMLInputElement}*/ placeBeforeInput;
+    /**@type {HTMLInputElement}*/ injectInput;
+    /**@type {HTMLInputElement}*/ color;
+    /**@type {HTMLInputElement}*/ onlyBorderColor;
+    /**@type {HTMLSelectElement}*/ currentSet;
+
+
+
+
+    constructor(/**@type {QuickReplySettings}*/settings) {
+        this.settings = settings;
+        settings.onRequestEditSet = (qrs) => this.selectQrSet(qrs);
+    }
+
+
+
+
+
+
+    rerender() {
+        if (!this.dom) return;
+        const content = this.dom.querySelector('.inline-drawer-content');
+        content.innerHTML = '';
+        // @ts-ignore
+        Array.from(this.template.querySelector('.inline-drawer-content').cloneNode(true).children).forEach(el=>{
+            content.append(el);
+        });
+        this.prepareDom();
+    }
+    unrender() {
+        this.dom?.remove();
+        this.dom = null;
+    }
+    async render() {
+        if (!this.dom) {
+            const response = await fetch('/scripts/extensions/quick-reply/html/settings.html', { cache: 'no-store' });
+            if (response.ok) {
+                this.template = document.createRange().createContextualFragment(await response.text()).querySelector('#qr--settings');
+                // @ts-ignore
+                this.dom = this.template.cloneNode(true);
+                this.prepareDom();
+            } else {
+                warn('failed to fetch settings template');
+            }
+        }
+        return this.dom;
+    }
+
+
+    prepareGeneralSettings() {
+        // general settings
+        this.isEnabled = this.dom.querySelector('#qr--isEnabled');
+        this.isEnabled.checked = this.settings.isEnabled;
+        this.isEnabled.addEventListener('click', ()=>this.onIsEnabled());
+
+        this.isCombined = this.dom.querySelector('#qr--isCombined');
+        this.isCombined.checked = this.settings.isCombined;
+        this.isCombined.addEventListener('click', ()=>this.onIsCombined());
+
+        this.showPopoutButton = this.dom.querySelector('#qr--showPopoutButton');
+        this.showPopoutButton.checked = this.settings.showPopoutButton;
+        this.showPopoutButton.addEventListener('click', ()=>this.onShowPopoutButton());
+    }
+
+    prepareGlobalSetList() {
+        const dom = this.template.querySelector('#qr--global');
+        const clone = dom.cloneNode(true);
+        // @ts-ignore
+        this.settings.config.renderSettingsInto(clone);
+        this.dom.querySelector('#qr--global').replaceWith(clone);
+    }
+    prepareChatSetList() {
+        const dom = this.template.querySelector('#qr--chat');
+        const clone = dom.cloneNode(true);
+        if (this.settings.chatConfig) {
+            // @ts-ignore
+            this.settings.chatConfig.renderSettingsInto(clone);
+        } else {
+            const info = document.createElement('div'); {
+                info.textContent = 'No active chat.';
+                // @ts-ignore
+                clone.append(info);
+            }
+        }
+        this.dom.querySelector('#qr--chat').replaceWith(clone);
+    }
+
+    prepareQrEditor() {
+        // qr editor
+        this.dom.querySelector('#qr--set-rename').addEventListener('click', async () => this.renameQrSet());
+        this.dom.querySelector('#qr--set-new').addEventListener('click', async()=>this.addQrSet());
+        /**@type {HTMLInputElement}*/
+        const importFile = this.dom.querySelector('#qr--set-importFile');
+        importFile.addEventListener('change', async()=>{
+            await this.importQrSet(importFile.files);
+            importFile.value = null;
+        });
+        this.dom.querySelector('#qr--set-import').addEventListener('click', ()=>importFile.click());
+        this.dom.querySelector('#qr--set-export').addEventListener('click', async () => this.exportQrSet());
+        this.dom.querySelector('#qr--set-duplicate').addEventListener('click', async () => this.duplicateQrSet());
+        this.dom.querySelector('#qr--set-delete').addEventListener('click', async()=>this.deleteQrSet());
+        this.dom.querySelector('#qr--set-add').addEventListener('click', async()=>{
+            this.currentQrSet.addQuickReply();
+        });
+        this.dom.querySelector('#qr--set-paste').addEventListener('click', async()=>{
+            const text = await navigator.clipboard.readText();
+            this.currentQrSet.addQuickReplyFromText(text);
+        });
+        this.dom.querySelector('#qr--set-importQr').addEventListener('click', async()=>{
+            const inp = document.createElement('input'); {
+                inp.type = 'file';
+                inp.accept = '.json';
+                inp.addEventListener('change', async()=>{
+                    if (inp.files.length > 0) {
+                        for (const file of inp.files) {
+                            const text = await file.text();
+                            this.currentQrSet.addQuickReply(JSON.parse(text));
+                        }
+                    }
+                });
+                inp.click();
+            }
+        });
+        this.qrList = this.dom.querySelector('#qr--set-qrList');
+        this.currentSet = this.dom.querySelector('#qr--set');
+        this.currentSet.addEventListener('change', ()=>this.onQrSetChange());
+        QuickReplySet.list.toSorted((a,b)=>a.name.toLowerCase().localeCompare(b.name.toLowerCase())).forEach(qrs=>{
+            const opt = document.createElement('option'); {
+                opt.value = qrs.name;
+                opt.textContent = qrs.name;
+                this.currentSet.append(opt);
+            }
+        });
+        this.disableSend = this.dom.querySelector('#qr--disableSend');
+        this.disableSend.addEventListener('click', ()=>{
+            const qrs = this.currentQrSet;
+            qrs.disableSend = this.disableSend.checked;
+            qrs.save();
+        });
+        this.placeBeforeInput = this.dom.querySelector('#qr--placeBeforeInput');
+        this.placeBeforeInput.addEventListener('click', ()=>{
+            const qrs = this.currentQrSet;
+            qrs.placeBeforeInput = this.placeBeforeInput.checked;
+            qrs.save();
+        });
+        this.injectInput = this.dom.querySelector('#qr--injectInput');
+        this.injectInput.addEventListener('click', ()=>{
+            const qrs = this.currentQrSet;
+            qrs.injectInput = this.injectInput.checked;
+            qrs.save();
+        });
+        let initialColorChange = true;
+        this.color = this.dom.querySelector('#qr--color');
+        this.color.color = this.currentQrSet?.color ?? 'transparent';
+        this.color.addEventListener('change', (evt)=>{
+            if (!this.dom.closest('body')) return;
+            const qrs = this.currentQrSet;
+            if (initialColorChange) {
+                initialColorChange = false;
+                this.color.color = qrs.color;
+                return;
+            }
+            qrs.color = evt.detail.rgb;
+            qrs.save();
+            this.currentQrSet.updateColor();
+        });
+        this.dom.querySelector('#qr--colorClear').addEventListener('click', (evt)=>{
+            const qrs = this.currentQrSet;
+            this.color.color = 'transparent';
+            qrs.save();
+            this.currentQrSet.updateColor();
+        });
+        this.onlyBorderColor = this.dom.querySelector('#qr--onlyBorderColor');
+        this.onlyBorderColor.addEventListener('click', ()=>{
+            const qrs = this.currentQrSet;
+            qrs.onlyBorderColor = this.onlyBorderColor.checked;
+            qrs.save();
+            this.currentQrSet.updateColor();
+        });
+        this.onQrSetChange();
+    }
+    onQrSetChange() {
+        this.currentQrSet = QuickReplySet.get(this.currentSet.value) ?? new QuickReplySet();
+        this.disableSend.checked = this.currentQrSet.disableSend;
+        this.placeBeforeInput.checked = this.currentQrSet.placeBeforeInput;
+        this.injectInput.checked = this.currentQrSet.injectInput;
+        this.color.color = this.currentQrSet.color ?? 'transparent';
+        this.onlyBorderColor.checked = this.currentQrSet.onlyBorderColor;
+        this.qrList.innerHTML = '';
+        const qrsDom = this.currentQrSet.renderSettings();
+        this.qrList.append(qrsDom);
+        // @ts-ignore
+        $(qrsDom).sortable({
+            delay: getSortableDelay(),
+            handle: '.drag-handle',
+            stop: ()=>this.onQrListSort(),
+        });
+    }
+
+
+    prepareDom() {
+        this.prepareGeneralSettings();
+        this.prepareGlobalSetList();
+        this.prepareChatSetList();
+        this.prepareQrEditor();
+    }
+
+
+
+
+    async onIsEnabled() {
+        this.settings.isEnabled = this.isEnabled.checked;
+        this.settings.save();
+    }
+
+    async onIsCombined() {
+        this.settings.isCombined = this.isCombined.checked;
+        this.settings.save();
+    }
+
+    async onShowPopoutButton() {
+        this.settings.showPopoutButton = this.showPopoutButton.checked;
+        this.settings.save();
+    }
+
+    async onGlobalSetListSort() {
+        this.settings.config.setList = Array.from(this.globalSetList.children).map((it,idx)=>{
+            const set = this.settings.config.setList[Number(it.getAttribute('data-order'))];
+            it.setAttribute('data-order', String(idx));
+            return set;
+        });
+        this.settings.save();
+    }
+
+    async onChatSetListSort() {
+        this.settings.chatConfig.setList = Array.from(this.chatSetList.children).map((it,idx)=>{
+            const set = this.settings.chatConfig.setList[Number(it.getAttribute('data-order'))];
+            it.setAttribute('data-order', String(idx));
+            return set;
+        });
+        this.settings.save();
+    }
+
+    updateOrder(list) {
+        Array.from(list.children).forEach((it,idx)=>{
+            it.setAttribute('data-order', idx);
+        });
+    }
+
+    async onQrListSort() {
+        this.currentQrSet.qrList = Array.from(this.qrList.querySelectorAll('.qr--set-item')).map((it,idx)=>{
+            const qr = this.currentQrSet.qrList.find(qr=>qr.id == Number(it.getAttribute('data-id')));
+            it.setAttribute('data-order', String(idx));
+            return qr;
+        });
+        this.currentQrSet.save();
+    }
+
+    async deleteQrSet() {
+        const confirmed = await Popup.show.confirm('Delete Quick Reply Set', `Are you sure you want to delete the Quick Reply Set "${this.currentQrSet.name}"?<br>This cannot be undone.`);
+        if (confirmed) {
+            await this.doDeleteQrSet(this.currentQrSet);
+            this.rerender();
+        }
+    }
+    async doDeleteQrSet(qrs) {
+        await qrs.delete();
+        //TODO (HACK) should just bubble up from QuickReplySet.delete() but that would require proper or at least more comples onDelete listeners
+        for (let i = this.settings.config.setList.length - 1; i >= 0; i--) {
+            if (this.settings.config.setList[i].set == qrs) {
+                this.settings.config.setList.splice(i, 1);
+            }
+        }
+        if (this.settings.chatConfig) {
+            for (let i = this.settings.chatConfig.setList.length - 1; i >= 0; i--) {
+                if (this.settings.chatConfig.setList[i].set == qrs) {
+                    this.settings.chatConfig.setList.splice(i, 1);
+                }
+            }
+        }
+        this.settings.save();
+    }
+
+    async renameQrSet() {
+        const newName = await Popup.show.input('Rename Quick Reply Set', 'Enter a new name:', this.currentQrSet.name);
+        if (newName && newName.length > 0) {
+            const existingSet = QuickReplySet.get(newName);
+            if (existingSet) {
+                toastr.error(`A Quick Reply Set named "${newName}" already exists.`);
+                return;
+            }
+            const oldName = this.currentQrSet.name;
+            this.currentQrSet.name = newName;
+            await this.currentQrSet.save();
+
+            // Update it in both set lists
+            this.settings.config.setList.forEach(set => {
+                if (set.set.name === oldName) {
+                    set.set.name = newName;
+                }
+            });
+            this.settings.chatConfig?.setList.forEach(set => {
+                if (set.set.name === oldName) {
+                    set.set.name = newName;
+                }
+            });
+            this.settings.save();
+
+            // Update the option in the current selected QR dropdown. All others will be refreshed via the prepare calls below.
+            /** @type {HTMLOptionElement} */
+            const option = this.currentSet.querySelector(`#qr--set option[value="${oldName}"]`);
+            option.value = newName;
+            option.textContent = newName;
+
+            this.currentSet.value = newName;
+            this.onQrSetChange();
+            this.prepareGlobalSetList();
+            this.prepareChatSetList();
+
+            console.info(`Quick Reply Set renamed from ""${oldName}" to "${newName}".`);
+        }
+    }
+
+    async addQrSet() {
+        const name = await Popup.show.input('Create a new Quick Reply Set', 'Enter a name for the new Quick Reply Set:');
+        if (name && name.length > 0) {
+            const oldQrs = QuickReplySet.get(name);
+            if (oldQrs) {
+                const replace = Popup.show.confirm('Replace existing World Info', `A Quick Reply Set named "${name}" already exists.<br>Do you want to overwrite the existing Quick Reply Set?<br>The existing set will be deleted. This cannot be undone.`);
+                if (replace) {
+                    const idx = QuickReplySet.list.indexOf(oldQrs);
+                    await this.doDeleteQrSet(oldQrs);
+                    const qrs = new QuickReplySet();
+                    qrs.name = name;
+                    qrs.addQuickReply();
+                    QuickReplySet.list.splice(idx, 0, qrs);
+                    this.rerender();
+                    this.currentSet.value = name;
+                    this.onQrSetChange();
+                    this.prepareGlobalSetList();
+                    this.prepareChatSetList();
+                }
+            } else {
+                const qrs = new QuickReplySet();
+                qrs.name = name;
+                qrs.addQuickReply();
+                const idx = QuickReplySet.list.findIndex(it=>it.name.toLowerCase().localeCompare(name.toLowerCase()) == 1);
+                if (idx > -1) {
+                    QuickReplySet.list.splice(idx, 0, qrs);
+                } else {
+                    QuickReplySet.list.push(qrs);
+                }
+                const opt = document.createElement('option'); {
+                    opt.value = qrs.name;
+                    opt.textContent = qrs.name;
+                    if (idx > -1) {
+                        this.currentSet.children[idx].insertAdjacentElement('beforebegin', opt);
+                    } else {
+                        this.currentSet.append(opt);
+                    }
+                }
+                this.currentSet.value = name;
+                this.onQrSetChange();
+                this.prepareGlobalSetList();
+                this.prepareChatSetList();
+            }
+        }
+    }
+
+    async importQrSet(/**@type {FileList}*/files) {
+        for (let i = 0; i < files.length; i++) {
+            await this.importSingleQrSet(files.item(i));
+        }
+    }
+    async importSingleQrSet(/**@type {File}*/file) {
+        log('FILE', file);
+        try {
+            const text = await file.text();
+            const props = JSON.parse(text);
+            if (!Number.isInteger(props.version) || typeof props.name != 'string') {
+                toastr.error(`The file "${file.name}" does not appear to be a valid quick reply set.`);
+                warn(`The file "${file.name}" does not appear to be a valid quick reply set.`);
+            } else {
+                /**@type {QuickReplySet}*/
+                const qrs = QuickReplySet.from(JSON.parse(JSON.stringify(props)));
+                qrs.qrList = props.qrList.map(it=>QuickReply.from(it));
+                qrs.init();
+                const oldQrs = QuickReplySet.get(props.name);
+                if (oldQrs) {
+                    const replace = Popup.show.confirm('Replace existing World Info', `A Quick Reply Set named "${name}" already exists.<br>Do you want to overwrite the existing Quick Reply Set?<br>The existing set will be deleted. This cannot be undone.`);
+                    if (replace) {
+                        const idx = QuickReplySet.list.indexOf(oldQrs);
+                        await this.doDeleteQrSet(oldQrs);
+                        QuickReplySet.list.splice(idx, 0, qrs);
+                        await qrs.save();
+                        this.rerender();
+                        this.currentSet.value = qrs.name;
+                        this.onQrSetChange();
+                        this.prepareGlobalSetList();
+                        this.prepareChatSetList();
+                    }
+                } else {
+                    const idx = QuickReplySet.list.findIndex(it=>it.name.toLowerCase().localeCompare(qrs.name.toLowerCase()) == 1);
+                    if (idx > -1) {
+                        QuickReplySet.list.splice(idx, 0, qrs);
+                    } else {
+                        QuickReplySet.list.push(qrs);
+                    }
+                    await qrs.save();
+                    const opt = document.createElement('option'); {
+                        opt.value = qrs.name;
+                        opt.textContent = qrs.name;
+                        if (idx > -1) {
+                            this.currentSet.children[idx].insertAdjacentElement('beforebegin', opt);
+                        } else {
+                            this.currentSet.append(opt);
+                        }
+                    }
+                    this.currentSet.value = qrs.name;
+                    this.onQrSetChange();
+                    this.prepareGlobalSetList();
+                    this.prepareChatSetList();
+                }
+            }
+        } catch (ex) {
+            warn(ex);
+            toastr.error(`Failed to import "${file.name}":\n\n${ex.message}`);
+        }
+    }
+
+    exportQrSet() {
+        const blob = new Blob([JSON.stringify(this.currentQrSet)], { type:'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a'); {
+            a.href = url;
+            a.download = `${this.currentQrSet.name}.json`;
+            a.click();
+        }
+        URL.revokeObjectURL(url);
+    }
+
+    async duplicateQrSet() {
+        const newName = await Popup.show.input('Duplicate Quick Reply Set', 'Enter a name for the new Quick Reply Set:', `${this.currentQrSet.name} (Copy)`);
+        if (newName && newName.length > 0) {
+            const existingSet = QuickReplySet.get(newName);
+            if (existingSet) {
+                toastr.error(`A Quick Reply Set named "${newName}" already exists.`);
+                return;
+            }
+            const newQrSet = QuickReplySet.from(JSON.parse(JSON.stringify(this.currentQrSet)));
+            newQrSet.name = newName;
+            newQrSet.qrList = this.currentQrSet.qrList.map(qr => QuickReply.from(JSON.parse(JSON.stringify(qr))));
+            newQrSet.addQuickReply();
+            const idx = QuickReplySet.list.findIndex(it => it.name.toLowerCase().localeCompare(newName.toLowerCase()) == 1);
+            if (idx > -1) {
+                QuickReplySet.list.splice(idx, 0, newQrSet);
+            } else {
+                QuickReplySet.list.push(newQrSet);
+            }
+            const opt = document.createElement('option'); {
+                opt.value = newQrSet.name;
+                opt.textContent = newQrSet.name;
+                if (idx > -1) {
+                    this.currentSet.children[idx].insertAdjacentElement('beforebegin', opt);
+                } else {
+                    this.currentSet.append(opt);
+                }
+            }
+            this.currentSet.value = newName;
+            this.onQrSetChange();
+            this.prepareGlobalSetList();
+            this.prepareChatSetList();
+        }
+    }
+
+    selectQrSet(qrs) {
+        this.currentSet.value = qrs.name;
+        this.onQrSetChange();
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ctx/ContextMenu.js

@@ -0,0 +1,130 @@
+import { QuickReply } from '../../QuickReply.js';
+import { QuickReplySet } from '../../QuickReplySet.js';
+import { MenuHeader } from './MenuHeader.js';
+import { MenuItem } from './MenuItem.js';
+
+export class ContextMenu {
+    /**@type {MenuItem[]}*/ itemList = [];
+    /**@type {Boolean}*/ isActive = false;
+
+    /**@type {HTMLElement}*/ root;
+    /**@type {HTMLElement}*/ menu;
+
+
+
+
+    constructor(/**@type {QuickReply}*/qr) {
+        // this.itemList = items;
+        this.itemList = this.build(qr).children;
+        this.itemList.forEach(item => {
+            item.onExpand = () => {
+                this.itemList.filter(it => it !== item)
+                    .forEach(it => it.collapse());
+            };
+        });
+    }
+
+    /**
+     * @param {QuickReply} qr
+     * @param {String} chainedMessage
+     * @param {QuickReplySet[]} hierarchy
+     * @param {String[]} labelHierarchy
+     */
+    build(qr, chainedMessage = null, hierarchy = [], labelHierarchy = []) {
+        const tree = {
+            icon: qr.icon,
+            showLabel: qr.showLabel,
+            label: qr.label,
+            title: qr.title,
+            message: (chainedMessage && qr.message ? `${chainedMessage} | ` : '') + qr.message,
+            children: [],
+        };
+        qr.contextList.forEach((cl) => {
+            if (!cl.set) return;
+            if (!hierarchy.includes(cl.set)) {
+                const nextHierarchy = [...hierarchy, cl.set];
+                const nextLabelHierarchy = [...labelHierarchy, tree.label];
+                tree.children.push(new MenuHeader(cl.set.name));
+
+                // If the Quick Reply's own set is added as a context menu,
+                // show only the sub-QRs that are Invisible but have an icon
+                // intent: allow a QR set to be assigned to one of its own QR buttons for a "burger" menu
+                // with "UI" QRs either in the bar or in the menu, and "library function" QRs still hidden.
+                // - QRs already visible on the bar are filtered out,
+                // - hidden QRs without an icon are filtered out,
+                // - hidden QRs **with an icon** are shown in the menu
+                // so everybody is happy
+                const qrsOwnSetAddedAsContextMenu = cl.set.qrList.includes(qr);
+                const visible = (subQr) => {
+                    return qrsOwnSetAddedAsContextMenu
+                        ? subQr.isHidden && !!subQr.icon  // yes .isHidden gets inverted here
+                        : !subQr.isHidden;
+                };
+
+                cl.set.qrList.filter(visible).forEach(subQr => {
+                    const subTree = this.build(subQr, cl.isChained ? tree.message : null, nextHierarchy, nextLabelHierarchy);
+                    tree.children.push(new MenuItem(
+                        subTree.icon,
+                        subTree.showLabel,
+                        subTree.label,
+                        subTree.title,
+                        subTree.message,
+                        (evt) => {
+                            evt.stopPropagation();
+                            const finalQr = Object.assign(new QuickReply(), subQr);
+                            finalQr.message = subTree.message.replace(/%%parent(-\d+)?%%/g, (_, index) => {
+                                return nextLabelHierarchy.slice(parseInt(index ?? '-1'))[0];
+                            });
+                            cl.set.execute(finalQr);
+                        },
+                        subTree.children,
+                    ));
+                });
+            }
+        });
+        return tree;
+    }
+
+    render() {
+        if (!this.root) {
+            const blocker = document.createElement('div'); {
+                this.root = blocker;
+                blocker.classList.add('ctx-blocker');
+                blocker.addEventListener('click', () => this.hide());
+                const menu = document.createElement('ul'); {
+                    this.menu = menu;
+                    menu.classList.add('list-group');
+                    menu.classList.add('ctx-menu');
+                    this.itemList.forEach(it => menu.append(it.render()));
+                    blocker.append(menu);
+                }
+            }
+        }
+        return this.root;
+    }
+
+
+
+
+    show({ clientX, clientY }) {
+        if (this.isActive) return;
+        this.isActive = true;
+        this.render();
+        this.menu.style.bottom = `${window.innerHeight - clientY}px`;
+        this.menu.style.left = `${clientX}px`;
+        document.body.append(this.root);
+    }
+    hide() {
+        if (this.root) {
+            this.root.remove();
+        }
+        this.isActive = false;
+    }
+    toggle(/**@type {PointerEvent}*/evt) {
+        if (this.isActive) {
+            this.hide();
+        } else {
+            this.show(evt);
+        }
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ctx/MenuHeader.js

@@ -0,0 +1,20 @@
+import { MenuItem } from './MenuItem.js';
+
+export class MenuHeader extends MenuItem {
+    constructor(/**@type {String}*/label) {
+        super(null, null, label, null, null, null, []);
+    }
+
+
+    render() {
+        if (!this.root) {
+            const item = document.createElement('li'); {
+                this.root = item;
+                item.classList.add('list-group-item');
+                item.classList.add('ctx-header');
+                item.append(this.label);
+            }
+        }
+        return this.root;
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ctx/MenuItem.js

@@ -0,0 +1,107 @@
+import { SubMenu } from './SubMenu.js';
+
+export class MenuItem {
+    /**@type {string}*/ icon;
+    /**@type {boolean}*/ showLabel;
+    /**@type {string}*/ label;
+    /**@type {string}*/ title;
+    /**@type {object}*/ value;
+    /**@type {function}*/ callback;
+    /**@type {MenuItem[]}*/ childList = [];
+    /**@type {SubMenu}*/ subMenu;
+
+    /**@type {HTMLElement}*/ root;
+
+    /**@type {function}*/ onExpand;
+
+
+
+
+    /**
+     *
+     * @param {?string} icon
+     * @param {?boolean} showLabel
+     * @param {string} label
+     * @param {?string} title Tooltip
+     * @param {object} value
+     * @param {function} callback
+     * @param {MenuItem[]} children
+     */
+    constructor(icon, showLabel, label, title, value, callback, children = []) {
+        this.icon = icon;
+        this.showLabel = showLabel;
+        this.label = label;
+        this.title = title;
+        this.value = value;
+        this.callback = callback;
+        this.childList = children;
+    }
+
+
+    render() {
+        if (!this.root) {
+            const item = document.createElement('li'); {
+                this.root = item;
+                item.classList.add('list-group-item');
+                item.classList.add('ctx-item');
+
+                // if a title/tooltip is set, add it, otherwise use the QR content
+                // same as for the main QR list
+                item.title = this.title || this.value;
+
+                if (this.callback) {
+                    item.addEventListener('click', (evt) => this.callback(evt, this));
+                }
+                const icon = document.createElement('div'); {
+                    icon.classList.add('qr--button-icon');
+                    icon.classList.add('fa-solid');
+                    if (!this.icon) icon.classList.add('qr--hidden');
+                    else icon.classList.add(this.icon);
+                    item.append(icon);
+                }
+                const lbl = document.createElement('div'); {
+                    lbl.classList.add('qr--button-label');
+                    if (this.icon && !this.showLabel) lbl.classList.add('qr--hidden');
+                    lbl.textContent = this.label;
+                    item.append(lbl);
+                }
+                if (this.childList.length > 0) {
+                    item.classList.add('ctx-has-children');
+                    const sub = new SubMenu(this.childList);
+                    this.subMenu = sub;
+                    const trigger = document.createElement('div'); {
+                        trigger.classList.add('ctx-expander');
+                        trigger.textContent = '⋮';
+                        trigger.addEventListener('click', (evt) => {
+                            evt.stopPropagation();
+                            this.toggle();
+                        });
+                        item.append(trigger);
+                    }
+                    item.addEventListener('mouseover', () => sub.show(item));
+                    item.addEventListener('mouseleave', () => sub.hide());
+
+                }
+            }
+        }
+        return this.root;
+    }
+
+
+    expand() {
+        this.subMenu?.show(this.root);
+        if (this.onExpand) {
+            this.onExpand();
+        }
+    }
+    collapse() {
+        this.subMenu?.hide();
+    }
+    toggle() {
+        if (this.subMenu.isActive) {
+            this.expand();
+        } else {
+            this.collapse();
+        }
+    }
+}

public/scripts/extensions/quick-reply/src/ui/ctx/SubMenu.js

@@ -0,0 +1,66 @@
+/**
+ * @typedef {import('./MenuItem.js').MenuItem} MenuItem
+ */
+
+export class SubMenu {
+    /**@type {MenuItem[]}*/ itemList = [];
+    /**@type {Boolean}*/ isActive = false;
+
+    /**@type {HTMLElement}*/ root;
+
+
+
+
+    constructor(/**@type {MenuItem[]}*/items) {
+        this.itemList = items;
+    }
+
+    render() {
+        if (!this.root) {
+            const menu = document.createElement('ul'); {
+                this.root = menu;
+                menu.classList.add('list-group');
+                menu.classList.add('ctx-menu');
+                menu.classList.add('ctx-sub-menu');
+                this.itemList.forEach(it => menu.append(it.render()));
+            }
+        }
+        return this.root;
+    }
+
+
+
+
+    show(/**@type {HTMLElement}*/parent) {
+        if (this.isActive) return;
+        this.isActive = true;
+        this.render();
+        parent.append(this.root);
+        requestAnimationFrame(() => {
+            const rect = this.root.getBoundingClientRect();
+            console.log(window.innerHeight, rect);
+            if (rect.bottom > window.innerHeight - 5) {
+                this.root.style.top = `${window.innerHeight - 5 - rect.bottom}px`;
+            }
+            if (rect.right > window.innerWidth - 5) {
+                this.root.style.left = 'unset';
+                this.root.style.right = '100%';
+            }
+        });
+    }
+    hide() {
+        if (this.root) {
+            this.root.remove();
+            this.root.style.top = '';
+            this.root.style.left = '';
+        }
+        this.isActive = false;
+    }
+    toggle(/**@type {HTMLElement}*/parent) {
+        if (this.isActive) {
+            this.hide();
+        } else {
+            this.show(parent);
+        }
+    }
+}

public/scripts/extensions/regex/dropdown.html

@@ -0,0 +1,52 @@
+<div class="regex_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="ext_regex_title">
+                Regex
+            </b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <div class="flex-container">
+                <div id="open_regex_editor" class="menu_button menu_button_icon" data-i18n="[title]ext_regex_new_global_script_desc" title="New global regex script">
+                    <i class="fa-solid fa-pen-to-square"></i>
+                    <small data-i18n="ext_regex_new_global_script">+ Global</small>
+                </div>
+                <div id="open_scoped_editor" class="menu_button menu_button_icon" data-i18n="[title]ext_regex_new_scoped_script_desc" title="New scoped regex script">
+                    <i class="fa-solid fa-address-card"></i>
+                    <small data-i18n="ext_regex_new_scoped_script">+ Scoped</small>
+                </div>
+                <div id="import_regex" class="menu_button menu_button_icon">
+                    <i class="fa-solid fa-file-import"></i>
+                    <small data-i18n="ext_regex_import_script">Import</small>
+                </div>
+                <input type="file" id="import_regex_file" hidden accept="*.json" multiple />
+            </div>
+            <hr />
+            <div id="global_scripts_block" class="padding5">
+                <div>
+                    <strong data-i18n="ext_regex_global_scripts">Global Scripts</strong>
+                </div>
+                <small data-i18n="ext_regex_global_scripts_desc">
+                    Available for all characters. Saved to local settings.
+                </small>
+                <div id="saved_regex_scripts" class="flex-container regex-script-container flexFlowColumn"></div>
+            </div>
+            <hr />
+            <div id="scoped_scripts_block" class="padding5">
+                <div class="flex-container alignItemsBaseline">
+                    <strong class="flex1" data-i18n="ext_regex_scoped_scripts">Scoped Scripts</strong>
+                    <label id="toggle_scoped_regex" class="checkbox flex-container" for="regex_scoped_toggle">
+                        <input type="checkbox" id="regex_scoped_toggle" class="enable_scoped" />
+                        <span class="regex-toggle-on fa-solid fa-toggle-on fa-lg" data-i18n="[title]ext_regex_disallow_scoped" title="Disallow using scoped regex"></span>
+                        <span class="regex-toggle-off fa-solid fa-toggle-off fa-lg" data-i18n="[title]ext_regex_allow_scoped" title="Allow using scoped regex"></span>
+                    </label>
+                </div>
+                <small data-i18n="ext_regex_scoped_scripts_desc">
+                    Only available for this character. Saved to the card data.
+                </small>
+                <div id="saved_scoped_scripts" class="flex-container regex-script-container flexFlowColumn"></div>
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/regex/editor.html

@@ -0,0 +1,164 @@
+<div id="regex_editor_template">
+    <div class="regex_editor">
+        <h3 class="flex-container justifyCenter alignItemsBaseline">
+            <strong data-i18n="Regex Editor">Regex Editor</strong>
+            <a href="https://docs.ChuQuadrant.app/extensions/regex/" class="notes-link" target="_blank" rel="noopener noreferrer">
+                <span class="note-link-span">?</span>
+            </a>
+            <div id="regex_test_mode_toggle" class="menu_button menu_button_icon">
+                <i class="fa-solid fa-bug fa-sm"></i>
+                <span class="menu_button_text" data-i18n="Test Mode">Test Mode</span>
+            </div>
+        </h3>
+
+        <small class="flex-container extensions_info" data-i18n="ext_regex_desc">
+            Regex is a tool to find/replace strings using regular expressions. If you want to learn more, click on the ? next to the title.
+        </small>
+        <hr />
+
+        <div id="regex_info_block_wrapper">
+            <div id="regex_info_block" class="info-block"></div>
+            <a id="regex_info_block_flags_hint" href="https://docs.ChuQuadrant.app/extensions/regex/#flags" target="_blank" rel="noopener noreferrer">
+                <i class="fa-solid fa-circle-info" data-i18n="[title]ext_regex_flags_help" title="Click here to learn more about regex flags."></i>
+            </a>
+        </div>
+
+        <div id="regex_test_mode" class="flex1 flex-container displayNone">
+            <div class="flex1">
+                <label class="title_restorable" for="regex_test_input">
+                    <small data-i18n="Input">Input</small>
+                </label>
+                <textarea id="regex_test_input" class="text_pole textarea_compact" rows="4" data-i18n="[placeholder]ext_regex_test_input_placeholder" placeholder="Type here..."></textarea>
+            </div>
+            <div class="flex1">
+                <label class="title_restorable" for="regex_test_output">
+                    <small data-i18n="Output">Output</small>
+                </label>
+                <textarea id="regex_test_output" class="text_pole textarea_compact" rows="4" data-i18n="[placeholder]ext_regex_output_placeholder" placeholder="Empty" readonly></textarea>
+            </div>
+            <hr>
+        </div>
+
+        <div class="flex-container flexFlowColumn">
+            <div class="flex1">
+                <label for="regex_script_name" class="title_restorable">
+                    <small data-i18n="Script Name">Script Name</small>
+                </label>
+                <div>
+                    <input class="regex_script_name text_pole textarea_compact" type="text" />
+                </div>
+            </div>
+            <div class="flex1">
+                <label for="find_regex" class="title_restorable">
+                    <small data-i18n="Find Regex">Find Regex</small>
+                </label>
+                <div>
+                    <input class="find_regex text_pole textarea_compact" type="text" />
+                </div>
+            </div>
+            <div class="flex1">
+                <label for="regex_replace_string" class="title_restorable">
+                    <small data-i18n="Replace With">Replace With</small>
+                </label>
+                <div>
+                    <textarea class="regex_replace_string text_pole wide100p textarea_compact" data-i18n="[placeholder]ext_regex_replace_string_placeholder" placeholder="Use {{match}} to include the matched text from the Find Regex or $1, $2, etc. for capture groups." rows="2"></textarea>
+                </div>
+            </div>
+            <div class="flex1">
+                <label for="regex_trim_strings" class="title_restorable">
+                    <small data-i18n="Trim Out">Trim Out</small>
+                </label>
+                <div>
+                    <textarea class="regex_trim_strings text_pole wide100p textarea_compact" data-i18n="[placeholder]ext_regex_trim_placeholder" placeholder="Globally trims any unwanted parts from a regex match before replacement. Separate each element by an enter." rows="3"></textarea>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex-container">
+            <div class="flex1 wi-enter-footer-text flex-container flexFlowColumn flexNoGap alignitemsstart">
+                <small data-i18n="ext_regex_affects">Affects</small>
+                <div data-i18n="[title]ext_regex_user_input_desc" title="Messages sent by the user.">
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="1">
+                        <span data-i18n="ext_regex_user_input">User Input</span>
+                    </label>
+                </div>
+                <div data-i18n="[title]ext_regex_ai_input_desc" title="Messages received from the Generation API.">
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="2">
+                        <span data-i18n="ext_regex_ai_output">AI Output</span>
+                    </label>
+                </div>
+                <div data-i18n="[title]ext_regex_slash_desc" title="Messages sent using STscript commands.">
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="3">
+                        <span data-i18n="Slash Commands">Slash Commands</span>
+                    </label>
+                </div>
+                <div data-i18n="[title]ext_regex_wi_desc" title="Lorebook/World Info entry contents. Requires 'Only Format Prompt' to be checked!">
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="5">
+                        <span data-i18n="World Info">World Info</span>
+                    </label>
+                </div>
+                <div data-i18n="[title]ext_regex_reasoning_desc" title="Reasoning block contents. When 'Only Format Prompt' is checked, it will also affect the reasoning contents added to the prompt.">
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="6">
+                        <span data-i18n="Reasoning">Reasoning</span>
+                    </label>
+                </div>
+                <div class="flex-container wide100p marginTop5">
+                    <div class="flex1 flex-container flexNoGap">
+                        <small data-i18n="[title]ext_regex_min_depth_desc" title="When applied to prompts or display, only affect messages that are at least N levels deep. 0 = last message, 1 = penultimate message, etc. System prompt and utility prompts are not affected. When blank / 'Unlimited' or -1, also affect message to continue on Continue.">
+                            <span data-i18n="Min Depth">Min Depth</span>
+                            <span class="fa-solid fa-circle-question note-link-span"></span>
+                        </small>
+                        <input name="min_depth" class="text_pole textarea_compact" type="number" min="-1" max="999" data-i18n="[placeholder]ext_regex_min_depth_placeholder" placeholder="Unlimited" />
+                    </div>
+                    <div class="flex1 flex-container flexNoGap">
+                        <small data-i18n="[title]ext_regex_max_depth_desc" title="When applied to prompts or display, only affect messages no more than N levels deep. 0 = last message, 1 = penultimate message, etc. System prompt and utility prompts are not affected. Max must be greater than Min for regex to apply.">
+                            <span data-i18n="Max Depth">Max Depth</span>
+                            <span class="fa-solid fa-circle-question note-link-span"></span>
+                        </small>
+                        <input name="max_depth" class="text_pole textarea_compact" type="number" min="0" max="999" data-i18n="[placeholder]ext_regex_min_depth_placeholder" placeholder="Unlimited" />
+                    </div>
+                </div>
+            </div>
+            <div class="flex1 wi-enter-footer-text flex-container flexFlowColumn flexNoGap alignitemsstart">
+                <small data-i18n="ext_regex_other_options">Other Options</small>
+                <label class="checkbox flex-container">
+                    <input type="checkbox" name="disabled" />
+                    <span data-i18n="Disabled">Disabled</span>
+                </label>
+                <label class="checkbox flex-container" data-i18n="[title]ext_regex_run_on_edit_desc" title="Run the regex script when the message belonging a to specified role(s) is edited.">
+                    <input type="checkbox" name="run_on_edit" />
+                    <span data-i18n="Run On Edit">Run On Edit</span>
+                </label>
+                <label class="checkbox flex-container flexNoGap marginBot5" data-i18n="[title]ext_regex_substitute_regex_desc" title="Substitute &lcub;&lcub;macros&rcub;&rcub; in Find Regex before running it">
+                    <span>
+                        <small data-i18n="Macro in Find Regex">Macros in Find Regex</small>
+                        <span class="fa-solid fa-circle-question note-link-span"></span>
+                    </span>
+                    <select name="substitute_regex" class="text_pole textarea_compact margin0">
+                        <option value="0" data-i18n="Don't substitute">Don't substitute</option>
+                        <option value="1" data-i18n="Substitute (raw)">Substitute (raw)</option>
+                        <option value="2" data-i18n="Substitute (escaped)">Substitute (escaped)</option>
+                    </select>
+                </label>
+                <span>
+                    <small data-i18n="ext_regex_other_options" data-i18n="Ephemerality">Ephemerality</small>
+                    <span class="fa-solid fa-circle-question note-link-span" data-i18n="[title]ext_regex_other_options_desc" title="By default, regex scripts alter the chat file directly and irreversibly.&#13;Enabling either (or both) of the options below will prevent chat file alteration, while still altering the specified item(s)."></span>
+                </span>
+                <label class="checkbox flex-container" data-i18n="[title]ext_regex_only_format_visual_desc" title="Chat history file contents won't change, but regex will be applied to the messages displayed in the Chat UI.">
+                    <input type="checkbox" name="only_format_display" />
+                    <span data-i18n="Only Format Display">Alter Chat Display</span>
+                </label>
+                <label class="checkbox flex-container" data-i18n="[title]ext_regex_only_format_prompt_desc" title="Chat history file contents won't change, but regex will be applied to the outgoing prompt before it is sent to the LLM.">
+                    <input type="checkbox" name="only_format_prompt" />
+                    <span data-i18n="Only Format Prompt (?)">Alter Outgoing Prompt</span>
+                </label>
+
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/regex/embeddedScripts.html

@@ -0,0 +1,5 @@
+<div>
+    <h3>This character has embedded regex script(s).</h3>
+    <h3>Would you like to allow using them?</h3>
+    <div class="m-b-1">If you want to do it later, select "Regex" from the extensions menu.</div>
+</div>

public/scripts/extensions/regex/engine.js

@@ -0,0 +1,205 @@
+import { characters, substituteParams, substituteParamsExtended, this_chid } from '../../../script.js';
+import { extension_settings } from '../../extensions.js';
+import { regexFromString } from '../../utils.js';
+export {
+    regex_placement,
+    getRegexedString,
+    runRegexScript,
+};
+
+/**
+ * @enum {number} Where the regex script should be applied
+ */
+const regex_placement = {
+    /**
+     * @deprecated MD Display is deprecated. Do not use.
+     */
+    MD_DISPLAY: 0,
+    USER_INPUT: 1,
+    AI_OUTPUT: 2,
+    SLASH_COMMAND: 3,
+    // 4 - sendAs (legacy)
+    WORLD_INFO: 5,
+    REASONING: 6,
+};
+
+export const substitute_find_regex = {
+    NONE: 0,
+    RAW: 1,
+    ESCAPED: 2,
+};
+
+function sanitizeRegexMacro(x) {
+    return (x && typeof x === 'string') ?
+        x.replaceAll(/[\n\r\t\v\f\0.^$*+?{}[\]\\/|()]/gs, function (s) {
+            switch (s) {
+                case '\n':
+                    return '\\n';
+                case '\r':
+                    return '\\r';
+                case '\t':
+                    return '\\t';
+                case '\v':
+                    return '\\v';
+                case '\f':
+                    return '\\f';
+                case '\0':
+                    return '\\0';
+                default:
+                    return '\\' + s;
+            }
+        }) : x;
+}
+
+function getScopedRegex() {
+    const isAllowed = extension_settings?.character_allowed_regex?.includes(characters?.[this_chid]?.avatar);
+
+    if (!isAllowed) {
+        return [];
+    }
+
+    const scripts = characters[this_chid]?.data?.extensions?.regex_scripts;
+
+    if (!Array.isArray(scripts)) {
+        return [];
+    }
+
+    return scripts;
+}
+
+/**
+ * Parent function to fetch a regexed version of a raw string
+ * @param {string} rawString The raw string to be regexed
+ * @param {regex_placement} placement The placement of the string
+ * @param {RegexParams} params The parameters to use for the regex script
+ * @returns {string} The regexed string
+ * @typedef {{characterOverride?: string, isMarkdown?: boolean, isPrompt?: boolean, isEdit?: boolean, depth?: number }} RegexParams The parameters to use for the regex script
+ */
+function getRegexedString(rawString, placement, { characterOverride, isMarkdown, isPrompt, isEdit, depth } = {}) {
+    // WTF have you passed me?
+    if (typeof rawString !== 'string') {
+        console.warn('getRegexedString: rawString is not a string. Returning empty string.');
+        return '';
+    }
+
+    let finalString = rawString;
+    if (extension_settings.disabledExtensions.includes('regex') || !rawString || placement === undefined) {
+        return finalString;
+    }
+
+    const allRegex = [...(extension_settings.regex ?? []), ...(getScopedRegex() ?? [])];
+    allRegex.forEach((script) => {
+        if (
+            // Script applies to Markdown and input is Markdown
+            (script.markdownOnly && isMarkdown) ||
+            // Script applies to Generate and input is Generate
+            (script.promptOnly && isPrompt) ||
+            // Script applies to all cases when neither "only"s are true, but there's no need to do it when `isMarkdown`, the as source (chat history) should already be changed beforehand
+            (!script.markdownOnly && !script.promptOnly && !isMarkdown && !isPrompt)
+        ) {
+            if (isEdit && !script.runOnEdit) {
+                console.debug(`getRegexedString: Skipping script ${script.scriptName} because it does not run on edit`);
+                return;
+            }
+
+            // Check if the depth is within the min/max depth
+            if (typeof depth === 'number') {
+                if (!isNaN(script.minDepth) && script.minDepth !== null && script.minDepth >= -1 && depth < script.minDepth) {
+                    console.debug(`getRegexedString: Skipping script ${script.scriptName} because depth ${depth} is less than minDepth ${script.minDepth}`);
+                    return;
+                }
+
+                if (!isNaN(script.maxDepth) && script.maxDepth !== null && script.maxDepth >= 0 && depth > script.maxDepth) {
+                    console.debug(`getRegexedString: Skipping script ${script.scriptName} because depth ${depth} is greater than maxDepth ${script.maxDepth}`);
+                    return;
+                }
+            }
+
+            if (script.placement.includes(placement)) {
+                finalString = runRegexScript(script, finalString, { characterOverride });
+            }
+        }
+    });
+
+    return finalString;
+}
+
+/**
+ * Runs the provided regex script on the given string
+ * @param {import('./index.js').RegexScript} regexScript The regex script to run
+ * @param {string} rawString The string to run the regex script on
+ * @param {RegexScriptParams} params The parameters to use for the regex script
+ * @returns {string} The new string
+ * @typedef {{characterOverride?: string}} RegexScriptParams The parameters to use for the regex script
+ */
+function runRegexScript(regexScript, rawString, { characterOverride } = {}) {
+    let newString = rawString;
+    if (!regexScript || !!(regexScript.disabled) || !regexScript?.findRegex || !rawString) {
+        return newString;
+    }
+
+    const getRegexString = () => {
+        switch (Number(regexScript.substituteRegex)) {
+            case substitute_find_regex.NONE:
+                return regexScript.findRegex;
+            case substitute_find_regex.RAW:
+                return substituteParamsExtended(regexScript.findRegex);
+            case substitute_find_regex.ESCAPED:
+                return substituteParamsExtended(regexScript.findRegex, {}, sanitizeRegexMacro);
+            default:
+                console.warn(`runRegexScript: Unknown substituteRegex value ${regexScript.substituteRegex}. Using raw regex.`);
+                return regexScript.findRegex;
+        }
+    };
+    const regexString = getRegexString();
+    const findRegex = regexFromString(regexString);
+
+    // The user skill issued. Return with nothing.
+    if (!findRegex) {
+        return newString;
+    }
+
+    // Run replacement. Currently does not support the Overlay strategy
+    newString = rawString.replace(findRegex, function (match) {
+        const args = [...arguments];
+        const replaceString = regexScript.replaceString.replace(/{{match}}/gi, '$0');
+        const replaceWithGroups = replaceString.replaceAll(/\$(\d+)/g, (_, num) => {
+            // Get a full match or a capture group
+            const match = args[Number(num)];
+
+            // No match found - return the empty string
+            if (!match) {
+                return '';
+            }
+
+            // Remove trim strings from the match
+            const filteredMatch = filterString(match, regexScript.trimStrings, { characterOverride });
+
+            // TODO: Handle overlay here
+
+            return filteredMatch;
+        });
+
+        // Substitute at the end
+        return substituteParams(replaceWithGroups);
+    });
+
+    return newString;
+}
+
+/**
+ * Filters anything to trim from the regex match
+ * @param {string} rawString The raw string to filter
+ * @param {string[]} trimStrings The strings to trim
+ * @param {RegexScriptParams} params The parameters to use for the regex filter
+ * @returns {string} The filtered string
+ */
+function filterString(rawString, trimStrings, { characterOverride } = {}) {
+    let finalString = rawString;
+    trimStrings.forEach((trimString) => {
+        const subTrimString = substituteParams(trimString, undefined, characterOverride);
+        finalString = finalString.replaceAll(subTrimString, '');
+    });
+
+    return finalString;
+}

public/scripts/extensions/regex/importTarget.html

@@ -0,0 +1,19 @@
+<div>
+    <h3 data-i18n="ext_regex_import_target">
+        Import To:
+    </h3>
+    <div class="flex-container flexFlowColumn wide100p padding10 justifyLeft">
+        <label for="regex_import_target_global">
+            <input type="radio" name="regex_import_target" id="regex_import_target_global" value="global" checked />
+            <span data-i18n="ext_regex_global_scripts">
+                Global Scripts
+            </span>
+        </label>
+        <label for="regex_import_target_scoped">
+            <input type="radio" name="regex_import_target" id="regex_import_target_scoped" value="scoped" />
+            <span data-i18n="ext_regex_scoped_scripts">
+                Scoped Scripts
+            </span>
+        </label>
+    </div>
+</div>

public/scripts/extensions/regex/index.js

@@ -0,0 +1,731 @@
+import { callPopup, characters, eventSource, event_types, getCurrentChatId, reloadCurrentChat, saveSettingsDebounced, this_chid } from '../../../script.js';
+import { extension_settings, renderExtensionTemplateAsync, writeExtensionField } from '../../extensions.js';
+import { selected_group } from '../../group-chats.js';
+import { callGenericPopup, POPUP_TYPE } from '../../popup.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { commonEnumProviders, enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { download, equalsIgnoreCaseAndAccents, getFileText, getSortableDelay, isFalseBoolean, isTrueBoolean, regexFromString, setInfoBlock, uuidv4 } from '../../utils.js';
+import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';
+import { t } from '../../i18n.js';
+import { accountStorage } from '../../util/AccountStorage.js';
+
+/**
+ * @typedef {import('../../char-data.js').RegexScriptData} RegexScript
+ */
+
+/**
+ * Retrieves the list of regex scripts by combining the scripts from the extension settings and the character data
+ *
+ * @return {RegexScript[]} An array of regex scripts, where each script is an object containing the necessary information.
+ */
+export function getRegexScripts() {
+    return [...(extension_settings.regex ?? []), ...(characters[this_chid]?.data?.extensions?.regex_scripts ?? [])];
+}
+
+/**
+ * Saves a regex script to the extension settings or character data.
+ * @param {import('../../char-data.js').RegexScriptData} regexScript
+ * @param {number} existingScriptIndex Index of the existing script
+ * @param {boolean} isScoped Is the script scoped to a character?
+ * @returns {Promise<void>}
+ */
+async function saveRegexScript(regexScript, existingScriptIndex, isScoped) {
+    // If not editing
+    const array = (isScoped ? characters[this_chid]?.data?.extensions?.regex_scripts : extension_settings.regex) ?? [];
+
+    // Assign a UUID if it doesn't exist
+    if (!regexScript.id) {
+        regexScript.id = uuidv4();
+    }
+
+    // Is the script name undefined or empty?
+    if (!regexScript.scriptName) {
+        toastr.error('Could not save regex script: The script name was undefined or empty!');
+        return;
+    }
+
+    // Is a find regex present?
+    if (regexScript.findRegex.length === 0) {
+        toastr.warning('This regex script will not work, but was saved anyway: A find regex isn\'t present.');
+    }
+
+    // Is there someplace to place results?
+    if (regexScript.placement.length === 0) {
+        toastr.warning('This regex script will not work, but was saved anyway: One "Affects" checkbox must be selected!');
+    }
+
+    if (existingScriptIndex !== -1) {
+        array[existingScriptIndex] = regexScript;
+    } else {
+        array.push(regexScript);
+    }
+
+    if (isScoped) {
+        await writeExtensionField(this_chid, 'regex_scripts', array);
+
+        // Add the character to the allowed list
+        if (!extension_settings.character_allowed_regex.includes(characters[this_chid].avatar)) {
+            extension_settings.character_allowed_regex.push(characters[this_chid].avatar);
+        }
+    }
+
+    saveSettingsDebounced();
+    await loadRegexScripts();
+
+    // Reload the current chat to undo previous markdown
+    const currentChatId = getCurrentChatId();
+    if (currentChatId !== undefined && currentChatId !== null) {
+        await reloadCurrentChat();
+    }
+}
+
+async function deleteRegexScript({ id, isScoped }) {
+    const array = (isScoped ? characters[this_chid]?.data?.extensions?.regex_scripts : extension_settings.regex) ?? [];
+
+    const existingScriptIndex = array.findIndex((script) => script.id === id);
+    if (!existingScriptIndex || existingScriptIndex !== -1) {
+        array.splice(existingScriptIndex, 1);
+
+        if (isScoped) {
+            await writeExtensionField(this_chid, 'regex_scripts', array);
+        }
+
+        saveSettingsDebounced();
+        await loadRegexScripts();
+    }
+}
+
+async function loadRegexScripts() {
+    $('#saved_regex_scripts').empty();
+    $('#saved_scoped_scripts').empty();
+
+    const scriptTemplate = $(await renderExtensionTemplateAsync('regex', 'scriptTemplate'));
+
+    /**
+     * Renders a script to the UI.
+     * @param {string} container Container to render the script to
+     * @param {import('../../char-data.js').RegexScriptData} script Script data
+     * @param {boolean} isScoped Script is scoped to a character
+     * @param {number} index Index of the script in the array
+     */
+    function renderScript(container, script, isScoped, index) {
+        // Have to clone here
+        const scriptHtml = scriptTemplate.clone();
+        const save = () => saveRegexScript(script, index, isScoped);
+
+        if (!script.id) {
+            script.id = uuidv4();
+        }
+
+        scriptHtml.attr('id', script.id);
+        scriptHtml.find('.regex_script_name').text(script.scriptName);
+        scriptHtml.find('.disable_regex').prop('checked', script.disabled ?? false)
+            .on('input', async function () {
+                script.disabled = !!$(this).prop('checked');
+                await save();
+            });
+        scriptHtml.find('.regex-toggle-on').on('click', function () {
+            scriptHtml.find('.disable_regex').prop('checked', true).trigger('input');
+        });
+        scriptHtml.find('.regex-toggle-off').on('click', function () {
+            scriptHtml.find('.disable_regex').prop('checked', false).trigger('input');
+        });
+        scriptHtml.find('.edit_existing_regex').on('click', async function () {
+            await onRegexEditorOpenClick(scriptHtml.attr('id'), isScoped);
+        });
+        scriptHtml.find('.move_to_global').on('click', async function () {
+            const confirm = await callGenericPopup('Are you sure you want to move this regex script to global?', POPUP_TYPE.CONFIRM);
+
+            if (!confirm) {
+                return;
+            }
+
+            await deleteRegexScript({ id: script.id, isScoped: true });
+            await saveRegexScript(script, -1, false);
+        });
+        scriptHtml.find('.move_to_scoped').on('click', async function () {
+            if (this_chid === undefined) {
+                toastr.error('No character selected.');
+                return;
+            }
+
+            if (selected_group) {
+                toastr.error('Cannot edit scoped scripts in group chats.');
+                return;
+            }
+
+            const confirm = await callGenericPopup('Are you sure you want to move this regex script to scoped?', POPUP_TYPE.CONFIRM);
+
+            if (!confirm) {
+                return;
+            }
+
+            await deleteRegexScript({ id: script.id, isScoped: false });
+            await saveRegexScript(script, -1, true);
+        });
+        scriptHtml.find('.export_regex').on('click', async function () {
+            const fileName = `${script.scriptName.replace(/[\s.<>:"/\\|?*\x00-\x1F\x7F]/g, '_').toLowerCase()}.json`;
+            const fileData = JSON.stringify(script, null, 4);
+            download(fileData, fileName, 'application/json');
+        });
+        scriptHtml.find('.delete_regex').on('click', async function () {
+            const confirm = await callGenericPopup('Are you sure you want to delete this regex script?', POPUP_TYPE.CONFIRM);
+
+            if (!confirm) {
+                return;
+            }
+
+            await deleteRegexScript({ id: script.id, isScoped });
+            await reloadCurrentChat();
+        });
+
+        $(container).append(scriptHtml);
+    }
+
+    extension_settings?.regex?.forEach((script, index, array) => renderScript('#saved_regex_scripts', script, false, index, array));
+    characters[this_chid]?.data?.extensions?.regex_scripts?.forEach((script, index, array) => renderScript('#saved_scoped_scripts', script, true, index, array));
+
+    const isAllowed = extension_settings?.character_allowed_regex?.includes(characters?.[this_chid]?.avatar);
+    $('#regex_scoped_toggle').prop('checked', isAllowed);
+}
+
+/**
+ * Opens the regex editor.
+ * @param {string|boolean} existingId Existing ID
+ * @param {boolean} isScoped Is the script scoped to a character?
+ * @returns {Promise<void>}
+ */
+async function onRegexEditorOpenClick(existingId, isScoped) {
+    const editorHtml = $(await renderExtensionTemplateAsync('regex', 'editor'));
+    const array = (isScoped ? characters[this_chid]?.data?.extensions?.regex_scripts : extension_settings.regex) ?? [];
+
+    // If an ID exists, fill in all the values
+    let existingScriptIndex = -1;
+    if (existingId) {
+        existingScriptIndex = array.findIndex((script) => script.id === existingId);
+        if (existingScriptIndex !== -1) {
+            const existingScript = array[existingScriptIndex];
+            if (existingScript.scriptName) {
+                editorHtml.find('.regex_script_name').val(existingScript.scriptName);
+            } else {
+                toastr.error('This script doesn\'t have a name! Please delete it.');
+                return;
+            }
+
+            editorHtml.find('.find_regex').val(existingScript.findRegex || '');
+            editorHtml.find('.regex_replace_string').val(existingScript.replaceString || '');
+            editorHtml.find('.regex_trim_strings').val(existingScript.trimStrings?.join('\n') || []);
+            editorHtml.find('input[name="disabled"]').prop('checked', existingScript.disabled ?? false);
+            editorHtml.find('input[name="only_format_display"]').prop('checked', existingScript.markdownOnly ?? false);
+            editorHtml.find('input[name="only_format_prompt"]').prop('checked', existingScript.promptOnly ?? false);
+            editorHtml.find('input[name="run_on_edit"]').prop('checked', existingScript.runOnEdit ?? false);
+            editorHtml.find('select[name="substitute_regex"]').val(existingScript.substituteRegex ?? substitute_find_regex.NONE);
+            editorHtml.find('input[name="min_depth"]').val(existingScript.minDepth ?? '');
+            editorHtml.find('input[name="max_depth"]').val(existingScript.maxDepth ?? '');
+
+            existingScript.placement.forEach((element) => {
+                editorHtml
+                    .find(`input[name="replace_position"][value="${element}"]`)
+                    .prop('checked', true);
+            });
+        }
+    } else {
+        editorHtml
+            .find('input[name="only_format_display"]')
+            .prop('checked', true);
+
+        editorHtml
+            .find('input[name="run_on_edit"]')
+            .prop('checked', true);
+
+        editorHtml
+            .find('input[name="replace_position"][value="1"]')
+            .prop('checked', true);
+    }
+
+    editorHtml.find('#regex_test_mode_toggle').on('click', function () {
+        editorHtml.find('#regex_test_mode').toggleClass('displayNone');
+        updateTestResult();
+    });
+
+    function updateTestResult() {
+        updateInfoBlock(editorHtml);
+
+        if (!editorHtml.find('#regex_test_mode').is(':visible')) {
+            return;
+        }
+
+        const testScript = {
+            id: uuidv4(),
+            scriptName: editorHtml.find('.regex_script_name').val(),
+            findRegex: editorHtml.find('.find_regex').val(),
+            replaceString: editorHtml.find('.regex_replace_string').val(),
+            trimStrings: String(editorHtml.find('.regex_trim_strings').val()).split('\n').filter((e) => e.length !== 0) || [],
+            substituteRegex: Number(editorHtml.find('select[name="substitute_regex"]').val()),
+        };
+        const rawTestString = String(editorHtml.find('#regex_test_input').val());
+        const result = runRegexScript(testScript, rawTestString);
+        editorHtml.find('#regex_test_output').text(result);
+    }
+
+    editorHtml.find('input, textarea, select').on('input', updateTestResult);
+    updateInfoBlock(editorHtml);
+
+    const popupResult = await callPopup(editorHtml, 'confirm', undefined, { okButton: t`Save` });
+    if (popupResult) {
+        const newRegexScript = {
+            id: existingId ? String(existingId) : uuidv4(),
+            scriptName: String(editorHtml.find('.regex_script_name').val()),
+            findRegex: String(editorHtml.find('.find_regex').val()),
+            replaceString: String(editorHtml.find('.regex_replace_string').val()),
+            trimStrings: editorHtml.find('.regex_trim_strings').val().split('\n').filter((e) => e.length !== 0) || [],
+            placement:
+                editorHtml
+                    .find('input[name="replace_position"]')
+                    .filter(':checked')
+                    .map(function () { return parseInt($(this).val()); })
+                    .get()
+                    .filter((e) => !isNaN(e)) || [],
+            disabled: editorHtml.find('input[name="disabled"]').prop('checked'),
+            markdownOnly: editorHtml.find('input[name="only_format_display"]').prop('checked'),
+            promptOnly: editorHtml.find('input[name="only_format_prompt"]').prop('checked'),
+            runOnEdit: editorHtml.find('input[name="run_on_edit"]').prop('checked'),
+            substituteRegex: Number(editorHtml.find('select[name="substitute_regex"]').val()),
+            minDepth: parseInt(String(editorHtml.find('input[name="min_depth"]').val())),
+            maxDepth: parseInt(String(editorHtml.find('input[name="max_depth"]').val())),
+        };
+
+        saveRegexScript(newRegexScript, existingScriptIndex, isScoped);
+    }
+}
+
+/**
+ * Updates the info block in the regex editor with hints regarding the find regex.
+ * @param {JQuery<HTMLElement>} editorHtml The editor HTML
+ */
+function updateInfoBlock(editorHtml) {
+    const infoBlock = editorHtml.find('.info-block').get(0);
+    const infoBlockFlagsHint = editorHtml.find('#regex_info_block_flags_hint');
+    const findRegex = String(editorHtml.find('.find_regex').val());
+
+    infoBlockFlagsHint.hide();
+
+    // Clear the info block if the find regex is empty
+    if (!findRegex) {
+        setInfoBlock(infoBlock, t`Find Regex is empty`, 'info');
+        return;
+    }
+
+    try {
+        const regex = regexFromString(findRegex);
+        if (!regex) {
+            throw new Error(t`Invalid Find Regex`);
+        }
+
+        const flagInfo = [];
+        flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);
+        flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);
+
+        setInfoBlock(infoBlock, flagInfo.join('. '), 'hint');
+        infoBlockFlagsHint.show();
+    } catch (error) {
+        setInfoBlock(infoBlock, error.message, 'error');
+    }
+}
+
+// Common settings migration function. Some parts will eventually be removed
+// TODO: Maybe migrate placement to strings?
+function migrateSettings() {
+    let performSave = false;
+
+    // Current: If MD Display is present in placement, remove it and add new placements/MD option
+    extension_settings.regex.forEach((script) => {
+        if (!script.id) {
+            script.id = uuidv4();
+            performSave = true;
+        }
+
+        if (script.placement.includes(regex_placement.MD_DISPLAY)) {
+            script.placement = script.placement.length === 1 ?
+                Object.values(regex_placement).filter((e) => e !== regex_placement.MD_DISPLAY) :
+                script.placement = script.placement.filter((e) => e !== regex_placement.MD_DISPLAY);
+
+            script.markdownOnly = true;
+            script.promptOnly = true;
+
+            performSave = true;
+        }
+
+        // Old system and sendas placement migration
+        // 4 - sendAs
+        if (script.placement.includes(4)) {
+            script.placement = script.placement.length === 1 ?
+                [regex_placement.SLASH_COMMAND] :
+                script.placement = script.placement.filter((e) => e !== 4);
+
+            performSave = true;
+        }
+    });
+
+    if (!extension_settings.character_allowed_regex) {
+        extension_settings.character_allowed_regex = [];
+        performSave = true;
+    }
+
+    if (performSave) {
+        saveSettingsDebounced();
+    }
+}
+
+/**
+ * /regex slash command callback
+ * @param {{name: string}} args Named arguments
+ * @param {string} value Unnamed argument
+ * @returns {string} The regexed string
+ */
+function runRegexCallback(args, value) {
+    if (!args.name) {
+        toastr.warning('No regex script name provided.');
+        return value;
+    }
+
+    const scriptName = args.name;
+    const scripts = getRegexScripts();
+
+    for (const script of scripts) {
+        if (script.scriptName.toLowerCase() === scriptName.toLowerCase()) {
+            if (script.disabled) {
+                toastr.warning(t`Regex script "${scriptName}" is disabled.`);
+                return value;
+            }
+
+            console.debug(`Running regex callback for ${scriptName}`);
+            return runRegexScript(script, value);
+        }
+    }
+
+    toastr.warning(`Regex script "${scriptName}" not found.`);
+    return value;
+}
+
+/**
+ * /regex-toggle slash command callback
+ * @param {{state: string, quiet: string}} args Named arguments
+ * @param {string} scriptName The name of the script to toggle
+ * @returns {Promise<string>} The name of the script
+ */
+async function toggleRegexCallback(args, scriptName) {
+    if (typeof scriptName !== 'string') throw new Error('Script name must be a string.');
+
+    const quiet = isTrueBoolean(args?.quiet);
+    const action = isTrueBoolean(args?.state) ? 'enable' :
+        isFalseBoolean(args?.state) ? 'disable' :
+            'toggle';
+
+    const scripts = getRegexScripts();
+    const script = scripts.find(s => equalsIgnoreCaseAndAccents(s.scriptName, scriptName));
+
+    if (!script) {
+        toastr.warning(t`Regex script '${scriptName}' not found.`);
+        return '';
+    }
+
+    switch (action) {
+        case 'enable':
+            script.disabled = false;
+            break;
+        case 'disable':
+            script.disabled = true;
+            break;
+        default:
+            script.disabled = !script.disabled;
+            break;
+    }
+
+    const isScoped = characters[this_chid]?.data?.extensions?.regex_scripts?.some(s => s.id === script.id);
+    const index = isScoped ? characters[this_chid]?.data?.extensions?.regex_scripts?.indexOf(script) : scripts.indexOf(script);
+
+    await saveRegexScript(script, index, isScoped);
+    if (script.disabled) {
+        !quiet && toastr.success(t`Regex script '${scriptName}' has been disabled.`);
+    } else {
+        !quiet && toastr.success(t`Regex script '${scriptName}' has been enabled.`);
+    }
+
+    return script.scriptName || '';
+}
+
+/**
+ * Performs the import of the regex file.
+ * @param {File} file Input file
+ * @param {boolean} isScoped Is the script scoped to a character?
+ */
+async function onRegexImportFileChange(file, isScoped) {
+    if (!file) {
+        toastr.error('No file provided.');
+        return;
+    }
+
+    try {
+        const fileText = await getFileText(file);
+        const regexScript = JSON.parse(fileText);
+        if (!regexScript.scriptName) {
+            throw new Error('No script name provided.');
+        }
+
+        // Assign a new UUID
+        regexScript.id = uuidv4();
+
+        const array = (isScoped ? characters[this_chid]?.data?.extensions?.regex_scripts : extension_settings.regex) ?? [];
+        array.push(regexScript);
+
+        if (isScoped) {
+            await writeExtensionField(this_chid, 'regex_scripts', array);
+        }
+
+        saveSettingsDebounced();
+        await loadRegexScripts();
+        toastr.success(`Regex script "${regexScript.scriptName}" imported.`);
+    } catch (error) {
+        console.log(error);
+        toastr.error('Invalid JSON file.');
+        return;
+    }
+}
+
+function purgeEmbeddedRegexScripts({ character }) {
+    const avatar = character?.avatar;
+
+    if (avatar && extension_settings.character_allowed_regex?.includes(avatar)) {
+        const index = extension_settings.character_allowed_regex.indexOf(avatar);
+        if (index !== -1) {
+            extension_settings.character_allowed_regex.splice(index, 1);
+            saveSettingsDebounced();
+        }
+    }
+}
+
+async function checkEmbeddedRegexScripts() {
+    const chid = this_chid;
+
+    if (chid !== undefined && !selected_group) {
+        const avatar = characters[chid]?.avatar;
+        const scripts = characters[chid]?.data?.extensions?.regex_scripts;
+
+        if (Array.isArray(scripts) && scripts.length > 0) {
+            if (avatar && !extension_settings.character_allowed_regex.includes(avatar)) {
+                const checkKey = `AlertRegex_${characters[chid].avatar}`;
+
+                if (!accountStorage.getItem(checkKey)) {
+                    accountStorage.setItem(checkKey, 'true');
+                    const template = await renderExtensionTemplateAsync('regex', 'embeddedScripts', {});
+                    const result = await callGenericPopup(template, POPUP_TYPE.CONFIRM, '', { okButton: 'Yes' });
+
+                    if (result) {
+                        extension_settings.character_allowed_regex.push(avatar);
+                        await reloadCurrentChat();
+                        saveSettingsDebounced();
+                    }
+                }
+            }
+        }
+    }
+
+    loadRegexScripts();
+}
+
+// Workaround for loading in sequence with other extensions
+// NOTE: Always puts extension at the top of the list, but this is fine since it's static
+jQuery(async () => {
+    if (extension_settings.regex) {
+        migrateSettings();
+    }
+
+    // Manually disable the extension since static imports auto-import the JS file
+    if (extension_settings.disabledExtensions.includes('regex')) {
+        return;
+    }
+
+    const settingsHtml = $(await renderExtensionTemplateAsync('regex', 'dropdown'));
+    $('#regex_container').append(settingsHtml);
+    $('#open_regex_editor').on('click', function () {
+        onRegexEditorOpenClick(false, false);
+    });
+    $('#open_scoped_editor').on('click', function () {
+        if (this_chid === undefined) {
+            toastr.error('No character selected.');
+            return;
+        }
+
+        if (selected_group) {
+            toastr.error('Cannot edit scoped scripts in group chats.');
+            return;
+        }
+
+        onRegexEditorOpenClick(false, true);
+    });
+    $('#import_regex_file').on('change', async function () {
+        let target = 'global';
+        const template = $(await renderExtensionTemplateAsync('regex', 'importTarget'));
+        template.find('#regex_import_target_global').on('input', () => target = 'global');
+        template.find('#regex_import_target_scoped').on('input', () => target = 'scoped');
+
+        await callGenericPopup(template, POPUP_TYPE.TEXT);
+
+        const inputElement = this instanceof HTMLInputElement && this;
+        for (const file of inputElement.files) {
+            await onRegexImportFileChange(file, target === 'scoped');
+        }
+        inputElement.value = '';
+    });
+    $('#import_regex').on('click', function () {
+        $('#import_regex_file').trigger('click');
+    });
+
+    let sortableDatas = [
+        {
+            selector: '#saved_regex_scripts',
+            setter: x => extension_settings.regex = x,
+            getter: () => extension_settings.regex ?? [],
+        },
+        {
+            selector: '#saved_scoped_scripts',
+            setter: x => writeExtensionField(this_chid, 'regex_scripts', x),
+            getter: () => characters[this_chid]?.data?.extensions?.regex_scripts ?? [],
+        },
+    ];
+    for (const { selector, setter, getter } of sortableDatas) {
+        $(selector).sortable({
+            delay: getSortableDelay(),
+            stop: async function () {
+                const oldScripts = getter();
+                const newScripts = [];
+                $(selector).children().each(function () {
+                    const id = $(this).attr('id');
+                    const existingScript = oldScripts.find((e) => e.id === id);
+                    if (existingScript) {
+                        newScripts.push(existingScript);
+                    }
+                });
+
+                await setter(newScripts);
+                saveSettingsDebounced();
+
+                console.debug(`Regex scripts in ${selector} reordered`);
+                await loadRegexScripts();
+            },
+        });
+    }
+
+    $('#regex_scoped_toggle').on('input', function () {
+        if (this_chid === undefined) {
+            toastr.error('No character selected.');
+            return;
+        }
+
+        if (selected_group) {
+            toastr.error('Cannot edit scoped scripts in group chats.');
+            return;
+        }
+
+        const isEnable = !!$(this).prop('checked');
+        const avatar = characters[this_chid].avatar;
+
+        if (isEnable) {
+            if (!extension_settings.character_allowed_regex.includes(avatar)) {
+                extension_settings.character_allowed_regex.push(avatar);
+            }
+        } else {
+            const index = extension_settings.character_allowed_regex.indexOf(avatar);
+            if (index !== -1) {
+                extension_settings.character_allowed_regex.splice(index, 1);
+            }
+        }
+
+        saveSettingsDebounced();
+        reloadCurrentChat();
+    });
+
+    await loadRegexScripts();
+    $('#saved_regex_scripts').sortable('enable');
+
+    const localEnumProviders = {
+        regexScripts: () => getRegexScripts().map(script => {
+            const isGlobal = extension_settings.regex?.some(x => x.scriptName === script.scriptName);
+            return new SlashCommandEnumValue(script.scriptName, `${enumIcons.getStateIcon(!script.disabled)} [${isGlobal ? 'global' : 'scoped'}] ${script.findRegex}`,
+                isGlobal ? enumTypes.enum : enumTypes.name, isGlobal ? 'G' : 'S');
+        }),
+    };
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'regex',
+        callback: runRegexCallback,
+        returns: 'replaced text',
+        namedArgumentList: [
+            SlashCommandNamedArgument.fromProps({
+                name: 'name',
+                description: 'script name',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.regexScripts,
+            }),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument(
+                'input', [ARGUMENT_TYPE.STRING], false,
+            ),
+        ],
+        helpString: 'Runs a Regex extension script by name on the provided string. The script must be enabled.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'regex-toggle',
+        callback: toggleRegexCallback,
+        returns: 'The name of the script that was toggled',
+        namedArgumentList: [
+            SlashCommandNamedArgument.fromProps({
+                name: 'state',
+                description: 'Explicitly set the state of the script (\'on\' to enable, \'off\' to disable). If not provided, the state will be toggled to the opposite of the current state.',
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                defaultValue: 'toggle',
+                enumList: commonEnumProviders.boolean('onOffToggle')(),
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'quiet',
+                description: 'Suppress the toast message script toggled',
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                defaultValue: 'false',
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+            }),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'script name',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: localEnumProviders.regexScripts,
+            }),
+        ],
+        helpString: `
+            <div>
+                Toggles the state of a specified regex script.
+            </div>
+            <div>
+                <strong>Example:</strong>
+                <ul>
+                    <li>
+                        <pre><code class="language-stscript">/regex-toggle MyScript</code></pre>
+                    </li>
+                    <li>
+                        <pre><code class="language-stscript">/regex-toggle state=off Character-specific Script</code></pre>
+                    </li>
+                </ul>
+            </div>
+        `,
+    }));
+
+    eventSource.on(event_types.CHAT_CHANGED, checkEmbeddedRegexScripts);
+    eventSource.on(event_types.CHARACTER_DELETED, purgeEmbeddedRegexScripts);
+});

public/scripts/extensions/regex/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Regex",
+    "loading_order": 1,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "kingbri",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/regex/scriptTemplate.html

@@ -0,0 +1,26 @@
+<div class="regex-script-label flex-container flexnowrap">
+    <span class="drag-handle menu-handle">&#9776;</span>
+    <div class="regex_script_name flexGrow overflow-hidden"></div>
+    <div class="flex-container flexnowrap">
+        <label class="checkbox flex-container" for="regex_disable">
+            <input type="checkbox" name="regex_disable" class="disable_regex" />
+            <span class="regex-toggle-on fa-solid fa-toggle-on" data-i18n="[title]ext_regex_disable_script" title="Disable script"></span>
+            <span class="regex-toggle-off fa-solid fa-toggle-off" data-i18n="[title]ext_regex_enable_script" title="Enable script"></span>
+        </label>
+        <div class="edit_existing_regex menu_button" data-i18n="[title]ext_regex_edit_script" title="Edit script">
+            <i class="fa-solid fa-pencil"></i>
+        </div>
+        <div class="move_to_global menu_button" data-i18n="[title]ext_regex_move_to_global" title="Move to global scripts">
+            <i class="fa-solid fa-arrow-up"></i>
+        </div>
+        <div class="move_to_scoped menu_button" data-i18n="[title]ext_regex_move_to_scoped" title="Move to scoped scripts">
+            <i class="fa-solid fa-arrow-down"></i>
+        </div>
+        <div class="export_regex menu_button" data-i18n="[title]ext_regex_export_script" title="Export script">
+            <i class="fa-solid fa-file-export"></i>
+        </div>
+        <div class="delete_regex menu_button" data-i18n="[title]ext_regex_delete_script" title="Delete script">
+            <i class="fa-solid fa-trash"></i>
+        </div>
+    </div>
+</div>

public/scripts/extensions/regex/style.css

@@ -0,0 +1,128 @@
+.regex_settings .menu_button {
+    width: fit-content;
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+}
+
+.regex_settings .checkbox {
+    align-items: center;
+}
+
+.regex-script-container {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.regex-script-container:empty::after {
+    content: "No scripts found";
+    font-size: 0.95em;
+    opacity: 0.7;
+    display: block;
+    text-align: center;
+}
+
+#scoped_scripts_block {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+}
+
+#scoped_scripts_block .move_to_scoped {
+    display: none;
+}
+
+#global_scripts_block .move_to_global {
+    display: none;
+}
+
+#scoped_scripts_block:not(:has(#regex_scoped_toggle:checked)) {
+    opacity: 0.5;
+}
+
+.enable_scoped:checked ~ .regex-toggle-on {
+    display: block;
+}
+
+.enable_scoped:checked ~ .regex-toggle-off {
+    display: none;
+}
+
+.enable_scoped:not(:checked) ~ .regex-toggle-on {
+    display: none;
+}
+
+.enable_scoped:not(:checked) ~ .regex-toggle-off {
+    display: block;
+}
+
+.regex-script-label {
+    align-items: center;
+    border: 1px solid var(--SmartThemeBorderColor);
+    border-radius: 10px;
+    padding: 0 5px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+}
+
+.regex-script-label:has(.disable_regex:checked) .regex_script_name {
+    text-decoration: line-through;
+    filter: grayscale(0.5);
+}
+
+input.disable_regex,
+input.enable_scoped {
+    display: none !important;
+}
+
+.regex-toggle-off {
+    cursor: pointer;
+    opacity: 0.5;
+    filter: grayscale(0.5);
+    transition: opacity 0.2s ease-in-out;
+}
+
+.regex-toggle-off:hover {
+    opacity: 1;
+    filter: none;
+}
+
+.regex-toggle-on {
+    cursor: pointer;
+}
+
+.disable_regex:checked ~ .regex-toggle-off {
+    display: block;
+}
+
+.disable_regex:checked ~ .regex-toggle-on {
+    display: none;
+}
+
+.disable_regex:not(:checked) ~ .regex-toggle-off {
+    display: none;
+}
+
+.disable_regex:not(:checked) ~ .regex-toggle-on {
+    display: block;
+}
+
+#regex_info_block_wrapper {
+    position: relative;
+}
+
+#regex_info_block {
+    margin: 10px 0;
+    padding: 5px 20px;
+    font-size: 0.9em;
+}
+
+#regex_info_block_wrapper:has(#regex_info_block:empty) {
+    display: none;
+}
+
+#regex_info_block_flags_hint {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+}

public/scripts/extensions/shared.js

@@ -0,0 +1,595 @@
+import { CONNECT_API_MAP, getRequestHeaders } from '../../script.js';
+import { extension_settings, openThirdPartyExtensionMenu } from '../extensions.js';
+import { t } from '../i18n.js';
+import { oai_settings } from '../openai.js';
+import { SECRET_KEYS, secret_state } from '../secrets.js';
+import { textgen_types, textgenerationwebui_settings } from '../textgen-settings.js';
+import { getTokenCountAsync } from '../tokenizers.js';
+import { createThumbnail, isValidUrl } from '../utils.js';
+
+/**
+ * Generates a caption for an image using a multimodal model.
+ * @param {string} base64Img Base64 encoded image
+ * @param {string} prompt Prompt to use for captioning
+ * @returns {Promise<string>} Generated caption
+ */
+export async function getMultimodalCaption(base64Img, prompt) {
+    const useReverseProxy =
+        (['openai', 'anthropic', 'google', 'mistral'].includes(extension_settings.caption.multimodal_api))
+        && extension_settings.caption.allow_reverse_proxy
+        && oai_settings.reverse_proxy
+        && isValidUrl(oai_settings.reverse_proxy);
+
+    throwIfInvalidModel(useReverseProxy);
+
+    const noPrefix = ['ollama', 'llamacpp'].includes(extension_settings.caption.multimodal_api);
+
+    if (noPrefix && base64Img.startsWith('data:image/')) {
+        base64Img = base64Img.split(',')[1];
+    }
+
+    // OpenRouter has a payload limit of ~2MB. Google is 4MB, but we love democracy.
+    // Ooba requires all images to be JPEGs. Koboldcpp just asked nicely.
+    const isOllama = extension_settings.caption.multimodal_api === 'ollama';
+    const isLlamaCpp = extension_settings.caption.multimodal_api === 'llamacpp';
+    const isCustom = extension_settings.caption.multimodal_api === 'custom';
+    const isOoba = extension_settings.caption.multimodal_api === 'ooba';
+    const isKoboldCpp = extension_settings.caption.multimodal_api === 'koboldcpp';
+    const isVllm = extension_settings.caption.multimodal_api === 'vllm';
+    const base64Bytes = base64Img.length * 0.75;
+    const compressionLimit = 2 * 1024 * 1024;
+    if ((['google', 'openrouter', 'mistral', 'groq'].includes(extension_settings.caption.multimodal_api) && base64Bytes > compressionLimit) || isOoba || isKoboldCpp) {
+        const maxSide = 1024;
+        base64Img = await createThumbnail(base64Img, maxSide, maxSide, 'image/jpeg');
+    }
+
+    const proxyUrl = useReverseProxy ? oai_settings.reverse_proxy : '';
+    const proxyPassword = useReverseProxy ? oai_settings.proxy_password : '';
+
+    const requestBody = {
+        image: base64Img,
+        prompt: prompt,
+        reverse_proxy: proxyUrl,
+        proxy_password: proxyPassword,
+        api: extension_settings.caption.multimodal_api || 'openai',
+        model: extension_settings.caption.multimodal_model || 'gpt-4-turbo',
+    };
+
+    if (isOllama) {
+        if (extension_settings.caption.multimodal_model === 'ollama_current') {
+            requestBody.model = textgenerationwebui_settings.ollama_model;
+        }
+
+        requestBody.server_url = textgenerationwebui_settings.server_urls[textgen_types.OLLAMA];
+    }
+
+    if (isVllm) {
+        if (extension_settings.caption.multimodal_model === 'vllm_current') {
+            requestBody.model = textgenerationwebui_settings.vllm_model;
+        }
+
+        requestBody.server_url = textgenerationwebui_settings.server_urls[textgen_types.VLLM];
+    }
+
+    if (isLlamaCpp) {
+        requestBody.server_url = textgenerationwebui_settings.server_urls[textgen_types.LLAMACPP];
+    }
+
+    if (isOoba) {
+        requestBody.server_url = textgenerationwebui_settings.server_urls[textgen_types.OOBA];
+    }
+
+    if (isKoboldCpp) {
+        requestBody.server_url = textgenerationwebui_settings.server_urls[textgen_types.KOBOLDCPP];
+    }
+
+    if (isCustom) {
+        requestBody.server_url = oai_settings.custom_url;
+        requestBody.model = oai_settings.custom_model || 'gpt-4-turbo';
+        requestBody.custom_include_headers = oai_settings.custom_include_headers;
+        requestBody.custom_include_body = oai_settings.custom_include_body;
+        requestBody.custom_exclude_body = oai_settings.custom_exclude_body;
+    }
+
+    function getEndpointUrl() {
+        switch (extension_settings.caption.multimodal_api) {
+            case 'google':
+                return '/api/google/caption-image';
+            case 'anthropic':
+                return '/api/anthropic/caption-image';
+            case 'llamacpp':
+                return '/api/backends/text-completions/llamacpp/caption-image';
+            case 'ollama':
+                return '/api/backends/text-completions/ollama/caption-image';
+            default:
+                return '/api/openai/caption-image';
+        }
+    }
+
+    const apiResult = await fetch(getEndpointUrl(), {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify(requestBody),
+    });
+
+    if (!apiResult.ok) {
+        throw new Error('Failed to caption image via Multimodal API.');
+    }
+
+    const { caption } = await apiResult.json();
+    return String(caption).trim();
+}
+
+function throwIfInvalidModel(useReverseProxy) {
+    if (extension_settings.caption.multimodal_api === 'openai' && !secret_state[SECRET_KEYS.OPENAI] && !useReverseProxy) {
+        throw new Error('OpenAI API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'openrouter' && !secret_state[SECRET_KEYS.OPENROUTER]) {
+        throw new Error('OpenRouter API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'anthropic' && !secret_state[SECRET_KEYS.CLAUDE] && !useReverseProxy) {
+        throw new Error('Anthropic (Claude) API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'zerooneai' && !secret_state[SECRET_KEYS.ZEROONEAI]) {
+        throw new Error('01.AI API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'groq' && !secret_state[SECRET_KEYS.GROQ]) {
+        throw new Error('Groq API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'google' && !secret_state[SECRET_KEYS.MAKERSUITE] && !useReverseProxy) {
+        throw new Error('Google AI Studio API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'mistral' && !secret_state[SECRET_KEYS.MISTRALAI] && !useReverseProxy) {
+        throw new Error('Mistral AI API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'cohere' && !secret_state[SECRET_KEYS.COHERE]) {
+        throw new Error('Cohere API key is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'ollama' && !textgenerationwebui_settings.server_urls[textgen_types.OLLAMA]) {
+        throw new Error('Ollama server URL is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'ollama' && extension_settings.caption.multimodal_model === 'ollama_current' && !textgenerationwebui_settings.ollama_model) {
+        throw new Error('Ollama model is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'llamacpp' && !textgenerationwebui_settings.server_urls[textgen_types.LLAMACPP]) {
+        throw new Error('LlamaCPP server URL is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'ooba' && !textgenerationwebui_settings.server_urls[textgen_types.OOBA]) {
+        throw new Error('Text Generation WebUI server URL is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'koboldcpp' && !textgenerationwebui_settings.server_urls[textgen_types.KOBOLDCPP]) {
+        throw new Error('KoboldCpp server URL is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'vllm' && !textgenerationwebui_settings.server_urls[textgen_types.VLLM]) {
+        throw new Error('vLLM server URL is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'vllm' && extension_settings.caption.multimodal_model === 'vllm_current' && !textgenerationwebui_settings.vllm_model) {
+        throw new Error('vLLM model is not set.');
+    }
+
+    if (extension_settings.caption.multimodal_api === 'custom' && !oai_settings.custom_url) {
+        throw new Error('Custom API URL is not set.');
+    }
+}
+
+/**
+ * Check if the WebLLM extension is installed and supported.
+ * @returns {boolean} Whether the extension is installed and supported
+ */
+export function isWebLlmSupported() {
+    if (!('gpu' in navigator)) {
+        const warningKey = 'webllm_browser_warning_shown';
+        if (!sessionStorage.getItem(warningKey)) {
+            toastr.error('Your browser does not support the WebGPU API. Please use a different browser.', 'WebLLM', {
+                preventDuplicates: true,
+                timeOut: 0,
+                extendedTimeOut: 0,
+            });
+            sessionStorage.setItem(warningKey, '1');
+        }
+        return false;
+    }
+
+    if (!('llm' in ChuQuadrant)) {
+        const warningKey = 'webllm_extension_warning_shown';
+        if (!sessionStorage.getItem(warningKey)) {
+            toastr.error('WebLLM extension is not installed. Click here to install it.', 'WebLLM', {
+                timeOut: 0,
+                extendedTimeOut: 0,
+                preventDuplicates: true,
+                onclick: () => openThirdPartyExtensionMenu('https://github.com/ChuQuadrant/Extension-WebLLM'),
+            });
+            sessionStorage.setItem(warningKey, '1');
+        }
+        return false;
+    }
+
+    return true;
+}
+
+/**
+ * Generates text in response to a chat prompt using WebLLM.
+ * @param {any[]} messages Messages to use for generating
+ * @param {object} params Additional parameters
+ * @returns {Promise<string>} Generated response
+ */
+export async function generateWebLlmChatPrompt(messages, params = {}) {
+    if (!isWebLlmSupported()) {
+        throw new Error('WebLLM extension is not installed.');
+    }
+
+    console.debug('WebLLM chat completion request:', messages, params);
+    const engine = ChuQuadrant.llm;
+    const response = await engine.generateChatPrompt(messages, params);
+    console.debug('WebLLM chat completion response:', response);
+    return response;
+}
+
+/**
+ * Counts the number of tokens in the provided text using WebLLM's default model.
+ * Fallbacks to the current model's tokenizer if WebLLM token count fails.
+ * @param {string} text Text to count tokens in
+ * @returns {Promise<number>} Number of tokens in the text
+ */
+export async function countWebLlmTokens(text) {
+    if (!isWebLlmSupported()) {
+        throw new Error('WebLLM extension is not installed.');
+    }
+
+    try {
+        const engine = ChuQuadrant.llm;
+        const response = await engine.countTokens(text);
+        return response;
+    } catch (error) {
+        // Fallback to using current model's tokenizer
+        return await getTokenCountAsync(text);
+    }
+}
+
+/**
+ * Gets the size of the context in the WebLLM's default model.
+ * @returns {Promise<number>} Size of the context in the WebLLM model
+ */
+export async function getWebLlmContextSize() {
+    if (!isWebLlmSupported()) {
+        throw new Error('WebLLM extension is not installed.');
+    }
+
+    const engine = ChuQuadrant.llm;
+    await engine.loadModel();
+    const model = await engine.getCurrentModelInfo();
+    return model?.context_size;
+}
+
+/**
+ * It uses the profiles to send a generate request to the API.
+ */
+export class ConnectionManagerRequestService {
+    static defaultSendRequestParams = {
+        stream: false,
+        signal: null,
+        extractData: true,
+        includePreset: true,
+        includeInstruct: true,
+        instructSettings: {},
+    };
+
+    static getAllowedTypes() {
+        return {
+            openai: t`Chat Completion`,
+            textgenerationwebui: t`Text Completion`,
+        };
+    }
+
+    /**
+     * @param {string} profileId
+     * @param {string | (import('../custom-request.js').ChatCompletionMessage & {ignoreInstruct?: boolean})[]} prompt
+     * @param {number} maxTokens
+     * @param {Object} custom
+     * @param {boolean?} [custom.stream=false]
+     * @param {AbortSignal?} [custom.signal]
+     * @param {boolean?} [custom.extractData=true]
+     * @param {boolean?} [custom.includePreset=true]
+     * @param {boolean?} [custom.includeInstruct=true]
+     * @param {Partial<InstructSettings>?} [custom.instructSettings] Override instruct settings
+     * @returns {Promise<import('../custom-request.js').ExtractedData | (() => AsyncGenerator<import('../custom-request.js').StreamResponse>)>} If not streaming, returns extracted data; if streaming, returns a function that creates an AsyncGenerator
+     */
+    static async sendRequest(profileId, prompt, maxTokens, custom = this.defaultSendRequestParams) {
+        const { stream, signal, extractData, includePreset, includeInstruct, instructSettings } = { ...this.defaultSendRequestParams, ...custom };
+
+        const context = ChuQuadrant.getContext();
+        if (context.extensionSettings.disabledExtensions.includes('connection-manager')) {
+            throw new Error('Connection Manager is not available');
+        }
+
+        const profile = context.extensionSettings.connectionManager.profiles.find((p) => p.id === profileId);
+        const selectedApiMap = this.validateProfile(profile);
+
+        try {
+            switch (selectedApiMap.selected) {
+                case 'openai': {
+                    if (!selectedApiMap.source) {
+                        throw new Error(`API type ${selectedApiMap.selected} does not support chat completions`);
+                    }
+
+                    const messages = Array.isArray(prompt) ? prompt : [{ role: 'user', content: prompt }];
+                    return await context.ChatCompletionService.processRequest({
+                        stream,
+                        messages,
+                        max_tokens: maxTokens,
+                        model: profile.model,
+                        chat_completion_source: selectedApiMap.source,
+                        custom_url: profile['api-url'],
+                    }, {
+                        presetName: includePreset ? profile.preset : undefined,
+                    }, extractData, signal);
+                }
+                case 'textgenerationwebui': {
+                    if (!selectedApiMap.type) {
+                        throw new Error(`API type ${selectedApiMap.selected} does not support text completions`);
+                    }
+
+                    return await context.TextCompletionService.processRequest({
+                        stream,
+                        prompt,
+                        max_tokens: maxTokens,
+                        model: profile.model,
+                        api_type: selectedApiMap.type,
+                        api_server: profile['api-url'],
+                    }, {
+                        instructName: includeInstruct ? profile.instruct : undefined,
+                        presetName: includePreset ? profile.preset : undefined,
+                        instructSettings: includeInstruct ? instructSettings : undefined,
+                    }, extractData, signal);
+                }
+                default: {
+                    throw new Error(`Unknown API type ${selectedApiMap.selected}`);
+                }
+            }
+        } catch (error) {
+            throw new Error('API request failed', { cause: error });
+        }
+    }
+
+    /**
+     * Respects allowed types.
+     * @returns {import('./connection-manager/index.js').ConnectionProfile[]}
+     */
+    static getSupportedProfiles() {
+        const context = ChuQuadrant.getContext();
+        if (context.extensionSettings.disabledExtensions.includes('connection-manager')) {
+            throw new Error('Connection Manager is not available');
+        }
+
+        const profiles = context.extensionSettings.connectionManager.profiles;
+        return profiles.filter((p) => this.isProfileSupported(p));
+    }
+
+    /**
+     * @param {import('./connection-manager/index.js').ConnectionProfile?} [profile]
+     * @returns {boolean}
+     */
+    static isProfileSupported(profile) {
+        if (!profile) {
+            return false;
+        }
+
+        const apiMap = CONNECT_API_MAP[profile.api];
+        if (!Object.hasOwn(this.getAllowedTypes(), apiMap.selected)) {
+            return false;
+        }
+
+        // Some providers not need model, like koboldcpp. But I don't want to check by provider.
+        switch (apiMap.selected) {
+            case 'openai':
+                return !!apiMap.source;
+            case 'textgenerationwebui':
+                return !!apiMap.type;
+        }
+
+        return false;
+    }
+
+    /**
+     * @param {import('./connection-manager/index.js').ConnectionProfile?} [profile]
+     * @return {import('../../script.js').ConnectAPIMap}
+     * @throws {Error}
+     */
+    static validateProfile(profile) {
+        if (!profile) {
+            throw new Error('Could not find profile.');
+        }
+        if (!profile.api) {
+            throw new Error('Select a connection profile that has an API');
+        }
+
+        const context = ChuQuadrant.getContext();
+        const selectedApiMap = context.CONNECT_API_MAP[profile.api];
+        if (!selectedApiMap) {
+            throw new Error(`Unknown API type ${profile.api}`);
+        }
+        if (!Object.hasOwn(this.getAllowedTypes(), selectedApiMap.selected)) {
+            throw new Error(`API type ${selectedApiMap.selected} is not supported. Supported types: ${Object.values(this.getAllowedTypes()).join(', ')}`);
+        }
+
+        return selectedApiMap;
+    }
+
+    /**
+     * Create profiles dropdown and updates select element accordingly. Use onChange, onCreate, unUpdate, onDelete callbacks for custom behaviour. e.g updating extension settings.
+     * @param {string} selector
+     * @param {string} initialSelectedProfileId
+     * @param {(profile?: import('./connection-manager/index.js').ConnectionProfile) => Promise<void> | void} onChange - 3 cases. 1- When user selects new profile. 2- When user deletes selected profile. 3- When user updates selected profile.
+     * @param {(profile: import('./connection-manager/index.js').ConnectionProfile) => Promise<void> | void} onCreate
+     * @param {(oldProfile: import('./connection-manager/index.js').ConnectionProfile, newProfile: import('./connection-manager/index.js').ConnectionProfile) => Promise<void> | void} unUpdate
+     * @param {(profile: import('./connection-manager/index.js').ConnectionProfile) => Promise<void> | void} onDelete
+     */
+    static handleDropdown(
+        selector,
+        initialSelectedProfileId,
+        onChange = () => { },
+        onCreate = () => { },
+        unUpdate = () => { },
+        onDelete = () => { },
+    ) {
+        const context = ChuQuadrant.getContext();
+        if (context.extensionSettings.disabledExtensions.includes('connection-manager')) {
+            throw new Error('Connection Manager is not available');
+        }
+
+        /**
+         * @type {JQuery<HTMLSelectElement>}
+         */
+        const dropdown = $(selector);
+
+        if (!dropdown || !dropdown.length) {
+            throw new Error(`Could not find dropdown with selector ${selector}`);
+        }
+
+        dropdown.empty();
+
+        // Create default option using document.createElement
+        const defaultOption = document.createElement('option');
+        defaultOption.value = '';
+        defaultOption.textContent = 'Select a Connection Profile';
+        defaultOption.dataset.i18n = 'Select a Connection Profile';
+        dropdown.append(defaultOption);
+
+        const profiles = context.extensionSettings.connectionManager.profiles;
+
+        // Create optgroups using document.createElement
+        const groups = {};
+        for (const [apiType, groupLabel] of Object.entries(this.getAllowedTypes())) {
+            const optgroup = document.createElement('optgroup');
+            optgroup.label = groupLabel;
+            groups[apiType] = optgroup;
+        }
+
+        const sortedProfilesByGroup = {};
+        for (const apiType of Object.keys(this.getAllowedTypes())) {
+            sortedProfilesByGroup[apiType] = [];
+        }
+
+        for (const profile of profiles) {
+            if (this.isProfileSupported(profile)) {
+                const apiMap = CONNECT_API_MAP[profile.api];
+                if (sortedProfilesByGroup[apiMap.selected]) {
+                    sortedProfilesByGroup[apiMap.selected].push(profile);
+                }
+            }
+        }
+
+        // Sort each group alphabetically and add to dropdown
+        for (const [apiType, groupProfiles] of Object.entries(sortedProfilesByGroup)) {
+            if (groupProfiles.length === 0) continue;
+
+            groupProfiles.sort((a, b) => a.name.localeCompare(b.name));
+
+            const group = groups[apiType];
+            for (const profile of groupProfiles) {
+                const option = document.createElement('option');
+                option.value = profile.id;
+                option.textContent = profile.name;
+                group.appendChild(option);
+            }
+        }
+
+        for (const group of Object.values(groups)) {
+            if (group.children.length > 0) {
+                dropdown.append(group);
+            }
+        }
+
+        const selectedProfile = profiles.find((p) => p.id === initialSelectedProfileId);
+        if (selectedProfile) {
+            dropdown.val(selectedProfile.id);
+        }
+
+        context.eventSource.on(context.eventTypes.CONNECTION_PROFILE_CREATED, async (profile) => {
+            const isSupported = this.isProfileSupported(profile);
+            if (!isSupported) {
+                return;
+            }
+
+            const group = groups[CONNECT_API_MAP[profile.api].selected];
+            const option = document.createElement('option');
+            option.value = profile.id;
+            option.textContent = profile.name;
+            group.appendChild(option);
+
+            await onCreate(profile);
+        });
+
+        context.eventSource.on(context.eventTypes.CONNECTION_PROFILE_UPDATED, async (oldProfile, newProfile) => {
+            const currentSelected = dropdown.val();
+            const isSelectedProfile = currentSelected === oldProfile.id;
+            await unUpdate(oldProfile, newProfile);
+
+            if (!this.isProfileSupported(newProfile)) {
+                if (isSelectedProfile) {
+                    dropdown.val('');
+                    dropdown.trigger('change');
+                }
+                return;
+            }
+
+            const group = groups[CONNECT_API_MAP[newProfile.api].selected];
+            const oldOption = group.querySelector(`option[value="${oldProfile.id}"]`);
+            if (oldOption) {
+                oldOption.remove();
+            }
+
+            const option = document.createElement('option');
+            option.value = newProfile.id;
+            option.textContent = newProfile.name;
+            group.appendChild(option);
+
+            if (isSelectedProfile) {
+                // Ackchyually, we don't need to reselect but what if id changes? It is not possible for now I couldn't stop myself.
+                dropdown.val(newProfile.id);
+                dropdown.trigger('change');
+            }
+        });
+
+        context.eventSource.on(context.eventTypes.CONNECTION_PROFILE_DELETED, async (profile) => {
+            const currentSelected = dropdown.val();
+            const isSelectedProfile = currentSelected === profile.id;
+            if (!this.isProfileSupported(profile)) {
+                return;
+            }
+
+            const group = groups[CONNECT_API_MAP[profile.api].selected];
+            const optionToRemove = group.querySelector(`option[value="${profile.id}"]`);
+            if (optionToRemove) {
+                optionToRemove.remove();
+            }
+
+            if (isSelectedProfile) {
+                dropdown.val('');
+                dropdown.trigger('change');
+            }
+
+            await onDelete(profile);
+        });
+
+        dropdown.on('change', async () => {
+            const profileId = dropdown.val();
+            const profile = context.extensionSettings.connectionManager.profiles.find((p) => p.id === profileId);
+            await onChange(profile);
+        });
+    }
+}

public/scripts/extensions/stable-diffusion/button.html

@@ -0,0 +1,8 @@
+<div id="sd_gen" class="list-group-item flex-container flexGap5">
+    <div class="fa-solid fa-paintbrush extensionsMenuExtensionButton" title="Trigger Stable Diffusion"  data-i18n="[title]Trigger Stable Diffusion"></div>
+    <span data-i18n="Generate Image">Generate Image</span>
+</div>
+<div id="sd_stop_gen" class="list-group-item flex-container flexGap5">
+    <div class="fa-solid fa-circle-stop extensionsMenuExtensionButton" title="Abort current image generation task" data-i18n="[title]Abort current image generation task"></div>
+    <span data-i18n="Stop Image Generation">Stop Image Generation</span>
+</div>

public/scripts/extensions/stable-diffusion/comfyWorkflowEditor.html

@@ -0,0 +1,41 @@
+<div id="sd_comfy_workflow_editor_template">
+    <div class="sd_comfy_workflow_editor">
+        <h3><strong>ComfyUI Workflow Editor: <span id="sd_comfy_workflow_editor_name"></span></strong></h3>
+        <div class="sd_comfy_workflow_editor_content">
+            <div class="flex-container flexFlowColumn sd_comfy_workflow_editor_workflow_container">
+                <label for="sd_comfy_workflow_editor_workflow">Workflow (JSON)</label>
+                <textarea id="sd_comfy_workflow_editor_workflow" class="text_pole wide100p textarea_compact flex1" placeholder="Insert your ComfyUI workflow here by copying the JSON data obtained via the 'Save (API Format)' option. This option becomes available after enabling 'Dev Mode' in the settings. Remember to replace specific values within your workflow with placeholders as required for your use case."></textarea>
+            </div>
+            <div class="sd_comfy_workflow_editor_placeholder_container">
+                <div>Placeholders</div>
+                <ul class="sd_comfy_workflow_editor_placeholder_list">
+                    <li data-placeholder="prompt" class="sd_comfy_workflow_editor_not_found">"%prompt%"</li>
+                    <li data-placeholder="negative_prompt" class="sd_comfy_workflow_editor_not_found">"%negative_prompt%"</li>
+                    <li data-placeholder="model" class="sd_comfy_workflow_editor_not_found">"%model%"</li>
+                    <li data-placeholder="vae" class="sd_comfy_workflow_editor_not_found">"%vae%"</li>
+                    <li data-placeholder="sampler" class="sd_comfy_workflow_editor_not_found">"%sampler%"</li>
+                    <li data-placeholder="scheduler" class="sd_comfy_workflow_editor_not_found">"%scheduler%"</li>
+                    <li data-placeholder="steps" class="sd_comfy_workflow_editor_not_found">"%steps%"</li>
+                    <li data-placeholder="scale" class="sd_comfy_workflow_editor_not_found">"%scale%"</li>
+                    <li data-placeholder="denoise" class="sd_comfy_workflow_editor_not_found">"%denoise%"</li>
+                    <li data-placeholder="clip_skip" class="sd_comfy_workflow_editor_not_found">"%clip_skip%"</li>
+                    <li data-placeholder="width" class="sd_comfy_workflow_editor_not_found">"%width%"</li>
+                    <li data-placeholder="height" class="sd_comfy_workflow_editor_not_found">"%height%"</li>
+                    <li data-placeholder="user_avatar" class="sd_comfy_workflow_editor_not_found">"%user_avatar%"</li>
+                    <li data-placeholder="char_avatar" class="sd_comfy_workflow_editor_not_found">"%char_avatar%"</li>
+                    <li><hr></li>
+                    <li data-placeholder="seed" class="sd_comfy_workflow_editor_not_found">
+                        "%seed%"
+                        <a href="javascript:;" class="notes-link"><span class="note-link-span" title="Will generate a new random seed in ChuQuadrant that is then used in the ComfyUI workflow.">?</span></a>
+                    </li>
+                </ul>
+                <div>Custom</div>
+                <div class="sd_comfy_workflow_editor_placeholder_actions">
+                    <span id="sd_comfy_workflow_editor_placeholder_add" title="Add custom placeholder">+</span>
+                </div>
+                <ul class="sd_comfy_workflow_editor_placeholder_list" id="sd_comfy_workflow_editor_placeholder_list_custom">
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/stable-diffusion/dropdown.html

@@ -0,0 +1,12 @@
+<div id="sd_dropdown">
+    <ul class="list-group">
+    <span>Send me a picture of:</span>
+        <li class="list-group-item" id="sd_you" data-value="you" data-i18n="sd_Yourself">Yourself</li>
+        <li class="list-group-item" id="sd_face" data-value="face" data-i18n="sd_Your_Face">Your Face</li>
+        <li class="list-group-item" id="sd_me" data-value="me" data-i18n="sd_Me">Me</li>
+        <li class="list-group-item" id="sd_world" data-value="world" data-i18n="sd_The_Whole_Story">The Whole Story</li>
+        <li class="list-group-item" id="sd_last" data-value="last" data-i18n="sd_The_Last_Message">The Last Message</li>
+        <li class="list-group-item" id="sd_raw_last" data-value="raw_last" data-i18n="sd_Raw_Last_Message">Raw Last Message</li>
+        <li class="list-group-item" id="sd_background" data-value="background" data-i18n="sd_Background">Background</li>
+    </ul>
+</div>

public/scripts/extensions/stable-diffusion/manifest.json

@@ -0,0 +1,14 @@
+{
+    "display_name": "Image Generation",
+    "loading_order": 10,
+    "requires": [],
+    "optional": [
+        "sd"
+    ],
+    "generate_interceptor": "SD_ProcessTriggers",
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/stable-diffusion/settings.html

@@ -0,0 +1,513 @@
+<div class="sd_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b>
+                <span data-i18n="Image Generation">Image Generation</span>
+                <a href="https://docs.ChuQuadrant.app/extensions/stable-diffusion/" class="notes-link" target="_blank">
+                    <span class="note-link-span">?</span>
+                </a>
+            </b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <label for="sd_refine_mode" class="checkbox_label" data-i18n="[title]sd_refine_mode" title="Allow to edit prompts manually before sending them to generation API">
+                <input id="sd_refine_mode" type="checkbox" />
+                <span data-i18n="sd_refine_mode_txt">Edit prompts before generation</span>
+            </label>
+            <label for="sd_function_tool" class="checkbox_label" data-i18n="[title]sd_function_tool" title="Use the function tool to automatically detect intents to generate images.">
+                <input id="sd_function_tool" type="checkbox" />
+                <span data-i18n="sd_function_tool_txt">Use function tool</span>
+            </label>
+            <label for="sd_interactive_mode" class="checkbox_label" data-i18n="[title]sd_interactive_mode" title="Automatically generate images when sending messages like 'send me a picture of cat'.">
+                <input id="sd_interactive_mode" type="checkbox" />
+                <span data-i18n="sd_interactive_mode_txt">Use interactive mode</span>
+            </label>
+            <label for="sd_multimodal_captioning" class="checkbox_label" data-i18n="[title]sd_multimodal_captioning" title="Use multimodal captioning to generate prompts for user and character portraits based on their avatars.">
+                <input id="sd_multimodal_captioning" type="checkbox" />
+                <span data-i18n="sd_multimodal_captioning_txt">Use multimodal captioning for portraits</span>
+            </label>
+            <label for="sd_free_extend" class="checkbox_label" data-i18n="[title]sd_free_extend" title="Automatically extend free mode subject prompts (not portraits or backgrounds) using a currently selected LLM.">
+                <input id="sd_free_extend" type="checkbox" />
+                <span data-i18n="sd_free_extend_txt">Extend free mode prompts</span>
+                <small data-i18n="sd_free_extend_small">(interactive/commands)</small>
+            </label>
+            <label for="sd_snap" class="checkbox_label" data-i18n="[title]sd_snap" title="Snap generation requests with a forced aspect ratio (portraits, backgrounds) to the nearest known resolution, while trying to preserve the absolute pixel counts (recommended for SDXL).">
+                <input id="sd_snap" type="checkbox" />
+                <span data-i18n="sd_snap_txt">Snap auto-adjusted resolutions</span>
+            </label>
+            <label for="sd_source" data-i18n="Source">Source</label>
+            <select id="sd_source">
+                <option value="bfl">BFL (Black Forest Labs)</option>
+                <option value="comfy">ComfyUI</option>
+                <option value="drawthings">DrawThings HTTP API</option>
+                <option value="extras">Extras API (deprecated)</option>
+                <option value="falai">FAL.AI</option>
+                <option value="huggingface">HuggingFace Inference API (serverless)</option>
+                <option value="nanogpt">NanoGPT</option>
+                <option value="novel">NovelAI Diffusion</option>
+                <option value="openai">OpenAI (DALL-E)</option>
+                <option value="pollinations">Pollinations</option>
+                <option value="vlad">SD.Next (vladmandic)</option>
+                <option value="stability">Stability AI</option>
+                <option value="auto">Stable Diffusion Web UI (AUTOMATIC1111)</option>
+                <option value="horde">Stable Horde</option>
+                <option value="togetherai">TogetherAI</option>
+            </select>
+            <div data-sd-source="auto">
+                <label for="sd_auto_url">SD Web UI URL</label>
+                <div class="flex-container flexnowrap">
+                    <input id="sd_auto_url" type="text" class="text_pole" data-i18n="[placeholder]sd_auto_url" placeholder="Example: {{auto_url}}" value="{{auto_url}}" />
+                    <div id="sd_auto_validate" class="menu_button menu_button_icon">
+                        <i class="fa-solid fa-check"></i>
+                        <span data-i18n="Connect">
+                            Connect
+                        </span>
+                    </div>
+                </div>
+                <label for="sd_auto_auth" data-i18n="Authentication (optional)">Authentication (optional)</label>
+                <input id="sd_auto_auth" type="text" class="text_pole"  data-i18n="[placeholder]Example: username:password" placeholder="Example: username:password" value="" />
+                <!-- (Original Text)<b>Important:</b> run SD Web UI with the <tt>--api</tt> flag! The server must be accessible from the ChuQuadrant host machine. -->
+                <i><b data-i18n="Important:">Important:</b></i><i data-i18n="sd_auto_auth_warning_1"> run SD Web UI with the </i><i><tt>--api</tt></i><i data-i18n="sd_auto_auth_warning_2"> flag! The server must be accessible from the ChuQuadrant host machine.</i>
+            </div>
+            <div data-sd-source="drawthings">
+                <label for="sd_drawthings_url">DrawThings API URL</label>
+                <div class="flex-container flexnowrap">
+                    <input id="sd_drawthings_url" type="text" class="text_pole" data-i18n="[placeholder]sd_drawthings_url" placeholder="Example: {{drawthings_url}}" value="{{drawthings_url}}" />
+                    <div id="sd_drawthings_validate" class="menu_button menu_button_icon">
+                        <i class="fa-solid fa-check"></i>
+                        <span data-i18n="Connect">
+                            Connect
+                        </span>
+                    </div>
+                </div>
+                <label for="sd_drawthings_auth" data-i18n="Authentication (optional)">Authentication (optional)</label>
+                <input id="sd_drawthings_auth" type="text" class="text_pole"  data-i18n="[placeholder]Example: username:password" placeholder="Example: username:password" value="" />
+                <!-- (Original Text)<b>Important:</b> run DrawThings app with HTTP API switch enabled in the UI! The server must be accessible from the ChuQuadrant host machine. -->
+                <i><b data-i18n="Important:">Important:</b></i><i data-i18n="sd_drawthings_auth_txt"> run DrawThings app with HTTP API switch enabled in the UI! The server must be accessible from the ChuQuadrant host machine.</i>
+            </div>
+            <div data-sd-source="huggingface">
+                <i>Hint: Save an API key in the Hugging Face (Text Completion) API settings to use it here.</i>
+                <label for="sd_huggingface_model_id" data-i18n="Model ID">Model ID</label>
+                <input id="sd_huggingface_model_id" type="text" class="text_pole"  data-i18n="[placeholder]e.g. black-forest-labs/FLUX.1-dev" placeholder="e.g. black-forest-labs/FLUX.1-dev" value="" />
+            </div>
+            <div data-sd-source="nanogpt">
+                <i>Hint: Save an API key in the NanoGPT (Chat Completion) API settings to use it here.</i>
+            </div>
+            <div data-sd-source="vlad">
+                <label for="sd_vlad_url">SD.Next API URL</label>
+                <div class="flex-container flexnowrap">
+                    <input id="sd_vlad_url" type="text" class="text_pole" data-i18n="[placeholder]sd_vlad_url" placeholder="Example: {{vlad_url}}" value="{{vlad_url}}" />
+                    <div id="sd_vlad_validate" class="menu_button menu_button_icon">
+                        <i class="fa-solid fa-check"></i>
+                        <span data-i18n="Connect">
+                            Connect
+                        </span>
+                    </div>
+                </div>
+                <label for="sd_vlad_auth" data-i18n="Authentication (optional)">Authentication (optional)</label>
+                <input id="sd_vlad_auth" type="text" class="text_pole"  data-i18n="[placeholder]Example: username:password" placeholder="Example: username:password" value="" />
+                <i data-i18n="The server must be accessible from the ChuQuadrant host machine.">The server must be accessible from the ChuQuadrant host machine.</i>
+            </div>
+            <div data-sd-source="horde">
+                <i data-i18n="Hint: Save an API key in AI Horde API settings to use it here.">Hint: Save an API key in AI Horde API settings to use it here.</i>
+                <label for="sd_horde_nsfw" class="checkbox_label">
+                    <input id="sd_horde_nsfw" type="checkbox" />
+                    <span data-i18n="Allow NSFW images from Horde">
+                        Allow NSFW images from Horde
+                    </span>
+                </label>
+                <label for="sd_horde_sanitize" class="checkbox_label">
+                    <input id="sd_horde_sanitize" type="checkbox" />
+                    <span data-i18n="Sanitize prompts (recommended)">
+                        Sanitize prompts (recommended)
+                    </span>
+                </label>
+            </div>
+            <div data-sd-source="novel">
+                <div class="flex-container flexFlowColumn">
+                    <label for="sd_novel_anlas_guard" class="checkbox_label flex1" data-i18n="[title]Automatically adjust generation parameters to ensure free image generations." title="Automatically adjust generation parameters to ensure free image generations.">
+                        <input id="sd_novel_anlas_guard" type="checkbox" />
+                        <span data-i18n="Avoid spending Anlas">
+                            Avoid spending Anlas
+                        </span>
+                        <span data-i18n="Opus tier" class="toggle-description">(Opus tier)</span>
+                    </label>
+                    <div id="sd_novel_view_anlas" class="menu_button menu_button_icon" data-i18n="View my Anlas">
+                        View my Anlas
+                    </div>
+                </div>
+                <i>Hint: Save an API key in the NovelAI API settings to use it here.</i>
+            </div>
+            <div data-sd-source="openai">
+                <small data-i18n="These settings only apply to DALL-E 3">These settings only apply to DALL-E 3</small>
+                <div class="flex-container">
+                    <div class="flex1">
+                        <label for="sd_openai_style" data-i18n="Image Style">Image Style</label>
+                        <select id="sd_openai_style">
+                            <option value="vivid">Vivid</option>
+                            <option value="natural">Natural</option>
+                        </select>
+                    </div>
+                    <div class="flex1">
+                        <label for="sd_openai_quality" data-i18n="Image Quality">Image Quality</label>
+                        <select id="sd_openai_quality">
+                            <option value="standard" data-i18n="Standard">Standard</option>
+                            <option value="hd" data-i18n="HD">HD</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div data-sd-source="comfy">
+                <label for="sd_comfy_url">ComfyUI URL</label>
+                <div class="flex-container flexnowrap">
+                    <input id="sd_comfy_url" type="text" class="text_pole" data-i18n="[placeholder]sd_comfy_url" placeholder="Example: {{comfy_url}}" value="{{comfy_url}}" />
+                    <div id="sd_comfy_validate" class="menu_button menu_button_icon">
+                        <i class="fa-solid fa-check"></i>
+                        <span data-i18n="Connect">
+                            Connect
+                        </span>
+                    </div>
+                </div>
+                <p><i><b data-i18n="Important:">Important:</b></i><i data-i18n="The server must be accessible from the ChuQuadrant host machine."> The server must be accessible from the ChuQuadrant host machine.</i></p>
+                <label for="sd_comfy_workflow">ComfyUI Workflow</label>
+                <div class="flex-container flexnowrap">
+                    <select id="sd_comfy_workflow" class="flex1 text_pole"></select>
+                    <div id="sd_comfy_open_workflow_editor" class="menu_button menu_button_icon" data-i18n="[title]Open workflow editor" title="Open workflow editor">
+                        <i class="fa-solid fa-pen-to-square"></i>
+                    </div>
+                    <div id="sd_comfy_new_workflow" class="menu_button menu_button_icon" data-i18n="[title]Create new workflow" title="Create new workflow">
+                        <i class="fa-solid fa-plus"></i>
+                    </div>
+                    <div id="sd_comfy_delete_workflow" class="menu_button menu_button_icon" data-i18n="[title]Delete workflow" title="Delete workflow">
+                        <i class="fa-solid fa-trash-can"></i>
+                    </div>
+                </div>
+            </div>
+            <div data-sd-source="pollinations">
+                <p>
+                    <a href="https://pollinations.ai">Pollinations.ai</a>
+                </p>
+                <div class="flex-container">
+                    <label class="flex1 checkbox_label" for="sd_pollinations_enhance" title="Enables prompt enhancing (passes prompts through an LLM to add detail).">
+                        <input id="sd_pollinations_enhance" type="checkbox" />
+                        <span data-i18n="Enhance">
+                            Enhance
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div data-sd-source="stability">
+                <div class="flex-container flexnowrap alignItemsBaseline marginBot5">
+                    <strong class="flex1" data-i18n="API Key">API Key</strong>
+                    <div id="sd_stability_key" class="menu_button menu_button_icon">
+                        <i class="fa-fw fa-solid fa-key"></i>
+                        <span data-i18n="Click to set">Click to set</span>
+                    </div>
+                </div>
+                <div class="marginBot5">
+                    <i data-i18n="You can find your API key in the Stability AI dashboard.">
+                        You can find your API key in the Stability AI dashboard.
+                    </i>
+                </div>
+
+                <div class="flex-container">
+                    <div class="flex1">
+                        <label for="sd_stability_style_preset" data-i18n="Style Preset">Style Preset</label>
+                        <select id="sd_stability_style_preset">
+                            <option value="anime">Anime</option>
+                            <option value="3d-model">3D Model</option>
+                            <option value="analog-film">Analog Film</option>
+                            <option value="cinematic">Cinematic</option>
+                            <option value="comic-book">Comic Book</option>
+                            <option value="digital-art">Digital Art</option>
+                            <option value="enhance">Enhance</option>
+                            <option value="fantasy-art">Fantasy Art</option>
+                            <option value="isometric">Isometric</option>
+                            <option value="line-art">Line Art</option>
+                            <option value="low-poly">Low Poly</option>
+                            <option value="modeling-compound">Modeling Compound</option>
+                            <option value="neon-punk">Neon Punk</option>
+                            <option value="origami">Origami</option>
+                            <option value="photographic">Photographic</option>
+                            <option value="pixel-art">Pixel Art</option>
+                            <option value="tile-texture">Tile Texture</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div data-sd-source="bfl">
+                <div class="flex-container flexnowrap alignItemsBaseline marginBot5">
+                    <a href="https://api.bfl.ml/" target="_blank" rel="noopener noreferrer">
+                        <strong data-i18n="API Key">API Key</strong>
+                        <i class="fa-solid fa-share-from-square"></i>
+                    </a>
+                    <span class="expander"></span>
+                    <div id="sd_bfl_key" class="menu_button menu_button_icon">
+                        <i class="fa-fw fa-solid fa-key"></i>
+                        <span data-i18n="Click to set">Click to set</span>
+                    </div>
+                </div>
+                <label class="checkbox_label marginBot5" for="sd_bfl_upsampling" title="Whether to perform upsampling on the prompt. If active, automatically modifies the prompt for more creative generation.">
+                    <input id="sd_bfl_upsampling" type="checkbox" />
+                    <span data-i18n="Prompt Upsampling">
+                        Prompt Upsampling
+                    </span>
+                </label>
+            </div>
+
+            <div data-sd-source="falai">
+                <div class="flex-container flexnowrap alignItemsBaseline marginBot5">
+                    <a href="https://fal.ai/dashboard" target="_blank" rel="noopener noreferrer">
+                        <strong data-i18n="API Key">API Key</strong>
+                        <i class="fa-solid fa-share-from-square"></i>
+                    </a>
+                    <span class="expander"></span>
+                    <div id="sd_falai_key" class="menu_button menu_button_icon">
+                        <i class="fa-fw fa-solid fa-key"></i>
+                        <span data-i18n="Click to set">Click to set</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex-container">
+                <div class="flex1">
+                    <label for="sd_model" data-i18n="Model">Model</label>
+                    <select id="sd_model"></select>
+                </div>
+
+                <div class="flex1" data-sd-source="comfy,auto">
+                    <label for="sd_vae">VAE</label>
+                    <select id="sd_vae"></select>
+                </div>
+            </div>
+
+            <div class="flex-container">
+                <div class="flex1" data-sd-source="extras,horde,auto,drawthings,novel,vlad,comfy">
+                    <label for="sd_sampler" data-i18n="Sampling method">Sampling method</label>
+                    <select id="sd_sampler"></select>
+                </div>
+
+                <div class="flex1" data-sd-source="comfy,auto,novel">
+                    <label for="sd_scheduler" data-i18n="Scheduler">Scheduler</label>
+                    <select id="sd_scheduler"></select>
+                </div>
+            </div>
+
+            <div class="flex-container">
+                <div class="flex1">
+                    <label for="sd_resolution" data-i18n="Resolution">Resolution</label>
+                    <select id="sd_resolution"><!-- Populated in JS --></select>
+                </div>
+
+                <div class="flex1" data-sd-source="auto,vlad,drawthings">
+                    <label for="sd_hr_upscaler" data-i18n="Upscaler">Upscaler</label>
+                    <select id="sd_hr_upscaler"></select>
+                </div>
+            </div>
+
+            <div class="flex-container">
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="Sampling steps">Sampling steps</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_steps" name="sd_steps" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" >
+                    <input class="neo-range-input" type="number" id="sd_steps_value" data-for="sd_steps" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="CFG Scale">CFG Scale</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_scale" name="sd_scale" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" >
+                    <input class="neo-range-input" type="number" id="sd_scale_value" data-for="sd_scale" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" >
+                </div>
+            </div>
+
+            <div id="sd_dimensions_block" class="flex-container">
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="Width">Width</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_width" name="sd_width" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" >
+                    <input class="neo-range-input" type="number" id="sd_width_value" data-for="sd_width" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
+                    <small>
+                        <span data-i18n="Height">Height</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_height" name="sd_height" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" >
+                    <input class="neo-range-input" type="number" id="sd_height_value" data-for="sd_height" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" >
+                </div>
+
+                <div id="sd_swap_dimensions" class="right_menu_button" title="Swap width and height" data-i18n="[title]Swap width and height">
+                    <i class="fa-solid fa-arrow-right-arrow-left"></i>
+                </div>
+            </div>
+
+            <div class="flex-container">
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad,drawthings,novel">
+                    <small>
+                        <span data-i18n="Upscale by">Upscale by</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_hr_scale" name="sd_hr_scale" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" >
+                    <input class="neo-range-input" type="number" id="sd_hr_scale_value" data-for="sd_hr_scale" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad,comfy">
+                    <small>
+                        <span data-i18n="Denoising strength">Denoising strength</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_denoising_strength" name="sd_denoising_strength" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" >
+                    <input class="neo-range-input" type="number" id="sd_denoising_strength_value" data-for="sd_denoising_strength" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad">
+                    <small>
+                        <span data-i18n="Hires steps (2nd pass)">Hires steps (2nd pass)</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_hr_second_pass_steps" name="sd_hr_second_pass_steps" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}"  >
+                    <input class="neo-range-input" type="number" id="sd_hr_second_pass_steps_value" data-for="sd_hr_second_pass_steps" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}" >
+                </div>
+
+                <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad,comfy,horde,drawthings,extras">
+                    <small>
+                        <span data-i18n="CLIP Skip">CLIP Skip</span>
+                    </small>
+                    <input class="neo-range-slider" type="range" id="sd_clip_skip" name="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" >
+                    <input class="neo-range-input" type="number" id="sd_clip_skip_value" data-for="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" >
+                </div>
+            </div>
+
+            <div class="flex-container marginTopBot5" data-sd-source="auto,vlad,extras,horde,drawthings">
+                <label class="flex1 checkbox_label">
+                    <input id="sd_restore_faces" type="checkbox" />
+                    <small data-i18n="Restore Faces">Restore Faces</small>
+                </label>
+                <label class="flex1 checkbox_label">
+                    <input id="sd_enable_hr" type="checkbox" />
+                    <small data-i18n="Hires. Fix">Hires. Fix</small>
+                </label>
+                <label data-sd-source="horde" for="sd_horde_karras" class="flex1 checkbox_label">
+                    <input id="sd_horde_karras" type="checkbox" />
+                    <small data-i18n="Karras">Karras</small>
+                    <i class="fa-solid fa-info-circle fa-sm opacity50p" data-i18n="[title]Not all samplers supported." title="Not all samplers supported."></i>
+                </label>
+            </div>
+
+            <div class="flex-container marginTopBot5" data-sd-source="auto,vlad">
+                <label for="sd_adetailer_face" class="flex1 checkbox_label" data-i18n="[title]sd_adetailer_face" title="Use ADetailer with face model during the generation. The ADetailer extension must be installed on the backend.">
+                    <input id="sd_adetailer_face" type="checkbox" />
+                    <small data-i18n="Use ADetailer (Face)">Use ADetailer (Face)</small>
+                </label>
+                <div class="flex1">
+                    <!-- I will be useful later! -->
+                </div>
+            </div>
+
+            <div class="flex-container marginTopBot5" data-sd-source="novel">
+                <label class="flex1 checkbox_label" data-i18n="[title]SMEA versions of samplers are modified to perform better at high resolution." title="SMEA versions of samplers are modified to perform better at high resolution.">
+                    <input id="sd_novel_sm" type="checkbox" />
+                    <small data-i18n="SMEA">SMEA</small>
+                </label>
+                <label class="flex1 checkbox_label" data-i18n="[title]DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions." title="DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions.">
+                    <input id="sd_novel_sm_dyn" type="checkbox" />
+                    <small data-i18n="DYN">DYN</small>
+                </label>
+                <label class="flex1 checkbox_label" for="sd_novel_decrisper" title="Reduce artifacts caused by high guidance values.">
+                    <input id="sd_novel_decrisper" type="checkbox" />
+                    <small data-i18n="Decrisper">Decrisper</small>
+                </label>
+            </div>
+
+            <div data-sd-source="novel,togetherai,pollinations,comfy,drawthings,vlad,auto,horde,extras,stability,bfl" class="marginTop5">
+                <label for="sd_seed">
+                    <span data-i18n="Seed">Seed</span>
+                    <small data-i18n="(-1 for random)">(-1 for random)</small>
+                </label>
+                <input id="sd_seed" type="number" class="text_pole" min="-1" max="9999999999" step="1" />
+            </div>
+
+            <hr>
+            <h4  data-i18n="[title]Preset for prompt prefix and negative prompt" title="Preset for prompt prefix and negative prompt">
+                <span data-i18n="Style">Style</span>
+            </h4>
+            <div class="flex-container">
+                <select id="sd_style" class="flex1 text_pole"></select>
+                <div id="sd_save_style" data-i18n="[title]Save style" title="Save style" class="menu_button">
+                    <i class="fa-solid fa-save"></i>
+                </div>
+                <div id="sd_delete_style" data-i18n="[title]Delete style" title="Delete style" class="menu_button">
+                    <i class="fa-solid fa-trash-can"></i>
+                </div>
+            </div>
+            <label for="sd_prompt_prefix" data-i18n="Common prompt prefix">Common prompt prefix</label>
+            <textarea id="sd_prompt_prefix" class="text_pole textarea_compact autoSetHeight" data-i18n="[placeholder]sd_prompt_prefix_placeholder" placeholder="Use {prompt} to specify where the generated prompt will be inserted"></textarea>
+            <label for="sd_negative_prompt" data-i18n="Negative common prompt prefix">Negative common prompt prefix</label>
+            <textarea id="sd_negative_prompt" class="text_pole textarea_compact autoSetHeight"></textarea>
+            <div id="sd_character_prompt_block">
+                <label for="sd_character_prompt" data-i18n="Character-specific prompt prefix">Character-specific prompt prefix</label>
+                <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
+                <textarea id="sd_character_prompt" class="text_pole textarea_compact autoSetHeight" data-i18n="[placeholder]sd_character_prompt_placeholder" placeholder="Any characteristics that describe the currently selected character. Will be added after a common prompt prefix.&#10;Example: female, green eyes, brown hair, pink shirt"></textarea>
+                <label for="sd_character_negative_prompt" data-i18n="Character-specific negative prompt prefix">Character-specific negative prompt prefix</label>
+                <small data-i18n="Won't be used in groups.">Won't be used in groups.</small>
+                <textarea id="sd_character_negative_prompt" class="text_pole textarea_compact autoSetHeight" data-i18n="[placeholder]sd_character_negative_prompt_placeholder" placeholder="Any characteristics that should not appear for the selected character. Will be added after a negative common prompt prefix.&#10;Example: jewellery, shoes, glasses"></textarea>
+                <label for="sd_character_prompt_share" class="checkbox_label flexWrap marginTop5">
+                    <input id="sd_character_prompt_share" type="checkbox" />
+                    <span data-i18n="Shareable">
+                        Shareable
+                    </span>
+                    <small class="flexBasis100p">
+                        When checked, character-specific prompts will be saved with the character card data.
+                    </small>
+                </label>
+            </div>
+            <hr>
+            <h4 data-i18n="Chat Message Visibility (by source)">
+                Chat Message Visibility (by source)
+            </h4>
+            <small data-i18n="Uncheck to hide the extension's messages in chat prompts.">
+                Uncheck to hide the extension's messages in chat prompts.
+            </small>
+            <div class="flex-container flexFlowColumn marginTopBot5 flexGap10">
+                <label for="sd_wand_visible" class="checkbox_label">
+                    <span class="flex1 flex-container alignItemsCenter">
+                        <i class="fa-solid fa-wand-magic-sparkles fa-fw"></i>
+                        <span data-i18n="Extensions Menu">Extensions Menu</span>
+                    </span>
+                    <input id="sd_wand_visible" type="checkbox" />
+                </label>
+                <label for="sd_command_visible" class="checkbox_label">
+                    <span class="flex1 flex-container alignItemsCenter">
+                        <i class="fa-solid fa-terminal fa-fw"></i>
+                        <span data-i18n="Slash Command">Slash Command</span>
+                    </span>
+                    <input id="sd_command_visible" type="checkbox" />
+                </label>
+                <label for="sd_interactive_visible" class="checkbox_label">
+                    <span class="flex1 flex-container alignItemsCenter">
+                        <i class="fa-solid fa-message fa-fw"></i>
+                        <span data-i18n="Interactive Mode">Interactive Mode</span>
+                    </span>
+                    <input id="sd_interactive_visible" type="checkbox" />
+                </label>
+                <label for="sd_tool_visible" class="checkbox_label">
+                    <span class="flex1 flex-container alignItemsCenter">
+                        <i class="fa-solid fa-wrench fa-fw"></i>
+                        <span data-i18n="Function Tool">Function Tool</span>
+                    </span>
+                    <input id="sd_tool_visible" type="checkbox" />
+                </label>
+            </div>
+        </div>
+    </div>
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="Image Prompt Templates">Image Prompt Templates</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div id="sd_prompt_templates" class="inline-drawer-content">
+        </div>
+    </div>
+</div>

public/scripts/extensions/stable-diffusion/style.css

@@ -0,0 +1,93 @@
+.sd_settings label:not(.checkbox_label) {
+    display: block;
+}
+
+#sd_dropdown {
+    z-index: 30000;
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+}
+
+#sd_comfy_open_workflow_editor {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    width: fit-content;
+}
+
+#sd_comfy_workflow_editor_template {
+    height: 100%;
+}
+
+.sd_comfy_workflow_editor {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.sd_comfy_workflow_editor_content {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+}
+
+.sd_comfy_workflow_editor_workflow_container {
+    flex: 1 1 auto;
+}
+
+#sd_comfy_workflow_editor_workflow {
+    font-family: monospace;
+}
+
+.sd_comfy_workflow_editor_placeholder_container {
+    flex: 0 0 auto;
+}
+
+.sd_comfy_workflow_editor_placeholder_list {
+    font-size: x-small;
+    list-style: none;
+    margin: 5px 0;
+    padding: 3px 5px;
+    text-align: left;
+}
+
+.sd_comfy_workflow_editor_placeholder_list>li[data-placeholder]:before {
+    content: "✅ ";
+}
+
+.sd_comfy_workflow_editor_placeholder_list>li.sd_comfy_workflow_editor_not_found:before {
+    content: "❌ ";
+}
+
+.sd_comfy_workflow_editor_placeholder_list>li>.notes-link {
+    cursor: help;
+}
+
+.sd_comfy_workflow_editor_placeholder_list input {
+    font-size: inherit;
+    margin: 0;
+}
+.sd_comfy_workflow_editor_custom_remove, #sd_comfy_workflow_editor_placeholder_add {
+    cursor: pointer;
+    font-weight: bold;
+    width: 1em;
+    opacity: 0.5;
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.sd_settings .flex1.checkbox_label input[type="checkbox"] {
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+#sd_dimensions_block {
+    position: relative;
+}
+
+#sd_swap_dimensions {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+}

public/scripts/extensions/token-counter/index.js

@@ -0,0 +1,132 @@
+import { main_api } from '../../../script.js';
+import { getContext } from '../../extensions.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { getFriendlyTokenizerName, getTextTokens, getTokenCountAsync, tokenizers } from '../../tokenizers.js';
+import { resetScrollHeight, debounce } from '../../utils.js';
+import { debounce_timeout } from '../../constants.js';
+import { POPUP_TYPE, callGenericPopup } from '../../popup.js';
+import { renderExtensionTemplateAsync } from '../../extensions.js';
+import { t } from '../../i18n.js';
+
+function rgb2hex(rgb) {
+    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+    return (rgb && rgb.length === 4) ? '#' +
+        ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
+        ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
+        ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
+}
+
+$('button').click(function () {
+    var hex = rgb2hex($('input').val());
+    $('.result').html(hex);
+});
+
+async function doTokenCounter() {
+    const { tokenizerName, tokenizerId } = getFriendlyTokenizerName(main_api);
+    const html = await renderExtensionTemplateAsync('token-counter', 'window', { tokenizerName });
+
+    const dialog = $(html);
+    const countDebounced = debounce(async () => {
+        const text = String($('#token_counter_textarea').val());
+        const ids = main_api == 'openai' ? getTextTokens(tokenizers.OPENAI, text) : getTextTokens(tokenizerId, text);
+
+        if (Array.isArray(ids) && ids.length > 0) {
+            $('#token_counter_ids').text(`[${ids.join(', ')}]`);
+            $('#token_counter_result').text(ids.length);
+
+            if (Object.hasOwnProperty.call(ids, 'chunks')) {
+                drawChunks(Object.getOwnPropertyDescriptor(ids, 'chunks').value, ids);
+            }
+        } else {
+            const count = await getTokenCountAsync(text);
+            $('#token_counter_ids').text('—');
+            $('#token_counter_result').text(count);
+            $('#tokenized_chunks_display').text('—');
+        }
+
+        if (!CSS.supports('field-sizing', 'content')) {
+            await resetScrollHeight($('#token_counter_textarea'));
+            await resetScrollHeight($('#token_counter_ids'));
+        }
+    }, debounce_timeout.relaxed);
+    dialog.find('#token_counter_textarea').on('input', () => countDebounced());
+
+    callGenericPopup(dialog, POPUP_TYPE.TEXT, '', { wide: true, large: true, allowVerticalScrolling: true });
+}
+
+/**
+ * Draws the tokenized chunks in the UI
+ * @param {string[]} chunks
+ * @param {number[]} ids
+ */
+function drawChunks(chunks, ids) {
+    const pastelRainbow = [
+        //main_text_color,
+        //italics_text_color,
+        //quote_text_color,
+        '#FFB3BA',
+        '#FFDFBA',
+        '#FFFFBA',
+        '#BFFFBF',
+        '#BAE1FF',
+        '#FFBAF3',
+    ];
+    $('#tokenized_chunks_display').empty();
+
+    for (let i = 0; i < chunks.length; i++) {
+        let chunk = chunks[i].replace(/[▁Ġ]/g, ' '); // This is a leading space in sentencepiece. More info: Lower one eighth block (U+2581)
+
+        // If <0xHEX>, decode it
+        if (/^<0x[0-9A-F]+>$/i.test(chunk)) {
+            const code = parseInt(chunk.substring(3, chunk.length - 1), 16);
+            chunk = String.fromCodePoint(code);
+        }
+
+        // If newline - insert a line break
+        if (chunk === '\n') {
+            $('#tokenized_chunks_display').append('<br>');
+            continue;
+        }
+
+        const color = pastelRainbow[i % pastelRainbow.length];
+        const chunkHtml = $('<code></code>');
+        chunkHtml.css('background-color', color);
+        chunkHtml.text(chunk);
+        chunkHtml.attr('title', ids[i]);
+        $('#tokenized_chunks_display').append(chunkHtml);
+    }
+}
+
+async function doCount() {
+    // get all of the messages in the chat
+    const context = getContext();
+    const messages = context.chat.filter(x => x.mes && !x.is_system).map(x => x.mes);
+
+    //concat all the messages into a single string
+    const allMessages = messages.join(' ');
+
+    console.debug('All messages:', allMessages);
+
+    //toastr success with the token count of the chat
+    const count = await getTokenCountAsync(allMessages);
+    toastr.success(`Token count: ${count}`);
+    return count;
+}
+
+jQuery(() => {
+    const buttonHtml = `
+        <div id="token_counter" class="list-group-item flex-container flexGap5">
+            <div class="fa-solid fa-1 extensionsMenuExtensionButton" /></div>` +
+            t`Token Counter` +
+        '</div>';
+    $('#token_counter_wand_container').append(buttonHtml);
+    $('#token_counter').on('click', doTokenCounter);
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'count',
+        callback: async () => String(await doCount()),
+        returns: 'number of tokens',
+        helpString: 'Counts the number of tokens in the current chat.',
+    }));
+
+});

public/scripts/extensions/token-counter/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Token Counter",
+    "loading_order": 15,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/token-counter/style.css

@@ -0,0 +1,11 @@
+#tokenized_chunks_display > code {
+    color: black;
+    text-shadow: none;
+    padding: 2px;
+    display: inline-block;
+}
+
+#token_counter_textarea,
+#token_counter_ids {
+    field-sizing: content;
+}

public/scripts/extensions/token-counter/window.html

@@ -0,0 +1,16 @@
+<div class="wide100p">
+    <h3 data-i18n="Token Counter">Token Counter</h3>
+    <div class="justifyLeft flex-container flexFlowColumn">
+        <h4 data-i18n="Type / paste in the box below to see the number of tokens in the text.">Type / paste in the box below to see the number of tokens in the text.</h4>
+        <p><span data-i18n="Selected tokenizer:">Selected tokenizer:</span> {{tokenizerName}}</p>
+        <div data-i18n="Input:">Input:</div>
+        <textarea id="token_counter_textarea" class="wide100p textarea_compact" rows="1"></textarea>
+        <div><span data-i18n="Tokens:">Tokens:</span> <span id="token_counter_result">0</span></div>
+        <hr>
+        <div data-i18n="Tokenized text:">Tokenized text:</div>
+        <div id="tokenized_chunks_display" class="wide100p">—</div>
+        <hr>
+        <div data-i18n="Token IDs:">Token IDs:</div>
+        <textarea id="token_counter_ids" class="wide100p textarea_compact" readonly rows="1">—</textarea>
+    </div>
+</div>

public/scripts/extensions/translate/buttons.html

@@ -0,0 +1,8 @@
+<div id="translate_chat" class="list-group-item flex-container flexGap5">
+    <div class="fa-solid fa-language extensionsMenuExtensionButton"></div>
+    <span data-i18n="ext_translate_btn_chat">Translate Chat</span>
+</div>
+<div id="translate_input_message" class="list-group-item flex-container flexGap5">
+    <div class="fa-solid fa-keyboard extensionsMenuExtensionButton"></div>
+    <span data-i18n="ext_translate_btn_input">Translate Input</span>
+</div>

public/scripts/extensions/translate/deleteConfirmation.html

@@ -0,0 +1 @@
+<h3 data-i18n="ext_translate_delete_confirm_1">Are you sure?</h3><span data-i18n="ext_translate_delete_confirm_2">This will remove translated text from all messages in the current chat. This action cannot be undone.</span>

public/scripts/extensions/translate/index.html

@@ -0,0 +1,42 @@
+<div class="translation_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b data-i18n="ext_translate_title">Chat Translation</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <label for="translation_auto_mode" class="checkbox_label" data-i18n="ext_translate_auto_mode">Auto-mode</label>
+            <select id="translation_auto_mode">
+                <option data-i18n="ext_translate_mode_none" value="none">None</option>
+                <option data-i18n="ext_translate_mode_responses" value="responses">Translate responses</option>
+                <option data-i18n="ext_translate_mode_inputs" value="inputs">Translate inputs</option>
+                <option data-i18n="ext_translate_mode_both" value="both">Translate both</option>
+            </select>
+            <label data-i18n="ext_translate_mode_provider" for="translation_provider">Provider</label>
+            <div class="flex-container gap5px flexnowrap marginBot5">
+                <select id="translation_provider" name="provider" class="margin0 text_pole flex2">
+                    <option value="libre">LibreTranslate</option>
+                    <option value="google">Google</option>
+                    <option value="lingva">Lingva</option>
+                    <option value="deepl">DeepL API</option>
+                    <option value="deeplx">DeepLX</option>
+                    <option value="bing">Bing</option>
+                    <option value="oneringtranslator">OneRingTranslator</option>
+                    <option value="yandex">Yandex</option>
+                <select>
+                <select id="deepl_api_endpoint" class="margin0 text_pole flex1" title="DeepL API Endpoint">
+                    <option value="free">Free</option>
+                    <option value="pro">Pro</option>
+                </select>
+                <div id="translate_key_button" class="menu_button fa-solid fa-key margin0"></div>
+                <div id="translate_url_button" class="menu_button fa-solid fa-link margin0"></div>
+            </div>
+            <label data-i18n="ext_translate_target_lang" for="translation_target_language">Target Language</label>
+            <select id="translation_target_language" name="target_language"></select>
+            <div id="translation_clear" class="menu_button">
+                <i class="fa-solid fa-trash-can"></i>
+                <span data-i18n="ext_translate_clear">Clear Translations</span>
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/translate/index.js

@@ -0,0 +1,849 @@
+export { translate };
+
+import {
+    eventSource,
+    event_types,
+    getRequestHeaders,
+    reloadCurrentChat,
+    saveSettingsDebounced,
+    substituteParams,
+    updateMessageBlock,
+} from '../../../script.js';
+import { extension_settings, getContext, renderExtensionTemplateAsync } from '../../extensions.js';
+import { POPUP_RESULT, POPUP_TYPE, callGenericPopup } from '../../popup.js';
+import { updateReasoningUI } from '../../reasoning.js';
+import { findSecret, secret_state, writeSecret } from '../../secrets.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { enumTypes, SlashCommandEnumValue } from '../../slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { splitRecursive } from '../../utils.js';
+
+export const autoModeOptions = {
+    NONE: 'none',
+    RESPONSES: 'responses',
+    INPUT: 'inputs',
+    BOTH: 'both',
+};
+
+const incomingTypes = [autoModeOptions.RESPONSES, autoModeOptions.BOTH];
+const outgoingTypes = [autoModeOptions.INPUT, autoModeOptions.BOTH];
+
+const defaultSettings = {
+    target_language: 'en',
+    internal_language: 'en',
+    provider: 'google',
+    auto_mode: autoModeOptions.NONE,
+    deepl_endpoint: 'free',
+};
+
+const languageCodes = {
+    'Afrikaans': 'af',
+    'Albanian': 'sq',
+    'Amharic': 'am',
+    'Arabic': 'ar',
+    'Armenian': 'hy',
+    'Azerbaijani': 'az',
+    'Basque': 'eu',
+    'Belarusian': 'be',
+    'Bengali': 'bn',
+    'Bosnian': 'bs',
+    'Bulgarian': 'bg',
+    'Catalan': 'ca',
+    'Cebuano': 'ceb',
+    'Chinese (Simplified)': 'zh-CN',
+    'Chinese (Traditional)': 'zh-TW',
+    'Corsican': 'co',
+    'Croatian': 'hr',
+    'Czech': 'cs',
+    'Danish': 'da',
+    'Dutch': 'nl',
+    'English': 'en',
+    'Esperanto': 'eo',
+    'Estonian': 'et',
+    'Finnish': 'fi',
+    'French': 'fr',
+    'Frisian': 'fy',
+    'Galician': 'gl',
+    'Georgian': 'ka',
+    'German': 'de',
+    'Greek': 'el',
+    'Gujarati': 'gu',
+    'Haitian Creole': 'ht',
+    'Hausa': 'ha',
+    'Hawaiian': 'haw',
+    'Hebrew': 'iw',
+    'Hindi': 'hi',
+    'Hmong': 'hmn',
+    'Hungarian': 'hu',
+    'Icelandic': 'is',
+    'Igbo': 'ig',
+    'Indonesian': 'id',
+    'Irish': 'ga',
+    'Italian': 'it',
+    'Japanese': 'ja',
+    'Javanese': 'jw',
+    'Kannada': 'kn',
+    'Kazakh': 'kk',
+    'Khmer': 'km',
+    'Korean': 'ko',
+    'Kurdish': 'ku',
+    'Kyrgyz': 'ky',
+    'Lao': 'lo',
+    'Latin': 'la',
+    'Latvian': 'lv',
+    'Lithuanian': 'lt',
+    'Luxembourgish': 'lb',
+    'Macedonian': 'mk',
+    'Malagasy': 'mg',
+    'Malay': 'ms',
+    'Malayalam': 'ml',
+    'Maltese': 'mt',
+    'Maori': 'mi',
+    'Marathi': 'mr',
+    'Mongolian': 'mn',
+    'Myanmar (Burmese)': 'my',
+    'Nepali': 'ne',
+    'Norwegian': 'no',
+    'Nyanja (Chichewa)': 'ny',
+    'Pashto': 'ps',
+    'Persian': 'fa',
+    'Polish': 'pl',
+    'Portuguese (Portugal)': 'pt-PT',
+    'Portuguese (Brazil)': 'pt-BR',
+    'Punjabi': 'pa',
+    'Romanian': 'ro',
+    'Russian': 'ru',
+    'Samoan': 'sm',
+    'Scots Gaelic': 'gd',
+    'Serbian': 'sr',
+    'Sesotho': 'st',
+    'Shona': 'sn',
+    'Sindhi': 'sd',
+    'Sinhala (Sinhalese)': 'si',
+    'Slovak': 'sk',
+    'Slovenian': 'sl',
+    'Somali': 'so',
+    'Spanish': 'es',
+    'Sundanese': 'su',
+    'Swahili': 'sw',
+    'Swedish': 'sv',
+    'Tagalog (Filipino)': 'tl',
+    'Tajik': 'tg',
+    'Tamil': 'ta',
+    'Telugu': 'te',
+    'Thai': 'th',
+    'Turkish': 'tr',
+    'Ukrainian': 'uk',
+    'Urdu': 'ur',
+    'Uzbek': 'uz',
+    'Vietnamese': 'vi',
+    'Welsh': 'cy',
+    'Xhosa': 'xh',
+    'Yiddish': 'yi',
+    'Yoruba': 'yo',
+    'Zulu': 'zu',
+};
+
+const KEY_REQUIRED = ['deepl', 'libre'];
+const LOCAL_URL = ['libre', 'oneringtranslator', 'deeplx', 'lingva'];
+
+function showKeysButton() {
+    const providerRequiresKey = KEY_REQUIRED.includes(extension_settings.translate.provider);
+    const providerOptionalUrl = LOCAL_URL.includes(extension_settings.translate.provider);
+    $('#translate_key_button').toggle(providerRequiresKey);
+    $('#translate_key_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider]));
+    $('#translate_url_button').toggle(providerOptionalUrl);
+    $('#translate_url_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider + '_url']));
+    $('#deepl_api_endpoint').toggle(extension_settings.translate.provider === 'deepl');
+}
+
+function loadSettings() {
+    for (const key in defaultSettings) {
+        if (!Object.hasOwn(extension_settings.translate, key)) {
+            extension_settings.translate[key] = defaultSettings[key];
+        }
+    }
+
+    $(`#translation_provider option[value="${extension_settings.translate.provider}"]`).attr('selected', 'true');
+    $(`#translation_target_language option[value="${extension_settings.translate.target_language}"]`).attr('selected', 'true');
+    $(`#translation_auto_mode option[value="${extension_settings.translate.auto_mode}"]`).attr('selected', 'true');
+    $('#deepl_api_endpoint').val(extension_settings.translate.deepl_endpoint).toggle(extension_settings.translate.provider === 'deepl');
+    showKeysButton();
+}
+
+/**
+ * Check if the swipe is being generated for a message.
+ * @param {string|number} messageId Message ID
+ * @returns {boolean} Whether the swipe is being generated
+ */
+function isGeneratingSwipe(messageId) {
+    return $(`#chat .mes[mesid="${messageId}"] .mes_text`).text() === '...';
+}
+
+async function translateImpersonate(text) {
+    const translatedText = await translate(text, extension_settings.translate.target_language);
+    $('#send_textarea').val(translatedText);
+}
+
+/**
+ * Translates the contents of an incoming message.
+ * @param {string | number} messageId Message ID
+ * @returns {Promise<void>}
+ */
+async function translateIncomingMessage(messageId) {
+    const context = getContext();
+    const message = context.chat[messageId];
+
+    if (!message) {
+        return;
+    }
+
+    if (typeof message.extra !== 'object') {
+        message.extra = {};
+    }
+
+    if (isGeneratingSwipe(messageId)) {
+        return;
+    }
+
+    const textToTranslate = substituteParams(message.mes, context.name1, message.name);
+    const translation = await translate(textToTranslate, extension_settings.translate.target_language);
+    message.extra.display_text = translation;
+
+    updateMessageBlock(Number(messageId), message);
+}
+
+/**
+ * Translates the reasoning of an incoming message.
+ * @param {string | number} messageId
+ * @returns {Promise<boolean>} translated or not
+ */
+async function translateIncomingMessageReasoning(messageId) {
+    const context = getContext();
+    const message = context.chat[messageId];
+
+    if (!message) {
+        return false;
+    }
+
+    if (typeof message.extra !== 'object') {
+        message.extra = {};
+    }
+
+    if (!message.extra.reasoning || isGeneratingSwipe(messageId)) {
+        return false;
+    }
+
+    const textToTranslate = substituteParams(message.extra.reasoning, context.name1, message.name);
+    const translation = await translate(textToTranslate, extension_settings.translate.target_language);
+    message.extra.reasoning_display_text = translation;
+
+    updateReasoningUI(Number(messageId));
+    return true;
+}
+
+async function translateProviderOneRing(text, lang) {
+    let from_lang = lang == extension_settings.translate.internal_language
+        ? extension_settings.translate.target_language
+        : extension_settings.translate.internal_language;
+
+    const response = await fetch('/api/translate/onering', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ text: text, from_lang: from_lang, to_lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Translates text using the LibreTranslate API
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderLibre(text, lang) {
+    const response = await fetch('/api/translate/libre', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ text: text, lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Translates text using the Google Translate API
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderGoogle(text, lang) {
+    const response = await fetch('/api/translate/google', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ text: text, lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Translates text using an instance of the Lingva Translate
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderLingva(text, lang) {
+    const response = await fetch('/api/translate/lingva', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ text: text, lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Translates text using the DeepL API
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderDeepl(text, lang) {
+    if (!secret_state.deepl) {
+        throw new Error('No DeepL API key');
+    }
+
+    const endpoint = extension_settings.translate.deepl_endpoint || 'free';
+    const response = await fetch('/api/translate/deepl', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ text: text, lang: lang, endpoint: endpoint }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Translates text using the DeepLX API
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderDeepLX(text, lang) {
+    const response = await fetch('/api/translate/deeplx', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ text: text, lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Translates text using the Bing API
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderBing(text, lang) {
+    const response = await fetch('/api/translate/bing', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ text: text, lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Translates text using the Yandex Translate API
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @returns {Promise<string>} Translated text
+ */
+async function translateProviderYandex(text, lang) {
+    let chunks = [];
+    const chunkSize = 5000;
+    if (text.length <= chunkSize) {
+        chunks.push(text);
+    } else {
+        chunks = splitRecursive(text, chunkSize);
+    }
+    const response = await fetch('/api/translate/yandex', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({ chunks: chunks, lang: lang }),
+    });
+
+    if (response.ok) {
+        const result = await response.text();
+        return result;
+    }
+
+    throw new Error(response.statusText);
+}
+
+/**
+ * Splits text into chunks and translates each chunk separately
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @param {(text: string, lang: string) => Promise<string>} translateFn Function to translate a single chunk (must return a Promise)
+ * @param {number} chunkSize Maximum chunk size
+ * @returns {Promise<string>} Translated text
+ */
+async function chunkedTranslate(text, lang, translateFn, chunkSize = 5000) {
+    if (text.length <= chunkSize) {
+        return await translateFn(text, lang);
+    }
+
+    const chunks = splitRecursive(text, chunkSize);
+
+    let result = '';
+    for (const chunk of chunks) {
+        result += await translateFn(chunk, lang);
+    }
+    return result;
+}
+
+/**
+ * Translates text using the selected translation provider
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @param {string} provider Translation provider to use
+ * @returns {Promise<string>} Translated text
+ */
+async function translate(text, lang, provider = null) {
+    try {
+        if (text == '') {
+            return '';
+        }
+
+        if (!lang) {
+            lang = extension_settings.translate.target_language;
+        }
+
+        if (!provider) {
+            provider = extension_settings.translate.provider;
+        }
+
+        // split text by embedded images links
+        const chunks = text.split(/!\[.*?]\([^)]*\)/);
+        const links = [...text.matchAll(/!\[.*?]\([^)]*\)/g)];
+
+        let result = '';
+        for (let i = 0; i < chunks.length; i++) {
+            result += await translateInner(chunks[i], lang, provider);
+            if (i < links.length) result += links[i][0];
+        }
+
+        return result;
+    } catch (error) {
+        console.log(error);
+        toastr.error(String(error), 'Failed to translate message');
+    }
+}
+
+/**
+ * Common translation function that handles the translation logic
+ * @param {string} text Text to translate
+ * @param {string} lang Target language code
+ * @param {string} provider Translation provider to use
+ * @returns {Promise<string>} Translated text
+ */
+async function translateInner(text, lang, provider) {
+    if (text == '') {
+        return '';
+    }
+    if (!provider) {
+        provider = extension_settings.translate.provider;
+    }
+    switch (provider) {
+        case 'libre':
+            return await translateProviderLibre(text, lang);
+        case 'google':
+            return await chunkedTranslate(text, lang, translateProviderGoogle, 5000);
+        case 'lingva':
+            return await chunkedTranslate(text, lang, translateProviderLingva, 5000);
+        case 'deepl':
+            return await translateProviderDeepl(text, lang);
+        case 'deeplx':
+            return await chunkedTranslate(text, lang, translateProviderDeepLX, 1500);
+        case 'oneringtranslator':
+            return await translateProviderOneRing(text, lang);
+        case 'bing':
+            return await chunkedTranslate(text, lang, translateProviderBing, 1000);
+        case 'yandex':
+            return await translateProviderYandex(text, lang);
+        default:
+            console.error('Unknown translation provider', provider);
+            return text;
+    }
+}
+
+async function translateOutgoingMessage(messageId) {
+    const context = getContext();
+    const message = context.chat[messageId];
+
+    if (typeof message.extra !== 'object') {
+        message.extra = {};
+    }
+
+    const originalText = message.mes;
+    message.extra.display_text = originalText;
+    message.mes = await translate(originalText, extension_settings.translate.internal_language);
+    updateMessageBlock(messageId, message);
+
+    console.log('translateOutgoingMessage', messageId);
+}
+
+function shouldTranslate(types) {
+    return types.includes(extension_settings.translate.auto_mode);
+}
+
+function createEventHandler(translateFunction, shouldTranslateFunction) {
+    return async (data) => {
+        if (shouldTranslateFunction()) {
+            await translateFunction(data);
+        }
+    };
+}
+
+async function onTranslateInputMessageClick() {
+    const textarea = document.getElementById('send_textarea');
+
+    if (!(textarea instanceof HTMLTextAreaElement)) {
+        return;
+    }
+
+    if (!textarea.value) {
+        toastr.warning('Enter a message first');
+        return;
+    }
+
+    const toast = toastr.info('Input Message is translating', 'Please wait...');
+    const translatedText = await translate(textarea.value, extension_settings.translate.internal_language);
+    textarea.value = translatedText;
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    toastr.clear(toast);
+}
+
+// Prevents the chat from being translated in parallel
+let translateChatExecuting = false;
+
+async function onTranslateChatClick() {
+    if (translateChatExecuting) {
+        return;
+    }
+
+    try {
+        translateChatExecuting = true;
+        const context = getContext();
+        const chat = context.chat;
+
+        toastr.info(`${chat.length} message(s) queued for translation.`, 'Please wait...');
+
+        for (let i = 0; i < chat.length; i++) {
+            await translateIncomingMessageReasoning(i);
+            await translateIncomingMessage(i);
+        }
+
+        await context.saveChat();
+    } catch (error) {
+        console.log(error);
+        toastr.error('Failed to translate chat');
+    } finally {
+        translateChatExecuting = false;
+    }
+}
+
+async function onTranslationsClearClick() {
+    const popupHtml = await renderExtensionTemplateAsync('translate', 'deleteConfirmation');
+    const confirm = await callGenericPopup(popupHtml, POPUP_TYPE.CONFIRM);
+
+    if (!confirm) {
+        return;
+    }
+
+    const context = getContext();
+    const chat = context.chat;
+
+    for (const mes of chat) {
+        if (mes.extra) {
+            delete mes.extra.display_text;
+            delete mes.extra.reasoning_display_text;
+        }
+    }
+
+    await context.saveChat();
+    await reloadCurrentChat();
+}
+
+async function translateMessageEdit(messageId) {
+    const context = getContext();
+    const chat = context.chat;
+    const message = chat[messageId];
+
+    let anyChange = false;
+    if (message.is_system || (extension_settings.translate.auto_mode == autoModeOptions.NONE && message.extra?.display_text)) {
+        delete message.extra.display_text;
+        updateMessageBlock(messageId, message);
+        anyChange = true;
+    } else if ((message.is_user && shouldTranslate(outgoingTypes)) || (!message.is_user && shouldTranslate(incomingTypes))) {
+        await translateIncomingMessage(messageId);
+        anyChange = true;
+    }
+
+    if (anyChange) {
+        await context.saveChat();
+    }
+}
+
+async function translateMessageReasoningEdit(messageId) {
+    const context = getContext();
+    const chat = context.chat;
+    const message = chat[messageId];
+
+    let anyChange = false;
+    if (message.is_system || (extension_settings.translate.auto_mode == autoModeOptions.NONE && message.extra?.reasoning_display_text)) {
+        delete message.extra.reasoning_display_text;
+        updateReasoningUI(Number(messageId));
+        anyChange = true;
+    } else if ((message.is_user && shouldTranslate(outgoingTypes)) || (!message.is_user && shouldTranslate(incomingTypes))) {
+        anyChange = await translateIncomingMessageReasoning(messageId);
+    }
+
+    if (anyChange) {
+        await context.saveChat();
+    }
+}
+
+async function removeReasoningDisplayText(messageId) {
+    const context = getContext();
+    const message = context.chat[messageId];
+    if (message.extra?.reasoning_display_text) {
+        delete message.extra.reasoning_display_text;
+        updateReasoningUI(Number(messageId));
+        await context.saveChat();
+    }
+}
+
+async function onMessageTranslateClick() {
+    const context = getContext();
+    const messageId = $(this).closest('.mes').attr('mesid');
+    const message = context.chat[messageId];
+
+    // If the message is already translated, revert it back to the original text
+    let alreadyTranslated = false;
+    if (message?.extra?.display_text) {
+        delete message.extra.display_text;
+        updateMessageBlock(Number(messageId), message);
+        alreadyTranslated = true;
+    }
+    if (message?.extra?.reasoning_display_text) {
+        delete message.extra.reasoning_display_text;
+        updateReasoningUI(Number(messageId));
+        alreadyTranslated = true;
+    }
+
+    // If the message is not translated, translate it
+    if (!alreadyTranslated) {
+        await translateIncomingMessageReasoning(messageId);
+        await translateIncomingMessage(messageId);
+    }
+
+    await context.saveChat();
+}
+
+const handleIncomingMessage = createEventHandler(async (messageId) => {
+    await translateIncomingMessageReasoning(messageId);
+    await translateIncomingMessage(messageId);
+}, () => shouldTranslate(incomingTypes));
+const handleOutgoingMessage = createEventHandler(translateOutgoingMessage, () => shouldTranslate(outgoingTypes));
+const handleImpersonateReady = createEventHandler(translateImpersonate, () => shouldTranslate(incomingTypes));
+const handleMessageEdit = createEventHandler(translateMessageEdit, () => true);
+const handleMessageReasoningEdit = createEventHandler(translateMessageReasoningEdit, () => true);
+const handleMessageReasoningDelete = createEventHandler(removeReasoningDisplayText, () => true);
+
+globalThis.translate = translate;
+
+jQuery(async () => {
+    const html = await renderExtensionTemplateAsync('translate', 'index');
+    const buttonHtml = await renderExtensionTemplateAsync('translate', 'buttons');
+
+    $('#translate_wand_container').append(buttonHtml);
+    $('#translation_container').append(html);
+    $('#translate_chat').on('click', onTranslateChatClick);
+    $('#translate_input_message').on('click', onTranslateInputMessageClick);
+    $('#translation_clear').on('click', onTranslationsClearClick);
+
+    for (const [key, value] of Object.entries(languageCodes)) {
+        $('#translation_target_language').append(`<option value="${value}">${key}</option>`);
+    }
+
+    $('#translation_auto_mode').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
+        extension_settings.translate.auto_mode = event.target.value;
+        saveSettingsDebounced();
+    });
+    $('#translation_provider').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
+        extension_settings.translate.provider = event.target.value;
+        showKeysButton();
+        saveSettingsDebounced();
+    });
+    $('#translation_target_language').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
+        extension_settings.translate.target_language = event.target.value;
+        saveSettingsDebounced();
+    });
+    $('#deepl_api_endpoint').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
+        extension_settings.translate.deepl_endpoint = event.target.value;
+        saveSettingsDebounced();
+    });
+    $(document).on('click', '.mes_translate', onMessageTranslateClick);
+    $('#translate_key_button').on('click', async () => {
+        const optionText = $('#translation_provider option:selected').text();
+        const key = await callGenericPopup(`<h3>${optionText} API Key</h3>`, POPUP_TYPE.INPUT, '', {
+            customButtons: [{
+                text: 'Remove Key',
+                appendAtEnd: true,
+                result: POPUP_RESULT.NEGATIVE,
+                action: async () => {
+                    await writeSecret(extension_settings.translate.provider, '');
+                    toastr.success('API Key removed');
+                    $('#translate_key_button').toggleClass('success', !!secret_state[extension_settings.translate.provider]);
+                },
+            }],
+        });
+
+        if (!key) {
+            return;
+        }
+
+        await writeSecret(extension_settings.translate.provider, key);
+        toastr.success('API Key saved');
+        $('#translate_key_button').addClass('success');
+    });
+    $('#translate_url_button').on('click', async () => {
+        const optionText = $('#translation_provider option:selected').text();
+        const exampleURLs = {
+            'libre': 'http://127.0.0.1:5000/translate',
+            'lingva': 'https://lingva.ml/api/v1',
+            'oneringtranslator': 'http://127.0.0.1:4990/translate',
+            'deeplx': 'http://127.0.0.1:1188/translate',
+        };
+        const popupText = `<h3>${optionText} API URL</h3><i>Example: <tt>${String(exampleURLs[extension_settings.translate.provider])}</tt></i>`;
+
+        const secretKey = extension_settings.translate.provider + '_url';
+        const savedUrl = secret_state[secretKey] ? await findSecret(secretKey) : '';
+
+        const url = await callGenericPopup(popupText, POPUP_TYPE.INPUT, savedUrl, {
+            customButtons: [{
+                text: 'Remove URL',
+                appendAtEnd: true,
+                result: POPUP_RESULT.NEGATIVE,
+                action: async () => {
+                    await writeSecret(secretKey, '');
+                    toastr.success('API URL removed');
+                    $('#translate_url_button').toggleClass('success', !!secret_state[secretKey]);
+                },
+            }],
+        });
+
+        if (!url) {
+            return;
+        }
+
+        await writeSecret(secretKey, url);
+
+        toastr.success('API URL saved');
+        $('#translate_url_button').addClass('success');
+    });
+
+    loadSettings();
+
+    eventSource.makeFirst(event_types.CHARACTER_MESSAGE_RENDERED, handleIncomingMessage);
+    eventSource.makeFirst(event_types.USER_MESSAGE_RENDERED, handleOutgoingMessage);
+    eventSource.on(event_types.MESSAGE_SWIPED, handleIncomingMessage);
+    eventSource.on(event_types.IMPERSONATE_READY, handleImpersonateReady);
+    eventSource.on(event_types.MESSAGE_UPDATED, handleMessageEdit);
+    eventSource.on(event_types.MESSAGE_REASONING_EDITED, handleMessageReasoningEdit);
+    eventSource.on(event_types.MESSAGE_REASONING_DELETED, handleMessageReasoningDelete);
+
+    document.body.classList.add('translate');
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'translate',
+        helpString: 'Translate text to a target language. If target language is not provided, the value from the extension settings will be used.',
+        namedArgumentList: [
+            new SlashCommandNamedArgument('target', 'The target language code to translate to', ARGUMENT_TYPE.STRING, false, false, '', Object.values(languageCodes)),
+            SlashCommandNamedArgument.fromProps({
+                name: 'provider',
+                description: 'The translation provider to use. If not provided, the value from the extension settings will be used.',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: false,
+                acceptsMultiple: false,
+                enumProvider: () => Array.from(document.getElementById('translation_provider').querySelectorAll('option')).map((option) => new SlashCommandEnumValue(option.value, option.text, enumTypes.name, enumIcons.server)),
+            }),
+        ],
+        unnamedArgumentList: [
+            new SlashCommandArgument('The text to translate', ARGUMENT_TYPE.STRING, true, false, ''),
+        ],
+        callback: async (args, value) => {
+            const target = args?.target && Object.values(languageCodes).includes(String(args.target))
+                ? String(args.target)
+                : extension_settings.translate.target_language;
+            const provider = args?.provider || extension_settings.translate.provider;
+            return await translate(String(value), target, provider);
+        },
+        returns: ARGUMENT_TYPE.STRING,
+    }));
+});

public/scripts/extensions/translate/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Chat Translation",
+    "loading_order": 1,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/ChuQuadrant/ChuQuadrant"
+}

public/scripts/extensions/translate/style.css

@@ -0,0 +1,6 @@
+.translation_settings .menu_button {
+    width: fit-content;
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+}

public/scripts/extensions/tts/azure.js

@@ -0,0 +1,220 @@
+import { getRequestHeaders } from '../../../script.js';
+import { POPUP_RESULT, POPUP_TYPE, callGenericPopup } from '../../popup.js';
+import { SECRET_KEYS, findSecret, secret_state, writeSecret } from '../../secrets.js';
+import { getPreviewString, saveTtsProviderSettings } from './index.js';
+export { AzureTtsProvider };
+
+class AzureTtsProvider {
+    //########//
+    // Config //
+    //########//
+
+    settings;
+    voices = [];
+    separator = ' . ';
+    audioElement = document.createElement('audio');
+
+    defaultSettings = {
+        region: '',
+        voiceMap: {},
+    };
+
+    get settingsHtml() {
+        let html = `
+        <div class="azure_tts_settings">
+            <div class="flex-container alignItemsBaseline">
+                <h4 for="azure_tts_key" class="flex1 margin0">
+                    <a href="https://portal.azure.com/" target="_blank">Azure TTS Key</a>
+                </h4>
+                <div id="azure_tts_key" class="menu_button menu_button_icon">
+                    <i class="fa-solid fa-key"></i>
+                    <span>Click to set</span>
+                </div>
+            </div>
+            <label for="azure_tts_region">Region:</label>
+            <input id="azure_tts_region" type="text" class="text_pole" placeholder="e.g. westus" />
+            <hr>
+        </div>
+        `;
+        return html;
+    }
+
+    onSettingsChange() {
+        // Update dynamically
+        this.settings.region = String($('#azure_tts_region').val());
+        // Reset voices
+        this.voices = [];
+        saveTtsProviderSettings();
+    }
+
+    async loadSettings(settings) {
+        // Populate Provider UI given input settings
+        if (Object.keys(settings).length == 0) {
+            console.info('Using default TTS Provider settings');
+        }
+
+        // Only accept keys defined in defaultSettings
+        this.settings = this.defaultSettings;
+
+        for (const key in settings) {
+            if (key in this.settings) {
+                this.settings[key] = settings[key];
+            } else {
+                throw `Invalid setting passed to TTS Provider: ${key}`;
+            }
+        }
+
+        $('#azure_tts_region').val(this.settings.region).on('input', () => this.onSettingsChange());
+        $('#azure_tts_key').toggleClass('success', secret_state[SECRET_KEYS.AZURE_TTS]);
+        $('#azure_tts_key').on('click', async () => {
+            const popupText = 'Azure TTS API Key';
+            const savedKey = secret_state[SECRET_KEYS.AZURE_TTS] ? await findSecret(SECRET_KEYS.AZURE_TTS) : '';
+
+            const key = await callGenericPopup(popupText, POPUP_TYPE.INPUT, savedKey, {
+                customButtons: [{
+                    text: 'Remove Key',
+                    appendAtEnd: true,
+                    result: POPUP_RESULT.NEGATIVE,
+                    action: async () => {
+                        await writeSecret(SECRET_KEYS.AZURE_TTS, '');
+                        $('#azure_tts_key').toggleClass('success', !!secret_state[SECRET_KEYS.AZURE_TTS]);
+                        toastr.success('API Key removed');
+                        await this.onRefreshClick();
+                    },
+                }],
+            });
+
+            if (!key) {
+                return;
+            }
+
+            await writeSecret(SECRET_KEYS.AZURE_TTS, String(key));
+
+            toastr.success('API Key saved');
+            $('#azure_tts_key').addClass('success');
+            await this.onRefreshClick();
+        });
+
+        try {
+            await this.checkReady();
+            console.debug('Azure: Settings loaded');
+        } catch {
+            console.debug('Azure: Settings loaded, but not ready');
+        }
+    }
+
+    // Perform a simple readiness check by trying to fetch voiceIds
+    async checkReady() {
+        if (secret_state[SECRET_KEYS.AZURE_TTS]) {
+            await this.fetchTtsVoiceObjects();
+        } else {
+            this.voices = [];
+        }
+    }
+
+    async onRefreshClick() {
+        await this.checkReady();
+    }
+
+    //#################//
+    //  TTS Interfaces //
+    //#################//
+
+    async getVoice(voiceName) {
+        if (this.voices.length == 0) {
+            this.voices = await this.fetchTtsVoiceObjects();
+        }
+        const match = this.voices.filter(
+            voice => voice.name == voiceName,
+        )[0];
+        if (!match) {
+            throw `TTS Voice name ${voiceName} not found`;
+        }
+        return match;
+    }
+
+    async generateTts(text, voiceId) {
+        const response = await this.fetchTtsGeneration(text, voiceId);
+        return response;
+    }
+
+    //###########//
+    // API CALLS //
+    //###########//
+    async fetchTtsVoiceObjects() {
+        if (!secret_state[SECRET_KEYS.AZURE_TTS]) {
+            console.warn('Azure TTS API Key not set');
+            return [];
+        }
+
+        if (!this.settings.region) {
+            console.warn('Azure TTS region not set');
+            return [];
+        }
+
+        const response = await fetch('/api/azure/list', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify({
+                region: this.settings.region,
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+        let responseJson = await response.json();
+        responseJson = responseJson
+            .sort((a, b) => a.Locale.localeCompare(b.Locale) || a.ShortName.localeCompare(b.ShortName))
+            .map(x => ({ name: x.ShortName, voice_id: x.ShortName, preview_url: false, lang: x.Locale }));
+        return responseJson;
+    }
+
+    /**
+     * Preview TTS for a given voice ID.
+     * @param {string} id Voice ID
+     */
+    async previewTtsVoice(id) {
+        this.audioElement.pause();
+        this.audioElement.currentTime = 0;
+        const voice = await this.getVoice(id);
+        const text = getPreviewString(voice.lang);
+        const response = await this.fetchTtsGeneration(text, id);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+
+        const audio = await response.blob();
+        const url = URL.createObjectURL(audio);
+        this.audioElement.src = url;
+        this.audioElement.play();
+        this.audioElement.onended = () => URL.revokeObjectURL(url);
+    }
+
+    async fetchTtsGeneration(text, voiceId) {
+        if (!secret_state[SECRET_KEYS.AZURE_TTS]) {
+            throw new Error('Azure TTS API Key not set');
+        }
+
+        if (!this.settings.region) {
+            throw new Error('Azure TTS region not set');
+        }
+
+        const response = await fetch('/api/azure/generate', {
+            method: 'POST',
+            headers: getRequestHeaders(),
+            body: JSON.stringify({
+                text: text,
+                voice: voiceId,
+                region: this.settings.region,
+            }),
+        });
+
+        if (!response.ok) {
+            toastr.error(response.statusText, 'TTS Generation Failed');
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+
+        return response;
+    }
+}