merge

2025-06-05 21:59:27 +02:00 · 2023-08-22 21:17:18 +10:00
parent 7ecc0295dc e2bac7ec5f
commit 06902279a9
53 changed files with 2235 additions and 1257 deletions
--- a/public/scripts/PromptManager.js
+++ b/public/scripts/PromptManager.js
@@ -1,3 +1,5 @@
+"use strict";
+
 import { callPopup, event_types, eventSource, is_send_press, main_api, substituteParams } from "../script.js";
 import { is_group_generating } from "./group-chats.js";
 import { TokenHandler } from "./openai.js";
@@ -271,6 +273,8 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
    this.serviceSettings = serviceSettings;
    this.containerElement = document.getElementById(this.configuration.containerIdentifier);

+    if ('global' === this.configuration.promptOrder.strategy) this.activeCharacter = {id: this.configuration.promptOrder.dummyId};
+
    this.sanitizeServiceSettings();

    // Enable and disable prompts
@@ -590,7 +594,7 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
 PromptManagerModule.prototype.render = function (afterTryGenerate = true) {
    if (main_api !== 'openai') return;

-    if (null === this.activeCharacter) return;
+    if ('character' === this.configuration.promptOrder.strategy && null === this.activeCharacter) return;
    this.error = null;

    waitUntilCondition(() => !is_send_press && !is_group_generating, 1024 * 1024, 100).then(() => {
@@ -604,6 +608,11 @@ PromptManagerModule.prototype.render = function (afterTryGenerate = true) {
                this.renderPromptManagerListItems()
                this.makeDraggable();
                this.profileEnd('render');
+            }).catch(error => {
+                this.log('Error caught during render: ' + error);
+                this.renderPromptManager();
+                this.renderPromptManagerListItems()
+                this.makeDraggable();
            });
        } else {
            // Executed during live communication
@@ -1155,7 +1164,6 @@ PromptManagerModule.prototype.setChatCompletion = function (chatCompletion) {

    this.setMessages(messages);
    this.populateTokenCounts(messages);
-    this.populateLegacyTokenCounts(messages);
 }

 /**
@@ -1185,7 +1193,7 @@ PromptManagerModule.prototype.populateTokenCounts = function (messages) {
 PromptManagerModule.prototype.populateLegacyTokenCounts = function (messages) {
    // Update general token counts
    const chatHistory = messages.getItemByIdentifier('chatHistory');
-    const startChat = chatHistory?.getCollection()[0].getTokens() || 0;
+    const startChat = chatHistory?.getCollection()[0]?.getTokens() || 0;
    const continueNudge = chatHistory?.getCollection().find(message => message.identifier === 'continueNudge')?.getTokens() || 0;

    this.tokenHandler.counts = {
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -22,11 +22,6 @@ import {
    selectCharacterById,
 } from "../script.js";

-import {
-    characterStatsHandler,
-} from "./stats.js";
-
-
 import {
    power_user,
    send_on_enter_options,
@@ -38,11 +33,9 @@ import {
    SECRET_KEYS,
    secret_state,
 } from "./secrets.js";
-import { debounce, delay } from "./utils.js";
+import { debounce, delay, getStringHash, waitUntilCondition } from "./utils.js";
 import { chat_completion_sources, oai_settings } from "./openai.js";

-var NavToggle = document.getElementById("nav-toggle");
-
 var RPanelPin = document.getElementById("rm_button_panel_pin");
 var LPanelPin = document.getElementById("lm_button_panel_pin");
 var WIPanelPin = document.getElementById("WI_panel_pin");
@@ -52,20 +45,8 @@ var LeftNavPanel = document.getElementById("left-nav-panel");
 var WorldInfo = document.getElementById("WorldInfo");

 var SelectedCharacterTab = document.getElementById("rm_button_selected_ch");
-var AdvancedCharDefsPopup = document.getElementById("character_popup");
-var ConfirmationPopup = document.getElementById("dialogue_popup");
 var AutoConnectCheckbox = document.getElementById("auto-connect-checkbox");
 var AutoLoadChatCheckbox = document.getElementById("auto-load-chat-checkbox");
-var SelectedNavTab = ("#" + LoadLocal('SelectedNavTab'));
-
-var create_save_name;
-var create_save_description;
-var create_save_personality;
-var create_save_first_message;
-var create_save_scenario;
-var create_save_mes_example;
-var count_tokens;
-var perm_tokens;

 var connection_made = false;
 var retry_delay = 500;
@@ -88,32 +69,6 @@ const observer = new MutationObserver(function (mutations) {

 observer.observe(document.documentElement, observerConfig);

-/**
- * Wait for an element before resolving a promise
- * @param {String} querySelector - Selector of element to wait for
- * @param {Integer} timeout - Milliseconds to wait before timing out, or 0 for no timeout
- */
-function waitForElement(querySelector, timeout) {
-    return new Promise((resolve, reject) => {
-        var timer = false;
-        if (document.querySelectorAll(querySelector).length) return resolve();
-        const observer = new MutationObserver(() => {
-            if (document.querySelectorAll(querySelector).length) {
-                observer.disconnect();
-                if (timer !== false) clearTimeout(timer);
-                return resolve();
-            }
-        });
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true
-        });
-        if (timeout) timer = setTimeout(() => {
-            observer.disconnect();
-            reject();
-        }, timeout);
-    });
-}

 /**
 * Converts generation time from milliseconds to a human-readable format.
@@ -230,15 +185,6 @@ export function getMessageTimeStamp() {
 // triggers:
 $("#rm_button_create").on("click", function () {                 //when "+New Character" is clicked
    $(SelectedCharacterTab).children("h2").html('');        // empty nav's 3rd panel tab
-
-    //empty temp vars to store new char data for counting
-    create_save_name = "";
-    create_save_description = "";
-    create_save_personality = "";
-    create_save_first_message = "";
-    create_save_scenario = "";
-    create_save_mes_example = "";
-    $("#result_info").html('Type to start counting tokens!');
 });
 //when any input is made to the create/edit character form textareas
 $("#rm_ch_create_block").on("input", function () { countTokensDebounced(); });
@@ -246,96 +192,41 @@ $("#rm_ch_create_block").on("input", function () { countTokensDebounced(); });
 $("#character_popup").on("input", function () { countTokensDebounced(); });
 //function:
 export function RA_CountCharTokens() {
-    //console.log('RA_TC -- starting with this_chid = ' + this_chid);
-    if (menu_type === "create") {            //if new char
-        function saveFormVariables() {
-            create_save_name = $("#character_name_pole").val();
-            create_save_description = $("#description_textarea").val();
-            create_save_first_message = $("#firstmessage_textarea").val();
+    let total_tokens = 0;
+
+    $('[data-token-counter]').each(function () {
+        const counter = $(this);
+        const input = $(document.getElementById(counter.data('token-counter')));
+        const value = input.val();
+
+        if (input.length === 0) {
+            counter.text('Invalid input reference');
+            return;
        }

-        function savePopupVariables() {
-            create_save_personality = $("#personality_textarea").val();
-            create_save_scenario = $("#scenario_pole").val();
-            create_save_mes_example = $("#mes_example_textarea").val();
+        if (!value) {
+            counter.text(0);
+            return;
        }

-        saveFormVariables();
-        savePopupVariables();
+        const valueHash = getStringHash(value);

-        //count total tokens, including those that will be removed from context once chat history is long
-        let count_string = [
-            create_save_name,
-            create_save_description,
-            create_save_personality,
-            create_save_scenario,
-            create_save_first_message,
-            create_save_mes_example,
-        ].join('\n').replace(/\r/gm, '').trim();
-        count_tokens = getTokenCount(count_string);
-
-        //count permanent tokens that will never get flushed out of context
-        let perm_string = [
-            create_save_name,
-            create_save_description,
-            create_save_personality,
-            create_save_scenario,
-            // add examples to permanent if they are pinned
-            (power_user.pin_examples ? create_save_mes_example : ''),
-        ].join('\n').replace(/\r/gm, '').trim();
-        perm_tokens = getTokenCount(perm_string);
-
-    } else {
-        if (this_chid !== undefined && this_chid !== "invalid-safety-id") {    // if we are counting a valid pre-saved char
-
-            //same as above, all tokens including temporary ones
-            let count_string = [
-                characters[this_chid].description,
-                characters[this_chid].personality,
-                characters[this_chid].scenario,
-                characters[this_chid].first_mes,
-                characters[this_chid].mes_example,
-            ].join('\n').replace(/\r/gm, '').trim();
-            count_tokens = getTokenCount(count_string);
-
-            //permanent tokens count
-            let perm_string = [
-                characters[this_chid].name,
-                characters[this_chid].description,
-                characters[this_chid].personality,
-                characters[this_chid].scenario,
-                // add examples to permanent if they are pinned
-                (power_user.pin_examples ? characters[this_chid].mes_example : ''),
-            ].join('\n').replace(/\r/gm, '').trim();
-            perm_tokens = getTokenCount(perm_string);
-            // if neither, probably safety char or some error in loading
-        } else { console.debug("RA_TC -- no valid char found, closing."); }
-    }
-    //label rm_stats_button with a tooltip indicating stats
-    $("#result_info").html(`<small>${count_tokens} Tokens (${perm_tokens} Permanent)</small>
-
-    <i title='Click for stats!' class="fa-solid fa-circle-info rm_stats_button"></i>`);
-    // display the counted tokens
-    const tokenLimit = Math.max(((main_api !== 'openai' ? max_context : oai_settings.openai_max_context) / 2), 1024);
-    if (count_tokens < tokenLimit && perm_tokens < tokenLimit) {
-
-    } else {
-        $("#result_info").html(`
-        <div class="flex-container alignitemscenter">
-            <div class="flex-container flexnowrap flexNoGap">
-                <small class="flex-container flexnowrap flexNoGap">
-                    <div class="neutral_warning">${count_tokens}</div>&nbsp;Tokens (<div class="neutral_warning">${perm_tokens}</div><div>&nbsp;Permanent)</div>
-                </small>
-                <i title='Click for stats!' class="fa-solid fa-circle-info rm_stats_button"></i>
-            </div>
-            <div id="chartokenwarning" class="menu_button margin0 whitespacenowrap"><a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-tokens" target="_blank">About Token 'Limits'</a></div>
-        </div>`);
-
-
-    } //warn if either are over 1024
-    $(".rm_stats_button").on('click', function () {
-        characterStatsHandler(characters, this_chid);
+        if (input.data('last-value-hash') === valueHash) {
+            total_tokens += Number(counter.text());
+        } else {
+            const tokens = getTokenCount(value);
+            counter.text(tokens);
+            total_tokens += tokens;
+            input.data('last-value-hash', valueHash);
+        }
    });
+
+    // Warn if total tokens exceeds the limit of half the max context
+    const tokenLimit = Math.max(((main_api !== 'openai' ? max_context : oai_settings.openai_max_context) / 2), 1024);
+    const showWarning = (total_tokens > tokenLimit);
+    $('#result_info_total_tokens').text(total_tokens);
+    $('#result_info_text').toggleClass('neutral_warning', showWarning);
+    $('#chartokenwarning').toggle(showWarning);
 }
 /**
 * Auto load chat with the last active character or group.
@@ -778,7 +669,12 @@ export async function initMovingUI() {

 // ---------------------------------------------------

-$("document").ready(function () {
+jQuery(async function () {
+    try {
+        await waitUntilCondition(() => online_status !== undefined, 1000, 10);
+    } catch {
+        console.log('Timeout waiting for online_status');
+    }

    // initial status check
    setTimeout(() => {
@@ -860,7 +756,7 @@ $("document").ready(function () {
        //console.log('setting pin class via local var');
        $(RightNavPanel).addClass('pinnedOpen');
    }
-    if ($(RPanelPin).prop('checked' == true)) {
+    if (!!$(RPanelPin).prop('checked')) {
        console.debug('setting pin class via checkbox state');
        $(RightNavPanel).addClass('pinnedOpen');
    }
@@ -870,7 +766,7 @@ $("document").ready(function () {
        //console.log('setting pin class via local var');
        $(LeftNavPanel).addClass('pinnedOpen');
    }
-    if ($(LPanelPin).prop('checked' == true)) {
+    if (!!$(LPanelPin).prop('checked')) {
        console.debug('setting pin class via checkbox state');
        $(LeftNavPanel).addClass('pinnedOpen');
    }
@@ -882,7 +778,7 @@ $("document").ready(function () {
        $(WorldInfo).addClass('pinnedOpen');
    }

-    if ($(WIPanelPin).prop('checked' == true)) {
+    if (!!$(WIPanelPin).prop('checked')) {
        console.debug('setting pin class via checkbox state');
        $(WorldInfo).addClass('pinnedOpen');
    }
@@ -945,8 +841,6 @@ $("document").ready(function () {
        saveSettingsDebounced();
    });

-
-
    //this makes the chat input text area resize vertically to match the text size (limited by CSS at 50% window height)
    $('#send_textarea').on('input', function () {
        this.style.height = '40px';
@@ -957,7 +851,7 @@ $("document").ready(function () {

    document.addEventListener('swiped-left', function (e) {
        var SwipeButR = $('.swipe_right:last');
-        var SwipeTargetMesClassParent = e.target.closest('.last_mes');
+        var SwipeTargetMesClassParent = $(e.target).closest('.last_mes');
        if (SwipeTargetMesClassParent !== null) {
            if (SwipeButR.css('display') === 'flex') {
                SwipeButR.click();
@@ -966,7 +860,7 @@ $("document").ready(function () {
    });
    document.addEventListener('swiped-right', function (e) {
        var SwipeButL = $('.swipe_left:last');
-        var SwipeTargetMesClassParent = e.target.closest('.last_mes');
+        var SwipeTargetMesClassParent = $(e.target).closest('.last_mes');
        if (SwipeTargetMesClassParent !== null) {
            if (SwipeButL.css('display') === 'flex') {
                SwipeButL.click();
--- a/public/scripts/extensions/expressions/index.js
+++ b/public/scripts/extensions/expressions/index.js
@@ -499,7 +499,7 @@ async function moduleWorker() {
    const context = getContext();

    // non-characters not supported
-    if (!context.groupId && context.characterId === undefined) {
+    if (!context.groupId && (context.characterId === undefined || context.characterId === 'invalid-safety-id')) {
        removeExpression();
        return;
    }
--- a/public/scripts/extensions/memory/index.js
+++ b/public/scripts/extensions/memory/index.js
@@ -70,7 +70,7 @@ const defaultSettings = {
    promptMaxWords: 1000,
    promptWordsStep: 25,
    promptInterval: 10,
-    promptMinInterval: 1,
+    promptMinInterval: 0,
    promptMaxInterval: 100,
    promptIntervalStep: 1,
    promptForceWords: 0,
@@ -333,6 +333,11 @@ async function summarizeChat(context) {
 }

 async function summarizeChatMain(context, force) {
+    if (extension_settings.memory.promptInterval === 0 && !force) {
+        console.debug('Prompt interval is set to 0, skipping summarization');
+        return;
+    }
+
    try {
        // Wait for group to finish generating
        if (selected_group) {
@@ -380,8 +385,7 @@ async function summarizeChatMain(context, force) {
    }

    console.log('Summarizing chat, messages since last summary: ' + messagesSinceLastSummary, 'words since last summary: ' + wordsSinceLastSummary);
-    const prompt = substituteParams(extension_settings.memory.prompt)
-        .replace(/{{words}}/gi, extension_settings.memory.promptWords);
+    const prompt = extension_settings.memory.prompt?.replace(/{{words}}/gi, extension_settings.memory.promptWords);

    if (!prompt) {
        console.debug('Summarization prompt is empty. Skipping summarization.');
@@ -584,6 +588,7 @@ jQuery(function () {
                        <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>
+                        <small>Set to 0 to disable</small>
                        <input id="memory_prompt_interval" type="range" value="${defaultSettings.promptInterval}" min="${defaultSettings.promptMinInterval}" max="${defaultSettings.promptMaxInterval}" step="${defaultSettings.promptIntervalStep}" />
                        <label for="memory_prompt_words_force">Force update after (<span id="memory_prompt_words_force_value"></span> words)</label>
                        <small>Set to 0 to disable</small>
--- a/public/scripts/extensions/objective/index.js
+++ b/public/scripts/extensions/objective/index.js
@@ -72,20 +72,22 @@ function getTaskByIdRecurse(taskId, task) {
    return null;
 }

-function substituteParamsPrompts(content) {
+function substituteParamsPrompts(content, substituteGlobal) {
    content = content.replace(/{{objective}}/gi, currentObjective.description)
    content = content.replace(/{{task}}/gi, currentTask.description)
    if (currentTask.parent){
        content = content.replace(/{{parent}}/gi, currentTask.parent.description)
    }
-    content = substituteParams(content)
+    if (substituteGlobal) {
+        content = substituteParams(content)
+    }
    return content
 }

 // Call Quiet Generate to create task list using character context, then convert to tasks. Should not be called much.
 async function generateTasks() {

-    const prompt = substituteParamsPrompts(objectivePrompts.createTask);
+    const prompt = substituteParamsPrompts(objectivePrompts.createTask, false);
    console.log(`Generating tasks for objective with prompt`)
    toastr.info('Generating tasks for objective', 'Please wait...');
    const taskResponse = await generateQuietPrompt(prompt)
@@ -128,7 +130,7 @@ async function checkTaskCompleted() {
    checkCounter = $('#objective-check-frequency').val()
    toastr.info("Checking for task completion.")

-    const prompt = substituteParamsPrompts(objectivePrompts.checkTaskCompleted);
+    const prompt = substituteParamsPrompts(objectivePrompts.checkTaskCompleted, false);
    const taskResponse = (await generateQuietPrompt(prompt)).toLowerCase()

    // Check response if task complete
@@ -178,7 +180,7 @@ function setCurrentTask(taskId = null) {
    // Don't just check for a current task, check if it has data
    const description = currentTask.description || null;
    if (description) {
-        const extensionPromptText =  substituteParamsPrompts(objectivePrompts.currentTask);
+        const extensionPromptText =  substituteParamsPrompts(objectivePrompts.currentTask, true);

        // Remove highlights
        $('.objective-task').css({'border-color':'','border-width':''})
--- a/public/scripts/extensions/quick-reply/index.js
+++ b/public/scripts/extensions/quick-reply/index.js
@@ -28,7 +28,7 @@ async function updateQuickReplyPresetList() {
    if (result.ok) {
        var data = await result.json();
        presets = data.quickReplyPresets?.length ? data.quickReplyPresets : [];
-        console.log(presets)
+        console.debug('Quick Reply presets', presets);
        $("#quickReplyPresets").find('option[value!=""]').remove();


@@ -284,7 +284,7 @@ async function doQR(_, text) {
    }

    text = Number(text)
-    //use scale starting with 0 
+    //use scale starting with 0
    //ex: user inputs "/qr 2" >> qr with data-index 1 (but 2nd item displayed) gets triggered
    let QRnum = Number(text - 1)
    if (QRnum <= 0) { QRnum = 0 }
--- a/public/scripts/extensions/stable-diffusion/index.js
+++ b/public/scripts/extensions/stable-diffusion/index.js
@@ -1,5 +1,4 @@
 import {
-    substituteParams,
    saveSettingsDebounced,
    systemUserName,
    hideSwipeButtons,
@@ -14,7 +13,8 @@ import {
 } from "../../../script.js";
 import { getApiUrl, getContext, extension_settings, doExtrasFetch, modules } from "../../extensions.js";
 import { selected_group } from "../../group-chats.js";
-import { stringFormat, initScrollHeight, resetScrollHeight, timestampToMoment, getCharaFilename } from "../../utils.js";
+import { stringFormat, initScrollHeight, resetScrollHeight, timestampToMoment, getCharaFilename, saveBase64AsFile } from "../../utils.js";
+import { humanizedDateTime } from "../../RossAscends-mods.js";
 export { MODULE_NAME };

 // Wraps a string into monospace font-face span
@@ -512,7 +512,7 @@ function getQuietPrompt(mode, trigger) {
        return trigger;
    }

-    return substituteParams(stringFormat(extension_settings.sd.prompts[mode], trigger));
+    return stringFormat(extension_settings.sd.prompts[mode], trigger);
 }

 function processReply(str) {
@@ -537,6 +537,7 @@ function processReply(str) {
    return str;
 }

+
 function getRawLastMessage() {
    const context = getContext();
    const lastMessage = context.chat.slice(-1)[0].mes,
@@ -565,6 +566,10 @@ async function generatePicture(_, trigger, message, callback) {
    const quiet_prompt = getQuietPrompt(generationType, trigger);
    const context = getContext();

+    // if context.characterId is not null, then we get context.characters[context.characterId].avatar, else we get groupId and context.groups[groupId].id
+    // sadly, groups is not an array, but is a dict with keys being index numbers, so we have to filter it
+    const characterName = context.characterId ? context.characters[context.characterId].name : context.groups[Object.keys(context.groups).filter(x => context.groups[x].id === context.groupId)[0]].id.toString();
+
    const prevSDHeight = extension_settings.sd.height;
    const prevSDWidth = extension_settings.sd.width;
    const aspectRatio = extension_settings.sd.width / extension_settings.sd.height;
@@ -580,8 +585,10 @@ async function generatePicture(_, trigger, message, callback) {
        // Round to nearest multiple of 64
        extension_settings.sd.width = Math.round(extension_settings.sd.height * 1.8 / 64) * 64;
        const callbackOriginal = callback;
-        callback = function (prompt, base64Image) {
-            const imgUrl = `url(${base64Image})`;
+        callback = async function (prompt, base64Image) {
+            const imagePath = base64Image;
+            const imgUrl = `url('${encodeURIComponent(base64Image)}')`;
+
            if ('forceSetBackground' in window) {
                forceSetBackground(imgUrl);
            } else {
@@ -590,9 +597,9 @@ async function generatePicture(_, trigger, message, callback) {
            }

            if (typeof callbackOriginal === 'function') {
-                callbackOriginal(prompt, base64Image);
+                callbackOriginal(prompt, imagePath);
            } else {
-                sendMessage(prompt, base64Image);
+                sendMessage(prompt, imagePath);
            }
        }
    }
@@ -604,7 +611,7 @@ async function generatePicture(_, trigger, message, callback) {
        context.deactivateSendButtons();
        hideSwipeButtons();

-        await sendGenerationRequest(generationType, prompt, callback);
+        await sendGenerationRequest(generationType, prompt, characterName, callback);
    } catch (err) {
        console.trace(err);
        throw new Error('SD prompt text generation failed.')
@@ -644,19 +651,31 @@ async function generatePrompt(quiet_prompt) {
    return processReply(reply);
 }

-async function sendGenerationRequest(generationType, prompt, callback) {
+async function sendGenerationRequest(generationType, prompt, characterName = null, callback) {
    const prefix = generationType !== generationMode.BACKGROUND
        ? combinePrefixes(extension_settings.sd.prompt_prefix, getCharacterPrefix())
        : extension_settings.sd.prompt_prefix;

    if (extension_settings.sd.horde) {
-        await generateHordeImage(prompt, prefix, callback);
+        await generateHordeImage(prompt, prefix, characterName, callback);
    } else {
-        await generateExtrasImage(prompt, prefix, callback);
+        await generateExtrasImage(prompt, prefix, characterName, callback);
    }
 }

-async function generateExtrasImage(prompt, prefix, callback) {
+/**
+ * Generates an "extras" image using a provided prompt and other settings,
+ * then saves the generated image and either invokes a callback or sends a message with the image.
+ *
+ * @param {string} prompt - The main instruction used to guide the image generation.
+ * @param {string} prefix - Additional context or prefix to guide the image generation.
+ * @param {string} characterName - The name used to determine the sub-directory for saving.
+ * @param {function} [callback] - Optional callback function invoked with the prompt and saved image.
+ *                                If not provided, `sendMessage` is called instead.
+ *
+ * @returns {Promise<void>} - A promise that resolves when the image generation and processing are complete.
+ */
+async function generateExtrasImage(prompt, prefix, characterName, callback) {
    console.debug(extension_settings.sd);
    const url = new URL(getApiUrl());
    url.pathname = '/api/image';
@@ -680,14 +699,28 @@ async function generateExtrasImage(prompt, prefix, callback) {

    if (result.ok) {
        const data = await result.json();
-        const base64Image = `data:image/jpeg;base64,${data.image}`;
+        //filename should be character name + human readable timestamp + generation mode
+        const filename = `${characterName}_${humanizedDateTime()}`;
+        const base64Image = await saveBase64AsFile(data.image, characterName, filename, "jpg");
        callback ? callback(prompt, base64Image) : sendMessage(prompt, base64Image);
    } else {
        callPopup('Image generation has failed. Please try again.', 'text');
    }
 }

-async function generateHordeImage(prompt, prefix, callback) {
+/**
+ * Generates a "horde" image using the provided prompt and configuration settings,
+ * then saves the generated image and either invokes a callback or sends a message with the image.
+ *
+ * @param {string} prompt - The main instruction used to guide the image generation.
+ * @param {string} prefix - Additional context or prefix to guide the image generation.
+ * @param {string} characterName - The name used to determine the sub-directory for saving.
+ * @param {function} [callback] - Optional callback function invoked with the prompt and saved image.
+ *                                If not provided, `sendMessage` is called instead.
+ *
+ * @returns {Promise<void>} - A promise that resolves when the image generation and processing are complete.
+ */
+async function generateHordeImage(prompt, prefix, characterName, callback) {
    const result = await fetch('/horde_generateimage', {
        method: 'POST',
        headers: getRequestHeaders(),
@@ -709,7 +742,8 @@ async function generateHordeImage(prompt, prefix, callback) {

    if (result.ok) {
        const data = await result.text();
-        const base64Image = `data:image/webp;base64,${data}`;
+        const filename = `${characterName}_${humanizedDateTime()}`;
+        const base64Image = await saveBase64AsFile(data, characterName, filename, "webp");
        callback ? callback(prompt, base64Image) : sendMessage(prompt, base64Image);
    } else {
        toastr.error('Image generation has failed. Please try again.');
@@ -827,7 +861,7 @@ async function sdMessageButton(e) {
    const message_id = $mes.attr('mesid');
    const message = context.chat[message_id];
    const characterName = message?.name || context.name2;
-    const messageText = substituteParams(message?.mes);
+    const messageText = message?.mes;
    const hasSavedImage = message?.extra?.image && message?.extra?.title;

    if ($icon.hasClass(busyClass)) {
@@ -842,7 +876,7 @@ async function sdMessageButton(e) {
            message.extra.title = prompt;

            console.log('Regenerating an image, using existing prompt:', prompt);
-            await sendGenerationRequest(generationMode.FREE, prompt, saveGeneratedImage);
+            await sendGenerationRequest(generationMode.FREE, prompt, characterName, saveGeneratedImage);
        }
        else {
            console.log("doing /sd raw last");
--- a/public/scripts/filters.js
+++ b/public/scripts/filters.js
@@ -1,4 +1,4 @@
-import { fuzzySearchCharacters, fuzzySearchGroups, power_user } from "./power-user.js";
+import { fuzzySearchCharacters, fuzzySearchGroups, fuzzySearchWorldInfo, power_user } from "./power-user.js";
 import { tag_map } from "./tags.js";

 export const FILTER_TYPES = {
@@ -6,6 +6,7 @@ export const FILTER_TYPES = {
    TAG: 'tag',
    FAV: 'fav',
    GROUP: 'group',
+    WORLD_INFO_SEARCH: 'world_info_search',
 };

 export class FilterHelper {
@@ -18,6 +19,7 @@ export class FilterHelper {
        [FILTER_TYPES.GROUP]: this.groupFilter.bind(this),
        [FILTER_TYPES.FAV]: this.favFilter.bind(this),
        [FILTER_TYPES.TAG]: this.tagFilter.bind(this),
+        [FILTER_TYPES.WORLD_INFO_SEARCH]: this.wiSearchFilter.bind(this),
    }

    filterData = {
@@ -25,6 +27,18 @@ export class FilterHelper {
        [FILTER_TYPES.GROUP]: false,
        [FILTER_TYPES.FAV]: false,
        [FILTER_TYPES.TAG]: { excluded: [], selected: [] },
+        [FILTER_TYPES.WORLD_INFO_SEARCH]: '',
+    }
+
+    wiSearchFilter(data) {
+        const term = this.filterData[FILTER_TYPES.WORLD_INFO_SEARCH];
+
+        if (!term) {
+            return data;
+        }
+
+        const fuzzySearchResults = fuzzySearchWorldInfo(data, term);
+        return data.filter(entity => fuzzySearchResults.includes(entity.uid));
    }

    tagFilter(data) {
@@ -108,12 +122,12 @@ export class FilterHelper {
        return data.filter(entity => getIsValidSearch(entity));
    }

-    setFilterData(filterType, data) {
+    setFilterData(filterType, data, suppressDataChanged = false) {
        const oldData = this.filterData[filterType];
        this.filterData[filterType] = data;

        // only trigger a data change if the data actually changed
-        if (JSON.stringify(oldData) !== JSON.stringify(data)) {
+        if (JSON.stringify(oldData) !== JSON.stringify(data) && !suppressDataChanged) {
            this.onDataChanged();
        }
    }
--- a/public/scripts/group-chats.js
+++ b/public/scripts/group-chats.js
@@ -6,6 +6,8 @@ import {
    isDataURL,
    createThumbnail,
    extractAllWords,
+    saveBase64AsFile,
+    PAGINATION_TEMPLATE,
 } from './utils.js';
 import { RA_CountCharTokens, humanizedDateTime, dragElement, favsToHotswap } from "./RossAscends-mods.js";
 import { loadMovingUIState, sortEntitiesList } from './power-user.js';
@@ -34,7 +36,6 @@ import {
    online_status,
    talkativeness_default,
    selectRightMenuWithAnimation,
-    setRightTabSelectedClass,
    default_ch_mes,
    deleteLastMessage,
    showSwipeButtons,
@@ -80,6 +81,7 @@ export {
    regenerateGroup,
    resetSelectedGroup,
    select_group_chats,
+    getGroupChatNames,
 }

 let is_group_generating = false; // Group generation flag
@@ -336,25 +338,25 @@ async function getGroups() {
 }

 export function getGroupBlock(group) {
-        const template = $("#group_list_template .group_select").clone();
-        template.data("id", group.id);
-        template.attr("grid", group.id);
-        template.find(".ch_name").html(group.name);
-        template.find('.group_fav_icon').css("display", 'none');
-        template.addClass(group.fav ? 'is_fav' : '');
-        template.find(".ch_fav").val(group.fav);
+    const template = $("#group_list_template .group_select").clone();
+    template.data("id", group.id);
+    template.attr("grid", group.id);
+    template.find(".ch_name").text(group.name);
+    template.find('.group_fav_icon').css("display", 'none');
+    template.addClass(group.fav ? 'is_fav' : '');
+    template.find(".ch_fav").val(group.fav);

-        // Display inline tags
-        const tags = getTagsList(group.id);
-        const tagsElement = template.find('.tags');
-        tags.forEach(tag => appendTagToList(tagsElement, tag, {}));
+    // Display inline tags
+    const tags = getTagsList(group.id);
+    const tagsElement = template.find('.tags');
+    tags.forEach(tag => appendTagToList(tagsElement, tag, {}));

-        const avatar = getGroupAvatar(group);
-        if (avatar) {
-            $(template).find(".avatar").replaceWith(avatar);
-        }
+    const avatar = getGroupAvatar(group);
+    if (avatar) {
+        $(template).find(".avatar").replaceWith(avatar);
+    }

-        return template;
+    return template;
 }

 function updateGroupAvatar(group) {
@@ -362,17 +364,26 @@ function updateGroupAvatar(group) {

    $(".group_select").each(function () {
        if ($(this).data("id") == group.id) {
-                $(this).find(".avatar").replaceWith(getGroupAvatar(group));
+            $(this).find(".avatar").replaceWith(getGroupAvatar(group));
        }
    });
 }

+// check if isDataURLor if it's a valid local file url
+function isValidImageUrl(url) {
+    // check if empty dict
+    if (Object.keys(url).length === 0) {
+        return false;
+    }
+    return isDataURL(url) || (url && url.startsWith("user"));
+}
+
 function getGroupAvatar(group) {
    if (!group) {
        return $(`<div class="avatar"><img src="${default_avatar}"></div>`);
    }
-
-    if (isDataURL(group.avatar_url)) {
+    // if isDataURL or if it's a valid local file url
+    if (isValidImageUrl(group.avatar_url)) {
        return $(`<div class="avatar"><img src="${group.avatar_url}"></div>`);
    }

@@ -408,6 +419,19 @@ function getGroupAvatar(group) {
    return groupAvatar;
 }

+function getGroupChatNames(groupId) {
+    const group = groups.find(x => x.id === groupId);
+
+    if (!group) {
+        return [];
+    }
+
+    const names = [];
+    for (const chatId of group.chats) {
+        names.push(chatId);
+    }
+    return names;
+}

 async function generateGroupWrapper(by_auto_mode, type = null, params = {}) {
    if (online_status === "no_connection") {
@@ -808,7 +832,6 @@ async function deleteGroup(id) {
        select_rm_info("group_delete", id);

        $("#rm_button_selected_ch").children("h2").text('');
-        setRightTabSelectedClass();
    }
 }

@@ -967,6 +990,7 @@ function printGroupCandidates() {
        showSizeChanger: false,
        prevText: '<',
        nextText: '>',
+        formatNavigator: PAGINATION_TEMPLATE,
        showNavigator: true,
        showSizeChanger: true,
        pageSize: Number(localStorage.getItem(storageKey)) || 5,
@@ -994,6 +1018,7 @@ function printGroupMembers() {
        showSizeChanger: false,
        prevText: '<',
        nextText: '>',
+        formatNavigator: PAGINATION_TEMPLATE,
        showNavigator: true,
        showSizeChanger: true,
        pageSize: Number(localStorage.getItem(storageKey)) || 5,
@@ -1079,8 +1104,7 @@ function select_group_chats(groupId, skipAnimation) {

    setMenuType(!!group ? 'group_edit' : 'group_create');
    $("#group_avatar_preview").empty().append(getGroupAvatar(group));
-    $("#rm_group_restore_avatar").toggle(!!group && isDataURL(group.avatar_url));
-    $("#rm_group_chat_name").val(groupName);
+    $("#rm_group_restore_avatar").toggle(!!group && isValidImageUrl(group.avatar_url));
    $("#rm_group_filter").val("").trigger("input");
    $(`input[name="rm_group_activation_strategy"][value="${replyStrategy}"]`).prop('checked', true);

@@ -1116,15 +1140,23 @@ function select_group_chats(groupId, skipAnimation) {
    if (group) {
        $("#rm_group_automode_label").show();
        $("#rm_button_selected_ch").children("h2").text(groupName);
-        setRightTabSelectedClass('rm_button_selected_ch');
    }
    else {
        $("#rm_group_automode_label").hide();
    }

-    eventSource.emit('groupSelected', {detail: {id: openGroupId, group: group}});
+    eventSource.emit('groupSelected', { detail: { id: openGroupId, group: group } });
 }

+/**
+ * Handles the upload and processing of a group avatar.
+ * The selected image is read, cropped using a popup, processed into a thumbnail,
+ * and then uploaded to the server.
+ *
+ * @param {Event} event - The event triggered by selecting a file input, containing the image file to upload.
+ *
+ * @returns {Promise<void>} - A promise that resolves when the processing and upload is complete.
+ */
 async function uploadGroupAvatar(event) {
    const file = event.target.files[0];

@@ -1147,16 +1179,22 @@ async function uploadGroupAvatar(event) {
        return;
    }

-    const thumbnail = await createThumbnail(croppedImage, 96, 144);
-
+    let thumbnail = await createThumbnail(croppedImage, 96, 144);
+    //remove data:image/whatever;base64
+    thumbnail = thumbnail.replace(/^data:image\/[a-z]+;base64,/, "");
+    let _thisGroup = groups.find((x) => x.id == openGroupId);
+    // filename should be group id + human readable timestamp
+    const filename = `${_thisGroup.id}_${humanizedDateTime()}`;
+    let thumbnailUrl = await saveBase64AsFile(thumbnail, openGroupId.toString(), filename, 'jpg');
    if (!openGroupId) {
-        $('#group_avatar_preview img').attr('src', thumbnail);
+        $('#group_avatar_preview img').attr('src', thumbnailUrl);
        $('#rm_group_restore_avatar').show();
        return;
    }

-    let _thisGroup = groups.find((x) => x.id == openGroupId);
-    _thisGroup.avatar_url = thumbnail;
+
+
+    _thisGroup.avatar_url = thumbnailUrl;
    $("#group_avatar_preview").empty().append(getGroupAvatar(_thisGroup));
    $("#rm_group_restore_avatar").show();
    await editGroup(openGroupId, true, true);
@@ -1238,6 +1276,11 @@ function updateFavButtonState(state) {
 }

 export async function openGroupById(groupId) {
+    if (!groups.find(x => x.id === groupId)) {
+        console.log('Group not found', groupId);
+        return;
+    }
+
    if (!is_send_press && !is_group_generating) {
        if (selected_group !== groupId) {
            cancelTtsPlay();
@@ -1303,7 +1346,7 @@ async function createGroup() {
        body: JSON.stringify({
            name: name,
            members: members,
-            avatar_url: isDataURL(avatar_url) ? avatar_url : default_avatar,
+            avatar_url: isValidImageUrl(avatar_url) ? avatar_url : default_avatar,
            allow_self_responses: allow_self_responses,
            activation_strategy: activation_strategy,
            disabled_members: [],
--- a/public/scripts/horde.js
+++ b/public/scripts/horde.js
@@ -8,6 +8,8 @@ import {
 import { SECRET_KEYS, writeSecret } from "./secrets.js";
 import { delay } from "./utils.js";
 import { deviceInfo } from "./RossAscends-mods.js";
+import { power_user } from "./power-user.js";
+import { autoSelectInstructPreset } from "./instruct-mode.js";

 export {
    horde_settings,
@@ -28,8 +30,8 @@ let horde_settings = {
    trusted_workers_only: false,
 };

-const MAX_RETRIES = 100;
-const CHECK_INTERVAL = 3000;
+const MAX_RETRIES = 200;
+const CHECK_INTERVAL = 5000;
 const MIN_AMOUNT_GEN = 16;
 const getRequestArgs = () => ({
    method: "GET",
@@ -226,19 +228,11 @@ async function showKudos() {

 jQuery(function () {
    $("#horde_model").on('mousedown change', async function (e) {
-        //desktop-only routine for multi-select without CTRL
-        /*if (deviceInfo.device.type === 'desktop') {
-            let hordeModelSelectScrollTop = null;
-            e.preventDefault();
-            const option = $(e.target);
-            const selectElement = $(this)[0];
-            hordeModelSelectScrollTop = selectElement.scrollTop;
-            option.prop('selected', !option.prop('selected'));
-            await delay(1);
-            selectElement.scrollTop = hordeModelSelectScrollTop;
-        }*/
        horde_settings.models = $('#horde_model').val();
        console.log('Updated Horde models', horde_settings.models);
+
+        // Try select instruct preset
+        autoSelectInstructPreset(horde_settings.models.join(' '));
    });

    $("#horde_auto_adjust_response_length").on("input", function () {
--- a/public/scripts/i18n.js
+++ b/public/scripts/i18n.js
@@ -0,0 +1,75 @@
+import { waitUntilCondition } from "./utils.js";
+
+const storageKey = "language";
+export const localeData = await fetch("i18n.json").then(response => response.json());
+
+export function applyLocale(root = document) {
+    const overrideLanguage = localStorage.getItem("language");
+    var language = overrideLanguage || navigator.language || navigator.userLanguage;
+    language = language.toLowerCase();
+    //load the appropriate language file
+    if (localeData.lang.indexOf(language) < 0) language = "en";
+
+    const $root = root instanceof Document ? $(root) : $(new DOMParser().parseFromString(root, "text/html"));
+
+    //find all the elements with `data-i18n` attribute
+    $root.find("[data-i18n]").each(function () {
+        //read the translation from the language data
+        const keys = $(this).data("i18n").split(';'); // Multi-key entries are ; delimited
+        for (const key of keys) {
+            const attributeMatch = key.match(/\[(\S+)\](.+)/); // [attribute]key
+            if (attributeMatch) { // attribute-tagged key
+                const localizedValue = localeData?.[language]?.[attributeMatch[2]];
+                if (localizedValue) {
+                    $(this).attr(attributeMatch[1], localizedValue);
+                }
+            } else { // No attribute tag, treat as 'text'
+                const localizedValue = localeData?.[language]?.[key];
+                if (localizedValue) {
+                    $(this).text(localizedValue);
+                }
+            }
+        }
+    });
+
+    if (root !== document) {
+        return $root.get(0).body.innerHTML;
+    }
+}
+
+function addLanguagesToDropdown() {
+    if (!Array.isArray(localeData?.lang)) {
+        return;
+    }
+
+    for (const lang of localeData.lang) {
+        const option = document.createElement('option');
+        option.value = lang;
+        option.innerText = lang;
+        $('#ui_language_select').append(option);
+    }
+
+    const selectedLanguage = localStorage.getItem(storageKey);
+    if (selectedLanguage) {
+        $('#ui_language_select').val(selectedLanguage);
+    }
+}
+
+jQuery(async () => {
+    waitUntilCondition(() => !!localeData);
+    window["applyLocale"] = applyLocale;
+    applyLocale();
+    addLanguagesToDropdown();
+
+    $('#ui_language_select').on('change', async function () {
+        const language = $(this).val();
+
+        if (language) {
+            localStorage.setItem(storageKey, language);
+        } else {
+            localStorage.removeItem(storageKey);
+        }
+
+        location.reload();
+    });
+});
--- a/public/scripts/instruct-mode.js
+++ b/public/scripts/instruct-mode.js
@@ -0,0 +1,277 @@
+"use strict";
+
+import { saveSettingsDebounced, substituteParams } from "../script.js";
+import { selected_group } from "./group-chats.js";
+import { power_user } from "./power-user.js";
+
+export let instruct_presets = [];
+
+const controls = [
+    { id: "instruct_enabled", property: "enabled", isCheckbox: true },
+    { id: "instruct_wrap", property: "wrap", isCheckbox: true },
+    { id: "instruct_system_prompt", property: "system_prompt", isCheckbox: false },
+    { id: "instruct_system_sequence", property: "system_sequence", isCheckbox: false },
+    { id: "instruct_separator_sequence", property: "separator_sequence", isCheckbox: false },
+    { id: "instruct_input_sequence", property: "input_sequence", isCheckbox: false },
+    { id: "instruct_output_sequence", property: "output_sequence", isCheckbox: false },
+    { id: "instruct_stop_sequence", property: "stop_sequence", isCheckbox: false },
+    { id: "instruct_names", property: "names", isCheckbox: true },
+    { id: "instruct_macro", property: "macro", isCheckbox: true },
+    { id: "instruct_names_force_groups", property: "names_force_groups", isCheckbox: true },
+    { id: "instruct_last_output_sequence", property: "last_output_sequence", isCheckbox: false },
+    { id: "instruct_activation_regex", property: "activation_regex", isCheckbox: false },
+];
+
+/**
+ * Loads instruct mode settings from the given data object.
+ * @param {object} data Settings data object.
+ */
+export function loadInstructMode(data) {
+    if (data.instruct !== undefined) {
+        instruct_presets = data.instruct;
+    }
+
+    if (power_user.instruct.names_force_groups === undefined) {
+        power_user.instruct.names_force_groups = true;
+    }
+
+    controls.forEach(control => {
+        const $element = $(`#${control.id}`);
+
+        if (control.isCheckbox) {
+            $element.prop('checked', power_user.instruct[control.property]);
+        } else {
+            $element.val(power_user.instruct[control.property]);
+        }
+
+        $element.on('input', function () {
+            power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val();
+            saveSettingsDebounced();
+        });
+    });
+
+    instruct_presets.forEach((preset) => {
+        const name = preset.name;
+        const option = document.createElement('option');
+        option.value = name;
+        option.innerText = name;
+        option.selected = name === power_user.instruct.preset;
+        $('#instruct_presets').append(option);
+    });
+
+    highlightDefaultPreset();
+}
+
+function highlightDefaultPreset() {
+    $('#instruct_set_default').toggleClass('default', power_user.default_instruct === power_user.instruct.preset);
+}
+
+/**
+ * Automatically select instruct preset based on model id.
+ * Otherwise, if default instruct preset is set, selects it.
+ * @param {string} modelId Model name reported by the API.
+ * @returns {boolean} True if instruct preset was activated by model id, false otherwise.
+ */
+export function autoSelectInstructPreset(modelId) {
+    // If instruct mode is disabled, don't do anything
+    if (!power_user.instruct.enabled) {
+        return false;
+    }
+
+    for (const preset of instruct_presets) {
+        // If activation regex is set, check if it matches the model id
+        if (preset.activation_regex) {
+            try {
+                const regex = new RegExp(preset.activation_regex, 'i');
+
+                // Stop on first match so it won't cycle back and forth between presets if multiple regexes match
+                if (regex.test(modelId)) {
+                    // If preset is not already selected, select it
+                    if (power_user.instruct.preset !== preset.name) {
+                        $('#instruct_presets').val(preset.name).trigger('change');
+                        toastr.info(`Instruct mode: preset "${preset.name}" auto-selected`);
+
+                        return true;
+                    }
+                }
+            } catch {
+                // If regex is invalid, ignore it
+                console.warn(`Invalid instruct activation regex in preset "${preset.name}"`);
+            }
+        }
+    }
+
+    if (power_user.default_instruct && power_user.instruct.preset !== power_user.default_instruct) {
+        if (instruct_presets.some(p => p.name === power_user.default_instruct)) {
+            console.log(`Instruct mode: default preset "${power_user.default_instruct}" selected`);
+            $('#instruct_presets').val(power_user.default_instruct).trigger('change');
+        }
+    }
+
+    return false;
+}
+
+/**
+ * Converts instruct mode sequences to an array of stopping strings.
+ * @returns {string[]} Array of instruct mode stopping strings.
+ */
+export function getInstructStoppingSequences() {
+    function addInstructSequence(sequence) {
+        // Cohee: oobabooga's textgen always appends newline before the sequence as a stopping string
+        // But it's a problem for Metharme which doesn't use newlines to separate them.
+        const wrap = (s) => power_user.instruct.wrap ? '\n' + s : s;
+        // Sequence must be a non-empty string
+        if (typeof sequence === 'string' && sequence.length > 0) {
+            // If sequence is just a whitespace or newline - we don't want to make it a stopping string
+            // User can always add it as a custom stop string if really needed
+            if (sequence.trim().length > 0) {
+                const wrappedSequence = wrap(sequence);
+                // Need to respect "insert macro" setting
+                const stopString = power_user.instruct.macro ? substituteParams(wrappedSequence) : wrappedSequence;
+                result.push(stopString);
+            }
+        }
+    }
+
+    const result = [];
+
+    if (power_user.instruct.enabled) {
+        const input_sequence = power_user.instruct.input_sequence;
+        const output_sequence = power_user.instruct.output_sequence;
+        const last_output_sequence = power_user.instruct.last_output_sequence;
+
+        const combined_sequence = `${input_sequence}\n${output_sequence}\n${last_output_sequence}`;
+
+        combined_sequence.split('\n').filter((line, index, self) => self.indexOf(line) === index).forEach(addInstructSequence);
+    }
+
+    return result;
+}
+
+/**
+ * Formats instruct mode chat message.
+ * @param {string} name Character name.
+ * @param {string} mes Message text.
+ * @param {boolean} isUser Is the message from the user.
+ * @param {boolean} isNarrator Is the message from the narrator.
+ * @param {string} forceAvatar Force avatar string.
+ * @param {string} name1 User name.
+ * @param {string} name2 Character name.
+ * @returns {string} Formatted instruct mode chat message.
+ */
+export function formatInstructModeChat(name, mes, isUser, isNarrator, forceAvatar, name1, name2) {
+    let includeNames = isNarrator ? false : power_user.instruct.names;
+
+    if (!isNarrator && power_user.instruct.names_force_groups && (selected_group || forceAvatar)) {
+        includeNames = true;
+    }
+
+    let sequence = (isUser || isNarrator) ? power_user.instruct.input_sequence : power_user.instruct.output_sequence;
+
+    if (power_user.instruct.macro) {
+        sequence = substituteParams(sequence, name1, name2);
+    }
+
+    const separator = power_user.instruct.wrap ? '\n' : '';
+    const separatorSequence = power_user.instruct.separator_sequence && !isUser
+        ? power_user.instruct.separator_sequence
+        : separator;
+    const textArray = includeNames ? [sequence, `${name}: ${mes}` + separatorSequence] : [sequence, mes + separatorSequence];
+    const text = textArray.filter(x => x).join(separator);
+    return text;
+}
+
+/**
+ * Formats example messages according to instruct mode settings.
+ * @param {string} mesExamples Example messages string.
+ * @param {string} name1 User name.
+ * @param {string} name2 Character name.
+ * @returns {string} Formatted example messages string.
+ */
+export function formatInstructModeExamples(mesExamples, name1, name2) {
+    const includeNames = power_user.instruct.names || (!!selected_group && power_user.instruct.names_force_groups);
+
+    let inputSequence = power_user.instruct.input_sequence;
+    let outputSequence = power_user.instruct.output_sequence;
+
+    if (power_user.instruct.macro) {
+        inputSequence = substituteParams(inputSequence, name1, name2);
+        outputSequence = substituteParams(outputSequence, name1, name2);
+    }
+
+    const separator = power_user.instruct.wrap ? '\n' : '';
+    const separatorSequence = power_user.instruct.separator_sequence ? power_user.instruct.separator_sequence : separator;
+
+    mesExamples = mesExamples.replace(new RegExp(`\n${name1}: `, "gm"), separatorSequence + inputSequence + separator + (includeNames ? `${name1}: ` : ''));
+    mesExamples = mesExamples.replace(new RegExp(`\n${name2}: `, "gm"), separator + outputSequence + separator + (includeNames ? `${name2}: ` : ''));
+
+    return mesExamples;
+}
+
+/**
+ * Formats instruct mode last prompt line.
+ * @param {string} name Character name.
+ * @param {boolean} isImpersonate Is generation in impersonation mode.
+ * @param {string} promptBias Prompt bias string.
+ * @param {string} name1 User name.
+ * @param {string} name2 Character name.
+ */
+export function formatInstructModePrompt(name, isImpersonate, promptBias, name1, name2) {
+    const includeNames = power_user.instruct.names || (!!selected_group && power_user.instruct.names_force_groups);
+    const getOutputSequence = () => power_user.instruct.last_output_sequence || power_user.instruct.output_sequence;
+    let sequence = isImpersonate ? power_user.instruct.input_sequence : getOutputSequence();
+
+    if (power_user.instruct.macro) {
+        sequence = substituteParams(sequence, name1, name2);
+    }
+
+    const separator = power_user.instruct.wrap ? '\n' : '';
+    let text = includeNames ? (separator + sequence + separator + `${name}:`) : (separator + sequence);
+
+    if (!isImpersonate && promptBias) {
+        text += (includeNames ? promptBias : (separator + promptBias));
+    }
+
+    return text.trimEnd() + (includeNames ? '' : separator);
+}
+
+jQuery(() => {
+    $('#instruct_set_default').on('click', function () {
+        if (power_user.instruct.preset === power_user.default_instruct) {
+            power_user.default_instruct = null;
+            $(this).removeClass('default');
+            toastr.info('Default instruct preset cleared');
+        } else {
+            power_user.default_instruct = power_user.instruct.preset;
+            $(this).addClass('default');
+            toastr.info(`Default instruct preset set to ${power_user.default_instruct}`);
+        }
+
+        saveSettingsDebounced();
+    });
+
+    $('#instruct_presets').on('change', function () {
+        const name = $(this).find(':selected').val();
+        const preset = instruct_presets.find(x => x.name === name);
+
+        if (!preset) {
+            return;
+        }
+
+        power_user.instruct.preset = name;
+        controls.forEach(control => {
+            if (preset[control.property] !== undefined) {
+                power_user.instruct[control.property] = preset[control.property];
+                const $element = $(`#${control.id}`);
+
+                if (control.isCheckbox) {
+                    $element.prop('checked', power_user.instruct[control.property]).trigger('input');
+                } else {
+                    $element.val(power_user.instruct[control.property]).trigger('input');
+                }
+            }
+        });
+
+        highlightDefaultPreset();
+    });
+});
--- a/public/scripts/nai-settings.js
+++ b/public/scripts/nai-settings.js
@@ -578,7 +578,7 @@ function calculateLogitBias() {
 }

 /**
- * Transforms instruction into compatible format for Novel AI.
+ * Transforms instruction into compatible format for Novel AI if Novel AI instruct format not already detected.
 * 1. Instruction must begin and end with curly braces followed and preceded by a space.
 * 2. Instruction must not contain square brackets as it serves different purpose in NAI.
 * @param {string} prompt Original instruction prompt
@@ -586,7 +586,10 @@ function calculateLogitBias() {
 */
 export function adjustNovelInstructionPrompt(prompt) {
    const stripedPrompt = prompt.replace(/[\[\]]/g, '').trim();
-    return `{ ${stripedPrompt} }`;
+    if (!stripedPrompt.includes('{ ')) {
+        return `{ ${stripedPrompt} }`;
+    }
+    return stripedPrompt;
 }

 export async function generateNovelWithStreaming(generate_data, signal) {
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -19,7 +19,6 @@ import {
    system_message_types,
    replaceBiasMarkup,
    is_send_press,
-    saveSettings,
    Generate,
    main_api,
    eventSource,
@@ -219,7 +218,8 @@ const default_settings = {
    proxy_password: '',
    assistant_prefill: '',
    use_ai21_tokenizer: false,
-    use_alt_scale: true,
+    exclude_assistant: false,
+    use_alt_scale: false,
 };

 const oai_settings = {
@@ -261,7 +261,8 @@ const oai_settings = {
    proxy_password: '',
    assistant_prefill: '',
    use_ai21_tokenizer: false,
-    use_alt_scale: true,
+    exclude_assistant: false,
+    use_alt_scale: false,
 };

 let openai_setting_names;
@@ -391,7 +392,7 @@ function setupChatCompletionPromptManager(openAiSettings) {
    promptManager.tokenHandler = tokenHandler;

    promptManager.init(configuration, openAiSettings);
-    promptManager.render();
+    promptManager.render(false);

    return promptManager;
 }
@@ -481,11 +482,19 @@ function populateChatHistory(prompts, chatCompletion, type = null, cyclePrompt =
    // Chat History
    chatCompletion.add(new MessageCollection('chatHistory'), prompts.index('chatHistory'));

+    let names = (selected_group && groups.find(x => x.id === selected_group)?.members.map(member => characters.find(c => c.avatar === member)?.name).filter(Boolean).join(', ')) || '';
    // Reserve budget for new chat message
    const newChat = selected_group ? oai_settings.new_group_chat_prompt : oai_settings.new_chat_prompt;
-    const newChatMessage = new Message('system', newChat, 'newMainChat');
+    const newChatMessage = new Message('system', substituteParams(newChat, null, null, null, names), 'newMainChat');
    chatCompletion.reserveBudget(newChatMessage);

+    // Reserve budget for group nudge
+    let groupNudgeMessage = null;
+    if (selected_group) {
+        const groupNudgeMessage = Message.fromPrompt(prompts.get('groupNudge'));
+        chatCompletion.reserveBudget(groupNudgeMessage);
+    }
+
    // Reserve budget for continue nudge
    let continueMessage = null;
    if (type === 'continue' && cyclePrompt) {
@@ -514,7 +523,8 @@ function populateChatHistory(prompts, chatCompletion, type = null, cyclePrompt =
        const chatMessage = Message.fromPrompt(promptManager.preparePrompt(prompt));

        if (true === promptManager.serviceSettings.names_in_completion && prompt.name) {
-            chatMessage.name = promptManager.isValidName(prompt.name) ? prompt.name : promptManager.sanitizeName(prompt.name);
+            const messageName = promptManager.isValidName(prompt.name) ? prompt.name : promptManager.sanitizeName(prompt.name);
+            chatMessage.setName(messageName);
        }

        if (chatCompletion.canAfford(chatMessage)) chatCompletion.insertAtStart(chatMessage, 'chatHistory');
@@ -526,6 +536,12 @@ function populateChatHistory(prompts, chatCompletion, type = null, cyclePrompt =
    chatCompletion.freeBudget(newChatMessage);
    chatCompletion.insertAtStart(newChatMessage, 'chatHistory');

+    // Reserve budget for group nudge
+    if (selected_group && groupNudgeMessage) {
+        chatCompletion.freeBudget(groupNudgeMessage);
+        chatCompletion.insertAtEnd(groupNudgeMessage, 'chatHistory');
+    }
+
    // Insert and free continue nudge
    if (type === 'continue' && continueMessage) {
        chatCompletion.freeBudget(continueMessage);
@@ -543,9 +559,11 @@ function populateDialogueExamples(prompts, chatCompletion) {
    chatCompletion.add(new MessageCollection('dialogueExamples'), prompts.index('dialogueExamples'));
    if (openai_msgs_example.length) {
        const newExampleChat = new Message('system', oai_settings.new_example_chat_prompt, 'newChat');
-        chatCompletion.reserveBudget(newExampleChat);
-
        [...openai_msgs_example].forEach((dialogue, dialogueIndex) => {
+            let examplesAdded = 0;
+
+            if (chatCompletion.canAfford(newExampleChat)) chatCompletion.insert(newExampleChat, 'dialogueExamples');
+
            dialogue.forEach((prompt, promptIndex) => {
                const role = 'system';
                const content = prompt.content || '';
@@ -555,14 +573,14 @@ function populateDialogueExamples(prompts, chatCompletion) {
                chatMessage.setName(prompt.name);
                if (chatCompletion.canAfford(chatMessage)) {
                    chatCompletion.insert(chatMessage, 'dialogueExamples');
+                    examplesAdded++;
                }
            });
+
+            if (0 === examplesAdded) {
+                chatCompletion.removeLastFrom('dialogueExamples');
+            }
        });
-
-        chatCompletion.freeBudget(newExampleChat);
-
-        const chatExamples = chatCompletion.getMessages().getItemByIdentifier('dialogueExamples').getCollection();
-        if (chatExamples.length) chatCompletion.insertAtStart(newExampleChat, 'dialogueExamples');
    }
 }

@@ -703,7 +721,8 @@ function populateChatCompletion(prompts, chatCompletion, { bias, quietPrompt, ty
 */
 function preparePromptsForChatCompletion(Scenario, charPersonality, name2, worldInfoBefore, worldInfoAfter, charDescription, quietPrompt, bias, extensionPrompts, systemPromptOverride, jailbreakPromptOverride) {
    const scenarioText = Scenario ? `[Circumstances and context of the dialogue: ${Scenario}]` : '';
-    const charPersonalityText = charPersonality ? `[${name2}'s personality: ${charPersonality}]` : '';
+    const charPersonalityText = charPersonality ? `[${name2}'s personality: ${charPersonality}]` : ''
+    const groupNudge = `[Write the next reply only as ${name2}]`;

    // Create entries for system prompts
    const systemPrompts = [
@@ -717,7 +736,8 @@ function preparePromptsForChatCompletion(Scenario, charPersonality, name2, world
        { role: 'system', content: oai_settings.nsfw_avoidance_prompt, identifier: 'nsfwAvoidance' },
        { role: 'system', content: oai_settings.impersonation_prompt, identifier: 'impersonate' },
        { role: 'system', content: quietPrompt, identifier: 'quietPrompt' },
-        { role: 'system', content: bias, identifier: 'bias' }
+        { role: 'system', content: bias, identifier: 'bias' },
+        { role: 'system', content: groupNudge, identifier: 'groupNudge' }
    ];

    // Tavern Extras - Summary
@@ -1165,9 +1185,9 @@ async function sendOpenAIRequest(type, openai_msgs_tosend, signal) {
    if (isClaude) {
        generate_data['use_claude'] = true;
        generate_data['top_k'] = parseFloat(oai_settings.top_k_openai);
-
+        generate_data['exclude_assistant'] = oai_settings.exclude_assistant;
        // Don't add a prefill on quiet gens (summarization)
-        if (!isQuiet) {
+        if (!isQuiet && !oai_settings.exclude_assistant) {
            generate_data['assistant_prefill'] = substituteParams(oai_settings.assistant_prefill);
        }
    }
@@ -1186,7 +1206,7 @@ async function sendOpenAIRequest(type, openai_msgs_tosend, signal) {
        generate_data['use_ai21'] = true;
        generate_data['top_k'] = parseFloat(oai_settings.top_k_openai);
        generate_data['count_pen'] = parseFloat(oai_settings.count_pen);
-        generate_data['stop_tokens'] = [name1 + ':', 'prompt: [Start a new chat]'];
+        generate_data['stop_tokens'] = [name1 + ':', oai_settings.new_chat_prompt, oai_settings.new_group_chat_prompt];
    }

    const generate_url = '/generate_openai';
@@ -1405,7 +1425,7 @@ function countTokens(messages, full = false) {

    for (const message of messages) {
        const model = getTokenizerModel();
-        const hash = getStringHash(message.content);
+        const hash = getStringHash(JSON.stringify(message));
        const cacheKey = `${model}-${hash}`;
        const cachedCount = tokenCache[chatId][cacheKey];

@@ -1477,8 +1497,8 @@ class Message {
        this.role = role;
        this.content = content;

-        if (this.content) {
-            this.tokens = tokenHandler.count({ role: this.role, content: this.content })
+        if (typeof this.content === 'string') {
+            this.tokens = tokenHandler.count({ role: this.role, content: this.content });
        } else {
            this.tokens = 0;
        }
@@ -1486,6 +1506,7 @@ class Message {

    setName(name) {
        this.name = name;
+        this.tokens = tokenHandler.count({ role: this.role, content: this.content, name: this.name });
    }

    /**
@@ -1697,6 +1718,21 @@ class ChatCompletion {
        }
    }

+
+    /**
+     * Remove the last item of the collection
+     *
+     * @param identifier
+     */
+    removeLastFrom(identifier) {
+        const index = this.findMessageIndex(identifier);
+        const message = this.messages.collection[index].collection.pop();
+
+        this.increaseTokenBudgetBy(message.getTokens());
+
+        this.log(`Removed ${message.identifier} from ${identifier}. Remaining tokens: ${this.tokenBudget}`);
+    }
+
    /**
     * Checks if the token budget can afford the tokens of the specified message.
     *
@@ -1968,7 +2004,8 @@ function loadOpenAISettings(data, settings) {
    if (settings.wrap_in_quotes !== undefined) oai_settings.wrap_in_quotes = !!settings.wrap_in_quotes;
    if (settings.names_in_completion !== undefined) oai_settings.names_in_completion = !!settings.names_in_completion;
    if (settings.openai_model !== undefined) oai_settings.openai_model = settings.openai_model;
-    if (settings.use_ai21_tokenizer !== undefined) oai_settings.use_ai21_tokenizer = !!settings.use_ai21_tokenizer;
+    if (settings.use_ai21_tokenizer !== undefined) { oai_settings.use_ai21_tokenizer = !!settings.use_ai21_tokenizer; oai_settings.use_ai21_tokenizer ? ai21_max = 8191 : ai21_max = 9200; }
+    if (settings.exclude_assistant !== undefined) oai_settings.exclude_assistant = !!settings.exclude_assistant;
    if (settings.use_alt_scale !== undefined) { oai_settings.use_alt_scale = !!settings.use_alt_scale; updateScaleForm(); }
    $('#stream_toggle').prop('checked', oai_settings.stream_openai);
    $('#api_url_scale').val(oai_settings.api_url_scale);
@@ -1999,6 +2036,7 @@ function loadOpenAISettings(data, settings) {
    $('#openai_show_external_models').prop('checked', oai_settings.show_external_models);
    $('#openai_external_category').toggle(oai_settings.show_external_models);
    $('#use_ai21_tokenizer').prop('checked', oai_settings.use_ai21_tokenizer);
+    $('#exclude_assistant').prop('checked', oai_settings.exclude_assistant);
    $('#scale-alt').prop('checked', oai_settings.use_alt_scale);
    if (settings.impersonation_prompt !== undefined) oai_settings.impersonation_prompt = settings.impersonation_prompt;

@@ -2197,6 +2235,7 @@ async function saveOpenAIPreset(name, settings, triggerUi = true) {
        show_external_models: settings.show_external_models,
        assistant_prefill: settings.assistant_prefill,
        use_ai21_tokenizer: settings.use_ai21_tokenizer,
+        exclude_assistant: settings.exclude_assistant,
        use_alt_scale: settings.use_alt_scale,
    };

@@ -2534,8 +2573,9 @@ function onSettingsPresetChange() {
        proxy_password: ['#openai_proxy_password', 'proxy_password', false],
        assistant_prefill: ['#claude_assistant_prefill', 'assistant_prefill', false],
        use_ai21_tokenizer: ['#use_ai21_tokenizer', 'use_ai21_tokenizer', false],
+        exclude_assistant: ['#exclude_assistant', 'exclude_assistant', false],
        use_alt_scale: ['#use_alt_scale', 'use_alt_scale', false],
-    };
+        };

    const presetName = $('#settings_perset_openai').find(":selected").text();
    oai_settings.preset_settings_openai = presetName;
@@ -2932,6 +2972,10 @@ function toggleChatCompletionForms() {
        const validSources = $(this).data('source').split(',');
        $(this).toggle(validSources.includes(oai_settings.chat_completion_source));
    });
+
+    if (chat_completion_sources.CLAUDE == oai_settings.chat_completion_source) {
+        $('#claude_assistant_prefill_block').toggle(!oai_settings.exclude_assistant);
+    }
 }

 async function testApiConnection() {
@@ -2986,37 +3030,37 @@ $(document).ready(async function () {
    });

    $(document).on('input', '#temp_openai', function () {
-        oai_settings.temp_openai = $(this).val();
+        oai_settings.temp_openai = Number($(this).val());
        $('#temp_counter_openai').text(Number($(this).val()).toFixed(2));
        saveSettingsDebounced();
    });

    $(document).on('input', '#freq_pen_openai', function () {
-        oai_settings.freq_pen_openai = $(this).val();
+        oai_settings.freq_pen_openai = Number($(this).val());
        $('#freq_pen_counter_openai').text(Number($(this).val()).toFixed(2));
        saveSettingsDebounced();
    });

    $(document).on('input', '#pres_pen_openai', function () {
-        oai_settings.pres_pen_openai = $(this).val();
+        oai_settings.pres_pen_openai = Number($(this).val());
        $('#pres_pen_counter_openai').text(Number($(this).val()).toFixed(2));
        saveSettingsDebounced();
    });

    $(document).on('input', '#count_pen', function () {
-        oai_settings.count_pen = $(this).val();
+        oai_settings.count_pen = Number($(this).val());
        $('#count_pen_counter').text(Number($(this).val()).toFixed(2));
        saveSettingsDebounced();
    });

    $(document).on('input', '#top_p_openai', function () {
-        oai_settings.top_p_openai = $(this).val();
+        oai_settings.top_p_openai = Number($(this).val());
        $('#top_p_counter_openai').text(Number($(this).val()).toFixed(2));
        saveSettingsDebounced();
    });

    $(document).on('input', '#top_k_openai', function () {
-        oai_settings.top_k_openai = $(this).val();
+        oai_settings.top_k_openai = Number($(this).val());
        $('#top_k_counter_openai').text(Number($(this).val()).toFixed(0));
        saveSettingsDebounced();
    });
@@ -3052,6 +3096,12 @@ $(document).ready(async function () {
        saveSettingsDebounced();
    });

+    $('#exclude_assistant').on('change', function () {
+        oai_settings.exclude_assistant = !!$('#exclude_assistant').prop('checked');
+        $('#claude_assistant_prefill_block').toggle(!oai_settings.exclude_assistant);
+        saveSettingsDebounced();
+    });
+
    $('#names_in_completion').on('change', function () {
        oai_settings.names_in_completion = !!$('#names_in_completion').prop('checked');
        saveSettingsDebounced();
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -12,8 +12,6 @@ import {
    event_types,
    getCurrentChatId,
    printCharacters,
-    name1,
-    name2,
    setCharacterId,
    setEditedMessageId
 } from "../script.js";
@@ -21,8 +19,8 @@ import { isMobile, initMovingUI } from "./RossAscends-mods.js";
 import {
    groups,
    resetSelectedGroup,
-    selected_group,
 } from "./group-chats.js";
+import { loadInstructMode } from "./instruct-mode.js";

 import { registerSlashCommand } from "./slash-commands.js";

@@ -44,7 +42,7 @@ export {
 export const MAX_CONTEXT_DEFAULT = 4096;
 const MAX_CONTEXT_UNLOCKED = 65536;

-const defaultStoryString = "{{#if description}}{{description}}\n{{/if}}{{#if personality}}{{char}}'s personality: {{personality}}\n{{/if}}{{#if scenario}}Scenario: {{scenario}}{{/if}}";
+const defaultStoryString =  "{{#if system}}{{system}}\n{{/if}}{{#if description}}{{description}}\n{{/if}}{{#if personality}}{{char}}'s personality: {{personality}}\n{{/if}}{{#if scenario}}Scenario: {{scenario}}\n{{/if}}{{#if persona}}{{persona}}\n{{/if}}";
 const defaultExampleSeparator = '***';
 const defaultChatStart = '***';

@@ -95,6 +93,7 @@ let power_user = {
    collapse_newlines: false,
    pygmalion_formatting: pygmalion_options.AUTO,
    pin_examples: false,
+    strip_examples: false,
    trim_sentences: false,
    include_newline: false,
    always_force_name2: false,
@@ -205,11 +204,9 @@ let power_user = {

 let themes = [];
 let movingUIPresets = [];
-let instruct_presets = [];
 let context_presets = [];

 const storage_keys = {
-    ui_language: "language",
    fast_ui_mode: "TavernAI_fast_ui_mode",
    avatar_style: "TavernAI_avatar_style",
    chat_display: "TavernAI_chat_display",
@@ -249,29 +246,42 @@ function playMessageSound() {
    }

    const audio = document.getElementById('audio_message_sound');
-    audio.volume = 0.8;
-    audio.pause();
-    audio.currentTime = 0;
-    audio.play();
+    if (audio instanceof HTMLAudioElement) {
+        audio.volume = 0.8;
+        audio.pause();
+        audio.currentTime = 0;
+        audio.play();
+    }
 }

+/**
+ * Replaces consecutive newlines with a single newline.
+ * @param {string} x String to be processed.
+ * @returns {string} Processed string.
+ * @example
+ * collapseNewlines("\n\n\n"); // "\n"
+ */
 function collapseNewlines(x) {
    return x.replaceAll(/\n+/g, "\n");
 }

+/**
+ * Fix formatting problems in markdown.
+ * @param {string} text Text to be processed.
+ * @returns {string} Processed text.
+ * @example
+ * "^example * text*\n" // "^example *text*\n"
+ *  "^*example * text\n"// "^*example* text\n"
+ * "^example *text *\n" // "^example *text*\n"
+ * "^* example * text\n" // "^*example* text\n"
+ * // take note that the side you move the asterisk depends on where its pairing is
+ * // i.e. both of the following strings have the same broken asterisk ' * ',
+ * // but you move the first to the left and the second to the right, to match the non-broken asterisk
+ * "^example * text*\n" // "^*example * text\n"
+ * // and you HAVE to handle the cases where multiple pairs of asterisks exist in the same line
+ * "^example * text* * harder problem *\n" // "^example *text* *harder problem*\n"
+ */
 function fixMarkdown(text) {
-    // fix formatting problems in markdown
-    // e.g.:
-    // "^example * text*\n" -> "^example *text*\n"
-    // "^*example * text\n" -> "^*example* text\n"
-    // "^example *text *\n" -> "^example *text*\n"
-    // "^* example * text\n" -> "^*example* text\n"
-    // take note that the side you move the asterisk depends on where its pairing is
-    // i.e. both of the following strings have the same broken asterisk ' * ',
-    // but you move the first to the left and the second to the right, to match the non-broken asterisk "^example * text*\n" "^*example * text\n"
-    // and you HAVE to handle the cases where multiple pairs of asterisks exist in the same line
-    // i.e. "^example * text* * harder problem *\n" -> "^example *text* *harder problem*\n"
-
    // Find pairs of formatting characters and capture the text in between them
    const format = /([\*_]{1,2})([\s\S]*?)\1/gm;
    let matches = [];
@@ -665,9 +675,6 @@ function loadPowerUserSettings(settings, data) {
        movingUIPresets = data.movingUIPresets;
    }

-    if (data.instruct !== undefined) {
-        instruct_presets = data.instruct;
-    }

    if (data.context !== undefined) {
        context_presets = data.context;
@@ -731,6 +738,7 @@ function loadPowerUserSettings(settings, data) {
    $("#spoiler_free_mode").prop("checked", power_user.spoiler_free_mode);
    $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
    $("#pin-examples-checkbox").prop("checked", power_user.pin_examples);
+    $("#remove-examples-checkbox").prop("checked", power_user.strip_examples);
    $("#always-force-name2-checkbox").prop("checked", power_user.always_force_name2);
    $("#trim_sentences_checkbox").prop("checked", power_user.trim_sentences);
    $("#include_newline_checkbox").prop("checked", power_user.include_newline);
@@ -802,7 +810,7 @@ function loadPowerUserSettings(settings, data) {

    $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
    reloadMarkdownProcessor(power_user.render_formulas);
-    loadInstructMode();
+    loadInstructMode(data);
    loadContextSettings();
    loadMaxContextUnlocked();
    switchWaifuMode();
@@ -926,90 +934,6 @@ function loadContextSettings() {
    });
 }

-function loadInstructMode() {
-    const controls = [
-        { id: "instruct_enabled", property: "enabled", isCheckbox: true },
-        { id: "instruct_wrap", property: "wrap", isCheckbox: true },
-        { id: "instruct_system_prompt", property: "system_prompt", isCheckbox: false },
-        { id: "instruct_system_sequence", property: "system_sequence", isCheckbox: false },
-        { id: "instruct_separator_sequence", property: "separator_sequence", isCheckbox: false },
-        { id: "instruct_input_sequence", property: "input_sequence", isCheckbox: false },
-        { id: "instruct_output_sequence", property: "output_sequence", isCheckbox: false },
-        { id: "instruct_stop_sequence", property: "stop_sequence", isCheckbox: false },
-        { id: "instruct_names", property: "names", isCheckbox: true },
-        { id: "instruct_macro", property: "macro", isCheckbox: true },
-        { id: "instruct_names_force_groups", property: "names_force_groups", isCheckbox: true },
-        { id: "instruct_last_output_sequence", property: "last_output_sequence", isCheckbox: false },
-        { id: "instruct_activation_regex", property: "activation_regex", isCheckbox: false },
-    ];
-
-    if (power_user.instruct.names_force_groups === undefined) {
-        power_user.instruct.names_force_groups = true;
-    }
-
-    controls.forEach(control => {
-        const $element = $(`#${control.id}`);
-
-        if (control.isCheckbox) {
-            $element.prop('checked', power_user.instruct[control.property]);
-        } else {
-            $element.val(power_user.instruct[control.property]);
-        }
-
-        $element.on('input', function () {
-            power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val();
-            saveSettingsDebounced();
-        });
-    });
-
-    instruct_presets.forEach((preset) => {
-        const name = preset.name;
-        const option = document.createElement('option');
-        option.value = name;
-        option.innerText = name;
-        option.selected = name === power_user.instruct.preset;
-        $('#instruct_presets').append(option);
-    });
-
-    function highlightDefaultPreset() {
-        $('#instruct_set_default').toggleClass('default', power_user.default_instruct === power_user.instruct.preset);
-    }
-
-    $('#instruct_set_default').on('click', function () {
-        power_user.default_instruct = power_user.instruct.preset;
-        $(this).addClass('default');
-        toastr.success(`Default instruct preset set to ${power_user.default_instruct}`);
-        saveSettingsDebounced();
-    });
-
-    highlightDefaultPreset();
-
-    $('#instruct_presets').on('change', function () {
-        const name = $(this).find(':selected').val();
-        const preset = instruct_presets.find(x => x.name === name);
-
-        if (!preset) {
-            return;
-        }
-
-        power_user.instruct.preset = name;
-        controls.forEach(control => {
-            if (preset[control.property] !== undefined) {
-                power_user.instruct[control.property] = preset[control.property];
-                const $element = $(`#${control.id}`);
-
-                if (control.isCheckbox) {
-                    $element.prop('checked', power_user.instruct[control.property]).trigger('input');
-                } else {
-                    $element.val(power_user.instruct[control.property]).trigger('input');
-                }
-            }
-        });
-
-        highlightDefaultPreset();
-    });
-}
-
 export function fuzzySearchCharacters(searchValue) {
    const fuse = new Fuse(characters, {
        keys: [
@@ -1035,6 +959,25 @@ export function fuzzySearchCharacters(searchValue) {
    return indices;
 }

+export function fuzzySearchWorldInfo(data, searchValue) {
+    const fuse = new Fuse(data, {
+        keys: [
+            { name: 'key', weight: 3 },
+            { name: 'content', weight: 3 },
+            { name: 'comment', weight: 2 },
+            { name: 'keysecondary', weight: 2 },
+            { name: 'uid', weight: 1 },
+        ],
+        includeScore: true,
+        ignoreLocation: true,
+        threshold: 0.2,
+    });
+
+    const results = fuse.search(searchValue);
+    console.debug('World Info fuzzy search results for ' + searchValue, results);
+    return results.map(x => x.item?.uid);
+}
+
 export function fuzzySearchGroups(searchValue) {
    const fuse = new Fuse(groups, {
        keys: [
@@ -1066,58 +1009,6 @@ export function renderStoryString(params) {
    }
 }

-export function formatInstructModeChat(name, mes, isUser, isNarrator, forceAvatar, name1, name2) {
-    let includeNames = isNarrator ? false : power_user.instruct.names;
-
-    if (!isNarrator && power_user.instruct.names_force_groups && (selected_group || forceAvatar)) {
-        includeNames = true;
-    }
-
-    let sequence = (isUser || isNarrator) ? power_user.instruct.input_sequence : power_user.instruct.output_sequence;
-
-    if (power_user.instruct.macro) {
-        sequence = substituteParams(sequence, name1, name2);
-    }
-
-    const separator = power_user.instruct.wrap ? '\n' : '';
-    const separatorSequence = power_user.instruct.separator_sequence && !isUser
-        ? power_user.instruct.separator_sequence
-        : separator;
-    const textArray = includeNames ? [sequence, `${name}: ${mes}` + separatorSequence] : [sequence, mes + separatorSequence];
-    const text = textArray.filter(x => x).join(separator);
-    return text;
-}
-
-export function formatInstructStoryString(story, systemPrompt) {
-    // If the character has a custom system prompt AND user has it preferred, use that instead of the default
-    systemPrompt = power_user.prefer_character_prompt && systemPrompt ? systemPrompt : power_user.instruct.system_prompt;
-    const sequence = power_user.instruct.system_sequence || '';
-    const prompt = substituteParams(systemPrompt, name1, name2, power_user.instruct.system_prompt) || '';
-    const separator = power_user.instruct.wrap ? '\n' : '';
-    const textArray = [sequence, prompt + '\n' + story];
-    const text = textArray.filter(x => x).join(separator);
-    return text;
-}
-
-export function formatInstructModePrompt(name, isImpersonate, promptBias, name1, name2) {
-    const includeNames = power_user.instruct.names || (!!selected_group && power_user.instruct.names_force_groups);
-    const getOutputSequence = () => power_user.instruct.last_output_sequence || power_user.instruct.output_sequence;
-    let sequence = isImpersonate ? power_user.instruct.input_sequence : getOutputSequence();
-
-    if (power_user.instruct.macro) {
-        sequence = substituteParams(sequence, name1, name2);
-    }
-
-    const separator = power_user.instruct.wrap ? '\n' : '';
-    let text = includeNames ? (separator + sequence + separator + `${name}:`) : (separator + sequence);
-
-    if (!isImpersonate && promptBias) {
-        text += (includeNames ? promptBias : (separator + promptBias));
-    }
-
-    return text.trimEnd() + (includeNames ? '' : separator);
-}
-
 const sortFunc = (a, b) => power_user.sort_order == 'asc' ? compareFunc(a, b) : compareFunc(b, a);
 const compareFunc = (first, second) => {
    if (power_user.sort_order == 'random') {
@@ -1398,26 +1289,6 @@ function doResetPanels() {
    $("#movingUIreset").trigger('click');
 }

-function addLanguagesToDropdown() {
-    $.getJSON('i18n.json', function (data) {
-        if (!Array.isArray(data?.lang)) {
-            return;
-        }
-
-        for (const lang of data.lang) {
-            const option = document.createElement('option');
-            option.value = lang;
-            option.innerText = lang;
-            $('#ui_language_select').append(option);
-        }
-
-        const selectedLanguage = localStorage.getItem(storage_keys.ui_language);
-        if (selectedLanguage) {
-            $('#ui_language_select').val(selectedLanguage);
-        }
-    });
-}
-
 function setAvgBG() {
    const bgimg = new Image();
    bgimg.src = $('#bg1')
@@ -1693,10 +1564,27 @@ $(document).ready(() => {
    });

    $("#pin-examples-checkbox").change(function () {
+        if ($(this).prop("checked")) {
+            $("#remove-examples-checkbox").prop("checked", false).prop("disabled", true);
+            power_user.strip_examples = false;
+        } else {
+            $("#remove-examples-checkbox").prop("disabled", false);
+        }
        power_user.pin_examples = !!$(this).prop("checked");
        saveSettingsDebounced();
    });

+    $("#remove-examples-checkbox").change(function () {
+        if ($(this).prop("checked")) {
+            $("#pin-examples-checkbox").prop("checked", false).prop("disabled", true);
+            power_user.pin_examples = false;
+        } else {
+            $("#pin-examples-checkbox").prop("disabled", false);
+        }
+        power_user.strip_examples = !!$(this).prop("checked");
+        saveSettingsDebounced();
+    });
+
    // include newline is the child of trim sentences
    // if include newline is checked, trim sentences must be checked
    // if trim sentences is unchecked, include newline must be unchecked
@@ -2129,18 +2017,6 @@ $(document).ready(() => {
        saveSettingsDebounced();
    });

-    $('#ui_language_select').on('change', async function () {
-        const language = $(this).val();
-
-        if (language) {
-            localStorage.setItem(storage_keys.ui_language, language);
-        } else {
-            localStorage.removeItem(storage_keys.ui_language);
-        }
-
-        location.reload();
-    });
-
    $(window).on('focus', function () {
        browser_has_focus = true;
    });
@@ -2156,5 +2032,4 @@ $(document).ready(() => {
    registerSlashCommand('cut', doMesCut, [], ' <span class="monospace">(requred number)</span> – cuts the specified message from the chat', true, true);
    registerSlashCommand('resetpanels', doResetPanels, ['resetui'], ' – resets UI panels to original state.', true, true);
    registerSlashCommand('bgcol', setAvgBG, [], ' – WIP test of auto-bg avg coloring', true, true);
-    addLanguagesToDropdown();
 });
--- a/public/scripts/preset-manager.js
+++ b/public/scripts/preset-manager.js
@@ -16,13 +16,15 @@ import {
    this_chid,
 } from "../script.js";
 import { groups, selected_group } from "./group-chats.js";
+import { instruct_presets } from "./instruct-mode.js";
 import { kai_settings } from "./kai-settings.js";
+import { power_user } from "./power-user.js";
 import {
    textgenerationwebui_preset_names,
    textgenerationwebui_presets,
    textgenerationwebui_settings,
 } from "./textgen-settings.js";
-import { download, parseJsonFile, waitUntilCondition } from "./utils.js";
+import { deepClone, download, parseJsonFile, waitUntilCondition } from "./utils.js";

 const presetManagers = {};

@@ -55,8 +57,10 @@ function autoSelectPreset() {
    }
 }

-function getPresetManager() {
-    const apiId = main_api == 'koboldhorde' ? 'kobold' : main_api;
+function getPresetManager(apiId) {
+    if (!apiId) {
+        apiId = main_api == 'koboldhorde' ? 'kobold' : main_api;
+    }

    if (!Object.keys(presetManagers).includes(apiId)) {
        return null;
@@ -162,6 +166,10 @@ class PresetManager {
                presets = textgenerationwebui_presets;
                preset_names = textgenerationwebui_preset_names;
                break;
+            case "instruct":
+                presets = instruct_presets;
+                preset_names = instruct_presets.map(x => x.name);
+                break;
            default:
                console.warn(`Unknown API ID ${this.apiId}`);
        }
@@ -169,12 +177,20 @@ class PresetManager {
        return { presets, preset_names };
    }

+    isKeyedApi() {
+        return this.apiId == "textgenerationwebui" || this.apiId == "instruct";
+    }
+
+    isNonGenericApi() {
+        return this.apiId == "instruct";
+    }
+
    updateList(name, preset) {
        const { presets, preset_names } = this.getPresetList();
-        const presetExists = this.apiId == "textgenerationwebui" ? preset_names.includes(name) : Object.keys(preset_names).includes(name);
+        const presetExists = this.isKeyedApi() ? preset_names.includes(name) : Object.keys(preset_names).includes(name);

        if (presetExists) {
-            if (this.apiId == "textgenerationwebui") {
+            if (this.isKeyedApi()) {
                presets[preset_names.indexOf(name)] = preset;
                $(this.select).find(`option[value="${name}"]`).prop('selected', true);
                $(this.select).val(name).trigger("change");
@@ -189,8 +205,8 @@ class PresetManager {
        else {
            presets.push(preset);
            const value = presets.length - 1;
-            // ooba is reversed
-            if (this.apiId == "textgenerationwebui") {
+
+            if (this.isKeyedApi()) {
                preset_names[value] = name;
                const option = $('<option></option>', { value: name, text: name, selected: true });
                $(this.select).append(option);
@@ -214,6 +230,10 @@ class PresetManager {
                    return nai_settings;
                case "textgenerationwebui":
                    return textgenerationwebui_settings;
+                case "instruct":
+                    const preset = deepClone(power_user.instruct);
+                    preset['name'] = power_user.instruct.preset;
+                    return preset;
                default:
                    console.warn(`Unknown API ID ${apiId}`);
                    return {};
@@ -229,6 +249,7 @@ class PresetManager {
            'streaming_novel',
            'nai_preamble',
            'model_novel',
+            "enabled",
        ];
        const settings = Object.assign({}, getSettingsByApiId(this.apiId));

@@ -238,8 +259,10 @@ class PresetManager {
            }
        }

-        settings['genamt'] = amount_gen;
-        settings['max_length'] = max_context;
+        if (!this.isNonGenericApi()) {
+            settings['genamt'] = amount_gen;
+            settings['max_length'] = max_context;
+        }

        return settings;
    }
@@ -256,7 +279,7 @@ class PresetManager {

        $(this.select).find(`option[value="${value}"]`).remove();

-        if (this.apiId == "textgenerationwebui") {
+        if (this.isKeyedApi()) {
            preset_names.splice(preset_names.indexOf(value), 1);
        } else {
            delete preset_names[nameToDelete];
@@ -289,9 +312,11 @@ jQuery(async () => {
    eventSource.on(event_types.CHAT_CHANGED, autoSelectPreset);
    registerPresetManagers();
    $(document).on("click", "[data-preset-manager-update]", async function () {
-        const presetManager = getPresetManager();
+        const apiId = $(this).data("preset-manager-update");
+        const presetManager = getPresetManager(apiId);

        if (!presetManager) {
+            console.warn(`Preset Manager not found for API: ${apiId}`);
            return;
        }

@@ -299,9 +324,11 @@ jQuery(async () => {
    });

    $(document).on("click", "[data-preset-manager-new]", async function () {
-        const presetManager = getPresetManager();
+        const apiId = $(this).data("preset-manager-new");
+        const presetManager = getPresetManager(apiId);

        if (!presetManager) {
+            console.warn(`Preset Manager not found for API: ${apiId}`);
            return;
        }

@@ -309,9 +336,11 @@ jQuery(async () => {
    });

    $(document).on("click", "[data-preset-manager-export]", async function () {
-        const presetManager = getPresetManager();
+        const apiId = $(this).data("preset-manager-export");
+        const presetManager = getPresetManager(apiId);

        if (!presetManager) {
+            console.warn(`Preset Manager not found for API: ${apiId}`);
            return;
        }

@@ -323,13 +352,16 @@ jQuery(async () => {
    });

    $(document).on("click", "[data-preset-manager-import]", async function () {
-        $('[data-preset-manager-file]').trigger('click');
+        const apiId = $(this).data("preset-manager-import");
+        $(`[data-preset-manager-file="${apiId}"]`).trigger('click');
    });

    $(document).on("change", "[data-preset-manager-file]", async function (e) {
-        const presetManager = getPresetManager();
+        const apiId = $(this).data("preset-manager-file");
+        const presetManager = getPresetManager(apiId);

        if (!presetManager) {
+            console.warn(`Preset Manager not found for API: ${apiId}`);
            return;
        }

@@ -348,9 +380,11 @@ jQuery(async () => {
    });

    $(document).on("click", "[data-preset-manager-delete]", async function () {
-        const presetManager = getPresetManager();
+        const apiId = $(this).data("preset-manager-delete");
+        const presetManager = getPresetManager(apiId);

        if (!presetManager) {
+            console.warn(`Preset Manager not found for API: ${apiId}`);
            return;
        }

--- a/public/scripts/stats.js
+++ b/public/scripts/stats.js
@@ -1,5 +1,5 @@
 // statsHelper.js
-import { getRequestHeaders, callPopup, token, chat } from "../script.js";
+import { getRequestHeaders, callPopup, characters, this_chid } from "../script.js";
 import { humanizeGenTime } from "./RossAscends-mods.js";

 let charStats = {};
@@ -25,13 +25,12 @@ function createStatBlock(statName, statValue) {
 * @returns {number} - The stat value if it is a number, otherwise 0.
 */
 function verifyStatValue(stat) {
-    return isNaN(stat) ? 0 : stat;
+    return isNaN(Number(stat)) ? 0 : Number(stat);
 }

 /**
 * Calculates total stats from character statistics.
 *
- * @param {Object} charStats - Object containing character statistics.
 * @returns {Object} - Object containing total statistics.
 */
 function calculateTotalStats() {
@@ -304,4 +303,10 @@ async function statMesProcess(line, type, characters, this_chid, oldMesssage) {
    updateStats();
 }

+jQuery(() => {
+    $(".rm_stats_button").on('click', function () {
+        characterStatsHandler(characters, this_chid);
+    });
+})
+
 export { userStatsHandler, characterStatsHandler, getStats, statMesProcess, charStats };
--- a/public/scripts/tags.js
+++ b/public/scripts/tags.js
@@ -7,7 +7,7 @@ import {
    getCharacters,
    entitiesFilter,
 } from "../script.js";
-import { FILTER_TYPES } from "./filters.js";
+import { FILTER_TYPES, FilterHelper } from "./filters.js";

 import { groupCandidatesFilter, selected_group } from "./group-chats.js";
 import { uuidv4 } from "./utils.js";
@@ -24,7 +24,6 @@ export {
    importTags,
 };

-const random_id = () => uuidv4();
 const CHARACTER_FILTER_SELECTOR = '#rm_characters_block .rm_tag_filter';
 const GROUP_FILTER_SELECTOR = '#rm_group_chats_block .rm_tag_filter';

@@ -49,17 +48,21 @@ const InListActionable = {
 }

 const DEFAULT_TAGS = [
-    { id: random_id(), name: "Plain Text" },
-    { id: random_id(), name: "OpenAI" },
-    { id: random_id(), name: "W++" },
-    { id: random_id(), name: "Boostyle" },
-    { id: random_id(), name: "PList" },
-    { id: random_id(), name: "AliChat" },
+    { id: uuidv4(), name: "Plain Text" },
+    { id: uuidv4(), name: "OpenAI" },
+    { id: uuidv4(), name: "W++" },
+    { id: uuidv4(), name: "Boostyle" },
+    { id: uuidv4(), name: "PList" },
+    { id: uuidv4(), name: "AliChat" },
 ];

 let tags = [];
 let tag_map = {};

+/**
+ * Applies the favorite filter to the character list.
+ * @param {FilterHelper} filterHelper Instance of FilterHelper class.
+ */
 function applyFavFilter(filterHelper) {
    const isSelected = $(this).hasClass('selected');
    const displayFavoritesOnly = !isSelected;
@@ -68,6 +71,10 @@ function applyFavFilter(filterHelper) {
    filterHelper.setFilterData(FILTER_TYPES.FAV, displayFavoritesOnly);
 }

+/**
+ * Applies the "is group" filter to the character list.
+ * @param {FilterHelper} filterHelper Instance of FilterHelper class.
+ */
 function filterByGroups(filterHelper) {
    const isSelected = $(this).hasClass('selected');
    const displayGroupsOnly = !isSelected;
@@ -253,7 +260,7 @@ async function importTags(imported_char) {

 function createNewTag(tagName) {
    const tag = {
-        id: random_id(),
+        id: uuidv4(),
        name: tagName,
        color: '',
    };
--- a/public/scripts/templates/formatting.html
+++ b/public/scripts/templates/formatting.html
@@ -0,0 +1,21 @@
+Text formatting commands:
+<ul>
+    <li><tt>*text*</tt> - displays as <i>italics</i></li>
+    <li><tt>**text**</tt> - displays as <b>bold</b></li>
+    <li><tt>***text***</tt> - displays as <b><i>bold italics</i></b></li>
+    <li><tt>```text```</tt> - displays as a code block (new lines allowed between the backticks)</li>
+</ul>
+<pre><code> like this</code></pre>
+<ul>
+    <li><tt>`text`</tt> - displays as <code>inline code</code></li>
+    <li><tt> text</tt> - displays as a blockquote (note the space after >)</li>
+    <blockquote>like this</blockquote>
+    <li><tt># text</tt> - displays as a large header (note the space)</li>
+    <h1>like this</h1>
+    <li><tt>## text</tt> - displays as a medium header (note the space)</li>
+    <h2>like this</h2>
+    <li><tt>### text</tt> - displays as a small header (note the space)</li>
+    <h3>like this</h3>
+    <li><tt>$$ text $$</tt> - renders a LaTeX formula (if enabled)</li>
+    <li><tt>$ text $</tt> - renders an AsciiMath formula (if enabled)</li>
+</ul>
--- a/public/scripts/templates/help.html
+++ b/public/scripts/templates/help.html
@@ -0,0 +1,11 @@
+Hello there! Please select the help topic you would like to learn more about:
+<ul>
+    <li><a href="#" data-displayHelp="1">Slash Commands</a> (or <tt>/help slash</tt>)</li>
+    <li><a href="#" data-displayHelp="2">Formatting</a> (or <tt>/help format</tt>)</li>
+    <li><a href="#" data-displayHelp="3">Hotkeys</a> (or <tt>/help hotkeys</tt>)</li>
+    <li><a href="#" data-displayHelp="4">&lcub;&lcub;Macros&rcub;&rcub;</a> (or <tt>/help macros</tt>)</li>
+</ul>
+<br>
+<b>
+    Still got questions left? The <a target="_blank" href="https://docs.sillytavern.app/">Official SillyTavern Documentation Website</a> has much more information!
+</b>
--- a/public/scripts/templates/hotkeys.html
+++ b/public/scripts/templates/hotkeys.html
@@ -0,0 +1,13 @@
+Hotkeys/Keybinds:
+<ul>
+    <li><tt>Up</tt> = Edit last message in chat</li>
+    <li><tt>Ctrl+Up</tt> = Edit last USER message in chat</li>
+    <li><tt>Left</tt> = swipe left</li>
+    <li><tt>Right</tt> = swipe right (NOTE: swipe hotkeys are disabled when chatbar has something typed into it)</li>
+    <li><tt>Ctrl+Left</tt> = view locally stored variables (in the browser console window)</li>
+    <li><tt>Enter</tt> (with chat bar selected) = send your message to AI</li>
+    <li><tt>Ctrl+Enter</tt> = Regenerate the last AI response</li>
+    <li><tt>Escape</tt> = stop AI response generation</li>
+    <li><tt>Ctrl+Shift+Up</tt> = Scroll to context line</li>
+    <li><tt>Ctrl+Shift+Down</tt> = Scroll chat to bottom</li>
+</ul>
--- a/public/scripts/templates/macros.html
+++ b/public/scripts/templates/macros.html
@@ -0,0 +1,11 @@
+System-wide Replacement Macros:
+<ul>
+    <li><tt>&lcub;&lcub;user&rcub;&rcub;</tt> - your current Persona username</li>
+    <li><tt>&lcub;&lcub;char&rcub;&rcub;</tt> - the Character's name</li>
+    <li><tt>&lcub;&lcub;input&rcub;&rcub;</tt> - the user input</li>
+    <li><tt>&lcub;&lcub;time&rcub;&rcub;</tt> - the current time</li>
+    <li><tt>&lcub;&lcub;date&rcub;&rcub;</tt> - the current date</li>
+    <li><tt>&lcub;&lcub;idle_duration&rcub;&rcub;</tt> - the time since the last user message was sent</li>
+    <li><tt>&lcub;&lcub;random:(args)&rcub;&rcub;</tt> - returns a random item from the list. (ex: &lcub;&lcub;random:1,2,3,4&rcub;&rcub; will return 1 of the 4 numbers at random. Works with text lists too.</li>
+    <li><tt>&lcub;&lcub;roll:(formula)&rcub;&rcub;</tt> - rolls a dice. (ex: &lcub;&lcub;roll:1d6&rcub;&rcub; will roll a 6-sided dice and return a number between 1 and 6)</li>
+</ul>
--- a/public/scripts/templates/welcome.html
+++ b/public/scripts/templates/welcome.html
@@ -0,0 +1,72 @@
+<h3>
+    <span id="version_display_welcome">SillyTavern</span>
+    <div id="version_display_welcome"></div>
+</h3>
+<a href="https://docs.sillytavern.app/usage/update/"" target=" _blank">
+    Want to update?
+</a>
+<hr>
+<h3>How to start chatting?</h3>
+<ol>
+    <li>Click <code><i class="fa-solid fa-plug"></i></code> and select a <a href="https://docs.sillytavern.app/usage/api-connections/" target="_blank">Chat API</a>.</li>
+    <li>Click <code><i class="fa-solid fa-address-card"></i></code> and pick a character</li>
+</ol>
+<hr>
+<h3>
+    Want more characters?
+</h3>
+<i>
+    Not controlled by SillyTavern team.
+</i>
+<ul>
+    <li>
+        <a target="_blank" href="https://discord.gg/pygmalionai">
+            Pygmalion AI Discord
+        </a>
+    </li>
+    <li>
+        <a target="_blank" href="https://chub.ai/">
+            Chub (NSFW)
+        </a>
+    </li>
+</ul>
+<hr>
+<h3>Confused or lost?</h3>
+<ul>
+    <li>
+        <span class="note-link-span">?</span> - click these icons!
+    </li>
+    <li>
+        Enter <code>/?</code> in the chat bar
+    </li>
+    <li>
+        <a target="_blank" href="https://docs.sillytavern.app/">
+            SillyTavern Documentation Site
+        </a>
+    </li>
+    <li>
+        <a target="_blank" href="https://docs.sillytavern.app/extras/installation/">
+            Extras Installation Guide
+        </a>
+    </li>
+</ul>
+
+<hr>
+<h3>Still have questions?</h3>
+<ul>
+    <li>
+        <a target="_blank" href="https://discord.gg/RZdyAEUPvj">
+            Join the SillyTavern Discord
+        </a>
+    </li>
+    <li>
+        <a target="_blank" href="https://github.com/SillyTavern/SillyTavern/issues">
+            Post a GitHub issue
+        </a>
+    </li>
+    <li>
+        <a target="_blank" href="https://github.com/SillyTavern/SillyTavern#questions-or-suggestions">
+            Contact the developers
+        </a>
+    </li>
+</ul>
--- a/public/scripts/utils.js
+++ b/public/scripts/utils.js
@@ -1,9 +1,20 @@
 import { getContext } from "./extensions.js";
+import { getRequestHeaders } from "../script.js";
+
+export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %>';

 export function onlyUnique(value, index, array) {
    return array.indexOf(value) === index;
 }

+/**
+ * Checks if a string only contains digits.
+ * @param {string} str The string to check.
+ * @returns {boolean} True if the string only contains digits, false otherwise.
+ * @example
+ * isDigitsOnly('123'); // true
+ * isDigitsOnly('abc'); // false
+ */
 export function isDigitsOnly(str) {
    return /^\d+$/.test(str);
 }
@@ -13,6 +24,13 @@ export function getSortableDelay() {
    return navigator.maxTouchPoints > 0 ? 750 : 100;
 }

+/**
+ * Rearranges an array in a random order.
+ * @param {any[]} array The array to shuffle.
+ * @returns {any[]} The shuffled array.
+ * @example
+ * shuffle([1, 2, 3]); // [2, 3, 1]
+ */
 export function shuffle(array) {
    let currentIndex = array.length,
        randomIndex;
@@ -28,6 +46,12 @@ export function shuffle(array) {
    return array;
 }

+/**
+ * Downloads a file to the user's devices.
+ * @param {BlobPart} content File content to download.
+ * @param {string} fileName File name.
+ * @param {string} contentType File content type.
+ */
 export function download(content, fileName, contentType) {
    const a = document.createElement("a");
    const file = new Blob([content], { type: contentType });
@@ -46,12 +70,17 @@ export async function urlContentToDataUri(url, params) {
    });
 }

+/**
+ * Returns a promise that resolves to the file's text.
+ * @param {Blob} file The file to read.
+ * @returns {Promise<string>} A promise that resolves to the file's text.
+ */
 export function getFileText(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function () {
-            resolve(reader.result);
+            resolve(String(reader.result));
        };
        reader.onerror = function (error) {
            reject(error);
@@ -59,6 +88,10 @@ export function getFileText(file) {
    });
 }

+/**
+ * Returns a promise that resolves to the file's array buffer.
+ * @param {Blob} file The file to read.
+ */
 export function getFileBuffer(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
@@ -72,12 +105,17 @@ export function getFileBuffer(file) {
    });
 }

+/**
+ * Returns a promise that resolves to the base64 encoded string of a file.
+ * @param {Blob} file The file to read.
+ * @returns {Promise<string>} A promise that resolves to the base64 encoded string.
+ */
 export function getBase64Async(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
-            resolve(reader.result);
+            resolve(String(reader.result));
        };
        reader.onerror = function (error) {
            reject(error);
@@ -85,15 +123,26 @@ export function getBase64Async(file) {
    });
 }

+/**
+ * Parses a file blob as a JSON object.
+ * @param {Blob} file The file to read.
+ * @returns {Promise<any>} A promise that resolves to the parsed JSON object.
+ */
 export async function parseJsonFile(file) {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
-        fileReader.onload = event => resolve(JSON.parse(event.target.result));
-        fileReader.onerror = error => reject(error);
        fileReader.readAsText(file);
+        fileReader.onload = event => resolve(JSON.parse(String(event.target.result)));
+        fileReader.onerror = error => reject(error);
    });
 }

+/**
+ * Calculates a hash code for a string.
+ * @param {string} str The string to hash.
+ * @param {number} [seed=0] The seed to use for the hash.
+ * @returns {number} The hash code.
+ */
 export function getStringHash(str, seed = 0) {
    if (typeof str !== 'string') {
        return 0;
@@ -113,6 +162,12 @@ export function getStringHash(str, seed = 0) {
    return 4294967296 * (2097151 & h2) + (h1 >>> 0);
 };

+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
+ * @param {function} func The function to debounce.
+ * @param {number} [timeout=300] The timeout in milliseconds.
+ * @returns {function} The debounced function.
+ */
 export function debounce(func, timeout = 300) {
    let timer;
    return (...args) => {
@@ -121,6 +176,12 @@ export function debounce(func, timeout = 300) {
    };
 }

+/**
+ * Creates a throttled function that only invokes func at most once per every limit milliseconds.
+ * @param {function} func The function to throttle.
+ * @param {number} [limit=300] The limit in milliseconds.
+ * @returns {function} The throttled function.
+ */
 export function throttle(func, limit = 300) {
    let lastCall;
    return (...args) => {
@@ -132,6 +193,11 @@ export function throttle(func, limit = 300) {
    };
 }

+/**
+ * Checks if an element is in the viewport.
+ * @param {any[]} el The element to check.
+ * @returns {boolean} True if the element is in the viewport, false otherwise.
+ */
 export function isElementInViewport(el) {
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
@@ -145,6 +211,12 @@ export function isElementInViewport(el) {
    );
 }

+/**
+ * Returns a name that is unique among the names that exist.
+ * @param {string} name The name to check.
+ * @param {{ (y: any): boolean; }} exists Function to check if name exists.
+ * @returns {string} A unique name.
+ */
 export function getUniqueName(name, exists) {
    let i = 1;
    let baseName = name;
@@ -155,18 +227,48 @@ export function getUniqueName(name, exists) {
    return name;
 }

-export const delay = (ms) => new Promise((res) => setTimeout(res, ms));
-export const isSubsetOf = (a, b) => (Array.isArray(a) && Array.isArray(b)) ? b.every(val => a.includes(val)) : false;
+/**
+ * Returns a promise that resolves after the specified number of milliseconds.
+ * @param {number} ms The number of milliseconds to wait.
+ * @returns {Promise<void>} A promise that resolves after the specified number of milliseconds.
+ */
+export function delay(ms) {
+    return new Promise((res) => setTimeout(res, ms));
+}

+/**
+ * Checks if an array is a subset of another array.
+ * @param {any[]} a Array A
+ * @param {any[]} b Array B
+ * @returns {boolean} True if B is a subset of A, false otherwise.
+ */
+export function isSubsetOf(a, b) {
+    return (Array.isArray(a) && Array.isArray(b)) ? b.every(val => a.includes(val)) : false;
+}
+
+/**
+ * Increments the trailing number in a string.
+ * @param {string} str The string to process.
+ * @returns {string} The string with the trailing number incremented by 1.
+ * @example
+ * incrementString('Hello, world! 1'); // 'Hello, world! 2'
+ */
 export function incrementString(str) {
    // Find the trailing number or it will match the empty string
    const count = str.match(/\d*$/);

    // Take the substring up until where the integer was matched
    // Concatenate it to the matched count incremented by 1
-    return str.substr(0, count.index) + (++count[0]);
+    return str.substring(0, count.index) + (Number(count[0]) + 1);
 };

+/**
+ * Formats a string using the specified arguments.
+ * @param {string} format The format string.
+ * @returns {string} The formatted string.
+ * @example
+ * stringFormat('Hello, {0}!', 'world'); // 'Hello, world!'
+ */
 export function stringFormat(format) {
    const args = Array.prototype.slice.call(arguments, 1);
    return format.replace(/{(\d+)}/g, function (match, number) {
@@ -177,7 +279,11 @@ export function stringFormat(format) {
    });
 };

-// Save the caret position in a contenteditable element
+/**
+ * Save the caret position in a contenteditable element.
+ * @param {Element} element The element to save the caret position of.
+ * @returns {{ start: number, end: number }} An object with the start and end offsets of the caret.
+ */
 export function saveCaretPosition(element) {
    // Get the current selection
    const selection = window.getSelection();
@@ -206,7 +312,11 @@ export function saveCaretPosition(element) {
    return position;
 }

-// Restore the caret position in a contenteditable element
+/**
+ * Restore the caret position in a contenteditable element.
+ * @param {Element} element The element to restore the caret position of.
+ * @param {{ start: any; end: any; }} position An object with the start and end offsets of the caret.
+ */
 export function restoreCaretPosition(element, position) {
    // If the position is null, do nothing
    if (!position) {
@@ -233,6 +343,11 @@ export async function resetScrollHeight(element) {
    $(element).css('height', $(element).prop('scrollHeight') + 3 + 'px');
 }

+/**
+ * Sets the height of an element to its scroll height.
+ * @param {JQuery<HTMLElement>} element The element to initialize the scroll height of.
+ * @returns {Promise<void>} A promise that resolves when the scroll height has been initialized.
+ */
 export async function initScrollHeight(element) {
    await delay(1);

@@ -249,15 +364,27 @@ export async function initScrollHeight(element) {
    //resetScrollHeight(element);
 }

+/**
+ * Compares elements by their CSS order property. Used for sorting.
+ * @param {any} a The first element.
+ * @param {any} b The second element.
+ * @returns {number} A negative number if a is before b, a positive number if a is after b, or 0 if they are equal.
+ */
 export function sortByCssOrder(a, b) {
    const _a = Number($(a).css('order'));
    const _b = Number($(b).css('order'));
    return _a - _b;
 }

+/**
+ * Trims a string to the end of a nearest sentence.
+ * @param {string} input The string to trim.
+ * @param {boolean} include_newline Whether to include a newline character in the trimmed string.
+ * @returns {string} The trimmed string.
+ * @example
+ * end_trim_to_sentence('Hello, world! I am from'); // 'Hello, world!'
+ */
 export function end_trim_to_sentence(input, include_newline = false) {
-    // inspired from https://github.com/kaihordewebui/kaihordewebui.github.io/blob/06b95e6b7720eb85177fbaf1a7f52955d7cdbc02/index.html#L4853-L4867
-
    const punctuation = new Set(['.', '!', '?', '*', '"', ')', '}', '`', ']', '$', '。', '！', '？', '”', '）', '】', '】', '’', '」', '】']); // extend this as you see fit
    let last = -1;

@@ -282,6 +409,15 @@ export function end_trim_to_sentence(input, include_newline = false) {
    return input.substring(0, last + 1).trimEnd();
 }

+/**
+ * Counts the number of occurrences of a character in a string.
+ * @param {string} string The string to count occurrences in.
+ * @param {string} character The character to count occurrences of.
+ * @returns {number} The number of occurrences of the character in the string.
+ * @example
+ * countOccurrences('Hello, world!', 'l'); // 3
+ * countOccurrences('Hello, world!', 'x'); // 0
+ */
 export function countOccurrences(string, character) {
    let count = 0;

@@ -294,6 +430,14 @@ export function countOccurrences(string, character) {
    return count;
 }

+/**
+ * Checks if a number is odd.
+ * @param {number} number The number to check.
+ * @returns {boolean} True if the number is odd, false otherwise.
+ * @example
+ * isOdd(3); // true
+ * isOdd(4); // false
+ */
 export function isOdd(number) {
    return number % 2 !== 0;
 }
@@ -334,6 +478,12 @@ export function timestampToMoment(timestamp) {
    return moment.invalid();
 }

+/**
+ * Compare two moment objects for sorting.
+ * @param {*} a The first moment object.
+ * @param {*} b The second moment object.
+ * @returns {number} A negative number if a is before b, a positive number if a is after b, or 0 if they are equal.
+ */
 export function sortMoments(a, b) {
    if (a.isBefore(b)) {
        return 1;
@@ -344,14 +494,21 @@ export function sortMoments(a, b) {
    }
 }

-/** Split string to parts no more than length in size */
-export function splitRecursive(input, length, delimitiers = ['\n\n', '\n', ' ', '']) {
-    const delim = delimitiers[0] ?? '';
+/** Split string to parts no more than length in size.
+ * @param {string} input The string to split.
+ * @param {number} length The maximum length of each part.
+ * @param {string[]} delimiters The delimiters to use when splitting the string.
+ * @returns {string[]} The split string.
+ * @example
+ * splitRecursive('Hello, world!', 3); // ['Hel', 'lo,', 'wor', 'ld!']
+*/
+export function splitRecursive(input, length, delimiters = ['\n\n', '\n', ' ', '']) {
+    const delim = delimiters[0] ?? '';
    const parts = input.split(delim);

    const flatParts = parts.flatMap(p => {
        if (p.length < length) return p;
-        return splitRecursive(input, length, delimitiers.slice(1));
+        return splitRecursive(input, length, delimiters.slice(1));
    });

    // Merge short chunks
@@ -375,6 +532,13 @@ export function splitRecursive(input, length, delimitiers = ['\n\n', '\n', ' ',
    return result;
 }

+/**
+ * Checks if a string is a valid data URL.
+ * @param {string} str The string to check.
+ * @returns {boolean} True if the string is a valid data URL, false otherwise.
+ * @example
+ * isDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...'); // true
+ */
 export function isDataURL(str) {
    const regex = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)*;?)?(base64)?,([a-z0-9!$&',()*+;=\-_%.~:@\/?#]+)?$/i;
    return regex.test(str);
@@ -389,6 +553,13 @@ export function getCharaFilename(chid) {
    }
 }

+/**
+ * Extracts words from a string.
+ * @param {string} value The string to extract words from.
+ * @returns {string[]} The extracted words.
+ * @example
+ * extractAllWords('Hello, world!'); // ['hello', 'world']
+ */
 export function extractAllWords(value) {
    const words = [];

@@ -403,21 +574,45 @@ export function extractAllWords(value) {
    return words;
 }

+/**
+ * Escapes a string for use in a regular expression.
+ * @param {string} string The string to escape.
+ * @returns {string} The escaped string.
+ * @example
+ * escapeRegex('^Hello$'); // '\\^Hello\\$'
+ */
 export function escapeRegex(string) {
    return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
 }

+/**
+ * Provides an interface for rate limiting function calls.
+ */
 export class RateLimiter {
-    constructor(intervalMillis) {
-        this._intervalMillis = intervalMillis;
-        this._lastResolveTime = 0;
-        this._pendingResolve = Promise.resolve();
+    /**
+     * Creates a new RateLimiter.
+     * @param {number} interval The interval in milliseconds.
+     * @example
+     * const rateLimiter = new RateLimiter(1000);
+     * rateLimiter.waitForResolve().then(() => {
+     *    console.log('Waited 1000ms');
+     * });
+     */
+    constructor(interval) {
+        this.interval = interval;
+        this.lastResolveTime = 0;
+        this.pendingResolve = Promise.resolve();
    }

+    /**
+     * Waits for the remaining time in the interval.
+     * @param {AbortSignal} abortSignal An optional AbortSignal to abort the wait.
+     * @returns {Promise<void>} A promise that resolves when the remaining time has elapsed.
+     */
    _waitRemainingTime(abortSignal) {
        const currentTime = Date.now();
-        const elapsedTime = currentTime - this._lastResolveTime;
-        const remainingTime = Math.max(0, this._intervalMillis - elapsedTime);
+        const elapsedTime = currentTime - this.lastResolveTime;
+        const remainingTime = Math.max(0, this.interval - elapsedTime);

        return new Promise((resolve, reject) => {
            const timeoutId = setTimeout(() => {
@@ -433,19 +628,29 @@ export class RateLimiter {
        });
    }

+    /**
+     * Waits for the next interval to elapse.
+     * @param {AbortSignal} abortSignal An optional AbortSignal to abort the wait.
+     * @returns {Promise<void>} A promise that resolves when the next interval has elapsed.
+     */
    async waitForResolve(abortSignal) {
-        await this._pendingResolve;
-        this._pendingResolve = this._waitRemainingTime(abortSignal);
+        await this.pendingResolve;
+        this.pendingResolve = this._waitRemainingTime(abortSignal);

        // Update the last resolve time
-        this._lastResolveTime = Date.now() + this._intervalMillis;
-        console.debug(`RateLimiter.waitForResolve() ${this._lastResolveTime}`);
+        this.lastResolveTime = Date.now() + this.interval;
+        console.debug(`RateLimiter.waitForResolve() ${this.lastResolveTime}`);
    }
 }

-// Taken from https://github.com/LostRuins/lite.koboldai.net/blob/main/index.html
-//import tavern png data. adapted from png-chunks-extract under MIT license
-//accepts png input data, and returns the extracted JSON
+/**
+ * Extracts a JSON object from a PNG file.
+ * Taken from https://github.com/LostRuins/lite.koboldai.net/blob/main/index.html
+ * Adapted from png-chunks-extract under MIT license
+ * @param {Uint8Array} data The PNG data to extract the JSON from.
+ * @param {string} identifier The identifier to look for in the PNG tEXT data.
+ * @returns {object} The extracted JSON object.
+ */
 export function extractDataFromPng(data, identifier = 'chara') {
    console.log("Attempting PNG import...");
    let uint8 = new Uint8Array(4);
@@ -554,6 +759,55 @@ export function extractDataFromPng(data, identifier = 'chara') {
    }
 }

+/**
+ * Sends a base64 encoded image to the backend to be saved as a file.
+ *
+ * @param {string} base64Data - The base64 encoded image data.
+ * @param {string} characterName - The character name to determine the sub-directory for saving.
+ * @param {string} ext - The file extension for the image (e.g., 'jpg', 'png', 'webp').
+ *
+ * @returns {Promise<string>} - Resolves to the saved image's path on the server.
+ *                              Rejects with an error if the upload fails.
+ */
+export async function saveBase64AsFile(base64Data, characterName, filename = "", ext) {
+    // Construct the full data URL
+    const format = ext; // Extract the file extension (jpg, png, webp)
+    const dataURL = `data:image/${format};base64,${base64Data}`;
+
+    // Prepare the request body
+    const requestBody = {
+        image: dataURL,
+        ch_name: characterName,
+        filename: filename
+    };
+
+    // Send the data URL to your backend using fetch
+    const response = await fetch('/uploadimage', {
+        method: 'POST',
+        body: JSON.stringify(requestBody),
+        headers: {
+            ...getRequestHeaders(),
+            'Content-Type': 'application/json'
+        },
+    });
+
+    // If the response is successful, get the saved image path from the server's response
+    if (response.ok) {
+        const responseData = await response.json();
+        return responseData.path;
+    } else {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to upload the image to the server');
+    }
+}
+
+/**
+ * Creates a thumbnail from a data URL.
+ * @param {string} dataUrl The data URL encoded data of the image.
+ * @param {number} maxWidth The maximum width of the thumbnail.
+ * @param {number} maxHeight The maximum height of the thumbnail.
+ * @returns {Promise<string>} A promise that resolves to the thumbnail data URL.
+ */
 export function createThumbnail(dataUrl, maxWidth, maxHeight) {
    return new Promise((resolve, reject) => {
        const img = new Image();
@@ -589,6 +843,13 @@ export function createThumbnail(dataUrl, maxWidth, maxHeight) {
    });
 }

+/**
+ * Waits for a condition to be true. Throws an error if the condition is not true within the timeout.
+ * @param {{ (): boolean; }} condition The condition to wait for.
+ * @param {number} [timeout=1000] The timeout in milliseconds.
+ * @param {number} [interval=100] The interval in milliseconds.
+ * @returns {Promise<void>} A promise that resolves when the condition is true.
+ */
 export async function waitUntilCondition(condition, timeout = 1000, interval = 100) {
    return new Promise((resolve, reject) => {
        const timeoutId = setTimeout(() => {
@@ -606,6 +867,12 @@ export async function waitUntilCondition(condition, timeout = 1000, interval = 1
    });
 }

+/**
+ * Returns a UUID v4 string.
+ * @returns {string} A UUID v4 string.
+ * @example
+ * uuidv4(); // '3e2fd9e1-0a7a-4f6d-9aaf-8a7a4babe7eb'
+ */
 export function uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        const r = Math.random() * 16 | 0;
@@ -614,6 +881,11 @@ export function uuidv4() {
    });
 }

+/**
+ * Clones an object using JSON serialization.
+ * @param {any} obj The object to clone.
+ * @returns {any} A deep clone of the object.
+ */
 export function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
 }
--- a/public/scripts/world-info.js
+++ b/public/scripts/world-info.js
@@ -1,9 +1,10 @@
 import { saveSettings, callPopup, substituteParams, getTokenCount, getRequestHeaders, chat_metadata, this_chid, characters, saveCharacterDebounced, menu_type, eventSource, event_types } from "../script.js";
-import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, deepClone, getSortableDelay, escapeRegex } from "./utils.js";
+import { download, debounce, initScrollHeight, resetScrollHeight, parseJsonFile, extractDataFromPng, getFileBuffer, getCharaFilename, deepClone, getSortableDelay, escapeRegex, PAGINATION_TEMPLATE } from "./utils.js";
 import { getContext } from "./extensions.js";
 import { NOTE_MODULE_NAME, metadata_keys, shouldWIAddPrompt } from "./authors-note.js";
 import { registerSlashCommand } from "./slash-commands.js";
 import { deviceInfo } from "./RossAscends-mods.js";
+import { FILTER_TYPES, FilterHelper } from "./filters.js";

 export {
    world_info,
@@ -45,6 +46,11 @@ const saveSettingsDebounced = debounce(() => {
    saveSettings()
 }, 1000);
 const sortFn = (a, b) => b.order - a.order;
+const navigation_option = { none: 0, previous: 1, last: 2, };
+let updateEditor = (navigation) => { navigation; };
+
+// Do not optimize. updateEditor is a function that is updated by the displayWorldEntries with new data.
+const worldInfoFilter = new FilterHelper(() => updateEditor());

 export function getWorldInfoSettings() {
    return {
@@ -223,7 +229,9 @@ function nullWorldInfo() {
    toastr.info("Create or import a new World Info file first.", "World Info is not set", { timeOut: 10000, preventDuplicates: true });
 }

-function displayWorldEntries(name, data) {
+function displayWorldEntries(name, data, navigation = navigation_option.none) {
+    updateEditor = (navigation) => displayWorldEntries(name, data, navigation);
+
    $("#world_popup_entries_list").empty().show();

    if (!data || !("entries" in data)) {
@@ -232,22 +240,58 @@ function displayWorldEntries(name, data) {
        $("#world_popup_export").off('click').on('click', nullWorldInfo);
        $("#world_popup_delete").off('click').on('click', nullWorldInfo);
        $("#world_popup_entries_list").hide();
+        $('#world_info_pagination').html('');
        return;
    }

-    // Convert the data.entries object into an array
-    const entriesArray = Object.keys(data.entries).map(uid => {
-        const entry = data.entries[uid];
-        entry.displayIndex = entry.displayIndex ?? entry.uid;
-        return entry;
+    function getDataArray(callback) {
+        // Convert the data.entries object into an array
+        let entriesArray = Object.keys(data.entries).map(uid => {
+            const entry = data.entries[uid];
+            entry.displayIndex = entry.displayIndex ?? entry.uid;
+            return entry;
+        });
+
+        // Sort the entries array by displayIndex and uid
+        entriesArray.sort((a, b) => a.displayIndex - b.displayIndex || a.uid - b.uid);
+        entriesArray = worldInfoFilter.applyFilters(entriesArray);
+        callback(entriesArray);
+        return entriesArray;
+    }
+
+    let startPage = 1;
+
+    if (navigation === navigation_option.previous) {
+        startPage = $("#world_info_pagination").pagination('getCurrentPageNum');
+    }
+
+    const storageKey = 'WI_PerPage';
+    $("#world_info_pagination").pagination({
+        dataSource: getDataArray,
+        pageSize: 25,
+        //pageSize: Number(localStorage.getItem(storageKey)) || 25,
+        //sizeChangerOptions: [10, 25, 50, 100],
+        //showSizeChanger: true,
+        pageRange: 1,
+        pageNumber: startPage,
+        position: 'top',
+        showPageNumbers: false,
+        prevText: '<',
+        nextText: '>',
+        formatNavigator: PAGINATION_TEMPLATE,
+        showNavigator: true,
+        callback: function (page) {
+            $("#world_popup_entries_list").empty();
+            const blocks = page.map(entry => getWorldEntry(name, data, entry));
+            $("#world_popup_entries_list").append(blocks);
+        },
+        afterSizeSelectorChange: function (e) {
+            localStorage.setItem(storageKey, e.target.value);
+        }
    });

-    // Sort the entries array by displayIndex and uid
-    entriesArray.sort((a, b) => a.displayIndex - b.displayIndex || a.uid - b.uid);
-
-    // Loop through the sorted array and call appendWorldEntry
-    for (const entry of entriesArray) {
-        appendWorldEntry(name, data, entry);
+    if (navigation === navigation_option.last) {
+        $("#world_info_pagination").pagination('go', $("#world_info_pagination").pagination('getTotalPage'));
    }

    $("#world_popup_new").off('click').on('click', () => {
@@ -360,7 +404,7 @@ function deleteOriginalDataValue(data, uid) {
    }
 }

-function appendWorldEntry(name, data, entry) {
+function getWorldEntry(name, data, entry) {
    const template = $("#entry_edit_template .world_entry").clone();
    template.data("uid", entry.uid);

@@ -374,7 +418,7 @@ function appendWorldEntry(name, data, entry) {

    keyInput.on("input", function () {
        const uid = $(this).data("uid");
-        const value = $(this).val();
+        const value = String($(this).val());
        resetScrollHeight(this);
        data.entries[uid].key = value
            .split(",")
@@ -410,7 +454,7 @@ function appendWorldEntry(name, data, entry) {
    keySecondaryInput.data("uid", entry.uid);
    keySecondaryInput.on("input", function () {
        const uid = $(this).data("uid");
-        const value = $(this).val();
+        const value = String($(this).val());
        resetScrollHeight(this);
        data.entries[uid].keysecondary = value
            .split(",")
@@ -454,17 +498,15 @@ function appendWorldEntry(name, data, entry) {
    commentToggle.parent().hide()

    // content
-    const countTokensDebounced = debounce(function (that, value) {
+    const counter = template.find(".world_entry_form_token_counter");
+    const countTokensDebounced = debounce(function (counter, value) {
        const numberOfTokens = getTokenCount(value);
-        $(that)
-            .closest(".world_entry")
-            .find(".world_entry_form_token_counter")
-            .text(numberOfTokens);
+        $(counter).text(numberOfTokens);
    }, 1000);

    const contentInput = template.find('textarea[name="content"]');
    contentInput.data("uid", entry.uid);
-    contentInput.on("input", function () {
+    contentInput.on("input", function (_, { skipCount } = {}) {
        const uid = $(this).data("uid");
        const value = $(this).val();
        data.entries[uid].content = value;
@@ -472,12 +514,23 @@ function appendWorldEntry(name, data, entry) {
        setOriginalDataValue(data, uid, "content", data.entries[uid].content);
        saveWorldInfo(name, data);

+        if (skipCount) {
+            return;
+        }
+
        // count tokens
-        countTokensDebounced(this, value);
+        countTokensDebounced(counter, value);
    });
-    contentInput.val(entry.content).trigger("input");
+    contentInput.val(entry.content).trigger("input", { skipCount: true });
    //initScrollHeight(contentInput);

+    template.find('.inline-drawer-toggle').on('click', function () {
+        if (counter.data('first-run')) {
+            counter.data('first-run', false);
+            countTokensDebounced(counter, contentInput.val());
+        }
+    });
+
    // selective
    const selectiveInput = template.find('input[name="selective"]');
    selectiveInput.data("uid", entry.uid);
@@ -651,11 +704,10 @@ function appendWorldEntry(name, data, entry) {
        const uid = $(this).data("uid");
        deleteWorldInfoEntry(data, uid);
        deleteOriginalDataValue(data, uid);
-        $(this).closest(".world_entry").remove();
        saveWorldInfo(name, data);
+        updateEditor(navigation_option.previous);
    });

-    template.appendTo("#world_popup_entries_list");
    template.find('.inline-drawer-content').css('display', 'none'); //entries start collapsed

    return template;
@@ -696,8 +748,7 @@ function createWorldInfoEntry(name, data) {
    const newEntry = { uid: newUid, ...newEntryTemplate };
    data.entries[newUid] = newEntry;

-    const entryTemplate = appendWorldEntry(name, data, newEntry);
-    entryTemplate.get(0).scrollIntoView({ behavior: "smooth" });
+    updateEditor(navigation_option.last);
 }

 async function _save(name, data) {
@@ -1455,19 +1506,6 @@ jQuery(() => {
            return;
        }

-        /*
-        if (deviceInfo.device.type === 'desktop') {
-            let selectScrollTop = null;
-            e.preventDefault();
-            const option = $(e.target);
-            const selectElement = $(this)[0];
-            selectScrollTop = selectElement.scrollTop;
-            option.prop('selected', !option.prop('selected'));
-            await delay(1);
-            selectElement.scrollTop = selectScrollTop;
-        }
-        */
-
        onWorldInfoChange('__notSlashCommand__');
    });

@@ -1482,7 +1520,7 @@ jQuery(() => {
        await importWorldInfo(file);

        // Will allow to select the same file twice in a row
-        $("#form_world_import").trigger("reset");
+        e.target.value = '';
    });

    $("#world_create_button").on('click', async () => {
@@ -1495,6 +1533,8 @@ jQuery(() => {
    });

    $("#world_editor_select").on('change', async () => {
+        $("#world_info_search").val('');
+        worldInfoFilter.setFilterData(FILTER_TYPES.WORLD_INFO_SEARCH, '', true);
        const selectedIndex = $("#world_editor_select").find(":selected").val();

        if (selectedIndex === "") {
@@ -1575,23 +1615,10 @@ jQuery(() => {
        }
    });

-    /*
-    $("#world_info").on('mousewheel', function (e) {
-        e.preventDefault();
-        if ($(this).is(':animated')) {
-            return; //dont force multiple scroll animations
-        }
-        var wheelDelta = e.originalEvent.wheelDelta.toFixed(0);
-        var DeltaPosNeg = (wheelDelta >= 0) ? 1 : -1; //determine if scrolling up or down
-        var containerHeight = $(this).height().toFixed(0);
-        var optionHeight = $(this).find('option').first().height().toFixed(0);
-        var visibleOptions = (containerHeight / optionHeight).toFixed(0); //how many options we can see
-        var pixelsToScroll = (optionHeight * visibleOptions * DeltaPosNeg).toFixed(0); //scroll a full container height
-        var scrollTop = ($(this).scrollTop() - pixelsToScroll).toFixed(0);
-
-        $(this).animate({ scrollTop: scrollTop }, 200);
+    $('#world_info_search').on('input', function () {
+        const term = $(this).val();
+        worldInfoFilter.setFilterData(FILTER_TYPES.WORLD_INFO_SEARCH, term);
    });
-    */

    // Not needed on mobile
    if (deviceInfo.device.type === 'desktop') {