Allow setting specific sprites as expressions - Update /expression-set command to allow setting specific sprites - Enhance enum completion for /expression-set to show expressions/sprites and more their info - Fix setting sprite folder reprinting stuff double - Fix not being able to unset expressions

198d10e7597ece5e444cc18cae0b94dce45d3466

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 73393a5d5eadc92814d9689091d13c24bc0e3d95

public/scripts/extensions/expressions/index.js+201 -63 Viewed

 import { characters, 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, power_user } from '../../power-user.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 { SlashCommand } from '../../slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
 import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
-import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { commonEnumProviders, enumIcons } 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';

 /**
  * @typedef {object} ExpressionImage An expression image
- * @property {string?} [expression=null] - The expression
+ * @property {string} expression - The expression
- * @property {boolean?} [isCustom=null] - If the expression is added by user
+ * @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

     webllm: 3,
 };
-/** @type {ExpressionImage} */
-const NO_IMAGE_PLACEHOLDER = { title: 'No Image', type: 'failure', fileName: 'No-Image-Placeholder.svg', imageSrc: '/img/No-Image-Placeholder.svg' };
 let expressionsList = null;
 let lastCharacter = undefined;
 let lastMessage = null;

 export let lastExpression = {};
 /**
+ * Returns a placeholder image object for a given expression
+ * @param {string} expression - The expression label
+ * @param {boolean} [isCustom=false] - Whether the expression is custom
+ * @returns {ExpressionImage} The placeholder image object
+ */
+function getPlaceholderImage(expression, isCustom = false) {
+    return {
+        expression: expression,
+        isCustom: isCustom,
+        title: 'No Image',
+        type: 'failure',
+        fileName: 'No-Image-Placeholder.svg',
+        imageSrc: '/img/No-Image-Placeholder.svg',
+    };
+}
+/**
  * Returns the fallback expression if explicitly chosen, otherwise the default one
  * @returns {string} expression name
  */

         const sprites = spriteCache[spriteFolderName];
         const expressionImage = container.find(`.expression-holder[data-avatar="${avatar}"]`);
         const defaultExpression = getFallbackExpression();
+        // TODO: Visual novel sprites need fixing, currently do not update based on multiple sprites, etc
         const defaultSpritePath = sprites.find(x => x.label === defaultExpression)?.path;
         const noSprites = sprites.length === 0;

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

@@ -550,7 +566,7 @@ async function moduleWorker() {
550	expression = getFallbackExpression();	566	expression = getFallbackExpression();
551	}	567	}
552		568
553	await sendExpressionCall(spriteFolderName, expression, force, vnMode);	569	await sendExpressionCall(spriteFolderName, expression, { force: force, vnMode: vnMode });
554	}	570	}
555	catch (error) {	571	catch (error) {
556	console.log(error);	572	console.log(error);

     return folderName;
+}
-async function sendExpressionCall(name, expression, force, vnMode) {
+/**
+ * Update the expression for the given character.
+ *
+ * @param {string} name 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.
+ */
+async function sendExpressionCall(name, expression, { force = false, vnMode = null, overrideSpriteFile = null } = {}) {
     lastExpression[name.split('/')[0]] = expression;
-    if (!vnMode) {
+    if (vnMode === null) {
         vnMode = isVisualNovelMode();
+    }
     if (vnMode) {
         await updateVisualNovelMode(name, expression);
     } else {
-        setExpression(name, expression, force);
+        setExpression(name, expression, { force: force, overrideSpriteFile: overrideSpriteFile });
+    }
+}
-async function setSpriteSetCommand(_, folder) {
+async function setSpriteFolderCommand(_, 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.warning('No text provided');
+        toastr.error('No text provided');
         return '';
+    }
     if (api && !Object.keys(EXPRESSION_API).includes(api)) {
-        toastr.warning('Invalid API provided');
+        toastr.error('Invalid API provided');
         return '';
+    }

     return label;
+}
-async function setSpriteSlashCommand(_, spriteId) {
+/** @type {(args: {type: 'expression' | 'sprite'}, searchTerm: string) => Promise<string>} */
-    spriteId = spriteId.trim().toLowerCase();
+async function setSpriteSlashCommand({ type }, searchTerm) {
-    if (!spriteId) {
+    type ??= 'expression';
-        console.log('No sprite id provided');
+    searchTerm = searchTerm.trim().toLowerCase();
+    if (!searchTerm) {
+        toastr.error(t`No expression or sprite name provided`, t`Set Sprite`);
         return '';
+    }
     const spriteFolderName = getSpriteFolderName();
+    let label = searchTerm;
+    /** @type {string?} */
+    let spriteFile = null;
     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') {
-    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 '';
+            }
+            label = matchedExpression.label;
+            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 '';
+            }
-    if (!spriteItem) {
+            label = matchedSprite.expression;
-        console.log('No sprite found for search term ' + spriteId);
+            spriteFile = matchedSprite.fileName;
-        return '';
+            break;
+        }
+        default: throw Error('Invalid sprite set type: ' + type);
+    }
-    const label = spriteItem.label;
+    await sendExpressionCall(spriteFolderName, label, { force: true, overrideSpriteFile: spriteFile });
-    const vnMode = isVisualNovelMode();
-    await sendExpressionCall(spriteFolderName, label, true, vnMode);
     return label;
+}

  */
 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');
+    if (!label || typeof label !== 'string') {
+        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)) throw new Error('Invalid sprite name. Must follow the naming pattern for expression sprites.');
+    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 });

         if (images.length === 0) {
             const listItem = await getListItem(expression, {
                 isCustom,
-                images: [{ expression, isCustom, ...NO_IMAGE_PLACEHOLDER }],
+                images: [getPlaceholderImage(expression, isCustom)],
             });
             $('#image_list').append(listItem);
             continue;

 /**
  * Set the expression of a character.
  * @param {string} character - The name of the character
- * @param {string} expression - The expression to set
+ * @param {string} expression - The expression or sprite name to set
- * @param {boolean} [force=false] - Whether to force the expression change even if Visual Novel mode is on.
+ * @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(character, expression, force = false) {
+async function setExpression(character, expression, { force = false, overrideSpriteFile = null } = {}) {
-    console.debug('entered setExpressions');
     await validateImages(character);
     const img = $('img.expression');
     const prevExpressionSrc = img.attr('src');

     /** @type {Expression} */
     const sprite = (spriteCache[character] && spriteCache[character].find(x => x.label === expression));
-    console.debug('checking for expression images to show..');
     if (sprite && sprite.files.length > 0) {
-        console.debug('setting expression from character images folder');
         let spriteFile = sprite.files[0];
-        // Calculate next expression, if multiple are allowed
+        // If a specific sprite file should be set, we are looking it up here
-        if (extension_settings.expressions.allowMultiple && sprite.files.length > 1) {
+        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 => x.imageSrc !== prevExpressionSrc);

@@ -1309,6 +1382,7 @@ async function setExpression(character, expression, force = false) {
1309	}	1382	}
1310	}	1383	}
1311	}	1384	}
		1385
1312	//only swap expressions when necessary	1386	//only swap expressions when necessary
1313	if (prevExpressionSrc !== spriteFile.imageSrc	1387	if (prevExpressionSrc !== spriteFile.imageSrc
1314	&& !img.hasClass('expression-animating')) {	1388	&& !img.hasClass('expression-animating')) {

                     expressionHolder.css('min-height', 100);
                 });
             expressionClone.removeClass('expression-clone');
             expressionClone.removeClass('default');

@@ -1374,26 +1447,44 @@ async function setExpression(character, expression, force = false) {
1374	}	1447	}
1375	});	1448	});
1376	}	1449	}
		1450
		1451	console.info('Expression set', { expression: spriteFile.expression, file: spriteFile.fileName });
1377	}	1452	}
1378	else {	1453	else {
1379	if (extension_settings.expressions.showDefault) {	1454	if (extension_settings.expressions.showDefault) {
1380	setDefault();	1455	setDefault();
		1456	} else {
		1457	setNone();
1381	}	1458	}
		1459	console.debug('Expression unset');
1382	}	1460	}
1383		1461
1384	function setDefault() {	1462	function setDefault() {
1385	console.debug('setting default');	1463	console.debug('setting default expression');
1386	const defImgUrl = `/img/default-expressions/${expression}.png`;	1464	const defImgUrl = `/img/default-expressions/${expression}.png`;
1387	//console.log(defImgUrl);	1465	//console.log(defImgUrl);
1388	img.attr('src', defImgUrl);	1466	img.attr('src', defImgUrl);
1389	img.addClass('default');	1467	img.addClass('default');
1390	}	1468	}
		1469	function setNone() {
		1470	console.debug('setting no expression');
		1471	img.attr('src', '');
		1472	img.removeClass('default');
		1473	}
		1474
1391	document.getElementById('expression-holder').style.display = '';	1475	document.getElementById('expression-holder').style.display = '';
1392	}	1476	}
1393		1477
1394	function onClickExpressionImage() {	1478	function onClickExpressionImage() {
1395	const expression = $(this).data('expression');	1479	// If there is no expression image and we clicked on the placeholder, we remove the sprite by calling via the expression label
1396	setSpriteSlashCommand({}, expression);	1480	if ($(this).attr('data-expression-type') === 'failure') {
		1481	const label = $(this).attr('data-expression');
		1482	setSpriteSlashCommand({ type: 'expression' }, label);
		1483	return;
		1484	}
		1485
		1486	const spriteFile = $(this).attr('data-filename');
		1487	setSpriteSlashCommand({ type: 'sprite' }, spriteFile);
1397	}	1488	}
1398		1489
1399	async function onClickExpressionAddCustom() {	1490	async function onClickExpressionAddCustom() {

         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, true);
+        await sendExpressionCall(name, 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, true);
+        await sendExpressionCall(currentLastMessage.name, expression, { force: true });
         forceUpdateVisualNovelMode();
         console.debug(extension_settings.expressionOverrides);

     eventSource.on(event_types.GROUP_UPDATED, updateVisualNovelModeDebounced);
     const localEnumProviders = {
-        expressions: () => getCachedExpressions().map(expression => {
+        expressions: () => {
-            const isCustom = extension_settings.expressions.custom?.includes(expression);
+            const spriteFolderName = getSpriteFolderName();
-            return new SlashCommandEnumValue(expression, null, isCustom ? enumTypes.name : enumTypes.enum, isCustom ? 'C' : 'D');
+            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);
+                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 spriteFolderName = getSpriteFolderName();
+            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: 'expression-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: 'expression 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', 'Resets the expression (to either default or no sprite)', enumTypes.enum, '❌'),
+                    ];
+                },
             }),
         ],
         helpString: 'Force sets the expression for the current character.',

     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'expression-folder-override',
         aliases: ['spriteoverride', 'costume'],
-        callback: setSpriteSetCommand,
+        callback: setSpriteFolderCommand,
         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: 'expression-last',

         helpString: 'Returns the last set expression for the named character.',
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
-        name: 'expression-classify',
+        name: 'expression-list',
-        aliases: ['classify-expressions', 'expressions'],
+        aliases: ['expressions'],
         /** @type {(args: {return: string}) => Promise<string>} */
         callback: async (args) => {
             let returnType =

public/scripts/extensions/expressions/style.css+3 -0 Viewed

     flex-direction: column;
     align-items: center;
     justify-content: center;
+}
+.expression_list_image_container {
     overflow: hidden;
+}

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 {any[]} data - Data array to search in
+ * @param {T[]} data - Data array to search in
- * @param {Array<{name: string, weight: number, getFn?: (obj: any) => string}>} keys - Fuse.js keys configuration
+ * @param {Array<{name: string, weight: number, getFn?: (obj: T) => 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<any>[]} Results as items with their score
+ * @returns {import('fuse.js').FuseResult<T>[]} Results as items with their score
  */
-function performFuzzySearch(type, data, keys, searchValue, fuzzySearchCaches = null) {
+export function performFuzzySearch(type, data, keys, searchValue, fuzzySearchCaches = null) {
     // Check cache if provided
     if (fuzzySearchCaches) {
         const cache = fuzzySearchCaches[type];