Add persona titles (#4224) * Add persona titles * Refactor persona title editing

51904c2f1058f19b3698035abd7a607df0245134

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

Signed

Parents: d41725cd4fb9858bcecc95540960d5799a776634

public/css/toggle-dependent.css+2 -1 Viewed

 body.charListGrid #rm_print_characters_block .group_select .group_select_counter,
 #user_avatar_block.gridView .avatar-container .ch_name,
 #user_avatar_block.gridView .avatar-container .bogus_folder_counter,
-#user_avatar_block.gridView .avatar-container .group_select_counter {
+#user_avatar_block.gridView .avatar-container .group_select_counter,
+#user_avatar_block.gridView .avatar-container .ch_additional_info {
     width: 100%;
     max-width: 100px;
     text-align: center;

public/index.html+1 -0 Viewed

                 <div class="flex-container wide100pLess70px character_select_container">
                     <div class="wide100p character_name_block">
                         <span class="ch_name flex1"></span>
+                        <small class="ch_additional_info"></small>
                     </div>
                     <div class="ch_description"></div>
                     <div class="avatar_container_states buttons_block">

public/scripts/personas.js+73 -9 Viewed

 import { debounce_timeout } from './constants.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';
 import { groups, selected_group } from './group-chats.js';
-import { POPUP_TYPE, Popup, callGenericPopup } from './popup.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';

     const template = $('#user_avatar_template .avatar-container').clone();
     const personaName = power_user.personas[avatarId];
     const personaDescription = power_user.persona_descriptions[avatarId]?.description;
+    const personaTitle = power_user.persona_descriptions[avatarId]?.title;
     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.find('.ch_additional_info').text(personaTitle || '');
     template.attr('data-avatar-id', avatarId);
     template.find('.avatar').attr('data-avatar-id', avatarId).attr('title', avatarId);
     template.toggleClass('default_persona', avatarId === power_user.default_persona);

@@ -209,7 +211,7 @@ function getUserAvatarBlock(avatarId) {
209	function addMissingPersonas(avatarsList) {	211	function addMissingPersonas(avatarsList) {
210	for (const persona of avatarsList) {	212	for (const persona of avatarsList) {
211	if (!power_user.personas[persona]) {	213	if (!power_user.personas[persona]) {
212	initPersona(persona, '[Unnamed Persona]', '');	214	initPersona(persona, '[Unnamed Persona]', '', '');
213	}	215	}
214	}	216	}
215	}	217	}

     const personaDescription = await Popup.show.input(t`Enter a description for this persona:`, t`You can always add or change it later.`, '', { rows: 4 });
-    initPersona(avatarId, personaName, personaDescription);
+    initPersona(avatarId, personaName, personaDescription, '');
     if (power_user.persona_show_notifications) {
         toastr.success(t`You can now pick ${personaName} as a persona in the Persona Management menu.`, t`Persona Created`);
+    }
+}
 async function createDummyPersona() {
-    const personaName = await Popup.show.input(t`Enter a name for this persona:`, null);
+    const popup = new Popup(t`Enter a name for this persona:`, POPUP_TYPE.INPUT, '', {
+        customInputs: [{
+            id: 'persona_title',
+            type: 'text',
+            label: t`Persona Title (optional, display only)`,
+        }],
+    });
-    if (!personaName) {
+    const personaName = await popup.show();
+    const personaTitle = String(popup.inputResults.get('persona_title') || '').trim();
+    if (!personaName || typeof personaName !== 'string') {
         console.debug('User cancelled creating dummy persona');
         return;
+    }
     // Date + name (only ASCII) to make it unique
     const avatarId = `${Date.now()}-${personaName.replace(/[^a-zA-Z0-9]/g, '')}.png`;
-    initPersona(avatarId, personaName, '');
+    initPersona(avatarId, personaName, '', personaTitle);
     await uploadUserAvatar(default_user_avatar, avatarId);
+}

  * @param {string} avatarId User avatar id
  * @param {string} personaName Name for the persona
  * @param {string} personaDescription Optional description for the persona
+ * @param {string} personaTitle Optional title for the persona
  * @returns {void}
  */
-export function initPersona(avatarId, personaName, personaDescription) {
+export function initPersona(avatarId, personaName, personaDescription, personaTitle) {
     power_user.personas[avatarId] = personaName;
     power_user.persona_descriptions[avatarId] = {
         description: personaDescription || '',

         depth: DEFAULT_DEPTH,
         role: DEFAULT_ROLE,
         lorebook: '',
+        title: personaTitle || '',
     };
     saveSettingsDebounced();

         depth: DEFAULT_DEPTH,
         role: DEFAULT_ROLE,
         lorebook: '',
+        title: '',
     };
     // If the user is currently using this persona, update the description

+}
 /**
+ * Edits the title of a persona based on the input from a popup.
+ * @param {Popup} popup Popup instance
+ * @param {string} avatarId Avatar ID of the persona to edit
+ * @param {string} currentTitle Current title of the persona
+ */
+async function editPersonaTitle(popup, avatarId, currentTitle) {
+    if (popup.result !== POPUP_RESULT.AFFIRMATIVE) {
+        return;
+    }
+    if (!power_user.persona_descriptions[avatarId]) {
+        console.warn('Uninitialized persona descriptor for avatar:', avatarId);
+        return;
+    }
+    const newTitle = String(popup.inputResults.get('persona_title') || '').trim();
+    if (!newTitle && currentTitle) {
+        console.log(`Removed persona title for ${avatarId}`);
+        delete power_user.persona_descriptions[avatarId].title;
+        await getUserAvatars(true, avatarId);
+        saveSettingsDebounced();
+        return;
+    }
+    if (newTitle !== currentTitle) {
+        power_user.persona_descriptions[avatarId].title = newTitle;
+        console.log(`Updated persona title for ${avatarId} to ${newTitle}`);
+        await getUserAvatars(true, avatarId);
+        saveSettingsDebounced();
+        return;
+    }
+}
+/**
  * 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);
+    const currentTitle = power_user.persona_descriptions[avatarId]?.title || '';
+    const newName = await Popup.show.input(t`Rename Persona`, t`Enter a new name for this persona:`, currentName, {
+        customInputs: [{
+            id: 'persona_title',
+            type: 'text',
+            label: t`Persona Title (optional, display only)`,
+            defaultState: currentTitle,
+        }],
+        onClose: (popup) => editPersonaTitle(popup, avatarId, currentTitle),
+    });
     if (!newName || newName === currentName) {
         console.debug('User cancelled renaming persona or name is unchanged');
         return false;

                 role: DEFAULT_ROLE,
                 lorebook: '',
                 connections: [],
+                title: '',
             };
+        }

             role: DEFAULT_ROLE,
             lorebook: '',
             connections: [],
+            title: '',
         };
+    }

                 depth: Number($('#persona_depth_value').val()),
                 role: Number($('#persona_depth_role').find(':selected').val()),
                 lorebook: '',
+                title: '',
             };
             power_user.persona_descriptions[user_avatar] = object;
+        }

             role: power_user.persona_description_role,
             lorebook: power_user.persona_description_lorebook,
             connections: [],
+            title: '',
         };
         power_user.persona_descriptions[user_avatar] = object;
+    }

         depth: descriptor?.depth ?? DEFAULT_DEPTH,
         role: descriptor?.role ?? DEFAULT_ROLE,
         lorebook: descriptor?.lorebook ?? '',
+        title: descriptor?.title ?? '',
     };
     await uploadUserAvatar(getUserAvatar(avatarId), newAvatarId);

@@ -1719,7 +1783,7 @@ async function migrateNonPersonaUser() {
1719	return;	1783	return;
1720	}	1784	}
1721		1785
1722	initPersona(user_avatar, name1, '');	1786	initPersona(user_avatar, name1, '', '');
1723	setPersonaDescription();	1787	setPersonaDescription();
1724	await getUserAvatars(true, user_avatar);	1788	await getUserAvatars(true, user_avatar);
1725	}	1789	}

public/scripts/popup.js+1 -1 Viewed

                 label.setAttribute('for', input.id);
                 const inputElement = document.createElement('input');
-                inputElement.classList.add('text_pole');
+                inputElement.classList.add('text_pole', 'result-control');
                 inputElement.type = 'text';
                 inputElement.id = input.id;
                 inputElement.value = String(input.defaultState ?? '');

public/style.css+1 -0 Viewed

     display: block;
+}
+.avatar-container .ch_additional_info,
 .character_name_block .character_version {
     text-overflow: ellipsis;
     overflow: hidden;