Initial commit

public/scripts/extensions/backgrounds/index.js

@@ -0,0 +1,170 @@
+import { generateQuietPrompt } from "../../../script.js";
+import { getContext, saveMetadataDebounced } from "../../extensions.js";
+import { registerSlashCommand } from "../../slash-commands.js";
+import { stringFormat } from "../../utils.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'backgrounds';
+const METADATA_KEY = 'custom_background';
+const UPDATE_INTERVAL = 1000;
+
+async function moduleWorker() {
+    if (hasCustomBackground()) {
+        $('#unlock_background').show();
+        $('#lock_background').hide();
+        setCustomBackground();
+    }
+    else {
+        $('#unlock_background').hide();
+        $('#lock_background').show();
+        unsetCustomBackground();
+    }
+}
+
+function onLockBackgroundClick() {
+    const bgImage = window.getComputedStyle(document.getElementById('bg1')).backgroundImage;
+
+    // Extract the URL from the CSS string
+    const urlRegex = /url\((['"])?(.*?)\1\)/;
+    const matches = bgImage.match(urlRegex);
+    const url = matches[2];
+
+    // Remove the protocol and host, leaving the relative URL
+    const relativeUrl = new URL(url).pathname;
+    const relativeBgImage = `url("${relativeUrl}")`
+
+    saveBackgroundMetadata(relativeBgImage);
+    setCustomBackground();
+    $('#unlock_background').show();
+    $('#lock_background').hide();
+}
+
+function onUnlockBackgroundClick() {
+    removeBackgroundMetadata();
+    unsetCustomBackground();
+    $('#unlock_background').hide();
+    $('#lock_background').show();
+}
+
+function hasCustomBackground() {
+    const context = getContext();
+    return !!context.chatMetadata[METADATA_KEY];
+}
+
+function saveBackgroundMetadata(file) {
+    const context = getContext();
+    context.chatMetadata[METADATA_KEY] = file;
+    saveMetadataDebounced();
+}
+
+function removeBackgroundMetadata() {
+    const context = getContext();
+    delete context.chatMetadata[METADATA_KEY];
+    saveMetadataDebounced();
+}
+
+function setCustomBackground() {
+    const context = getContext();
+    const file = context.chatMetadata[METADATA_KEY];
+
+    // bg already set
+    if (document.getElementById("bg_custom").style.backgroundImage == file) {
+        return;
+    }
+
+    $("#bg_custom").css("background-image", file);
+    $("#custom_bg_preview").css("background-image", file);
+}
+
+function unsetCustomBackground() {
+    $("#bg_custom").css("background-image", 'none');
+    $("#custom_bg_preview").css("background-image", 'none');
+}
+
+function onSelectBackgroundClick() {
+    const bgfile = $(this).attr("bgfile");
+
+    if (hasCustomBackground()) {
+        saveBackgroundMetadata(`url("backgrounds/${bgfile}")`);
+        setCustomBackground();
+    }
+}
+
+const autoBgPrompt = `Pause your roleplay and choose a location ONLY from the provided list that is the most suitable for the current scene. Do not output any other text:\n{0}`;
+
+async function autoBackgroundCommand() {
+    const options = Array.from(document.querySelectorAll('.BGSampleTitle')).map(x => ({ element: x, text: x.innerText.trim() })).filter(x => x.text.length > 0);
+    if (options.length == 0) {
+        toastr.warning('No backgrounds to choose from. Please upload some images to the "backgrounds" folder.');
+        return;
+    }
+
+    const list = options.map(option => `- ${option.text}`).join('\n');
+    const prompt = stringFormat(autoBgPrompt, list);
+    const reply = await generateQuietPrompt(prompt);
+    const fuse = new Fuse(options, { keys: ['text'] });
+    const bestMatch = fuse.search(reply, { limit: 1 });
+
+    if (bestMatch.length == 0) {
+        toastr.warning('No match found. Please try again.');
+        return;
+    }
+
+    console.debug('Automatically choosing background:', bestMatch);
+    bestMatch[0].item.element.click();
+}
+
+$(document).ready(function () {
+    function addSettings() {
+        const html = `
+        <div class="background_settings">
+            <div class="inline-drawer">
+                <div class="inline-drawer-toggle inline-drawer-header">
+                    <b>Chat Backgrounds</b>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                </div>
+                <div class="inline-drawer-content">
+                    <div class="background_controls">
+                        <div id="lock_background" class="menu_button">
+                            <i class="fa-solid fa-lock"></i>
+                            Lock
+                        </div>
+                        <div id="unlock_background" class="menu_button">
+                            <i class="fa-solid fa-unlock"></i>
+                            Unlock
+                        </div>
+                        <small>
+                            Press "Lock" to assign a currently selected background to a character or group chat.<br>
+                            Any background image selected while lock is engaged will be saved automatically.
+                        </small>
+                    </div>
+                    <div class="background_controls">
+                        <div id="auto_background" class="menu_button">
+                            <i class="fa-solid fa-wand-magic"></i>
+                            Auto
+                        </div>
+                        <small>
+                            Automatically select a background based on the chat context.<br>
+                            Respects the "Lock" setting state.
+                        </small>
+                    </div>
+                    <div>Preview</div>
+                    <div id="custom_bg_preview">
+                    </div>
+                </div>
+            </div>
+        </div>
+        `;
+        $('#extensions_settings').append(html);
+        $('#lock_background').on('click', onLockBackgroundClick);
+        $('#unlock_background').on('click', onUnlockBackgroundClick);
+        $(document).on("click", ".bg_example", onSelectBackgroundClick);
+        $('#auto_background').on("click", autoBackgroundCommand);
+    }
+
+    addSettings();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+    registerSlashCommand('lockbg', onLockBackgroundClick, ['bglock'], " – locks a background for the currently selected chat", true, true);
+    registerSlashCommand('unlockbg', onUnlockBackgroundClick, ['bgunlock'], ' – unlocks a background for the currently selected chat', true, true);
+    registerSlashCommand('autobg', autoBackgroundCommand, ['bgauto'], ' – automatically changes the background based on the chat context using the AI request prompt', true, true);
+});

public/scripts/extensions/backgrounds/manifest.json

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

public/scripts/extensions/backgrounds/style.css

@@ -0,0 +1,45 @@
+#custom_bg_preview {
+    width: 160px;
+    height: 90px;
+    background-color: var(--grey30a);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    border-radius: 20px;
+    border: 1px solid var(--black50a);
+    box-shadow: 0 0 7px var(--black50a);
+    margin: 5px;
+}
+
+#custom_bg_preview::before {
+    content: 'No Background';
+    color: white;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#custom_bg_preview:not([style*="background-image: none"])::before {
+    display: none;
+}
+
+.background_controls .menu_button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+}
+
+.background_controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+}
+
+.background_controls small {
+    flex-grow: 1;
+}

public/scripts/extensions/caption/index.js

@@ -0,0 +1,159 @@
+import { getBase64Async } from "../../utils.js";
+import { getContext, getApiUrl, doExtrasFetch, extension_settings } from "../../extensions.js";
+import { callPopup, saveSettingsDebounced } from "../../../script.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'caption';
+const UPDATE_INTERVAL = 1000;
+
+async function moduleWorker() {
+    $('#send_picture').toggle(getContext().onlineStatus !== 'no_connection');
+}
+
+async function setImageIcon() {
+    try {
+        const sendButton = $('#send_picture .extensionsMenuExtensionButton');
+        sendButton.addClass('fa-image');
+        sendButton.removeClass('fa-hourglass-half');
+    }
+    catch (error) {
+        console.log(error);
+    }
+}
+
+async function setSpinnerIcon() {
+    try {
+        const sendButton = $('#send_picture .extensionsMenuExtensionButton');
+        sendButton.removeClass('fa-image');
+        sendButton.addClass('fa-hourglass-half');
+    }
+    catch (error) {
+        console.log(error);
+    }
+}
+
+async function sendCaptionedMessage(caption, image) {
+    const context = getContext();
+    let messageText = `[${context.name1} sends ${context.name2 ?? ''} a picture that contains: ${caption}]`;
+
+    if (extension_settings.caption.refine_mode) {
+        messageText = await callPopup(
+            '<h3>Review and edit the generated message:</h3>Press "Cancel" to abort the caption sending.',
+            'input',
+            messageText,
+            { rows: 5, okButton: 'Send' });
+
+        if (!messageText) {
+            throw new Error('User aborted the caption sending.');
+        }
+    }
+
+    const message = {
+        name: context.name1,
+        is_user: true,
+        is_name: true,
+        send_date: Date.now(),
+        mes: messageText,
+        extra: {
+            image: image,
+            title: messageText,
+        },
+    };
+    context.chat.push(message);
+    context.addOneMessage(message);
+    await context.generate('caption');
+}
+
+async function onSelectImage(e) {
+    setSpinnerIcon();
+    const file = e.target.files[0];
+
+    if (!file) {
+        return;
+    }
+
+    try {
+        const base64Img = await getBase64Async(file);
+        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.split(',')[1] })
+        });
+
+        if (apiResult.ok) {
+            const data = await apiResult.json();
+            const caption = data.caption;
+            const imageToSave = data.thumbnail ? `data:image/jpeg;base64,${data.thumbnail}` : base64Img;
+            await sendCaptionedMessage(caption, imageToSave);
+        }
+    }
+    catch (error) {
+        console.log(error);
+    }
+    finally {
+        e.target.form.reset();
+        setImageIcon();
+    }
+}
+
+function onRefineModeInput() {
+    extension_settings.caption.refine_mode = $('#caption_refine_mode').prop('checked');
+    saveSettingsDebounced();
+}
+
+jQuery(function () {
+    function addSendPictureButton() {
+        const sendButton = $(`
+        <div id="send_picture" class="list-group-item flex-container flexGap5">
+            <div class="fa-solid fa-image extensionsMenuExtensionButton"></div>
+            Send a picture
+        </div>`);
+
+        $('#extensionsMenu').prepend(sendButton);
+        $(sendButton).hide();
+        $(sendButton).on('click', () => $('#img_file').trigger('click'));
+    }
+    function addPictureSendForm() {
+        const inputHtml = `<input id="img_file" type="file" accept="image/*">`;
+        const imgForm = document.createElement('form');
+        imgForm.id = 'img_form';
+        $(imgForm).append(inputHtml);
+        $(imgForm).hide();
+        $('#form_sheld').append(imgForm);
+        $('#img_file').on('change', onSelectImage);
+    }
+    function addSettings() {
+        const html = `
+        <div class="background_settings">
+            <div class="inline-drawer">
+                <div class="inline-drawer-toggle inline-drawer-header">
+                    <b>Image Captioning</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="caption_refine_mode">
+                        <input id="caption_refine_mode" type="checkbox" class="checkbox">
+                        Edit captions before generation
+                    </label>
+                </div>
+            </div>
+        </div>
+        `;
+        $('#extensions_settings2').append(html);
+    }
+
+    addSettings();
+    addPictureSendForm();
+    addSendPictureButton();
+    setImageIcon();
+    moduleWorker();
+    $('#caption_refine_mode').prop('checked', !!(extension_settings.caption.refine_mode));
+    $('#caption_refine_mode').on('input', onRefineModeInput);
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+});

public/scripts/extensions/caption/manifest.json

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

public/scripts/extensions/caption/style.css

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

public/scripts/extensions/dice/index.js

@@ -0,0 +1,88 @@
+import { callPopup } from "../../../script.js";
+import { getContext } from "../../extensions.js";
+import { registerSlashCommand } from "../../slash-commands.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'dice';
+const UPDATE_INTERVAL = 1000;
+
+async function doDiceRoll(customDiceFormula) {
+    let value = typeof customDiceFormula === 'string' ? customDiceFormula.trim() : $(this).data('value');
+
+    if (value == 'custom') {
+        value = await callPopup('Enter the dice formula:<br><i>(for example, <tt>2d6</tt>)</i>', 'input');
+    }
+
+    if (!value) {
+        return;
+    }
+
+    const isValid = droll.validate(value);
+
+    if (isValid) {
+        const result = droll.roll(value);
+        const context = getContext();
+        context.sendSystemMessage('generic', `${context.name1} rolls a ${value}. The result is: ${result.total} (${result.rolls})`, { isSmallSys: true });
+    } else {
+        toastr.warning('Invalid dice formula');
+    }
+}
+
+function addDiceRollButton() {
+    const buttonHtml = `
+    <div id="roll_dice" class="list-group-item flex-container flexGap5">
+        <div class="fa-solid fa-dice extensionsMenuExtensionButton" title="Roll Dice" /></div>
+        Roll Dice
+    </div>
+        `;
+    const dropdownHtml = `
+    <div id="dice_dropdown">
+        <ul class="list-group">
+            <li class="list-group-item" data-value="d4">d4</li>
+            <li class="list-group-item" data-value="d6">d6</li>
+            <li class="list-group-item" data-value="d8">d8</li>
+            <li class="list-group-item" data-value="d10">d10</li>
+            <li class="list-group-item" data-value="d12">d12</li>
+            <li class="list-group-item" data-value="d20">d20</li>
+            <li class="list-group-item" data-value="d100">d100</li>
+            <li class="list-group-item" data-value="custom">...</li>
+        </ul>
+    </div>`;
+
+    $('#extensionsMenu').prepend(buttonHtml);
+
+    $(document.body).append(dropdownHtml)
+    $('#dice_dropdown li').on('click', doDiceRoll);
+    const button = $('#roll_dice');
+    const dropdown = $('#dice_dropdown');
+    dropdown.hide();
+    button.hide();
+
+    let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
+        placement: 'top',
+    });
+
+    $(document).on('click touchend', function (e) {
+        const target = $(e.target);
+        if (target.is(dropdown)) return;
+        if (target.is(button) && !dropdown.is(":visible")) {
+            e.preventDefault();
+
+            dropdown.fadeIn(250);
+            popper.update();
+        } else {
+            dropdown.fadeOut(250);
+        }
+    });
+}
+
+async function moduleWorker() {
+    $('#roll_dice').toggle(getContext().onlineStatus !== 'no_connection');
+}
+
+jQuery(function () {
+    addDiceRollButton();
+    moduleWorker();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+    registerSlashCommand('roll', (_, value) => doDiceRoll(value), ['r'], "<span class='monospace'>(dice formula)</span> – roll the dice. For example, /roll 2d6", false, true);
+});

public/scripts/extensions/dice/manifest.json

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

public/scripts/extensions/dice/style.css

@@ -0,0 +1,26 @@
+#roll_dice {
+    /* order: 100; */
+    /*     width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 1px; */
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+
+}
+
+#roll_dice:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
+#dice_dropdown {
+    z-index: 100;
+    backdrop-filter: blur(--SmartThemeBlurStrength);
+}

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/SillyTavern/SillyTavern"
+}

public/scripts/extensions/expressions/style.css

@@ -0,0 +1,184 @@
+.expression-helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+#expression-wrapper {
+    display: flex;
+    height: calc(100vh - 40px);
+    width: 100vw;
+}
+
+#visual-novel-wrapper {
+    display: flex;
+    height: calc(100vh - 40px);
+    width: 100vw;
+    position: relative;
+    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;
+
+}
+
+img.expression {
+    min-width: 100px;
+    min-height: 100px;
+    max-height: 90vh;
+    max-width: 90vh;
+    width: 100%;
+    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_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;
+}
+
+.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 .success {
+    color: green;
+}
+
+#image_list .failure {
+    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;
+}
+
+@media screen and (max-width:1200px) {
+    div.expression {
+        display: none;
+    }
+}

public/scripts/extensions/infinity-context/index.js

@@ -0,0 +1,920 @@
+import { saveSettingsDebounced, getCurrentChatId, system_message_types, extension_prompt_types, eventSource, event_types, getRequestHeaders, CHARACTERS_PER_TOKEN_RATIO, substituteParams, max_context, } from "../../../script.js";
+import { humanizedDateTime } from "../../RossAscends-mods.js";
+import { getApiUrl, extension_settings, getContext, doExtrasFetch } from "../../extensions.js";
+import { getFileText, onlyUnique, splitRecursive, IndexedDBStore } from "../../utils.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = 'chromadb';
+const dbStore = new IndexedDBStore('SillyTavern', MODULE_NAME);
+
+const defaultSettings = {
+    strategy: 'original',
+    sort_strategy: 'date',
+
+    keep_context: 10,
+    keep_context_min: 1,
+    keep_context_max: 500,
+    keep_context_step: 1,
+
+    n_results: 20,
+    n_results_min: 0,
+    n_results_max: 500,
+    n_results_step: 1,
+
+    chroma_depth: 20,
+    chroma_depth_min: -1,
+    chroma_depth_max: 500,
+    chroma_depth_step: 1,
+    chroma_default_msg: "In a past conversation:  [{{memories}}]",
+    chroma_default_hhaa_wrapper: "Previous messages exchanged between {{user}} and {{char}}:\n{{memories}}",
+    chroma_default_hhaa_memory: "- {{name}}: {{message}}\n",
+    hhaa_token_limit: 512,
+
+    split_length: 384,
+    split_length_min: 64,
+    split_length_max: 4096,
+    split_length_step: 64,
+
+    file_split_length: 1024,
+    file_split_length_min: 512,
+    file_split_length_max: 4096,
+    file_split_length_step: 128,
+
+    keep_context_proportion: 0.5,
+    keep_context_proportion_min: 0.0,
+    keep_context_proportion_max: 1.0,
+    keep_context_proportion_step: 0.05,
+
+    auto_adjust: true,
+    freeze: false,
+    query_last_only: true,
+};
+
+const postHeaders = {
+    'Content-Type': 'application/json',
+    'Bypass-Tunnel-Reminder': 'bypass',
+};
+
+async function invalidateMessageSyncState(messageId) {
+    console.log('CHROMADB: invalidating message sync state', messageId);
+    const state = await getChatSyncState();
+    state[messageId] = 0;
+    await dbStore.put(getCurrentChatId(), state);
+}
+
+async function getChatSyncState() {
+    const currentChatId = getCurrentChatId();
+    if (!checkChatId(currentChatId)) {
+        return;
+    }
+
+    const context = getContext();
+    const chatState = (await dbStore.get(currentChatId)) || [];
+
+    // if the chat length has decreased, it means that some messages were deleted
+    if (chatState.length > context.chat.length) {
+        for (let i = context.chat.length; i < chatState.length; i++) {
+            // if the synced message was deleted, notify the user
+            if (chatState[i]) {
+                toastr.warning(
+                    'Purge your ChromaDB to remove it from there too. See the "Smart Context" tab in the Extensions menu for more information.',
+                    'Message deleted from chat, but it still exists inside the ChromaDB database.',
+                    { timeOut: 0, extendedTimeOut: 0, preventDuplicates: true },
+                );
+                break;
+            }
+        }
+    }
+
+    chatState.length = context.chat.length;
+    for (let i = 0; i < chatState.length; i++) {
+        if (chatState[i] === undefined) {
+            chatState[i] = 0;
+        }
+    }
+    await dbStore.put(currentChatId, chatState);
+
+    return chatState;
+}
+
+async function loadSettings() {
+    if (Object.keys(extension_settings.chromadb).length === 0) {
+        Object.assign(extension_settings.chromadb, defaultSettings);
+    }
+
+    console.debug(`loading chromadb strat:${extension_settings.chromadb.strategy}`);
+    $("#chromadb_strategy option[value=" + extension_settings.chromadb.strategy + "]").attr(
+        "selected",
+        "true"
+    );
+    $("#chromadb_sort_strategy option[value=" + extension_settings.chromadb.sort_strategy + "]").attr(
+        "selected",
+        "true"
+    );
+    $('#chromadb_keep_context').val(extension_settings.chromadb.keep_context).trigger('input');
+    $('#chromadb_n_results').val(extension_settings.chromadb.n_results).trigger('input');
+    $('#chromadb_split_length').val(extension_settings.chromadb.split_length).trigger('input');
+    $('#chromadb_file_split_length').val(extension_settings.chromadb.file_split_length).trigger('input');
+    $('#chromadb_keep_context_proportion').val(extension_settings.chromadb.keep_context_proportion).trigger('input');
+    $('#chromadb_custom_depth').val(extension_settings.chromadb.chroma_depth).trigger('input');
+    $('#chromadb_custom_msg').val(extension_settings.chromadb.recall_msg).trigger('input');
+
+    $('#chromadb_hhaa_wrapperfmt').val(extension_settings.chromadb.hhaa_wrapper_msg).trigger('input');
+    $('#chromadb_hhaa_memoryfmt').val(extension_settings.chromadb.hhaa_memory_msg).trigger('input');
+    $('#chromadb_hhaa_token_limit').val(extension_settings.chromadb.hhaa_token_limit).trigger('input');
+
+    $('#chromadb_auto_adjust').prop('checked', extension_settings.chromadb.auto_adjust);
+    $('#chromadb_freeze').prop('checked', extension_settings.chromadb.freeze);
+    $('#chromadb_query_last_only').val(extension_settings.chromadb.query_last_only).trigger('input');
+    enableDisableSliders();
+    onStrategyChange();
+}
+
+function onStrategyChange() {
+    console.debug('changing chromadb strat');
+    extension_settings.chromadb.strategy = $('#chromadb_strategy').val();
+    if (extension_settings.chromadb.strategy === "custom") {
+        $('#chromadb_custom_depth').show();
+        $('label[for="chromadb_custom_depth"]').show();
+        $('#chromadb_custom_msg').show();
+        $('label[for="chromadb_custom_msg"]').show();
+    }
+    else if(extension_settings.chromadb.strategy === "hh_aa"){
+        $('#chromadb_hhaa_wrapperfmt').show();
+        $('label[for="chromadb_hhaa_wrapperfmt"]').show();
+        $('#chromadb_hhaa_memoryfmt').show();
+        $('label[for="chromadb_hhaa_memoryfmt"]').show();
+        $('#chromadb_hhaa_token_limit').show();
+        $('label[for="chromadb_hhaa_token_limit"]').show();
+    }
+    saveSettingsDebounced();
+}
+
+function onRecallStrategyChange() {
+    console.log('changing chromadb recall strat');
+    extension_settings.chromadb.recall_strategy = $('#chromadb_recall_strategy').val();
+
+    saveSettingsDebounced();
+}
+
+function onSortStrategyChange() {
+    console.log('changing chromadb sort strat');
+    extension_settings.chromadb.sort_strategy = $('#chromadb_sort_strategy').val();
+
+    saveSettingsDebounced();
+}
+
+function onKeepContextInput() {
+    extension_settings.chromadb.keep_context = Number($('#chromadb_keep_context').val());
+    $('#chromadb_keep_context_value').text(extension_settings.chromadb.keep_context);
+    saveSettingsDebounced();
+}
+
+function onNResultsInput() {
+    extension_settings.chromadb.n_results = Number($('#chromadb_n_results').val());
+    $('#chromadb_n_results_value').text(extension_settings.chromadb.n_results);
+    saveSettingsDebounced();
+}
+
+function onChromaDepthInput() {
+    extension_settings.chromadb.chroma_depth = Number($('#chromadb_custom_depth').val());
+    $('#chromadb_custom_depth_value').text(extension_settings.chromadb.chroma_depth);
+    saveSettingsDebounced();
+}
+
+function onChromaMsgInput() {
+    extension_settings.chromadb.recall_msg = $('#chromadb_custom_msg').val();
+    saveSettingsDebounced();
+}
+
+function onChromaHHAAWrapper() {
+    extension_settings.chromadb.hhaa_wrapper_msg = $('#chromadb_hhaa_wrapperfmt').val();
+    saveSettingsDebounced();
+}
+function onChromaHHAAMemory() {
+    extension_settings.chromadb.hhaa_memory_msg = $('#chromadb_hhaa_memoryfmt').val();
+    saveSettingsDebounced();
+}
+function onChromaHHAATokens() {
+    extension_settings.chromadb.hhaa_token_limit = Number($('#chromadb_hhaa_token_limit').val());
+    $('#chromadb_hhaa_token_limit_value').text(extension_settings.chromadb.hhaa_token_limit);
+    saveSettingsDebounced();
+}
+
+function onSplitLengthInput() {
+    extension_settings.chromadb.split_length = Number($('#chromadb_split_length').val());
+    $('#chromadb_split_length_value').text(extension_settings.chromadb.split_length);
+    saveSettingsDebounced();
+}
+
+function onFileSplitLengthInput() {
+    extension_settings.chromadb.file_split_length = Number($('#chromadb_file_split_length').val());
+    $('#chromadb_file_split_length_value').text(extension_settings.chromadb.file_split_length);
+    saveSettingsDebounced();
+}
+
+function onChunkNLInput() {
+    let shouldSplit = $('#onChunkNLInput').is(':checked');
+    if (shouldSplit) {
+        extension_settings.chromadb.file_split_type = "newline";
+    } else {
+        extension_settings.chromadb.file_split_type = "length";
+    }
+    saveSettingsDebounced();
+}
+
+function checkChatId(chat_id) {
+    if (!chat_id || chat_id.trim() === '') {
+        toastr.error('Please select a character and try again.');
+        return false;
+    }
+    return true;
+}
+
+async function addMessages(chat_id, messages) {
+    if (extension_settings.chromadb.freeze) {
+        return { count: 0 };
+    }
+
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/chromadb';
+
+    const messagesDeepCopy = JSON.parse(JSON.stringify(messages));
+    let splitMessages = [];
+
+    let id = 0;
+    messagesDeepCopy.forEach((m, index) => {
+        const split = splitRecursive(m.mes, extension_settings.chromadb.split_length);
+        splitMessages.push(...split.map(text => ({
+            ...m,
+            mes: text,
+            send_date: id,
+            id: `msg-${id++}`,
+            index: index,
+            extra: undefined,
+        })));
+    });
+
+    splitMessages = await filterSyncedMessages(splitMessages);
+
+    // no messages to add
+    if (splitMessages.length === 0) {
+        return { count: 0 };
+    }
+
+    const transformedMessages = splitMessages.map((m) => ({
+        id: m.id,
+        role: m.is_user ? 'user' : 'assistant',
+        content: m.mes,
+        date: m.send_date,
+        meta: JSON.stringify(m),
+    }));
+
+    const addMessagesResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: postHeaders,
+        body: JSON.stringify({ chat_id, messages: transformedMessages }),
+    });
+
+    if (addMessagesResult.ok) {
+        const addMessagesData = await addMessagesResult.json();
+        return addMessagesData; // { count: 1 }
+    }
+
+    return { count: 0 };
+}
+
+async function filterSyncedMessages(splitMessages) {
+    const syncState = await getChatSyncState();
+    const removeIndices = [];
+    const syncedIndices = [];
+    for (let i = 0; i < splitMessages.length; i++) {
+        const index = splitMessages[i].index;
+
+        if (syncState[index]) {
+            removeIndices.push(i);
+            continue;
+        }
+
+        syncedIndices.push(index);
+    }
+
+    for (const index of syncedIndices) {
+        syncState[index] = 1;
+    }
+
+    console.debug('CHROMADB: sync state', syncState.map((v, i) => ({ id: i, synced: v })));
+    await dbStore.put(getCurrentChatId(), syncState);
+
+    // remove messages that are already synced
+    return splitMessages.filter((_, i) => !removeIndices.includes(i));
+}
+
+async function onPurgeClick() {
+    const chat_id = getCurrentChatId();
+    if (!checkChatId(chat_id)) {
+        return;
+    }
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/chromadb/purge';
+
+    const purgeResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: postHeaders,
+        body: JSON.stringify({ chat_id }),
+    });
+
+    if (purgeResult.ok) {
+        await dbStore.delete(chat_id);
+        toastr.success('ChromaDB context has been successfully cleared');
+    }
+}
+
+async function onExportClick() {
+    const currentChatId = getCurrentChatId();
+    if (!checkChatId(currentChatId)) {
+        return;
+    }
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/chromadb/export';
+
+    const exportResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: postHeaders,
+        body: JSON.stringify({ chat_id: currentChatId }),
+    });
+
+    if (exportResult.ok) {
+        const data = await exportResult.json();
+        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+        const href = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = href;
+        link.download = currentChatId + '.json';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    } else {
+        //Show the error from the result without the html, only what's in the body paragraph
+        let parser = new DOMParser();
+        let error = await exportResult.text();
+        let doc = parser.parseFromString(error, 'text/html');
+        let errorMessage = doc.querySelector('p').textContent;
+        toastr.error(`An error occurred while attempting to download the data from ChromaDB: ${errorMessage}`);
+    }
+}
+
+function tinyhash(text) {
+    let hash = 0;
+    for (let i = 0; i < text.length; ++i) {
+        hash = ((hash<<5) - hash) + text.charCodeAt(i);
+        hash = hash & hash; // Keeps it 32-bit allegedly.
+    }
+    return hash;
+}
+
+async function onSelectImportFile(e) {
+    const file = e.target.files[0];
+    const currentChatId = getCurrentChatId();
+    if (!checkChatId(currentChatId)) {
+        return;
+    }
+
+    if (!file) {
+        return;
+    }
+
+    try {
+        toastr.info('This may take some time, depending on the file size', 'Processing...');
+
+        const text = await getFileText(file);
+        const imported = JSON.parse(text);
+
+        const id_salt = "-" + tinyhash(imported.chat_id).toString(36);
+        for (let entry of imported.content) {
+            entry.id = entry.id + id_salt;
+        }
+
+        imported.chat_id = currentChatId;
+
+        const url = new URL(getApiUrl());
+        url.pathname = '/api/chromadb/import';
+
+        const importResult = await doExtrasFetch(url, {
+            method: 'POST',
+            headers: postHeaders,
+            body: JSON.stringify(imported),
+        });
+
+        if (importResult.ok) {
+            const importResultData = await importResult.json();
+
+            toastr.success(`Number of chunks: ${importResultData.count}`, 'Injected successfully!');
+            return importResultData;
+        } else {
+            throw new Error();
+        }
+    }
+    catch (error) {
+        console.log(error);
+        toastr.error('Something went wrong while importing the data');
+    }
+    finally {
+        e.target.form.reset();
+    }
+}
+
+async function queryMessages(chat_id, query) {
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/chromadb/query';
+
+    const queryMessagesResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: postHeaders,
+        body: JSON.stringify({ chat_id, query, n_results: extension_settings.chromadb.n_results }),
+    });
+
+    if (queryMessagesResult.ok) {
+        const queryMessagesData = await queryMessagesResult.json();
+
+        return queryMessagesData;
+    }
+
+    return [];
+}
+
+async function queryMultiMessages(chat_id, query) {
+    const context = getContext();
+    const response = await fetch("/getallchatsofcharacter", {
+        method: 'POST',
+        body: JSON.stringify({ avatar_url: context.characters[context.characterId].avatar }),
+        headers: getRequestHeaders(),
+    });
+    if (!response.ok) {
+        return;
+    }
+    let data = await response.json();
+    data = Object.values(data);
+    let chat_list = data.sort((a, b) => a["file_name"].localeCompare(b["file_name"])).reverse();
+
+    // Extracting chat_ids from the chat_list
+    chat_list = chat_list.map(chat => chat.file_name.replace(/\.[^/.]+$/, ""));
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/chromadb/multiquery';
+
+    const queryMessagesResult = await fetch(url, {
+        method: 'POST',
+        body: JSON.stringify({ chat_list, query, n_results: extension_settings.chromadb.n_results }),
+        headers: postHeaders,
+    });
+
+    if (queryMessagesResult.ok) {
+        const queryMessagesData = await queryMessagesResult.json();
+        return queryMessagesData;
+    }
+
+    return [];
+}
+
+async function onSelectInjectFile(e) {
+    const file = e.target.files[0];
+    const currentChatId = getCurrentChatId();
+    if (!checkChatId(currentChatId)) {
+        return;
+    }
+    if (!file) {
+        return;
+    }
+
+    try {
+        toastr.info('This may take some time, depending on the file size', 'Processing...');
+        const text = await getFileText(file);
+        extension_settings.chromadb.file_split_type = "newline";
+        //allow splitting on newlines or splitrecursively
+        let split = [];
+        if (extension_settings.chromadb.file_split_type == "newline") {
+            split = text.split(/\r?\n/).filter(onlyUnique);
+        } else {
+            split = splitRecursive(text, extension_settings.chromadb.file_split_length).filter(onlyUnique);
+        }
+        const baseDate = Date.now();
+
+        const messages = split.map((m, i) => ({
+            id: `${file.name}-${split.indexOf(m)}`,
+            role: 'system',
+            content: m,
+            date: baseDate + i,
+            meta: JSON.stringify({
+                name: file.name,
+                is_user: false,
+                is_name: false,
+                is_system: false,
+                send_date: humanizedDateTime(),
+                mes: m,
+                extra: {
+                    type: system_message_types.NARRATOR,
+                }
+            }),
+        }));
+
+        const url = new URL(getApiUrl());
+        url.pathname = '/api/chromadb';
+
+        const addMessagesResult = await doExtrasFetch(url, {
+            method: 'POST',
+            headers: postHeaders,
+            body: JSON.stringify({ chat_id: currentChatId, messages: messages }),
+        });
+
+        if (addMessagesResult.ok) {
+            const addMessagesData = await addMessagesResult.json();
+
+            toastr.success(`Number of chunks: ${addMessagesData.count}`, 'Injected successfully!');
+            return addMessagesData;
+        } else {
+            throw new Error();
+        }
+    }
+    catch (error) {
+        console.log(error);
+        toastr.error('Something went wrong while injecting the data');
+    }
+    finally {
+        e.target.form.reset();
+    }
+}
+
+/*
+* Automatically adjusts the extension settings for the optimal number of messages to keep and query based
+* on the chat history and a specified maximum context length.
+*/
+function doAutoAdjust(chat, maxContext) {
+    console.debug('CHROMADB: Auto-adjusting sliders (messages: %o, maxContext: %o)', chat.length, maxContext);
+    // Get mean message length
+    const meanMessageLength = chat.reduce((acc, cur) => acc + cur.mes.length, 0) / chat.length;
+
+    if (Number.isNaN(meanMessageLength)) {
+        console.debug('CHROMADB: Mean message length is NaN, aborting auto-adjust');
+        return;
+    }
+
+    console.debug('CHROMADB: Mean message length (characters): %o', meanMessageLength);
+    // Convert to number of "tokens"
+    const meanMessageLengthTokens = Math.ceil(meanMessageLength / CHARACTERS_PER_TOKEN_RATIO);
+    console.debug('CHROMADB: Mean message length (tokens): %o', meanMessageLengthTokens);
+    // Get number of messages in context
+    const contextMessages = Math.max(1, Math.ceil(maxContext / meanMessageLengthTokens));
+    // Round up to nearest 10
+    const contextMessagesRounded = Math.ceil(contextMessages / 10) * 10;
+    console.debug('CHROMADB: Estimated context messages (rounded): %o', contextMessagesRounded);
+    // Messages to keep (proportional, rounded to nearest 5, minimum 5, maximum 500)
+    const messagesToKeep = Math.min(defaultSettings.keep_context_max, Math.max(5, Math.floor(contextMessagesRounded * extension_settings.chromadb.keep_context_proportion / 5) * 5));
+    console.debug('CHROMADB: Estimated messages to keep: %o', messagesToKeep);
+    // Messages to query (rounded, maximum 500)
+    const messagesToQuery = Math.min(defaultSettings.n_results_max, contextMessagesRounded - messagesToKeep);
+    console.debug('CHROMADB: Estimated messages to query: %o', messagesToQuery);
+    // Set extension settings
+    extension_settings.chromadb.keep_context = messagesToKeep;
+    extension_settings.chromadb.n_results = messagesToQuery;
+    // Update sliders
+    $('#chromadb_keep_context').val(messagesToKeep);
+    $('#chromadb_n_results').val(messagesToQuery);
+    // Update labels
+    $('#chromadb_keep_context_value').text(extension_settings.chromadb.keep_context);
+    $('#chromadb_n_results_value').text(extension_settings.chromadb.n_results);
+}
+
+window.chromadb_interceptGeneration = async (chat, maxContext) => {
+    if (extension_settings.chromadb.auto_adjust) {
+        doAutoAdjust(chat, maxContext);
+    }
+
+    const currentChatId = getCurrentChatId();
+    if (!currentChatId)
+        return;
+
+    //log the current settings
+    console.debug("CHROMADB: Current settings: %o", extension_settings.chromadb);
+
+    const selectedStrategy = extension_settings.chromadb.strategy;
+    const recallStrategy = extension_settings.chromadb.recall_strategy;
+    let recallMsg = extension_settings.chromadb.recall_msg || defaultSettings.chroma_default_msg;
+    const chromaDepth = extension_settings.chromadb.chroma_depth;
+    const chromaSortStrategy = extension_settings.chromadb.sort_strategy;
+    const chromaQueryLastOnly = extension_settings.chromadb.query_last_only;
+    const messagesToStore = chat.slice(0, -extension_settings.chromadb.keep_context);
+
+    if (messagesToStore.length > 0 && !extension_settings.chromadb.freeze) {
+        //log the messages to store
+        console.debug("CHROMADB: Messages to store: %o", messagesToStore);
+        //log the messages to store length vs keep context
+        console.debug("CHROMADB: Messages to store length vs keep context: %o vs %o", messagesToStore.length, extension_settings.chromadb.keep_context);
+        await addMessages(currentChatId, messagesToStore);
+    }
+    
+    const lastMessage = chat[chat.length - 1];
+
+    let queriedMessages;
+    if (lastMessage) {
+        let queryBlob = "";
+        if (chromaQueryLastOnly) {
+            queryBlob = lastMessage.mes;
+        }
+        else {
+            for (let msg of chat.slice(-extension_settings.chromadb.keep_context)) {
+                queryBlob += `${msg.mes}\n`
+            }
+        }
+        console.debug("CHROMADB: Query text:", queryBlob);
+
+        if (recallStrategy === 'multichat') {
+            console.log("Utilizing multichat")
+            queriedMessages = await queryMultiMessages(currentChatId, queryBlob);
+        }
+        else {
+            queriedMessages = await queryMessages(currentChatId, queryBlob);
+        }
+
+        if (chromaSortStrategy === "date") {
+            queriedMessages.sort((a, b) => a.date - b.date);
+        }
+        else {
+            queriedMessages.sort((a, b) => b.distance - a.distance);
+        }
+        console.debug("CHROMADB: Query results: %o", queriedMessages);
+
+
+        let newChat = [];
+
+        if (selectedStrategy === 'ross') {
+            //adds chroma to the end of chat and allows Generate() to cull old messages naturally.
+            const context = getContext();
+            const charname = context.name2;
+            newChat.push(
+                {
+                    is_name: false,
+                    is_user: false,
+                    mes: `[Use these past chat exchanges to inform ${charname}'s next response:`,
+                    name: "system",
+                    send_date: 0,
+                }
+            );
+            newChat.push(...queriedMessages.map(m => m.meta).filter(onlyUnique).map(JSON.parse));
+            newChat.push(
+                {
+                    is_name: false,
+                    is_user: false,
+                    mes: `]\n`,
+                    name: "system",
+                    send_date: 0,
+                }
+            );
+            chat.splice(chat.length, 0, ...newChat);
+        }
+        if (selectedStrategy === 'hh_aa') {
+            // Insert chroma history messages as a list at the AFTER_SCENARIO anchor point
+            const context = getContext();
+            const chromaTokenLimit = extension_settings.chromadb.hhaa_token_limit;
+
+            let wrapperMsg = extension_settings.chromadb.hhaa_wrapper_msg || defaultSettings.chroma_default_hhaa_wrapper;
+            wrapperMsg = substituteParams(wrapperMsg, context.name1, context.name2);
+            if (!wrapperMsg.includes("{{memories}}")) {
+                wrapperMsg += " {{memories}}";
+            }
+            let memoryMsg = extension_settings.chromadb.hhaa_memory_msg || defaultSettings.chroma_default_hhaa_memory;
+            memoryMsg = substituteParams(memoryMsg, context.name1, context.name2);
+            if (!memoryMsg.includes("{{message}}")) {
+                memoryMsg += " {{message}}";
+            }
+
+            // Reversed because we want the most 'important' messages at the bottom.
+            let recalledMemories = queriedMessages.map(m => m.meta).filter(onlyUnique).map(JSON.parse).reverse();
+            let tokenApprox = 0;
+            let allMemoryBlob = "";
+            let seenMemories = new Set(); // Why are there even duplicates in chromadb anyway?
+            for (const msg of recalledMemories) {
+                const memoryBlob = memoryMsg.replace('{{name}}', msg.name).replace('{{message}}', msg.mes);
+                const memoryTokens = (memoryBlob.length / CHARACTERS_PER_TOKEN_RATIO);
+                if (!seenMemories.has(memoryBlob) && tokenApprox + memoryTokens <= chromaTokenLimit) {
+                    allMemoryBlob += memoryBlob;
+                    tokenApprox += memoryTokens;
+                    seenMemories.add(memoryBlob);
+                }
+            }
+
+            // No memories? No prompt.
+            const promptBlob = (tokenApprox == 0) ? "" : wrapperMsg.replace('{{memories}}', allMemoryBlob);
+            console.debug("CHROMADB: prompt blob: %o", promptBlob);
+            context.setExtensionPrompt(MODULE_NAME, promptBlob, extension_prompt_types.AFTER_SCENARIO);
+        }
+        if (selectedStrategy === 'custom') {
+            const context = getContext();
+            recallMsg = substituteParams(recallMsg, context.name1, context.name2);
+            if (!recallMsg.includes("{{memories}}")) {
+                recallMsg += " {{memories}}";
+            }
+            let recallStart = recallMsg.split('{{memories}}')[0]
+            let recallEnd = recallMsg.split('{{memories}}')[1]
+
+            newChat.push(
+                {
+                    is_name: false,
+                    is_user: false,
+                    mes: recallStart,
+                    name: "system",
+                    send_date: 0,
+                }
+            );
+            newChat.push(...queriedMessages.map(m => m.meta).filter(onlyUnique).map(JSON.parse));
+            newChat.push(
+                {
+                    is_name: false,
+                    is_user: false,
+                    mes: recallEnd + `\n`,
+                    name: "system",
+                    send_date: 0,
+                }
+            );
+
+            //prototype chroma duplicate removal
+            let chatset = new Set(chat.map(obj => obj.mes));
+            newChat = newChat.filter(obj => !chatset.has(obj.mes));
+
+            if(chromaDepth === -1) {
+                chat.splice(chat.length, 0, ...newChat);
+            }
+            else {
+                chat.splice(chromaDepth, 0, ...newChat);
+            }
+        }
+        if (selectedStrategy === 'original') {
+            //removes .length # messages from the start of 'kept messages'
+            //replaces them with chromaDB results (with no separator)
+            newChat.push(...queriedMessages.map(m => m.meta).filter(onlyUnique).map(JSON.parse));
+            chat.splice(0, messagesToStore.length, ...newChat);
+
+        }
+    }
+}
+
+
+function onFreezeInput() {
+    extension_settings.chromadb.freeze = $('#chromadb_freeze').is(':checked');
+    saveSettingsDebounced();
+}
+
+function onAutoAdjustInput() {
+    extension_settings.chromadb.auto_adjust = $('#chromadb_auto_adjust').is(':checked');
+    enableDisableSliders();
+    saveSettingsDebounced();
+}
+function onFullLogQuery() {
+    extension_settings.chromadb.query_last_only = $('#chromadb_query_last_only').is(':checked');
+    saveSettingsDebounced();
+}
+
+function enableDisableSliders() {
+    const auto_adjust = extension_settings.chromadb.auto_adjust;
+    $('label[for="chromadb_keep_context"]').prop('hidden', auto_adjust);
+    $('#chromadb_keep_context').prop('hidden', auto_adjust)
+    $('label[for="chromadb_n_results"]').prop('hidden', auto_adjust);
+    $('#chromadb_n_results').prop('hidden', auto_adjust)
+    $('label[for="chromadb_keep_context_proportion"]').prop('hidden', !auto_adjust);
+    $('#chromadb_keep_context_proportion').prop('hidden', !auto_adjust)
+}
+
+function onKeepContextProportionInput() {
+    extension_settings.chromadb.keep_context_proportion = $('#chromadb_keep_context_proportion').val();
+    $('#chromadb_keep_context_proportion_value').text(Math.round(extension_settings.chromadb.keep_context_proportion * 100));
+    saveSettingsDebounced();
+}
+
+jQuery(async () => {
+    const settingsHtml = `
+    <div class="chromadb_settings">
+        <div class="inline-drawer">
+            <div class="inline-drawer-toggle inline-drawer-header">
+            <b>Smart Context</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <small>This extension rearranges the messages in the current chat to keep more relevant information in the context. Adjust the sliders below based on average amount of messages in your prompt (refer to the chat cut-off line).</small>
+            <span class="wide100p marginTopBot5 displayBlock">Memory Injection Strategy</span>
+            <hr>
+            <select id="chromadb_strategy">
+                <option value="original">Replace non-kept chat items with memories</option>
+                <option value="ross">Add memories after chat with a header tag</option>
+                <option value="hh_aa">Add memory list to character description</option>
+                <option value="custom">Add memories at custom depth with custom msg</option>
+            </select>
+            <label for="chromadb_custom_msg" hidden><small>Custom injection message:</small></label>
+            <textarea id="chromadb_custom_msg" hidden class="text_pole textarea_compact" rows="2" placeholder="${defaultSettings.chroma_default_msg}" style="height: 61px; display: none;"></textarea>
+            <label for="chromadb_custom_depth" hidden><small>How deep should the memory messages be injected?: (<span id="chromadb_custom_depth_value"></span>)</small></label>
+            <input id="chromadb_custom_depth" type="range" min="${defaultSettings.chroma_depth_min}" max="${defaultSettings.chroma_depth_max}" step="${defaultSettings.chroma_depth_step}" value="${defaultSettings.chroma_depth}" hidden/>
+            
+            <label for="chromadb_hhaa_wrapperfmt" hidden><small>Custom wrapper format:</small></label>
+            <textarea id="chromadb_hhaa_wrapperfmt" hidden class="text_pole textarea_compact" rows="2" placeholder="${defaultSettings.chroma_default_hhaa_wrapper}" style="height: 61px; display: none;"></textarea>
+            <label for="chromadb_hhaa_memoryfmt" hidden><small>Custom memory format:</small></label>
+            <textarea id="chromadb_hhaa_memoryfmt" hidden class="text_pole textarea_compact" rows="2" placeholder="${defaultSettings.chroma_default_hhaa_memory}" style="height: 61px; display: none;"></textarea>
+            <label for="chromadb_hhaa_token_limit" hidden><small>Maximum tokens allowed for memories: (<span id="chromadb_hhaa_token_limit_value"></span>)</small></label>
+            <input id="chromadb_hhaa_token_limit" type="range" min="0" max="2048" step="64" value="${defaultSettings.hhaa_token_limit}" hidden/>
+            
+            
+            <span>Memory Recall Strategy</span>
+            <select id="chromadb_recall_strategy">
+                <option value="original">Recall only from this chat</option>
+                <option value="multichat">Recall from all character chats (experimental)</option>
+            </select>
+            <span>Memory Sort Strategy</span>
+            <select id="chromadb_sort_strategy">
+                <option value="date">Sort memories by date</option>
+                <option value="distance">Sort memories by relevance</option>
+            </select>
+            <label for="chromadb_keep_context"><small>How many original chat messages to keep: (<span id="chromadb_keep_context_value"></span>) messages</small></label>
+            <input id="chromadb_keep_context" type="range" min="${defaultSettings.keep_context_min}" max="${defaultSettings.keep_context_max}" step="${defaultSettings.keep_context_step}" value="${defaultSettings.keep_context}" />
+            <label for="chromadb_n_results"><small>Maximum number of ChromaDB 'memories' to inject: (<span id="chromadb_n_results_value"></span>) messages</small></label>
+            <input id="chromadb_n_results" type="range" min="${defaultSettings.n_results_min}" max="${defaultSettings.n_results_max}" step="${defaultSettings.n_results_step}" value="${defaultSettings.n_results}" />
+            
+            <label for="chromadb_keep_context_proportion"><small>Keep (<span id="chromadb_keep_context_proportion_value"></span>%) of in-context chat messages; replace the rest with memories</small></label>
+            <input id="chromadb_keep_context_proportion" type="range" min="${defaultSettings.keep_context_proportion_min}" max="${defaultSettings.keep_context_proportion_max}" step="${defaultSettings.keep_context_proportion_step}" value="${defaultSettings.keep_context_proportion}" />
+            <label for="chromadb_split_length"><small>Max length for each 'memory' pulled from the current chat history: (<span id="chromadb_split_length_value"></span>) characters</small></label>
+            <input id="chromadb_split_length" type="range" min="${defaultSettings.split_length_min}" max="${defaultSettings.split_length_max}" step="${defaultSettings.split_length_step}" value="${defaultSettings.split_length}" />
+            <label for="chromadb_file_split_length"><small>Max length for each 'memory' pulled from imported text files: (<span id="chromadb_file_split_length_value"></span>) characters</small></label>
+            <input id="chromadb_file_split_length" type="range" min="${defaultSettings.file_split_length_min}" max="${defaultSettings.file_split_length_max}" step="${defaultSettings.file_split_length_step}" value="${defaultSettings.file_split_length}" />
+            <label class="checkbox_label" for="chromadb_freeze" title="Pauses the automatic synchronization of new messages with ChromaDB. Older messages and injections will still be pulled as usual." >
+                <input type="checkbox" id="chromadb_freeze" />
+                <span>Freeze ChromaDB state</span>
+            </label>
+            <label class="checkbox_label for="chromadb_auto_adjust" title="Automatically adjusts the number of messages to keep based on the average number of messages in the current chat and the chosen proportion.">
+                <input type="checkbox" id="chromadb_auto_adjust" />
+                <span>Use % strategy</span>
+            </label>
+            <label class="checkbox_label" for="chromadb_chunk_nl" title="Chunk injected documents on newline instead of at set character size." >
+                <input type="checkbox" id="chromadb_chunk_nl" />
+                <span>Chunk on Newlines</span>
+            </label>
+            <label class="checkbox_label for="chromadb_query_last_only" title="ChromaDB queries only use the most recent message. (Instead of using all messages still in the context.)">
+                <input type="checkbox" id="chromadb_query_last_only" />
+                <span>Query last message only</span>
+            </label>
+            <div class="flex-container spaceEvenly">
+                <div id="chromadb_inject" title="Upload custom textual data to use in the context of the current chat" class="menu_button">
+                    <i class="fa-solid fa-file-arrow-up"></i>
+                    <span>Inject Data (TXT file)</span>
+                </div>
+                <div id="chromadb_export" title="Export all of the current chromadb data for this current chat" class="menu_button">
+                    <i class="fa-solid fa-file-export"></i>
+                    <span>Export</span>
+                </div>
+                <div id="chromadb_import" title="Import a full chromadb export for this current chat" class="menu_button">
+                    <i class="fa-solid fa-file-import"></i>
+                    <span>Import</span>
+                </div>
+                <div id="chromadb_purge" title="Force purge all the data related to the current chat from the database" class="menu_button">
+                    <i class="fa-solid fa-broom"></i>
+                    <span>Purge Chat from the DB</span>
+                </div>
+            </div>
+            <small><i>Local ChromaDB now persists to disk by default. The default folder is .chroma_db, and you can set a different folder with the --chroma-folder argument. If you are using the Extras Colab notebook, you will need to inject the text data every time the Extras API server is restarted.</i></small>
+        </div>
+        <form><input id="chromadb_inject_file" type="file" accept="text/plain" hidden></form>
+        <form><input id="chromadb_import_file" type="file" accept="application/json" hidden></form>
+    </div>`;
+
+    $('#extensions_settings2').append(settingsHtml);
+    $('#chromadb_strategy').on('change', onStrategyChange);
+    $('#chromadb_recall_strategy').on('change', onRecallStrategyChange);
+    $('#chromadb_sort_strategy').on('change', onSortStrategyChange);
+    $('#chromadb_keep_context').on('input', onKeepContextInput);
+    $('#chromadb_n_results').on('input', onNResultsInput);
+    $('#chromadb_custom_depth').on('input', onChromaDepthInput);
+    $('#chromadb_custom_msg').on('input', onChromaMsgInput);
+
+    $('#chromadb_hhaa_wrapperfmt').on('input', onChromaHHAAWrapper);
+    $('#chromadb_hhaa_memoryfmt').on('input', onChromaHHAAMemory);
+    $('#chromadb_hhaa_token_limit').on('input', onChromaHHAATokens);
+
+    $('#chromadb_split_length').on('input', onSplitLengthInput);
+    $('#chromadb_file_split_length').on('input', onFileSplitLengthInput);
+    $('#chromadb_inject').on('click', () => $('#chromadb_inject_file').trigger('click'));
+    $('#chromadb_import').on('click', () => $('#chromadb_import_file').trigger('click'));
+    $('#chromadb_inject_file').on('change', onSelectInjectFile);
+    $('#chromadb_import_file').on('change', onSelectImportFile);
+    $('#chromadb_purge').on('click', onPurgeClick);
+    $('#chromadb_export').on('click', onExportClick);
+    $('#chromadb_freeze').on('input', onFreezeInput);
+    $('#chromadb_chunk_nl').on('input', onChunkNLInput);
+    $('#chromadb_auto_adjust').on('input', onAutoAdjustInput);
+    $('#chromadb_query_last_only').on('input', onFullLogQuery);
+    $('#chromadb_keep_context_proportion').on('input', onKeepContextProportionInput);
+    await loadSettings();
+
+    // Not sure if this is needed, but it's here just in case
+    eventSource.on(event_types.MESSAGE_DELETED, getChatSyncState);
+    eventSource.on(event_types.MESSAGE_RECEIVED, getChatSyncState);
+    eventSource.on(event_types.MESSAGE_SENT, getChatSyncState);
+    // Will make the sync state update when a message is edited or swiped
+    eventSource.on(event_types.MESSAGE_EDITED, invalidateMessageSyncState);
+    eventSource.on(event_types.MESSAGE_SWIPED, invalidateMessageSyncState);
+});
+

public/scripts/extensions/infinity-context/manifest.json

@@ -0,0 +1,14 @@
+{
+    "display_name": "Smart Context",
+    "loading_order": 11,
+    "requires": [
+        "chromadb"
+    ],
+    "optional": [],
+    "generate_interceptor": "chromadb_interceptGeneration",
+    "js": "index.js",
+    "css": "style.css",
+    "author": "maceter636@proton.me",
+    "version": "1.0.0",
+    "homePage": "https://github.com/SillyTavern/SillyTavern"
+}

public/scripts/extensions/infinity-context/style.css

@@ -0,0 +1,7 @@
+.chromadb_settings .menu_button {
+    width: fit-content;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-direction: row;
+}

public/scripts/extensions/memory/index.js

@@ -0,0 +1,554 @@
+import { getStringHash, debounce, waitUntilCondition } from "../../utils.js";
+import { getContext, getApiUrl, extension_settings, doExtrasFetch, modules } from "../../extensions.js";
+import { eventSource, event_types, extension_prompt_types, generateQuietPrompt, is_send_press, saveSettingsDebounced, substituteParams } from "../../../script.js";
+export { MODULE_NAME };
+
+const MODULE_NAME = '1_memory';
+
+let lastCharacterId = null;
+let lastGroupId = null;
+let lastChatId = null;
+let lastMessageHash = null;
+let lastMessageId = null;
+let inApiCall = false;
+
+const formatMemoryValue = (value) => value ? `Summary: ${value.trim()}` : '';
+const saveChatDebounced = debounce(() => getContext().saveChat(), 2000);
+
+const summary_sources = {
+    'extras': 'extras',
+    'main': 'main',
+};
+
+const defaultPrompt = '[Pause your roleplay. Summarize the most important facts and events that have happened in the chat so far. If a summary already exists in your memory, use that as a base and expand with new facts. Limit the summary to {{words}} words or less. Your response should include nothing but the summary.]';
+
+const defaultSettings = {
+    minLongMemory: 16,
+    maxLongMemory: 1024,
+    longMemoryLength: 128,
+    shortMemoryLength: 512,
+    minShortMemory: 128,
+    maxShortMemory: 1024,
+    shortMemoryStep: 16,
+    longMemoryStep: 8,
+    repetitionPenaltyStep: 0.05,
+    repetitionPenalty: 1.2,
+    maxRepetitionPenalty: 2.0,
+    minRepetitionPenalty: 1.0,
+    temperature: 1.0,
+    minTemperature: 0.1,
+    maxTemperature: 2.0,
+    temperatureStep: 0.05,
+    lengthPenalty: 1,
+    minLengthPenalty: -4,
+    maxLengthPenalty: 4,
+    lengthPenaltyStep: 0.1,
+    memoryFrozen: false,
+    source: summary_sources.extras,
+    prompt: defaultPrompt,
+    promptWords: 200,
+    promptMinWords: 25,
+    promptMaxWords: 1000,
+    promptWordsStep: 25,
+    promptInterval: 10,
+    promptMinInterval: 1,
+    promptMaxInterval: 100,
+    promptIntervalStep: 1,
+};
+
+function loadSettings() {
+    if (Object.keys(extension_settings.memory).length === 0) {
+        Object.assign(extension_settings.memory, defaultSettings);
+    }
+
+    if (extension_settings.memory.source === undefined) {
+        extension_settings.memory.source = defaultSettings.source;
+    }
+
+    if (extension_settings.memory.prompt === undefined) {
+        extension_settings.memory.prompt = defaultSettings.prompt;
+    }
+
+    if (extension_settings.memory.promptWords === undefined) {
+        extension_settings.memory.promptWords = defaultSettings.promptWords;
+    }
+
+    if (extension_settings.memory.promptInterval === undefined) {
+        extension_settings.memory.promptInterval = defaultSettings.promptInterval;
+    }
+
+    $('#summary_source').val(extension_settings.memory.source).trigger('change');
+    $('#memory_long_length').val(extension_settings.memory.longMemoryLength).trigger('input');
+    $('#memory_short_length').val(extension_settings.memory.shortMemoryLength).trigger('input');
+    $('#memory_repetition_penalty').val(extension_settings.memory.repetitionPenalty).trigger('input');
+    $('#memory_temperature').val(extension_settings.memory.temperature).trigger('input');
+    $('#memory_length_penalty').val(extension_settings.memory.lengthPenalty).trigger('input');
+    $('#memory_frozen').prop('checked', extension_settings.memory.memoryFrozen).trigger('input');
+    $('#memory_prompt').val(extension_settings.memory.prompt).trigger('input');
+    $('#memory_prompt_words').val(extension_settings.memory.promptWords).trigger('input');
+    $('#memory_prompt_interval').val(extension_settings.memory.promptInterval).trigger('input');
+}
+
+function onSummarySourceChange(event) {
+    const value = event.target.value;
+    extension_settings.memory.source = value;
+    $('#memory_settings [data-source]').each((_, element) => {
+        const source = $(element).data('source');
+        $(element).toggle(source === value);
+    });
+    saveSettingsDebounced();
+}
+
+function onMemoryShortInput() {
+    const value = $(this).val();
+    extension_settings.memory.shortMemoryLength = Number(value);
+    $('#memory_short_length_tokens').text(value);
+    saveSettingsDebounced();
+
+    // Don't let long buffer be bigger than short
+    if (extension_settings.memory.longMemoryLength > extension_settings.memory.shortMemoryLength) {
+        $('#memory_long_length').val(extension_settings.memory.shortMemoryLength).trigger('input');
+    }
+}
+
+function onMemoryLongInput() {
+    const value = $(this).val();
+    extension_settings.memory.longMemoryLength = Number(value);
+    $('#memory_long_length_tokens').text(value);
+    saveSettingsDebounced();
+
+    // Don't let long buffer be bigger than short
+    if (extension_settings.memory.longMemoryLength > extension_settings.memory.shortMemoryLength) {
+        $('#memory_short_length').val(extension_settings.memory.longMemoryLength).trigger('input');
+    }
+}
+
+function onMemoryRepetitionPenaltyInput() {
+    const value = $(this).val();
+    extension_settings.memory.repetitionPenalty = Number(value);
+    $('#memory_repetition_penalty_value').text(extension_settings.memory.repetitionPenalty.toFixed(2));
+    saveSettingsDebounced();
+}
+
+function onMemoryTemperatureInput() {
+    const value = $(this).val();
+    extension_settings.memory.temperature = Number(value);
+    $('#memory_temperature_value').text(extension_settings.memory.temperature.toFixed(2));
+    saveSettingsDebounced();
+}
+
+function onMemoryLengthPenaltyInput() {
+    const value = $(this).val();
+    extension_settings.memory.lengthPenalty = Number(value);
+    $('#memory_length_penalty_value').text(extension_settings.memory.lengthPenalty.toFixed(2));
+    saveSettingsDebounced();
+}
+
+function onMemoryFrozenInput() {
+    const value = Boolean($(this).prop('checked'));
+    extension_settings.memory.memoryFrozen = value;
+    saveSettingsDebounced();
+}
+
+function onMemoryPromptWordsInput() {
+    const value = $(this).val();
+    extension_settings.memory.promptWords = Number(value);
+    $('#memory_prompt_words_value').text(extension_settings.memory.promptWords);
+    saveSettingsDebounced();
+}
+
+function onMemoryPromptIntervalInput() {
+    const value = $(this).val();
+    extension_settings.memory.promptInterval = Number(value);
+    $('#memory_prompt_interval_value').text(extension_settings.memory.promptInterval);
+    saveSettingsDebounced();
+}
+
+function onMemoryPromptInput() {
+    const value = $(this).val();
+    extension_settings.memory.prompt = value;
+    saveSettingsDebounced();
+}
+
+function saveLastValues() {
+    const context = getContext();
+    lastGroupId = context.groupId;
+    lastCharacterId = context.characterId;
+    lastChatId = context.chatId;
+    lastMessageId = context.chat?.length ?? null;
+    lastMessageHash = getStringHash((context.chat.length && context.chat[context.chat.length - 1]['mes']) ?? '');
+}
+
+function getLatestMemoryFromChat(chat) {
+    if (!Array.isArray(chat) || !chat.length) {
+        return '';
+    }
+
+    const reversedChat = chat.slice().reverse();
+    reversedChat.shift();
+    for (let mes of reversedChat) {
+        if (mes.extra && mes.extra.memory) {
+            return mes.extra.memory;
+        }
+    }
+
+    return '';
+}
+
+async function onChatEvent() {
+    // Module not enabled
+    if (extension_settings.memory.source === summary_sources.extras) {
+        if (!modules.includes('summarize')) {
+            return;
+        }
+    }
+
+    const context = getContext();
+    const chat = context.chat;
+
+    // no characters or group selected
+    if (!context.groupId && context.characterId === undefined) {
+        return;
+    }
+
+    // Generation is in progress, summary prevented
+    if (is_send_press) {
+        return;
+    }
+
+    // Chat/character/group changed
+    if ((context.groupId && lastGroupId !== context.groupId) || (context.characterId !== lastCharacterId) || (context.chatId !== lastChatId)) {
+        const latestMemory = getLatestMemoryFromChat(chat);
+        setMemoryContext(latestMemory, false);
+        saveLastValues();
+        return;
+    }
+
+    // Currently summarizing or frozen state - skip
+    if (inApiCall || extension_settings.memory.memoryFrozen) {
+        return;
+    }
+
+    // No new messages - do nothing
+    if (chat.length === 0 || (lastMessageId === chat.length && getStringHash(chat[chat.length - 1].mes) === lastMessageHash)) {
+        return;
+    }
+
+    // Messages has been deleted - rewrite the context with the latest available memory
+    if (chat.length < lastMessageId) {
+        const latestMemory = getLatestMemoryFromChat(chat);
+        setMemoryContext(latestMemory, false);
+    }
+
+    // Message has been edited / regenerated - delete the saved memory
+    if (chat.length
+        && chat[chat.length - 1].extra
+        && chat[chat.length - 1].extra.memory
+        && lastMessageId === chat.length
+        && getStringHash(chat[chat.length - 1].mes) !== lastMessageHash) {
+        delete chat[chat.length - 1].extra.memory;
+    }
+
+    try {
+        await summarizeChat(context);
+    }
+    catch (error) {
+        console.log(error);
+    }
+    finally {
+        saveLastValues();
+    }
+}
+
+async function forceSummarizeChat() {
+    const context = getContext();
+
+    if (!context.chatId) {
+        toastr.warning('No chat selected');
+        return;
+    }
+
+    toastr.info('Summarizing chat...', 'Please wait');
+    const value = await summarizeChatMain(context, true);
+
+    if (!value) {
+        toastr.warning('Failed to summarize chat');
+        return;
+    }
+}
+
+async function summarizeChat(context) {
+    switch (extension_settings.memory.source) {
+        case summary_sources.extras:
+            await summarizeChatExtras(context);
+            break;
+        case summary_sources.main:
+            await summarizeChatMain(context, false);
+            break;
+        default:
+            break;
+    }
+}
+
+async function summarizeChatMain(context, force) {
+    try {
+        // Wait for the send button to be released
+        waitUntilCondition(() => is_send_press === false, 10000, 100);
+    } catch {
+        console.debug('Timeout waiting for is_send_press');
+        return;
+    }
+
+    if (!context.chat.length) {
+        console.debug('No messages in chat to summarize');
+        return;
+    }
+
+    if (context.chat.length < extension_settings.memory.promptInterval && !force) {
+        console.debug(`Not enough messages in chat to summarize (chat: ${context.chat.length}, interval: ${extension_settings.memory.promptInterval})`);
+        return;
+    }
+
+    let messagesSinceLastSummary = 0;
+    for (let i = context.chat.length - 1; i >= 0; i--) {
+        if (context.chat[i].extra && context.chat[i].extra.memory) {
+            break;
+        }
+        messagesSinceLastSummary++;
+    }
+
+    if (messagesSinceLastSummary < extension_settings.memory.promptInterval && !force) {
+        console.debug(`Not enough messages since last summary (messages: ${messagesSinceLastSummary}, interval: ${extension_settings.memory.promptInterval}`);
+        return;
+    }
+
+    console.log('Summarizing chat, messages since last summary: ' + messagesSinceLastSummary);
+    const prompt = substituteParams(extension_settings.memory.prompt)
+        .replace(/{{words}}/gi, extension_settings.memory.promptWords);
+
+    if (!prompt) {
+        console.debug('Summarization prompt is empty. Skipping summarization.');
+        return;
+    }
+
+    const summary = await generateQuietPrompt(prompt);
+    const newContext = getContext();
+
+    // something changed during summarization request
+    if (newContext.groupId !== context.groupId
+        || newContext.chatId !== context.chatId
+        || (!newContext.groupId && (newContext.characterId !== context.characterId))) {
+        console.log('Context changed, summary discarded');
+        return;
+    }
+
+    setMemoryContext(summary, true);
+    return summary;
+}
+
+async function summarizeChatExtras(context) {
+    function getMemoryString() {
+        return (longMemory + '\n\n' + memoryBuffer.slice().reverse().join('\n\n')).trim();
+    }
+
+    const chat = context.chat;
+    const longMemory = getLatestMemoryFromChat(chat);
+    const reversedChat = chat.slice().reverse();
+    reversedChat.shift();
+    let memoryBuffer = [];
+
+    for (let mes of reversedChat) {
+        // we reached the point of latest memory
+        if (longMemory && mes.extra && mes.extra.memory == longMemory) {
+            break;
+        }
+
+        // don't care about system
+        if (mes.is_system) {
+            continue;
+        }
+
+        // determine the sender's name
+        const name = mes.is_user ? (context.name1 ?? 'You') : (mes.force_avatar ? mes.name : context.name2);
+        const entry = `${name}:\n${mes['mes']}`;
+        memoryBuffer.push(entry);
+
+        // check if token limit was reached
+        if (context.getTokenCount(getMemoryString()) >= extension_settings.memory.shortMemoryLength) {
+            break;
+        }
+    }
+
+    const resultingString = getMemoryString();
+
+    if (context.getTokenCount(resultingString) < extension_settings.memory.shortMemoryLength) {
+        return;
+    }
+
+    // perform the summarization API call
+    try {
+        inApiCall = true;
+        const url = new URL(getApiUrl());
+        url.pathname = '/api/summarize';
+
+        const apiResult = await doExtrasFetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Bypass-Tunnel-Reminder': 'bypass',
+            },
+            body: JSON.stringify({
+                text: resultingString,
+                params: {
+                    min_length: extension_settings.memory.longMemoryLength * 0, // testing how it behaves 0 min length
+                    max_length: extension_settings.memory.longMemoryLength,
+                    repetition_penalty: extension_settings.memory.repetitionPenalty,
+                    temperature: extension_settings.memory.temperature,
+                    length_penalty: extension_settings.memory.lengthPenalty,
+                }
+            })
+        });
+
+        if (apiResult.ok) {
+            const data = await apiResult.json();
+            const summary = data.summary;
+
+            const newContext = getContext();
+
+            // something changed during summarization request
+            if (newContext.groupId !== context.groupId
+                || newContext.chatId !== context.chatId
+                || (!newContext.groupId && (newContext.characterId !== context.characterId))) {
+                console.log('Context changed, summary discarded');
+                return;
+            }
+
+            setMemoryContext(summary, true);
+        }
+    }
+    catch (error) {
+        console.log(error);
+    }
+    finally {
+        inApiCall = false;
+    }
+}
+
+function onMemoryRestoreClick() {
+    const context = getContext();
+    const content = $('#memory_contents').val();
+    const reversedChat = context.chat.slice().reverse();
+    reversedChat.shift();
+
+    for (let mes of reversedChat) {
+        if (mes.extra && mes.extra.memory == content) {
+            delete mes.extra.memory;
+            break;
+        }
+    }
+
+    const newContent = getLatestMemoryFromChat(context.chat);
+    setMemoryContext(newContent, false);
+}
+
+function onMemoryContentInput() {
+    const value = $(this).val();
+    setMemoryContext(value, true);
+}
+
+function setMemoryContext(value, saveToMessage) {
+    const context = getContext();
+    context.setExtensionPrompt(MODULE_NAME, formatMemoryValue(value), extension_prompt_types.AFTER_SCENARIO);
+    $('#memory_contents').val(value);
+    console.log('Memory set to: ' + value);
+
+    if (saveToMessage && context.chat.length) {
+        const idx = context.chat.length - 2;
+        const mes = context.chat[idx < 0 ? 0 : idx];
+
+        if (!mes.extra) {
+            mes.extra = {};
+        }
+
+        mes.extra.memory = value;
+        saveChatDebounced();
+    }
+}
+
+jQuery(function () {
+    function addExtensionControls() {
+        const settingsHtml = `
+        <div id="memory_settings">
+            <div class="inline-drawer">
+                <div class="inline-drawer-toggle inline-drawer-header">
+                    <b>Summarize</b>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                </div>
+                <div class="inline-drawer-content">
+                    <label for="summary_source">Summarization source:</label>
+                    <select id="summary_source">
+                        <option value="main">Main API</option>
+                        <option value="extras">Extras API</option>
+                    </select>
+                    <label for="memory_contents">Current summary: </label>
+                    <textarea id="memory_contents" class="text_pole textarea_compact" rows="6" placeholder="Summary will be generated here..."></textarea>
+                    <div class="memory_contents_controls">
+                        <input id="memory_restore" class="menu_button" type="button" value="Restore previous state" />
+                        <label for="memory_frozen"><input id="memory_frozen" type="checkbox" />Pause summarization</label>
+                    </div>
+                    <div data-source="main" class="memory_contents_controls">
+                    </div>
+                    <div data-source="main">
+                        <label for="memory_prompt" class="title_restorable">
+                            Summarization Prompt
+                            <div id="memory_force_summarize" class="menu_button menu_button_icon">
+                                <i class="fa-solid fa-database"></i>
+                                <span>Generate now</span>
+                            </div>
+                        </label>
+                        <textarea id="memory_prompt" class="text_pole textarea_compact" rows="6" placeholder="This prompt will be used in summary generation. Insert {{words}} macro to use the "Number of words" parameter."></textarea>
+                        <label for="memory_prompt_words">Number of words in the summary (<span id="memory_prompt_words_value"></span> words)</label>
+                        <input id="memory_prompt_words" type="range" value="${defaultSettings.promptWords}" min="${defaultSettings.promptMinWords}" max="${defaultSettings.promptMaxWords}" step="${defaultSettings.promptWordsStep}" />
+                        <label for="memory_prompt_interval">Update interval (<span id="memory_prompt_interval_value"></span> messages)</label>
+                        <input id="memory_prompt_interval" type="range" value="${defaultSettings.promptInterval}" min="${defaultSettings.promptMinInterval}" max="${defaultSettings.promptMaxInterval}" step="${defaultSettings.promptIntervalStep}" />
+                    </div>
+                    <div data-source="extras">
+                        <label for="memory_short_length">Chat to Summarize buffer length (<span id="memory_short_length_tokens"></span> tokens)</label>
+                        <input id="memory_short_length" type="range" value="${defaultSettings.shortMemoryLength}" min="${defaultSettings.minShortMemory}" max="${defaultSettings.maxShortMemory}" step="${defaultSettings.shortMemoryStep}" />
+                        <label for="memory_long_length">Summary output length (<span id="memory_long_length_tokens"></span> tokens)</label>
+                        <input id="memory_long_length" type="range" value="${defaultSettings.longMemoryLength}" min="${defaultSettings.minLongMemory}" max="${defaultSettings.maxLongMemory}" step="${defaultSettings.longMemoryStep}" />
+                        <label for="memory_temperature">Temperature (<span id="memory_temperature_value"></span>)</label>
+                        <input id="memory_temperature" type="range" value="${defaultSettings.temperature}" min="${defaultSettings.minTemperature}" max="${defaultSettings.maxTemperature}" step="${defaultSettings.temperatureStep}" />
+                        <label for="memory_repetition_penalty">Repetition penalty (<span id="memory_repetition_penalty_value"></span>)</label>
+                        <input id="memory_repetition_penalty" type="range" value="${defaultSettings.repetitionPenalty}" min="${defaultSettings.minRepetitionPenalty}" max="${defaultSettings.maxRepetitionPenalty}" step="${defaultSettings.repetitionPenaltyStep}" />
+                        <label for="memory_length_penalty">Length preference <small>[higher = longer summaries]</small> (<span id="memory_length_penalty_value"></span>)</label>
+                        <input id="memory_length_penalty" type="range" value="${defaultSettings.lengthPenalty}" min="${defaultSettings.minLengthPenalty}" max="${defaultSettings.maxLengthPenalty}" step="${defaultSettings.lengthPenaltyStep}" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        `;
+        $('#extensions_settings2').append(settingsHtml);
+        $('#memory_restore').on('click', onMemoryRestoreClick);
+        $('#memory_contents').on('input', onMemoryContentInput);
+        $('#memory_long_length').on('input', onMemoryLongInput);
+        $('#memory_short_length').on('input', onMemoryShortInput);
+        $('#memory_repetition_penalty').on('input', onMemoryRepetitionPenaltyInput);
+        $('#memory_temperature').on('input', onMemoryTemperatureInput);
+        $('#memory_length_penalty').on('input', onMemoryLengthPenaltyInput);
+        $('#memory_frozen').on('input', onMemoryFrozenInput);
+        $('#summary_source').on('change', onSummarySourceChange);
+        $('#memory_prompt_words').on('input', onMemoryPromptWordsInput);
+        $('#memory_prompt_interval').on('input', onMemoryPromptIntervalInput);
+        $('#memory_prompt').on('input', onMemoryPromptInput);
+        $('#memory_force_summarize').on('click', forceSummarizeChat);
+    }
+
+    addExtensionControls();
+    loadSettings();
+    eventSource.on(event_types.MESSAGE_RECEIVED, onChatEvent);
+    eventSource.on(event_types.MESSAGE_DELETED, onChatEvent);
+    eventSource.on(event_types.MESSAGE_EDITED, onChatEvent);
+    eventSource.on(event_types.MESSAGE_SWIPED, onChatEvent);
+    eventSource.on(event_types.CHAT_CHANGED, onChatEvent);
+});

public/scripts/extensions/memory/manifest.json

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

public/scripts/extensions/memory/style.css

@@ -0,0 +1,34 @@
+#memory_settings {
+    display: flex;
+    flex-direction: column;
+}
+
+#memory_settings textarea {
+    font-size: calc(var(--mainFontSize) * 0.9);
+    line-height: 1.2;
+}
+
+#memory_settings input[type="range"] {
+    margin-bottom: 20px;
+}
+
+#memory_settings label {
+    margin-bottom: 10px;
+}
+
+label[for="memory_frozen"] {
+    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;
+}

public/scripts/extensions/objective/index.js

@@ -0,0 +1,481 @@
+import { chat_metadata } from "../../../script.js";
+import { getContext, extension_settings, saveMetadataDebounced } from "../../extensions.js";
+import {
+    substituteParams,
+    eventSource,
+    event_types,
+    generateQuietPrompt,
+} from "../../../script.js";
+import { registerSlashCommand } from "../../slash-commands.js";
+
+const MODULE_NAME = "Objective"
+
+
+let globalObjective = ""
+let globalTasks = []
+let currentChatId = ""
+let currentTask = null
+let checkCounter = 0
+
+
+const objectivePrompts = {
+    "createTask": `Pause your roleplay and generate a list of tasks to complete an objective. Your next response must be formatted as a numbered list of plain text entries. Do not include anything but the numbered list. The list must be prioritized in the order that tasks must be completed.
+
+    The objective that you must make a numbered task list for is: [{{objective}}].
+    The tasks created should take into account the character traits of {{char}}. These tasks may or may not involve {{user}} directly. Be sure to include the objective as the final task.
+
+    Given an example objective of 'Make me a four course dinner', here is an example output:
+    1. Determine what the courses will be
+    2. Find recipes for each course
+    3. Go shopping for supplies with {{user}}
+    4. Cook the food
+    5. Get {{user}} to set the table
+    6. Serve the food
+    7. Enjoy eating the meal with {{user}}
+    `,
+    "checkTaskCompleted": `Pause your roleplay. Determine if this task is completed: [{{task}}].
+    To do this, examine the most recent messages. Your response must only contain either true or false, nothing other words.
+    Example output:
+    true
+    `
+}
+
+const extensionPrompt = "Your current task is [{{task}}]. Balance existing roleplay with completing this task."
+
+
+//###############################//
+//#       Task Management       #//
+//###############################//
+
+// Accepts optional index. Defaults to adding to end of list.
+function addTask(description, index = null) {
+    index = index != null ? index: index = globalTasks.length
+    globalTasks.splice(index, 0, new ObjectiveTask(
+        {description: description}
+    ))
+    saveState()
+}
+
+// Return the task and index or throw an error
+function getTaskById(taskId){
+    if (taskId == null) {
+        throw `Null task id`
+    }
+    const index = globalTasks.findIndex((task) => task.id === taskId);
+    if (index !== -1) {
+        return { task: globalTasks[index], index: index };
+    } else {
+        throw `Cannot find task with ${taskId}`
+
+    }
+}
+
+function deleteTask(taskId){
+    const { task, index } = getTaskById(taskId)
+
+    globalTasks.splice(index, 1)
+    setCurrentTask()
+    updateUiTaskList()
+}
+
+// Call Quiet Generate to create task list using character context, then convert to tasks. Should not be called much.
+async function generateTasks() {
+    const prompt = substituteParams(objectivePrompts["createTask"].replace(/{{objective}}/gi, globalObjective));
+    console.log(`Generating tasks for objective with prompt`)
+    toastr.info('Generating tasks for objective', 'Please wait...');
+    const taskResponse = await generateQuietPrompt(prompt)
+
+    // Clear all existing global tasks when generating
+    globalTasks = []
+    const numberedListPattern = /^\d+\./
+
+    // Create tasks from generated task list
+    for (const task of taskResponse.split('\n').map(x => x.trim())) {
+        if (task.match(numberedListPattern) != null) {
+            addTask(task.replace(numberedListPattern,"").trim())
+        }
+    }
+    updateUiTaskList()
+    console.info(`Response for Objective: '${globalObjective}' was \n'${taskResponse}', \nwhich created tasks \n${JSON.stringify(globalTasks.map(v => {return v.toSaveState()}), null, 2)} `)
+    toastr.success(`Generated ${globalTasks.length} tasks`, 'Done!');
+}
+
+// Call Quiet Generate to check if a task is completed
+async function checkTaskCompleted() {
+    // Make sure there are tasks
+    if (jQuery.isEmptyObject(currentTask)) {
+        return
+    }
+    checkCounter = $('#objective-check-frequency').val()
+
+    const prompt = substituteParams(objectivePrompts["checkTaskCompleted"].replace(/{{task}}/gi, currentTask.description));
+    const taskResponse = (await generateQuietPrompt(prompt)).toLowerCase()
+
+    // Check response if task complete
+    if (taskResponse.includes("true")) {
+        console.info(`Character determined task '${JSON.stringify(currentTask.toSaveState())} is completed.`)
+        currentTask.completeTask()
+    } else if (!(taskResponse.includes("false"))) {
+        console.warn(`checkTaskCompleted response did not contain true or false. taskResponse: ${taskResponse}`)
+    } else {
+        console.debug(`Checked task completion. taskResponse: ${taskResponse}`)
+    }
+}
+
+
+// Set a task in extensionPrompt context. Defaults to first incomplete
+function setCurrentTask(taskId = null) {
+    const context = getContext();
+    currentTask = {};
+
+    // Set current task to either the next incomplete task, or the index
+    if (taskId === null) {
+        currentTask = globalTasks.find(task => !task.completed) || {};
+    } else {
+        const { _, index } = getTaskById(taskId)
+        currentTask = globalTasks[index];
+    }
+
+    // Get the task description and add to extension prompt
+    const description = currentTask.description || null;
+
+    // Now update the extension prompt
+
+    if (description) {
+        const extensionPromptText = extensionPrompt.replace(/{{task}}/gi, description);
+        context.setExtensionPrompt(MODULE_NAME, extensionPromptText, 1, $('#objective-chat-depth').val());
+        console.info(`Current task in context.extensionPrompts.Objective is ${JSON.stringify(context.extensionPrompts.Objective)}`);
+    } else {
+        context.setExtensionPrompt(MODULE_NAME, '');
+        console.info(`No current task`);
+    }
+
+    saveState();
+}
+
+let taskIdCounter = 0
+function getNextTaskId(){
+    // Make sure id does not exist
+    while (globalTasks.find(task => task.id == taskIdCounter) != undefined) {
+        taskIdCounter += 1
+    }
+    const nextId = taskIdCounter
+    console.log(`TaskID assigned: ${nextId}`)
+    taskIdCounter += 1
+    return nextId
+}
+class ObjectiveTask {
+    id
+    description
+    completed
+    parent
+    children
+
+    // UI Elements
+    taskHtml
+    descriptionSpan
+    completedCheckbox
+    deleteTaskButton
+    addTaskButton
+
+    constructor ({id=undefined, description, completed=false, parent=null}) {
+        this.description = description
+        this.parent = parent
+        this.children = []
+        this.completed = completed
+
+        // Generate a new ID if none specified
+        if (id==undefined){
+            this.id = getNextTaskId()
+        } else {
+            this.id=id
+        }
+    }
+
+
+    // Complete the current task, setting next task to next incomplete task
+    completeTask() {
+        this.completed = true
+        console.info(`Task successfully completed: ${JSON.stringify(this.description)}`)
+        setCurrentTask()
+        updateUiTaskList()
+    }
+
+    // Add a single task to the UI and attach event listeners for user edits
+    addUiElement() {
+        const template = `
+        <div id="objective-task-label-${this.id}" class="flex1 checkbox_label">
+            <input id="objective-task-complete-${this.id}" type="checkbox">
+            <span class="text_pole" style="display: block" id="objective-task-description-${this.id}" contenteditable>${this.description}</span>
+            <div id="objective-task-delete-${this.id}" class="objective-task-button fa-solid fa-xmark fa-2x" title="Delete Task"></div>
+            <div id="objective-task-add-${this.id}" class="objective-task-button fa-solid fa-plus fa-2x" title="Add Task"></div>
+        </div><br>
+        `;
+
+        // Add the filled out template
+        $('#objective-tasks').append(template);
+
+        this.completedCheckbox = $(`#objective-task-complete-${this.id}`);
+        this.descriptionSpan = $(`#objective-task-description-${this.id}`);
+        this.addButton = $(`#objective-task-add-${this.id}`);
+        this.deleteButton = $(`#objective-task-delete-${this.id}`);
+
+        // Add event listeners and set properties
+        $(`#objective-task-complete-${this.id}`).prop('checked', this.completed);
+        $(`#objective-task-complete-${this.id}`).on('click', () => (this.onCompleteClick()));
+        $(`#objective-task-description-${this.id}`).on('keyup', () => (this.onDescriptionUpdate()));
+        $(`#objective-task-description-${this.id}`).on('focusout', () => (this.onDescriptionFocusout()));
+        $(`#objective-task-delete-${this.id}`).on('click', () => (this.onDeleteClick()));
+        $(`#objective-task-add-${this.id}`).on('click', () => (this.onAddClick()));
+    }
+
+    onCompleteClick(){
+        this.completed = this.completedCheckbox.prop('checked')
+        setCurrentTask();
+    }
+
+    onDescriptionUpdate(){
+        this.description = this.descriptionSpan.text();
+    }
+    onDescriptionFocusout(){
+        setCurrentTask();
+    }
+
+    onDeleteClick(){
+        deleteTask(this.id);
+    }
+
+    onAddClick(){
+        const {_, index} = getTaskById(this.id)
+        addTask("", index + 1);
+        setCurrentTask();
+        updateUiTaskList();
+    }
+
+    toSaveState() {
+        return {
+            "id":this.id,
+            "description":this.description,
+            "completed":this.completed,
+            "parent": this.parent,
+        }
+    }
+}
+
+//###############################//
+//#       UI AND Settings       #//
+//###############################//
+
+
+const defaultSettings = {
+    objective: "",
+    tasks: [],
+    chatDepth: 2,
+    checkFrequency: 3,
+    hideTasks: false
+}
+
+// Convenient single call. Not much at the moment.
+function resetState() {
+    loadSettings();
+}
+
+//
+function saveState() {
+    const context = getContext();
+
+    if (currentChatId == "") {
+        currentChatId = context.chatId
+    }
+
+    // Convert globalTasks for saving
+    const tasks = globalTasks.map(task => {return task.toSaveState()})
+
+    chat_metadata['objective'] = {
+        objective: globalObjective,
+        tasks: tasks,
+        checkFrequency: $('#objective-check-frequency').val(),
+        chatDepth: $('#objective-chat-depth').val(),
+        hideTasks: $('#objective-hide-tasks').prop('checked'),
+    }
+
+    saveMetadataDebounced();
+}
+
+// Dump core state
+function debugObjectiveExtension() {
+    console.log(JSON.stringify({
+        "currentTask": currentTask.toSaveState(),
+        "currentChatId": currentChatId,
+        "checkCounter": checkCounter,
+        "globalObjective": globalObjective,
+        "globalTasks": globalTasks.map(v => {return v.toSaveState()}),
+        "extension_settings": chat_metadata['objective'],
+    }, null, 2))
+}
+
+window.debugObjectiveExtension = debugObjectiveExtension
+
+
+// Populate UI task list
+function updateUiTaskList() {
+    $('#objective-tasks').empty()
+    // Show tasks if there are any
+    if (globalTasks.length > 0){
+        for (const task of globalTasks) {
+            task.addUiElement()
+        }
+    } else {
+        // Show button to add tasks if there are none
+        $('#objective-tasks').append(`
+        <input id="objective-task-add-first" type="button" class="menu_button" value="Add Task">
+        `)
+        $("#objective-task-add-first").on('click', () => {
+            addTask("")
+            setCurrentTask()
+            updateUiTaskList()
+        })
+    }
+}
+
+
+// Trigger creation of new tasks with given objective.
+async function onGenerateObjectiveClick() {
+    globalObjective = $('#objective-text').val()
+    await generateTasks()
+    saveState()
+}
+
+// Update extension prompts
+function onChatDepthInput() {
+    saveState()
+    setCurrentTask() // Ensure extension prompt is updated
+}
+
+// Update how often we check for task completion
+function onCheckFrequencyInput() {
+    checkCounter = $("#objective-check-frequency").val()
+    $('#objective-counter').text(checkCounter)
+    saveState()
+}
+
+function onHideTasksInput() {
+    $('#objective-tasks').prop('hidden', $('#objective-hide-tasks').prop('checked'))
+    saveState()
+}
+
+function loadSettings() {
+    // Load/Init settings for chatId
+    currentChatId = getContext().chatId
+
+    // Bail on home screen
+    if (currentChatId == undefined) {
+        return
+    }
+
+    // Migrate existing settings
+    if (currentChatId in extension_settings.objective) {
+        chat_metadata['objective'] = extension_settings.objective[currentChatId];
+        delete extension_settings.objective[currentChatId];
+    }
+
+    if (!('objective' in chat_metadata)) {
+        Object.assign(chat_metadata, { objective: defaultSettings });
+    }
+
+    // Update globals
+    globalObjective = chat_metadata['objective'].objective
+    globalTasks = chat_metadata['objective'].tasks.map(task => {
+        return new ObjectiveTask({
+            id: task.id,
+            description: task.description,
+            completed: task.completed,
+            parent: task.parent,
+        })
+    });
+    checkCounter = chat_metadata['objective'].checkFrequency
+
+    // Update UI elements
+    $('#objective-counter').text(checkCounter)
+    $("#objective-text").text(globalObjective)
+    updateUiTaskList()
+    $('#objective-chat-depth').val(chat_metadata['objective'].chatDepth)
+    $('#objective-check-frequency').val(chat_metadata['objective'].checkFrequency)
+    $('#objective-hide-tasks').prop('checked', chat_metadata['objective'].hideTasks)
+    onHideTasksInput()
+    setCurrentTask()
+}
+
+function addManualTaskCheckUi() {
+    $('#extensionsMenu').prepend(`
+        <div id="objective-task-manual-check-menu-item" class="list-group-item flex-container flexGap5">
+            <div id="objective-task-manual-check" class="extensionsMenuExtensionButton fa-regular fa-square-check"/></div>
+            Manual Task Check
+        </div>`)
+    $('#objective-task-manual-check-menu-item').attr('title', 'Trigger AI check of completed tasks').on('click', checkTaskCompleted)
+}
+
+jQuery(() => {
+    const settingsHtml = `
+    <div class="objective-settings">
+        <div class="inline-drawer">
+            <div class="inline-drawer-toggle inline-drawer-header">
+            <b>Objective</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <label for="objective-text"><small>Enter an objective and generate tasks. The AI will attempt to complete tasks autonomously</small></label>
+            <textarea id="objective-text" type="text" class="text_pole textarea_compact" rows="4"></textarea>
+            <div class="objective_block flex-container">
+                <input id="objective-generate" class="menu_button" type="submit" value="Auto-Generate Tasks" />
+                <label class="checkbox_label"><input id="objective-hide-tasks" type="checkbox"> Hide Tasks</label>
+            </div>
+
+            <div id="objective-tasks"> </div>
+            <div class="objective_block margin-bot-10px">
+                <div class="objective_block objective_block_control flex1 flexFlowColumn">
+                    <label for="objective-chat-depth">Position in Chat</label>
+                    <input id="objective-chat-depth" class="text_pole widthUnset" type="number" min="0" max="99" />
+                </div>
+                <br>
+                <div class="objective_block objective_block_control flex1">
+
+                    <label for="objective-check-frequency">Task Check Frequency</label>
+                    <input id="objective-check-frequency" class="text_pole widthUnset" type="number" min="0" max="99" />
+                    <small>(0 = disabled)</small>
+                </div>
+            </div>
+            <span> Messages until next AI task completion check <span id="objective-counter">0</span></span>
+            <hr class="sysHR">
+        </div>
+    </div>`;
+
+    addManualTaskCheckUi()
+    $('#extensions_settings').append(settingsHtml);
+    $('#objective-generate').on('click', onGenerateObjectiveClick)
+    $('#objective-chat-depth').on('input', onChatDepthInput)
+    $("#objective-check-frequency").on('input', onCheckFrequencyInput)
+    $('#objective-hide-tasks').on('click', onHideTasksInput)
+    loadSettings()
+
+    eventSource.on(event_types.CHAT_CHANGED, () => {
+        resetState()
+    });
+
+    eventSource.on(event_types.MESSAGE_RECEIVED, () => {
+        if (currentChatId == undefined) {
+            return
+        }
+        if ($("#objective-check-frequency").val() > 0) {
+            // Check only at specified interval
+            if (checkCounter <= 0) {
+                checkTaskCompleted();
+            }
+            checkCounter -= 1
+        }
+        setCurrentTask();
+        $('#objective-counter').text(checkCounter)
+    });
+
+    registerSlashCommand('taskcheck', checkTaskCompleted, [], ' – checks if the current task is completed', true, true);
+});

public/scripts/extensions/objective/manifest.json

@@ -0,0 +1,11 @@
+{
+    "display_name": "Objective",
+    "loading_order": 5,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Ouoertheo",
+    "version": "0.0.1",
+    "homePage": ""
+}

public/scripts/extensions/objective/style.css

@@ -0,0 +1,45 @@
+#objective-counter {
+    font-weight: 600;
+    color: orange;
+}
+
+.objective_block {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+    flex-wrap: wrap;
+}
+
+.objective_block_control {
+    align-items: baseline;
+}
+
+.objective_block_control small,
+.objective_block_control label {
+    width: max-content;
+}
+
+.objective-task-button {
+    margin: 0;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    opacity: 0.7;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.objective-task-button:hover {
+    opacity: 1;
+}
+
+[id^=objective-task-delete-] {
+    color: #da3f3f;
+}
+
+#objective-tasks span {
+    margin: unset;
+    margin-bottom: 5px !important;
+}

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

@@ -0,0 +1,219 @@
+import { saveSettingsDebounced } from "../../../script.js";
+import { getContext, extension_settings } from "../../extensions.js";
+import { initScrollHeight, resetScrollHeight } from "../../utils.js";
+
+export { MODULE_NAME };
+
+const MODULE_NAME = 'quick-reply';
+const UPDATE_INTERVAL = 1000;
+
+const defaultSettings = {
+    quickReplyEnabled: false,
+    numberOfSlots: 5,
+    quickReplySlots: [],
+}
+
+async function loadSettings() {
+    if (Object.keys(extension_settings.quickReply).length === 0) {
+        Object.assign(extension_settings.quickReply, defaultSettings);
+    }
+
+    // If the user has an old version of the extension, update it
+    if (!Array.isArray(extension_settings.quickReply.quickReplySlots)) {
+        extension_settings.quickReply.quickReplySlots = [];
+        extension_settings.quickReply.numberOfSlots = defaultSettings.numberOfSlots;
+
+        for (let i = 1; i <= extension_settings.quickReply.numberOfSlots; i++) {
+            extension_settings.quickReply.quickReplySlots.push({
+                mes: extension_settings.quickReply[`quickReply${i}Mes`],
+                label: extension_settings.quickReply[`quickReply${i}Label`],
+                enabled: true,
+            });
+
+            delete extension_settings.quickReply[`quickReply${i}Mes`];
+            delete extension_settings.quickReply[`quickReply${i}Label`];
+        }
+    }
+
+    initializeEmptySlots(extension_settings.quickReply.numberOfSlots);
+    generateQuickReplyElements();
+
+    for (let i = 1; i <= extension_settings.quickReply.numberOfSlots; i++) {
+        $(`#quickReply${i}Mes`).val(extension_settings.quickReply.quickReplySlots[i - 1]?.mes).trigger('input');
+        $(`#quickReply${i}Label`).val(extension_settings.quickReply.quickReplySlots[i - 1]?.label).trigger('input');
+    }
+
+    $('#quickReplyEnabled').prop('checked', extension_settings.quickReply.quickReplyEnabled);
+    $('#quickReplyNumberOfSlots').val(extension_settings.quickReply.numberOfSlots);
+}
+
+function onQuickReplyInput(id) {
+    extension_settings.quickReply.quickReplySlots[id - 1].mes = $(`#quickReply${id}Mes`).val();
+    $(`#quickReply${id}`).attr('title', ($(`#quickReply${id}Mes`).val()));
+    resetScrollHeight($(`#quickReply${id}Mes`));
+    saveSettingsDebounced();
+}
+
+function onQuickReplyLabelInput(id) {
+    extension_settings.quickReply.quickReplySlots[id - 1].label = $(`#quickReply${id}Label`).val();
+    $(`#quickReply${id}`).text($(`#quickReply${id}Label`).val());
+    saveSettingsDebounced();
+}
+
+async function onQuickReplyEnabledInput() {
+    let isEnabled = $(this).prop('checked')
+    extension_settings.quickReply.quickReplyEnabled = !!isEnabled;
+    if (isEnabled === true) {
+        $("#quickReplyBar").show();
+    } else { $("#quickReplyBar").hide(); }
+    saveSettingsDebounced();
+}
+
+async function sendQuickReply(index) {
+    const prompt = extension_settings.quickReply.quickReplySlots[index]?.mes || '';
+
+    if (!prompt) {
+        console.warn(`Quick reply slot ${index} is empty! Aborting.`);
+        return;
+    }
+
+    $("#send_textarea").val(prompt);
+    $("#send_but").trigger('click');
+}
+
+function addQuickReplyBar() {
+    $('#quickReplyBar').remove();
+    let quickReplyButtonHtml = '';
+
+    for (let i = 0; i < extension_settings.quickReply.numberOfSlots; i++) {
+        let quickReplyMes = extension_settings.quickReply.quickReplySlots[i]?.mes || '';
+        let quickReplyLabel = extension_settings.quickReply.quickReplySlots[i]?.label || '';
+        quickReplyButtonHtml += `<div title="${quickReplyMes}" class="quickReplyButton" data-index="${i}" id="quickReply${i + 1}">${quickReplyLabel}</div>`;
+    }
+
+    const quickReplyBarFullHtml = `
+        <div id="quickReplyBar" class="flex-container flexGap5">
+            <div id="quickReplies">
+                ${quickReplyButtonHtml}
+            </div>
+        </div>
+    `;
+
+    $('#send_form').prepend(quickReplyBarFullHtml);
+
+    $('.quickReplyButton').on('click', function () {
+        let index = $(this).data('index');
+        sendQuickReply(index);
+    });
+}
+
+async function moduleWorker() {
+    if (extension_settings.quickReply.quickReplyEnabled === true) {
+        $('#quickReplyBar').toggle(getContext().onlineStatus !== 'no_connection');
+    }
+}
+
+async function onQuickReplyNumberOfSlotsInput() {
+    const $input = $('#quickReplyNumberOfSlots');
+    let numberOfSlots = Number($input.val());
+
+    if (isNaN(numberOfSlots)) {
+        numberOfSlots = defaultSettings.numberOfSlots;
+    }
+
+    // Clamp min and max values (from input attributes)
+    if (numberOfSlots < Number($input.attr('min'))) {
+        numberOfSlots = Number($input.attr('min'));
+    } else if (numberOfSlots > Number($input.attr('max'))) {
+        numberOfSlots = Number($input.attr('max'));
+    }
+
+    extension_settings.quickReply.numberOfSlots = numberOfSlots;
+    extension_settings.quickReply.quickReplySlots.length = numberOfSlots;
+
+    // Initialize new slots
+    initializeEmptySlots(numberOfSlots);
+
+    await loadSettings();
+    addQuickReplyBar();
+    moduleWorker();
+    saveSettingsDebounced();
+}
+
+function initializeEmptySlots(numberOfSlots) {
+    for (let i = 0; i < numberOfSlots; i++) {
+        if (!extension_settings.quickReply.quickReplySlots[i]) {
+            extension_settings.quickReply.quickReplySlots[i] = {
+                mes: '',
+                label: '',
+                enabled: true,
+            };
+        }
+    }
+}
+
+function generateQuickReplyElements() {
+    let quickReplyHtml = '';
+
+    for (let i = 1; i <= extension_settings.quickReply.numberOfSlots; i++) {
+        quickReplyHtml += `
+        <div class="flex-container alignitemsflexstart">
+            <input class="text_pole wide30p" id="quickReply${i}Label" placeholder="(Add a button label)">
+            <textarea id="quickReply${i}Mes" placeholder="(custom message here)" class="text_pole widthUnset flex1" rows="2"></textarea>
+        </div>
+        `;
+    }
+
+    $('#quickReplyContainer').empty().append(quickReplyHtml);
+
+    for (let i = 1; i <= extension_settings.quickReply.numberOfSlots; i++) {
+        $(`#quickReply${i}Mes`).on('input', function () { onQuickReplyInput(i); });
+        $(`#quickReply${i}Label`).on('input', function () { onQuickReplyLabelInput(i); });
+    }
+
+    $('.quickReplySettings .inline-drawer-toggle').off('click').on('click', function () {
+        for (let i = 1; i <= extension_settings.quickReply.numberOfSlots; i++) {
+            initScrollHeight($(`#quickReply${i}Mes`));
+        }
+    });
+}
+
+jQuery(async () => {
+
+    moduleWorker();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+    const settingsHtml = `
+    <div class="quickReplySettings">
+        <div class="inline-drawer">
+            <div class="inline-drawer-toggle inline-drawer-header">
+            <b>Quick Reply</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <label class="checkbox_label marginBot10">
+                <input id="quickReplyEnabled" type="checkbox" />
+                    Enable Quick Replies
+            </label>
+            <label for="quickReplyNumberOfSlots">Number of slots:</label>
+            <div class="flex-container flexGap5 flexnowrap">
+                <input id="quickReplyNumberOfSlots" class="text_pole" type="number" min="1" max="100" value="" />
+                <div class="menu_button menu_button_icon" id="quickReplyNumberOfSlotsApply">
+                    <div class="fa-solid fa-check"></div>
+                    <span>Apply</span>
+                </div>
+            </div>
+            <small><i>Customize your Quick Replies:</i></small><br>
+            <div id="quickReplyContainer">
+            </div>
+        </div>
+    </div>`;
+
+    $('#extensions_settings2').append(settingsHtml);
+
+    $('#quickReplyEnabled').on('input', onQuickReplyEnabledInput);
+    $('#quickReplyNumberOfSlotsApply').on('click', onQuickReplyNumberOfSlotsInput);
+
+    await loadSettings();
+    addQuickReplyBar();
+});
+

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": "1.0.0",
+    "homePage": "https://github.com/SillyTavern/SillyTavern"
+}

public/scripts/extensions/quick-reply/style.css

@@ -0,0 +1,46 @@
+#quickReplyBar {
+    outline: none;
+    padding: 5px 0;
+    border-bottom: 1px solid var(--black30a);
+    margin: 0;
+    transition: 0.3s;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    display: none;
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+#quickReplies {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 5px;
+    width: 100%;
+}
+
+#quickReplies div {
+    color: var(--SmartThemeBodyColor);
+    background-color: var(--black50a);
+    border: 1px solid var(--white30a);
+    border-radius: 10px;
+    padding: 3px 5px;
+    width: min-content;
+    cursor: pointer;
+    transition: 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#quickReplies div:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+    cursor: pointer;
+}

public/scripts/extensions/randomize/index.js

@@ -0,0 +1,152 @@
+import { saveSettingsDebounced } from "../../../script.js";
+import { extension_settings } from "../../extensions.js";
+
+function toggleRandomizedSetting(buttonRef, forId) {
+    if (extension_settings.randomizer.controls.indexOf(forId) === -1) {
+        extension_settings.randomizer.controls.push(forId);
+    } else {
+        extension_settings.randomizer.controls = extension_settings.randomizer.controls.filter(x => x !== forId);
+    }
+
+    buttonRef.toggleClass('active');
+    console.debug('Randomizer controls:', extension_settings.randomizer.controls);
+    saveSettingsDebounced();
+}
+
+function addRandomizeButton() {
+    const counterRef = $(this);
+    const labelRef = $(this).find('div[data-for]');
+    const isDisabled = counterRef.data('randomization-disabled');
+
+    if (labelRef.length === 0 || isDisabled == true) {
+        return;
+    }
+
+    const forId = labelRef.data('for');
+    const buttonRef = $('<div class="randomize_button menu_button fa-solid fa-shuffle"></div>');
+    buttonRef.toggleClass('active', extension_settings.randomizer.controls.indexOf(forId) !== -1);
+    buttonRef.hide();
+    buttonRef.on('click', () => toggleRandomizedSetting(buttonRef, forId));
+    counterRef.append(buttonRef);
+}
+
+function onRandomizerEnabled() {
+    extension_settings.randomizer.enabled = $(this).prop('checked');
+    $('.randomize_button').toggle(extension_settings.randomizer.enabled);
+    console.debug('Randomizer enabled:', extension_settings.randomizer.enabled);
+}
+
+window['randomizerInterceptor'] = (function () {
+    if (extension_settings.randomizer.enabled === false) {
+        console.debug('Randomizer skipped: disabled.');
+        return;
+    }
+
+    if (extension_settings.randomizer.fluctuation === 0 || extension_settings.randomizer.controls.length === 0) {
+        console.debug('Randomizer skipped: nothing to do.');
+        return;
+    }
+
+    for (const control of extension_settings.randomizer.controls) {
+        const controlRef = $('#' + control);
+
+        if (controlRef.length === 0) {
+            console.debug(`Randomizer skipped: control ${control} not found.`);
+            continue;
+        }
+
+        if (!controlRef.is(':visible')) {
+            console.debug(`Randomizer skipped: control ${control} is not visible.`);
+            continue;
+        }
+
+        let previousValue = parseFloat(controlRef.data('previous-value'));
+        let originalValue = parseFloat(controlRef.data('original-value'));
+        let currentValue = parseFloat(controlRef.val());
+
+        let value;
+
+        // Initialize originalValue and previousValue if they are NaN
+        if (isNaN(originalValue)) {
+            originalValue = currentValue;
+            controlRef.data('original-value', originalValue);
+        }
+        if (isNaN(previousValue)) {
+            previousValue = currentValue;
+            controlRef.data('previous-value', previousValue);
+        }
+
+        // If the current value hasn't changed compared to the previous value, use the original value as a base for the calculation
+        if (currentValue === previousValue) {
+            console.debug(`Randomizer for ${control} reusing original value: ${originalValue}`);
+            value = originalValue;
+        } else {
+            console.debug(`Randomizer for ${control} using current value: ${currentValue}`);
+            value = currentValue;
+            controlRef.data('previous-value', currentValue); // Update the previous value when using the current value
+            controlRef.data('original-value', currentValue); // Update the original value when using the current value
+        }
+
+        if (isNaN(value)) {
+            console.debug('Randomizer skipped: NaN.');
+            continue;
+        }
+
+        const fluctuation = extension_settings.randomizer.fluctuation;
+        const min = parseFloat(controlRef.attr('min'));
+        const max = parseFloat(controlRef.attr('max'));
+        const delta = (Math.random() * fluctuation * 2 - fluctuation) * value;
+        const newValue = Math.min(Math.max(value + delta, min), max);
+        console.debug(`Randomizer for ${control}: ${value} -> ${newValue} (delta: ${delta}, min: ${min}, max: ${max})`);
+        controlRef.val(newValue).trigger('input');
+        controlRef.data('previous-value', parseFloat(controlRef.val()));
+    }
+});
+
+jQuery(() => {
+    const html = `
+    <div class="randomizer_settings">
+        <div class="inline-drawer">
+            <div class="inline-drawer-toggle inline-drawer-header">
+                <b>Parameter Randomizer</b>
+                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+            </div>
+            <div class="inline-drawer-content">
+                <label for="randomizer_enabled" class="checkbox_label">
+                    <input type="checkbox" id="randomizer_enabled" name="randomizer_enabled" >
+                    Enabled
+                </label>
+                <div  class="range-block">
+                    <div class="range-block-title">
+                        Fluctuation (0-1)
+                    </div>
+                    <div class="range-block-range-and-counter">
+                        <div class="range-block-range-and-counter">
+                            <div class="range-block-range">
+                                <input type="range" id="randomizer_fluctuation" min="0" max="1" step="0.1">
+                            </div>
+                            <div class="range-block-counter">
+                                <div contenteditable="true" data-for="randomizer_fluctuation" id="randomizer_fluctuation_counter">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>`;
+
+    $('#extensions_settings').append(html);
+    $('#ai_response_configuration .range-block-counter').each(addRandomizeButton);
+    $('#randomizer_enabled').on('input', onRandomizerEnabled);
+    $('#randomizer_enabled').prop('checked', extension_settings.randomizer.enabled).trigger('input');
+    $('#randomizer_fluctuation').val(extension_settings.randomizer.fluctuation).trigger('input');
+    $('#randomizer_fluctuation_counter').text(extension_settings.randomizer.fluctuation);
+    $('#randomizer_fluctuation').on('input', function () {
+        const value = parseFloat($(this).val());
+        $('#randomizer_fluctuation_counter').text(value);
+        extension_settings.randomizer.fluctuation = value;
+        console.debug('Randomizer fluctuation:', extension_settings.randomizer.fluctuation);
+        saveSettingsDebounced();
+    });
+});

public/scripts/extensions/randomize/manifest.json

@@ -0,0 +1,12 @@
+{
+    "display_name": "Parameter Randomizer",
+    "loading_order": 15,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "generate_interceptor": "randomizerInterceptor",
+    "homePage": "https://github.com/SillyTavern/SillyTavern"
+}

public/scripts/extensions/regex/dropdown.html

@@ -0,0 +1,17 @@
+<div class="regex_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b>Regex</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <div id="open_regex_editor" class="menu_button">
+                <i class="fa-solid fa-pen-to-square"></i>
+                <span>Open Editor</span>
+            </div>
+            <hr />
+            <label>Saved Scripts</label>
+            <div id="saved_regex_scripts" class="flex-container regex-script-container flexFlowColumn"></div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/regex/editor.html

@@ -0,0 +1,107 @@
+<div id="regex_editor_template">
+    <div class="regex_editor">
+        <h3><strong data-i18n="Regex Editor">Regex Editor</strong>
+            <a href="https://regexr.com/" class="notes-link" target="_blank">
+                <span class="note-link-span">?</span>
+            </a>
+        </h3>
+
+        <small class="flex-container extensions_info">
+            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 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"
+                        placeholder="Use {{match}} to include the matched text from the Find Regex"
+                        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"
+                        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="wi-enter-footer-text flex-container flexFlowColumn flexNoGap alignitemsstart">
+                <small>Affects</small>
+                <div>
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="1">
+                        <span data-i18n="Before Char">User Input</span>
+                    </label>
+                </div>
+                <div>
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="2">
+                        <span data-i18n="After Char">AI Output</span>
+                    </label>
+                </div>
+                <div>
+                    <label class="checkbox flex-container">
+                        <input type="checkbox" name="replace_position" value="3">
+                        <span data-i18n="Slash Commands">Slash Commands</span>
+                    </label>
+                </div>
+            </div>
+            <div class="wi-enter-footer-text flex-container flexFlowColumn flexNoGap alignitemsstart">
+                <small>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">
+                    <input type="checkbox" name="only_format_display" />
+                    <span data-i18n="Only Format Display">Only Format Display</span>
+                </label>
+                <label class="checkbox flex-container">
+                    <input type="checkbox" name="run_on_edit" />
+                    <span data-i18n="Run On Edit">Run On Edit</span>
+                </label>
+                <label class="checkbox flex-container">
+                    <input type="checkbox" name="substitute_regex" />
+                    <span data-i18n="Substitute Regex">Substitute Regex</span>
+                </label>
+            </div>
+            <div class="flex-container flexFlowColumn alignitemsstart">
+                <small>Replacement Strategy</small>
+                <select name="replace_strategy_select" class="margin0">
+                    <option value="0">Replace</option>
+                    <option value="1">Overlay</option>
+                </select>
+            </div>
+        </div>
+    </div>
+</div>

public/scripts/extensions/regex/engine.js

@@ -0,0 +1,194 @@
+import { substituteParams } from "../../../script.js";
+import { extension_settings } from "../../extensions.js";
+export {
+    regex_placement,
+    getRegexedString,
+    runRegexScript
+}
+
+const regex_placement = {
+    // MD Display is deprecated. Do not use.
+    MD_DISPLAY: 0,
+    USER_INPUT: 1,
+    AI_OUTPUT: 2,
+    SLASH_COMMAND: 3
+}
+
+const regex_replace_strategy = {
+    REPLACE: 0,
+    OVERLAY: 1
+}
+
+// Originally from: https://github.com/IonicaBizau/regex-parser.js/blob/master/lib/index.js
+function regexFromString(input) {
+    try {
+        // Parse input
+        var m = input.match(/(\/?)(.+)\1([a-z]*)/i);
+    
+        // Invalid flags
+        if (m[3] && !/^(?!.*?(.).*?\1)[gmixXsuUAJ]+$/.test(m[3])) {
+            return RegExp(input);
+        }
+    
+        // Create the regular expression
+        return new RegExp(m[2], m[3]);
+    } catch {
+        return;
+    }
+}
+
+// Parent function to fetch a regexed version of a raw string
+function getRegexedString(rawString, placement, { characterOverride, isMarkdown } = {}) {
+    let finalString = rawString;
+    if (extension_settings.disabledExtensions.includes("regex") || !rawString || placement === undefined) {
+        return finalString;
+    }
+
+    extension_settings.regex.forEach((script) => {
+        if ((script.markdownOnly && !isMarkdown) || (!script.markdownOnly && isMarkdown)) {
+            return;
+        }
+
+        if (script.placement.includes(placement)) {
+            finalString = runRegexScript(script, finalString, { characterOverride });
+        }
+    });
+
+    return finalString;
+}
+
+// Runs the provided regex script on the given string
+function runRegexScript(regexScript, rawString, { characterOverride } = {}) {
+    let newString = rawString;
+    if (!regexScript || !!(regexScript.disabled) || !regexScript?.findRegex || !rawString) {
+        return newString;
+    }
+
+    let match;
+    const findRegex = regexFromString(regexScript.substituteRegex ? substituteParams(regexScript.findRegex) : regexScript.findRegex);
+
+    // The user skill issued. Return with nothing.
+    if (!findRegex) {
+        return newString;
+    }
+
+    while ((match = findRegex.exec(rawString)) !== null) {
+        const fencedMatch = match[0];
+        const capturedMatch = match[1];
+
+        let trimCapturedMatch;
+        let trimFencedMatch;
+        if (capturedMatch) {
+            const tempTrimCapture = filterString(capturedMatch, regexScript.trimStrings, { characterOverride });
+            trimFencedMatch = fencedMatch.replaceAll(capturedMatch, tempTrimCapture);
+            trimCapturedMatch = tempTrimCapture;
+        } else {
+            trimFencedMatch = filterString(fencedMatch, regexScript.trimStrings, { characterOverride });
+        }
+
+        // TODO: Use substrings for replacement. But not necessary at this time.
+        // A substring is from match.index to match.index + match[0].length or fencedMatch.length
+        const subReplaceString = substituteRegexParams(
+            regexScript.replaceString,
+            trimCapturedMatch ?? trimFencedMatch,
+            { 
+                characterOverride,
+                replaceStrategy: regexScript.replaceStrategy ?? regex_replace_strategy.REPLACE
+            }
+        );
+        if (!newString) {
+            newString = rawString.replace(fencedMatch, subReplaceString);
+        } else {
+            newString = newString.replace(fencedMatch, subReplaceString);
+        }
+
+        // If the regex isn't global, break out of the loop
+        if (!findRegex.flags.includes('g')) {
+            break;
+        }
+    }
+
+    return newString;
+}
+
+// Filters anything to trim from the regex match
+function filterString(rawString, trimStrings, { characterOverride } = {}) {
+    let finalString = rawString;
+    trimStrings.forEach((trimString) => {
+        const subTrimString = substituteParams(trimString, undefined, characterOverride);
+        finalString = finalString.replaceAll(subTrimString, "");
+    });
+
+    return finalString;
+}
+
+// Substitutes regex-specific and normal parameters
+function substituteRegexParams(rawString, regexMatch, { characterOverride, replaceStrategy } = {}) {
+    let finalString = rawString;
+    finalString = substituteParams(finalString, undefined, characterOverride);
+
+    let overlaidMatch = regexMatch;
+    // TODO: Maybe move the for loops into a separate function?
+    if (replaceStrategy === regex_replace_strategy.OVERLAY) {
+        const splitReplace = finalString.split("{{match}}");
+
+        // There's a prefix
+        if (splitReplace[0]) {
+            // Fetch the prefix
+            const splicedPrefix = spliceSymbols(splitReplace[0], false);
+
+            // Sequentially remove all occurrences of prefix from start of split
+            const splitMatch = overlaidMatch.split(splicedPrefix);
+            let sliceNum = 0;
+            for (let index = 0; index < splitMatch.length; index++) {
+                if (splitMatch[index].length === 0) {
+                    sliceNum++;
+                } else {
+                    break;
+                }
+            }
+
+            overlaidMatch = splitMatch.slice(sliceNum, splitMatch.length).join(splicedPrefix);
+        }
+
+        // There's a suffix
+        if (splitReplace[1]) {
+            // Fetch the suffix
+            const splicedSuffix = spliceSymbols(splitReplace[1], true);
+
+            // Sequential removal of all suffix occurrences from end of split
+            const splitMatch = overlaidMatch.split(splicedSuffix);
+            let sliceNum = 0;
+            for (let index = splitMatch.length - 1; index >= 0; index--) {
+                if (splitMatch[index].length === 0) {
+                    sliceNum++;
+                } else {
+                    break;
+                }
+            }
+
+            overlaidMatch = splitMatch.slice(0, splitMatch.length - sliceNum).join(splicedSuffix);
+        }
+    }
+
+    // Only one match is replaced. This is by design
+    finalString = finalString.replace("{{match}}", overlaidMatch) || finalString.replace("{{match}}", regexMatch);
+
+    return finalString;
+}
+
+// Splices common sentence symbols and whitespace from the beginning and end of a string
+// Using a for loop due to sequential ordering
+function spliceSymbols(rawString, isSuffix) {
+    let offset = 0;
+
+    for (const ch of isSuffix ? rawString.split('').reverse() : rawString) {
+        if (ch.match(/[^\w.,?'!]/)) {
+            offset++;
+        } else {
+            break;
+        }
+    }
+
+    return isSuffix ? rawString.substring(0, rawString.length - offset) : rawString.substring(offset);
+}

public/scripts/extensions/regex/index.js

@@ -0,0 +1,260 @@
+import { callPopup, eventSource, event_types, getCurrentChatId, reloadCurrentChat, saveSettingsDebounced } from "../../../script.js";
+import { extension_settings } from "../../extensions.js";
+import { uuidv4, waitUntilCondition } from "../../utils.js";
+import { regex_placement } from "./engine.js";
+
+async function saveRegexScript(regexScript, existingScriptIndex) {
+    // If not editing
+    if (existingScriptIndex === -1) {
+        // Is the script name undefined?
+        if (!regexScript.scriptName) {
+            toastr.error(`Could not save regex script: The script name was undefined or empty!`);
+            return;
+        }
+
+        // Does the script name already exist?
+        if (extension_settings.regex.find((e) => e.scriptName === regexScript.scriptName)) {
+            toastr.error(`Could not save regex script: A script with name ${regexScript.scriptName} already exists.`);
+            return;
+        }
+    } else {
+        // Does the script name already exist somewhere else?
+        // (If this fails, make it a .filter().map() to index array)
+        const foundIndex = extension_settings.regex.findIndex((e) => e.scriptName === regexScript.scriptName);
+        if (foundIndex !== existingScriptIndex && foundIndex !== -1) {
+            toastr.error(`Could not save regex script: A script with name ${regexScript.scriptName} already exists.`);
+            return;
+        }
+    }
+
+    // Is a find regex present?
+    if (regexScript.findRegex.length === 0) {
+        toastr.error(`Could not save regex script: A find regex is required!`);
+        return;
+    }
+
+    // Is there someplace to place results?
+    if (regexScript.placement.length === 0) {
+        toastr.error(`Could not save regex script: One placement checkbox must be selected!`);
+        return;
+    }
+
+    if (existingScriptIndex !== -1) {
+        extension_settings.regex[existingScriptIndex] = regexScript;
+    } else {
+        extension_settings.regex.push(regexScript);
+    }
+
+    saveSettingsDebounced();
+    await loadRegexScripts();
+
+    // Reload the current chat to undo previous markdown
+    const currentChatId = getCurrentChatId();
+    if (currentChatId !== undefined && currentChatId !== null) {
+        await reloadCurrentChat();
+    }
+}
+
+async function deleteRegexScript({ existingId }) {
+    let scriptName = $(`#${existingId}`).find('.regex_script_name').text();
+
+    const existingScriptIndex = extension_settings.regex.findIndex((script) => script.scriptName === scriptName);
+    if (!existingScriptIndex || existingScriptIndex !== -1) {
+        extension_settings.regex.splice(existingScriptIndex, 1);
+
+        saveSettingsDebounced();
+        await loadRegexScripts();
+    }
+}
+
+async function loadRegexScripts() {
+    $("#saved_regex_scripts").empty();
+
+    const scriptTemplate = $(await $.get("scripts/extensions/regex/scriptTemplate.html"));
+
+    extension_settings.regex.forEach((script) => {
+        // Have to clone here
+        const scriptHtml = scriptTemplate.clone();
+        scriptHtml.attr('id', uuidv4());
+        scriptHtml.find('.regex_script_name').text(script.scriptName);
+        scriptHtml.find('.edit_existing_regex').on('click', async function() {
+            await onRegexEditorOpenClick(scriptHtml.attr("id"));
+        });
+        scriptHtml.find('.delete_regex').on('click', async function() {
+            await deleteRegexScript({ existingId: scriptHtml.attr("id") });
+        });
+
+        $("#saved_regex_scripts").append(scriptHtml);
+    });
+}
+
+async function onRegexEditorOpenClick(existingId) {
+    const editorHtml = $(await $.get("scripts/extensions/regex/editor.html"));
+
+    // If an ID exists, fill in all the values
+    let existingScriptIndex = -1;
+    if (existingId) {
+        const existingScriptName = $(`#${existingId}`).find('.regex_script_name').text();
+        existingScriptIndex = extension_settings.regex.findIndex((script) => script.scriptName === existingScriptName);
+        if (existingScriptIndex !== -1) {
+            const existingScript = extension_settings.regex[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="run_on_edit"]`)
+                .prop("checked", existingScript.runOnEdit ?? false);
+            editorHtml
+                .find(`input[name="substitute_regex"]`)
+                .prop("checked", existingScript.substituteRegex ?? false);
+            editorHtml
+                .find(`select[name="replace_strategy_select"]`)
+                .val(existingScript.replaceStrategy ?? 0);
+
+            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="0"]`)
+            .prop("checked", true);
+    }
+
+    const popupResult = await callPopup(editorHtml, "confirm", undefined, { okButton: "Save" });
+    if (popupResult) {
+        const newRegexScript = {
+            scriptName: editorHtml.find(".regex_script_name").val(),
+            findRegex: editorHtml.find(".find_regex").val(),
+            replaceString: 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) => e !== NaN) || [],
+            disabled:
+                editorHtml
+                    .find(`input[name="disabled"]`)
+                    .prop("checked"),
+            markdownOnly:
+                editorHtml
+                    .find(`input[name="only_format_display"]`)
+                    .prop("checked"),
+            runOnEdit:
+                editorHtml
+                    .find(`input[name="run_on_edit"]`)
+                    .prop("checked"),
+            substituteRegex:
+                editorHtml
+                    .find(`input[name="substitute_regex"]`)
+                    .prop("checked"),
+            replaceStrategy:
+                parseInt(editorHtml
+                    .find(`select[name="replace_strategy_select"]`)
+                    .find(`:selected`)
+                    .val()) ?? 0
+        };
+
+        saveRegexScript(newRegexScript, existingScriptIndex);
+    }
+}
+
+// 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.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
+
+            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 (performSave) {
+        saveSettingsDebounced();
+    }
+}
+
+// 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 $.get("scripts/extensions/regex/dropdown.html");
+    $("#extensions_settings2").append(settingsHtml);
+    $("#open_regex_editor").on("click", function() {
+        onRegexEditorOpenClick(false);
+    });
+
+    $('#saved_regex_scripts').sortable({
+        stop: function () {
+            let newScripts = [];
+            $('#saved_regex_scripts').children().each(function () {
+                const scriptName = $(this).find(".regex_script_name").text();
+                const existingScript = extension_settings.regex.find((e) => e.scriptName === scriptName);
+                if (existingScript) {
+                    newScripts.push(existingScript);
+                }
+            });
+
+            extension_settings.regex = newScripts;
+            saveSettingsDebounced();
+
+            console.debug("Regex scripts reordered");
+            // TODO: Maybe reload regex scripts after move
+        },
+    });
+
+    await loadRegexScripts();
+    $("#saved_regex_scripts").sortable("enable");
+});

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/SillyTavern/SillyTavern"
+}

public/scripts/extensions/regex/scriptTemplate.html

@@ -0,0 +1,12 @@
+<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">
+        <div class="edit_existing_regex menu_button">
+            <i class="fa-solid fa-pencil"></i>
+        </div>
+        <div class="delete_regex menu_button">
+            <i class="fa-solid fa-trash"></i>
+        </div>
+    </div>
+</div>

public/scripts/extensions/regex/style.css

@@ -0,0 +1,20 @@
+.regex_settings .menu_button {
+    width: fit-content;
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+}
+
+.regex-script-container {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.regex-script-label {
+    align-items: center;
+    border: 1px solid rgba(128, 128, 128, 0.5);
+    border-radius: 10px;
+    padding: 0 5px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+}

public/scripts/extensions/speech-recognition/index.js

@@ -0,0 +1,110 @@
+// Borrowed from Agnai (AGPLv3)
+// https://github.com/agnaistic/agnai/blob/dev/web/pages/Chat/components/SpeechRecognitionRecorder.tsx
+function capitalizeInterim(interimTranscript) {
+    let capitalizeIndex = -1;
+    if (interimTranscript.length > 2 && interimTranscript[0] === ' ') capitalizeIndex = 1;
+    else if (interimTranscript.length > 1) capitalizeIndex = 0;
+    if (capitalizeIndex > -1) {
+        const spacing = capitalizeIndex > 0 ? ' '.repeat(capitalizeIndex - 1) : '';
+        const capitalized = interimTranscript[capitalizeIndex].toLocaleUpperCase();
+        const rest = interimTranscript.substring(capitalizeIndex + 1);
+        interimTranscript = spacing + capitalized + rest;
+    }
+    return interimTranscript;
+}
+
+function composeValues(previous, interim) {
+    let spacing = '';
+    if (previous.endsWith('.')) spacing = ' ';
+    return previous + spacing + interim;
+}
+
+(function ($) {
+    $.fn.speechRecognitionPlugin = function (options) {
+        const settings = $.extend({
+            grammar: '' // Custom grammar
+        }, options);
+
+        const speechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        const speechRecognitionList = window.SpeechGrammarList || window.webkitSpeechGrammarList;
+
+        if (!speechRecognition) {
+            console.warn('Speech recognition is not supported in this browser.');
+            return;
+        }
+
+        const recognition = new speechRecognition();
+
+        if (settings.grammar && speechRecognitionList) {
+            speechRecognitionList.addFromString(settings.grammar, 1);
+            recognition.grammars = speechRecognitionList;
+        }
+
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        // TODO: This should be configurable.
+        recognition.lang = 'en-US'; // Set the language to English (US).
+
+        const $textarea = this;
+        const $button = $('<div class="fa-solid fa-microphone speech-toggle" title="Click to speak"></div>');
+        $('#send_but_sheld').prepend($button);
+
+        let listening = false;
+        $button.on('click', function () {
+            if (listening) {
+                recognition.stop();
+            } else {
+                recognition.start();
+            }
+            listening = !listening;
+        });
+
+        let initialText = '';
+
+        recognition.onresult = function (speechEvent) {
+            let finalTranscript = '';
+            let interimTranscript = ''
+
+            for (let i = speechEvent.resultIndex; i < speechEvent.results.length; ++i) {
+              const transcript = speechEvent.results[i][0].transcript;
+
+              if (speechEvent.results[i].isFinal) {
+                let interim = capitalizeInterim(transcript);
+                if (interim != '') {
+                  let final = finalTranscript;
+                  final = composeValues(final, interim) + '.';
+                  finalTranscript = final;
+                  recognition.abort();
+                  listening = false;
+                }
+                interimTranscript = ' ';
+              } else {
+                interimTranscript += transcript;
+              }
+            }
+
+            interimTranscript = capitalizeInterim(interimTranscript);
+
+            $textarea.val(initialText + finalTranscript + interimTranscript);
+        };
+
+        recognition.onerror = function (event) {
+            console.error('Error occurred in recognition:', event.error);
+        };
+
+        recognition.onend = function () {
+            listening = false;
+            $button.toggleClass('fa-microphone fa-microphone-slash');
+        };
+
+        recognition.onstart = function () {
+            initialText = $textarea.val();
+            $button.toggleClass('fa-microphone fa-microphone-slash');
+        };
+    };
+}(jQuery));
+
+jQuery(() => {
+    const $textarea = $('#send_textarea');
+    $textarea.speechRecognitionPlugin();
+});

public/scripts/extensions/speech-recognition/manifest.json

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

public/scripts/extensions/speech-recognition/style.css

@@ -0,0 +1,3 @@
+.speech-toggle {
+    display: flex;
+}

public/scripts/extensions/stable-diffusion/index.js

@@ -0,0 +1,850 @@
+import {
+    substituteParams,
+    saveSettingsDebounced,
+    systemUserName,
+    hideSwipeButtons,
+    showSwipeButtons,
+    callPopup,
+    getRequestHeaders,
+    event_types,
+    eventSource,
+    appendImageToMessage
+} from "../../../script.js";
+import { getApiUrl, getContext, extension_settings, doExtrasFetch, modules } from "../../extensions.js";
+import { stringFormat, initScrollHeight, resetScrollHeight, timestampToMoment } from "../../utils.js";
+export { MODULE_NAME };
+
+// Wraps a string into monospace font-face span
+const m = x => `<span class="monospace">${x}</span>`;
+// Joins an array of strings with ' / '
+const j = a => a.join(' / ');
+// Wraps a string into paragraph block
+const p = a => `<p>${a}</p>`
+
+const MODULE_NAME = 'sd';
+const UPDATE_INTERVAL = 1000;
+
+const postHeaders = {
+    'Content-Type': 'application/json',
+    'Bypass-Tunnel-Reminder': 'bypass',
+};
+
+const generationMode = {
+    CHARACTER: 0,
+    USER: 1,
+    SCENARIO: 2,
+    RAW_LAST: 3,
+    NOW: 4,
+    FACE: 5,
+    FREE: 6,
+}
+
+const triggerWords = {
+    [generationMode.CHARACTER]: ['you'],
+    [generationMode.USER]: ['me'],
+    [generationMode.SCENARIO]: ['scene'],
+    [generationMode.RAW_LAST]: ['raw_last'],
+    [generationMode.NOW]: ['last'],
+    [generationMode.FACE]: ['face'],
+}
+
+const quietPrompts = {
+    /*OLD:     [generationMode.CHARACTER]: "Pause your roleplay and provide comma-delimited list of phrases and keywords which describe {{char}}'s physical appearance and clothing. Ignore {{char}}'s personality traits, and chat history when crafting this description. End your response once the comma-delimited list is complete. Do not roleplay when writing this description, and do not attempt to continue the story.", */
+    [generationMode.CHARACTER]: "[In the next response I want you to provide only a detailed comma-delimited list of keywords and phrases which describe {{char}}. The list must include all of the following items in this order: name, species and race, gender, age, clothing, occupation, physical features and appearances. Do not include descriptions of non-visual qualities such as personality, movements, scents, mental traits, or anything which could not be seen in a still photograph. Do not write in full sentences. Prefix your description with the phrase 'full body portrait,']",
+    //face-specific prompt
+    [generationMode.FACE]: "[In the next response I want you to provide only a detailed comma-delimited list of keywords and phrases which describe {{char}}. The list must include all of the following items in this order: name, species and race, gender, age, facial features and expressions, occupation, hair and hair accessories (if any), what they are wearing on their upper body (if anything). Do not describe anything below their neck. Do not include descriptions of non-visual qualities such as personality, movements, scents, mental traits, or anything which could not be seen in a still photograph. Do not write in full sentences. Prefix your description with the phrase 'close up facial portrait,']",
+    //prompt for only the last message
+    [generationMode.USER]: "[Pause your roleplay and provide a detailed description of {{user}}'s physical appearance from the perspective of {{char}} in the form of a comma-delimited list of keywords and phrases. The list must include all of the following items in this order: name, species and race, gender, age, clothing, occupation, physical features and appearances. Do not include descriptions of non-visual qualities such as personality, movements, scents, mental traits, or anything which could not be seen in a still photograph. Do not write in full sentences. Prefix your description with the phrase 'full body portrait,'. Ignore the rest of the story when crafting this description. Do not roleplay as {{char}} when writing this description, and do not attempt to continue the story.]",
+    [generationMode.SCENARIO]: "[Pause your roleplay and provide a detailed description for all of the following: a brief recap of recent events in the story, {{char}}'s appearance, and {{char}}'s surroundings. Do not roleplay while writing this description.]",
+
+    [generationMode.NOW]: `[Pause your roleplay. Your next response must be formatted as a single comma-delimited list of concise keywords.  The list will describe of the visual details included in the last chat message.
+
+    Only mention characters by using pronouns ('he','his','she','her','it','its') or neutral nouns ('male', 'the man', 'female', 'the woman').
+
+    Ignore non-visible things such as feelings, personality traits, thoughts, and spoken dialog.
+
+    Add keywords in this precise order:
+    a keyword to describe the location of the scene,
+    a keyword to mention how many characters of each gender or type are present in the scene (minimum of two characters:
+    {{user}} and {{char}}, example: '2 men ' or '1 man 1 woman ', '1 man 3 robots'),
+
+    keywords to describe the relative physical positioning of the characters to each other (if a commonly known term for the positioning is known use it instead of describing the positioning in detail) + 'POV',
+
+    a single keyword or phrase to describe the primary act taking place in the last chat message,
+
+    keywords to describe {{char}}'s physical appearance and facial expression,
+    keywords to describe {{char}}'s actions,
+    keywords to describe {{user}}'s physical appearance and actions.
+
+    If character actions involve direct physical interaction with another character, mention specifically which body parts interacting and how.
+
+    A correctly formatted example response would be:
+    '(location),(character list by gender),(primary action), (relative character position) POV, (character 1's description and actions), (character 2's description and actions)']`,
+
+    [generationMode.RAW_LAST]: "[Pause your roleplay and provide ONLY the last chat message string back to me verbatim. Do not write anything after the string. Do not roleplay at all in your response. Do not continue the roleplay story.]",
+}
+
+const helpString = [
+    `${m('(argument)')} – requests SD to make an image. Supported arguments:`,
+    '<ul>',
+    `<li>${m(j(triggerWords[generationMode.CHARACTER]))} – AI character full body selfie</li>`,
+    `<li>${m(j(triggerWords[generationMode.FACE]))} – AI character face-only selfie</li>`,
+    `<li>${m(j(triggerWords[generationMode.USER]))} – user character full body selfie</li>`,
+    `<li>${m(j(triggerWords[generationMode.SCENARIO]))} – visual recap of the whole chat scenario</li>`,
+    `<li>${m(j(triggerWords[generationMode.NOW]))} – visual recap of the last chat message</li>`,
+    `<li>${m(j(triggerWords[generationMode.RAW_LAST]))} – visual recap of the last chat message with no summary</li>`,
+    '</ul>',
+    `Anything else would trigger a "free mode" to make SD generate whatever you prompted.<Br>
+    example: '/sd apple tree' would generate a picture of an apple tree.`,
+].join('<br>');
+
+const defaultSettings = {
+    // CFG Scale
+    scale_min: 1,
+    scale_max: 30,
+    scale_step: 0.5,
+    scale: 7,
+
+    // Sampler steps
+    steps_min: 1,
+    steps_max: 150,
+    steps_step: 1,
+    steps: 20,
+
+    // Image dimensions (Width & Height)
+    dimension_min: 64,
+    dimension_max: 2048,
+    dimension_step: 64,
+    width: 512,
+    height: 512,
+
+    prompt_prefix: 'best quality, absurdres, masterpiece,',
+    negative_prompt: 'lowres, bad anatomy, bad hands, text, error, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry',
+    sampler: 'DDIM',
+    model: '',
+
+    // Automatic1111/Horde exclusives
+    restore_faces: false,
+    enable_hr: false,
+
+    // Horde settings
+    horde: false,
+    horde_nsfw: false,
+    horde_karras: true,
+
+    // Refine mode
+    refine_mode: false,
+}
+
+async function loadSettings() {
+    if (Object.keys(extension_settings.sd).length === 0) {
+        Object.assign(extension_settings.sd, defaultSettings);
+    }
+
+    $('#sd_scale').val(extension_settings.sd.scale).trigger('input');
+    $('#sd_steps').val(extension_settings.sd.steps).trigger('input');
+    $('#sd_prompt_prefix').val(extension_settings.sd.prompt_prefix).trigger('input');
+    $('#sd_negative_prompt').val(extension_settings.sd.negative_prompt).trigger('input');
+    $('#sd_width').val(extension_settings.sd.width).trigger('input');
+    $('#sd_height').val(extension_settings.sd.height).trigger('input');
+    $('#sd_horde').prop('checked', extension_settings.sd.horde);
+    $('#sd_horde_nsfw').prop('checked', extension_settings.sd.horde_nsfw);
+    $('#sd_horde_karras').prop('checked', extension_settings.sd.horde_karras);
+    $('#sd_restore_faces').prop('checked', extension_settings.sd.restore_faces);
+    $('#sd_enable_hr').prop('checked', extension_settings.sd.enable_hr);
+    $('#sd_refine_mode').prop('checked', extension_settings.sd.refine_mode);
+
+    await Promise.all([loadSamplers(), loadModels()]);
+}
+
+function onRefineModeInput() {
+    extension_settings.sd.refine_mode = !!$('#sd_refine_mode').prop('checked');
+    saveSettingsDebounced();
+}
+
+function onScaleInput() {
+    extension_settings.sd.scale = Number($('#sd_scale').val());
+    $('#sd_scale_value').text(extension_settings.sd.scale.toFixed(1));
+    saveSettingsDebounced();
+}
+
+function onStepsInput() {
+    extension_settings.sd.steps = Number($('#sd_steps').val());
+    $('#sd_steps_value').text(extension_settings.sd.steps);
+    saveSettingsDebounced();
+}
+
+function onPromptPrefixInput() {
+    extension_settings.sd.prompt_prefix = $('#sd_prompt_prefix').val();
+    resetScrollHeight($(this));
+    saveSettingsDebounced();
+}
+
+function onNegativePromptInput() {
+    extension_settings.sd.negative_prompt = $('#sd_negative_prompt').val();
+    resetScrollHeight($(this));
+    saveSettingsDebounced();
+}
+
+function onSamplerChange() {
+    extension_settings.sd.sampler = $('#sd_sampler').find(':selected').val();
+    saveSettingsDebounced();
+}
+
+function onWidthInput() {
+    extension_settings.sd.width = Number($('#sd_width').val());
+    $('#sd_width_value').text(extension_settings.sd.width);
+    saveSettingsDebounced();
+}
+
+function onHeightInput() {
+    extension_settings.sd.height = Number($('#sd_height').val());
+    $('#sd_height_value').text(extension_settings.sd.height);
+    saveSettingsDebounced();
+}
+
+async function onHordeInput() {
+    extension_settings.sd.model = null;
+    extension_settings.sd.sampler = null;
+    extension_settings.sd.horde = !!$(this).prop('checked');
+    saveSettingsDebounced();
+    await Promise.all([loadModels(), loadSamplers()]);
+}
+
+async function onHordeNsfwInput() {
+    extension_settings.sd.horde_nsfw = !!$(this).prop('checked');
+    saveSettingsDebounced();
+}
+
+async function onHordeKarrasInput() {
+    extension_settings.sd.horde_karras = !!$(this).prop('checked');
+    saveSettingsDebounced();
+}
+
+function onRestoreFacesInput() {
+    extension_settings.sd.restore_faces = !!$(this).prop('checked');
+    saveSettingsDebounced();
+}
+
+function onHighResFixInput() {
+    extension_settings.sd.enable_hr = !!$(this).prop('checked');
+    saveSettingsDebounced();
+}
+
+async function onModelChange() {
+    extension_settings.sd.model = $('#sd_model').find(':selected').val();
+    saveSettingsDebounced();
+
+    if (!extension_settings.sd.horde) {
+        await updateExtrasRemoteModel();
+    }
+}
+
+async function updateExtrasRemoteModel() {
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/image/model';
+    const getCurrentModelResult = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: postHeaders,
+        body: JSON.stringify({ model: extension_settings.sd.model }),
+    });
+
+    if (getCurrentModelResult.ok) {
+        console.log('Model successfully updated on SD remote.');
+    }
+}
+
+async function loadSamplers() {
+    $('#sd_sampler').empty();
+    let samplers = [];
+
+    if (extension_settings.sd.horde) {
+        samplers = await loadHordeSamplers();
+    } else {
+        samplers = await loadExtrasSamplers();
+    }
+
+    for (const sampler of samplers) {
+        const option = document.createElement('option');
+        option.innerText = sampler;
+        option.value = sampler;
+        option.selected = sampler === extension_settings.sd.sampler;
+        $('#sd_sampler').append(option);
+    }
+}
+
+async function loadHordeSamplers() {
+    const result = await fetch('/horde_samplers', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+    });
+
+    if (result.ok) {
+        const data = await result.json();
+        return data;
+    }
+
+    return [];
+}
+
+async function loadExtrasSamplers() {
+    if (!modules.includes('sd')) {
+        return [];
+    }
+
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/image/samplers';
+    const result = await doExtrasFetch(url);
+
+    if (result.ok) {
+        const data = await result.json();
+        return data.samplers;
+    }
+
+    return [];
+}
+
+async function loadModels() {
+    $('#sd_model').empty();
+    let models = [];
+
+    if (extension_settings.sd.horde) {
+        models = await loadHordeModels();
+    } else {
+        models = await loadExtrasModels();
+    }
+
+    for (const model of models) {
+        const option = document.createElement('option');
+        option.innerText = model.text;
+        option.value = model.value;
+        option.selected = model.value === extension_settings.sd.model;
+        $('#sd_model').append(option);
+    }
+}
+
+async function loadHordeModels() {
+    const result = await fetch('/horde_models', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+    });
+
+
+    if (result.ok) {
+        const data = await result.json();
+        data.sort((a, b) => b.count - a.count);
+        const models = data.map(x => ({ value: x.name, text: `${x.name} (ETA: ${x.eta}s, Queue: ${x.queued}, Workers: ${x.count})` }));
+        return models;
+    }
+
+    return [];
+}
+
+async function loadExtrasModels() {
+    if (!modules.includes('sd')) {
+        return [];
+    }
+
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/image/model';
+    const getCurrentModelResult = await doExtrasFetch(url);
+
+    if (getCurrentModelResult.ok) {
+        const data = await getCurrentModelResult.json();
+        extension_settings.sd.model = data.model;
+    }
+
+    url.pathname = '/api/image/models';
+    const getModelsResult = await doExtrasFetch(url);
+
+    if (getModelsResult.ok) {
+        const data = await getModelsResult.json();
+        const view_models = data.models.map(x => ({ value: x, text: x }));
+        return view_models;
+    }
+
+    return [];
+}
+
+function getGenerationType(prompt) {
+    for (const [key, values] of Object.entries(triggerWords)) {
+        for (const value of values) {
+            if (value.toLowerCase() === prompt.toLowerCase().trim()) {
+                return Number(key);
+            }
+        }
+    }
+
+    return generationMode.FREE;
+}
+
+function getQuietPrompt(mode, trigger) {
+    if (mode === generationMode.FREE) {
+        return trigger;
+    }
+
+    return substituteParams(stringFormat(quietPrompts[mode], trigger));
+}
+
+function processReply(str) {
+    if (!str) {
+        return '';
+    }
+
+    str = str.replaceAll('"', '')
+    str = str.replaceAll('“', '')
+    str = str.replaceAll('.', ',')
+    str = str.replaceAll('\n', ', ')
+    str = str.replace(/[^a-zA-Z0-9,:()]+/g, ' ') // Replace everything except alphanumeric characters and commas with spaces
+    str = str.replace(/\s+/g, ' '); // Collapse multiple whitespaces into one
+    str = str.trim();
+
+    str = str
+        .split(',') // list split by commas
+        .map(x => x.trim()) // trim each entry
+        .filter(x => x) // remove empty entries
+        .join(', '); // join it back with proper spacing
+
+    return str;
+}
+
+function getRawLastMessage() {
+    const context = getContext();
+    const lastMessage = context.chat.slice(-1)[0].mes,
+        characterDescription = context.characters[context.characterId].description,
+        situation = context.characters[context.characterId].scenario;
+    return `((${processReply(lastMessage)})), (${processReply(situation)}:0.7), (${processReply(characterDescription)}:0.5)`
+}
+
+async function generatePicture(_, trigger, message, callback) {
+    if (!trigger || trigger.trim().length === 0) {
+        console.log('Trigger word empty, aborting');
+        return;
+    }
+
+    if (!modules.includes('sd') && !extension_settings.sd.horde) {
+        toastr.warning("Extensions API is not connected or doesn't provide SD module. Enable Stable Horde to generate images.");
+        return;
+    }
+
+    extension_settings.sd.sampler = $('#sd_sampler').find(':selected').val();
+    extension_settings.sd.model = $('#sd_model').find(':selected').val();
+
+    trigger = trigger.trim();
+    const generationType = getGenerationType(trigger);
+    console.log('Generation mode', generationType, 'triggered with', trigger);
+    const quiet_prompt = getQuietPrompt(generationType, trigger);
+    const context = getContext();
+
+    const prevSDHeight = extension_settings.sd.height;
+    if (generationType == generationMode.FACE) {
+        extension_settings.sd.height = extension_settings.sd.width * 1.5;
+    }
+
+    try {
+        const prompt = await getPrompt(generationType, message, trigger, quiet_prompt);
+        console.log('Processed Stable Diffusion prompt:', prompt);
+
+        context.deactivateSendButtons();
+        hideSwipeButtons();
+
+        await sendGenerationRequest(prompt, callback);
+    } catch (err) {
+        console.trace(err);
+        throw new Error('SD prompt text generation failed.')
+    }
+    finally {
+        extension_settings.sd.height = prevSDHeight;
+        context.activateSendButtons();
+        showSwipeButtons();
+    }
+}
+
+async function getPrompt(generationType, message, trigger, quiet_prompt) {
+    let prompt;
+
+    switch (generationType) {
+        case generationMode.RAW_LAST:
+            prompt = message || getRawLastMessage();
+            break;
+        case generationMode.FREE:
+            prompt = trigger.trim();
+            break;
+        default:
+            prompt = await generatePrompt(quiet_prompt);
+            break;
+    }
+
+    return prompt;
+}
+
+async function generatePrompt(quiet_prompt) {
+    let reply = processReply(await new Promise(
+        async function promptPromise(resolve, reject) {
+            try {
+                await getContext().generate('quiet', { resolve, reject, quiet_prompt, force_name2: true, });
+            }
+            catch {
+                reject();
+            }
+        }));
+
+    if (extension_settings.sd.refine_mode) {
+        const refinedPrompt = await callPopup('<h3>Review and edit the generated prompt:</h3>Press "Cancel" to abort the image generation.', 'input', reply, { rows: 5, okButton: 'Generate' });
+
+        if (refinedPrompt) {
+            reply = refinedPrompt;
+        } else {
+            throw new Error('Generation aborted by user.');
+        }
+    }
+
+    return reply;
+}
+
+async function sendGenerationRequest(prompt, callback) {
+    if (extension_settings.sd.horde) {
+        await generateHordeImage(prompt, callback);
+    } else {
+        await generateExtrasImage(prompt, callback);
+    }
+}
+
+async function generateExtrasImage(prompt, callback) {
+    console.log(extension_settings.sd);
+    const url = new URL(getApiUrl());
+    url.pathname = '/api/image';
+    const result = await doExtrasFetch(url, {
+        method: 'POST',
+        headers: postHeaders,
+        body: JSON.stringify({
+            prompt: prompt,
+            sampler: extension_settings.sd.sampler,
+            steps: extension_settings.sd.steps,
+            scale: extension_settings.sd.scale,
+            width: extension_settings.sd.width,
+            height: extension_settings.sd.height,
+            prompt_prefix: extension_settings.sd.prompt_prefix,
+            negative_prompt: extension_settings.sd.negative_prompt,
+            restore_faces: !!extension_settings.sd.restore_faces,
+            enable_hr: !!extension_settings.sd.enable_hr,
+            karras: !!extension_settings.sd.horde_karras,
+        }),
+    });
+
+    if (result.ok) {
+        const data = await result.json();
+        const base64Image = `data:image/jpeg;base64,${data.image}`;
+        callback ? callback(prompt, base64Image) : sendMessage(prompt, base64Image);
+    } else {
+        callPopup('Image generation has failed. Please try again.', 'text');
+    }
+}
+
+async function generateHordeImage(prompt, callback) {
+    const result = await fetch('/horde_generateimage', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+        body: JSON.stringify({
+            prompt: prompt,
+            sampler: extension_settings.sd.sampler,
+            steps: extension_settings.sd.steps,
+            scale: extension_settings.sd.scale,
+            width: extension_settings.sd.width,
+            height: extension_settings.sd.height,
+            prompt_prefix: extension_settings.sd.prompt_prefix,
+            negative_prompt: extension_settings.sd.negative_prompt,
+            model: extension_settings.sd.model,
+            nsfw: extension_settings.sd.horde_nsfw,
+            restore_faces: !!extension_settings.sd.restore_faces,
+            enable_hr: !!extension_settings.sd.enable_hr,
+        }),
+    });
+
+    if (result.ok) {
+        const data = await result.text();
+        const base64Image = `data:image/webp;base64,${data}`;
+        callback ? callback(prompt, base64Image) : sendMessage(prompt, base64Image);
+    } else {
+        toastr.error('Image generation has failed. Please try again.');
+    }
+}
+
+async function sendMessage(prompt, image) {
+    const context = getContext();
+    const messageText = `[${context.name2} sends a picture that contains: ${prompt}]`;
+    const message = {
+        name: context.groupId ? systemUserName : context.name2,
+        is_system: context.groupId ? true : false,
+        is_user: false,
+        is_name: true,
+        send_date: timestampToMoment(Date.now()).format('LL LT'),
+        mes: context.groupId ? p(messageText) : messageText,
+        extra: {
+            image: image,
+            title: prompt,
+        },
+    };
+    context.chat.push(message);
+    context.addOneMessage(message);
+    context.saveChat();
+}
+
+function addSDGenButtons() {
+
+    const buttonHtml = `
+    <div id="sd_gen" class="list-group-item flex-container flexGap5">
+        <div class="fa-solid fa-paintbrush extensionsMenuExtensionButton" title="Trigger Stable Diffusion" /></div>
+        Stable Diffusion
+    </div>
+        `;
+
+    const waitButtonHtml = `
+        <div id="sd_gen_wait" class="fa-solid fa-hourglass-half" /></div>
+    `
+    const dropdownHtml = `
+    <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">Yourself</li>
+            <li class="list-group-item" id="sd_face" data-value="face">Your Face</li>
+            <li class="list-group-item" id="sd_me" data-value="me">Me</li>
+            <li class="list-group-item" id="sd_world" data-value="world">The Whole Story</li>
+            <li class="list-group-item" id="sd_last" data-value="last">The Last Message</li>
+            <li class="list-group-item" id="sd_raw_last" data-value="raw_last">Raw Last Message</li>
+        </ul>
+    </div>`;
+
+    $('#extensionsMenu').prepend(buttonHtml);
+    $('#extensionsMenu').prepend(waitButtonHtml);
+    $(document.body).append(dropdownHtml);
+
+    const messageButton = $('.sd_message_gen');
+    const button = $('#sd_gen');
+    const waitButton = $("#sd_gen_wait");
+    const dropdown = $('#sd_dropdown');
+    waitButton.hide();
+    dropdown.hide();
+    button.hide();
+    messageButton.hide();
+
+    let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
+        placement: 'top',
+    });
+
+    $(document).on('click', '.sd_message_gen', sdMessageButton);
+
+    $(document).on('click touchend', function (e) {
+        const target = $(e.target);
+        if (target.is(dropdown)) return;
+        if (target.is(button) && !dropdown.is(":visible") && $("#send_but").css('display') === 'flex') {
+            e.preventDefault();
+
+            dropdown.fadeIn(250);
+            popper.update();
+        } else {
+            dropdown.fadeOut(250);
+        }
+    });
+}
+
+function isConnectedToExtras() {
+    return modules.includes('sd');
+}
+
+async function moduleWorker() {
+    if (isConnectedToExtras() || extension_settings.sd.horde) {
+        $('#sd_gen').show();
+        $('.sd_message_gen').show();
+    }
+    else {
+        $('#sd_gen').hide();
+        $('.sd_message_gen').hide();
+    }
+}
+
+addSDGenButtons();
+setInterval(moduleWorker, UPDATE_INTERVAL);
+
+async function sdMessageButton(e) {
+    function setBusyIcon(isBusy) {
+        $icon.toggleClass('fa-paintbrush', !isBusy);
+        $icon.toggleClass(busyClass, isBusy);
+    }
+
+    const busyClass = 'fa-hourglass';
+    const context = getContext();
+    const $icon = $(e.currentTarget);
+    const $mes = $icon.closest('.mes');
+    const message_id = $mes.attr('mesid');
+    const message = context.chat[message_id];
+    const characterName = message?.name || context.name2;
+    const messageText = substituteParams(message?.mes);
+    const hasSavedImage = message?.extra?.image && message?.extra?.title;
+
+    if ($icon.hasClass(busyClass)) {
+        console.log('Previous image is still being generated...');
+        return;
+    }
+
+    try {
+        setBusyIcon(true);
+        if (hasSavedImage) {
+            const prompt = message?.extra?.title;
+            console.log('Regenerating an image, using existing prompt:', prompt);
+            await sendGenerationRequest(prompt, saveGeneratedImage);
+        }
+        else {
+            console.log("doing /sd raw last");
+            await generatePicture('sd', 'raw_last', `${characterName} said: ${messageText}`, saveGeneratedImage);
+        }
+    }
+    catch (error) {
+        console.error('Could not generate inline image: ', error);
+    }
+    finally {
+        setBusyIcon(false);
+    }
+
+    function saveGeneratedImage(prompt, image) {
+        // Some message sources may not create the extra object
+        if (typeof message.extra !== 'object') {
+            message.extra = {};
+        }
+
+        // If already contains an image and it's not inline - leave it as is
+        message.extra.inline_image = message.extra.image && !message.extra.inline_image ? false : true;
+        message.extra.image = image;
+        message.extra.title = prompt;
+        appendImageToMessage(message, $mes);
+
+        context.saveChat();
+    }
+};
+
+$("#sd_dropdown [id]").on("click", function () {
+    var id = $(this).attr("id");
+    if (id == "sd_you") {
+        console.log("doing /sd you");
+        generatePicture('sd', 'you');
+    }
+
+    else if (id == "sd_face") {
+        console.log("doing /sd face");
+        generatePicture('sd', 'face');
+
+    }
+
+    else if (id == "sd_me") {
+        console.log("doing /sd me");
+        generatePicture('sd', 'me');
+    }
+
+    else if (id == "sd_world") {
+        console.log("doing /sd scene");
+        generatePicture('sd', 'scene');
+    }
+
+    else if (id == "sd_last") {
+        console.log("doing /sd last");
+        generatePicture('sd', 'last');
+    }
+
+    else if (id == "sd_raw_last") {
+        console.log("doing /sd raw last");
+        generatePicture('sd', 'raw_last');
+    }
+});
+
+jQuery(async () => {
+    getContext().registerSlashCommand('sd', generatePicture, [], helpString, true, true);
+
+    const settingsHtml = `
+    <div class="sd_settings">
+        <div class="inline-drawer">
+            <div class="inline-drawer-toggle inline-drawer-header">
+            <b>Stable Diffusion</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <small><i>Use slash commands or the bottom Paintbrush button to generate images. Type <span class="monospace">/help</span> in chat for more details</i></small>
+            <br>
+            <small><i>Hint: Save an API key in Horde KoboldAI API settings to use it here.</i></small>
+            <label for="sd_refine_mode" class="checkbox_label" title="Allow to edit prompts manually before sending them to generation API">
+                <input id="sd_refine_mode" type="checkbox" />
+                Edit prompts before generation
+            </label>
+            <div class="flex-container flexGap5 marginTop10 margin-bot-10px">
+                <label class="checkbox_label">
+                    <input id="sd_horde" type="checkbox" />
+                    Use Stable Horde
+                </label>
+                <label style="margin-left:1em;" class="checkbox_label">
+                    <input id="sd_horde_nsfw" type="checkbox" />
+                    Allow NSFW images from Horde
+                </label>
+            </div>
+            <label for="sd_scale">CFG Scale (<span id="sd_scale_value"></span>)</label>
+            <input id="sd_scale" type="range" min="${defaultSettings.scale_min}" max="${defaultSettings.scale_max}" step="${defaultSettings.scale_step}" value="${defaultSettings.scale}" />
+            <label for="sd_steps">Sampling steps (<span id="sd_steps_value"></span>)</label>
+            <input id="sd_steps" type="range" min="${defaultSettings.steps_min}" max="${defaultSettings.steps_max}" step="${defaultSettings.steps_step}" value="${defaultSettings.steps}" />
+            <label for="sd_width">Width (<span id="sd_width_value"></span>)</label>
+            <input id="sd_width" type="range" max="${defaultSettings.dimension_max}" min="${defaultSettings.dimension_min}" step="${defaultSettings.dimension_step}" value="${defaultSettings.width}" />
+            <label for="sd_height">Height (<span id="sd_height_value"></span>)</label>
+            <input id="sd_height" type="range" max="${defaultSettings.dimension_max}" min="${defaultSettings.dimension_min}" step="${defaultSettings.dimension_step}" value="${defaultSettings.height}" />
+            <div><small>Only for Horde or remote Stable Diffusion Web UI:</small></div>
+            <div class="flex-container marginTop10 margin-bot-10px">
+                <label class="flex1 checkbox_label">
+                    <input id="sd_restore_faces" type="checkbox" />
+                    Restore Faces
+                </label>
+                <label class="flex1 checkbox_label">
+                    <input id="sd_enable_hr" type="checkbox" />
+                    Hires. Fix
+                </label>
+            </div>
+            <label for="sd_model">Stable Diffusion model</label>
+            <select id="sd_model"></select>
+            <label for="sd_sampler">Sampling method</label>
+            <select id="sd_sampler"></select>
+            <div class="flex-container flexGap5 margin-bot-10px">
+                <label class="checkbox_label">
+                    <input id="sd_horde_karras" type="checkbox" />
+                    Karras (only for Horde, not all samplers supported)
+                </label>
+            </div>
+            <label for="sd_prompt_prefix">Generated prompt prefix</label>
+            <textarea id="sd_prompt_prefix" class="text_pole textarea_compact" rows="2"></textarea>
+            <label for="sd_negative_prompt">Negative prompt</label>
+            <textarea id="sd_negative_prompt" class="text_pole textarea_compact" rows="2"></textarea>
+        </div>
+    </div>`;
+
+    $('#extensions_settings').append(settingsHtml);
+    $('#sd_scale').on('input', onScaleInput);
+    $('#sd_steps').on('input', onStepsInput);
+    $('#sd_model').on('change', onModelChange);
+    $('#sd_sampler').on('change', onSamplerChange);
+    $('#sd_prompt_prefix').on('input', onPromptPrefixInput);
+    $('#sd_negative_prompt').on('input', onNegativePromptInput);
+    $('#sd_width').on('input', onWidthInput);
+    $('#sd_height').on('input', onHeightInput);
+    $('#sd_horde').on('input', onHordeInput);
+    $('#sd_horde_nsfw').on('input', onHordeNsfwInput);
+    $('#sd_horde_karras').on('input', onHordeKarrasInput);
+    $('#sd_restore_faces').on('input', onRestoreFacesInput);
+    $('#sd_enable_hr').on('input', onHighResFixInput);
+    $('#sd_refine_mode').on('input', onRefineModeInput);
+
+    $('.sd_settings .inline-drawer-toggle').on('click', function () {
+        initScrollHeight($("#sd_prompt_prefix"));
+        initScrollHeight($("#sd_negative_prompt"));
+    })
+
+    eventSource.on(event_types.EXTRAS_CONNECTED, async () => {
+        await Promise.all([loadSamplers(), loadModels()]);
+    });
+
+    await loadSettings();
+    $('body').addClass('sd');
+});

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

@@ -0,0 +1,13 @@
+{
+    "display_name": "Stable Diffusion",
+    "loading_order": 10,
+    "requires": [],
+    "optional": [
+        "sd"
+    ],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee#1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/SillyTavern/SillyTavern"
+}

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

@@ -0,0 +1,29 @@
+.sd_settings label:not(.checkbox_label) {
+    display: block;
+}
+
+#sd_gen {
+    /*order: 100;
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 1px; */
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+}
+
+#sd_gen:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
+#sd_dropdown {
+    z-index: 3000;
+    backdrop-filter: blur(--SmartThemeBlurStrength);
+}

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

@@ -0,0 +1,40 @@
+import { callPopup, main_api } from "../../../script.js";
+import { getContext } from "../../extensions.js";
+import { getTokenizerModel } from "../../openai.js";
+
+async function doTokenCounter() {
+    const selectedTokenizer = main_api == 'openai'
+        ? `tiktoken (${getTokenizerModel()})`
+        : $("#tokenizer").find(':selected').text();
+    const html = `
+    <div class="wide100p">
+        <h3>Token Counter</h3>
+        <div class="justifyLeft">
+            <h4>Type / paste in the box below to see the number of tokens in the text.</h4>
+            <p>Selected tokenizer: ${selectedTokenizer}</p>
+            <textarea id="token_counter_textarea" class="wide100p textarea_compact margin-bot-10px" rows="20"></textarea>
+            <div>Tokens: <span id="token_counter_result">0</span></div>
+        </div>
+    </div>`;
+
+    const dialog = $(html);
+    dialog.find('#token_counter_textarea').on('input', () => {
+        const text = $('#token_counter_textarea').val();
+        const context = getContext();
+        const count = context.getTokenCount(text);
+        $('#token_counter_result').text(count);
+    });
+
+    $('#dialogue_popup').addClass('wide_dialogue_popup');
+    callPopup(dialog, 'text');
+}
+
+jQuery(() => {
+    const buttonHtml = `
+        <div id="token_counter" class="list-group-item flex-container flexGap5">
+            <div class="fa-solid fa-1 extensionsMenuExtensionButton" /></div>
+            Token Counter
+        </div>`;
+    $('#extensionsMenu').prepend(buttonHtml);
+    $('#token_counter').on('click', doTokenCounter);
+});

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/SillyTavern/SillyTavern"
+}

public/scripts/extensions/translate/index.js

@@ -0,0 +1,431 @@
+import {
+    callPopup,
+    eventSource,
+    event_types,
+    getRequestHeaders,
+    reloadCurrentChat,
+    saveSettingsDebounced,
+    substituteParams,
+    updateMessageBlock,
+} from "../../../script.js";
+import { extension_settings, getContext } from "../../extensions.js";
+import { secret_state, writeSecret } from "../../secrets.js";
+
+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,
+};
+
+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, Brazil)': 'pt',
+    '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'];
+
+function showKeyButton() {
+    const providerRequiresKey = KEY_REQUIRED.includes(extension_settings.translate.provider);
+    $("#translate_key_button").toggle(providerRequiresKey);
+    $("#translate_key_button").toggleClass('success', Boolean(secret_state[extension_settings.translate.provider]));
+}
+
+function loadSettings() {
+    for (const key in defaultSettings) {
+        if (!extension_settings.translate.hasOwnProperty(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);
+    showKeyButton();
+}
+
+async function translateImpersonate(text) {
+    const translatedText = await translate(text, extension_settings.translate.target_language);
+    $("#send_textarea").val(translatedText);
+}
+
+async function translateIncomingMessage(messageId) {
+    const context = getContext();
+    const message = context.chat[messageId];
+
+    if (typeof message.extra !== 'object') {
+        message.extra = {};
+    }
+
+    // New swipe is being generated. Don't translate that
+    if ($(`#chat .mes[mesid="${messageId}"] .mes_text`).text() == '...') {
+        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(messageId, message);
+}
+
+async function translateProviderGoogle(text, lang) {
+    const response = await fetch('/google_translate', {
+        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);
+}
+
+async function translateProviderDeepl(text, lang) {
+    if (!secret_state.deepl) {
+        throw new Error('No DeepL API key');
+    }
+
+    const response = await fetch('/deepl_translate', {
+        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);
+}
+
+async function translate(text, lang) {
+    try {
+        switch (extension_settings.translate.provider) {
+            case 'google':
+                return await translateProviderGoogle(text, lang);
+            case 'deepl':
+                return await translateProviderDeepl(text, lang);
+            default:
+                console.error('Unknown translation provider', extension_settings.translate.provider);
+                return text;
+        }
+    } catch (error) {
+        console.log(error);
+        toastr.error(String(error), 'Failed to translate message');
+    }
+}
+
+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);
+        }
+    };
+}
+
+// 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 translateIncomingMessage(i);
+        }
+
+        await context.saveChat();
+    } catch (error) {
+        console.log(error);
+        toastr.error('Failed to translate chat');
+    } finally {
+        translateChatExecuting = false;
+    }
+}
+
+async function onTranslationsClearClick() {
+    const confirm = await callPopup('<h3>Are you sure?</h3>This will remove translated text from all messages in the current chat. This action cannot be undone.', 'confirm');
+
+    if (!confirm) {
+        return;
+    }
+
+    const context = getContext();
+    const chat = context.chat;
+
+    for (const mes of chat) {
+        if (mes.extra) {
+            delete mes.extra.display_text;
+        }
+    }
+
+    await context.saveChat();
+    await reloadCurrentChat();
+}
+
+async function translateMessageEdit(messageId) {
+    const context = getContext();
+    const chat = context.chat;
+    const message = chat[messageId];
+
+    if (message.is_system || extension_settings.translate.auto_mode == autoModeOptions.NONE) {
+        return;
+    }
+
+    if ((message.is_user && shouldTranslate(outgoingTypes)) || (!message.is_user && shouldTranslate(incomingTypes))) {
+        await translateIncomingMessage(messageId);
+    }
+}
+
+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
+    if (message?.extra?.display_text) {
+        delete message.extra.display_text;
+        updateMessageBlock(messageId, message);
+    }
+    // If the message is not translated, translate it
+    else {
+        await translateIncomingMessage(messageId);
+    }
+
+    await context.saveChat();
+}
+
+const handleIncomingMessage = createEventHandler(translateIncomingMessage, () => shouldTranslate(incomingTypes));
+const handleOutgoingMessage = createEventHandler(translateOutgoingMessage, () => shouldTranslate(outgoingTypes));
+const handleImpersonateReady = createEventHandler(translateImpersonate, () => shouldTranslate(incomingTypes));
+const handleMessageEdit = createEventHandler(translateMessageEdit, () => true);
+
+jQuery(() => {
+    const html = `
+    <div class="translation_settings">
+        <div class="inline-drawer">
+            <div class="inline-drawer-toggle inline-drawer-header">
+                <b>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">Auto-mode</label>
+                <select id="translation_auto_mode">
+                    <option value="none">None</option>
+                    <option value="responses">Translate responses</option>
+                    <option value="inputs">Translate inputs</option>
+                    <option value="both">Translate both</option>
+                </select>
+                <label for="translation_provider">Provider</label>
+                <div class="flex-container gap5px flexnowrap marginBot5">
+                    <select id="translation_provider" name="provider" class="margin0">
+                        <option value="google">Google</option>
+                        <option value="deepl">DeepL</option>
+                    <select>
+                    <div id="translate_key_button" class="menu_button fa-solid fa-key margin0"></div>
+                </div>
+                <label 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>Clear Translations</span>
+                </div>
+            </div>
+        </div>
+    </div>`;
+
+    const buttonHtml = `
+        <div id="translate_chat" class="list-group-item flex-container flexGap5">
+            <div class="fa-solid fa-language extensionsMenuExtensionButton" /></div>
+            Translate Chat
+        </div>`;
+    $('#extensionsMenu').append(buttonHtml);
+    $('#extensions_settings2').append(html);
+    $('#translate_chat').on('click', onTranslateChatClick);
+    $('#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) => {
+        extension_settings.translate.auto_mode = event.target.value;
+        saveSettingsDebounced();
+    });
+    $('#translation_provider').on('change', (event) => {
+        extension_settings.translate.provider = event.target.value;
+        showKeyButton();
+        saveSettingsDebounced();
+    });
+    $('#translation_target_language').on('change', (event) => {
+        extension_settings.translate.target_language = 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 callPopup(`<h3>${optionText} API Key</h3>`, 'input');
+
+        if (key == false) {
+            return;
+        }
+
+        await writeSecret(extension_settings.translate.provider, key);
+        toastr.success('API Key saved');
+    });
+
+    loadSettings();
+
+    eventSource.on(event_types.MESSAGE_RECEIVED, handleIncomingMessage);
+    eventSource.on(event_types.MESSAGE_SWIPED, handleIncomingMessage);
+    eventSource.on(event_types.MESSAGE_SENT, handleOutgoingMessage);
+    eventSource.on(event_types.IMPERSONATE_READY, handleImpersonateReady);
+    eventSource.on(event_types.MESSAGE_EDITED, handleMessageEdit);
+
+    document.body.classList.add('translate');
+});

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/SillyTavern/SillyTavern"
+}

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/edge.js

@@ -0,0 +1,151 @@
+import { getRequestHeaders } from "../../../script.js"
+import { getApiUrl } from "../../extensions.js"
+import { doExtrasFetch, modules } from "../../extensions.js"
+import { getPreviewString } from "./index.js"
+
+export { EdgeTtsProvider }
+
+class EdgeTtsProvider {
+    //########//
+    // Config //
+    //########//
+
+    settings
+    voices = []
+    separator = ' . '
+    audioElement = document.createElement('audio')
+
+    defaultSettings = {
+        voiceMap: {},
+        rate: 0,
+    }
+
+    get settingsHtml() {
+        let html = `Microsoft Edge TTS Provider<br>
+        <label for="edge_tts_rate">Rate: <span id="edge_tts_rate_output"></span></label>
+        <input id="edge_tts_rate" type="range" value="${this.defaultSettings.rate}" min="-100" max="100" step="1" />`
+        return html
+    }
+
+    onSettingsChange() {
+        this.settings.rate = Number($('#edge_tts_rate').val());
+        $('#edge_tts_rate_output').text(this.settings.rate);
+    }
+
+    loadSettings(settings) {
+        // Pupulate 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}`
+            }
+        }
+
+        $('#edge_tts_rate').val(this.settings.rate || 0);
+        $('#edge_tts_rate_output').text(this.settings.rate || 0);
+
+        console.info("Settings loaded")
+    }
+
+
+    async onApplyClick() {
+        return
+    }
+
+    //#################//
+    //  TTS Interfaces //
+    //#################//
+
+    async getVoice(voiceName) {
+        if (this.voices.length == 0) {
+            this.voices = await this.fetchTtsVoiceIds()
+        }
+        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 fetchTtsVoiceIds() {
+        throwIfModuleMissing()
+
+        const url = new URL(getApiUrl());
+        url.pathname = `/api/edge-tts/list`
+        const response = await doExtrasFetch(url)
+        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
+    }
+
+
+    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();
+    }
+
+    async fetchTtsGeneration(inputText, voiceId) {
+        throwIfModuleMissing()
+
+        console.info(`Generating new TTS for voice_id ${voiceId}`)
+        const url = new URL(getApiUrl());
+        url.pathname = `/api/edge-tts/generate`;
+        const response = await doExtrasFetch(url,
+            {
+                method: 'POST',
+                headers: getRequestHeaders(),
+                body: JSON.stringify({
+                    "text": inputText,
+                    "voice": voiceId,
+                    "rate": Number(this.settings.rate),
+                })
+            }
+        )
+        if (!response.ok) {
+            toastr.error(response.statusText, 'TTS Generation Failed');
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+        return response
+    }
+}
+function throwIfModuleMissing() {
+    if (!modules.includes('edge-tts')) {
+        toastr.error(`Edge TTS module not loaded. Add edge-tts to enable-modules and restart the Extras API.`)
+        throw new Error(`Edge TTS module not loaded.`)
+    }
+}
+

public/scripts/extensions/tts/elevenlabs.js

@@ -0,0 +1,231 @@
+export { ElevenLabsTtsProvider }
+
+class ElevenLabsTtsProvider {
+    //########//
+    // Config //
+    //########//
+
+    settings
+    voices = []
+    separator = ' ... ... ... '
+
+    get settings() {
+        return this.settings
+    }
+
+    defaultSettings = {
+        stability: 0.75,
+        similarity_boost: 0.75,
+        apiKey: "",
+        multilingual: false,
+        voiceMap: {}
+    }
+
+    get settingsHtml() {
+        let html = `
+        <label for="elevenlabs_tts_api_key">API Key</label>
+        <input id="elevenlabs_tts_api_key" type="text" class="text_pole" placeholder="<API Key>"/>
+        <label for="elevenlabs_tts_stability">Stability: <span id="elevenlabs_tts_stability_output"></span></label>
+        <input id="elevenlabs_tts_stability" type="range" value="${this.defaultSettings.stability}" min="0" max="1" step="0.05" />
+        <label for="elevenlabs_tts_similarity_boost">Similarity Boost: <span id="elevenlabs_tts_similarity_boost_output"></span></label>
+        <input id="elevenlabs_tts_similarity_boost" type="range" value="${this.defaultSettings.similarity_boost}" min="0" max="1" step="0.05" />
+        <label class="checkbox_label" for="elevenlabs_tts_multilingual">
+            <input id="elevenlabs_tts_multilingual" type="checkbox" value="${this.defaultSettings.multilingual}" />
+            Enable Multilingual
+        </label>
+        `
+        return html
+    }
+
+    onSettingsChange() {
+        // Update dynamically
+        this.settings.stability = $('#elevenlabs_tts_stability').val()
+        this.settings.similarity_boost = $('#elevenlabs_tts_similarity_boost').val()
+        this.settings.multilingual = $('#elevenlabs_tts_multilingual').prop('checked')
+    }
+
+
+    loadSettings(settings) {
+        // Pupulate 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}`
+            }
+        }
+
+        $('#elevenlabs_tts_stability').val(this.settings.stability)
+        $('#elevenlabs_tts_similarity_boost').val(this.settings.similarity_boost)
+        $('#elevenlabs_tts_api_key').val(this.settings.apiKey)
+        $('#tts_auto_generation').prop('checked', this.settings.multilingual)
+        console.info("Settings loaded")
+    }
+
+    async onApplyClick() {
+        // Update on Apply click
+        return await this.updateApiKey().catch( (error) => {
+            throw error
+        })
+    }
+
+
+    async updateApiKey() {
+        // Using this call to validate API key
+        this.settings.apiKey = $('#elevenlabs_tts_api_key').val()
+
+        await this.fetchTtsVoiceIds().catch(error => {
+            throw `TTS API key validation failed`
+        })
+        this.settings.apiKey = this.settings.apiKey
+        console.debug(`Saved new API_KEY: ${this.settings.apiKey}`)
+    }
+
+    //#################//
+    //  TTS Interfaces //
+    //#################//
+
+    async getVoice(voiceName) {
+        if (this.voices.length == 0) {
+            this.voices = await this.fetchTtsVoiceIds()
+        }
+        const match = this.voices.filter(
+            elevenVoice => elevenVoice.name == voiceName
+        )[0]
+        if (!match) {
+            throw `TTS Voice name ${voiceName} not found in ElevenLabs account`
+        }
+        return match
+    }
+
+
+    async generateTts(text, voiceId){
+        const historyId = await this.findTtsGenerationInHistory(text, voiceId)
+
+        let response
+        if (historyId) {
+            console.debug(`Found existing TTS generation with id ${historyId}`)
+            response = await this.fetchTtsFromHistory(historyId)
+        } else {
+            console.debug(`No existing TTS generation found, requesting new generation`)
+            response = await this.fetchTtsGeneration(text, voiceId)
+        }
+        return response
+    }
+
+    //###################//
+    //  Helper Functions //
+    //###################//
+
+    async findTtsGenerationInHistory(message, voiceId) {
+        const ttsHistory = await this.fetchTtsHistory()
+        for (const history of ttsHistory) {
+            const text = history.text
+            const itemId = history.history_item_id
+            if (message === text && history.voice_id == voiceId) {
+                console.info(`Existing TTS history item ${itemId} found: ${text} `)
+                return itemId
+            }
+        }
+        return ''
+    }
+
+
+    //###########//
+    // API CALLS //
+    //###########//
+    async fetchTtsVoiceIds() {
+        const headers = {
+            'xi-api-key': this.settings.apiKey
+        }
+        const response = await fetch(`https://api.elevenlabs.io/v1/voices`, {
+            headers: headers
+        })
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`)
+        }
+        const responseJson = await response.json()
+        return responseJson.voices
+    }
+
+    async fetchTtsVoiceSettings() {
+        const headers = {
+            'xi-api-key': this.settings.apiKey
+        }
+        const response = await fetch(
+            `https://api.elevenlabs.io/v1/voices/settings/default`,
+            {
+                headers: headers
+            }
+        )
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`)
+        }
+        return response.json()
+    }
+
+    async fetchTtsGeneration(text, voiceId) {
+        let model = "eleven_monolingual_v1"
+        if (this.settings.multilingual == true) {
+            model = "eleven_multilingual_v1"
+        }
+        console.info(`Generating new TTS for voice_id ${voiceId}`)
+        const response = await fetch(
+            `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
+            {
+                method: 'POST',
+                headers: {
+                    'xi-api-key': this.settings.apiKey,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    model: model,
+                    text: text,
+                    voice_settings: this.settings
+                })
+            }
+        )
+        if (!response.ok) {
+            toastr.error(response.statusText, 'TTS Generation Failed');
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+        return response
+    }
+
+    async fetchTtsFromHistory(history_item_id) {
+        console.info(`Fetched existing TTS with history_item_id ${history_item_id}`)
+        const response = await fetch(
+            `https://api.elevenlabs.io/v1/history/${history_item_id}/audio`,
+            {
+                headers: {
+                    'xi-api-key': this.settings.apiKey
+                }
+            }
+        )
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`)
+        }
+        return response
+    }
+
+    async fetchTtsHistory() {
+        const headers = {
+            'xi-api-key': this.settings.apiKey
+        }
+        const response = await fetch(`https://api.elevenlabs.io/v1/history`, {
+            headers: headers
+        })
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`)
+        }
+        const responseJson = await response.json()
+        return responseJson.history
+    }
+}

public/scripts/extensions/tts/index.js

@@ -0,0 +1,706 @@
+import { callPopup, cancelTtsPlay, eventSource, event_types, isMultigenEnabled, is_send_press, saveSettingsDebounced } from '../../../script.js'
+import { ModuleWorkerWrapper, extension_settings, getContext } from '../../extensions.js'
+import { escapeRegex, getStringHash } from '../../utils.js'
+import { EdgeTtsProvider } from './edge.js'
+import { ElevenLabsTtsProvider } from './elevenlabs.js'
+import { SileroTtsProvider } from './silerotts.js'
+import { SystemTtsProvider } from './system.js'
+import { NovelTtsProvider } from './novel.js'
+import { isMobile } from '../../RossAscends-mods.js'
+import { power_user } from '../../power-user.js'
+
+const UPDATE_INTERVAL = 1000
+
+let voiceMap = {} // {charName:voiceid, charName2:voiceid2}
+let audioControl
+
+let lastCharacterId = null
+let lastGroupId = null
+let lastChatId = null
+let lastMessageHash = null
+
+export function getPreviewString(lang) {
+    const previewStrings = {
+        'en-US': 'The quick brown fox jumps over the lazy dog',
+        'en-GB': 'Sphinx of black quartz, judge my vow',
+        'fr-FR': 'Portez ce vieux whisky au juge blond qui fume',
+        'de-DE': 'Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich',
+        'it-IT': "Pranzo d'acqua fa volti sghembi",
+        'es-ES': 'Quiere la boca exhausta vid, kiwi, piña y fugaz jamón',
+        'es-MX': 'Fabio me exige, sin tapujos, que añada cerveza al whisky',
+        'ru-RU': 'В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!',
+        'pt-BR': 'Vejo xá gritando que fez show sem playback.',
+        'pt-PR': 'Todo pajé vulgar faz boquinha sexy com kiwi.',
+        'uk-UA': "Фабрикуймо гідність, лящім їжею, ґав хапаймо, з'єднавці чаш!",
+        'pl-PL': 'Pchnąć w tę łódź jeża lub ośm skrzyń fig',
+        'cs-CZ': 'Příliš žluťoučký kůň úpěl ďábelské ódy',
+        'sk-SK': 'Vyhŕňme si rukávy a vyprážajme čínske ryžové cestoviny',
+        'hu-HU': 'Árvíztűrő tükörfúrógép',
+        'tr-TR': 'Pijamalı hasta yağız şoföre çabucak güvendi',
+        'nl-NL': 'De waard heeft een kalfje en een pinkje opgegeten',
+        'sv-SE': 'Yxskaftbud, ge vårbygd, zinkqvarn',
+        'da-DK': 'Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon',
+        'ja-JP': 'いろはにほへと　ちりぬるを　わかよたれそ　つねならむ　うゐのおくやま　けふこえて　あさきゆめみし　ゑひもせす',
+        'ko-KR': '가나다라마바사아자차카타파하',
+        'zh-CN': '我能吞下玻璃而不伤身体',
+        'ro-RO': 'Muzicologă în bej vând whisky și tequila, preț fix',
+        'bg-BG': 'Щъркелите се разпръснаха по цялото небе',
+        'el-GR': 'Ταχίστη αλώπηξ βαφής ψημένη γη, δρασκελίζει υπέρ νωθρού κυνός',
+        'fi-FI': 'Voi veljet, miksi juuri teille myin nämä vehkeet?',
+        'he-IL': 'הקצינים צעקו: "כל הכבוד לצבא הצבאות!"',
+        'id-ID': 'Jangkrik itu memang enak, apalagi kalau digoreng',
+        'ms-MY': 'Muzik penyanyi wanita itu menggambarkan kehidupan yang penuh dengan duka nestapa',
+        'th-TH': 'เป็นไงบ้างครับ ผมชอบกินข้าวผัดกระเพราหมูกรอบ',
+        'vi-VN': 'Cô bé quàng khăn đỏ đang ngồi trên bãi cỏ xanh',
+        'ar-SA': 'أَبْجَدِيَّة عَرَبِيَّة',
+        'hi-IN': 'श्वेता ने श्वेता के श्वेते हाथों में श्वेता का श्वेता चावल पकड़ा',
+    }
+    const fallbackPreview = 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet'
+
+    return previewStrings[lang] ?? fallbackPreview;
+}
+
+let ttsProviders = {
+    ElevenLabs: ElevenLabsTtsProvider,
+    Silero: SileroTtsProvider,
+    System: SystemTtsProvider,
+    Edge: EdgeTtsProvider,
+    Novel: NovelTtsProvider,
+}
+let ttsProvider
+let ttsProviderName
+
+async function onNarrateOneMessage() {
+    audioElement.src = '/sounds/silence.mp3';
+    const context = getContext();
+    const id = $(this).closest('.mes').attr('mesid');
+    const message = context.chat[id];
+
+    if (!message) {
+        return;
+    }
+
+    resetTtsPlayback()
+    ttsJobQueue.push(message);
+    moduleWorker();
+}
+
+async function moduleWorker() {
+    // Primarily determining when to add new chat to the TTS queue
+    const enabled = $('#tts_enabled').is(':checked')
+    $('body').toggleClass('tts', enabled);
+    if (!enabled) {
+        return
+    }
+
+    const context = getContext()
+    const chat = context.chat
+
+    processTtsQueue()
+    processAudioJobQueue()
+    updateUiAudioPlayState()
+
+    // Auto generation is disabled
+    if (extension_settings.tts.auto_generation == false) {
+        return
+    }
+
+    // no characters or group selected
+    if (!context.groupId && context.characterId === undefined) {
+        return
+    }
+
+    // Multigen message is currently being generated
+    if (is_send_press && isMultigenEnabled()) {
+        return;
+    }
+
+    // Chat changed
+    if (
+        context.chatId !== lastChatId
+    ) {
+        currentMessageNumber = context.chat.length ? context.chat.length : 0
+        saveLastValues()
+        return
+    }
+
+    // take the count of messages
+    let lastMessageNumber = context.chat.length ? context.chat.length : 0
+
+    // There's no new messages
+    let diff = lastMessageNumber - currentMessageNumber
+    let hashNew = getStringHash((chat.length && chat[chat.length - 1].mes) ?? '')
+
+    if (diff == 0 && hashNew === lastMessageHash) {
+        return
+    }
+
+    const message = chat[chat.length - 1]
+
+    // We're currently swiping or streaming. Don't generate voice
+    if (
+        !message ||
+        message.mes === '...' ||
+        message.mes === '' ||
+        (context.streamingProcessor && !context.streamingProcessor.isFinished)
+    ) {
+        return
+    }
+
+    // Don't generate if message doesn't have a display text
+    if (extension_settings.tts.narrate_translated_only && !(message?.extra?.display_text)) {
+        return;
+    }
+
+    // New messages, add new chat to history
+    lastMessageHash = hashNew
+    currentMessageNumber = lastMessageNumber
+
+    console.debug(
+        `Adding message from ${message.name} for TTS processing: "${message.mes}"`
+    )
+    ttsJobQueue.push(message)
+}
+
+
+function resetTtsPlayback() {
+    // Stop system TTS utterance
+    cancelTtsPlay();
+
+    // Clear currently processing jobs
+    currentTtsJob = null;
+    currentAudioJob = null;
+
+    // Reset audio element
+    audioElement.currentTime = 0;
+    audioElement.src = '';
+
+    // Clear any queue items
+    ttsJobQueue.splice(0, ttsJobQueue.length);
+    audioJobQueue.splice(0, audioJobQueue.length);
+
+    // Set audio ready to process again
+    audioQueueProcessorReady = true;
+}
+
+function isTtsProcessing() {
+    let processing = false
+
+    // Check job queues
+    if (ttsJobQueue.length > 0 || audioJobQueue > 0) {
+        processing = true
+    }
+    // Check current jobs
+    if (currentTtsJob != null || currentAudioJob != null) {
+        processing = true
+    }
+    return processing
+}
+
+function debugTtsPlayback() {
+    console.log(JSON.stringify(
+        {
+            "ttsProviderName": ttsProviderName,
+            "currentMessageNumber": currentMessageNumber,
+            "isWorkerBusy": isWorkerBusy,
+            "audioPaused": audioPaused,
+            "audioJobQueue": audioJobQueue,
+            "currentAudioJob": currentAudioJob,
+            "audioQueueProcessorReady": audioQueueProcessorReady,
+            "ttsJobQueue": ttsJobQueue,
+            "currentTtsJob": currentTtsJob,
+            "ttsConfig": extension_settings.tts
+        }
+    ))
+}
+window.debugTtsPlayback = debugTtsPlayback
+
+//##################//
+//   Audio Control  //
+//##################//
+
+let audioElement = new Audio()
+audioElement.autoplay = true
+
+let audioJobQueue = []
+let currentAudioJob
+let audioPaused = false
+let audioQueueProcessorReady = true
+
+let lastAudioPosition = 0
+
+async function playAudioData(audioBlob) {
+    // Since current audio job can be cancelled, don't playback if it is null
+    if (currentAudioJob == null) {
+        console.log("Cancelled TTS playback because currentAudioJob was null")
+    }
+    const reader = new FileReader()
+    reader.onload = function (e) {
+        const srcUrl = e.target.result
+        audioElement.src = srcUrl
+    }
+    reader.readAsDataURL(audioBlob)
+    audioElement.addEventListener('ended', completeCurrentAudioJob)
+    audioElement.addEventListener('canplay', () => {
+        console.debug(`Starting TTS playback`)
+        audioElement.play()
+    })
+}
+
+window['tts_preview'] = function (id) {
+    const audio = document.getElementById(id)
+
+    if (audio && !$(audio).data('disabled')) {
+        audio.play()
+    }
+    else {
+        ttsProvider.previewTtsVoice(id)
+    }
+}
+
+async function onTtsVoicesClick() {
+    let popupText = ''
+
+    try {
+        const voiceIds = await ttsProvider.fetchTtsVoiceIds()
+
+        for (const voice of voiceIds) {
+            popupText += `
+            <div class="voice_preview">
+                <span class="voice_lang">${voice.lang || ''}</span>
+                <b class="voice_name">${voice.name}</b>
+                <i onclick="tts_preview('${voice.voice_id}')" class="fa-solid fa-play"></i>
+            </div>`
+            if (voice.preview_url) {
+                popupText += `<audio id="${voice.voice_id}" src="${voice.preview_url}" data-disabled="${voice.preview_url == false}"></audio>`
+            }
+        }
+    } catch {
+        popupText = 'Could not load voices list. Check your API key.'
+    }
+
+    callPopup(popupText, 'text')
+}
+
+function updateUiAudioPlayState() {
+    if (extension_settings.tts.enabled == true) {
+        $('#ttsExtensionMenuItem').show();
+        let img
+        // Give user feedback that TTS is active by setting the stop icon if processing or playing
+        if (!audioElement.paused || isTtsProcessing()) {
+            img = 'fa-solid fa-stop-circle extensionsMenuExtensionButton'
+        } else {
+            img = 'fa-solid fa-circle-play extensionsMenuExtensionButton'
+        }
+        $('#tts_media_control').attr('class', img);
+    } else {
+        $('#ttsExtensionMenuItem').hide();
+    }
+}
+
+function onAudioControlClicked() {
+    audioElement.src = '/sounds/silence.mp3';
+    let context = getContext()
+    // Not pausing, doing a full stop to anything TTS is doing. Better UX as pause is not as useful
+    if (!audioElement.paused || isTtsProcessing()) {
+        resetTtsPlayback()
+    } else {
+        // Default play behavior if not processing or playing is to play the last message.
+        ttsJobQueue.push(context.chat[context.chat.length - 1])
+    }
+    updateUiAudioPlayState()
+}
+
+function addAudioControl() {
+
+    $('#extensionsMenu').prepend(`
+        <div id="ttsExtensionMenuItem" class="list-group-item flex-container flexGap5">
+            <div id="tts_media_control" class="extensionsMenuExtensionButton "/></div>
+            TTS Playback
+        </div>`)
+    $('#ttsExtensionMenuItem').attr('title', 'TTS play/pause').on('click', onAudioControlClicked)
+    audioControl = document.getElementById('tts_media_control')
+    updateUiAudioPlayState()
+}
+
+function completeCurrentAudioJob() {
+    audioQueueProcessorReady = true
+    currentAudioJob = null
+    lastAudioPosition = 0
+    // updateUiPlayState();
+}
+
+/**
+ * Accepts an HTTP response containing audio/mpeg data, and puts the data as a Blob() on the queue for playback
+ * @param {*} response
+ */
+async function addAudioJob(response) {
+    const audioData = await response.blob()
+    if (!audioData.type in ['audio/mpeg', 'audio/wav', 'audio/x-wav', 'audio/wave', 'audio/webm']) {
+        throw `TTS received HTTP response with invalid data format. Expecting audio/mpeg, got ${audioData.type}`
+    }
+    audioJobQueue.push(audioData)
+    console.debug('Pushed audio job to queue.')
+}
+
+async function processAudioJobQueue() {
+    // Nothing to do, audio not completed, or audio paused - stop processing.
+    if (audioJobQueue.length == 0 || !audioQueueProcessorReady || audioPaused) {
+        return
+    }
+    try {
+        audioQueueProcessorReady = false
+        currentAudioJob = audioJobQueue.pop()
+        playAudioData(currentAudioJob)
+    } catch (error) {
+        console.error(error)
+        audioQueueProcessorReady = true
+    }
+}
+
+//################//
+//  TTS Control   //
+//################//
+
+let ttsJobQueue = []
+let currentTtsJob // Null if nothing is currently being processed
+let currentMessageNumber = 0
+
+function completeTtsJob() {
+    console.info(`Current TTS job for ${currentTtsJob.name} completed.`)
+    currentTtsJob = null
+}
+
+function saveLastValues() {
+    const context = getContext()
+    lastGroupId = context.groupId
+    lastCharacterId = context.characterId
+    lastChatId = context.chatId
+    lastMessageHash = getStringHash(
+        (context.chat.length && context.chat[context.chat.length - 1].mes) ?? ''
+    )
+}
+
+async function tts(text, voiceId) {
+    const response = await ttsProvider.generateTts(text, voiceId)
+    addAudioJob(response)
+    completeTtsJob()
+}
+
+async function processTtsQueue() {
+    // Called each moduleWorker iteration to pull chat messages from queue
+    if (currentTtsJob || ttsJobQueue.length <= 0 || audioPaused) {
+        return
+    }
+
+    console.debug('New message found, running TTS')
+    currentTtsJob = ttsJobQueue.shift()
+    let text = extension_settings.tts.narrate_translated_only ? currentTtsJob?.extra?.display_text : currentTtsJob.mes
+    text = extension_settings.tts.narrate_dialogues_only
+        ? text.replace(/\*[^\*]*?(\*|$)/g, '').trim() // remove asterisks content
+        : text.replaceAll('*', '').trim() // remove just the asterisks
+
+    if (extension_settings.tts.narrate_quoted_only) {
+        const special_quotes = /[“”]/g; // Extend this regex to include other special quotes
+        text = text.replace(special_quotes, '"');
+        const matches = text.match(/".*?"/g); // Matches text inside double quotes, non-greedily
+        const partJoiner = (ttsProvider?.separator || ' ... ');
+        text = matches ? matches.join(partJoiner) : text;
+    }
+    console.log(`TTS: ${text}`)
+    const char = currentTtsJob.name
+
+    // Remove character name from start of the line if power user setting is disabled
+    if (char && !power_user.allow_name2_display) {
+        const escapedChar = escapeRegex(char);
+        text = text.replace(new RegExp(`^${escapedChar}:`, 'gm'), '');
+    }
+
+    try {
+        if (!text) {
+            console.warn('Got empty text in TTS queue job.');
+            completeTtsJob()
+            return;
+        }
+
+        if (!voiceMap[char]) {
+            throw `${char} not in voicemap. Configure character in extension settings voice map`
+        }
+        const voice = await ttsProvider.getVoice((voiceMap[char]))
+        const voiceId = voice.voice_id
+        if (voiceId == null) {
+            toastr.error(`Specified voice for ${char} was not found. Check the TTS extension settings.`)
+            throw `Unable to attain voiceId for ${char}`
+        }
+        tts(text, voiceId)
+    } catch (error) {
+        console.error(error)
+        currentTtsJob = null
+    }
+}
+
+// Secret function for now
+async function playFullConversation() {
+    const context = getContext()
+    const chat = context.chat
+    ttsJobQueue = chat
+}
+window.playFullConversation = playFullConversation
+
+//#############################//
+//  Extension UI and Settings  //
+//#############################//
+
+function loadSettings() {
+    if (Object.keys(extension_settings.tts).length === 0) {
+        Object.assign(extension_settings.tts, defaultSettings)
+    }
+    $('#tts_enabled').prop(
+        'checked',
+        extension_settings.tts.enabled
+    )
+    $('#tts_narrate_dialogues').prop('checked', extension_settings.tts.narrate_dialogues_only)
+    $('#tts_narrate_quoted').prop('checked', extension_settings.tts.narrate_quoted_only)
+    $('#tts_auto_generation').prop('checked', extension_settings.tts.auto_generation)
+    $('#tts_narrate_translated_only').prop('checked', extension_settings.tts.narrate_translated_only);
+    $('body').toggleClass('tts', extension_settings.tts.enabled);
+}
+
+const defaultSettings = {
+    voiceMap: '',
+    ttsEnabled: false,
+    currentProvider: "ElevenLabs",
+    auto_generation: true
+}
+
+function setTtsStatus(status, success) {
+    $('#tts_status').text(status)
+    if (success) {
+        $('#tts_status').removeAttr('style')
+    } else {
+        $('#tts_status').css('color', 'red')
+    }
+}
+
+function parseVoiceMap(voiceMapString) {
+    let parsedVoiceMap = {}
+    for (const [charName, voiceId] of voiceMapString
+        .split(',')
+        .map(s => s.split(':'))) {
+        if (charName && voiceId) {
+            parsedVoiceMap[charName.trim()] = voiceId.trim()
+        }
+    }
+    return parsedVoiceMap
+}
+
+async function voicemapIsValid(parsedVoiceMap) {
+    let valid = true
+    for (const characterName in parsedVoiceMap) {
+        const parsedVoiceName = parsedVoiceMap[characterName]
+        try {
+            await ttsProvider.getVoice(parsedVoiceName)
+        } catch (error) {
+            console.error(error)
+            valid = false
+        }
+    }
+    return valid
+}
+
+async function updateVoiceMap() {
+    let isValidResult = false
+
+    const value = $('#tts_voice_map').val()
+    const parsedVoiceMap = parseVoiceMap(value)
+
+    isValidResult = await voicemapIsValid(parsedVoiceMap)
+    if (isValidResult) {
+        ttsProvider.settings.voiceMap = String(value)
+        // console.debug(`ttsProvider.voiceMap: ${ttsProvider.settings.voiceMap}`)
+        voiceMap = parsedVoiceMap
+        console.debug(`Saved new voiceMap: ${value}`)
+        saveSettingsDebounced()
+    } else {
+        throw 'Voice map is invalid, check console for errors'
+    }
+}
+
+function onApplyClick() {
+    Promise.all([
+        ttsProvider.onApplyClick(),
+        updateVoiceMap()
+    ]).then(() => {
+        extension_settings.tts[ttsProviderName] = ttsProvider.settings
+        saveSettingsDebounced()
+        setTtsStatus('Successfully applied settings', true)
+        console.info(`Saved settings ${ttsProviderName} ${JSON.stringify(ttsProvider.settings)}`)
+    }).catch(error => {
+        console.error(error)
+        setTtsStatus(error, false)
+    })
+}
+
+function onEnableClick() {
+    extension_settings.tts.enabled = $('#tts_enabled').is(
+        ':checked'
+    )
+    updateUiAudioPlayState()
+    saveSettingsDebounced()
+}
+
+function onAutoGenerationClick() {
+    extension_settings.tts.auto_generation = $('#tts_auto_generation').prop('checked');
+    saveSettingsDebounced()
+}
+
+
+function onNarrateDialoguesClick() {
+    extension_settings.tts.narrate_dialogues_only = $('#tts_narrate_dialogues').prop('checked');
+    saveSettingsDebounced()
+}
+
+
+function onNarrateQuotedClick() {
+    extension_settings.tts.narrate_quoted_only = $('#tts_narrate_quoted').prop('checked');
+    saveSettingsDebounced()
+}
+
+
+function onNarrateTranslatedOnlyClick() {
+    extension_settings.tts.narrate_translated_only = $('#tts_narrate_translated_only').prop('checked');
+    saveSettingsDebounced();
+}
+
+//##############//
+// TTS Provider //
+//##############//
+
+function loadTtsProvider(provider) {
+    //Clear the current config and add new config
+    $("#tts_provider_settings").html("")
+
+    if (!provider) {
+        provider
+    }
+    // Init provider references
+    extension_settings.tts.currentProvider = provider
+    ttsProviderName = provider
+    ttsProvider = new ttsProviders[provider]
+
+    // Init provider settings
+    $('#tts_provider_settings').append(ttsProvider.settingsHtml)
+    if (!(ttsProviderName in extension_settings.tts)) {
+        console.warn(`Provider ${ttsProviderName} not in Extension Settings, initiatilizing provider in settings`)
+        extension_settings.tts[ttsProviderName] = {}
+    }
+
+    // Load voicemap settings
+    let voiceMapFromSettings
+    if ("voiceMap" in extension_settings.tts[ttsProviderName]) {
+        voiceMapFromSettings = extension_settings.tts[ttsProviderName].voiceMap
+        voiceMap = parseVoiceMap(voiceMapFromSettings)
+    } else {
+        voiceMapFromSettings = ""
+        voiceMap = {}
+    }
+    $('#tts_voice_map').val(voiceMapFromSettings)
+    $('#tts_provider').val(ttsProviderName)
+
+    ttsProvider.loadSettings(extension_settings.tts[ttsProviderName])
+}
+
+function onTtsProviderChange() {
+    const ttsProviderSelection = $('#tts_provider').val()
+    loadTtsProvider(ttsProviderSelection)
+}
+
+function onTtsProviderSettingsInput() {
+    ttsProvider.onSettingsChange()
+
+    // Persist changes to SillyTavern tts extension settings
+
+    extension_settings.tts[ttsProviderName] = ttsProvider.setttings
+    saveSettingsDebounced()
+    console.info(`Saved settings ${ttsProviderName} ${JSON.stringify(ttsProvider.settings)}`)
+}
+
+
+
+$(document).ready(function () {
+    function addExtensionControls() {
+        const settingsHtml = `
+        <div id="tts_settings">
+            <div class="inline-drawer">
+                <div class="inline-drawer-toggle inline-drawer-header">
+                    <b>TTS</b>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                </div>
+                <div class="inline-drawer-content">
+                    <div>
+                        <span>Select TTS Provider</span> </br>
+                        <select id="tts_provider">
+                        </select>
+                    </div>
+                    <div>
+                        <label class="checkbox_label" for="tts_enabled">
+                            <input type="checkbox" id="tts_enabled" name="tts_enabled">
+                            <small>Enabled</small>
+                        </label>
+                        <label class="checkbox_label" for="tts_auto_generation">
+                            <input type="checkbox" id="tts_auto_generation">
+                            <small>Auto Generation</small>
+                        </label>
+                        <label class="checkbox_label" for="tts_narrate_quoted">
+                            <input type="checkbox" id="tts_narrate_quoted">
+                            <small>Only narrate "quotes"</small>
+                        </label>
+                        <label class="checkbox_label" for="tts_narrate_dialogues">
+                            <input type="checkbox" id="tts_narrate_dialogues">
+                            <small>Ignore *text, even "quotes", inside asterisks*</small>
+                        </label>
+                        <label class="checkbox_label" for="tts_narrate_translated_only">
+                            <input type="checkbox" id="tts_narrate_translated_only">
+                            <small>Narrate only the translated text</small>
+                        </label>
+                    </div>
+                    <label>Voice Map</label>
+                    <textarea id="tts_voice_map" type="text" class="text_pole textarea_compact" rows="4"
+                        placeholder="Enter comma separated map of charName:ttsName. Example: \nAqua:Bella,\nYou:Josh,"></textarea>
+
+                    <div id="tts_status">
+                    </div>
+                    <form id="tts_provider_settings" class="inline-drawer-content">
+                    </form>
+                    <div class="tts_buttons">
+                        <input id="tts_apply" class="menu_button" type="submit" value="Apply" />
+                        <input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        `
+        $('#extensions_settings').append(settingsHtml)
+        $('#tts_apply').on('click', onApplyClick)
+        $('#tts_enabled').on('click', onEnableClick)
+        $('#tts_narrate_dialogues').on('click', onNarrateDialoguesClick);
+        $('#tts_narrate_quoted').on('click', onNarrateQuotedClick);
+        $('#tts_narrate_translated_only').on('click', onNarrateTranslatedOnlyClick);
+        $('#tts_auto_generation').on('click', onAutoGenerationClick);
+        $('#tts_voices').on('click', onTtsVoicesClick)
+        $('#tts_provider_settings').on('input', onTtsProviderSettingsInput)
+        for (const provider in ttsProviders) {
+            $('#tts_provider').append($("<option />").val(provider).text(provider))
+        }
+        $('#tts_provider').on('change', onTtsProviderChange)
+        $(document).on('click', '.mes_narrate', onNarrateOneMessage);
+    }
+    addExtensionControls() // No init dependencies
+    loadSettings() // Depends on Extension Controls and loadTtsProvider
+    loadTtsProvider(extension_settings.tts.currentProvider) // No dependencies
+    addAudioControl() // Depends on Extension Controls
+    const wrapper = new ModuleWorkerWrapper(moduleWorker);
+    setInterval(wrapper.update.bind(wrapper), UPDATE_INTERVAL) // Init depends on all the things
+    eventSource.on(event_types.MESSAGE_SWIPED, resetTtsPlayback);
+})

public/scripts/extensions/tts/manifest.json

@@ -0,0 +1,14 @@
+{
+    "display_name": "TTS",
+    "loading_order": 10,
+    "requires": [],
+    "optional": [
+        "silero-tts",
+        "edge-tts"
+    ],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Ouoertheo#7264",
+    "version": "1.0.0",
+    "homePage": "None"
+}

public/scripts/extensions/tts/novel.js

@@ -0,0 +1,130 @@
+import { getRequestHeaders } from "../../../script.js"
+import { getPreviewString } from "./index.js"
+
+export { NovelTtsProvider }
+
+class NovelTtsProvider {
+    //########//
+    // Config //
+    //########//
+
+    settings
+    voices = []
+    separator = ' . '
+    audioElement = document.createElement('audio')
+
+    defaultSettings = {
+        voiceMap: {}
+    }
+
+    get settingsHtml() {
+        let html = `Use NovelAI's TTS engine.<br>
+        The Voice IDs in the preview list are only examples, as it can be any string of text. Feel free to try different options!<br>
+        <small><i>Hint: Save an API key in the NovelAI API settings to use it here.</i></small>`;
+        return html;
+    }
+
+    onSettingsChange() {
+    }
+
+    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}`
+            }
+        }
+
+        console.info("Settings loaded")
+    }
+
+
+    async onApplyClick() {
+        return
+    }
+
+    //#################//
+    //  TTS Interfaces //
+    //#################//
+
+    async getVoice(voiceName) {
+        if (!voiceName) {
+            throw `TTS Voice name not provided`
+        }
+
+        return { name: voiceName, voice_id: voiceName, lang: 'en-US', preview_url: false}
+    }
+
+    async generateTts(text, voiceId) {
+        const response = await this.fetchTtsGeneration(text, voiceId)
+        return response
+    }
+
+    //###########//
+    // API CALLS //
+    //###########//
+    async fetchTtsVoiceIds() {
+        const voices = [
+            { name: 'Ligeia', voice_id: 'Ligeia', lang: 'en-US', preview_url: false },
+            { name: 'Aini', voice_id: 'Aini', lang: 'en-US', preview_url: false },
+            { name: 'Orea', voice_id: 'Orea', lang: 'en-US', preview_url: false },
+            { name: 'Claea', voice_id: 'Claea', lang: 'en-US', preview_url: false },
+            { name: 'Lim', voice_id: 'Lim', lang: 'en-US', preview_url: false },
+            { name: 'Aurae', voice_id: 'Aurae', lang: 'en-US', preview_url: false },
+            { name: 'Naia', voice_id: 'Naia', lang: 'en-US', preview_url: false },
+            { name: 'Aulon', voice_id: 'Aulon', lang: 'en-US', preview_url: false },
+            { name: 'Elei', voice_id: 'Elei', lang: 'en-US', preview_url: false },
+            { name: 'Ogma', voice_id: 'Ogma', lang: 'en-US', preview_url: false },
+            { name: 'Raid', voice_id: 'Raid', lang: 'en-US', preview_url: false },
+            { name: 'Pega', voice_id: 'Pega', lang: 'en-US', preview_url: false },
+            { name: 'Lam', voice_id: 'Lam', lang: 'en-US', preview_url: false },
+        ];
+
+        return voices;
+    }
+
+
+    async previewTtsVoice(id) {
+        this.audioElement.pause();
+        this.audioElement.currentTime = 0;
+
+        const text = getPreviewString('en-US')
+        const response = await this.fetchTtsGeneration(text, id)
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`)
+        }
+
+        const audio = await response.blob();
+        const url = URL.createObjectURL(audio);
+        this.audioElement.src = url;
+        this.audioElement.play();
+    }
+
+    async fetchTtsGeneration(inputText, voiceId) {
+        console.info(`Generating new TTS for voice_id ${voiceId}`)
+        const response = await fetch(`/novel_tts`,
+            {
+                method: 'POST',
+                headers: getRequestHeaders(),
+                body: JSON.stringify({
+                    "text": inputText,
+                    "voice": voiceId,
+                })
+            }
+        )
+        if (!response.ok) {
+            toastr.error(response.statusText, 'TTS Generation Failed');
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+        return response
+    }
+}

public/scripts/extensions/tts/silerotts.js

@@ -0,0 +1,133 @@
+import { doExtrasFetch, getApiUrl, modules } from "../../extensions.js"
+
+export { SileroTtsProvider }
+
+class SileroTtsProvider {
+    //########//
+    // Config //
+    //########//
+
+    settings
+    voices = []
+    separator = ' .. '
+
+    defaultSettings = {
+        provider_endpoint: "http://localhost:8001/tts",
+        voiceMap: {}
+    }
+
+    get settingsHtml() {
+        let html = `
+        <label for="silero_tts_endpoint">Provider Endpoint:</label>
+        <input id="silero_tts_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/>
+        <span>
+        <span>Use <a target="_blank" href="https://github.com/SillyTavern/SillyTavern-extras">SillyTavern Extras API</a> or <a target="_blank" href="https://github.com/ouoertheo/silero-api-server">Silero TTS Server</a>.</span>
+        `
+        return html
+    }
+
+    onSettingsChange() {
+        // Used when provider settings are updated from UI
+        this.settings.provider_endpoint = $('#silero_tts_endpoint').val()
+    }
+
+    loadSettings(settings) {
+        // Pupulate 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}`
+            }
+        }
+
+        const apiCheckInterval = setInterval(() => {
+            // Use Extras API if TTS support is enabled
+            if (modules.includes('tts') || modules.includes('silero-tts')) {
+                const baseUrl = new URL(getApiUrl());
+                baseUrl.pathname = '/api/tts';
+                this.settings.provider_endpoint = baseUrl.toString();
+                $('#silero_tts_endpoint').val(this.settings.provider_endpoint);
+                clearInterval(apiCheckInterval);
+            }
+        }, 2000);
+
+        $('#silero_tts_endpoint').val(this.settings.provider_endpoint)
+        console.info("Settings loaded")
+    }
+
+
+    async onApplyClick() {
+        return
+    }
+
+    //#################//
+    //  TTS Interfaces //
+    //#################//
+
+    async getVoice(voiceName) {
+        if (this.voices.length == 0) {
+            this.voices = await this.fetchTtsVoiceIds()
+        }
+        const match = this.voices.filter(
+            sileroVoice => sileroVoice.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 fetchTtsVoiceIds() {
+        const response = await doExtrasFetch(`${this.settings.provider_endpoint}/speakers`)
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${await response.json()}`)
+        }
+        const responseJson = await response.json()
+        return responseJson
+    }
+
+    async fetchTtsGeneration(inputText, voiceId) {
+        console.info(`Generating new TTS for voice_id ${voiceId}`)
+        const response = await doExtrasFetch(
+            `${this.settings.provider_endpoint}/generate`,
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+					'Cache-Control': 'no-cache'  // Added this line to disable caching of file so new files are always played - Rolyat 7/7/23
+                },
+                body: JSON.stringify({
+                    "text": inputText,
+                    "speaker": voiceId
+                })
+            }
+        )
+        if (!response.ok) {
+            toastr.error(response.statusText, 'TTS Generation Failed');
+            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
+        }
+        return response
+    }
+
+    // Interface not used by Silero TTS
+    async fetchTtsFromHistory(history_item_id) {
+        return Promise.resolve(history_item_id);
+    }
+
+}

public/scripts/extensions/tts/style.css

@@ -0,0 +1,53 @@
+#tts_media_control {
+    /* order: 100; */
+    /*     width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 1px; */
+    outline: none;
+    border: none;
+    cursor: pointer;
+    /*     transition: 0.3s;
+    opacity: 0.7; */
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+
+}
+
+#ttsExtensionMenuItem {
+    transition: 0.3s;
+    opacity: 0.7;
+}
+
+#ttsExtensionMenuItem:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
+#tts_media_control:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
+.voice_preview {
+    margin: 0.25rem 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.voice_preview .voice_name {
+    text-align: left;
+    flex: 1;
+}
+
+.voice_preview .voice_lang {
+    width: 4rem;
+    text-align: left;
+}
+
+.voice_preview .fa-play {
+    cursor: pointer;
+}

public/scripts/extensions/tts/system.js

@@ -0,0 +1,227 @@
+import { isMobile } from "../../RossAscends-mods.js";
+import { getPreviewString } from "./index.js";
+
+export { SystemTtsProvider }
+
+/**
+ * Chunkify
+ * Google Chrome Speech Synthesis Chunking Pattern
+ * Fixes inconsistencies with speaking long texts in speechUtterance objects
+ * Licensed under the MIT License
+ *
+ * Peter Woolley and Brett Zamir
+ * Modified by Haaris for bug fixes
+ */
+
+var speechUtteranceChunker = function (utt, settings, callback) {
+    settings = settings || {};
+    var newUtt;
+    var txt = (settings && settings.offset !== undefined ? utt.text.substring(settings.offset) : utt.text);
+    if (utt.voice && utt.voice.voiceURI === 'native') { // Not part of the spec
+        newUtt = utt;
+        newUtt.text = txt;
+        newUtt.addEventListener('end', function () {
+            if (speechUtteranceChunker.cancel) {
+                speechUtteranceChunker.cancel = false;
+            }
+            if (callback !== undefined) {
+                callback();
+            }
+        });
+    }
+    else {
+        var chunkLength = (settings && settings.chunkLength) || 160;
+        var pattRegex = new RegExp('^[\\s\\S]{' + Math.floor(chunkLength / 2) + ',' + chunkLength + '}[.!?,]{1}|^[\\s\\S]{1,' + chunkLength + '}$|^[\\s\\S]{1,' + chunkLength + '} ');
+        var chunkArr = txt.match(pattRegex);
+
+        if (chunkArr == null || chunkArr[0] === undefined || chunkArr[0].length <= 2) {
+            //call once all text has been spoken...
+            if (callback !== undefined) {
+                callback();
+            }
+            return;
+        }
+        var chunk = chunkArr[0];
+        newUtt = new SpeechSynthesisUtterance(chunk);
+        var x;
+        for (x in utt) {
+            if (utt.hasOwnProperty(x) && x !== 'text') {
+                newUtt[x] = utt[x];
+            }
+        }
+        newUtt.lang = utt.lang;
+        newUtt.voice = utt.voice;
+        newUtt.addEventListener('end', function () {
+            if (speechUtteranceChunker.cancel) {
+                speechUtteranceChunker.cancel = false;
+                return;
+            }
+            settings.offset = settings.offset || 0;
+            settings.offset += chunk.length;
+            speechUtteranceChunker(utt, settings, callback);
+        });
+    }
+
+    if (settings.modifier) {
+        settings.modifier(newUtt);
+    }
+    console.log(newUtt); //IMPORTANT!! Do not remove: Logging the object out fixes some onend firing issues.
+    //placing the speak invocation inside a callback fixes ordering and onend issues.
+    setTimeout(function () {
+        speechSynthesis.speak(newUtt);
+    }, 0);
+};
+
+class SystemTtsProvider {
+    //########//
+    // Config //
+    //########//
+
+    settings
+    voices = []
+    separator = ' ... '
+
+    defaultSettings = {
+        voiceMap: {},
+        rate: 1,
+        pitch: 1,
+    }
+
+    get settingsHtml() {
+        if (!('speechSynthesis' in window)) {
+            return "Your browser or operating system doesn't support speech synthesis";
+        }
+
+        return `<p>Uses the voices provided by your operating system</p>
+        <label for="system_tts_rate">Rate: <span id="system_tts_rate_output"></span></label>
+        <input id="system_tts_rate" type="range" value="${this.defaultSettings.rate}" min="0.5" max="2" step="0.1" />
+        <label for="system_tts_pitch">Pitch: <span id="system_tts_pitch_output"></span></label>
+        <input id="system_tts_pitch" type="range" value="${this.defaultSettings.pitch}" min="0" max="2" step="0.1" />`;
+    }
+
+    onSettingsChange() {
+        this.settings.rate = Number($('#system_tts_rate').val());
+        this.settings.pitch = Number($('#system_tts_pitch').val());
+        $('#system_tts_pitch_output').text(this.settings.pitch);
+        $('#system_tts_rate_output').text(this.settings.rate);
+        console.log('Save changes');
+    }
+
+    loadSettings(settings) {
+        // Populate Provider UI given input settings
+        if (Object.keys(settings).length == 0) {
+            console.info("Using default TTS Provider settings");
+        }
+
+        // iOS should only allows speech synthesis trigged by user interaction
+        if (isMobile()) {
+            let hasEnabledVoice = false;
+
+            document.addEventListener('click', () => {
+                if (hasEnabledVoice) {
+                    return;
+                }
+                const utterance = new SpeechSynthesisUtterance('hi');
+                utterance.volume = 0;
+                speechSynthesis.speak(utterance);
+                hasEnabledVoice = true;
+            });
+        }
+
+        // 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}`;
+            }
+        }
+
+        $('#system_tts_rate').val(this.settings.rate || this.defaultSettings.rate);
+        $('#system_tts_pitch').val(this.settings.pitch || this.defaultSettings.pitch);
+        $('#system_tts_pitch_output').text(this.settings.pitch);
+        $('#system_tts_rate_output').text(this.settings.rate);
+        console.info("Settings loaded");
+    }
+
+    async onApplyClick() {
+        return
+    }
+
+    //#################//
+    //  TTS Interfaces //
+    //#################//
+    fetchTtsVoiceIds() {
+        if (!('speechSynthesis' in window)) {
+            return [];
+        }
+
+        return speechSynthesis
+            .getVoices()
+            .sort((a, b) => a.lang.localeCompare(b.lang) || a.name.localeCompare(b.name))
+            .map(x => ({ name: x.name, voice_id: x.voiceURI, preview_url: false, lang: x.lang }));
+    }
+
+    previewTtsVoice(voiceId) {
+        if (!('speechSynthesis' in window)) {
+            throw 'Speech synthesis API is not supported';
+        }
+
+        const voice = speechSynthesis.getVoices().find(x => x.voiceURI === voiceId);
+
+        if (!voice) {
+            throw `TTS Voice name ${voiceName} not found`
+        }
+
+        speechSynthesis.cancel();
+        const text = getPreviewString(voice.lang);
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.voice = voice;
+        utterance.rate = 1;
+        utterance.pitch = 1;
+        speechSynthesis.speak(utterance);
+    }
+
+    async getVoice(voiceName) {
+        if (!('speechSynthesis' in window)) {
+            return { voice_id: null }
+        }
+
+        const voices = speechSynthesis.getVoices();
+        const match = voices.find(x => x.name == voiceName);
+
+        if (!match) {
+            throw `TTS Voice name ${voiceName} not found`
+        }
+
+        return { voice_id: match.voiceURI, name: match.name };
+    }
+
+    async generateTts(text, voiceId) {
+        if (!('speechSynthesis' in window)) {
+            throw 'Speech synthesis API is not supported';
+        }
+
+        const silence = await fetch('/sounds/silence.mp3');
+
+        return new Promise((resolve, reject) => {
+            const voices = speechSynthesis.getVoices();
+            const voice = voices.find(x => x.voiceURI === voiceId);
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.voice = voice;
+            utterance.rate = this.settings.rate || 1;
+            utterance.pitch = this.settings.pitch || 1;
+            utterance.onend = () => resolve(silence);
+            utterance.onerror = () => reject();
+            speechUtteranceChunker(utterance, {
+                chunkLength: 200,
+            }, function () {
+                //some code to execute when done
+                resolve(silence);
+                console.log('System TTS done');
+            });
+        });
+    }
+}