Highlight personas from current chat in popup

2253990898b6772ee58771df694a203b8db8717e

Wolfsblvt <wolfsblvt@gmail.com>

public/script.js+1 -0 Viewed

         const message = t`The following personas are connected to the current character.\n\nClick on a persona to select it for the current character.\nShift + Click to unlink the persona from the character.`;
         const selectedPersona = await askForPersonaSelection(t`Persona Connections`, message, connections, {
             okButton: t`Ok`,
 +            highlightPersonas: true,
             shiftClickHandler: (element, ev) => {
                 const personaId = $(element).attr('data-pid');

public/scripts/personas.js+26 -4 Viewed

 } from '../script.js';
 import { persona_description_positions, power_user } from './power-user.js';
 import { getTokenCountAsync } from './tokenizers.js';
 import { PAGINATION_TEMPLATE, debounce, delay, download, ensureImageFormatSupported, flashHighlight, getBase64Async, getCharIndex, onlyUnique, parseJsonFile } from './utils.js';
 import { debounce_timeout } from './constants.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';
 import { groups, selected_group } from './group-chats.js';

 /** @typedef {'chat' | 'character' | 'default'} PersonaLockType Type of the persona lock */
 +const USER_AVATAR_PATH = 'User Avatars/';
++
 let savePersonasPage = 0;
 const GRID_STORAGE_KEY = 'Personas_GridView';
 const DEFAULT_DEPTH = 2;

  * @returns {string} User avatar URL
  */
 export function getUserAvatar(avatarImg) {
     return `User Avatars/${USER_AVATAR_PATH}${avatarImg}`;
+}
 export function initUserAvatar(avatar) {

     updatePersonaConnectionsAvatarList();
+}
 +/**
 + * Gets a list of all personas in the current chat.
 + *
 + * @returns {string[]} An array of persona identifiers
 + */
 +function getPersonasOfCurrentChat() {
 +    const personas = chat.filter(message => String(message.force_avatar).startsWith(USER_AVATAR_PATH))
 +        .map(message => message.force_avatar.replace(USER_AVATAR_PATH, ''))
 +        .filter(onlyUnique);
 +    return personas;
 +}
 /**
  * Builds a list of persona avatars and populates the given block element with them.

  * @param {Object} [options] - Optional settings for the popup
  * @param {string} [options.okButton='None'] - The label for the OK button
  * @param {(element: HTMLElement, ev: MouseEvent) => any} [options.shiftClickHandler] - A function to handle shift-click
 + * @param {boolean|string[]} [options.highlightPersonas=false] - Whether to highlight personas - either by providing a list of persona keys, or true to highlight all present in current chat
  * @returns {Promise<string?>} - A promise that resolves to the selected persona id or null if no selection was made
  */
 export async function askForPersonaSelection(title, text, personas, { okButton = 'None', shiftClickHandler = undefined, highlightPersonas = false } = {}) {
     const content = document.createElement('div');
     const titleElement = document.createElement('h3');
     titleElement.textContent = title;

     else
         personaListBlock.textContent = '[No personas]';
 +    const personasToHighlight = highlightPersonas instanceof Array ? highlightPersonas : (highlightPersonas ? getPersonasOfCurrentChat() : []);
++
     // Make the persona blocks clickable and close the popup
     personaListBlock.querySelectorAll('.avatar[data-type="persona"]').forEach(block => {
         if (!(block instanceof HTMLElement)) return;

+                }
             });
+        }
++
 +        if (personasToHighlight && personasToHighlight.includes(block.dataset.pid)) {
 +            block.classList.add('is_active');
 +            block.title = block.title + '\n\n' + t`Was used in current chat.`;
 +            if (block.classList.contains('is_fav')) block.title = block.title + '\n' + t`Is your default persona.`;
 +        }
     });
     const popup = new Popup(content, POPUP_TYPE.TEXT, '', { okButton: okButton });

@@ -1225,7 +1247,7 @@ async function loadPersonaForCurrentChat() {
1225	1247	} else {
1226	1248	chatPersona = await askForPersonaSelection(t`Select Persona`,
1227	1249	t`Multiple personas are connected to this character.\nSelect a persona to use for this chat.`,
1228		- connectedPersonas);
	1250	+ connectedPersonas, { highlightPersonas: true });
1229	1251	}
1230	1252	}
1231	1253

public/style.css+4 -0 Viewed

     color: var(--golden);
+}
 +.avatar.is_active {
 +    outline: 2px solid var(--active);
 +}
++
 #fav_chara_wrap {
     display: flex;
     margin: 5px 0px;