a0729511 · permissionBRICK/SillyTavern

 /**
 * @typedef {object} Expression Expression definition with label and file path
 * @property {string} label The label of the expression
- * @property {string} path The path to the expression image
+* @property {ExpressionImage[]} files One or more images to represent this expression
 */
 /**

 let lastMessage = null;
 let lastTalkingState = false;
 let lastTalkingStateMessage = null;  // last message as seen by `updateTalkingState` (tracked separately, different timer)
+/** @type {{[characterKey: string]: Expression[]}} */
 let spriteCache = {};
 let inApiCall = false;
 let lastServerResponseTime = 0;

     $('#no_chat_expressions').show();
+}
+/**
+ * Validate a character's sprites, and redraw the sprites list if not done before or forced to redraw.
+ * @param {string} character - The character to validate
+ * @param {boolean} forceRedrawCached - Whether to force redrawing the sprites list even if it's already been drawn before
+ */
 async function validateImages(character, forceRedrawCached) {
     if (!character) {
         return;

 /**
  * Takes a given sprite as returned from the server, and enriches it with additional data for display/sorting
- * @param {Expression} sprite
+ * @param {{ path: string, label: string }} sprite
  * @returns {ExpressionImage}
  */
 function getExpressionImageData(sprite) {

         const isCustom = extension_settings.expressions.custom?.includes(expression);
         const images = sprites
             .filter(s => s.label === expression)
-            .map(getExpressionImageData)
+            .map(s => s.files)
+            .flat()
             .sort((a, b) => a.title.localeCompare(b.title));
         if (images.length === 0) {

+        }
         // TODO: Fix valid expression lists/caching and group them correctly
-        validExpressions.push({ label: expression, paths: images });
+        validExpressions.push({ label: expression, files: images });
         // Render main = first file, additional = rest
         let listItem = await getListItem(expression, {

     return renderExtensionTemplateAsync(MODULE_NAME, 'list-item', { expression, images, 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;
+        }, []);
+        return grouped;
+    }
     catch (err) {
         console.log(err);

Update backend returned sprites list