Add persona connection states to persona list - Show persona connection/lock states in persona list (chat & char lock) - Refactor persona images url to 'data-avatar-id' attribute - Try make persona blocks' height consistent - Fix persona list not correctly updating selected persona on navigating pages - Fix group/char difference not correctly working - Create common style template for hover-able images buttons/tags where the label only appears on hover

e5db40cf2dc22c7ca45ab73424d0b6bf594230e6

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 2344d98e203f324e0e630ef3daa8c762c3bfc875

public/css/toggle-dependent.css+0 -5 Viewed

     flex-direction: column;
+}
-#user_avatar_block.gridView .avatar-container .avatar-buttons {
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-}
 body.charListGrid #rm_print_characters_block .bogus_folder_select .character_select_container,
 body.charListGrid #rm_print_characters_block .character_select .character_select_container,
 body.charListGrid #rm_print_characters_block .group_select .group_select_container,

public/index.html+12 -19 Viewed

                 <div class="flex-container wide100pLess70px character_select_container">
                     <div class="wide100p character_name_block">
                         <span class="ch_name flex1"></span>
-                        <div class="avatar-buttons">
-                            <!-- <button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
-                                <i class="fa-fw fa-solid fa-user-edit fa-sm"></i>
-                            </button>
-                            <button class="menu_button set_persona_image" title="Change persona image" data-i18n="[title]Change persona image">
-                                <i class="fa-fw fa-solid fa-image fa-sm"></i>
-                            </button>
-                            <button class="menu_button set_default_persona" title="Select this as default persona for the new chats." data-i18n="[title]Select this as default persona for the new chats.">
-                                <i class="fa-fw fa-solid fa-crown fa-sm"></i>
-                            </button>
-                            <button class="menu_button duplicate_persona" title="Duplicate persona" data-i18n="[title]Duplicate persona">
-                                <i class="fa-fw fa-solid fa-clone fa-sm"></i>
-                            </button>
-                            <button class="menu_button delete_avatar" title="Delete persona" data-i18n="[title]Delete persona">
-                                <i class="fa-fw fa-solid fa-trash-alt fa-sm"></i>
-                            </button> -->
-                        </div>
                     </div>
                     <div class="ch_description"></div>
+                    <div class="avatar_container_states buttons_block">
+                        <div class="locked_to_chat_label avatar_state has_hover_label menu_button menu_button_icon disabled" title="Persona is locked to the current chat" data-i18n="[title]Persona is locked to the current chat">
+                            <i class="icon fa-solid fa-lock fa-fw"></i>
+                            <i class="label_icon icon fa-solid fa-comments fa-fw"></i>
+                            <div class="label" data-i18n="Chat">Chat</div>
+                        </div>
+                        <div class="locked_to_character_label avatar_state has_hover_label menu_button menu_button_icon disabled " title="Persona is locked to the current character" data-i18n="[title]Persona is locked to the current character">
+                            <i class="icon fa-solid fa-lock fa-fw"></i>
+                            <i class="label_icon icon fa-solid fa-user fa-fw"></i>
+                            <div class="label" data-i18n="Character">Character</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

public/scripts/personas.js+92 -45 Viewed

     getRequestHeaders,
     getThumbnailUrl,
     groupToEntity,
-    menu_type,
     name1,
     name2,
     reloadCurrentChat,

 /** @typedef {'chat' | 'character' | 'default'} PersonaLockType Type of the persona lock */
+/**
+ * @typedef {object} PersonaState
+ * @property {string} avatarId - The avatar id of the persona
+ * @property {boolean} default - Whether this persona is the default one for all new chats
+ * @property {object} locked - An object containing the lock states
+ * @property {boolean} locked.chat - Whether the persona is locked to the currently open chat
+ * @property {boolean} locked.character - Whether the persona is locked to the currently open character or group
+ */
 const USER_AVATAR_PATH = 'User Avatars/';
 let savePersonasPage = 0;

 export function initUserAvatar(avatar) {
     user_avatar = avatar;
     reloadUserAvatar();
-    highlightSelectedAvatar();
+    updatePersonaUIStates();
+}
 /**

  * @param {string} imgfile Link to an image file
  */
 export function setUserAvatar(imgfile, { toastPersonaNameChange = true } = {}) {
-    user_avatar = imgfile && typeof imgfile === 'string' ? imgfile : $(this).attr('imgfile');
+    user_avatar = imgfile && typeof imgfile === 'string' ? imgfile : $(this).attr('data-avatar-id');
     reloadUserAvatar();
-    highlightSelectedAvatar();
+    updatePersonaUIStates();
     selectCurrentPersona({ toastPersonaNameChange: toastPersonaNameChange });
     saveSettingsDebounced();
     $('.zoomed_avatar[forchar]').remove();
+}
-function highlightSelectedAvatar() {
-    $('#user_avatar_block .avatar-container').removeClass('selected');
-    $(`#user_avatar_block .avatar-container[imgfile="${user_avatar}"]`).addClass('selected');
-}
 function reloadUserAvatar(force = false) {
     $('.mes').each(function () {
         const avatarImg = $(this).find('.avatar img');

 /**
  * Gets a rendered avatar block.
- * @param {string} name Avatar file name
+ * @param {string} avatarId Avatar file name
  * @returns {JQuery<HTMLElement>} Avatar block
  */
-function getUserAvatarBlock(name) {
+function getUserAvatarBlock(avatarId) {
     const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
     const template = $('#user_avatar_template .avatar-container').clone();
-    const personaName = power_user.personas[name];
+    const personaName = power_user.personas[avatarId];
-    const personaDescription = power_user.persona_descriptions[name]?.description;
+    const personaDescription = power_user.persona_descriptions[avatarId]?.description;
     template.find('.ch_name').text(personaName || '[Unnamed Persona]');
     template.find('.ch_description').text(personaDescription || $('#user_avatar_block').attr('no_desc_text')).toggleClass('text_muted', !personaDescription);
-    template.attr('imgfile', name);
+    template.attr('data-avatar-id', avatarId);
-    template.find('.avatar').attr('imgfile', name).attr('title', name);
+    template.find('.avatar').attr('data-avatar-id', avatarId).attr('title', avatarId);
-    template.toggleClass('default_persona', name === power_user.default_persona);
+    template.toggleClass('default_persona', avatarId === power_user.default_persona);
-    let avatarUrl = getUserAvatar(name);
+    let avatarUrl = getUserAvatar(avatarId);
     if (isFirefox) {
         avatarUrl += '?t=' + Date.now();
+    }
     template.find('img').attr('src', avatarUrl);
+    // Make sure description block has at least three rows. Otherwise height looks inconsistent. I don't have a better idea for this.
+    const currentText = template.find('.ch_description').text();
+    if (currentText.split('\n').length < 3) {
+        template.find('.ch_description').text(currentText + '\n\xa0\n\xa0');
+    }
     $('#user_avatar_block').append(template);
     return template;
+}

                 for (const item of data) {
                     $(listId).append(getUserAvatarBlock(item));
+                }
-                highlightSelectedAvatar();
+                updatePersonaUIStates();
             },
             afterSizeSelectorChange: function (e) {
                 localStorage.setItem(storageKey, e.target.value);

     $('#persona_lore_button').toggleClass('world_set', !!power_user.persona_description_lorebook);
     countPersonaDescriptionTokens();
-    updatePersonaLockIcons();
+    updatePersonaUIStates();
     updatePersonaConnectionsAvatarList();
+}

@@ -780,7 +791,7 @@ function selectCurrentPersona({ toastPersonaNameChange = true } = {}) {
780	toastr.success(`Persona ${personaName} selected and auto-locked to current chat`, t`Persona Selected`);	791	toastr.success(`Persona ${personaName} selected and auto-locked to current chat`, t`Persona Selected`);
781	}	792	}
782	saveMetadataDebounced();	793	saveMetadataDebounced();
783	updatePersonaLockIcons();	794	updatePersonaUIStates();
784	}	795	}
785		796
786	// As the last step, inform user if the persona is only temporarily chosen	797	// As the last step, inform user if the persona is only temporarily chosen

  * @returns {boolean} Whether the connection is locked
  */
 export function isPersonaConnectionLocked(connection) {
-    return (menu_type === 'character_edit' && connection.type === 'character' && connection.id === characters[this_chid]?.avatar)
+    return (!selected_group && connection.type === 'character' && connection.id === characters[this_chid]?.avatar)
-        || (menu_type === 'group_edit' && connection.type === 'group' && connection.id === selected_group);
+        || (selected_group && connection.type === 'group' && connection.id === selected_group);
+}
 /**

@@ -894,7 +905,7 @@ async function unlockPersona(type = 'chat') {
894	throw new Error(`Unknown persona lock type: ${type}`);	905	throw new Error(`Unknown persona lock type: ${type}`);
895	}	906	}
896		907
897	updatePersonaLockIcons();	908	updatePersonaUIStates();
898	}	909	}
899		910
900	/**	911	/**

@@ -969,7 +980,7 @@ async function lockPersona(type = 'chat') {
969	throw new Error(`Unknown persona lock type: ${type}`);	980	throw new Error(`Unknown persona lock type: ${type}`);
970	}	981	}
971		982
972	updatePersonaLockIcons();	983	updatePersonaUIStates();
973	}	984	}
974		985
975		986

 async function toggleDefaultPersonaClicked(e) {
     e?.stopPropagation();
-    const avatarId = $(e.currentTarget).closest('.avatar-container').find('.avatar').attr('imgfile');
+    const avatarId = $(e.currentTarget).closest('.avatar-container').find('.avatar').attr('data-avatar-id');
     if (avatarId) {
         await toggleDefaultPersona(avatarId);
     } else {

     saveSettingsDebounced();
     await getUserAvatars(true, avatarId);
-    updatePersonaLockIcons();
+    updatePersonaUIStates();
+}
-function updatePersonaLockIcons() {
+/**
-    const isDefaultPersona = power_user.default_persona === user_avatar;
+ * Returns an object with 3 properties that describe the state of the given persona
-    $('#lock_persona_default').toggleClass('locked', isDefaultPersona);
+ *
+ * - default: Whether this persona is the default one for all new chats
-    const hasChatLock = chat_metadata['persona'] == user_avatar;
+ * - locked: An object containing the lock states
-    $('#lock_user_name').toggleClass('locked', hasChatLock);
+ *   - chat: Whether the persona is locked to the currently open chat
-    $('#lock_user_name i.icon').toggleClass('fa-lock', hasChatLock);
+ *   - character: Whether the persona is locked to the currently open character or group
-    $('#lock_user_name i.icon').toggleClass('fa-unlock', !hasChatLock);
+ * @param {string} avatarId - The avatar id of the persona to get the state for
+ * @returns {PersonaState} An object describing the state of the given persona
+ */
+function getPersonaStates(avatarId) {
+    const isDefaultPersona = power_user.default_persona === avatarId;
+    const hasChatLock = chat_metadata['persona'] == avatarId;
     /** @type {PersonaConnection[]} */
-    const connections = power_user.persona_descriptions[user_avatar]?.connections;
+    const connections = power_user.persona_descriptions[avatarId]?.connections;
     const hasCharLock = !!connections?.some(c =>
-        (menu_type === 'character_edit' && c.type === 'character' && c.id === characters[this_chid]?.avatar)
+        (!selected_group && c.type === 'character' && c.id === characters[this_chid]?.avatar)
-        || (menu_type === 'group_edit' && c.type === 'group' && c.id === selected_group));
+        || (selected_group && c.type === 'group' && c.id === selected_group));
-    $('#lock_persona_to_char').toggleClass('locked', hasCharLock);
-    $('#lock_persona_to_char i.icon').toggleClass('fa-lock', hasCharLock);
+    return {
-    $('#lock_persona_to_char i.icon').toggleClass('fa-unlock', !hasCharLock);
+        avatarId: avatarId,
+        default: isDefaultPersona,
+        locked: {
+            chat: hasChatLock,
+            character: hasCharLock,
+        },
+    };
+}
+function updatePersonaUIStates() {
+    // Update the persona list
+    $('#user_avatar_block .avatar-container').each(function () {
+        const avatarId = $(this).attr('data-avatar-id');
+        const states = getPersonaStates(avatarId);
+        $(this).toggleClass('default_persona', states.default);
+        $(this).toggleClass('locked_to_chat', states.locked.chat);
+        $(this).toggleClass('locked_to_character', states.locked.character);
+        $(this).toggleClass('selected', avatarId === user_avatar);
+    });
+    // Buttons for the persona panel on the right
+    const personaStates = getPersonaStates(user_avatar);
+    $('#lock_persona_default').toggleClass('locked', personaStates.default);
+    $('#lock_user_name').toggleClass('locked', personaStates.locked.chat);
+    $('#lock_user_name i.icon').toggleClass('fa-lock', personaStates.locked.chat);
+    $('#lock_user_name i.icon').toggleClass('fa-unlock', !personaStates.locked.chat);
+    $('#lock_persona_to_char').toggleClass('locked', personaStates.locked.character);
+    $('#lock_persona_to_char i.icon').toggleClass('fa-lock', personaStates.locked.character);
+    $('#lock_persona_to_char i.icon').toggleClass('fa-unlock', !personaStates.locked.character);
+}
 async function loadPersonaForCurrentChat({ doRender = false } = {}) {

@@ -1315,7 +1362,7 @@ async function loadPersonaForCurrentChat({ doRender = false } = {}) {
1315	}	1362	}
1316	}	1363	}
1317		1364
1318	updatePersonaLockIcons();	1365	updatePersonaUIStates();
1319	}	1366	}
1320		1367
1321	/**	1368	/**

  * @returns {string[]} - An array of persona keys that are connected to the given character key
  */
 export function getConnectedPersonas(characterKey = undefined) {
-    characterKey ??= menu_type === 'group_edit' ? selected_group : characters[this_chid]?.avatar;
+    characterKey ??= selected_group || characters[this_chid]?.avatar;
     const connectedPersonas = Object.entries(power_user.persona_descriptions)
         .filter(([_, desc]) => desc.connections?.some(conn => conn.type === 'character' && conn.id === characterKey))
         .map(([key, _]) => key);

  */
 export function getCurrentConnectionObj() {
-    if (menu_type === 'group_edit')
+    if (selected_group)
         return { type: 'group', id: selected_group };
-    if (menu_type == 'character_edit')
+    if (characters[this_chid]?.avatar)
         return { type: 'character', id: characters[this_chid]?.avatar };
     return null;
+}

     $('#avatar_upload_file').on('change', changeUserAvatar);
     $(document).on('click', '#user_avatar_block .avatar-container', function () {
-        const imgfile = $(this).attr('imgfile');
+        const imgfile = $(this).attr('data-avatar-id');
         setUserAvatar(imgfile);
         // force firstMes {{user}} update on persona switch

public/style.css+58 -30 Viewed

     animation-name: flash;
+}
+.has_hover_label .label_icon {
+    transition: opacity var(--animation-duration) ease, max-width var(--animation-duration) ease;
+}
+.has_hover_label .label {
+    transition: opacity var(--animation-duration-slow) ease, max-width var(--animation-duration-slow) ease;
+    /* Prevent double gap on hidden icon */
+    margin-left: -5px;
+}
+.has_hover_label .label_icon,
+.has_hover_label .label {
+    transition-delay: var(--animation-duration-slow);
+}
+.has_hover_label.fast .label_icon,
+.has_hover_label.fast .label {
+    transition-delay: var(--animation-duration);
+}
+.has_hover_label .label_icon,
+.has_hover_label:hover .label {
+    opacity: 1;
+    max-width: 100px;
+}
+.has_hover_label:hover .label_icon,
+.has_hover_label .label {
+    opacity: 0;
+    max-width: 0;
+    overflow: hidden;
+}
 /* Keyboard/focus navigation styling */
 /* Mimic the outline of keyboard navigation for most most focusable controls */
 .interactable {

 .menu_button.disabled {
     filter: brightness(75%) grayscale(1);
     opacity: 0.5;
+    cursor: inherit;
     pointer-events: none;
+}

+}
 #form_character_search_form .menu_button,
-#GroupFavDelOkBack .menu_button,
+#GroupFavDelOkBack .menu_button {
-.avatar-container .menu_button {
     margin: 0;
     height: fit-content;
     padding: 5px;

@@ -2915,8 +2946,9 @@ select option:not(:checked) {
2915	width: max-content;	2946	width: max-content;
2916	}	2947	}
2917		2948
2918	#persona-management-block .menu_button {	2949	#persona-management-block .avatar_container_states .menu_button {
2919	filter: grayscale(0.5);	2950	padding: 3px 5px;
		2951	pointer-events: initial;
2920	}	2952	}
2921		2953
2922	#persona_controls .persona_name {	2954	#persona_controls .persona_name {

     z-index: 35;
+}
-.avatar-container .avatar-buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 3px;
-    opacity: 0.3;
-    transition: opacity 0.25s ease-in-out;
-}
-.avatar-container .avatar-buttons:hover {
-    opacity: 1;
-}
-.avatar-container .avatar-buttons .menu_button {
-    padding: 3px;
-}
-/* Ross should be able to handle this later */
-/*.big-avatars .avatar-buttons{
-    justify-content: center;
-    width: fit-content;
-}*/
 .avatar_div .avatar {
     /*     margin-left: 4px;
     margin-right: 10px;

 .menu_button {
     color: var(--SmartThemeBodyColor);
+    filter: grayscale(0.5);
     background-color: var(--SmartThemeBlurTintColor);
     border: 1px solid var(--SmartThemeBorderColor);
     border-radius: 5px;

@@ -3622,8 +3633,8 @@ grammarly-extension {
3622	min-width: calc(1.25em + 12px);	3633	min-width: calc(1.25em + 12px);
3623	}	3634	}
3624		3635
3625	.menu_button:hover,	3636	.menu_button:not(.disabled):hover,
3626	.menu_button.active {	3637	.menu_button:not(.disabled).active {
3627	background-color: var(--white30a);	3638	background-color: var(--white30a);
3628	}	3639	}
3629		3640

     color: var(--golden);
+}
+.avatar-container .avatar_state .fa-lock {
+    color: var(--active);
+}
+.avatar-container:not(.locked_to_chat) .locked_to_chat_label {
+    display: none;
+}
+.avatar-container:not(.locked_to_character) .locked_to_character_label {
+    display: none;
+}
 #lock_persona_default.locked i.icon {
     color: var(--golden);
+}
-#lock_user_name.locked i.icon,
-#lock_persona_to_char.locked i.icon {
+#lock_user_name.locked .icon,
+.avatar-container.locked_to_chat .locked_to_chat_label .icon {
+    color: var(--SmartThemeQuoteColor);
+}
+#lock_persona_to_char.locked .icon,
+.avatar-container.locked_to_character .locked_to_character_label .icon {
     color: var(--active);
+}