Merge pull request #3346 from SillyTavern/persona-improvements Expand Persona links/locking to characters and allowing more control on which persona to choose/load

12ef33bca4774e9d6369feaa5b2503ccfc8d6656

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

Parents: e98172bb0eafe3bfe4a4bf63cd90829e293c4708 2cfaa034fbc69a6ed9c1a34315880b0d63e9e2bb

public/css/toggle-dependent.css+6 -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,

 body.big-avatars .avatars_inline {
     max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius));
+}
+body.big-avatars .avatars_inline.avatars_multiline {
+    max-height: fit-content;
+}
 body.big-avatars .avatars_inline.avatars_inline_small {
     height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));
+}
+body.big-avatars .avatars_inline.avatars_inline_small.avatars_multiline {
+    height: inherit;
+}
 body:not(.big-avatars) .avatars_inline_small .avatar_collage {
     min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));

public/index.html+80 -37 Viewed

                         </div>
                     </div>
                     <div id="persona-management-block" class="flex-container wide100p flexGap10">
-                        <div class="flex1 overflowHidden wide100p">
+                        <div class="persona_management_left_column flex1 overflowHidden wide100p">
                             <div class="flex-container marginBot10 alignitemscenter">
                                 <div id="create_dummy_persona" class="menu_button menu_button_icon" title="Create a dummy persona" data-i18n="[title]Create a dummy persona">
                                     <i class="fa-solid fa-person-circle-question fa-fw"></i>

                                 <input type="hidden" id="avatar_upload_overwrite" name="overwrite_name" value="">
                             </form>
                         </div>
-                        <div class="flex1">
+                        <div class="persona_management_right_column flex1">
-                            <h4 data-i18n="Name">Name</h4>
+                            <div class="persona_management_current_persona">
-                            <div class="change_name">
+                                <h4 class="standoutHeader" data-i18n="Current Persona">Current Persona</h4>
-                                <input id="your_name" name="your_name" data-i18n="[placeholder]Enter your name" placeholder="Enter your name" class="text_pole wide100p" value="" autocomplete="off">
-                                <div id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name" data-i18n="[title]Click to set a new User Name">
+                                <div id="persona_controls" class="flex-container">
-                                </div>
+                                    <h5 id="your_name" class="persona_name">[Persona Name]</h5>
-                                <div id="lock_user_name" class="menu_button fa-solid fa-unlock" title="Click to lock your selected persona to the current chat. Click again to remove the lock." data-i18n="[title]Click to lock your selected persona to the current chat. Click again to remove the lock.">
+                                    <div class="persona_controls_buttons_block buttons_block">
-                                </div>
+                                        <div id="persona_rename_button" class="menu_button fa-solid fa-pencil" title="Rename Persona" data-i18n="[title]Rename Persona"></div>
-                                <div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages">
+                                        <div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages"></div>
-                                </div>
+                                        <div id="persona_lore_button" class="menu_button fa-solid fa-globe" title="Persona Lore&#10;Alt+Click to open the lorebook" data-i18n="[title]Persona Lore Alt+Click to open the lorebook"></div>
-                                <div id="persona_lore_button" class="menu_button fa-solid fa-globe" title="Persona Lore&#10;Alt+Click to open the lorebook" data-i18n="[title]Persona Lore Alt+Click to open the lorebook">
+                                        <div id="persona_set_image_button" class="menu_button fa-solid fa-image" title="Change Persona Image" data-i18n="[title]Change Persona Image"></div>
+                                        <div id="persona_duplicate_button" class="menu_button fa-solid fa-clone" title="Duplicate Persona" data-i18n="[title]Duplicate Persona"></div>
+                                        <div id="persona_delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Persona" data-i18n="[title]Delete Persona"></div>
                                     </div>
                                 </div>
-                            <div>
                                 <h4 data-i18n="Persona Description">Persona Description</h4>
                                 <textarea id="persona_description" name="persona_description" data-i18n="[placeholder]Example: [{{user}} is a 28-year-old Romanian cat girl.]" placeholder="Example:&#10;[{{user}} is a 28-year-old Romanian cat girl.]" class="text_pole textarea_compact" value="" autocomplete="off" rows="8"></textarea>
-                                <div class="extension_token_counter">
+                                <div class="flex-container justifySpaceBetween">
+                                    <h4 data-i18n="Position">Position</h4>
+                                    <div class="extension_token_counter widthFitContent">
                                         <span data-i18n="Tokens persona description">Tokens</span>: <span id="persona_description_token_count">0</span>
                                     </div>
-                                <div>
+                                </div>
-                                    <label for="persona_description_position" data-i18n="Position:">Position:</label>
+                                <div class="persona_management_description_position_container">
                                     <select id="persona_description_position">
                                         <option value="9" data-i18n="None (disabled)">None (disabled)</option>
                                         <option value="0" data-i18n="In Story String / Prompt Manager">In Story String / Prompt Manager</option>

                                         </div>
                                     </div>
                                 </div>
+                                <h4 data-i18n="Connections">Connections</h4>
+                                <div id="persona_connections_buttons" class="flex-container">
+                                    <div id="lock_persona_default" class="menu_button menu_button_icon" title="Click to select this as default persona for the new chats. Click again to remove it." data-i18n="[title]Click to select this as default persona for the new chats. Click again to remove it.">
+                                        <i class="icon fa-solid fa-crown fa-fw"></i>
+                                        <div data-i18n="Default">Default</div>
+                                    </div>
+                                    <div id="lock_user_name" class="menu_button menu_button_icon" title="Click to lock your selected persona to the current chat. Click again to remove the lock." data-i18n="[title]Click to lock your selected persona to the current chat. Click again to remove the lock.">
+                                        <i class="icon fa-solid fa-unlock fa-fw"></i>
+                                        <div data-i18n="Chat">Chat</div>
+                                    </div>
+                                    <div id="lock_persona_to_char" class="menu_button menu_button_icon" title="Click to lock your selected persona to the current character. Click again to remove the lock." data-i18n="[title]Click to lock your selected persona to the current character. Click again to remove the lock.">
+                                        <i class="icon fa-solid fa-unlock fa-fw"></i>
+                                        <div data-i18n="Character">Character</div>
+                                    </div>
+                                </div>
+                                <div id="persona_connections_info_block"></div>
+                                <div id="persona_connections_list" class="text_muted m-b-1 avatars_inline avatars_multiline scroll-reset-container expander">
+                                </div>
                             </div>
+                            <div class="persona_management_global_settings">
+                                <h4 class="standoutHeader" data-i18n="Global Settings">Global Settings</h4>
                                 <div class="range-block">
                                     <label for="persona_show_notifications" class="checkbox_label">
                                         <input id="persona_show_notifications" type="checkbox" />

                                         </span>
                                     </label>
                                 </div>
+                                <div class="range-block">
+                                    <label for="persona_allow_multi_connections" class="checkbox_label" title="When multiple personas are connected to a character, a popup will appear to select which one to use." data-i18n="[title]When multiple personas are connected to a character, a popup will appear to select which one to use">
+                                        <input id="persona_allow_multi_connections" type="checkbox" />
+                                        <span data-i18n="Allow multiple persona connections per character">
+                                            Allow multiple persona connections per character
+                                        </span>
+                                    </label>
+                                </div>
+                                <div class="range-block">
+                                    <label for="persona_auto_lock" class="checkbox_label" title="Whenever a persona is selected, it will be locked to the current chat and automatically selected when the chat is opened." data-i18n="[title]Whenever a persona is selected, it will be locked to the current chat and automatically selected when the chat is opened.">
+                                        <input id="persona_auto_lock" type="checkbox" />
+                                        <span data-i18n="Auto-lock a chosen persona to the chat">
+                                            Auto-lock a chosen persona to the chat
+                                        </span>
+                                    </label>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>

                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
                     </div>
                     <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
-                        <div class="hotswap avatars_inline flex-container scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
+                        <div class="hotswap avatars_inline scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
                     </div>
                 </div>
                 <hr>

                                 </div>
                             </div>
                             <div class="flex-container flexFlowColumn expander flexNoGap">
-                                <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
+                                <div id="avatar_div" class="avatar_div buttons_block alignitemsflexstart justifySpaceBetween flexnowrap">
                                     <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
                                         <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                         <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
                                     </label>
                                     <div class="flex-container" id="avatar_controls">
-                                        <div class="form_create_bottom_buttons_block">
+                                        <div class="form_create_bottom_buttons_block buttons_block">
                                             <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
                                             <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
                                             <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>

                                             <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions" data-i18n="[title]Advanced Definition"></div>
                                             <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore&#10;&#10;Click to load&#10;Shift-click to open 'Link to World Info' popup" data-i18n="[title]world_button_title"></div>
                                             <div class="chat_lorebook_button menu_button fa-solid fa-passport" title="Chat Lore&#10;Alt+Click to open the lorebook" data-i18n="[title]Chat Lore Alt+Click to open the lorebook"></div>
+                                            <div id="char_connections_button" class="menu_button fa-solid fa-face-smile" title="Connected Personas" data-i18n="[title]Connected Personas"></div>
                                             <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download" data-i18n="[title]Export and Download"></div>
                                             <!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
                                             <!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->

                                             <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
                                                 <input type="submit" id="create_button" name="create_button">
                                             </label>
-                                            <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
+                                            <div id="delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Character" data-i18n="[title]Delete Character"></div>
                                         </div>
                                         <label class="flex1 height100p" for="char-management-dropdown">
                                             <select id="char-management-dropdown" class="text_pole">

                 <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/script.js+27 -10 Viewed

     initPersonas,
     setPersonaDescription,
     initUserAvatar,
+    updatePersonaConnectionsAvatarList,
+    isPersonaPanelOpen,
 } from './scripts/personas.js';
 import { getBackgrounds, initBackgrounds, loadBackgroundSettings, background_settings } from './scripts/backgrounds.js';
 import { hideLoader, showLoader } from './scripts/loader.js';

     await initTokenizers();
     initBackgrounds();
     initAuthorsNote();
-    initPersonas();
+    await initPersonas();
     initRossMods();
     initStats();
     initCfg();

     stopStatusLoading();
+}
+/**
+ * Switches the currently selected character to the one with the given ID. (character index, not the character key!)
+ *
+ * If the character ID doesn't exist, if the chat is being saved, or if a group is being generated, this function does nothing.
+ * If the character is different from the currently selected one, it will clear the chat and reset any selected character or group.
+ * @param {number} id The ID of the character to switch to.
+ */
 export async function selectCharacterById(id) {
     if (characters[id] === undefined) {
         return;

+    }
     // Populate the template
     const template = $('#character_template .character_select').clone();
-    template.attr({ 'chid': id, 'id': `CharID${id}` });
+    template.attr({ 'data-chid': id, 'id': `CharID${id}` });
     template.find('img').attr('src', this_avatar).attr('alt', item.name);
     template.find('.avatar').attr('title', `[Character] ${item.name}\nFile: ${item.avatar}`);
     template.find('.ch_name').text(item.name).attr('title', `[Character] ${item.name}`);

     });
     favsToHotswap();
+    updatePersonaConnectionsAvatarList();
+}
 /** Checks the state of the current search, and adds/removes the search sorting option accordingly */

             if (newChId !== -1) {
                 // Select the character after the renaming
                 this_chid = -1;
-                await selectCharacterById(String(newChId));
+                await selectCharacterById(newChId);
                 // Async delay to update UI
                 await delay(1);

+        }
         avatarTemplate.attr('data-type', entity.type);
-        avatarTemplate.attr({ 'chid': id, 'id': `CharID${id}` });
+        avatarTemplate.attr('data-chid', id);
         avatarTemplate.find('img').attr('src', this_avatar).attr('alt', entity.item.name);
         avatarTemplate.attr('title', `[Character] ${entity.item.name}\nFile: ${entity.item.avatar}`);
         if (highlightFavs) {

             avatarTemplate.addClass(grpTemplate.attr('class'));
             avatarTemplate.empty();
             avatarTemplate.append(grpTemplate.children());
+            avatarTemplate.attr({ 'data-grid': id, 'data-chid': null });
             avatarTemplate.attr('title', `[Group] ${entity.item.name}`);
+        }
+        else if (entity.type === 'persona') {
+            avatarTemplate.attr({ 'data-pid': id, 'data-chid': null });
+            avatarTemplate.find('img').attr('src', getUserAvatar(entity.item.avatar));
+            avatarTemplate.attr('title', `[Persona] ${entity.item.name}\nFile: ${entity.item.avatar}`);
+        }
         if (interactable) {
             avatarTemplate.addClass(INTERACTABLE_CONTROL_CLASS);

@@ -6861,14 +6878,14 @@ export function changeMainAPI() {
6861	forceCharacterEditorTokenize();	6878	forceCharacterEditorTokenize();
6862	}	6879	}
6863		6880
6864	export function setUserName(value) {	6881	export function setUserName(value, { toastPersonaNameChange = true } = {}) {
6865	name1 = value;	6882	name1 = value;
6866	if (name1 === undefined \|\| name1 == '')	6883	if (name1 === undefined \|\| name1 == '')
6867	name1 = default_user_name;	6884	name1 = default_user_name;
6868	console.log(`User name changed to ${name1}`);	6885	console.log(`User name changed to ${name1}`);
6869	$('#your_name').val(name1);	6886	$('#your_name').text(name1);
6870	if (power_user.persona_show_notifications) {	6887	if (toastPersonaNameChange && power_user.persona_show_notifications && !isPersonaPanelOpen()) {
6871	toastr.success(t`Your messages will now be sent as ${name1}`, t`Current persona updated`);	6888	toastr.success(t`Your messages will now be sent as ${name1}`, t`Persona Changed`);
6872	}	6889	}
6873	saveSettingsDebounced();	6890	saveSettingsDebounced();
6874	}	6891	}

         settings = JSON.parse(data.settings);
         if (settings.username !== undefined && settings.username !== '') {
             name1 = settings.username;
-            $('#your_name').val(name1);
+            $('#your_name').text(name1);
+        }
         accountStorage.init(settings?.accountStorage);

     });
     $(document).on('click', '.character_select', async function () {
-        const id = $(this).attr('chid');
+        const id = Number($(this).attr('data-chid'));
         await selectCharacterById(id);
     });

public/scripts/BulkEditOverlay.js+8 -8 Viewed

      * @param {HTMLElement} currentCharacter - The html element of the currently toggled character
      */
     handleShiftClick = (currentCharacter) => {
-        const characterId = currentCharacter.getAttribute('chid');
+        const characterId = Number(currentCharacter.getAttribute('data-chid'));
         const select = !this.selectedCharacters.includes(characterId);
         if (this.lastSelected.characterId && this.lastSelected.select !== undefined) {

      * @param {boolean} [param1.markState] - Whether the toggle of this character should be remembered as the last done toggle
      */
     toggleSingleCharacter = (character, { markState = true } = {}) => {
-        const characterId = character.getAttribute('chid');
+        const characterId = Number(character.getAttribute('data-chid'));
         const select = !this.selectedCharacters.includes(characterId);
         const legacyBulkEditCheckbox = character.querySelector('.' + BulkEditOverlay.legacySelectedClass);

         if (select) {
             character.classList.add(BulkEditOverlay.selectedClass);
             if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = true;
-            this.#selectedCharacters.push(String(characterId));
+            this.#selectedCharacters.push(characterId);
         } else {
             character.classList.remove(BulkEditOverlay.selectedClass);
             if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = false;
-            this.#selectedCharacters = this.#selectedCharacters.filter(item => String(characterId) !== item);
+            this.#selectedCharacters = this.#selectedCharacters.filter(item => characterId !== item);
+        }
         this.updateSelectedCount();

      * @param {boolean} select - <c>true</c> if the characters in the range are to be selected, <c>false</c> if deselected
      */
     toggleCharactersInRange = (currentCharacter, select) => {
-        const currentCharacterId = currentCharacter.getAttribute('chid');
+        const currentCharacterId = Number(currentCharacter.getAttribute('data-chid'));
         const characters = Array.from(document.querySelectorAll('#' + BulkEditOverlay.containerId + ' .' + BulkEditOverlay.characterClass));
-        const startIndex = characters.findIndex(c => c.getAttribute('chid') === this.lastSelected.characterId);
+        const startIndex = characters.findIndex(c => Number(c.getAttribute('data-chid')) === Number(this.lastSelected.characterId));
-        const endIndex = characters.findIndex(c => c.getAttribute('chid') === currentCharacterId);
+        const endIndex = characters.findIndex(c => Number(c.getAttribute('data-chid')) === currentCharacterId);
         for (let i = Math.min(startIndex, endIndex); i <= Math.max(startIndex, endIndex); i++) {
             const character = characters[i];
-            const characterId = character.getAttribute('chid');
+            const characterId = Number(character.getAttribute('data-chid'));
             const isCharacterSelected = this.selectedCharacters.includes(characterId);
             // Only toggle the character if it wasn't on the state we have are toggling towards.

public/scripts/RossAscends-mods.js+3 -3 Viewed

         if (active_character !== null && active_character !== undefined) {
             const active_character_id = characters.findIndex(x => getTagKeyForEntity(x) === active_character);
             if (active_character_id !== -1) {
-                await selectCharacterById(String(active_character_id));
+                await selectCharacterById(active_character_id);
                 // Do a little tomfoolery to spoof the tag selector
                 const selectedCharElement = $(`#rm_print_characters_block .character_select[chid="${active_character_id}"]`);

     // when a char is selected from the list, save their name as the auto-load character for next page load
     $(document).on('click', '.character_select', function () {
-        const characterId = $(this).attr('chid') || $(this).data('id');
+        const characterId = $(this).attr('data-chid');
         setActiveCharacter(characterId);
         setActiveGroup(null);
         saveSettingsDebounced();
     });
     $(document).on('click', '.group_select', function () {
-        const groupId = $(this).attr('chid') || $(this).attr('grid') || $(this).data('id');
+        const groupId = $(this).attr('data-chid') || $(this).attr('data-grid');
         setActiveCharacter(null);
         setActiveGroup(groupId);
         saveSettingsDebounced();

public/scripts/group-chats.js+5 -5 Viewed

     const template = $('#group_list_template .group_select').clone();
     template.data('id', group.id);
-    template.attr('grid', group.id);
+    template.attr('data-grid', group.id);
     template.find('.ch_name').text(group.name).attr('title', `[Group] ${group.name}`);
     template.find('.group_fav_icon').css('display', 'none');
     template.addClass(group.fav ? 'is_fav' : '');

     template.data('id', character.avatar);
     template.find('.avatar img').attr({ 'src': avatar, 'title': character.avatar });
     template.find('.ch_name').text(character.name);
-    template.attr('chid', characters.indexOf(character));
+    template.attr('data-chid', characters.indexOf(character));
     template.find('.ch_fav').val(isFav);
     template.toggleClass('is_fav', isFav);

@@ -1645,7 +1645,7 @@ async function onGroupActionClick(event) {
1645	}	1645	}
1646		1646
1647	if (action === 'speak') {	1647	if (action === 'speak') {
1648	const chid = Number(member.attr('chid'));	1648	const chid = Number(member.attr('data-chid'));
1649	if (Number.isInteger(chid)) {	1649	if (Number.isInteger(chid)) {
1650	Generate('normal', { force_chid: chid });	1650	Generate('normal', { force_chid: chid });
1651	}	1651	}

         return;
+    }
-    const chid = characterSelect.attr('chid');
+    const chid = characterSelect.attr('data-chid');
     if (chid === null || chid === undefined) {
         return;

+    }
     $(document).on('click', '.group_select', function () {
-        const groupId = $(this).attr('chid') || $(this).attr('grid') || $(this).data('id');
+        const groupId = $(this).attr('data-chid') || $(this).attr('data-grid');
         openGroupById(groupId);
     });
     $('#rm_group_filter').on('input', filterGroupMembers);

public/scripts/personas.js+1017 -244 Viewed

 import {
+    buildAvatarList,
+    characterToEntity,
     characters,
     chat,
     chat_metadata,

     event_types,
     getRequestHeaders,
     getThumbnailUrl,
+    groupToEntity,
+    menu_type,
     name1,
+    name2,
     reloadCurrentChat,
     saveChatConditional,
     saveMetadata,

 } 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, parseJsonFile } from './utils.js';
+import { PAGINATION_TEMPLATE, clearInfoBlock, debounce, delay, download, ensureImageFormatSupported, flashHighlight, getBase64Async, getCharIndex, isFalseBoolean, isTrueBoolean, onlyUnique, parseJsonFile, setInfoBlock } from './utils.js';
 import { debounce_timeout } from './constants.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';
-import { selected_group } from './group-chats.js';
+import { groups, selected_group } from './group-chats.js';
-import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
+import { POPUP_TYPE, Popup, callGenericPopup } from './popup.js';
 import { t } from './i18n.js';
 import { openWorldInfoEditor, world_names } from './world-info.js';
 import { renderTemplateAsync } from './templates.js';
+import { saveMetadataDebounced } from './extensions.js';
 import { accountStorage } from './util/AccountStorage.js';
+import { SlashCommand } from './slash-commands/SlashCommand.js';
+import { SlashCommandNamedArgument, ARGUMENT_TYPE, SlashCommandArgument } from './slash-commands/SlashCommandArgument.js';
+import { commonEnumProviders } from './slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandEnumValue } from './slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
+/**
+ * @typedef {object} PersonaConnection A connection between a character and a character or group entity
+ * @property {'character' | 'group'} type - Type of connection
+ * @property {string} id - ID of the connection (character key (avatar url), group id)
+ */
+/** @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;
 const GRID_STORAGE_KEY = 'Personas_GridView';
 const DEFAULT_DEPTH = 2;
 const DEFAULT_ROLE = 0;
+/** @type {string} The currently selected persona (identified by its avatar) */
 export let user_avatar = '';
+/** @type {FilterHelper} Filter helper for the persona list */
 export const personasFilter = new FilterHelper(debounce(getUserAvatars, debounce_timeout.quick));
+/** @type {function(string): void} */
+let navigateToAvatar = () => { };
+/**
+ * Checks if the Persona Management panel is currently open
+ * @returns {boolean}
+ */
+export function isPersonaPanelOpen() {
+    return document.querySelector('#persona-management-button .drawer-content')?.classList.contains('openDrawer') ?? false;
+}
 function switchPersonaGridView() {
     const state = accountStorage.getItem(GRID_STORAGE_KEY) === 'true';
     $('#user_avatar_block').toggleClass('gridView', state);

  * @returns {string} User avatar URL
  */
 export function getUserAvatar(avatarImg) {
-    return `User Avatars/${avatarImg}`;
+    return `${USER_AVATAR_PATH}${avatarImg}`;
+}
 export function initUserAvatar(avatar) {
     user_avatar = avatar;
     reloadUserAvatar();
-    highlightSelectedAvatar();
+    updatePersonaUIStates();
+}
 /**
  * Sets a user avatar file
  * @param {string} imgfile Link to an image file
+ * @param {object} [options] Optional settings
+ * @param {boolean} [options.toastPersonaNameChange=true] Whether to show a toast when the persona name is changed
+ * @param {boolean} [options.navigateToCurrent=false] Whether to navigate to the current persona after setting the avatar
  */
-export function setUserAvatar(imgfile) {
+export function setUserAvatar(imgfile, { toastPersonaNameChange = true, navigateToCurrent = false } = {}) {
-    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({ navigateToCurrent: navigateToCurrent });
-    selectCurrentPersona();
+    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;
+}
 /**
+ * Initialize missing personas in the power user settings.
+ * @param {string[]} avatarsList List of avatar file names
+ */
+function addMissingPersonas(avatarsList) {
+    for (const persona of avatarsList) {
+        if (!power_user.personas[persona]) {
+            initPersona(persona, '[Unnamed Persona]', '');
+        }
+    }
+}
+/**
  * Gets a list of user avatars.
  * @param {boolean} doRender Whether to render the list
  * @param {string} openPageAt Item to be opened at

             return allEntities;
+        }
+        // If any persona is missing from the power user settings, we add it
+        addMissingPersonas(allEntities);
         // Before printing the personas, we check if we should enable/disable search sorting
         verifyPersonaSearchSortRule();

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

             },
         });
-        if (openPageAt) {
+        navigateToAvatar = (avatarId) => {
-            const avatarIndex = entities.indexOf(openPageAt);
+            const avatarIndex = entities.indexOf(avatarId);
             const page = Math.floor(avatarIndex / perPage) + 1;
             if (avatarIndex !== -1) {
                 $('#persona_pagination_container').pagination('go', page);
+            }
-        }
+        };
+        openPageAt && navigateToAvatar(openPageAt);
         return allEntities;
+    }

  * Uploads an avatar file to the server
  * @param {string} url URL for the avatar file
  * @param {string} [name] Optional name for the avatar file
- * @returns {Promise} Promise object representing the AJAX request
+ * @returns {Promise} Promise that resolves when the avatar is uploaded
  */
 async function uploadUserAvatar(url, name) {
     const fetchResult = await fetch(url);

         formData.append('overwrite_name', name);
+    }
-    return jQuery.ajax({
+    const headers = getRequestHeaders();
-        type: 'POST',
+    delete headers['Content-Type'];
-        url: '/api/avatars/upload',
-        data: formData,
+    await fetch('/api/avatars/upload', {
-        beforeSend: () => { },
+        method: 'POST',
-        cache: false,
+        headers: headers,
-        contentType: false,
+        cache: 'no-cache',
-        processData: false,
+        body: formData,
-        success: async function () {
-            await getUserAvatars(true, name);
-        },
     });
+    await getUserAvatars(true, name);
+}
 async function changeUserAvatar(e) {

         formData.set('avatar', convertedFile);
+    }
-    jQuery.ajax({
+    const headers = getRequestHeaders();
-        type: 'POST',
+    delete headers['Content-Type'];
-        url: url,
-        data: formData,
+    const response = await fetch(url, {
-        beforeSend: () => { },
+        method: 'POST',
-        cache: false,
+        headers: headers,
-        contentType: false,
+        cache: 'no-cache',
-        processData: false,
+        body: formData,
-        success: async function (data) {
+    });
+    if (response.ok) {
+        const data = await response.json();
         // If the user uploaded a new avatar, we want to make sure it's not cached
         const name = formData.get('overwrite_name');
         if (name) {

+        }
         await getUserAvatars(true, name || data.path);
-        },
+    }
-        error: (jqXHR, exception) => { },
-    });
     // Will allow to select the same file twice in a row
     form.reset();

     saveSettingsDebounced();
+}
+/**
+ * Converts a character given character (either by character id or the current character) to a persona.
+ *
+ * If a persona with the same name already exists, the user is prompted to confirm whether or not to overwrite it.
+ * If the character description contains {{char}} or {{user}} macros, the user is prompted to confirm whether or not to swap them for persona macros.
+ *
+ * The function creates a new persona with the same name as the character, and sets the persona description to the character description with the macros swapped.
+ * The function also saves the settings and refreshes the persona selector.
+ *
+ * @param {number} [characterId] - The ID of the character to convert to a persona. Defaults to the current character ID.
+ * @returns {Promise<boolean>} A promise that resolves to true if the character was converted, false otherwise.
+ */
 export async function convertCharacterToPersona(characterId = null) {
     if (null === characterId) characterId = this_chid;
     const avatarUrl = characters[characterId]?.avatar;
     if (!avatarUrl) {
         console.log('No avatar found for this character');
-        return;
+        return false;
+    }
     const name = characters[characterId]?.name;

@@ -401,7 +481,7 @@ export async function convertCharacterToPersona(characterId = null) {
401	const confirm = await Popup.show.confirm(t`Overwrite Existing Persona`, t`This character exists as a persona already. Do you want to overwrite it?`);	481	const confirm = await Popup.show.confirm(t`Overwrite Existing Persona`, t`This character exists as a persona already. Do you want to overwrite it?`);
402	if (!confirm) {	482	if (!confirm) {
403	console.log('User cancelled the overwrite of the persona');	483	console.log('User cancelled the overwrite of the persona');
404	return;	484	return false;
405	}	485	}
406	}	486	}
407		487

     await getUserAvatars(true, overwriteName);
     // Reload the persona description
     setPersonaDescription();
+    return true;
+}
 /**

     $('#persona_description_token_count').text(String(count));
 }, debounce_timeout.relaxed);
+/**
+ * Updates the UI for the Persona Management page with the current persona values
+ */
 export function setPersonaDescription() {
+    $('#your_name').text(name1);
     if (power_user.persona_description_position === persona_description_positions.AFTER_CHAR) {
         power_user.persona_description_position = persona_description_positions.IN_PROMPT;
+    }

         .prop('selected', String(true));
     $('#persona_lore_button').toggleClass('world_set', !!power_user.persona_description_lorebook);
     countPersonaDescriptionTokens();
-}
-export function autoSelectPersona(name) {
+    updatePersonaUIStates();
-    for (const [key, value] of Object.entries(power_user.personas)) {
+    updatePersonaConnectionsAvatarList();
-        if (value === name) {
-            console.log(`Auto-selecting persona ${key} for name ${name}`);
-            setUserAvatar(key);
-            return;
+}
+/**
+ * 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 {HTMLElement} block - The HTML element where the avatar list will be rendered
+ * @param {string[]} personas - An array of persona identifiers
+ * @param {Object} [options] - Optional settings for building the avatar list
+ * @param {boolean} [options.empty=true] - Whether to clear the block element before adding avatars
+ * @param {boolean} [options.interactable=false] - Whether the avatars should be interactable
+ * @param {boolean} [options.highlightFavs=true] - Whether to highlight favorite avatars
+ */
+export function buildPersonaAvatarList(block, personas, { empty = true, interactable = false, highlightFavs = true } = {}) {
+    const personaEntities = personas.map(avatar => ({
+        type: 'persona',
+        id: avatar,
+        item: {
+            name: power_user.personas[avatar],
+            description: power_user.persona_descriptions[avatar]?.description || '',
+            avatar: avatar,
+            fav: power_user.default_persona === avatar,
+        },
+    }));
+    buildAvatarList($(block), personaEntities, { empty: empty, interactable: interactable, highlightFavs: highlightFavs });
+}
 /**
- * Updates the name of a persona if it exists.
+ * Displays avatar connections for the current persona.
- * @param {string} avatarId User avatar id
+ * Converts connections to entities and populates the avatar list. Shows a message if no connections are found.
- * @param {string} newName New name for the persona
  */
-async function updatePersonaNameIfExists(avatarId, newName) {
+export function updatePersonaConnectionsAvatarList() {
-    if (avatarId in power_user.personas) {
+    /** @type {PersonaConnection[]} */
-        power_user.personas[avatarId] = newName;
+    const connections = power_user.persona_descriptions[user_avatar]?.connections ?? [];
-        console.log(`Updated persona name for ${avatarId} to ${newName}`);
+    const entities = connections.map(connection => {
-    } else {
+        if (connection.type === 'character') {
-        power_user.personas[avatarId] = newName;
+            const character = characters.find(c => c.avatar === connection.id);
-        power_user.persona_descriptions[avatarId] = {
+            if (character) return characterToEntity(character, getCharIndex(character));
-            description: '',
-            position: persona_description_positions.IN_PROMPT,
-            depth: DEFAULT_DEPTH,
-            role: DEFAULT_ROLE,
-            lorebook: '',
-        };
-        console.log(`Created persona name for ${avatarId} as ${newName}`);
+        }
+        if (connection.type === 'group') {
+            const group = groups.find(g => g.id === connection.id);
+            if (group) return groupToEntity(group);
+        }
+        return undefined;
+    }).filter(entity => entity?.item !== undefined);
-    await getUserAvatars(true, avatarId);
+    if (entities.length)
-    saveSettingsDebounced();
+        buildAvatarList($('#persona_connections_list'), entities, { interactable: true });
+    else
+        $('#persona_connections_list').text(t`[No character connections. Click one of the buttons above to connect this persona.]`);
+}
-async function bindUserNameToPersona(e) {
-    e?.stopPropagation();
-    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
-    if (!avatarId) {
+/**
-        console.warn('No avatar id found');
+ * Displays a popup for persona selection and returns the selected persona.
-        return;
+ *
+ * @param {string} title - The title to display in the popup
+ * @param {string} text - The text to display in the popup
+ * @param {string[]} personas - An array of persona ids to display for selection
+ * @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
+ * @param {PersonaConnection} [options.targetedChar] - The targeted character or gorup for this persona selection
+ * @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, targetedChar = undefined } = {}) {
+    const content = document.createElement('div');
+    const titleElement = document.createElement('h3');
+    titleElement.textContent = title;
+    content.appendChild(titleElement);
+    const textElement = document.createElement('div');
+    textElement.classList.add('multiline', 'm-b-1');
+    textElement.textContent = text;
+    content.appendChild(textElement);
+    const personaListBlock = document.createElement('div');
+    personaListBlock.classList.add('persona-list', 'avatars_inline', 'avatars_multiline', 'text_muted');
+    content.appendChild(personaListBlock);
+    if (personas.length > 0)
+        buildPersonaAvatarList(personaListBlock, personas, { interactable: true });
+    else
+        personaListBlock.textContent = t`[Currently no personas connected]`;
+    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;
+        block.dataset.result = String(100 + personas.indexOf(block.dataset.pid));
+        if (shiftClickHandler) {
+            block.addEventListener('click', function (ev) {
+                if (ev.shiftKey) {
+                    shiftClickHandler(this, ev);
+                }
+            });
+        }
-    let personaUnbind = false;
+        if (personasToHighlight && personasToHighlight.includes(block.dataset.pid)) {
-    const existingPersona = power_user.personas[avatarId];
+            block.classList.add('is_active');
-    const personaName = await Popup.show.input(
+            block.title = block.title + '\n\n' + t`Was used in current chat.`;
-        t`Enter a name for this persona:`,
+            if (block.classList.contains('is_fav')) block.title = block.title + '\n' + t`Is your default persona.`;
-        t`(If empty name is provided, this will unbind the name from this avatar)`,
+        }
-        existingPersona || '',
+    });
-        { onClose: (p) => { personaUnbind = p.value === '' && p.result === POPUP_RESULT.AFFIRMATIVE; } });
-    // If the user clicked cancel, don't do anything
+    /** @type {import('./popup.js').CustomPopupButton[]} */
-    if (personaName === null && !personaUnbind) {
+    const customButtons = [];
-        return;
+    if (targetedChar) {
+        customButtons.push({
+            text: t`Remove All Connections`,
+            result: 2,
+            action: () => {
+                for (const [personaId, description] of Object.entries(power_user.persona_descriptions)) {
+                    /** @type {PersonaConnection[]} */
+                    const connections = description.connections;
+                    if (connections) {
+                        power_user.persona_descriptions[personaId].connections = connections.filter(c => {
+                            if (targetedChar.type == c.type && targetedChar.id == c.id) return false;
+                            return true;
+                        });
+                    }
+                }
-    if (personaName && personaName.length > 0) {
+                saveSettingsDebounced();
-        // If the user clicked ok and entered a name, bind the name to the persona
+                updatePersonaConnectionsAvatarList();
-        console.log(`Binding persona ${avatarId} to name ${personaName}`);
+                if (power_user.persona_show_notifications) {
-        power_user.personas[avatarId] = personaName;
+                    const name = targetedChar.type == 'character' ? characters[targetedChar.id]?.name : groups[targetedChar.id]?.name;
-        const descriptor = power_user.persona_descriptions[avatarId];
+                    toastr.info(t`All connections to ${name} have been removed.`, t`Personas Unlocked`);
-        const isCurrentPersona = avatarId === user_avatar;
+                }
+            },
+        });
+    }
-        // Create a description object if it doesn't exist
+    const popup = new Popup(content, POPUP_TYPE.TEXT, '', { okButton: okButton, customButtons: customButtons });
-        if (!descriptor) {
+    const result = await popup.show();
-            // If the user is currently using this persona, set the description to the current description
+    return Number(result) >= 100 ? personas[Number(result) - 100] : null;
-            power_user.persona_descriptions[avatarId] = {
-                description: isCurrentPersona ? power_user.persona_description : '',
-                position: isCurrentPersona ? power_user.persona_description_position : persona_description_positions.IN_PROMPT,
-                depth: isCurrentPersona ? power_user.persona_description_depth : DEFAULT_DEPTH,
-                role: isCurrentPersona ? power_user.persona_description_role : DEFAULT_ROLE,
-                lorebook: isCurrentPersona ? power_user.persona_description_lorebook : '',
-            };
+}
-        // If the user is currently using this persona, update the name
+/**
-        if (isCurrentPersona) {
+ * Automatically selects a persona based on the given name if a matching persona exists.
-            console.log(`Auto-updating user name to ${personaName}`);
+ * @param {string} name - The name to search for
-            setUserName(personaName);
+ * @returns {boolean} True if a matching persona was found and selected, false otherwise
+ */
+export function autoSelectPersona(name) {
+    for (const [key, value] of Object.entries(power_user.personas)) {
+        if (value === name) {
+            console.log(`Auto-selecting persona ${key} for name ${name}`);
+            setUserAvatar(key);
+            return true;
+        }
-    } else {
+    }
-        // If the user clicked ok, but didn't enter a name, delete the persona
+    return false;
-        console.log(`Unbinding persona ${avatarId}`);
+}
-        delete power_user.personas[avatarId];
-        delete power_user.persona_descriptions[avatarId];
+/**
+ * Renames the persona with the given avatar ID by showing a popup to enter a new name.
+ * @param {string} avatarId - ID of the avatar to rename
+ * @returns {Promise<boolean>} A promise that resolves to true if the persona was renamed, false otherwise
+ */
+async function renamePersona(avatarId) {
+    const currentName = power_user.personas[avatarId];
+    const newName = await Popup.show.input(t`Rename Persona`, t`Enter a new name for this persona:`, currentName);
+    if (!newName || newName === currentName) {
+        console.debug('User cancelled renaming persona or name is unchanged');
+        return false;
+    }
+    power_user.personas[avatarId] = newName;
+    console.log(`Renamed persona ${avatarId} to ${newName}`);
+    if (avatarId === user_avatar) {
+        setUserName(newName);
+    }
     saveSettingsDebounced();
     await getUserAvatars(true, avatarId);
+    updatePersonaUIStates();
     setPersonaDescription();
+    return true;
+}
-function selectCurrentPersona() {
+/**
+ * Selects the persona with the currently set avatar ID by updating the user name and persona description, and updating the locked persona if the setting is enabled.
+ * @param {object} [options={}] - Optional settings
+ * @param {boolean} [options.toastPersonaNameChange=true] - Whether to show a toast when the persona name is changed
+ * @returns {Promise<void>}
+ */
+async function selectCurrentPersona({ toastPersonaNameChange = true } = {}) {
     const personaName = power_user.personas[user_avatar];
     if (personaName) {
-        const lockedPersona = chat_metadata['persona'];
+        const shouldAutoLock = power_user.persona_auto_lock && user_avatar !== chat_metadata['persona'];
-        if (lockedPersona && lockedPersona !== user_avatar && power_user.persona_show_notifications) {
-            toastr.info(
-                t`To permanently set "${personaName}" as the selected persona, unlock and relock it using the "Lock" button. Otherwise, the selection resets upon reloading the chat.`,
-                t`This chat is locked to a different persona (${power_user.personas[lockedPersona]}).`,
-                { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true },
-            );
-        }
         if (personaName !== name1) {
             console.log(`Auto-updating user name to ${personaName}`);
-            setUserName(personaName);
+            setUserName(personaName, { toastPersonaNameChange: !shouldAutoLock && toastPersonaNameChange });
+        }
         const descriptor = power_user.persona_descriptions[user_avatar];

                 depth: DEFAULT_DEPTH,
                 role: DEFAULT_ROLE,
                 lorebook: '',
+                connections: [],
             };
+        }
         setPersonaDescription();
+        // Update the locked persona if setting is enabled
+        if (shouldAutoLock) {
+            chat_metadata['persona'] = user_avatar;
+            console.log(`Auto locked persona to ${user_avatar}`);
+            if (toastPersonaNameChange && power_user.persona_show_notifications) {
+                toastr.success(`Persona ${personaName} selected and auto-locked to current chat`, t`Persona Selected`);
+            }
+            saveMetadataDebounced();
+            updatePersonaUIStates();
+        }
+        // As the last step, inform user if the persona is only temporarily chosen
+        if (power_user.persona_show_notifications && !isPersonaPanelOpen()) {
+            const temporary = getPersonaTemporaryLockInfo();
+            if (temporary.isTemporary) {
+                toastr.info(t`This persona is only temporarily chosen. Click for more info.`, t`Temporary Persona`, {
+                    preventDuplicates: true, onclick: () => {
+                        toastr.info(temporary.info.replaceAll('\n', '<br />'), t`Temporary Persona`, { escapeHtml: false });
+                    },
+                });
+            }
+        }
+    }
+}
+/**
+ * Checks if a connection is locked for the current character or group edit menu
+ * @param {PersonaConnection} connection - Connection to check
+ * @returns {boolean} Whether the connection is locked
+ */
+export function isPersonaConnectionLocked(connection) {
+    return (!selected_group && connection.type === 'character' && connection.id === characters[this_chid]?.avatar)
+        || (selected_group && connection.type === 'group' && connection.id === selected_group);
+}
 /**
- * Checks if the persona is locked for the current chat.
+ * Checks if the persona is locked
+ * @param {PersonaLockType} type - Lock type
  * @returns {boolean} Whether the persona is locked
  */
-function isPersonaLocked() {
+export function isPersonaLocked(type = 'chat') {
-    return !!chat_metadata['persona'];
+    switch (type) {
+        case 'default':
+            return power_user.default_persona === user_avatar;
+        case 'chat':
+            return chat_metadata['persona'] == user_avatar;
+        case 'character': {
+            return !!power_user.persona_descriptions[user_avatar]?.connections?.some(isPersonaConnectionLocked);
+        }
+        default: throw new Error(`Unknown persona lock type: ${type}`);
+    }
+}
 /**
- * Locks or unlocks the persona for the current chat.
+ * Locks or unlocks the persona
  * @param {boolean} state Desired lock state
+ * @param {PersonaLockType} type - Lock type
  * @returns {Promise<void>}
  */
-export async function setPersonaLockState(state) {
+export async function setPersonaLockState(state, type = 'chat') {
-    return state ? await lockPersona() : await unlockPersona();
+    return state ? await lockPersona(type) : await unlockPersona(type);
+}
 /**
- * Toggle the persona lock state for the current chat.
+ * Toggle the persona lock state
- * @returns {Promise<void>}
+ * @param {PersonaLockType} type - Lock type
+ * @returns {Promise<boolean>} - Whether the persona was locked
  */
-export async function togglePersonaLock() {
+export async function togglePersonaLock(type = 'chat') {
-    return isPersonaLocked()
+    if (isPersonaLocked(type)) {
-        ? await unlockPersona()
+        await unlockPersona(type);
-        : await lockPersona();
+        return false;
+    } else {
+        await lockPersona(type);
+        return true;
+    }
+}
 /**
- * Unlock the persona for the current chat.
+ * Unlock the persona
+ * @param {PersonaLockType} type - Lock type
+ * @returns {Promise<void>}
  */
-async function unlockPersona() {
+async function unlockPersona(type = 'chat') {
+    switch (type) {
+        case 'default': {
+            // TODO: Make this toggle-able
+            await toggleDefaultPersona(user_avatar, { quiet: true });
+            break;
+        }
+        case 'chat': {
             if (chat_metadata['persona']) {
-        console.log(`Unlocking persona for this chat ${chat_metadata['persona']}`);
+                console.log(`Unlocking persona ${user_avatar} from this chat`);
                 delete chat_metadata['persona'];
                 await saveMetadata();
-        if (power_user.persona_show_notifications) {
+                if (power_user.persona_show_notifications && !isPersonaPanelOpen()) {
-            toastr.info(t`User persona is now unlocked for this chat. Click the "Lock" again to revert.`, t`Persona unlocked`);
+                    toastr.info(t`Persona ${name1} is now unlocked from this chat.`, t`Persona Unlocked`);
+                }
+            }
+            break;
+        }
+        case 'character': {
+            /** @type {PersonaConnection[]} */
+            const connections = power_user.persona_descriptions[user_avatar]?.connections;
+            if (connections) {
+                console.log(`Unlocking persona ${user_avatar} from this character ${name2}`);
+                power_user.persona_descriptions[user_avatar].connections = connections.filter(c => !isPersonaConnectionLocked(c));
+                saveSettingsDebounced();
+                updatePersonaConnectionsAvatarList();
+                if (power_user.persona_show_notifications && !isPersonaPanelOpen()) {
+                    toastr.info(t`Persona ${name1} is now unlocked from character ${name2}.`, t`Persona Unlocked`);
+                }
-        updateUserLockIcon();
+            }
+            break;
+        }
+        default:
+            throw new Error(`Unknown persona lock type: ${type}`);
+    }
+    updatePersonaUIStates();
+}
 /**
- * Lock the persona for the current chat.
+ * Lock the persona
+ * @param {PersonaLockType} type - Lock type
  */
-async function lockPersona() {
+async function lockPersona(type = 'chat') {
+    // First make sure that user_avatar is actually a persona
     if (!(user_avatar in power_user.personas)) {
         console.log(`Creating a new persona ${user_avatar}`);
         if (power_user.persona_show_notifications) {
-            toastr.info(
+            toastr.info(t`Creating a new persona for currently selected user name and avatar...`, t`Persona Not Found`);
-                t`Creating a new persona for currently selected user name and avatar...`,
-                t`Persona not set for this avatar`,
-                { timeOut: 10000, extendedTimeOut: 20000 },
-            );
+        }
         power_user.personas[user_avatar] = name1;
         power_user.persona_descriptions[user_avatar] = {

             depth: DEFAULT_DEPTH,
             role: DEFAULT_ROLE,
             lorebook: '',
+            connections: [],
         };
+    }
+    switch (type) {
+        case 'default': {
+            await toggleDefaultPersona(user_avatar, { quiet: true });
+            break;
+        }
+        case 'chat': {
+            console.log(`Locking persona ${user_avatar} to this chat`);
             chat_metadata['persona'] = user_avatar;
-    await saveMetadata();
+            saveMetadataDebounced();
+            if (power_user.persona_show_notifications && !isPersonaPanelOpen()) {
+                toastr.success(t`User persona ${name1} is locked to ${name2} in this chat`, t`Persona Locked`);
+            }
+            break;
+        }
+        case 'character': {
+            const newConnection = getCurrentConnectionObj();
+            /** @type {PersonaConnection[]} */
+            const connections = power_user.persona_descriptions[user_avatar].connections?.filter(c => !isPersonaConnectionLocked(c)) ?? [];
+            if (newConnection && newConnection.id) {
+                console.log(`Locking persona ${user_avatar} to this character ${name2}`);
+                power_user.persona_descriptions[user_avatar].connections = [...connections, newConnection];
+                const unlinkedCharacters = [];
+                if (!power_user.persona_allow_multi_connections) {
+                    for (const [avatarId, description] of Object.entries(power_user.persona_descriptions)) {
+                        if (avatarId === user_avatar) continue;
+                        const filteredConnections = description.connections?.filter(c => !(c.type === newConnection.type && c.id === newConnection.id)) ?? [];
+                        if (filteredConnections.length !== description.connections?.length) {
+                            description.connections = filteredConnections;
+                            unlinkedCharacters.push(power_user.personas[avatarId]);
+                        }
+                    }
+                }
                 saveSettingsDebounced();
-    console.log(`Locking persona for this chat ${user_avatar}`);
+                updatePersonaConnectionsAvatarList();
                 if (power_user.persona_show_notifications) {
-        toastr.success(t`User persona is locked to ${name1} in this chat`);
+                    let additional = '';
+                    if (unlinkedCharacters.length)
+                        additional += `<br /><br />${t`Unlinked existing persona${unlinkedCharacters.length > 1 ? 's' : ''}: ${unlinkedCharacters.join(', ')}`}`;
+                    if (additional || !isPersonaPanelOpen()) {
+                        toastr.success(t`User persona ${name1} is locked to character ${name2}${additional}`, t`Persona Locked`, { escapeHtml: false });
+                    }
+                }
+            }
-    updateUserLockIcon();
+            break;
+        }
+        default:
+            throw new Error(`Unknown persona lock type: ${type}`);
+    }
+    updatePersonaUIStates();
+}
-async function deleteUserAvatar(e) {
+async function deleteUserAvatar() {
-    e?.stopPropagation();
+    const avatarId = user_avatar;
-    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
     if (!avatarId) {
         console.warn('No avatar id found');
         return;
+    }
+    const confirm = await Popup.show.confirm(t`Delete Persona`,
-    if (avatarId == user_avatar) {
+        t`Are you sure you want to delete this avatar?` + '<br />' + t`All information associated with its linked persona will be lost.`);
-        console.warn(`User tried to delete their current avatar ${avatarId}`);
-        toastr.warning(t`You cannot delete the avatar you are currently using`, t`Warning`);
-        return;
-    }
-    const confirm = await Popup.show.confirm(t`Are you sure you want to delete this avatar?`, t`All information associated with its linked persona will be lost.`);
     if (!confirm) {
         console.debug('User cancelled deleting avatar');

@@ -719,19 +1024,20 @@ async function deleteUserAvatar(e) {
719	delete power_user.persona_descriptions[avatarId];	1024	delete power_user.persona_descriptions[avatarId];
720		1025
721	if (avatarId === power_user.default_persona) {	1026	if (avatarId === power_user.default_persona) {
722	toastr.warning(t`The default persona was deleted. You will need to set a new default persona.`, t`Default persona deleted`);	1027	toastr.warning(t`The default persona was deleted. You will need to set a new default persona.`, t`Default Persona Deleted`);
723	power_user.default_persona = null;	1028	power_user.default_persona = null;
724	}	1029	}
725		1030
726	if (avatarId === chat_metadata['persona']) {	1031	if (avatarId === chat_metadata['persona']) {
727	toastr.warning(t`The locked persona was deleted. You will need to set a new persona for this chat.`, t`Persona deleted`);	1032	toastr.warning(t`The locked persona was deleted. You will need to set a new persona for this chat.`, t`Persona Deleted`);
728	delete chat_metadata['persona'];	1033	delete chat_metadata['persona'];
729	await saveMetadata();	1034	await saveMetadata();
730	}	1035	}
731		1036
732	saveSettingsDebounced();	1037	saveSettingsDebounced();
733	await getUserAvatars();	1038
734	updateUserLockIcon();	1039	// Use the existing mechanism to re-render the persona list and choose the next persona here
		1040	await loadPersonaForCurrentChat({ doRender: true });
735	}	1041	}
736	}	1042	}
737		1043

 /**
  * Opens a popup to set the lorebook for the current persona.
- * @param {PointerEvent} event Click event
+ * @param {JQuery.ClickEvent} event Click event
  */
 async function onPersonaLoreButtonClick(event) {
     const personaName = power_user.personas[user_avatar];
     const selectedLorebook = power_user.persona_description_lorebook;
     if (!personaName) {
-        toastr.warning(t`You must bind a name to this persona before you can set a lorebook.`, t`Persona name not set`);
+        toastr.warning(t`You must bind a name to this persona before you can set a lorebook.`, t`Persona Name Not Set`);
         return;
+    }

             depth: power_user.persona_description_depth,
             role: power_user.persona_description_role,
             lorebook: power_user.persona_description_lorebook,
+            connections: [],
         };
         power_user.persona_descriptions[user_avatar] = object;
+    }
     return object;
+}
-async function setDefaultPersona(e) {
+/**
-    e?.stopPropagation();
+ * Sets a persona as the default one to be used for all new chats and unlocked existing chats
-    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
+ * @param {string} avatarId The avatar id of the persona to set as the default
+ * @param {object} [options] Optional arguments
+ * @param {boolean} [options.quiet=false] If true, no confirmation popups will be shown
+ * @returns {Promise<void>}
+ */
+async function toggleDefaultPersona(avatarId, { quiet = false } = {}) {
     if (!avatarId) {
         console.warn('No avatar id found');
         return;

     if (power_user.personas[avatarId] === undefined) {
         console.warn(`No persona name found for avatar ${avatarId}`);
-        toastr.warning(t`You must bind a name to this persona before you can set it as the default.`, t`Persona name not set`);
+        toastr.warning(t`You must bind a name to this persona before you can set it as the default.`, t`Persona Name Not Set`);
         return;
+    }
-    const personaName = power_user.personas[avatarId];
     if (avatarId === currentDefault) {
-        const confirm = await Popup.show.confirm(t`Are you sure you want to remove the default persona?`, personaName);
+        if (!quiet) {
+            const confirm = await Popup.show.confirm(t`Are you sure you want to remove the default persona?`, power_user.personas[avatarId]);
             if (!confirm) {
                 console.debug('User cancelled removing default persona');
                 return;
+            }
+        }
         console.log(`Removing default persona ${avatarId}`);
-        if (power_user.persona_show_notifications) {
+        if (power_user.persona_show_notifications && !isPersonaPanelOpen()) {
-            toastr.info(t`This persona will no longer be used by default when you open a new chat.`, t`Default persona removed`);
+            toastr.info(t`This persona will no longer be used by default when you open a new chat.`, t`Default Persona Removed`);
+        }
         delete power_user.default_persona;
     } else {
-        const confirm = await Popup.show.confirm(t`Are you sure you want to set \"${personaName}\" as the default persona?`, t`This name and avatar will be used for all new chats, as well as existing chats where the user persona is not locked.`);
+        if (!quiet) {
+            const confirm = await Popup.show.confirm(t`Set Default Persona`,
+                t`Are you sure you want to set \"${power_user.personas[avatarId]}\" as the default persona?`
+                + '<br /><br />'
+                + t`This name and avatar will be used for all new chats, as well as existing chats where the user persona is not locked.`);
             if (!confirm) {
                 console.debug('User cancelled setting default persona');
                 return;
+            }
+        }
         power_user.default_persona = avatarId;
-        if (power_user.persona_show_notifications) {
+        if (power_user.persona_show_notifications && !isPersonaPanelOpen()) {
-            toastr.success(t`This persona will be used by default when you open a new chat.`, t`Default persona set to ${personaName}`);
+            toastr.success(t`Set to ${power_user.personas[avatarId]}.This persona will be used by default when you open a new chat.`, t`Default Persona`);
+        }
+    }
     saveSettingsDebounced();
     await getUserAvatars(true, avatarId);
+    updatePersonaUIStates();
+}
+/**
+ * Returns an object with 3 properties that describe the state of the given persona
+ *
+ * - default: Whether this persona is the default one for all new chats
+ * - locked: An object containing the lock states
+ *   - chat: Whether the persona is locked to the currently open chat
+ *   - character: Whether the persona is locked to the currently open character or group
+ * @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[avatarId]?.connections;
+    const hasCharLock = !!connections?.some(c =>
+        (!selected_group && c.type === 'character' && c.id === characters[this_chid]?.avatar)
+        || (selected_group && c.type === 'group' && c.id === selected_group));
+    return {
+        avatarId: avatarId,
+        default: isDefaultPersona,
+        locked: {
+            chat: hasChatLock,
+            character: hasCharLock,
+        },
+    };
+}
+/**
+ * Updates the UI to reflect the current states of all personas and the selected user's persona.
+ * This includes updating class states on avatar containers to indicate default status, chat lock,
+ * and character lock, as well as updating icons and labels in the persona management panel to reflect
+ * the current state of the user's persona.
+ * Additionally, it manages the display of temporary persona lock information.
+ * @param {Object} [options={}] - Optional settings
+ * @param {boolean} [options.navigateToCurrent=false] - Whether to navigate to the current persona in the persona list
+ */
+function updatePersonaUIStates({ navigateToCurrent = false } = {}) {
+    if (navigateToCurrent) {
+        navigateToAvatar(user_avatar);
+    }
+    // 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);
+    // Persona panel info block
+    const { isTemporary, info } = getPersonaTemporaryLockInfo();
+    if (isTemporary) {
+        const messageContainer = document.createElement('div');
+        const messageSpan = document.createElement('span');
+        messageSpan.textContent = t`Temporary persona in use.`;
+        messageContainer.appendChild(messageSpan);
+        messageContainer.classList.add('flex-container', 'alignItemsBaseline');
+        const infoIcon = document.createElement('i');
+        infoIcon.classList.add('fa-solid', 'fa-circle-info', 'opacity50p');
+        infoIcon.title = info;
+        messageContainer.appendChild(infoIcon);
+        // Set the info block content
+        setInfoBlock('#persona_connections_info_block', messageContainer, 'hint');
+    } else {
+        // Clear the info block if no condition applies
+        clearInfoBlock('#persona_connections_info_block');
+    }
+}
-function updateUserLockIcon() {
+/**
-    const hasLock = !!chat_metadata['persona'];
+ * @typedef {Object} PersonaLockInfo
-    $('#lock_user_name').toggleClass('fa-unlock', !hasLock);
+ * @property {boolean} isTemporary - Whether the selected persona is temporary based on current locks.
-    $('#lock_user_name').toggleClass('fa-lock', hasLock);
+ * @property {boolean} hasDifferentChatLock - True if the chat persona is set and differs from the user avatar.
+ * @property {boolean} hasDifferentDefaultLock - True if the default persona is set and differs from the user avatar.
+ * @property {string} info - Detailed information about the current, chat, and default personas.
+ */
+/**
+ * Computes temporary lock information for the current persona.
+ *
+ * This function checks whether the currently selected persona is temporary by comparing
+ * the chat persona and the default persona to the user avatar. If either is different,
+ * the currently selected persona is considered temporary and a detailed message is generated.
+ *
+ * @returns {PersonaLockInfo} An object containing flags and a message describing the persona lock status.
+ */
+function getPersonaTemporaryLockInfo() {
+    const hasDifferentChatLock = !!chat_metadata['persona'] && chat_metadata['persona'] !== user_avatar;
+    const hasDifferentDefaultLock = power_user.default_persona && power_user.default_persona !== user_avatar;
+    const isTemporary = hasDifferentChatLock || (!chat_metadata['persona'] && hasDifferentDefaultLock);
+    const info = isTemporary ? t`A different persona is locked to this chat, or you have a different default persona set. The currently selected persona will only be temporary, and resets on reload. Consider locking this persona to the chat if you want to permanently use it.`
+        + '\n\n'
+        + t`Current Persona: ${power_user.personas[user_avatar]}`
+        + (hasDifferentChatLock ? '\n' + t`Chat persona: ${power_user.personas[chat_metadata['persona']]}` : '')
+        + (hasDifferentDefaultLock ? '\n' + t`Default persona: ${power_user.personas[power_user.default_persona]}` : '') : '';
+    return {
+        isTemporary: isTemporary,
+        hasDifferentChatLock: hasDifferentChatLock,
+        hasDifferentDefaultLock: hasDifferentDefaultLock,
+        info: info,
+    };
+}
-async function setChatLockedPersona() {
+/**
+ * Loads the appropriate persona for the current chat session based on locks (chat lock, char lock, default persona)
+ *
+ * @param {Object} [options={}] - Optional arguments
+ * @param {boolean} [options.doRender=false] - Whether to render the persona immediately
+ * @returns {Promise<boolean>} - A promise that resolves to a boolean indicating whether a persona was selected
+ */
+async function loadPersonaForCurrentChat({ doRender = false } = {}) {
+    // Cache persona list to check if they exist
+    const userAvatars = await getUserAvatars(doRender);
     // Define a persona for this chat
     let chatPersona = '';
-    if (chat_metadata['persona']) {
+    /** @type {'chat' | 'character' | 'default' | null} */
+    let connectType = null;
     // If persona is locked in chat metadata, select it
+    if (chat_metadata['persona']) {
         console.log(`Using locked persona ${chat_metadata['persona']}`);
         chatPersona = chat_metadata['persona'];
-    } else if (power_user.default_persona) {
-        // If default persona is set, select it
+        // Verify it exists
-        console.log(`Using default persona ${power_user.default_persona}`);
+        if (!userAvatars.includes(chatPersona)) {
-        chatPersona = power_user.default_persona;
+            console.warn('Chat-locked persona avatar not found, unlocking persona');
+            delete chat_metadata['persona'];
+            saveSettingsDebounced();
+            chatPersona = '';
+        }
+        if (chatPersona) connectType = 'chat';
+    }
-    // No persona set: user current settings
+    // If the persona panel is open when the chat changes, this is likely because a character was selected from that panel.
+    // In that case, we are not automatically switching persona - but need to make changes if there is any chat-bound connection
+    /*
+    if (isPersonaPanelOpen()) {
+        if (chatPersona) {
+            // If the chat-bound persona is the currently selected one, we can simply exit out
+            if (chatPersona === user_avatar) {
+                return false;
+            }
+            // Otherwise ask if we want to switch
+            const autoLock = power_user.persona_auto_lock;
+            const result = await Popup.show.confirm(t`Switch Persona?`,
+                t`You have a connected persona for the current chat (${power_user.personas[chatPersona]}). Do you want to stick to the current persona (${power_user.personas[user_avatar]}) ${(autoLock ? t`and lock that to the chat` : '')}, or switch to ${power_user.personas[chatPersona]} instead?`,
+                { okButton: autoLock ? t`Keep and Lock` : t`Keep`, cancelButton: t`Switch` });
+            if (result === POPUP_RESULT.AFFIRMATIVE) {
+                if (autoLock) {
+                    lockPersona('chat');
+                }
+                return false;
+            }
+        } else {
+            // If we don't have a chat-bound persona, we simply return and keep the current one we have
+            return false;
+        }
+    }
+    */
+    // Check if we have any persona connected to the current character
     if (!chatPersona) {
-        console.debug('No default or locked persona set for this chat');
+        const connectedPersonas = getConnectedPersonas();
-        return;
+        if (connectedPersonas.length > 0) {
+            if (connectedPersonas.length === 1) {
+                chatPersona = connectedPersonas[0];
+            } else if (!power_user.persona_allow_multi_connections) {
+                console.warn('More than one persona is connected to this character.Using the first available persona for this chat.');
+                chatPersona = connectedPersonas[0];
+            } else {
+                chatPersona = await askForPersonaSelection(t`Select Persona`,
+                    t`Multiple personas are connected to this character.\nSelect a persona to use for this chat.`,
+                    connectedPersonas, { highlightPersonas: true, targetedChar: getCurrentConnectionObj() });
+            }
+        }
+        if (chatPersona) connectType = 'character';
+    }
-    // Find the avatar file
+    // Last check if default persona is set, select it
-    const userAvatars = await getUserAvatars(false);
+    if (!chatPersona && power_user.default_persona) {
+        console.log(`Using default persona ${power_user.default_persona}`);
+        chatPersona = power_user.default_persona;
-    // Avatar missing (persona deleted)
+        if (chatPersona) connectType = 'default';
-    if (chat_metadata['persona'] && !userAvatars.includes(chatPersona)) {
+    }
+    // Whatever way we selected a persona, if it doesn't exist, unlock this chat
+    if (chat_metadata['persona'] && !userAvatars.includes(chat_metadata['persona'])) {
         console.warn('Persona avatar not found, unlocking persona');
         delete chat_metadata['persona'];
-        updateUserLockIcon();
-        return;
+    }
     // Default persona missing

         console.warn('Default persona avatar not found, clearing default persona');
         power_user.default_persona = null;
         saveSettingsDebounced();
-        return;
+    }
     // Persona avatar found, select it
-    setUserAvatar(chatPersona);
+    if (chatPersona && user_avatar !== chatPersona) {
-    updateUserLockIcon();
+        const willAutoLock = power_user.persona_auto_lock && user_avatar !== chat_metadata['persona'];
+        setUserAvatar(chatPersona, { toastPersonaNameChange: false, navigateToCurrent: true });
+        if (power_user.persona_show_notifications) {
+            let message = t`Auto-selected persona based on ${connectType} connection.<br />Your messages will now be sent as ${power_user.personas[chatPersona]}.`;
+            if (willAutoLock) {
+                message += '<br /><br />' + t`Auto-locked this persona to current chat.`;
+            }
+            toastr.success(message, t`Persona Auto Selected`, { escapeHtml: false });
+        }
+    }
+    updatePersonaUIStates();
+    return !!chatPersona;
+}
+/**
+ * Returns an array of persona keys that are connected to the given character key.
+ * If the character key is not provided, it defaults to the currently selected group or character.
+ * @param {string} [characterKey] - The character key to query
+ * @returns {string[]} - An array of persona keys that are connected to the given character key
+ */
+export function getConnectedPersonas(characterKey = undefined) {
+    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);
+    return connectedPersonas;
+}
+/**
+ * Shows a popup with all personas connected to the currently selected character or group.
+ * In the popup, the user can select a persona to load for the current character or group, or shift-click to remove the connection.
+ * @return {Promise<void>}
+ */
+export async function showCharConnections() {
+    let isRemoving = false;
+    const connections = getConnectedPersonas();
+    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,
+        targetedChar: getCurrentConnectionObj(),
+        shiftClickHandler: (element, ev) => {
+            const personaId = $(element).attr('data-pid');
+            /** @type {PersonaConnection[]} */
+            const connections = power_user.persona_descriptions[personaId]?.connections;
+            if (connections) {
+                console.log(`Unlocking persona ${personaId} from current character ${name2}`);
+                power_user.persona_descriptions[personaId].connections = connections.filter(c => {
+                    if (menu_type == 'group_edit' && c.type == 'group' && c.id == selected_group) return false;
+                    else if (c.type == 'character' && c.id == characters[this_chid]?.avatar) return false;
+                    return true;
+                });
+                saveSettingsDebounced();
+                updatePersonaConnectionsAvatarList();
+                if (power_user.persona_show_notifications) {
+                    toastr.info(t`User persona ${power_user.personas[personaId]} is now unlocked from the current character ${name2}.`, t`Persona unlocked`);
+                }
+                isRemoving = true;
+                $('#char_connections_button').trigger('click');
+            }
+        },
+    });
+    // One of the persona was selected. So load it.
+    if (!isRemoving && selectedPersona) {
+        setUserAvatar(selectedPersona, { toastPersonaNameChange: false });
+        if (power_user.persona_show_notifications) {
+            toastr.success(t`Selected persona ${power_user.personas[selectedPersona]} for current chat.`, t`Connected Persona Selected`);
+        }
+    }
+}
+/**
+ * Retrieves the current connection object based on whether the current chat is with a char or a group.
+ *
+ * @returns {PersonaConnection} An object representing the current connection
+ */
+export function getCurrentConnectionObj() {
+    if (selected_group)
+        return { type: 'group', id: selected_group };
+    if (characters[this_chid]?.avatar)
+        return { type: 'character', id: characters[this_chid]?.avatar };
+    return null;
+}
 function onBackupPersonas() {

@@ -1038,10 +1624,10 @@ async function onPersonasRestoreInput(e) {
1038	}	1624	}
1039		1625
1040	if (warnings.length) {	1626	if (warnings.length) {
1041	toastr.success(t`Personas restored with warnings. Check console for details.`);	1627	toastr.success(t`Personas restored with warnings. Check console for details.`, t`Persona Management`);
1042	console.warn(`PERSONA RESTORE REPORT\n====================\n${warnings.join('\n')}`);	1628	console.warn(`PERSONA RESTORE REPORT\n====================\n${warnings.join('\n')}`);
1043	} else {	1629	} else {
1044	toastr.success(t`Personas restored successfully.`);	1630	toastr.success(t`Personas restored successfully.`, t`Persona Management`);
1045	}	1631	}
1046		1632
1047	await getUserAvatars();	1633	await getUserAvatars();

     await reloadCurrentChat();
+}
+/**
+ * Retriggers the first message to reload it from the char definition.
+ *
+ * Only works if only the first message is present, and not in group mode.
+ */
 export function retriggerFirstMessageOnEmptyChat() {
     if (this_chid >= 0 && !selected_group && chat.length === 1) {
         $('#firstmessage_textarea').trigger('input');

     const personaName = power_user.personas[avatarId];
     if (!personaName) {
-        toastr.warning('Chosen avatar is not a persona');
+        toastr.warning('Chosen avatar is not a persona', t`Persona Management`);
         return;
+    }

     saveSettingsDebounced();
+}
-export function initPersonas() {
+/**
-    $(document).on('click', '.bind_user_name', bindUserNameToPersona);
+ * If a current user avatar is not bound to persona, bind it.
-    $(document).on('click', '.set_default_persona', setDefaultPersona);
+ */
-    $(document).on('click', '.delete_avatar', deleteUserAvatar);
+async function migrateNonPersonaUser() {
-    $('#lock_user_name').on('click', togglePersonaLock);
+    if (user_avatar in power_user.personas) {
+        return;
+    }
+    initPersona(user_avatar, name1, '');
+    setPersonaDescription();
+    await getUserAvatars(true, user_avatar);
+}
+/**
+ * Locks or unlocks the persona of the current chat.
+ * @param {{type: string}} _args Named arguments
+ * @param {string} value The value to set the lock to
+ * @returns {Promise<string>} The value of the lock after setting
+ */
+async function lockPersonaCallback(_args, value) {
+    const type = /** @type {PersonaLockType} */ (_args.type ?? 'chat');
+    if (!['chat', 'character', 'default'].includes(type)) {
+        toastr.warning(t`Unknown lock type "${type}"`, t`Persona Management`);
+        return '';
+    }
+    if (!value) {
+        return String(isPersonaLocked(type));
+    }
+    if (['toggle', 't'].includes(value.trim().toLowerCase())) {
+        const result = await togglePersonaLock(type);
+        return String(result);
+    }
+    if (isTrueBoolean(value)) {
+        await setPersonaLockState(true, type);
+        return 'true';
+    }
+    if (isFalseBoolean(value)) {
+        await setPersonaLockState(false, type);
+        return 'false';
+    }
+    return '';
+}
+/**
+ * Sets a persona name and optionally an avatar.
+ * @param {{mode: 'lookup' | 'temp' | 'all'}} namedArgs Named arguments
+ * @param {string} name Name to set
+ * @returns {string}
+ */
+function setNameCallback({ mode = 'all' }, name) {
+    if (!name) {
+        toastr.warning('You must specify a name to change to');
+        return '';
+    }
+    if (!['lookup', 'temp', 'all'].includes(mode)) {
+        toastr.warning('Mode must be one of "lookup", "temp" or "all"');
+        return '';
+    }
+    name = name.trim();
+    // If the name matches a persona avatar, or a name, auto-select it
+    if (['lookup', 'all'].includes(mode)) {
+        let persona = Object.entries(power_user.personas).find(([avatar, _]) => avatar === name)?.[1];
+        if (!persona) persona = Object.entries(power_user.personas).find(([_, personaName]) => personaName.toLowerCase() === name.toLowerCase())?.[1];
+        if (persona) {
+            autoSelectPersona(persona);
+            retriggerFirstMessageOnEmptyChat();
+            return '';
+        } else if (mode === 'lookup') {
+            toastr.warning(`Persona ${name} not found`);
+            return '';
+        }
+    }
+    if (['temp', 'all'].includes(mode)) {
+        // Otherwise, set just the name
+        setUserName(name); //this prevented quickReply usage
+        retriggerFirstMessageOnEmptyChat();
+    }
+    return '';
+}
+function syncCallback() {
+    $('#sync_name_button').trigger('click');
+    return '';
+}
+function registerPersonaSlashCommands() {
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'persona-lock',
+        callback: lockPersonaCallback,
+        returns: 'The current lock state for the given type',
+        helpString: 'Locks/unlocks a persona (name and avatar) to the current chat. Gets the current lock state for the given type if no state is provided.',
+        namedArgumentList: [
+            SlashCommandNamedArgument.fromProps({
+                name: 'type',
+                description: 'The type of the lock, where it should apply to',
+                typeList: [ARGUMENT_TYPE.STRING],
+                defaultValue: 'chat',
+                enumList: [
+                    new SlashCommandEnumValue('chat', 'Lock the persona to the current chat.'),
+                    new SlashCommandEnumValue('character', 'Lock this persona to the currently selected character. If the setting is enabled, mutliple personas can be locked to the same character.'),
+                    new SlashCommandEnumValue('default', 'Lock this persona as the default persona for all new chats.'),
+                ],
+            }),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'state',
+                typeList: [ARGUMENT_TYPE.STRING],
+                enumProvider: commonEnumProviders.boolean('onOffToggle'),
+            }),
+        ],
+    }));
+    // TODO: Legacy command. Might be removed in the future and replaced by /persona-lock with aliases.
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'lock',
+        /** @type {(args: { type: string }, value: string) => Promise<string>} */
+        callback: (args, value) => {
+            if (!value) {
+                value = 'toggle';
+                toastr.warning(t`Using /lock without a provided state to toggle the persona is deprecated. Please use /persona-lock instead.
+                        In the future this command with no state provided will return the current state, instead of toggling it.`, t`Deprecation Warning`);
+            }
+            return lockPersonaCallback(args, value);
+        },
+        returns: 'The current lock state for the given type',
+        aliases: ['bind'],
+        helpString: 'Locks/unlocks a persona (name and avatar) to the current chat. Gets the current lock state for the given type if no state is provided.',
+        namedArgumentList: [
+            SlashCommandNamedArgument.fromProps({
+                name: 'type',
+                description: 'The type of the lock, where it should apply to',
+                typeList: [ARGUMENT_TYPE.STRING],
+                defaultValue: 'chat',
+                enumList: [
+                    new SlashCommandEnumValue('chat', 'Lock the persona to the current chat.'),
+                    new SlashCommandEnumValue('character', 'Lock this persona to the currently selected character. If the setting is enabled, mutliple personas can be locked to the same character.'),
+                    new SlashCommandEnumValue('default', 'Lock this persona as the default persona for all new chats.'),
+                ],
+            }),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'state',
+                typeList: [ARGUMENT_TYPE.STRING],
+                defaultValue: 'toggle',
+                enumProvider: commonEnumProviders.boolean('onOffToggle'),
+            }),
+        ],
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'persona-set',
+        callback: setNameCallback,
+        aliases: ['persona', 'name'],
+        namedArgumentList: [
+            new SlashCommandNamedArgument(
+                'mode', 'The mode for persona selection. ("lookup" = search for existing persona, "temp" = create a temporary name, set a temporary name, "all" = allow both in the same command)',
+                [ARGUMENT_TYPE.STRING], false, false, 'all', ['lookup', 'temp', 'all'],
+            ),
+        ],
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'persona name',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                enumProvider: commonEnumProviders.personas,
+            }),
+        ],
+        helpString: 'Selects the given persona with its name and avatar (by name or avatar url). If no matching persona exists, applies a temporary name.',
+    }));
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'persona-sync',
+        aliases: ['sync'],
+        callback: syncCallback,
+        helpString: 'Syncs the user persona in user-attributed messages in the current chat.',
+    }));
+}
+/**
+ * Initializes the persona management and all its functionality.
+ * This is called during the initialization of the page.
+ */
+export async function initPersonas() {
+    await migrateNonPersonaUser();
+    registerPersonaSlashCommands();
+    $('#persona_delete_button').on('click', deleteUserAvatar);
+    $('#lock_persona_default').on('click', () => togglePersonaLock('default'));
+    $('#lock_user_name').on('click', () => togglePersonaLock('chat'));
+    $('#lock_persona_to_char').on('click', () => togglePersonaLock('character'));
     $('#create_dummy_persona').on('click', createDummyPersona);
     $('#persona_description').on('input', onPersonaDescriptionInput);
     $('#persona_description_position').on('input', onPersonaDescriptionPositionInput);

     $('#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
         retriggerFirstMessageOnEmptyChat();
     });
-    $('#your_name_button').click(async function () {
+    $('#persona_rename_button').on('click', () => renamePersona(user_avatar));
-        const userName = String($('#your_name').val()).trim();
-        setUserName(userName);
-        await updatePersonaNameIfExists(user_avatar, userName);
-        retriggerFirstMessageOnEmptyChat();
-    });
     $(document).on('click', '#user_avatar_block .avatar_upload', function () {
         $('#avatar_upload_overwrite').val('');
         $('#avatar_upload_file').trigger('click');
     });
-    $(document).on('click', '#user_avatar_block .duplicate_persona', function (e) {
+    $('#persona_duplicate_button').on('click', () => duplicatePersona(user_avatar));
-        e.stopPropagation();
-        const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
-        if (!avatarId) {
+    $('#persona_set_image_button').on('click', function () {
+        if (!user_avatar) {
             console.log('no imgfile');
             return;
+        }
-        duplicatePersona(avatarId);
+        $('#avatar_upload_overwrite').val(user_avatar);
-    });
-    $(document).on('click', '#user_avatar_block .set_persona_image', function (e) {
-        e.stopPropagation();
-        const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
-        if (!avatarId) {
-            console.log('no imgfile');
-            return;
-        }
-        $('#avatar_upload_overwrite').val(avatarId);
         $('#avatar_upload_file').trigger('click');
     });
+    $('#char_connections_button').on('click', showCharConnections);
     eventSource.on('charManagementDropdown', (target) => {
         if (target === 'convert_to_persona') {
             convertCharacterToPersona();
+        }
     });
-    eventSource.on(event_types.CHAT_CHANGED, setChatLockedPersona);
+    eventSource.on(event_types.CHAT_CHANGED, updatePersonaUIStates);
+    eventSource.on(event_types.CHAT_CHANGED, loadPersonaForCurrentChat);
     switchPersonaGridView();
+}

public/scripts/power-user.js+12 -0 Viewed

     $('#custom_stopping_strings_macro').prop('checked', power_user.custom_stopping_strings_macro);
     $('#fuzzy_search_checkbox').prop('checked', power_user.fuzzy_search);
     $('#persona_show_notifications').prop('checked', power_user.persona_show_notifications);
+    $('#persona_allow_multi_connections').prop('checked', power_user.persona_allow_multi_connections);
+    $('#persona_auto_lock').prop('checked', power_user.persona_auto_lock);
     $('#encode_tags').prop('checked', power_user.encode_tags);
     $('#example_messages_behavior').val(getExampleMessagesBehavior());
     $(`#example_messages_behavior option[value="${getExampleMessagesBehavior()}"]`).prop('selected', true);

         saveSettingsDebounced();
     });
+    $('#persona_allow_multi_connections').on('input', function () {
+        power_user.persona_allow_multi_connections = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
+    $('#persona_auto_lock').on('input', function () {
+        power_user.persona_auto_lock = !!$(this).prop('checked');
+        saveSettingsDebounced();
+    });
     $('#encode_tags').on('input', async function () {
         power_user.encode_tags = !!$(this).prop('checked');
         await reloadCurrentChat();

public/scripts/slash-commands.js+1 -109 Viewed

     setCharacterId,
     setCharacterName,
     setExtensionPrompt,
-    setUserName,
     showMoreMessages,
     stopGeneration,
     substituteParams,

 import { getRegexedString, regex_placement } from './extensions/regex/engine.js';
 import { findGroupMemberId, groups, is_group_generating, openGroupById, resetSelectedGroup, saveGroupChat, selected_group } from './group-chats.js';
 import { chat_completion_sources, oai_settings, promptManager } from './openai.js';
-import { autoSelectPersona, retriggerFirstMessageOnEmptyChat, setPersonaLockState, togglePersonaLock, user_avatar } from './personas.js';
+import { user_avatar } from './personas.js';
 import { addEphemeralStoppingString, chat_styles, flushEphemeralStoppingStrings, power_user } from './power-user.js';
 import { SERVER_INPUTS, textgen_types, textgenerationwebui_settings } from './textgen-settings.js';
 import { decodeTextTokens, getAvailableTokenizers, getFriendlyTokenizerName, getTextTokens, getTokenCountAsync, selectTokenizer } from './tokenizers.js';

         helpString: 'Get help on macros, chat formatting and commands.',
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
-        name: 'persona',
-        callback: setNameCallback,
-        aliases: ['name'],
-        namedArgumentList: [
-            new SlashCommandNamedArgument(
-                'mode', 'The mode for persona selection. ("lookup" = search for existing persona, "temp" = create a temporary name, set a temporary name, "all" = allow both in the same command)',
-                [ARGUMENT_TYPE.STRING], false, false, 'all', ['lookup', 'temp', 'all'],
-            ),
-        ],
-        unnamedArgumentList: [
-            SlashCommandArgument.fromProps({
-                description: 'persona name',
-                typeList: [ARGUMENT_TYPE.STRING],
-                isRequired: true,
-                enumProvider: commonEnumProviders.personas,
-            }),
-        ],
-        helpString: 'Selects the given persona with its name and avatar (by name or avatar url). If no matching persona exists, applies a temporary name.',
-    }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
-        name: 'sync',
-        callback: syncCallback,
-        helpString: 'Syncs the user persona in user-attributed messages in the current chat.',
-    }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
-        name: 'lock',
-        callback: lockPersonaCallback,
-        aliases: ['bind'],
-        helpString: 'Locks/unlocks a persona (name and avatar) to the current chat',
-        unnamedArgumentList: [
-            SlashCommandArgument.fromProps({
-                description: 'state',
-                typeList: [ARGUMENT_TYPE.STRING],
-                isRequired: true,
-                defaultValue: 'toggle',
-                enumProvider: commonEnumProviders.boolean('onOffToggle'),
-            }),
-        ],
-    }));
-    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'bg',
         callback: setBackgroundCallback,
         aliases: ['background'],

     return '';
+}
-function syncCallback() {
-    $('#sync_name_button').trigger('click');
-    return '';
-}
-async function lockPersonaCallback(_args, value) {
-    if (['toggle', 't', ''].includes(value.trim().toLowerCase())) {
-        await togglePersonaLock();
-        return '';
-    }
-    if (isTrueBoolean(value)) {
-        await setPersonaLockState(true);
-        return '';
-    }
-    if (isFalseBoolean(value)) {
-        await setPersonaLockState(false);
-        return '';
-    }
-    return '';
-}
 function setStoryModeCallback() {
     $('#chat_display').val(chat_styles.DOCUMENT).trigger('change');
     return '';

     return '';
+}
-/**
- * Sets a persona name and optionally an avatar.
- * @param {{mode: 'lookup' | 'temp' | 'all'}} namedArgs Named arguments
- * @param {string} name Name to set
- * @returns {string}
- */
-function setNameCallback({ mode = 'all' }, name) {
-    if (!name) {
-        toastr.warning('You must specify a name to change to');
-        return '';
-    }
-    if (!['lookup', 'temp', 'all'].includes(mode)) {
-        toastr.warning('Mode must be one of "lookup", "temp" or "all"');
-        return '';
-    }
-    name = name.trim();
-    // If the name matches a persona avatar, or a name, auto-select it
-    if (['lookup', 'all'].includes(mode)) {
-        let persona = Object.entries(power_user.personas).find(([avatar, _]) => avatar === name)?.[1];
-        if (!persona) persona = Object.entries(power_user.personas).find(([_, personaName]) => personaName.toLowerCase() === name.toLowerCase())?.[1];
-        if (persona) {
-            autoSelectPersona(persona);
-            retriggerFirstMessageOnEmptyChat();
-            return '';
-        } else if (mode === 'lookup') {
-            toastr.warning(`Persona ${name} not found`);
-            return '';
-        }
-    }
-    if (['temp', 'all'].includes(mode)) {
-        // Otherwise, set just the name
-        setUserName(name); //this prevented quickReply usage
-        retriggerFirstMessageOnEmptyChat();
-    }
-    return '';
-}
 async function setNarratorName(_, text) {
     const name = text || NARRATOR_NAME_DEFAULT;
     chat_metadata[NARRATOR_NAME_KEY] = name;

public/scripts/tags.js+2 -2 Viewed

+    }
     // Start with the given element and traverse up the DOM tree
     while (element.length && element.parent().length) {
-        const grid = element.attr('grid');
+        const grid = element.attr('data-grid');
-        const chid = element.attr('chid');
+        const chid = element.attr('data-chid');
         if (grid || chid) {
             const id = grid || chid;
             return getTagKeyForEntity(id);

public/scripts/utils.js+36 -0 Viewed

+    }
     return true;
+}
+/**
+ * Updates the content and style of an information block
+ * @param {string | HTMLElement} target - The CSS selector or the HTML element of the information block
+ * @param {string | HTMLElement?} content - The message to display inside the information block (supports HTML) or an HTML element
+ * @param {'hint' | 'info' | 'warning' | 'error'} [type='info'] - The type of message, which determines the styling of the information block
+ */
+export function setInfoBlock(target, content, type = 'info') {
+    if (!content) {
+        clearInfoBlock(target);
+        return;
+    }
+    const infoBlock = typeof target === 'string' ? document.querySelector(target) : target;
+    if (infoBlock) {
+        infoBlock.className = `info-block ${type}`;
+        if (typeof content === 'string') {
+            infoBlock.innerHTML = content;
+        } else {
+            infoBlock.innerHTML = '';
+            infoBlock.appendChild(content);
+        }
+    }
+}
+/**
+ * Clears the content and style of an information block.
+ * @param {string | HTMLElement} target - The CSS selector or the HTML element of the information block
+ */
+export function clearInfoBlock(target) {
+    const infoBlock = typeof target === 'string' ? document.querySelector(target) : target;
+    if (infoBlock && infoBlock.classList.contains('info-block')) {
+        infoBlock.className = '';
+        infoBlock.innerHTML = '';
+    }
+}

public/scripts/world-info.js+2 -2 Viewed

+    }
     if (characters[chid]?.data?.character_book) {
-        $('#import_character_info').data('chid', chid).show();
+        $('#import_character_info').data('data-chid', chid).show();
         // Only show the alert once per character
         const checkKey = `AlertWI_${characters[chid].avatar}`;

+}
 export async function importEmbeddedWorldInfo(skipPopup = false) {
-    const chid = $('#import_character_info').data('chid');
+    const chid = $('#import_character_info').data('data-chid');
     if (chid === undefined) {
         return;

public/style.css+137 -45 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 {

+}
 .avatars_inline {
+    display: flex;
+    gap: 5px;
     flex-wrap: wrap;
     overflow: hidden;
     max-height: calc(var(--avatar-base-height) + 2 * var(--avatar-base-border-radius));

     margin-right: calc(var(--avatar-base-border-radius));
+}
+.avatars_multiline {
+    max-height: fit-content;
+    height: inherit;
+}
 .mes_block {
     padding-top: 0;
     padding-left: 10px;

 .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;

     width: max-content;
+}
-#persona-management-block .menu_button {
+#persona-management-block .avatar_container_states .menu_button {
-    filter: grayscale(0.5);
+    padding: 3px 5px;
+    pointer-events: initial;
+}
+#persona_controls .persona_name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    white-space: nowrap;
+    font-size: calc(var(--mainFontSize) * 1.25);
+    opacity: 0.5;
+}
+#persona_connections_buttons {
+    margin-bottom: 5px;
+}
 input[type=search]::-webkit-search-cancel-button {

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

     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;

     cursor: pointer;
+}
-#rm_characters_block .form_create_bottom_buttons_block {
+.buttons_block {
-    justify-content: space-evenly !important;
-    flex-grow: 0;
-}
-.form_create_bottom_buttons_block {
     display: flex;
     flex: 1;
     gap: 5px;

@@ -3469,18 +3498,21 @@ grammarly-extension {
3469	flex-wrap: wrap;	3498	flex-wrap: wrap;
3470	}	3499	}
3471		3500
3472	.form_create_bottom_buttons_block .menu_button {	3501	.buttons_block .menu_button {
3473	display: flex;	3502	display: flex;
3474	justify-content: center;	3503	justify-content: center;
3475	align-items: center;	3504	align-items: center;
		3505	padding: 5px;
		3506	margin: 0;
		3507	filter: grayscale(0.5);
3476	}	3508	}
3477		3509
3478	#delete_button,	3510	.red_button,
3479	.redWarningBG {	3511	.redWarningBG {
3480	background-color: var(--crimson70a) !important;	3512	background-color: var(--crimson70a) !important;
3481	}	3513	}
3482		3514
3483	#delete_button:hover,	3515	.red_button:hover,
3484	.redWarningBG:hover {	3516	.redWarningBG:hover {
3485	background-color: var(--fullred) !important;	3517	background-color: var(--fullred) !important;
3486	}	3518	}

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

     min-width: calc(1.25em + 12px);
+}
-.avatar_div .menu_button,
+.menu_button:not(.disabled):hover,
-.form_create_bottom_buttons_block .menu_button {
+.menu_button:not(.disabled).active {
-    padding: 5px;
-    margin: 0;
-    filter: grayscale(0.5);
-}
-.menu_button:hover,
-.menu_button.active {
     background-color: var(--white30a);
+}

     outline: var(--avatar-base-border-radius) solid var(--golden);
+}
-.avatar-container.default_persona .set_default_persona {
+.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 .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);
+}
+#lock_user_name.locked {
+    border-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 50%, var(--SmartThemeBorderColor));;
+}
+#lock_persona_to_char.locked {
+    border-color: color-mix(in srgb, var(--active) 50%, var(--SmartThemeBorderColor));
+}
 #user_avatar_block .avatar_upload {
     cursor: pointer;
     width: 60px;

     min-width: fit-content;
     width: 40%;
+}
+.multiline {
+    white-space: pre-wrap;
+}
+.info-block {
+    padding: 10px 1em;
+    margin: 1em 0;
+    border-radius: 10px;
+    border-left: 5px solid;
+    background-color: var(--SmartThemeBlurTintColor);
+    color: var(--SmartThemeBodyColor);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
+}
+.info-block.hint {
+    border-color: var(--info-color, #7fb3e8);
+    background-color: rgba(163, 201, 241, 0.2);
+}
+.info-block.info {
+    border-color: var(--default-color, #e8e07f);
+    background-color: rgba(255, 255, 224, 0.2);
+}
+.info-block.warning {
+    border-color: var(--warning-color, #e8a97f);
+    background-color: rgba(241, 198, 163, 0.2);
+    /* Reset the font weight from that main warning class */
+    font-weight: unset;
+}
+.info-block.error {
+    border-color: var(--error-color, #e87f7f);
+    background-color: rgba(241, 163, 163, 0.2);
+}