Feature/add character tags to message div option (#4225) * Adding toggle. * Adding events for the new toggle. Reloading chat when toggled. * Adding chat reload when tags are added or removed to char. * Adding main applyCharacterTagsToMessageDivs function to add tags to divs. * Adding information that the class name is normalized and lowercased to the tooltip. * Correcting console.traces to console.debug for minimal console printing. * Lint indentation fix. * Adding simple cache. * Adding reload event when a new message is added to chat. * Changing tags applied from classes to HTML data API. * Adding guide showing how to select data attributes with CSS. * Fixing trailing comma pointed out by lint. * Simplifying re-rendering by deleting previous attributes. * Adding the feature as default behavior, removing toggles. Will add docs to ST docs. * Removing code that is no longer needed. * Re-rendering divs after other tag operations. * Filtering message ids to only re-render specific divs. Adding suggested changes. * After testing, it seems to add all messages by one, so it appears it's not needed call this in the printMessages function. * Lint fixes. * Cache jquery selector * Fix local variables assignment * Move new functions to tags module * Normalizing tag names before adding them as data-* * Replace commas with spaces to avoid issues with tag names containing commas. * Correcting where the comma replacing should go. * Add error handling for applyCharacterTagsToMessageDivs --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

38a7668535dabfcd71aabb9eaf1b2222c1fbb778

Marcela Petra Ferraz de Novaes <novaes.marcela@outlook.com>

Signed

Parents: e0469b48087ae402ddbc2f9ac248dcab0cc80264

public/script.js+3 -0 Viewed

     applyTagsOnCharacterSelect,
     applyTagsOnGroupSelect,
     tag_import_setting,
+    applyCharacterTagsToMessageDivs,
 } from './scripts/tags.js';
 import {
     SECRET_KEYS,

@@ -2624,6 +2625,8 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
2624	if (!insertAfter && !insertBefore && scroll) {	2625	if (!insertAfter && !insertBefore && scroll) {
2625	scrollChatToBottom();	2626	scrollChatToBottom();
2626	}	2627	}
		2628
		2629	applyCharacterTagsToMessageDivs({ mesIds: newMessageId });
2627	}	2630	}
2628		2631
2629	/**	2632	/**

public/scripts/tags.js+180 -4 Viewed

  * @property {string} [color] - The background color of the tag
  * @property {string} [color2] - The foreground color of the tag
  * @property {number} [create_date] - A number representing the date when this tag was created
- * @property {boolean} is_hidden_on_character_card - Whether this tag is hidden on the character card
+ * @property {boolean} [is_hidden_on_character_card] - Whether this tag is hidden on the character card
+ *
  * @property {function} [action] - An optional function that gets executed when this tag is an actionable tag and is clicked on.
  * @property {string} [class] - An optional css class added to the control representing this tag when printed. Used for custom tags in the filters.

     addTagsToEntity(tag, characterIds, { tagListSelector: listSelector, tagListOptions: tagListOptions });
+    applyCharacterTagsToMessageDivs();
     // need to return false to keep the input clear
     return false;
+}

     const characterIds = characterData ? JSON.parse(characterData).characterIds : null;
     removeTagFromEntity(tag, characterIds, { tagElement: tagElement });
+    applyCharacterTagsToMessageDivs();
+}
 // @ts-ignore

     printCharactersDebounced();
     saveSettingsDebounced();
+    applyCharacterTagsToMessageDivs();
+}
 function onTagRenameInput() {

     $(this).attr('dirty', '');
     $(`.tag[id="${id}"] .tag_name`).text(newName);
     saveSettingsDebounced();
+    applyCharacterTagsToMessageDivs();
+}
 /**

             }),
         ],
         unnamedArgumentList: [
-            SlashCommandArgument.fromProps({ description: 'tag name',
+            SlashCommandArgument.fromProps({
+                description: 'tag name',
                 typeList: [ARGUMENT_TYPE.STRING],
                 isRequired: true,
                 enumProvider: commonEnumProviders.tagsForChar('not-existing'),

             return String(result);
         },
         namedArgumentList: [
-            SlashCommandNamedArgument.fromProps({ name: 'name',
+            SlashCommandNamedArgument.fromProps({
+                name: 'name',
                 description: 'Character name - or unique character identifier (avatar key)',
                 typeList: [ARGUMENT_TYPE.STRING],
                 defaultValue: '{{char}}',

             }),
         ],
         unnamedArgumentList: [
-            SlashCommandArgument.fromProps({ description: 'tag name',
+            SlashCommandArgument.fromProps({
+                description: 'tag name',
                 typeList: [ARGUMENT_TYPE.STRING],
                 isRequired: true,
                 /**@param {SlashCommandExecutor} executor */

     }));
+}
+/**
+ * Function to apply character tags to message divs when rendering the chat
+ * @param {object} options Options for applying character tags
+ * @param {number|number[]} [options.mesIds=[]] An id or array of message IDs to filter by.
+ * If empty, all messages will be processed.
+ * @returns {void}
+ * @description This function iterates through the chat messages and applies character tags
+ */
+export function applyCharacterTagsToMessageDivs({ mesIds = [] } = {}) {
+    try {
+        const messagesFilter = buildMessagesFilter(mesIds);
+        const messages = $('#chat').children(messagesFilter);
+        // Clear existing tags
+        messages.each(function () {
+            const element = this; // Get the raw DOM element
+            for (const attr of [...element.attributes]) {
+                if (attr.name.startsWith('data-char-tag-') || attr.name === 'data-char-tags') {
+                    element.removeAttribute(attr.name);
+                }
+            }
+        });
+        const tagsList = tags, characterTagData = tag_map;
+        if (!tagsList?.length || !characterTagData) {
+            return;
+        }
+        const tagNamesById = tagsList.reduce((acc, tag) => {
+            acc[tag.id] = tag.name;
+            return acc;
+        }, {});
+        const characterTagsCache = new Map();
+        // Iterate each message div
+        messages.each(function () {
+            const $this = $(this); // Store the jQuery object
+            const avatarFileName = extractCharacterAvatar($this.find('.avatar img').attr('src'));
+            if (!avatarFileName) {
+                return;
+            }
+            let tagsForCharacter = characterTagsCache.get(avatarFileName);
+            // If tags are NOT in the cache, compute and store them
+            if (!tagsForCharacter) {
+                const tagIds = characterTagData[avatarFileName];
+                if (tagIds?.length) {
+                    const tagNames = tagIds
+                        .map(id => tagNamesById[id])
+                        .filter(Boolean);
+                    if (tagNames.length) {
+                        tagsForCharacter = {
+                            tagNames,
+                            joinedTagNames: tagNames
+                                .map(name => name?.replace(/,/g, ' ')) // replace commas with spaces to avoid issues with tag names containing commas
+                                .join(','),
+                        };
+                        // Add the newly computed tags to the cache
+                        characterTagsCache.set(avatarFileName, tagsForCharacter);
+                    }
+                }
+            }
+            // If we have tags (either from cache or newly computed), apply them
+            if (tagsForCharacter) {
+                applyTags($this, tagsForCharacter);
+            }
+        });
+    } catch (error) {
+        console.error('Error applying character tags to message divs:', error);
+    }
+}
+/**
+ * Builds a jQuery selector string to filter messages by their IDs.
+ * @param {number|number[]} mesIds - An id or array of message IDs to filter by.
+ * @returns {string} A jQuery selector string that matches messages with the specified IDs.
+ * If mesIds is empty, it returns '.mes' to select all messages.
+ * @example
+ * buildMessagesFilter([1, 5]); // Returns '.mes[mesid="1"],.mes[mesid="5"]'
+ * buildMessagesFilter([]); // Returns '.mes'
+ */
+function buildMessagesFilter(mesIds) {
+    const allMessages = '.mes';
+    if (!mesIds) {
+        return allMessages; // If no mesIds provided, select all messages
+    }
+    const mesIdsArray = Array.isArray(mesIds) ? mesIds : [mesIds];
+    if (mesIdsArray?.length) {
+        // Create a valid jQuery selector for multiple attribute values.
+        // Example output: '.mes[mesid="1"],.mes[mesid="5"]'
+        return mesIdsArray.map(id => `.mes[mesid="${id}"]`).join(',');
+    }
+    // If mesIds is empty, select all messages.
+    return allMessages;
+}
+/**
+ * Helper function to apply all necessary data attributes to a DOM element.
+ * @param {JQuery<HTMLElement>} $element - The jQuery object for the message div.
+ * @param {object} tagData - An object containing tag information.
+ * @param {string[]} tagData.tagNames - An array of tag names.
+ * @param {string} tagData.joinedTagNames - A comma-separated string of tag names.
+ */
+function applyTags($element, tagData) {
+    $element.attr('data-char-tags', tagData.joinedTagNames);
+    tagData.tagNames.forEach(tagName => {
+        const normalizedTagName = normalizeTagName(tagName);
+        if (!normalizedTagName) {
+            return; // Skip empty tag names
+        }
+        $element.attr(`data-char-tag-${normalizedTagName}`, '');
+    });
+}
+/**
+ * Normalizes a tag name by trimming, converting spaces to hyphens, replacing accented characters,
+ * removing special characters, and converting to lowercase.
+ * @param {string} name The tag name to normalize.
+ * @returns {string} The normalized tag name.
+ */
+function normalizeTagName(name) {
+    if (!name?.trim()) {
+        return '';
+    }
+    // Normalize the tag name by trimming, converting spaces to hyphens, replacing accented characters, removing special characters, and converting to lowercase
+    return name.trim()
+        .normalize('NFD') // Normalize accented characters
+        .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
+        .replace(/[^a-zA-Z0-9\s_-]/g, '') // Remove special characters except spaces, underscores, and hyphens
+        .replace(/[\s_]+/g, '-') // Replace spaces and underscores with hyphens
+        .toLowerCase();
+}
+/** Extracts the character avatar file name from the avatar source URL.
+ * @param {string} avatarSrc The source URL of the character avatar.
+ * @returns {string|null} The normalized avatar file name, or null if the input is falsy or doesn't contain a valid file name.
+ */
+function extractCharacterAvatar(avatarSrc) {
+    if (!avatarSrc) {
+        return null;
+    }
+    try {
+        const url = new URL(avatarSrc, window.location.origin);
+        return url?.searchParams.get('file');
+    } catch (error) {
+        console.error('Unable to parse character avatar using avatarSrc', avatarSrc, error);
+        return null;
+    }
+}
 export function initTags() {
     createTagInput('#tagInput', '#tagList', { tagOptions: { removable: true } });
     createTagInput('#groupTagInput', '#groupTagList', { tagOptions: { removable: true } });