Merge pull request #3403 from SillyTavern/support-multiple-expressions Support multiple expressions

fb06e7afa1bc5d18fe37b06cea08a45fa0cce3c3

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

Signed

Parents: 1a1afd00a1f2b2ad1795397d1c779eec63fa3932 3cf4be8e859e5f6c7120b8d3f3f070561f074f5e

public/global.d.ts+8 -0 Viewed

@@ -40,4 +40,12 @@ declare global {
40	40	searchInputCssClass?: string;
41	41	}
42	42	}
	43	+
	44	+ /**
	45	+ * Translates a text to a target language using a translation provider.
	46	+ * @param text Text to translate
	47	+ * @param lang Target language
	48	+ * @param provider Translation provider
	49	+ */
	50	+ async function translate(text: string, lang: string, provider: string = null): Promise<string>;
43	51	}

public/locales/fr-fr.json+0 -1 Viewed

     "Character Expressions": "Expressions de personnages",
     "Translate text to English before classification": "Traduire le texte en anglais avant de le classer",
     "Show default images (emojis) if sprite missing": "Afficher les images par défaut (emojis) si le sprite est manquant",
 -    "Image Type - talkinghead (extras)": "Type d'image - talkinghead (extras)",
     "Classifier API": "API de classification",
     "Select the API for classifying expressions.": "Sélectionnez l'API pour classer les expressions.",
     "Main API": "API principale",

public/locales/ko-kr.json+0 -1 Viewed

     "menu within": "내의 메뉴",
     "Translate text to English before classification": "분류 전에 텍스트를 영어로 번역합니다.",
     "Show default images (emojis) if sprite missing": "해당하는 스프라이트가 없으면 기본 이미지 (이모지들)을 표시합니다.",
 -    "Image Type - talkinghead (extras)": "이미지 유형 - 토킹 헤드 (부가 사항)",
     "Classifier API": "분류를 위한 API",
     "Select the API for classifying expressions.": "감정 이미지들을 분류할 API를 선택하세요.",
     "Local": "로컬",

public/locales/zh-cn.json+0 -1 Viewed

     "Character Expressions": "角色表情",
     "Translate text to English before classification": "分类之前将文本翻译成英文",
     "Show default images (emojis) if sprite missing": "如果表情包缺失，则显示默认图像（表情符号）",
 -    "Image Type - talkinghead (extras)": "图像类型 - 说话头像（附加内容）",
     "Classifier API": "分类器 API",
     "Select the API for classifying expressions.": "选择用于对表达式进行分类的API。",
     "Main API": "主要 API",

public/locales/zh-tw.json+0 -1 Viewed

     "HuggingFace Token": "HuggingFace 符元",
     "Image Captioning": "圖片註解",
     "Generate Caption": "產生圖片註解",
 -    "Image Type - talkinghead (extras)": "圖片類型 - talkinghead（額外選項）",
     "Injection Position": "插入位置",
     "Injection position. Relative (to other prompts in prompt manager) or In-chat @ Depth.": "插入位置（與提示詞管理器中的其他提示相比）或聊天中的深度位置。",
     "Injection Template": "插入範本",

public/scripts/extensions.js+10 -0 Viewed

         refine_mode: false,
     },
     expressions: {
 +        /** @type {number} see `EXPRESSION_API` */
 +        api: undefined,
         /** @type {string[]} */
         custom: [],
 +        showDefault: false,
 +        translate: false,
 +        /** @type {string} */
 +        fallback_expression: undefined,
 +        /** @type {string} */
 +        llmPrompt: undefined,
 +        allowMultiple: true,
 +        rerollIfSame: false,
     },
     connectionManager: {
         selectedProfile: '',

public/scripts/extensions/expressions/index.js+788 -707 Viewed

 import { Fuse } from '../../../lib.js';
 import { callPopupcharacters, eventSource, event_types, generateRaw, getRequestHeaders, main_api, online_status, saveSettingsDebounced, substituteParams, substituteParamsExtended, system_message_types, this_chid } from '../../../script.js';
 import { dragElement, isMobile } from '../../RossAscends-mods.js';
 import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch, renderExtensionTemplateAsync } from '../../extensions.js';
 import { loadMovingUIState, performFuzzySearch, power_user } from '../../power-user.js';
 import { onlyUnique, debounce, getCharaFilename, trimToEndSentence, trimToStartSentence, waitUntilCondition, findChar } from '../../utils.js';
 import { hideMutedSprites, selected_group } from '../../group-chats.js';
 import { isJsonSchemaSupported } from '../../textgen-settings.js';
 import { debounce_timeout } from '../../constants.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';

 import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { slashCommandReturnHelper } from '../../slash-commands/SlashCommandReturnHelper.js';
 import { generateWebLlmChatPrompt, isWebLlmSupported } from '../shared.js';
 +import { Popup, POPUP_RESULT } from '../../popup.js';
 +import { t } from '../../i18n.js';
 export { MODULE_NAME };
 +/**
 +* @typedef {object} Expression Expression definition with label and file path
 +* @property {string} label The label of the expression
 +* @property {ExpressionImage[]} files One or more images to represent this expression
 +*/
++
 +/**
 + * @typedef {object} ExpressionImage An expression image
 + * @property {string} expression - The expression
 + * @property {boolean} [isCustom=false] - If the expression is added by user
 + * @property {string} fileName - The filename with extension
 + * @property {string} title - The title for the image
 + * @property {string} imageSrc - The image source / full path
 + * @property {'success' | 'additional' | 'failure'} type - The type of the image
 + */
++
 const MODULE_NAME = 'expressions';
 const UPDATE_INTERVAL = 2000;
 const STREAMING_UPDATE_INTERVAL = 10000;
 -const TALKINGCHECK_UPDATE_INTERVAL = 500;
 const DEFAULT_FALLBACK_EXPRESSION = 'joy';
 const DEFAULT_LLM_PROMPT = 'Ignore previous instructions. Classify the emotion of the last message. Output just one word, e.g. "joy" or "anger". Choose only one of the following labels: {{labels}}';
 const DEFAULT_EXPRESSIONS = [
 -    'talkinghead',
     'admiration',
     'amusement',
     'anger',

     'surprise',
     'neutral',
 ];
++
 +const OPTION_NO_FALLBACK = '#none';
 +const OPTION_EMOJI_FALLBACK = '#emoji';
 +const RESET_SPRITE_LABEL = '#reset';
++
++
 /** @enum {number} */
 const EXPRESSION_API = {
     local: 0,

 let expressionsList = null;
 let lastCharacter = undefined;
 let lastMessage = null;
 -let lastTalkingState = false;
 +/** @type {{[characterKey: string]: Expression[]}} */
 -let lastTalkingStateMessage = null;  // last message as seen by `updateTalkingState` (tracked separately, different timer)
 let spriteCache = {};
 let inApiCall = false;
 let lastServerResponseTime = 0;
 -export let lastExpression = {};
+-
 -function isTalkingHeadEnabled() {
 -    return extension_settings.expressions.talkinghead && extension_settings.expressions.api == EXPRESSION_API.extras;
 -}
 -/**
 +/** @type {{[characterName: string]: string}} */
 - * Returns the fallback expression if explicitly chosen, otherwise the default one
 +export let lastExpression = {};
 - * @returns {string} expression name
 - */
 -function getFallbackExpression() {
 -    return extension_settings.expressions.fallback_expression ?? DEFAULT_FALLBACK_EXPRESSION;
 -}
 /**
 - * Toggles Talkinghead mode on/off.
 + * Returns a placeholder image object for a given expression
 - *
 + * @param {string} expression - The expression label
 - * Implements the `/th` slash command, which is meant to be bound to a Quick Reply button
 + * @param {boolean} [isCustom=false] - Whether the expression is custom
 - * as a quick way to switch Talkinghead on or off (e.g. to conserve GPU resources when AFK
 + * @returns {ExpressionImage} The placeholder image object
 - * for a long time).
  */
 function toggleTalkingHeadCommandgetPlaceholderImage(_expression, isCustom = false) {
 -    setTalkingHeadState(!extension_settings.expressions.talkinghead);
 +    return {
 -    return String(extension_settings.expressions.talkinghead);
 +        expression: expression,
 +        isCustom: isCustom,
 +        title: 'No Image',
 +        type: 'failure',
 +        fileName: 'No-Image-Placeholder.svg',
 +        imageSrc: '/img/No-Image-Placeholder.svg',
 +    };
+}
 function isVisualNovelMode() {

 const updateVisualNovelModeDebounced = debounce(forceUpdateVisualNovelMode, debounce_timeout.quick);
 async function updateVisualNovelMode(namespriteFolderName, expression) {
     const containervnContainer = $('#visual-novel-wrapper');
     await visualNovelRemoveInactive(containervnContainer);
     const setSpritePromises = await visualNovelSetCharacterSprites(containervnContainer, namespriteFolderName, expression);
     // calculate layer indices based on recent messages
     await visualNovelUpdateLayers(containervnContainer);
     await Promise.allSettled(setSpritePromises);
     // update again based on new sprites
     if (setSpritePromises.length > 0) {
         await visualNovelUpdateLayers(containervnContainer);
+    }
+}

     await Promise.allSettled(removeInactiveCharactersPromises);
+}
 -async function visualNovelSetCharacterSprites(container, name, expression) {
 +/**
 + * Sets the character sprites for visual novel mode based on the provided container, name, and expression.
 + *
 + * @param {JQuery<HTMLElement>} vnContainer - The container element where the sprites will be set
 + * @param {string} spriteFolderName - The name of the sprite folder
 + * @param {string} expression - The expression to set for the characters
 + * @returns {Promise<Array>} - An array of promises that resolve when the sprites are set
 + */
 +async function visualNovelSetCharacterSprites(vnContainer, spriteFolderName, expression) {
 +    const originalExpression = expression;
     const context = getContext();
     const group = context.groups.find(x => x.id == context.groupId);
 -    const labels = await getExpressionsList();
 -    const createCharacterPromises = [];
     const setSpritePromises = [];
     for (const avatar of group.members) {
 -        const isDisabled = group.disabled_members.includes(avatar);
+-
         // skip disabled characters
 +        const isDisabled = group.disabled_members.includes(avatar);
         if (isDisabled && hideMutedSprites) {
             continue;
+        }
         const character = context.characters.find(x => x.avatar == avatar);
+-
         if (!character) {
             continue;
+        }
 -        const spriteFolderName = getSpriteFolderName({ original_avatar: character.avatar }, character.name);
 +        const expressionImage = vnContainer.find(`.expression-holder[data-avatar="${avatar}"]`);
 +        /** @type {JQuery<HTMLElement>} */
 +        let img;
++
 +        const memberSpriteFolderName = getSpriteFolderName({ original_avatar: character.avatar }, character.name);
         // download images if not downloaded yet
         if (spriteCache[spriteFolderNamememberSpriteFolderName] === undefined) {
             spriteCache[spriteFolderNamememberSpriteFolderName] = await getSpritesList(spriteFolderNamememberSpriteFolderName);
+        }
 -        const sprites = spriteCache[spriteFolderName];
 +        const prevExpressionSrc = expressionImage.find('img').attr('src') || null;
 -        const expressionImage = container.find(`.expression-holder[data-avatar="${avatar}"]`);
 -        const defaultExpression = getFallbackExpression();
 -        const defaultSpritePath = sprites.find(x => x.label === defaultExpression)?.path;
 -        const noSprites = sprites.length === 0;
         if (expressionImage!originalExpression && Array.isArray(spriteCache[memberSpriteFolderName]) && spriteCache[memberSpriteFolderName].length > 0) {
 -            if (name == spriteFolderName) {
 +            expression = await getLastMessageSprite(avatar);
 -                await validateImages(spriteFolderName, true);
 +        }
 -                setExpressionOverrideHtml(true); // <= force clear expression override input
 -                const currentSpritePath = labels.includes(expression) ? sprites.find(x => x.label === expression)?.path : '';
 -                const path = currentSpritePath || defaultSpritePath || '';
 +        const spriteFile = chooseSpriteForExpression(memberSpriteFolderName, expression, { prevExpressionSrc: prevExpressionSrc });
 -                const img = expressionImage.find('img');
 +        if (expressionImage.length) {
 +            if (!spriteFolderName || spriteFolderName == memberSpriteFolderName) {
 +                await validateImages(memberSpriteFolderName, true);
 +                setExpressionOverrideHtml(true); // <= force clear expression override input
 +                const path = spriteFile?.imageSrc || '';
 +                img = expressionImage.find('img');
                 await setImage(img, path);
+            }
             expressionImage.toggleClass('hidden', noSprites!spriteFile);
         } else {
             const template = $('#expression-holder').clone();
             template.attr('id', `expression-${avatar}`);

             template.find('.drag-grabber').attr('id', `expression-${avatar}header`);
             $('#visual-novel-wrapper').append(template);
             dragElement($(template[0]));
             template.toggleClass('hidden', noSprites!spriteFile);
             awaitimg setImage(= template.find('img'), defaultSpritePath || '');
 +            await setImage(img, spriteFile?.imageSrc || '');
             const fadeInPromise = new Promise(resolve => {
                 template.fadeIn(250, () => resolve());
             });
             createCharacterPromisessetSpritePromises.push(fadeInPromise);
 -            const setSpritePromise = setLastMessageSprite(template.find('img'), avatar, labels);
 -            setSpritePromises.push(setSpritePromise);
+        }
++
 +        if (!img) {
 +            continue;
 +        }
++
 +        img.attr('data-sprite-folder-name', spriteFolderName);
 +        img.attr('data-expression', expression);
 +        img.attr('data-sprite-filename', spriteFile?.fileName || null);
 +        img.attr('title', expression);
++
 +        if (spriteFile) console.info(`Expression set for group member ${character.name}`, { expression: spriteFile.expression, file: spriteFile.fileName });
 +        else if (expressionImage.length) console.info(`Expression unset for group member ${character.name} - No sprite found`, { expression: expression });
 +        else console.info(`Expression not available for group member ${character.name}`, { expression: expression });
+    }
 -    await Promise.allSettled(createCharacterPromises);
     return setSpritePromises;
+}
 +/**
 + * Classifies the text of the latest message and returns the expression label.
 + * @param {string} avatar - The avatar of the character to get the last message for
 + * @returns {Promise<string>} - The expression label
 + */
 +async function getLastMessageSprite(avatar) {
 +    const context = getContext();
 +    const lastMessage = context.chat.slice().reverse().find(x => x.original_avatar == avatar || (x.force_avatar && x.force_avatar.includes(encodeURIComponent(avatar))));
++
 +    if (lastMessage) {
 +        const text = lastMessage.mes || '';
 +        return await getExpressionLabel(text);
 +    }
++
 +    return null;
 +}
++
 async function visualNovelUpdateLayers(container) {
     const context = getContext();
     const group = context.groups.find(x => x.id == context.groupId);

     const containerWidth = container.width();
     const pivotalPoint = containerWidth * 0.5;
     let images = Array.from($('#visual-novel-wrapper .expression-holder')).sort(sortFunction);
     let imagesWidth = [];
 -    images.sort(sortFunction).each(function () {
 +    for (const image of images) {
 -        imagesWidth.push($(this).width());
 +        if (image instanceof HTMLImageElement && !image.complete) {
 +            await new Promise(resolve => image.addEventListener('load', resolve, { once: true }));
 +        }
 +    }
++
 +    images.forEach(image => {
 +        imagesWidth.push($(image).width());
     });
     let totalWidth = imagesWidth.reduce((a, b) => a + b, 0);

         currentPosition = 0; // Reset the initial position to 0
+    }
     images.sort(sortFunction).eachforEach((indexcurrent, currentindex) => {
         const element = $(current);
         const elementID = element.attr('id');

         element.show();
         const promise = new Promise(resolve => {
 +            if (power_user.reduced_motion) {
 +                element.css('left', currentPosition + 'px');
 +                requestAnimationFrame(() => resolve());
 +            }
 +            else {
                 element.animate({ left: currentPosition + 'px' }, 500, () => {
                     resolve();
                 });
 +            }
         });
         currentPosition += imagesWidth[index];

     await Promise.allSettled(setLayerIndicesPromises);
+}
 -async function setLastMessageSprite(img, avatar, labels) {
 +/**
 -    const context = getContext();
 + * Sets the expression for the given character image.
 -    const lastMessage = context.chat.slice().reverse().find(x => x.original_avatar == avatar || (x.force_avatar && x.force_avatar.includes(encodeURIComponent(avatar))));
 + * @param {JQuery<HTMLElement>} img - The image element to set the image on
+-
 + * @param {string} path - The path to the image
 -    if (lastMessage) {
 + * @returns {Promise<void>} - A promise that resolves when the image is set
 -        const text = lastMessage.mes || '';
 + */
 -        const spriteFolderName = getSpriteFolderName(lastMessage, lastMessage.name);
 -        const sprites = spriteCache[spriteFolderName] || [];
 -        const label = await getExpressionLabel(text);
 -        const path = labels.includes(label) ? sprites.find(x => x.label === label)?.path : '';
+-
 -        if (path) {
 -            setImage(img, path);
 -        }
 -    }
 -}
+-
 async function setImage(img, path) {
     // Cohee: If something goes wrong, uncomment this to return to the old behavior
     /*

     return new Promise(resolve => {
         const prevExpressionSrc = img.attr('src');
         const expressionClone = img.clone();
         const originalId = img.attrdata('idfilename');
         //only swap expressions when necessary
         if (prevExpressionSrc !== path && !img.hasClass('expression-animating')) {

             expressionClone.addClass('expression-clone');
             //make invisible and remove id to prevent double ids
             //must be made invisible to start because they share the same Z-index
             expressionClone.attrdata('idfilename', '').css({ opacity: 0 });
             //add new sprite path to clone src
             expressionClone.attr('src', path);
             //add invisible clone to html

                     //remove old expression
                     img.remove();
                     //replace ID so it becomes the new 'original' expression for next change
                     expressionClone.attrdata('idfilename', originalId);
                     expressionClone.removeClass('expression-animating');
                     // Reset the expression holder min height and width
                     expressionHolder.css('min-width', 100);
                     expressionHolder.css('min-height', 100);
 +                    if (expressionClone.prop('complete')) {
                         resolve();
 +                    } else {
 +                        expressionClone.one('load', () => resolve());
 +                    }
                 });
             expressionClone.removeClass('expression-clone');

     });
+}
 -function onExpressionsShowDefaultInput() {
 +async function moduleWorker({ newChat = false } = {}) {
 -    const value = $(this).prop('checked');
 -    extension_settings.expressions.showDefault = value;
 -    saveSettingsDebounced();
+-
 -    const existingImageSrc = $('img.expression').prop('src');
 -    if (existingImageSrc !== undefined) {                      //if we have an image in src
 -        if (!value && existingImageSrc.includes('/img/default-expressions/')) {    //and that image is from /img/ (default)
 -            $('img.expression').prop('src', '');               //remove it
 -            lastMessage = null;
 -        }
 -        if (value) {
 -            lastMessage = null;
 -        }
 -    }
 -}
+-
 -/**
 -  * Stops animating Talkinghead.
 -  */
 -async function unloadTalkingHead() {
 -    if (!modules.includes('talkinghead')) {
 -        console.debug('talkinghead module is disabled');
 -        return;
 -    }
 -    console.debug('expressions: Stopping Talkinghead');
+-
 -    try {
 -        const url = new URL(getApiUrl());
 -        url.pathname = '/api/talkinghead/unload';
 -        const loadResponse = await doExtrasFetch(url);
 -        if (!loadResponse.ok) {
 -            throw new Error(loadResponse.statusText);
 -        }
 -        //console.log(`Response: ${loadResponseText}`);
 -    } catch (error) {
 -        //console.error(`Error unloading - ${error}`);
 -    }
 -}
+-
 -/**
 -  * Posts `talkinghead.png` of the current character to the talkinghead module in SillyTavern-extras, to start animating it.
 -  */
 -async function loadTalkingHead() {
 -    if (!modules.includes('talkinghead')) {
 -        console.debug('talkinghead module is disabled');
 -        return;
 -    }
 -    console.debug('expressions: Starting Talkinghead');
+-
 -    const spriteFolderName = getSpriteFolderName();
+-
 -    const talkingheadPath = `/characters/${encodeURIComponent(spriteFolderName)}/talkinghead.png`;
 -    const emotionsSettingsPath = `/characters/${encodeURIComponent(spriteFolderName)}/_emotions.json`;
 -    const animatorSettingsPath = `/characters/${encodeURIComponent(spriteFolderName)}/_animator.json`;
+-
 -    try {
 -        const spriteResponse = await fetch(talkingheadPath);
+-
 -        if (!spriteResponse.ok) {
 -            throw new Error(spriteResponse.statusText);
 -        }
+-
 -        const spriteBlob = await spriteResponse.blob();
 -        const spriteFile = new File([spriteBlob], 'talkinghead.png', { type: 'image/png' });
 -        const formData = new FormData();
 -        formData.append('file', spriteFile);
+-
 -        const url = new URL(getApiUrl());
 -        url.pathname = '/api/talkinghead/load';
+-
 -        const loadResponse = await doExtrasFetch(url, {
 -            method: 'POST',
 -            body: formData,
 -        });
+-
 -        if (!loadResponse.ok) {
 -            throw new Error(loadResponse.statusText);
 -        }
+-
 -        const loadResponseText = await loadResponse.text();
 -        console.log(`Load talkinghead response: ${loadResponseText}`);
+-
 -        // Optional: per-character emotion templates
 -        let emotionsSettings;
 -        try {
 -            const emotionsResponse = await fetch(emotionsSettingsPath);
 -            if (emotionsResponse.ok) {
 -                emotionsSettings = await emotionsResponse.json();
 -                console.log(`Loaded ${emotionsSettingsPath}`);
 -            } else {
 -                throw new Error();
 -            }
 -        }
 -        catch (error) {
 -            emotionsSettings = {};  // blank -> use server defaults (to unload the previous character's customizations)
 -            console.log(`No valid config at ${emotionsSettingsPath}, using server defaults`);
 -        }
 -        try {
 -            const url = new URL(getApiUrl());
 -            url.pathname = '/api/talkinghead/load_emotion_templates';
 -            const apiResult = await doExtrasFetch(url, {
 -                method: 'POST',
 -                headers: {
 -                    'Content-Type': 'application/json',
 -                    'Bypass-Tunnel-Reminder': 'bypass',
 -                },
 -                body: JSON.stringify(emotionsSettings),
 -            });
+-
 -            if (!apiResult.ok) {
 -                throw new Error(apiResult.statusText);
 -            }
 -        }
 -        catch (error) {
 -            // it's ok if not supported
 -            console.log('Failed to send _emotions.json (backend too old?), ignoring');
 -        }
+-
 -        // Optional: per-character animator and postprocessor config
 -        let animatorSettings;
 -        try {
 -            const animatorResponse = await fetch(animatorSettingsPath);
 -            if (animatorResponse.ok) {
 -                animatorSettings = await animatorResponse.json();
 -                console.log(`Loaded ${animatorSettingsPath}`);
 -            } else {
 -                throw new Error();
 -            }
 -        }
 -        catch (error) {
 -            animatorSettings = {};  // blank -> use server defaults (to unload the previous character's customizations)
 -            console.log(`No valid config at ${animatorSettingsPath}, using server defaults`);
 -        }
 -        try {
 -            const url = new URL(getApiUrl());
 -            url.pathname = '/api/talkinghead/load_animator_settings';
 -            const apiResult = await doExtrasFetch(url, {
 -                method: 'POST',
 -                headers: {
 -                    'Content-Type': 'application/json',
 -                    'Bypass-Tunnel-Reminder': 'bypass',
 -                },
 -                body: JSON.stringify(animatorSettings),
 -            });
+-
 -            if (!apiResult.ok) {
 -                throw new Error(apiResult.statusText);
 -            }
 -        }
 -        catch (error) {
 -            // it's ok if not supported
 -            console.log('Failed to send _animator.json (backend too old?), ignoring');
 -        }
 -    } catch (error) {
 -        console.error(`Error loading talkinghead image: ${talkingheadPath} - ${error}`);
 -    }
 -}
+-
 -function handleImageChange() {
 -    const imgElement = document.querySelector('img#expression-image.expression');
+-
 -    if (!imgElement || !(imgElement instanceof HTMLImageElement)) {
 -        console.log('Cannot find addExpressionImage()');
 -        return;
 -    }
+-
 -    if (isTalkingHeadEnabled() && modules.includes('talkinghead')) {
 -        const talkingheadResultFeedSrc = `${getApiUrl()}/api/talkinghead/result_feed`;
 -        $('#expression-holder').css({ display: '' });
 -        if (imgElement.src !== talkingheadResultFeedSrc) {
 -            const expressionImageElement = document.querySelector('.expression_list_image');
+-
 -            if (expressionImageElement && expressionImageElement instanceof HTMLImageElement) {
 -                doExtrasFetch(expressionImageElement.src, {
 -                    method: 'HEAD',
 -                })
 -                    .then(response => {
 -                        if (response.ok) {
 -                            imgElement.src = talkingheadResultFeedSrc;
 -                        }
 -                    })
 -                    .catch(error => {
 -                        console.error(error);
 -                    });
 -            }
 -        }
 -    } else {
 -        imgElement.src = '';  // remove in case char doesn't have expressions
+-
 -        // When switching Talkinghead off, force-set the character to the last known expression, if any.
 -        // This preserves the same expression Talkinghead had at the moment it was switched off.
 -        const charName = getContext().name2;
 -        const last = lastExpression[charName];
 -        const targetExpression = last ? last : getFallbackExpression();
 -        setExpression(charName, targetExpression, true);
 -    }
 -}
+-
 -async function moduleWorker() {
     const context = getContext();
 -    // Hide and disable Talkinghead while not in extras
 -    $('#image_type_block').toggle(extension_settings.expressions.api == EXPRESSION_API.extras);
+-
 -    if (extension_settings.expressions.api != EXPRESSION_API.extras && extension_settings.expressions.talkinghead) {
 -        $('#image_type_toggle').prop('checked', false);
 -        setTalkingHeadState(false);
 -    }
+-
     // non-characters not supported
     if (!context.groupId && context.characterId === undefined) {
         removeExpression();

+    }
     const currentLastMessage = getLastCharacterMessage();
     let spriteFolderName = context.groupId ? getSpriteFolderName(currentLastMessage, currentLastMessage.name) : getSpriteFolderName();
     // character has no expressions or it is not loaded
     if (Object.keys(spriteCache).length === 0) {

         offlineMode.css('display', 'none');
+    }
 +    if (context.groupId && vnMode && newChat) {
 +        await forceUpdateVisualNovelMode();
 +    }
++
     // Don't bother classifying if current char has no sprites and no default expressions are enabled
     if ((!Array.isArray(spriteCache[spriteFolderName]) || spriteCache[spriteFolderName].length === 0) && !extension_settings.expressions.showDefault) {
         return;

@@ -732,11 +586,11 @@ async function moduleWorker() {
732	586	const force = !!context.groupId;
733	587
734	588	// Character won't be angry on you for swiping
735	589	if (currentLastMessage.mes == '...' && expressionsList.includes(getFallbackExpression()extension_settings.expressions.fallback_expression)) {
736	590	expression = getFallbackExpression()extension_settings.expressions.fallback_expression;
737	591	}
738	592
739	593	await sendExpressionCall(spriteFolderName, expression, { force: force, vnMode: vnMode });
740	594	}
741	595	catch (error) {
742	596	console.log(error);

+    }
+}
 -/**
 -  * Starts/stops Talkinghead talking animation.
 -  *
 -  * Talking starts only when all the following conditions are met:
 -  *   - The LLM is currently streaming its output.
 -  *   - The AI's current last message is non-empty, and also not just '...' (as produced by a swipe).
 -  *   - The AI's current last message has changed from what we saw during the previous call.
 -  *
 -  * In all other cases, talking stops.
 -  *
 -  * A Talkinghead API call is made only when the talking state changes.
 -  *
 -  * Note that also the TTS system, if enabled, starts/stops the Talkinghead talking animation.
 -  * See `talkingAnimation` in `SillyTavern/public/scripts/extensions/tts/index.js`.
 -  */
 -async function updateTalkingState() {
 -    // Don't bother if Talkinghead is disabled or not loaded.
 -    if (!isTalkingHeadEnabled() || !modules.includes('talkinghead')) {
 -        return;
 -    }
+-
 -    const context = getContext();
 -    const currentLastMessage = getLastCharacterMessage();
+-
 -    try {
 -        // TODO: Not sure if we need also "&& !context.groupId" here - the classify check in `moduleWorker`
 -        //       (that similarly checks the streaming processor state) does that for some reason.
 -        //       Talkinghead isn't currently designed to work with groups.
 -        const lastMessageChanged = !((lastCharacter === context.characterId || lastCharacter === context.groupId) && lastTalkingStateMessage === currentLastMessage.mes);
 -        const url = new URL(getApiUrl());
 -        let newTalkingState;
 -        if (context.streamingProcessor && !context.streamingProcessor.isFinished &&
 -            currentLastMessage.mes.length !== 0 && currentLastMessage.mes !== '...' && lastMessageChanged) {
 -            url.pathname = '/api/talkinghead/start_talking';
 -            newTalkingState = true;
 -        } else {
 -            url.pathname = '/api/talkinghead/stop_talking';
 -            newTalkingState = false;
 -        }
 -        try {
 -            // Call the Talkinghead API only if the talking state changed.
 -            if (newTalkingState !== lastTalkingState) {
 -                console.debug(`updateTalkingState: calling ${url.pathname}`);
 -                await doExtrasFetch(url);
 -            }
 -        }
 -        catch (error) {
 -            // it's ok if not supported
 -        }
 -        finally {
 -            lastTalkingState = newTalkingState;
 -        }
 -    }
 -    catch (error) {
 -        // console.log(error);
 -    }
 -    finally {
 -        lastTalkingStateMessage = currentLastMessage.mes;
 -    }
 -}
+-
 -/**
 - * Checks whether the current character has a talkinghead image available.
 - * @returns {Promise<boolean>} True if the character has a talkinghead image available, false otherwise.
 - */
 -async function isTalkingHeadAvailable() {
 -    let spriteFolderName = getSpriteFolderName();
+-
 -    try {
 -        await validateImages(spriteFolderName);
+-
 -        let talkingheadObj = spriteCache[spriteFolderName].find(obj => obj.label === 'talkinghead');
 -        let talkingheadPath = talkingheadObj ? talkingheadObj.path : null;
+-
 -        if (talkingheadPath != null) {
 -            return true;
 -        } else {
 -            await unloadTalkingHead();
 -            return false;
 -        }
 -    } catch (err) {
 -        return err;
 -    }
 -}
+-
 function getSpriteFolderName(characterMessage = null, characterName = null) {
     const context = getContext();
     let spriteFolderName = characterName ?? context.name2;

     return spriteFolderName;
+}
 -function setTalkingHeadState(newState) {
 -    console.debug(`expressions: New talkinghead state: ${newState}`);
 -    extension_settings.expressions.talkinghead = newState; // Store setting
 -    saveSettingsDebounced();
+-
 -    if ([EXPRESSION_API.local, EXPRESSION_API.llm, EXPRESSION_API.webllm].includes(extension_settings.expressions.api)) {
 -        return;
 -    }
+-
 -    isTalkingHeadAvailable().then(result => {
 -        if (result) {
 -            //console.log("talkinghead exists!");
+-
 -            if (extension_settings.expressions.talkinghead) {
 -                loadTalkingHead();
 -            } else {
 -                unloadTalkingHead();
 -            }
 -            handleImageChange(); // Change image as needed
+-
+-
 -        } else {
 -            //console.log("talkinghead does not exist.");
 -        }
 -    });
 -}
+-
 function getFolderNameByMessage(message) {
     const context = getContext();
     let avatarPath = '';

     return folderName;
+}
 -async function sendExpressionCall(name, expression, force, vnMode) {
 +/**
 -    lastExpression[name.split('/')[0]] = expression;
 + * Update the expression for the given character.
 -    if (!vnMode) {
 + *
 + * @param {string} spriteFolderName The character name, optionally with a sprite folder override, e.g. "folder/expression".
 + * @param {string} expression The expression label, e.g. "amusement", "joy", etc.
 + * @param {Object} [options] Additional options
 + * @param {boolean} [options.force=false] If true, the expression will be sent even if it is the same as the current expression.
 + * @param {boolean} [options.vnMode=null] If true, the expression will be sent in Visual Novel mode. If null, it will be determined by the current chat mode.
 + * @param {string?} [options.overrideSpriteFile=null] - Set if a specific sprite file should be used. Must be sprite file name.
 + */
 +export async function sendExpressionCall(spriteFolderName, expression, { force = false, vnMode = null, overrideSpriteFile = null } = {}) {
 +    lastExpression[spriteFolderName.split('/')[0]] = expression;
 +    if (vnMode === null) {
         vnMode = isVisualNovelMode();
+    }
     if (vnMode) {
         await updateVisualNovelMode(namespriteFolderName, expression);
     } else {
         setExpression(namespriteFolderName, expression, { force: force, overrideSpriteFile: overrideSpriteFile });
+    }
+}
 async function setSpriteSetCommandsetSpriteFolderCommand(_, folder) {
     if (!folder) {
         console.log('Clearing sprite set');
         folder = '';
+    }
     if (folder.startsWith('/') || folder.startsWith('\\')) {
 -        folder = folder.slice(1);
+-
         const currentLastMessage = getLastCharacterMessage();
 +        folder = folder.slice(1);
         folder = `${currentLastMessage.name}/${folder}`;
+    }
     $('#expression_override').val(folder.trim());
     onClickExpressionOverrideButton();
 -    // removeExpression();
++
 -    // moduleWorker();
 +    // No need to resend the expression, the folder override will automatically update the currently displayed one.
 -    const vnMode = isVisualNovelMode();
 -    await sendExpressionCall(folder, lastExpression, true, vnMode);
     return '';
+}
 async function classifyCallback(/** @type {{api: string?, prompt: string?}} */ { api = null, prompt = null }, text) {
     if (!text) {
         toastr.warningerror('No text provided');
         return '';
+    }
     if (api && !Object.keys(EXPRESSION_API).includes(api)) {
         toastr.warningerror('Invalid API provided');
         return '';
+    }

     return label;
+}
 -async function setSpriteSlashCommand(_, spriteId) {
 +/** @type {(args: {type: 'expression' | 'sprite'}, searchTerm: string) => Promise<string>} */
 -    if (!spriteId) {
 +async function setSpriteSlashCommand({ type }, searchTerm) {
 -        console.log('No sprite id provided');
 +    type ??= 'expression';
 +    searchTerm = searchTerm.trim().toLowerCase();
 +    if (!searchTerm) {
 +        toastr.error(t`No expression or sprite name provided`, t`Set Sprite`);
         return '';
+    }
 -    spriteId = spriteId.trim().toLowerCase();
 +    const currentLastMessage = selected_group ? getLastCharacterMessage() : null;
 +    const spriteFolderName = getSpriteFolderName(currentLastMessage, currentLastMessage?.name);
++
 +    let label = searchTerm;
++
 +    /** @type {string?} */
 +    let spriteFile = null;
 -    // In Talkinghead mode, don't check for the existence of the sprite
 -    // (emotion names are the same as for sprites, but it only needs "talkinghead.png").
 -    const currentLastMessage = getLastCharacterMessage();
 -    const spriteFolderName = getSpriteFolderName(currentLastMessage, currentLastMessage.name);
 -    let label = spriteId;
 -    if (!isTalkingHeadEnabled() || !modules.includes('talkinghead')) {
     await validateImages(spriteFolderName);
 -        // Fuzzy search for sprite
 +    // Handle reset as a special term and just reset the sprite via expression call
 -        const fuse = new Fuse(spriteCache[spriteFolderName], { keys: ['label'] });
 +    if (searchTerm === RESET_SPRITE_LABEL) {
 -        const results = fuse.search(spriteId);
 +        await sendExpressionCall(spriteFolderName, label, { force: true });
 -        const spriteItem = results[0]?.item;
 +        return lastExpression[spriteFolderName] ?? '';
 +    }
++
 +    switch (type) {
 +        case 'expression': {
 +            // Fuzzy search for expression
 +            const existingExpressions = getCachedExpressions().map(x => ({ label: x }));
 +            const results = performFuzzySearch('expression-expressions', existingExpressions, [
 +                { name: 'label', weight: 1 },
 +            ], searchTerm);
 +            const matchedExpression = results[0]?.item;
 +            if (!matchedExpression) {
 +                toastr.warning(t`No expression found for search term ${searchTerm}`, t`Set Sprite`);
 +                return '';
 +            }
 -        if (!spriteItem) {
 +            label = matchedExpression.label;
 -            console.log('No sprite found for search term ' + spriteId);
 +            break;
 +        }
 +        case 'sprite': {
 +            // Fuzzy search for sprite file
 +            const sprites = spriteCache[spriteFolderName].map(x => x.files).flat();
 +            const results = performFuzzySearch('expression-expressions', sprites, [
 +                { name: 'title', weight: 1 },
 +                { name: 'fileName', weight: 1 },
 +            ], searchTerm);
 +            const matchedSprite = results[0]?.item;
 +            if (!matchedSprite) {
 +                toastr.warning(t`No sprite file found for search term ${searchTerm}`, t`Set Sprite`);
                 return '';
+            }
                     label = spriteItemmatchedSprite.labelexpression;
 +            spriteFile = matchedSprite.fileName;
 +            break;
 +        }
 +        default: throw Error('Invalid sprite set type: ' + type);
+    }
 -    const vnMode = isVisualNovelMode();
 +    await sendExpressionCall(spriteFolderName, label, { force: true, overrideSpriteFile: spriteFile });
 -    await sendExpressionCall(spriteFolderName, label, true, vnMode);
++
     return label;
+}

+}
 /**
 + * Generates a unique sprite name by appending an index to the given expression. *
 + * @param {string} expression - The base expression to be used as the prefix for the sprite name.
 + * @param {ExpressionImage[]} existingFiles - An array of existing file objects, each containing a fileName property.
 + * @returns {string} - A unique sprite name with the format "expression-index".
 + */
 +function generateUniqueSpriteName(expression, existingFiles) {
 +    let index = existingFiles.length;
 +    let newSpriteName;
 +    do {
 +        newSpriteName = `${expression}-${index++}`;
 +    } while (existingFiles.some(file => withoutExtension(file.fileName) === newSpriteName));
 +    return newSpriteName;
 +}
++
 +/**
  * Slash command callback for /uploadsprite
+ *
  * label= is required

  * @param {object} args
  * @param {string} args.name Character name or avatar key, passed through findChar
  * @param {string} args.label Expression label
  * @param {string} [args.folder=null] SpriteOptional sprite folder path, processed using backslash rules
 + * @param {string?} [args.spriteName=null] Optional sprite name
  * @param {string} imageUrl Image URI to fetch and upload
  * @returns {Promise<voidstring>} the sprite name
  */
 async function uploadSpriteCommand({ name, label, folder = null, spriteName = null }, imageUrl) {
     if (!imageUrl) throw new Error('Image URL is required');
     if (!label || typeof label !== 'string') throw new Error('Expression label is required');{
 +        toastr.error(t`Expression label is required`, t`Error Uploading Sprite`);
 +        return '';
 +    }
     label = label.replace(/[^a-z]/gi, '').toLowerCase().trim();
 -    if (!label) throw new Error('Expression label must contain at least one letter');
 +    if (!label) {
 +        toastr.error(t`Expression label must contain at least one letter`, t`Error Uploading Sprite`);
 +        return '';
 +    }
++
 +    spriteName = spriteName || label;
 +    if (!validateExpressionSpriteName(label, spriteName)) {
 +        toastr.error(t`Invalid sprite name. Must follow the naming pattern for expression sprites.`, t`Error Uploading Sprite`);
 +        return '';
 +    }
     name = name || getLastCharacterMessage().original_avatar || getLastCharacterMessage().name;
     const char = findChar({ name });

         formData.append('name', folder); // this is the folder or character name
         formData.append('label', label); // this is the expression label
         formData.append('avatar', file); // this is the image file
 +        formData.append('spriteName', spriteName); // this is a redundant comment
         await handleFileUpload('/api/sprites/upload', formData);
         console.debug(`[${MODULE_NAME}] Upload of ${imageUrl} completed for ${name} with label ${label}`);

@@ -1048,6 +858,8 @@ async function uploadSpriteCommand({ name, label, folder }, imageUrl) {
1048	858	console.error(`[${MODULE_NAME}] Error uploading file:`, error);
1049	859	throw error;
1050	860	}
	861	+
	862	+ return spriteName;
1051	863	}
1052	864
1053	865	/**

 function onTextGenSettingsReady(args) {
     // Only call if inside an API call
     if (inApiCall && extension_settings.expressions.api === EXPRESSION_API.llm && isJsonSchemaSupported()) {
 -        const emotions = DEFAULT_EXPRESSIONS.filter((e) => e != 'talkinghead');
 +        const emotions = DEFAULT_EXPRESSIONS;
         Object.assign(args, {
             top_k: 1,
             stop: [],

  * @param {EXPRESSION_API} [expressionsApi=extension_settings.expressions.api] - The expressions API to use for classification.
  * @param {object} [options={}] - Optional arguments.
  * @param {string?} [options.customPrompt=null] - The custom prompt to use for classification.
  * @returns {Promise<string?>} - The label of the expression.
  */
 export async function getExpressionLabel(text, expressionsApi = extension_settings.expressions.api, { customPrompt = null } = {}) {
     // Return if text is undefined, saving a costly fetch request
     if ((!modules.includes('classify') && expressionsApi == EXPRESSION_API.extras) || !text) {
         return getFallbackExpression()extension_settings.expressions.fallback_expression;
+    }
     if (extension_settings.expressions.translate && typeof window['globalThis.translate'] === 'function') {
         text = await window['globalThis.translate'](text, 'en');
+    }
     text = sampleClassifyText(text);

                     await waitUntilCondition(() => online_status !== 'no_connection', 3000, 250);
                 } catch (error) {
                     console.warn('No LLM connection. Using fallback expression', error);
                     return getFallbackExpression()extension_settings.expressions.fallback_expression;
+                }
                 const expressionsList = await getExpressionsList();

             case EXPRESSION_API.webllm: {
                 if (!isWebLlmSupported()) {
                     console.warn('WebLLM is not supported. Using fallback expression');
                     return getFallbackExpression()extension_settings.expressions.fallback_expression;
+                }
                 const expressionsList = await getExpressionsList();

@@ -1258,9 +1070,9 @@ export async function getExpressionLabel(text, expressionsApi = extension_settin
1258	1070	} break;
1259	1071	}
1260	1072	} catch (error) {
1261	1073	toastr.infoerror('Could not classify expression. Check the console or your backend for more information.');
1262	1074	console.error(error);
1263	1075	return getFallbackExpression()extension_settings.expressions.fallback_expression;
1264	1076	}
1265	1077	}
1266	1078

     $('#no_chat_expressions').show();
+}
 -async function validateImages(character, forceRedrawCached) {
 +/**
 -    if (!character) {
 + * Validate a character's sprites, and redraw the sprites list if not done before or forced to redraw.
 + * @param {string} spriteFolderName - The character sprite folder to validate
 + * @param {boolean} [forceRedrawCached=false] - Whether to force redrawing the sprites list even if it's already been drawn before
 + */
 +async function validateImages(spriteFolderName, forceRedrawCached = false) {
 +    if (!spriteFolderName) {
         return;
+    }
     const labels = await getExpressionsList();
     if (spriteCache[characterspriteFolderName]) {
         if (forceRedrawCached && $('#image_list').data('name') !== characterspriteFolderName) {
             console.debug('force redrawing character sprites list');
             await drawSpritesList(characterspriteFolderName, labels, spriteCache[characterspriteFolderName]);
+        }
         return;
+    }
     const sprites = await getSpritesList(characterspriteFolderName);
     let validExpressions = await drawSpritesList(characterspriteFolderName, labels, sprites);
     spriteCache[characterspriteFolderName] = validExpressions;
 +}
++
 +/**
 + * Takes a given sprite as returned from the server, and enriches it with additional data for display/sorting
 + * @param {{ path: string, label: string }} sprite
 + * @returns {ExpressionImage}
 + */
 +function getExpressionImageData(sprite) {
 +    const fileName = sprite.path.split('/').pop().split('?')[0];
 +    const fileNameWithoutExtension = fileName.replace(/\.[^/.]+$/, '');
 +    return {
 +        expression: sprite.label,
 +        fileName: fileName,
 +        title: fileNameWithoutExtension,
 +        imageSrc: sprite.path,
 +        type: 'success',
 +        isCustom: extension_settings.expressions.custom?.includes(sprite.label),
 +    };
+}
 -async function drawSpritesList(character, labels, sprites) {
 +/**
 + * Populate the character expression list with sprites for the given character.
 + * @param {string} spriteFolderName - The name of the character to populate the list for
 + * @param {string[]} labels - An array of expression labels that are valid
 + * @param {Expression[]} sprites - An array of sprites
 + * @returns {Promise<Expression[]>} An array of valid expression labels
 + */
 +async function drawSpritesList(spriteFolderName, labels, sprites) {
 +    /** @type {Expression[]} */
     let validExpressions = [];
++
     $('#no_chat_expressions').hide();
     $('#open_chat_expressions').show();
     $('#image_list').empty();
     $('#image_list').data('name', characterspriteFolderName);
     $('#image_list_header_name').text(characterspriteFolderName);
     if (!Array.isArray(labels)) {
         return [];
+    }
     for (const itemexpression of labels.sort()) {
 -        const sprite = sprites.find(x => x.label == item);
 +        const isCustom = extension_settings.expressions.custom?.includes(expression);
 -        const isCustom = extension_settings.expressions.custom.includes(item);
 +        const images = sprites
+-
 +            .filter(s => s.label === expression)
 -        if (sprite) {
 +            .map(s => s.files)
             validExpressions.pushflat(sprite);
 -            const listItem = await getListItem(item, sprite.path, 'success', isCustom);
++
 +        if (images.length === 0) {
 +            const listItem = await getListItem(expression, {
 +                isCustom,
 +                images: [getPlaceholderImage(expression, isCustom)],
 +            });
             $('#image_list').append(listItem);
 +            continue;
+        }
 -        else {
++
 -            const listItem = await getListItem(item, '/img/No-Image-Placeholder.svg', 'failure', isCustom);
 +        validExpressions.push({ label: expression, files: images });
++
 +        // Render main = first file, additional = rest
 +        let listItem = await getListItem(expression, {
 +            isCustom,
 +            images,
 +        });
         $('#image_list').append(listItem);
+    }
 -    }
     return validExpressions;
+}
 /**
  * Renders a list item template for the expressions list.
  * @param {string} itemexpression Expression name
  * @param {stringobject} imageSrc Pathargs toArguments imageobject
 - * @param {'success' | 'failure'} textClass 'success' or 'failure'
 + * @param {ExpressionImage[]} [args.images] Array of image objects
  * @param {boolean} [args.isCustom=false] If expression is added by user
  * @returns {Promise<string>} Rendered list item template
  */
 async function getListItem(itemexpression, imageSrc,{ textClassimages, isCustom = false } = {}) {
     return renderExtensionTemplateAsync(MODULE_NAME, 'list-item', { itemexpression, imageSrcimages, textClass,isCustom: isCustom ?? false });
+}
 +/**
 + * Fetches and processes the list of sprites for a given character name.
 + * Retrieves sprite data from the server and organizes it into labeled groups.
 + *
 + * @param {string} name - The character name to fetch sprites for
 + * @returns {Promise<Expression[]>} A promise that resolves to an array of grouped expression objects, each containing a label and associated image data
 + */
++
 async function getSpritesList(name) {
     console.debug('getting sprites list');
     try {
         const result = await fetch(`/api/sprites/get?name=${encodeURIComponent(name)}`);
 +        /** @type {{ label: string, path: string }[]} */
         let sprites = result.ok ? (await result.json()) : [];
 -        return sprites;
++
 +        /** @type {Expression[]} */
 +        const grouped = sprites.reduce((acc, sprite) => {
 +            const imageData = getExpressionImageData(sprite);
 +            let existingExpression = acc.find(exp => exp.label === sprite.label);
 +            if (existingExpression) {
 +                existingExpression.files.push(imageData);
 +            } else {
 +                acc.push({ label: sprite.label, files: [imageData] });
 +            }
++
 +            return acc;
 +        }, []);
++
 +        // Sort the sprites for each expression alphabetically, but keep the main expression file at the front
 +        for (const expression of grouped) {
 +            expression.files.sort((a, b) => {
 +                if (a.title === expression.label) return -1;
 +                if (b.title === expression.label) return 1;
 +                return a.title.localeCompare(b.title);
 +            });
++
 +            // Mark all besides the first sprite as 'additional'
 +            for (let i = 1; i < expression.files.length; i++) {
 +                expression.files[i].type = 'additional';
 +            }
 +        }
++
 +        return grouped;
+    }
     catch (err) {
         console.log(err);

     const defaultPicker = $('#expression_fallback');
     defaultPicker.empty();
 -    const fallbackExpression = getFallbackExpression();
++
 +    addOption(OPTION_NO_FALLBACK, '[ No fallback ]', !extension_settings.expressions.fallback_expression);
 +    addOption(OPTION_EMOJI_FALLBACK, '[ Default emojis ]', !!extension_settings.expressions.showDefault);
     for (const expression of expressions) {
 +        addOption(expression, expression, expression == extension_settings.expressions.fallback_expression);
 +    }
++
 +    /** @type {(value: string, label: string, isSelected: boolean) => void} */
 +    function addOption(value, label, isSelected) {
         const option = document.createElement('option');
         option.value = expressionvalue;
         option.text = expressionlabel;
         option.selected = expression == fallbackExpressionisSelected;
         defaultPicker.append(option);
+    }
+}
 +/**
 + * Retrieves a unique list of cached expressions.
 + * Combines the default expressions list with custom user-defined expressions.
 + *
 + * @returns {string[]} An array of unique expression labels
 + */
++
 function getCachedExpressions() {
     if (!Array.isArray(expressionsList)) {
         return [];

@@ -1463,7 +1369,7 @@ export async function getExpressionsList() {
1463	1369	}
1464	1370
1465	1371	// If there was no specific list, or an error, just return the default expressions
1466	1372	expressionsList = DEFAULT_EXPRESSIONS.filter(e => e !== 'talkinghead').slice();
1467	1373	return expressionsList;
1468	1374	}
1469	1375

     return [...result, ...extension_settings.expressions.custom].filter(onlyUnique);
+}
 -async function setExpression(character, expression, force) {
 +/**
 -    if (!isTalkingHeadEnabled() || !modules.includes('talkinghead')) {
 + * Selects a sprite from the given sprite folder for the given expression.
 -        console.debug('entered setExpressions');
 + *
 -        await validateImages(character);
 + * If multiple sprites are allowed for the expression, it will randomly select one.
 + * If the rerollIfSame option is enabled, it will only select a different sprite if the previous sprite was the same.
 + * If the overrideSpriteFile option is set, it will look for the sprite with the given file name instead of randomly selecting one.
 + *
 + * @param {string} spriteFolderName - The name of the sprite folder
 + * @param {string} expression - The expression to find the sprite for
 + * @param {object} [options] - Options to select the sprite
 + * @param {string} [options.prevExpressionSrc=null] - The source of the previous expression
 + * @param {string} [options.overrideSpriteFile=null] - The file name of the sprite to select
 + * @returns {ExpressionImage?} - The selected sprite
 + */
 +function chooseSpriteForExpression(spriteFolderName, expression, { prevExpressionSrc = null, overrideSpriteFile = null } = {}) {
 +    if (!spriteCache[spriteFolderName]) return null;
 +    if (expression === RESET_SPRITE_LABEL) return null;
++
 +    // Search for sprites of that expression - or fallback expression sprites if enabled
 +    let sprite = spriteCache[spriteFolderName].find(x => x.label === expression);
 +    if (!(sprite?.files.length > 0) && extension_settings.expressions.fallback_expression) {
 +        sprite = spriteCache[spriteFolderName].find(x => x.label === extension_settings.expressions.fallback_expression);
 +        console.debug('Expression', expression, 'not found. Using fallback expression', extension_settings.expressions.fallback_expression);
 +    }
 +    if (!(sprite?.files.length > 0)) return null;
++
 +    let spriteFile = sprite.files[0];
++
 +    // If a specific sprite file should be set, we are looking it up here
 +    if (overrideSpriteFile) {
 +        const searched = sprite.files.find(x => x.fileName === overrideSpriteFile);
 +        if (searched) spriteFile = searched;
 +        else toastr.warning(t`Couldn't find sprite file ${overrideSpriteFile} for expression ${expression}.`, t`Sprite Not Found`);
 +    }
 +    // Else calculate next expression, if multiple are allowed
 +    else if (extension_settings.expressions.allowMultiple && sprite.files.length > 1) {
 +        let possibleFiles = sprite.files;
 +        if (extension_settings.expressions.rerollIfSame) {
 +            possibleFiles = possibleFiles.filter(x => !prevExpressionSrc || x.imageSrc !== prevExpressionSrc);
 +        }
 +        spriteFile = possibleFiles[Math.floor(Math.random() * possibleFiles.length)];
 +    }
++
 +    return spriteFile;
++
 +}
++
 +/**
 + * Set the expression of a character.
 + * @param {string} spriteFolderName - The name of the character (folder name - can also be a costume override)
 + * @param {string} expression - The expression or sprite name to set
 + * @param {Object} options - Optional parameters
 + * @param {boolean} [options.force=false] - Whether to force the expression change even if Visual Novel mode is on
 + * @param {string?} [options.overrideSpriteFile=null] - Set if a specific sprite file should be used. Must be sprite file name.
 + * @returns {Promise<void>} A promise that resolves when the expression has been set.
 + */
 +async function setExpression(spriteFolderName, expression, { force = false, overrideSpriteFile = null } = {}) {
 +    await validateImages(spriteFolderName);
     const img = $('img.expression');
     const prevExpressionSrc = img.attr('src');
     const expressionClone = img.clone();
 -        const sprite = (spriteCache[character] && spriteCache[character].find(x => x.label === expression));
 +    const spriteFile = chooseSpriteForExpression(spriteFolderName, expression, { prevExpressionSrc: prevExpressionSrc, overrideSpriteFile: overrideSpriteFile });
 -        console.debug('checking for expression images to show..');
 +    if (spriteFile) {
 -        if (sprite) {
 -            console.debug('setting expression from character images folder');
+-
         if (force && isVisualNovelMode()) {
             const context = getContext();
             const group = context.groups.find(x => x.id === context.groupId);
 -                for (const member of group.members) {
 +            // If it's a folder, make sure we find the group member based on the actual name
 -                    const groupMember = context.characters.find(x => x.avatar === member);
 +            const memberName = spriteFolderName.split('/')[0] ?? spriteFolderName;
+-
 -                    if (!groupMember) {
 -                        continue;
 -                    }
 -                    if (groupMember.name == character) {
 +            const groupMember = group.members
 -                        await setImage($(`.expression-holder[data-avatar="${member}"] img`), sprite.path);
 +                .map(member => context.characters.find(x => x.avatar === member))
 +                .find(groupMember => groupMember && groupMember.name === memberName);
 +            if (groupMember) {
 +                await setImage($(`.expression-holder[data-avatar="${groupMember.avatar}"] img`), spriteFile.imageSrc);
                 return;
+            }
+        }
 -            }
++
         //only swap expressions when necessary
                     if (prevExpressionSrc !== spritespriteFile.pathimageSrc
             && !img.hasClass('expression-animating')) {
             //clone expression
             expressionClone.addClass('expression-clone');

             //must be made invisible to start because they share the same Z-index
             expressionClone.attr('id', '').css({ opacity: 0 });
             //add new sprite path to clone src
                             expressionClone.attr('src', spritespriteFile.pathimageSrc);
 +            //set relevant data tags
 +            expressionClone.attr('data-sprite-folder-name', spriteFolderName);
 +            expressionClone.attr('data-expression', expression);
 +            expressionClone.attr('data-sprite-filename', spriteFile.fileName);
 +            expressionClone.attr('title', expression);
             //add invisible clone to html
             expressionClone.appendTo($('#expression-holder'));

                     expressionHolder.css('min-height', 100);
                 });
+-
             expressionClone.removeClass('expression-clone');
             expressionClone.removeClass('default');
             expressionClone.off('error');
                             expressionClone.on('error', function (error) {
                                     console.debug('Expression image error', spritespriteFile.pathimageSrc, error);
                 $(this).attr('src', '');
                 $(this).off('error');
                 if (force && extension_settings.expressions.showDefault) {
 -                        setDefault();
 +                    setDefaultEmojiForImage(img, expression);
+                }
             });
+        }
++
 +        console.info('Expression set', { expression: spriteFile.expression, file: spriteFile.fileName });
+    }
     else {
 -            if (extension_settings.expressions.showDefault) {
 +        img.attr('data-sprite-folder-name', spriteFolderName);
 -                setDefault();
 -            }
 -        }
 -        function setDefault() {
 +        img.off('error');
 -            console.debug('setting default');
 -            const defImgUrl = `/img/default-expressions/${expression}.png`;
 -            //console.log(defImgUrl);
 -            img.attr('src', defImgUrl);
 -            img.addClass('default');
 -        }
 -        document.getElementById('expression-holder').style.display = '';
 +        if (extension_settings.expressions.showDefault && expression !== RESET_SPRITE_LABEL) {
 +            setDefaultEmojiForImage(img, expression);
         } else {
 -        // Set the Talkinghead emotion to the specified expression
 +            setNoneForImage(img, expression);
 -        // TODO: For now, Talkinghead emote only supported when VN mode is off; see also updateVisualNovelMode.
 -        try {
 -            let result = await isTalkingHeadAvailable();
 -            if (result) {
 -                const url = new URL(getApiUrl());
 -                url.pathname = '/api/talkinghead/set_emotion';
 -                await doExtrasFetch(url, {
 -                    method: 'POST',
 -                    headers: {
 -                        'Content-Type': 'application/json',
 -                    },
 -                    body: JSON.stringify({ emotion_name: expression }),
 -                });
 -            }
+        }
 -        catch (error) {
 +        console.debug('Expression unset - No sprite found', { expression: expression });
 -            // `set_emotion` is not present in old versions, so let it 404.
+    }
 -        try {
 +    document.getElementById('expression-holder').style.display = '';
 -            // Find the <img> element with id="expression-image" and class="expression"
 -            const imgElement = document.querySelector('img#expression-image.expression');
 -            //console.log("searching");
 -            if (imgElement && imgElement instanceof HTMLImageElement) {
 -                //console.log("setting value");
 -                imgElement.src = getApiUrl() + '/api/talkinghead/result_feed';
 -            }
+}
 -        catch (error) {
++
 -            //console.log("The fetch failed!");
 +/**
 + * Sets the default expression image for the given image element and expression
 + * @param {JQuery<HTMLElement>} img - The image element to set the default expression for
 + * @param {string} expression - The expression label to use for the default image
 + */
 +function setDefaultEmojiForImage(img, expression) {
 +    if (extension_settings.expressions.custom?.includes(expression)) {
 +        console.debug(`Can't set default emoji for a custom expression (${expression}). setting to ${DEFAULT_FALLBACK_EXPRESSION} instead.`);
 +        expression = DEFAULT_FALLBACK_EXPRESSION;
+    }
++
 +    const defImgUrl = `/img/default-expressions/${expression}.png`;
 +    img.attr('src', defImgUrl);
 +    img.attr('data-expression', expression);
 +    img.attr('data-sprite-filename', null);
 +    img.attr('title', expression);
 +    img.addClass('default');
+}
++
 +/**
 + * Sets the image element to display no expression by clearing its source attribute.
 + * @param {JQuery<HTMLElement>} img - The image element to clear the expression for
 + * @param {string} expression - The expression label to use
 + */
 +function setNoneForImage(img, expression) {
 +    img.attr('src', '');
 +    img.attr('data-expression', expression);
 +    img.attr('data-sprite-filename', null);
 +    img.attr('title', expression);
 +    img.removeClass('default');
+}
 function onClickExpressionImage() {
 -    const expression = $(this).attr('id');
 +    // If there is no expression image and we clicked on the placeholder, we remove the sprite by calling via the expression label
 -    setSpriteSlashCommand({}, expression);
 +    if ($(this).attr('data-expression-type') === 'failure') {
 +        const label = $(this).attr('data-expression');
 +        setSpriteSlashCommand({ type: 'expression' }, label);
 +        return;
 +    }
++
 +    const spriteFile = $(this).attr('data-filename');
 +    setSpriteSlashCommand({ type: 'sprite' }, spriteFile);
+}
 async function onClickExpressionAddCustom() {
     const template = await renderExtensionTemplateAsync(MODULE_NAME, 'add-custom-expression');
     let expressionName = await callPopupPopup.show.input(templatenull, 'input'template);
     if (!expressionName) {
         console.debug('No custom expression name provided');

     // a-z, 0-9, dashes and underscores only
     if (!/^[a-z0-9-_]+$/.test(expressionName)) {
         toastr.infowarning('Invalid custom expression name provided', 'Add Custom Expression');
         return;
+    }
+-
 +    if (DEFAULT_EXPRESSIONS.includes(expressionName) || DEFAULT_EXPRESSIONS.some(x => expressionName.startsWith(x))) {
 -    // Check if expression name already exists in default expressions
 +        toastr.warning('Expression name already exists', 'Add Custom Expression');
 -    if (DEFAULT_EXPRESSIONS.includes(expressionName)) {
 -        toastr.info('Expression name already exists');
         return;
+    }
+-
 -    // Check if expression name already exists in custom expressions
     if (extension_settings.expressions.custom.includes(expressionName)) {
         toastr.infowarning('Custom expression already exists', 'Add Custom Expression');
         return;
+    }

 async function onClickExpressionRemoveCustom() {
     const selectedExpression = String($('#expression_custom').val());
 +    const noCustomExpressions = extension_settings.expressions.custom.length === 0;
     if (!selectedExpression || noCustomExpressions) {
         console.debug('No custom expression selected');
         return;
+    }
     const template = await renderExtensionTemplateAsync(MODULE_NAME, 'remove-custom-expression', { expression: selectedExpression });
     const confirmation = await callPopupPopup.show.confirm(templatenull, 'confirm'template);
     if (!confirmation) {
         console.debug('Custom expression removal cancelled');

     // Remove custom expression from settings
     const index = extension_settings.expressions.custom.indexOf(selectedExpression);
     extension_settings.expressions.custom.splice(index, 1);
     if (selectedExpression == getFallbackExpression()extension_settings.expressions.fallback_expression) {
         toastr.warning(`Deleted custom expression '${selectedExpression}' that was also selected as the fallback expression.\nFallback expression has been reset to '${DEFAULT_FALLBACK_EXPRESSION}'.`, 'Remove Custom Expression');
         extension_settings.expressions.fallback_expression = DEFAULT_FALLBACK_EXPRESSION;
+    }
     await renderAdditionalExpressionSettings();

+    }
+}
 async function onExpressionFallbackChanged() {
 -    const expression = this.value;
 +    /** @type {HTMLSelectElement} */
 -    if (expression) {
 +    const select = this;
 -        extension_settings.expressions.fallback_expression = expression;
 +    const selectedValue = select.value;
 -        saveSettingsDebounced();
++
 +    switch (selectedValue) {
 +        case OPTION_NO_FALLBACK:
 +            extension_settings.expressions.fallback_expression = null;
 +            extension_settings.expressions.showDefault = false;
 +            break;
 +        case OPTION_EMOJI_FALLBACK:
 +            extension_settings.expressions.fallback_expression = null;
 +            extension_settings.expressions.showDefault = true;
 +            break;
 +        default:
 +            extension_settings.expressions.fallback_expression = selectedValue;
 +            extension_settings.expressions.showDefault = false;
 +            break;
 +    }
++
 +    const img = $('img.expression');
 +    const spriteFolderName = img.attr('data-sprite-folder-name');
 +    const expression = img.attr('data-expression');
++
 +    if (spriteFolderName && expression) {
 +        await sendExpressionCall(spriteFolderName, expression, { force: true });
+    }
++
 +    saveSettingsDebounced();
+}
 async function handleFileUpload(url, formData) {

+    }
+}
 +/**
 + * Removes the file extension from a file name
 + * @param {string} fileName The file name to remove the extension from
 + * @returns {string} The file name without the extension
 + */
 +function withoutExtension(fileName) {
 +    return fileName.replace(/\.[^/.]+$/, '');
 +}
++
 +function validateExpressionSpriteName(expression, spriteName) {
 +    const filenameValidationRegex = new RegExp(`^${expression}(?:[-\\.].*?)?$`);
 +    const validFileName = filenameValidationRegex.test(spriteName);
 +    return validFileName;
 +}
++
 async function onClickExpressionUpload(event) {
     // Prevents the expression from being set
     event.stopPropagation();
     const idexpressionListItem = $(this).closest('.expression_list_item').attr('id');
++
 +    const clickedFileName = expressionListItem.attr('data-expression-type') !== 'failure' ? expressionListItem.attr('data-filename') : null;
 +    const expression = expressionListItem.data('expression');
     const name = $('#image_list').data('name');
     const handleExpressionUploadChange = async (e) => {
         const file = e.target.files[0];
         if (!file || !file.name) {
 +            console.debug('No valid file selected');
 +            return;
 +        }
++
 +        const existingFiles = spriteCache[name]?.find(x => x.label === expression)?.files || [];
++
 +        let spriteName = expression;
++
 +        if (extension_settings.expressions.allowMultiple) {
 +            const matchesExisting = existingFiles.some(x => x.fileName === file.name);
 +            const fileNameWithoutExtension = withoutExtension(file.name);
 +            const validFileName = validateExpressionSpriteName(expression, fileNameWithoutExtension);
++
 +            // If there is no expression yet and it's a valid expression, we just take it
 +            if (!clickedFileName && validFileName) {
 +                spriteName = fileNameWithoutExtension;
 +            }
 +            // If the filename matches the one that was clicked, we just take it and replace it
 +            else if (clickedFileName === file.name) {
 +                spriteName = fileNameWithoutExtension;
 +            }
 +            // If it's a valid filename and there's no existing file with the same name, we just take it
 +            else if (!matchesExisting && validFileName) {
 +                spriteName = fileNameWithoutExtension;
 +            }
 +            else {
 +                /** @type {import('../../popup.js').CustomPopupButton[]} */
 +                const customButtons = [];
 +                if (clickedFileName) {
 +                    customButtons.push({
 +                        text: t`Replace Existing`,
 +                        result: POPUP_RESULT.NEGATIVE,
 +                        action: () => {
 +                            console.debug('Replacing existing sprite');
 +                            spriteName = withoutExtension(clickedFileName);
 +                        },
 +                    });
 +                }
++
 +                spriteName = null;
 +                const suggestedSpriteName = generateUniqueSpriteName(expression, existingFiles);
++
 +                const message = await renderExtensionTemplateAsync(MODULE_NAME, 'templates/upload-expression', { expression, clickedFileName });
++
 +                const input = await Popup.show.input(t`Upload Expression Sprite`, message,
 +                    suggestedSpriteName, { customButtons: customButtons });
++
 +                if (input) {
 +                    if (!validateExpressionSpriteName(expression, input)) {
 +                        toastr.warning(t`The name you entered does not follow the naming schema for the selected expression '${expression}'.`, t`Invalid Expression Sprite Name`);
 +                        return;
 +                    }
 +                    spriteName = input;
 +                }
 +            }
 +        } else {
 +            spriteName = withoutExtension(clickedFileName);
 +        }
++
 +        if (!spriteName) {
 +            toastr.warning(t`Cancelled uploading sprite.`, t`Upload Cancelled`);
 +            // Reset the input
 +            e.target.form.reset();
             return;
+        }
         const formData = new FormData();
         formData.append('name', name);
         formData.append('label', idexpression);
         formData.append('avatar', file);
 +        formData.append('spriteName', spriteName);
         await handleFileUpload('/api/sprites/upload', formData);
         // Reset the input
         e.target.form.reset();
+-
 -        // In Talkinghead mode, when a new talkinghead image is uploaded, refresh the live char.
 -        if (id === 'talkinghead' && isTalkingHeadEnabled() && modules.includes('talkinghead')) {
 -            await loadTalkingHead();
 -        }
     };
     $('#expression_upload')

         inApiCall = true;
         $('#visual-novel-wrapper').empty();
         await validateImages(overridePath.length === 0 ? currentLastMessage.name : overridePath, true);
 +        const name = overridePath.length === 0 ? currentLastMessage.name : overridePath;
         const expression = await getExpressionLabel(currentLastMessage.mes);
         await sendExpressionCall(overridePath.length === 0 ? currentLastMessage.name : overridePath, expression, { force: true });
         forceUpdateVisualNovelMode();
     } catch (error) {
         console.debug(`Setting expression override for ${avatarFileName} failed with error: ${error}`);

         const currentLastMessage = getLastCharacterMessage();
         await validateImages(currentLastMessage.name, true);
         const expression = await getExpressionLabel(currentLastMessage.mes);
         await sendExpressionCall(currentLastMessage.name, expression, { force: true });
         forceUpdateVisualNovelMode();
         console.debug(extension_settings.expressionOverrides);

         formData.append('name', name);
         formData.append('avatar', file);
 +        const uploadToast = toastr.info('Please wait...', 'Upload is processing', { timeOut: 0, extendedTimeOut: 0 });
         const { count } = await handleFileUpload('/api/sprites/upload-zip', formData);
 +        toastr.clear(uploadToast);
         toastr.success(`Uploaded ${count} image(s) for ${name}`);
         // Reset the input
         e.target.form.reset();
+-
 -        // In Talkinghead mode, refresh the live char.
 -        if (isTalkingHeadEnabled() && modules.includes('talkinghead')) {
 -            await loadTalkingHead();
 -        }
     };
     $('#expression_upload_pack')

     // Prevents the expression from being set
     event.stopPropagation();
 -    const confirmation = await callPopup('<h3>Are you sure?</h3>Once deleted, it\'s gone forever!', 'confirm');
 +    const expressionListItem = $(this).closest('.expression_list_item');
 +    const expression = expressionListItem.data('expression');
++
 +    if (expressionListItem.attr('data-expression-type') === 'failure') {
 +        return;
 +    }
 +    const confirmation = await Popup.show.confirm(t`Delete Expression`, t`Are you sure you want to delete this expression? Once deleted, it\'s gone forever!`
 +        + '<br /><br />'
 +        + t`Expression:` + ' <tt>' + expressionListItem.attr('data-filename') + '</tt>');
     if (!confirmation) {
         return;
+    }
     const idfileName = $(this).closestwithoutExtension('.expression_list_item')expressionListItem.attr('iddata-filename'));
     const name = $('#image_list').data('name');
     try {
         await fetch('/api/sprites/delete', {
             method: 'POST',
             headers: getRequestHeaders(),
             body: JSON.stringify({ name, label: idexpression, spriteName: fileName }),
         });
     } catch (error) {
         toastr.error('Failed to delete image. Try again later.');

         extension_settings.expressions.llmPrompt = DEFAULT_LLM_PROMPT;
         saveSettingsDebounced();
+    }
++
 +    if (extension_settings.expressions.allowMultiple === undefined) {
 +        extension_settings.expressions.allowMultiple = true;
 +        saveSettingsDebounced();
 +    }
++
 +    if (extension_settings.expressions.showDefault && extension_settings.expressions.fallback_expression !== undefined) {
 +        extension_settings.expressions.showDefault = false;
 +        saveSettingsDebounced();
 +    }
+}
 (async function () {

         const template = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
         $('#expressions_container').append(template);
         $('#expression_override_button').on('click', onClickExpressionOverrideButton);
 -        $('#expressions_show_default').on('input', onExpressionsShowDefaultInput);
         $('#expression_upload_pack_button').on('click', onClickExpressionUploadPackButton);
 -        $('#expressions_show_default').prop('checked', extension_settings.expressions.showDefault).trigger('input');
         $('#expression_translate').prop('checked', extension_settings.expressions.translate).on('input', function () {
             extension_settings.expressions.translate = !!$(this).prop('checked');
             saveSettingsDebounced();
         });
 +        $('#expressions_allow_multiple').prop('checked', extension_settings.expressions.allowMultiple).on('input', function () {
 +            extension_settings.expressions.allowMultiple = !!$(this).prop('checked');
 +            saveSettingsDebounced();
 +        });
 +        $('#expressions_reroll_if_same').prop('checked', extension_settings.expressions.rerollIfSame).on('input', function () {
 +            extension_settings.expressions.rerollIfSame = !!$(this).prop('checked');
 +            saveSettingsDebounced();
 +        });
         $('#expression_override_cleanup_button').on('click', onClickExpressionOverrideRemoveAllButton);
         $(document).on('dragstart', '.expression', (e) => {
             e.preventDefault();

         $(document).on('click', '.expression_list_item', onClickExpressionImage);
         $(document).on('click', '.expression_list_upload', onClickExpressionUpload);
         $(document).on('click', '.expression_list_delete', onClickExpressionDelete);
         $(window).on('resize', () => updateVisualNovelModeDebounced());
         $('#open_chat_expressions').hide();
 -        $('#image_type_toggle').on('click', function () {
 -            if (this instanceof HTMLInputElement) {
 -                setTalkingHeadState(this.checked);
 -            }
 -        });
+-
         await renderAdditionalExpressionSettings();
         $('#expression_api').val(extension_settings.expressions.api ?? EXPRESSION_API.extras);
         $('.expression_llm_prompt_block').toggle([EXPRESSION_API.llm, EXPRESSION_API.webllm].includes(extension_settings.expressions.api));
         $('#expression_llm_prompt').val(extension_settings.expressions.llmPrompt ?? '');
         $('#expression_llm_prompt').on('input', function () {
             extension_settings.expressions.llmPrompt = String($(this).val());
             saveSettingsDebounced();
         });
         $('#expression_llm_prompt_restore').on('click', function () {

         $('#expression_api').on('change', onExpressionApiChanged);
+    }
 -    // Pause Talkinghead to save resources when the ST tab is not visible or the window is minimized.
 -    // We currently do this via loading/unloading. Could be improved by adding new pause/unpause endpoints to Extras.
 -    document.addEventListener('visibilitychange', function (event) {
 -        let pageIsVisible;
 -        if (document.hidden) {
 -            console.debug('expressions: SillyTavern is now hidden');
 -            pageIsVisible = false;
 -        } else {
 -            console.debug('expressions: SillyTavern is now visible');
 -            pageIsVisible = true;
 -        }
+-
 -        if (isTalkingHeadEnabled() && modules.includes('talkinghead')) {
 -            isTalkingHeadAvailable().then(result => {
 -                if (result) {
 -                    if (pageIsVisible) {
 -                        loadTalkingHead();
 -                    } else {
 -                        unloadTalkingHead();
 -                    }
 -                    handleImageChange(); // Change image as needed
 -                } else {
 -                    //console.log("talkinghead does not exist.");
 -                }
 -            });
 -        }
 -    });
+-
     addExpressionImage();
     addVisualNovelMode();
     migrateSettings();

     const updateFunction = wrapper.update.bind(wrapper);
     setInterval(updateFunction, UPDATE_INTERVAL);
     moduleWorker();
 -    // For setting the Talkinghead talking animation on/off quickly enough for realtime use, we need another timer on a shorter schedule.
 -    const wrapperTalkingState = new ModuleWorkerWrapper(updateTalkingState);
 -    const updateTalkingStateFunction = wrapperTalkingState.update.bind(wrapperTalkingState);
 -    setInterval(updateTalkingStateFunction, TALKINGCHECK_UPDATE_INTERVAL);
 -    updateTalkingState();
     dragElement($('#expression-holder'));
     eventSource.on(event_types.CHAT_CHANGED, () => {
         // character changed

             imgElement.src = '';
+        }
 -        //set checkbox to global var
 -        $('#image_type_toggle').prop('checked', extension_settings.expressions.talkinghead);
 -        if (extension_settings.expressions.talkinghead) {
 -            setTalkingHeadState(extension_settings.expressions.talkinghead);
 -        }
+-
         setExpressionOverrideHtml();
         if (isVisualNovelMode()) {
             $('#visual-novel-wrapper').empty();
+        }
         updateFunction({ newChat: true });
     });
     eventSource.on(event_types.MOVABLE_PANELS_RESET, updateVisualNovelModeDebounced);
     eventSource.on(event_types.GROUP_UPDATED, updateVisualNovelModeDebounced);
 -    eventSource.on(event_types.EXTRAS_CONNECTED, () => {
 -        if (extension_settings.expressions.talkinghead) {
 -            setTalkingHeadState(extension_settings.expressions.talkinghead);
 -        }
 -    });
     const localEnumProviders = {
         expressions: () => getCachedExpressions().map(expression => {
 +            const currentLastMessage = selected_group ? getLastCharacterMessage() : null;
 +            const spriteFolderName = getSpriteFolderName(currentLastMessage, currentLastMessage?.name);
 +            const expressions = getCachedExpressions();
 +            return expressions.map(expression => {
 +                const spriteCount = spriteCache[spriteFolderName]?.find(x => x.label === expression)?.files.length ?? 0;
                 const isCustom = extension_settings.expressions.custom?.includes(expression);
 -            return new SlashCommandEnumValue(expression, null, isCustom ? enumTypes.name : enumTypes.enum, isCustom ? 'C' : 'D');
 +                const subtitle = spriteCount == 0 ? '❌ No sprites available for this expression' :
 -        }),
 +                    spriteCount > 1 ? `${spriteCount} sprites` : null;
 +                return new SlashCommandEnumValue(expression,
 +                    subtitle,
 +                    isCustom ? enumTypes.name : enumTypes.enum,
 +                    isCustom ? 'C' : 'D');
 +            });
 +        },
 +        sprites: () => {
 +            const currentLastMessage = selected_group ? getLastCharacterMessage() : null;
 +            const spriteFolderName = getSpriteFolderName(currentLastMessage, currentLastMessage?.name);
 +            const sprites = spriteCache[spriteFolderName]?.map(x => x.files)?.flat() ?? [];
 +            return sprites.map(x => {
 +                return new SlashCommandEnumValue(x.title,
 +                    x.title !== x.expression ? x.expression : null,
 +                    x.isCustom ? enumTypes.name : enumTypes.enum,
 +                    x.isCustom ? 'C' : 'D');
 +            });
 +        },
     };
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'spriteexpression-set',
         aliases: ['sprite', 'emote'],
         callback: setSpriteSlashCommand,
 +        namedArgumentList: [
 +            SlashCommandNamedArgument.fromProps({
 +                name: 'type',
 +                description: 'Whether to set an expression or a specific sprite.',
 +                typeList: [ARGUMENT_TYPE.STRING],
 +                isRequired: false,
 +                defaultValue: 'expression',
 +                enumList: ['expression', 'sprite'],
 +            }),
 +        ],
         unnamedArgumentList: [
             SlashCommandArgument.fromProps({
                 description: 'spriteIdexpression label to set',
                 typeList: [ARGUMENT_TYPE.STRING],
                 isRequired: true,
 -                enumProvider: localEnumProviders.expressions,
 +                enumProvider: (executor, _) => {
 +                    // Check if command is used to set a sprite, then use those enums
 +                    const type = executor.namedArgumentList.find(it => it.name == 'type')?.value || 'expression';
 +                    if (type == 'sprite') return localEnumProviders.sprites();
 +                    else return [
 +                        ...localEnumProviders.expressions(),
 +                        new SlashCommandEnumValue(RESET_SPRITE_LABEL, 'Resets the expression (to either default or no sprite)', enumTypes.enum, '❌'),
 +                    ];
 +                },
             }),
         ],
         helpString: 'Force sets the spriteexpression for the current character.',
         returns: 'theThe currently set spriteexpression label after setting it.',
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'spriteoverrideexpression-folder-override',
         aliases: ['spriteoverride', 'costume'],
         callback: setSpriteSetCommandsetSpriteFolderCommand,
         unnamedArgumentList: [
             new SlashCommandArgument(
                 'optional folder', [ARGUMENT_TYPE.STRING], false,
             ),
         ],
 -        helpString: 'Sets an override sprite folder for the current character. If the name starts with a slash or a backslash, selects a sub-folder in the character-named folder. Empty value to reset to default.',
 +        helpString: `
 +            <div>
 +                Sets an override sprite folder for the current character.<br />
 +                In groups, this will apply to the character who last sent a message.
 +            </div>
 +            <div>
 +                If the name starts with a slash or a backslash, selects a sub-folder in the character-named folder. Empty value to reset to default.
 +            </div>
 +        `,
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'lastspriteexpression-last',
 -        callback: (_, name) => {
 +        aliases: ['lastsprite'],
 +        /** @type {(args: object, name: string) => Promise<string>} */
 +        callback: async (_, name) => {
             if (typeof name !== 'string') throw new Error('name must be a string');
 +            if (!name) {
 +                if (selected_group) {
 +                    toastr.error(t`In group chats, you must specify a character name.`, t`No character name specified`);
 +                    return '';
 +                }
 +                name = characters[this_chid]?.avatar;
 +            }
++
             const char = findChar({ name: name });
 +            if (!char) toastr.warning(t`Couldn't find character ${name}.`, t`Character not found`);
++
             const sprite = lastExpression[char?.name ?? name] ?? '';
             return sprite;
         },
         returns: 'the last set sprite / expression for the named character.',
         unnamedArgumentList: [
             SlashCommandArgument.fromProps({
                 description: 'Character name - or unique character identifier (avatar key). If not provided, the current character for this chat will be used (does not work in group chats)',
                 typeList: [ARGUMENT_TYPE.STRING],
 -                isRequired: true,
                 enumProvider: commonEnumProviders.characters('character'),
             }),
         ],
         helpString: 'Returns the last set sprite / expression for the named character.',
 -    }));
 -    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
 -        name: 'th',
 -        callback: toggleTalkingHeadCommand,
 -        aliases: ['talkinghead'],
 -        helpString: 'Character Expressions: toggles <i>Image Type - talkinghead (extras)</i> on/off.',
 -        returns: 'the current state of the <i>Image Type - talkinghead (extras)</i> on/off.',
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'classifyexpression-expressionslist',
         aliases: ['expressions'],
 +        /** @type {(args: {return: string}) => Promise<string>} */
         callback: async (args) => {
 +            let returnType =
                 /** @type {import('../../slash-commands/SlashCommandReturnHelper.js').SlashCommandReturnType} */
 -            // @ts-ignore
 +                (args.return);
 -            let returnType = args.return;
+-
 -            // Old legacy return type handling
 -            if (args.format) {
 -                toastr.warning(`Legacy argument 'format' with value '${args.format}' is deprecated. Please use 'return' instead. Routing to the correct return type...`, 'Deprecation warning');
 -                const type = String(args?.format).toLowerCase().trim();
 -                switch (type) {
 -                    case 'json':
 -                        returnType = 'object';
 -                        break;
 -                    default:
 -                        returnType = 'pipe';
 -                        break;
 -                }
 -            }
 -            // Now the actual new return type handling
             const list = await getExpressionsList();
             return await slashCommandReturnHelper.doReturn(returnType ?? 'pipe', list, { objectToStringFunc: list => list.join(', ') });

                 enumList: slashCommandReturnHelper.enumList({ allowObject: true }),
                 forceEnum: true,
             }),
 -            // TODO remove some day
 -            SlashCommandNamedArgument.fromProps({
 -                name: 'format',
 -                description: '!!! DEPRECATED - use "return" instead !!! The format to return the list in: comma-separated plain text or JSON array. Default is plain text.',
 -                typeList: [ARGUMENT_TYPE.STRING],
 -                enumList: [
 -                    new SlashCommandEnumValue('plain', null, enumTypes.enum, ', '),
 -                    new SlashCommandEnumValue('json', null, enumTypes.enum, '[]'),
 -                ],
 -            }),
         ],
         returns: 'The comma-separated list of available expressions, including custom expressions.',
         helpString: 'Returns a list of available expressions, including custom expressions.',
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'expression-classify',
 +        aliases: ['classify'],
         callback: classifyCallback,
         namedArgumentList: [
             SlashCommandNamedArgument.fromProps({

         `,
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'uploadspriteexpression-upload',
 +        aliases: ['uploadsprite'],
 +        /** @type {(args: {name: string, label: string, folder: string?, spriteName: string?}, url: string) => Promise<string>} */
         callback: async (args, url) => {
             return await uploadSpriteCommand(args, url);
 -            return '';
         },
 +        returns: 'the resulting sprite name',
         unnamedArgumentList: [
             SlashCommandArgument.fromProps({
                 description: 'URL of the image to upload',

                 description: 'Character name or avatar key (default is current character)',
                 typeList: [ARGUMENT_TYPE.STRING],
                 isRequired: false,
 -                acceptsMultiple: false,
             }),
             SlashCommandNamedArgument.fromProps({
                 name: 'label',

                 typeList: [ARGUMENT_TYPE.STRING],
                 enumProvider: localEnumProviders.expressions,
                 isRequired: true,
 -                acceptsMultiple: false,
             }),
             SlashCommandNamedArgument.fromProps({
                 name: 'folder',
                 description: 'Override folder to upload into',
                 typeList: [ARGUMENT_TYPE.STRING],
                 isRequired: false,
 -                acceptsMultiple: false,
 +            }),
 +            SlashCommandNamedArgument.fromProps({
 +                name: 'spriteName',
 +                description: 'Override sprite name to allow multiple sprites per expressions. Has to follow the naming pattern. If unspecified, the label will be used as sprite name.',
 +                typeList: [ARGUMENT_TYPE.STRING],
 +                isRequired: false,
             }),
         ],
 -        helpString: '<div>Upload a sprite from a URL.</div><div>Example:</div><pre><code>/uploadsprite name=Seraphina label=joy /user/images/Seraphina/Seraphina_2024-12-22@12h37m57s.png</code></pre>',
 +        helpString: `
 +            <div>
 +                Upload a sprite from a URL.
 +            </div>
 +            <div>
 +                <strong>Example:</strong>
 +                <ul>
 +                    <li>
 +                        <pre><code>/uploadsprite name=Seraphina label=joy /user/images/Seraphina/Seraphina_2024-12-22@12h37m57s.png</code></pre>
 +                    </li>
 +                </ul>
 +            </div>
 +        `,
     }));
 })();

public/scripts/extensions/expressions/list-item.html+9 -5 Viewed

 -<div id="{{item}}" class="expression_list_item">
 +{{#each images}}
 +<div class="expression_list_item interactable" data-expression="{{../expression}}" data-expression-type="{{this.type}}" data-filename="{{this.fileName}}">
     <div class="expression_list_buttons">
         <div class="menu_button expression_list_upload" title="Upload image">
             <i class="fa-solid fa-upload"></i>

             <i class="fa-solid fa-trash"></i>
         </div>
     </div>
     <div class="expression_list_title {{textClass}}">
         <span>{{item../expression}}</span>
         {{#if ../isCustom}}
             <small class="expression_list_custom">(custom)</small>
         {{/if}}
     </div>
     <imgdiv class="expression_list_imageexpression_list_image_container" srctitle="{{imageSrcthis.title}}" />
 +        <img class="expression_list_image" src="{{this.imageSrc}}" alt="{{this.title}}" data-epression="{{../expression}}" />
     </div>
 +</div>
 +{{/each}}

public/scripts/extensions/expressions/settings.html+21 -9 Viewed

         </div>
         <div class="inline-drawer-content">
             <label class="checkbox_label" for="expression_translate" title="Use the selected API from Chat Translation extension settings." data-i18n="[title]Use the selected API from Chat Translation extension settings.">
                 <input id="expression_translate" type="checkbox">
                 <span data-i18n="Translate text to English before classification">Translate text to English before classification</span>
             </label>
 -            <label class="checkbox_label" for="expressions_show_default">
 +            <label class="checkbox_label" for="expressions_allow_multiple" title="A single expression can have multiple sprites. Whenever the expression is chosen, a random sprite for this expression will be selected." data-i18n="[title]A single expression can have multiple sprites. Whenever the expression is chosen, a random sprite for this expression will be selected.">
                 <input id="expressions_show_defaultexpressions_allow_multiple" type="checkbox">
                 <span data-i18n="Show default imagesAllow (emojis)multiple ifsprites spriteper missingexpression">Show default imagesAllow (emojis)multiple ifsprites spriteper missingexpression</span>
             </label>
 -            <label id="image_type_block" class="checkbox_label" for="image_type_toggle">
 +            <label class="checkbox_label" for="expressions_reroll_if_same" title="If the same expression is used again, re-roll the sprite. This only applies to expressions that have multiple available sprites assigned." data-i18n="[title]If the same expression is used again, re-roll the sprite. This only applies to expressions that have multiple available sprites assigned.">
                 <input id="image_type_toggleexpressions_reroll_if_same" type="checkbox">
                 <span data-i18n="ImageRe-roll Typeif -same talkingheadexpression (extras)is used again">ImageRe-roll Typeif -same talkingheadsprite (extras)is used again</span>
             </label>
             <div class="expression_api_block m-b-1 m-t-1">
                 <label for="expression_api" data-i18n="Classifier API">Classifier API</label>

                         <span data-i18n="Remove all image overrides">Remove all image overrides</span>
                     </div>
                 </div>
 -                <p class="hint"><b data-i18n="Hint:">Hint:</b> <i><span data-i18n="Create new folder in the _space">Create new folder in the </span><b>/characters/</b> <span data-i18n="folder of your user data directory and name it as the name of the character.">folder of your user data directory and name it as the name of the character.</span>
 +                <p class="hint">
 -                <span data-i18n="Put images with expressions there. File names should follow the pattern:">Put images with expressions there. File names should follow the pattern: </span><tt data-i18n="expression_label_pattern">[expression_label].[image_format]</tt></i></p>
 +                    <b data-i18n="Hint:">Hint:</b>
 +                    <i>
 +                        <span data-i18n="Create new folder in the _space">Create new folder in the </span><b>/characters/</b> <span data-i18n="folder of your user data directory and name it as the name of the character.">folder of your user data directory and name it as the name of the character.</span>
 +                        <span data-i18n="Put images with expressions there. File names should follow the pattern:">Put images with expressions there. File names should follow the pattern: </span><tt data-i18n="expression_label_pattern">[expression_label].[image_format]</tt>
 +                    </i>
 +                </p>
 +                <p>
 +                    <i>
 +                        <span>In case of multiple files per expression, file names can contain a suffix, either separated by a dot or a
 +                            dash.
 +                            Examples: </span><tt>joy.png</tt>, <tt>joy-1.png</tt>, <tt>joy.expressive.png</tt>
 +                    </i>
 +                </p>
                 <h3 id="image_list_header">
                     <strong data-i18n="Sprite set:">Sprite set:</strong>&nbsp;<span id="image_list_header_name"></span>
                 </h3>

public/scripts/extensions/expressions/style.css+31 -2 Viewed

     justify-content: center;
+}
 +.expression_list_image_container {
 +    overflow: hidden;
 +}
++
 .expression_list_title {
     position: absolute;
     bottom: 0;

     flex-direction: column;
     line-height: 1;
+}
 +.expression_list_custom {
 +    font-size: 0.66rem;
 +}
 .expression_list_buttons {
     position: absolute;

     row-gap: 1rem;
+}
 #image_list .expression_list_item[data-expression-type="success"] .expression_list_title {
     color: green;
+}
 -#image_list .failure {
 +#image_list .expression_list_item[data-expression-type="additional"] .expression_list_title {
 +    color: darkolivegreen;
 +}
 +#image_list .expression_list_item[data-expression-type="additional"] .expression_list_title::before {
 +    content: '➕';
 +    position: absolute;
 +    top: -7px;
 +    left: -9px;
 +    font-size: 14px;
 +    color: transparent;
 +    text-shadow: 0 0 0 darkolivegreen;
 +}
++
 +#image_list .expression_list_item[data-expression-type="failure"] .expression_list_title {
     color: red;
+}

     flex-direction: row;
+}
 +#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"],
 +#expressions_container:has(#expressions_allow_multiple:not(:checked)) label[for="expressions_reroll_if_same"] {
 +    opacity: 0.3;
 +    transition: opacity var(--animation-duration) ease;
 +}
 +#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:hover,
 +#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:focus {
 +    opacity: unset;
 +}

public/scripts/extensions/expressions/templates/upload-expression.html+12 -0 Viewed

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

public/scripts/extensions/translate/index.js+1 -1 Viewed

 const handleImpersonateReady = createEventHandler(translateImpersonate, () => shouldTranslate(incomingTypes));
 const handleMessageEdit = createEventHandler(translateMessageEdit, () => true);
 window['globalThis.translate'] = translate;
 jQuery(async () => {
     const html = await renderExtensionTemplateAsync('translate', 'index');

public/scripts/extensions/tts/index.js+0 -26 Viewed

 import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { POPUP_TYPE, callGenericPopup } from '../../popup.js';
 import { GoogleTranslateTtsProvider } from './google-translate.js';
 -export { talkingAnimation };
 const UPDATE_INTERVAL = 1000;
 const wrapper = new ModuleWorkerWrapper(moduleWorker);
 let voiceMapEntries = [];
 let voiceMap = {}; // {charName:voiceid, charName2:voiceid2}
 -let talkingHeadState = false;
 let lastChatId = null;
 let lastMessage = null;
 let lastMessageHash = null;

     updateUiAudioPlayState();
+}
 -function talkingAnimation(switchValue) {
 -    if (!modules.includes('talkinghead')) {
 -        console.debug('Talking Animation module not loaded');
 -        return;
 -    }
+-
 -    const apiUrl = getApiUrl();
 -    const animationType = switchValue ? 'start' : 'stop';
+-
 -    if (switchValue !== talkingHeadState) {
 -        try {
 -            console.log(animationType + ' Talking Animation');
 -            doExtrasFetch(`${apiUrl}/api/talkinghead/${animationType}_talking`);
 -            talkingHeadState = switchValue;
 -        } catch (error) {
 -            // Handle the error here or simply ignore it to prevent logging
 -        }
 -    }
 -    updateUiAudioPlayState();
 -}
+-
 function resetTtsPlayback() {
     // Stop system TTS utterance
     cancelTtsPlay();

     // Not pausing, doing a full stop to anything TTS is doing. Better UX as pause is not as useful
     if (!audioElement.paused || isTtsProcessing()) {
         resetTtsPlayback();
 -        talkingAnimation(false);
     } else {
         // Default play behavior if not processing or playing is to play the last message.
         processAndQueueTtsMessage(context.chat[context.chat.length - 1]);

 function completeCurrentAudioJob() {
     audioQueueProcessorReady = true;
     currentAudioJob = null;
 -    talkingAnimation(false); //stop lip animation
     // updateUiPlayState();
     wrapper.update();
+}

         audioQueueProcessorReady = false;
         currentAudioJob = audioJobQueue.shift();
         playAudioData(currentAudioJob);
 -        talkingAnimation(true);
     } catch (error) {
         toastr.error(error.toString());
         console.error(error);

public/scripts/extensions/tts/system.js+0 -3 Viewed

 import { isMobile } from '../../RossAscends-mods.js';
 import { getPreviewString } from './index.js';
 -import { talkingAnimation } from './index.js';
 import { saveTtsProviderSettings } from './index.js';
 export { SystemTtsProvider };

     //placing the speak invocation inside a callback fixes ordering and onend issues.
     setTimeout(function () {
         speechSynthesis.speak(newUtt);
 -        talkingAnimation(true);
     }, 0);
 };

                 //some code to execute when done
                 resolve(silence);
                 console.log('System TTS done');
 -                talkingAnimation(false);
             });
         });
+    }

public/scripts/extensions/vectors/index.js+2 -2 Viewed

  */
 async function vectorizeFile(fileText, fileName, collectionId, chunkSize, overlapPercent) {
     try {
         if (settings.translate_files && typeof window['globalThis.translate'] === 'function') {
             console.log(`Vectors: Translating file ${fileName} to English...`);
             const translatedText = await window['globalThis.translate'](fileText, 'en');
             fileText = translatedText;
+        }

public/scripts/power-user.js+5 -4 Viewed

 /**
  * Common function to perform fuzzy search with optional caching
 + * @template T
  * @param {string} type - Type of search from fuzzySearchCategories
  * @param {anyT[]} data - Data array to search in
  * @param {Array<{name: string, weight: number, getFn?: (obj: anyT) => string}>} keys - Fuse.js keys configuration
  * @param {string} searchValue - The search term
  * @param {Object.<string, { resultMap: Map<string, any> }>} [fuzzySearchCaches=null] - Optional fuzzy search caches
  * @returns {import('fuse.js').FuseResult<anyT>[]} Results as items with their score
  */
 export function performFuzzySearch(type, data, keys, searchValue, fuzzySearchCaches = null) {
     // Check cache if provided
     if (fuzzySearchCaches) {
         const cache = fuzzySearchCaches[type];

src/endpoints/sprites.js+13 -5 Viewed

                 .map((file) => {
                     const pathToSprite = path.join(spritesPath, file);
                     const mtime = fs.statSync(pathToSprite).mtime?.toISOString().replace(/[^0-9]/g, '').slice(0, 14);
++
 +                    const fileName = path.parse(pathToSprite).name.toLowerCase();
 +                    // Extract the label from the filename via regex, which can be suffixed with a sub-name, either connected with a dash or a dot.
 +                    // Examples: joy.png, joy-1.png, joy.expressive.png
 +                    const label = fileName.match(/^(.+?)(?:[-\\.].*?)?$/)?.[1] ?? fileName;
++
                     return {
 -                        label: path.parse(pathToSprite).name.toLowerCase(),
 +                        label: label,
                         path: `/characters/${name}/${file}` + (mtime ? `?t=${mtime}` : ''),
                     };
                 });

 router.post('/delete', jsonParser, async (request, response) => {
     const label = request.body.label;
     const name = request.body.name;
 +    const spriteName = request.body.spriteName || label;
     if (!labelspriteName || !name) {
         return response.sendStatus(400);
+    }

@@ -158,7 +165,7 @@ router.post('/delete', jsonParser, async (request, response) => {
158	165
159	166	// Remove existing sprite with the same label
160	167	for (const file of files) {
161	168	if (path.parse(file).name === labelspriteName) {
162	169	fs.rmSync(path.join(spritesPath, file));
163	170	}
164	171	}

     const file = request.file;
     const label = request.body.label;
     const name = request.body.name;
 +    const spriteName = request.body.spriteName || label;
     if (!file || !label || !name) {
         return response.sendStatus(400);

         // Remove existing sprite with the same label
         for (const file of files) {
             if (path.parse(file).name === labelspriteName) {
                 fs.rmSync(path.join(spritesPath, file));
+            }
+        }
         const filename = labelspriteName + path.parse(file.originalname).ext;
         const spritePath = path.join(file.destination, file.filename);
         const pathToFile = path.join(spritesPath, filename);
         // Copy uploaded file to sprites folder