Move persona buttons to right panel - Move all buttons from the persona list to the right panel, to the already existing ones - Common CSS class/style for '.buttons_block' - Common CSS style for a red button - Refactored a few persona buttons' functionalities

2344d98e203f324e0e630ef3daa8c762c3bfc875

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 6081b9f0cee884abc95c8d0d1f0eb78dadba12fb

public/index.html+17 -15 Viewed

                             <div class="persona_management_current_persona">
                                 <h4 class="standoutHeader" data-i18n="Current Persona">Current Persona</h4>
-                                <h4 data-i18n="Name">Name</h4>
+                                <div id="persona_controls" class="flex-container">
-                                <div class="change_name">
+                                    <h5 id="your_name" class="persona_name">[Persona Name]</h5>
-                                    <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 class="persona_controls_buttons_block buttons_block">
-                                    <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_rename_button" class="menu_button fa-solid fa-pencil" title="Rename Persona / Bind Name To Avatar" data-i18n="[title]Rename Persona / Bind Name To Avatar"></div>
-                                    </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 id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages">
+                                        <div id="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>
-                                    <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>
                             <div class="flex-container flexFlowColumn expander flexNoGap">
-                                <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
+                                <div id="avatar_div" class="avatar_div buttons_block alignitemsflexstart justifySpaceBetween flexnowrap">
                                     <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
                                         <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                         <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
                                     </label>
                                     <div class="flex-container" id="avatar_controls">
-                                        <div class="form_create_bottom_buttons_block">
+                                        <div class="form_create_bottom_buttons_block buttons_block">
                                             <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
                                             <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
                                             <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>

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

                     <div class="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">
+                            <!-- <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>
+                            </button> -->
                         </div>
                     </div>
                     <div class="ch_description"></div>

public/script.js+2 -2 Viewed

     if (name1 === undefined || name1 == '')
         name1 = default_user_name;
     console.log(`User name changed to ${name1}`);
-    $('#your_name').val(name1);
+    $('#your_name').text(name1);
     if (toastPersonaNameChange && power_user.persona_show_notifications) {
         toastr.success(t`Your messages will now be sent as ${name1}`, t`Persona Changed`);
+    }

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

public/scripts/personas.js+24 -38 Viewed

 }, debounce_timeout.relaxed);
 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;
+    }

     saveSettingsDebounced();
+}
-async function bindUserNameToPersona(e) {
+async function bindUserNameToPersona() {
-    e?.stopPropagation();
+    const avatarId = user_avatar;
-    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
     if (!avatarId) {
         console.warn('No avatar id found');

         if (isCurrentPersona) {
             console.log(`Auto-updating user name to ${personaName}`);
             setUserName(personaName);
+            await updatePersonaNameIfExists(user_avatar, personaName);
+        }
     } else {
         // If the user clicked ok, but didn't enter a name, delete the persona

     saveSettingsDebounced();
     await getUserAvatars(true, avatarId);
     setPersonaDescription();
+    retriggerFirstMessageOnEmptyChat();
+}
 function selectCurrentPersona({ toastPersonaNameChange = true } = {}) {

+}
-async function deleteUserAvatar(e) {
+async function deleteUserAvatar() {
-    e?.stopPropagation();
+    const avatarId = user_avatar;
-    const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
     if (!avatarId) {
         console.warn('No avatar id found');
         return;
+    }
+    const confirm = await Popup.show.confirm(t`Delete Persona`,
-    if (avatarId == user_avatar) {
+        t`Are you sure you want to delete this avatar?` + '<br />' + t`All information associated with its linked persona will be lost.`);
-        console.warn(`User tried to delete their current avatar ${avatarId}`);
-        toastr.warning(t`You cannot delete the avatar you are currently using`, t`Persona 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');

@@ -1016,8 +1013,9 @@ async function deleteUserAvatar(e) {
1016	}	1013	}
1017		1014
1018	saveSettingsDebounced();	1015	saveSettingsDebounced();
1019	await getUserAvatars();	1016
1020	updatePersonaLockIcons();	1017	// Use the existing mechanism to re-render the persona list and choose the next persona here
		1018	await loadPersonaForCurrentChat({ doRender: true });
1021	}	1019	}
1022	}	1020	}
1023		1021

     $('#lock_persona_to_char i.icon').toggleClass('fa-unlock', !hasCharLock);
+}
-async function loadPersonaForCurrentChat() {
+async function loadPersonaForCurrentChat({ doRender = false } = {}) {
     // Cache persona list to check if they exist
-    const userAvatars = await getUserAvatars(false);
+    const userAvatars = await getUserAvatars(doRender);
     // Define a persona for this chat
     let chatPersona = '';

+}
 export function initPersonas() {
-    $(document).on('click', '.bind_user_name', bindUserNameToPersona);
     $(document).on('click', '.set_default_persona', toggleDefaultPersonaClicked);
-    $(document).on('click', '.delete_avatar', deleteUserAvatar);
+    $('#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'));

         retriggerFirstMessageOnEmptyChat();
     });
-    $('#your_name_button').click(async function () {
+    $('#persona_rename_button').click(async function () {
         const userName = String($('#your_name').val()).trim();
         setUserName(userName);
         await updatePersonaNameIfExists(user_avatar, userName);
         retriggerFirstMessageOnEmptyChat();
+        // TODO: Do both binding and/or rename?
+        //bindUserNameToPersona();
     });
     $(document).on('click', '#user_avatar_block .avatar_upload', function () {

         $('#avatar_upload_file').trigger('click');
     });
-    $(document).on('click', '#user_avatar_block .duplicate_persona', function (e) {
+    $('#persona_duplicate_button').on('click', () => duplicatePersona(user_avatar));
-        e.stopPropagation();
-        const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
-        if (!avatarId) {
-            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(avatarId);
+        $('#avatar_upload_overwrite').val(user_avatar);
         $('#avatar_upload_file').trigger('click');
     });

public/style.css+17 -16 Viewed

     filter: grayscale(0.5);
+}
+#persona_controls .persona_name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    white-space: nowrap;
+    margin-right: 10px;
+    font-size: calc(var(--mainFontSize) * 1.25);
+    color: var(--grey50);
+}
 input[type=search]::-webkit-search-cancel-button {
     -webkit-appearance: none;
     height: 1em;

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

@@ -3409,18 +3414,21 @@ grammarly-extension {
3409	flex-wrap: wrap;	3414	flex-wrap: wrap;
3410	}	3415	}
3411		3416
3412	.form_create_bottom_buttons_block .menu_button {	3417	.buttons_block .menu_button {
3413	display: flex;	3418	display: flex;
3414	justify-content: center;	3419	justify-content: center;
3415	align-items: center;	3420	align-items: center;
		3421	padding: 5px;
		3422	margin: 0;
		3423	filter: grayscale(0.5);
3416	}	3424	}
3417		3425
3418	#delete_button,	3426	.red_button,
3419	.redWarningBG {	3427	.redWarningBG {
3420	background-color: var(--crimson70a) !important;	3428	background-color: var(--crimson70a) !important;
3421	}	3429	}
3422		3430
3423	#delete_button:hover,	3431	.red_button:hover,
3424	.redWarningBG:hover {	3432	.redWarningBG:hover {
3425	background-color: var(--fullred) !important;	3433	background-color: var(--fullred) !important;
3426	}	3434	}

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