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+89 -46 Viewed

                         </div>
                     </div>
                     <div id="persona-management-block" class="flex-container wide100p flexGap10">
                         <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="persona_management_right_column flex1">
                             <h4div data-i18nclass="Namepersona_management_current_persona">Name</h4>
 -                            <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>
 -                                </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>
++
 -                            <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">
++
 -                                    <span data-i18n="Tokens persona description">Tokens</span>: <span id="persona_description_token_count">0</span>
 +                                <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="range-block">
++
                                                             <label for="persona_show_notifications"div class="checkbox_labelpersona_management_global_settings">
                                                                     <inputh4 idclass="persona_show_notificationsstandoutHeader" typedata-i18n="checkboxGlobal Settings">Global Settings</h4>
 -                                    <span data-i18n="Show notifications on switching personas">
++
 -                                        Show notifications on switching personas
 +                                <div class="range-block">
 -                                    </span>
 +                                    <label for="persona_show_notifications" class="checkbox_label">
 -                                </label>
 +                                        <input id="persona_show_notifications" type="checkbox" />
 +                                        <span data-i18n="Show notifications on switching personas">
 +                                            Show notifications on switching personas
 +                                        </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 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>
                 </div>
                 <hr>

                                 </div>
                             </div>
                             <div class="flex-container flexFlowColumn expander flexNoGap">
                                 <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 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 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();
     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({ '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));
                 // Async delay to update UI
                 await delay(1);

+        }
         avatarTemplate.attr('data-type', entity.type);
         avatarTemplate.attr({ 'data-chid': id, 'id': `CharID${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	6878	forceCharacterEditorTokenize();
6862	6879	}
6863	6880
6864	6881	export function setUserName(value, { toastPersonaNameChange = true } = {}) {
6865	6882	name1 = value;
6866	6883	if (name1 === undefined \|\| name1 == '')
6867	6884	name1 = default_user_name;
6868	6885	console.log(`User name changed to ${name1}`);
6869	6886	$('#your_name').valtext(name1);
6870	6887	if (toastPersonaNameChange && power_user.persona_show_notifications && !isPersonaPanelOpen()) {
6871	6888	toastr.success(t`Your messages will now be sent as ${name1}`, t`Current personaPersona updatedChanged`);
6872	6889	}
6873	6890	saveSettingsDebounced();
6874	6891	}

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

     });
     $(document).on('click', '.character_select', async function () {
         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 = 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 = 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));
         } else {
             character.classList.remove(BulkEditOverlay.selectedClass);
             if (legacyBulkEditCheckbox) legacyBulkEditCheckbox.checked = false;
             this.#selectedCharacters = this.#selectedCharacters.filter(item => String(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 = Number(currentCharacter.getAttribute('data-chid'));
         const characters = Array.from(document.querySelectorAll('#' + BulkEditOverlay.containerId + ' .' + BulkEditOverlay.characterClass));
         const startIndex = characters.findIndex(c => Number(c.getAttribute('data-chid')) === Number(this.lastSelected.characterId));
         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 = 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));
                 // 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-chid');
         setActiveCharacter(characterId);
         setActiveGroup(null);
         saveSettingsDebounced();
     });
     $(document).on('click', '.group_select', function () {
         const groupId = $(this).attr('data-chid') || $(this).attr('grid') || $(this).data('id-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('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('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	1647	if (action === 'speak') {
1648	1648	const chid = Number(member.attr('data-chid'));
1649	1649	if (Number.isInteger(chid)) {
1650	1650	Generate('normal', { force_chid: chid });
1651	1651	}

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

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

public/scripts/personas.js+1046 -273 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, 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 { groups, selected_group } from './group-chats.js';
 import { POPUP_RESULT, 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/${USER_AVATAR_PATH}${avatarImg}`;
+}
 export function initUserAvatar(avatar) {
     user_avatar = avatar;
     reloadUserAvatar();
     highlightSelectedAvatarupdatePersonaUIStates();
+}
 /**
  * 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('imgfiledata-avatar-id');
     reloadUserAvatar();
 -    highlightSelectedAvatar();
 +    updatePersonaUIStates({ navigateToCurrent: navigateToCurrent });
     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} nameavatarId Avatar file name
  * @returns {JQuery<HTMLElement>} Avatar block
  */
 function getUserAvatarBlock(nameavatarId) {
     const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
     const template = $('#user_avatar_template .avatar-container').clone();
     const personaName = power_user.personas[nameavatarId];
     const personaDescription = power_user.persona_descriptions[nameavatarId]?.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('imgfiledata-avatar-id', nameavatarId);
     template.find('.avatar').attr('imgfiledata-avatar-id', nameavatarId).attr('title', nameavatarId);
     template.toggleClass('default_persona', nameavatarId === power_user.default_persona);
     let avatarUrl = getUserAvatar(nameavatarId);
     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));
+                }
                 highlightSelectedAvatarupdatePersonaUIStates();
             },
             afterSizeSelectorChange: function (e) {
                 accountStorage.setItem(storageKey, e.target.value);

             },
         });
         ifnavigateToAvatar = (openPageAtavatarId) => {
             const avatarIndex = entities.indexOf(openPageAtavatarId);
             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 objectthat representingresolves when the AJAXavatar requestis 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',
         cacheheaders: falseheaders,
         contentTypecache: false'no-cache',
         processDatabody: falseformData,
 -        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,
 -        beforeSend: () => { },
 -        cache: false,
 -        contentType: false,
 -        processData: false,
 -        success: async function (data) {
 -            // 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 fetch(getUserAvatar(String(name)), { cache: 'no-cache' });
 -                reloadUserAvatar(true);
 -            }
+-
 -            if (!name && data.path) {
 -                await getUserAvatars();
 -                await delay(500);
 -                await createPersona(data.path);
 -            }
 -            await getUserAvatars(true, name || data.path);
 +    const response = await fetch(url, {
 -        },
 +        method: 'POST',
 -        error: (jqXHR, exception) => { },
 +        headers: headers,
 +        cache: 'no-cache',
 +        body: formData,
     });
 +    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 fetch(getUserAvatar(String(name)), { cache: 'no-cache' });
 +            reloadUserAvatar(true);
 +        }
++
 +        if (!name && data.path) {
 +            await getUserAvatars();
 +            await delay(500);
 +            await createPersona(data.path);
 +        }
++
 +        await getUserAvatars(true, name || data.path);
 +    }
++
     // 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 false;
+    }
     const name = characters[characterId]?.name;

@@ -401,7 +481,7 @@ export async function convertCharacterToPersona(characterId = null) {
401	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	482	if (!confirm) {
403	483	console.log('User cancelled the overwrite of the persona');
404	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();
++
 +    updatePersonaUIStates();
 +    updatePersonaConnectionsAvatarList();
+}
 -export function autoSelectPersona(name) {
 +/**
 -    for (const [key, value] of Object.entries(power_user.personas)) {
 + * Gets a list of all personas in the current chat.
 -        if (value === name) {
 + *
 -            console.log(`Auto-selecting persona ${key} for name ${name}`);
 + * @returns {string[]} An array of persona identifiers
 -            setUserAvatar(key);
 + */
 -            return;
 +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;
+}
 /**
  * UpdatesBuilds thea namelist of a persona ifavatars itand existspopulates the given block element with them.
 - * @param {string} avatarId User avatar id
 + *
  * @param {stringHTMLElement} newNameblock New- nameThe forHTML element where the personaavatar 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
  */
 -async function updatePersonaNameIfExists(avatarId, newName) {
 +export function buildPersonaAvatarList(block, personas, { empty = true, interactable = false, highlightFavs = true } = {}) {
 -    if (avatarId in power_user.personas) {
 +    const personaEntities = personas.map(avatar => ({
 -        power_user.personas[avatarId] = newName;
 +        type: 'persona',
 -        console.log(`Updated persona name for ${avatarId} to ${newName}`);
 +        id: avatar,
 -    } else {
 +        item: {
 -        power_user.personas[avatarId] = newName;
 +            name: power_user.personas[avatar],
 -        power_user.persona_descriptions[avatarId] = {
 +            description: power_user.persona_descriptions[avatar]?.description || '',
             descriptionavatar: ''avatar,
 -            position: persona_description_positions.IN_PROMPT,
 +            fav: power_user.default_persona === avatar,
 -            depth: DEFAULT_DEPTH,
 +        },
 -            role: DEFAULT_ROLE,
 +    }));
 -            lorebook: '',
 -        };
 -        console.log(`Created persona name for ${avatarId} as ${newName}`);
 -    }
 -    await getUserAvatars(true, avatarId);
 +    buildAvatarList($(block), personaEntities, { empty: empty, interactable: interactable, highlightFavs: highlightFavs });
 -    saveSettingsDebounced();
+}
 -async function bindUserNameToPersona(e) {
 +/**
 -    e?.stopPropagation();
 + * Displays avatar connections for the current persona.
 -    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
 + * Converts connections to entities and populates the avatar list. Shows a message if no connections are found.
 + */
 +export function updatePersonaConnectionsAvatarList() {
 +    /** @type {PersonaConnection[]} */
 +    const connections = power_user.persona_descriptions[user_avatar]?.connections ?? [];
 +    const entities = connections.map(connection => {
 +        if (connection.type === 'character') {
 +            const character = characters.find(c => c.avatar === connection.id);
 +            if (character) return characterToEntity(character, getCharIndex(character));
 +        }
 +        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);
     if (!avatarIdentities.length) {
 -        console.warn('No avatar id found');
 +        buildAvatarList($('#persona_connections_list'), entities, { interactable: true });
 -        return;
 +    else
 -    }
 +        $('#persona_connections_list').text(t`[No character connections. Click one of the buttons above to connect this persona.]`);
 +}
 -    let personaUnbind = false;
 -    const existingPersona = power_user.personas[avatarId];
 -    const personaName = await Popup.show.input(
 -        t`Enter a name for this 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
 +/**
 -    if (personaName === null && !personaUnbind) {
 + * 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);
 +                }
 +            });
 +        }
             if (personaNamepersonasToHighlight && personaNamepersonasToHighlight.length > 0includes(block.dataset.pid)) {
 -        // If the user clicked ok and entered a name, bind the name to the persona
 +            block.classList.add('is_active');
 -        console.log(`Binding persona ${avatarId} to name ${personaName}`);
 +            block.title = block.title + '\n\n' + t`Was used in current chat.`;
 -        power_user.personas[avatarId] = personaName;
 +            if (block.classList.contains('is_fav')) block.title = block.title + '\n' + t`Is your default persona.`;
 -        const descriptor = power_user.persona_descriptions[avatarId];
 -        const isCurrentPersona = avatarId === user_avatar;
+-
 -        // Create a description object if it doesn't exist
 -        if (!descriptor) {
 -            // If the user is currently using this persona, set the description to the current description
 -            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
 +    /** @type {import('./popup.js').CustomPopupButton[]} */
 -        if (isCurrentPersona) {
 +    const customButtons = [];
 -            console.log(`Auto-updating user name to ${personaName}`);
 +    if (targetedChar) {
 -            setUserName(personaName);
 +        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;
 +                        });
 +                    }
 +                }
++
 +                saveSettingsDebounced();
 +                updatePersonaConnectionsAvatarList();
 +                if (power_user.persona_show_notifications) {
 +                    const name = targetedChar.type == 'character' ? characters[targetedChar.id]?.name : groups[targetedChar.id]?.name;
 +                    toastr.info(t`All connections to ${name} have been removed.`, t`Personas Unlocked`);
 +                }
 +            },
 +        });
 +    }
++
 +    const popup = new Popup(content, POPUP_TYPE.TEXT, '', { okButton: okButton, customButtons: customButtons });
 +    const result = await popup.show();
 +    return Number(result) >= 100 ? personas[Number(result) - 100] : null;
 +}
++
 +/**
 + * Automatically selects a persona based on the given name if a matching persona exists.
 + * @param {string} name - The name to search for
 + * @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 lockedPersonashouldAutoLock = 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 thea personaconnection is locked for the current chat.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
 + * @param {PersonaLockType} type - Lock type
  * @returns {boolean} Whether the persona is locked
  */
 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.
  * @param {boolean} state Desired lock state
 + * @param {PersonaLockType} type - Lock type
  * @returns {Promise<void>}
  */
 export async function setPersonaLockState(state, type = 'chat') {
     return state ? await lockPersona(type) : await unlockPersona(type);
+}
 /**
  * Toggle the persona lock state for the current chat.
 - * @returns {Promise<void>}
 + * @param {PersonaLockType} type - Lock type
 + * @returns {Promise<boolean>} - Whether the persona was locked
  */
 export async function togglePersonaLock(type = 'chat') {
     returnif (isPersonaLocked(type)) {
         ? await unlockPersona(type);
 -        : await lockPersona();
 +        return false;
 +    } else {
 +        await lockPersona(type);
 +        return true;
 +    }
+}
 /**
  * Unlock the persona for the current chat.
 + * @param {PersonaLockType} type - Lock type
 + * @returns {Promise<void>}
  */
 async function unlockPersona(type = 'chat') {
     ifswitch (chat_metadata['persona']type) {
 -        console.log(`Unlocking persona for this chat ${chat_metadata['persona']}`);
 +        case 'default': {
 -        delete chat_metadata['persona'];
 +            // TODO: Make this toggle-able
 -        await saveMetadata();
 +            await toggleDefaultPersona(user_avatar, { quiet: true });
 -        if (power_user.persona_show_notifications) {
 +            break;
 -            toastr.info(t`User persona is now unlocked for this chat. Click the "Lock" again to revert.`, t`Persona unlocked`);
 +        }
 +        case 'chat': {
 +            if (chat_metadata['persona']) {
 +                console.log(`Unlocking persona ${user_avatar} from this chat`);
 +                delete chat_metadata['persona'];
 +                await saveMetadata();
 +                if (power_user.persona_show_notifications && !isPersonaPanelOpen()) {
 +                    toastr.info(t`Persona ${name1} is now unlocked from this chat.`, t`Persona Unlocked`);
 +                }
 +            }
 +            break;
+        }
 -        updateUserLockIcon();
 +        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`);
 +                }
 +            }
 +            break;
 +        }
 +        default:
 +            throw new Error(`Unknown persona lock type: ${type}`);
+    }
++
 +    updatePersonaUIStates();
+}
 /**
  * Lock the persona for the current chat.
 + * @param {PersonaLockType} type - Lock type
  */
 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: [],
         };
+    }
 -    chat_metadata['persona'] = user_avatar;
 +    switch (type) {
 -    await saveMetadata();
 +        case 'default': {
 -    saveSettingsDebounced();
 +            await toggleDefaultPersona(user_avatar, { quiet: true });
 -    console.log(`Locking persona for this chat ${user_avatar}`);
 +            break;
 -    if (power_user.persona_show_notifications) {
 +        }
 -        toastr.success(t`User persona is locked to ${name1} in this chat`);
 +        case 'chat': {
 +            console.log(`Locking persona ${user_avatar} to this chat`);
 +            chat_metadata['persona'] = user_avatar;
 +            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();
 +                updatePersonaConnectionsAvatarList();
 +                if (power_user.persona_show_notifications) {
 +                    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 });
 +                    }
 +                }
 +            }
 +            break;
 +        }
 +        default:
 +            throw new Error(`Unknown persona lock type: ${type}`);
+    }
 -    updateUserLockIcon();
++
 +    updatePersonaUIStates();
+}
 async function deleteUserAvatar(e) {
 -    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	1024	delete power_user.persona_descriptions[avatarId];
720	1025
721	1026	if (avatarId === power_user.default_persona) {
722	1027	toastr.warning(t`The default persona was deleted. You will need to set a new default persona.`, t`Default personaPersona deletedDeleted`);
723	1028	power_user.default_persona = null;
724	1029	}
725	1030
726	1031	if (avatarId === chat_metadata['persona']) {
727	1032	toastr.warning(t`The locked persona was deleted. You will need to set a new persona for this chat.`, t`Persona deletedDeleted`);
728	1033	delete chat_metadata['persona'];
729	1034	await saveMetadata();
730	1035	}
731	1036
732	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 {PointerEventJQuery.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 nameName notNot setSet`);
         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 nameName notNot setSet`);
         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 && !isPersonaPanelOpen()) {
             toastr.info(t`This persona will no longer be used by default when you open a new chat.`, t`Default personaPersona removedRemoved`);
+        }
         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`,
 -        if (!confirm) {
 +                t`Are you sure you want to set \"${power_user.personas[avatarId]}\" as the default persona?`
 -            console.debug('User cancelled setting default persona');
 +                + '<br /><br />'
 -            return;
 +                + 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 && !isPersonaPanelOpen()) {
             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 set to ${personaName}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 = '';
 +    /** @type {'chat' | 'character' | 'default' | null} */
 +    let connectType = null;
++
 +    // If persona is locked in chat metadata, select it
     if (chat_metadata['persona']) {
 -        // If persona is locked in chat metadata, select it
         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;
++
 +        if (chatPersona) connectType = 'default';
 +    }
 -    // Avatar missing (persona deleted)
 +    // Whatever way we selected a persona, if it doesn't exist, unlock this chat
     if (chat_metadata['persona'] && !userAvatars.includes(chatPersonachat_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	1626	if (warnings.length) {
1041	1627	toastr.success(t`Personas restored with warnings. Check console for details.`, t`Persona Management`);
1042	1628	console.warn(`PERSONA RESTORE REPORT\n====================\n${warnings.join('\n')}`);
1043	1629	} else {
1044	1630	toastr.success(t`Personas restored successfully.`, t`Persona Management`);
1045	1631	}
1046	1632
1047	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', 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('imgfiledata-avatar-id');
         setUserAvatar(imgfile);
         // force firstMes {{user}} update on persona switch
         retriggerFirstMessageOnEmptyChat();
     });
     $('#your_name_buttonpersona_rename_button').on('click', (async) function=> 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'#persona_duplicate_button').on('click', '#user_avatar_block .duplicate_persona',() function=> duplicatePersona(euser_avatar) {);
 -        e.stopPropagation();
 -        const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
+-
 -        if (!avatarId) {
 -            console.log('no imgfile');
 -            return;
 -        }
+-
 -        duplicatePersona(avatarId);
 -    });
+-
 -    $(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) {
 +    $('#persona_set_image_button').on('click', function () {
 +        if (!user_avatar) {
             console.log('no imgfile');
             return;
+        }
         $('#avatar_upload_overwrite').val(avatarIduser_avatar);
         $('#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, setChatLockedPersonaupdatePersonaUIStates);
 +    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 { 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('data-grid');
         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('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('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, {
 -.avatar-container .menu_button {
     margin: 0;
     height: fit-content;
     padding: 5px;

     width: max-content;
+}
 #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_blockbuttons_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	3498	flex-wrap: wrap;
3470	3499	}
3471	3500
3472	3501	.form_create_bottom_buttons_blockbuttons_block .menu_button {
3473	3502	display: flex;
3474	3503	justify-content: center;
3475	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	3511	.redWarningBG {
3480	3512	background-color: var(--crimson70a) !important;
3481	3513	}
3482	3514
3483	3515	#delete_button.red_button:hover,
3484	3516	.redWarningBG:hover {
3485	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_personaavatar_state .set_default_personafa-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);
 +}