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
4 files changed, +60 -71Ignore whitespace
public/index.html+17 -15
@@ -4957,14 +4957,16 @@
49574957 <div class="persona_management_current_persona">
49584958 <h4 class="standoutHeader" data-i18n="Current Persona">Current Persona</h4>
49594959
4960- <h4 data-i18n="Name">Name</h4>
4960+ <div id="persona_controls" class="flex-container">
4961- <div class="change_name">
4961+ <h5 id="your_name" class="persona_name">[Persona Name]</h5>
4962- <input id="your_name" name="your_name" data-i18n="[placeholder]Enter your name" placeholder="Enter your name" class="text_pole wide100p" value="" autocomplete="off">
4962+ <div class="persona_controls_buttons_block buttons_block">
49634963 <div id="your_name_buttonpersona_rename_button" class="menu_button fa-solid fa-checkpencil" title="ClickRename toPersona set/ aBind newName UserTo NameAvatar" data-i18n="[title]ClickRename toPersona set/ aBind newName UserTo NameAvatar"></div>
4964- </div>
4964+ <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>
49654965 <div id="sync_name_buttonpersona_lore_button" class="menu_button fa-solid fa-syncglobe" title="Persona Lore&#10;Alt+Click to set user name foropen allthe messageslorebook" data-i18n="[title]Click toPersona setLore userAlt+Click nameto foropen allthe messageslorebook"></div>
4966- </div>
4966+
49674967 <div id="persona_lore_buttonpersona_set_image_button" class="menu_button fa-solid fa-globeimage" title="Persona Lore&#10;Alt+Click to openChange thePersona lorebookImage" data-i18n="[title]Persona Lore Alt+Click to openChange thePersona lorebookImage"></div>
4968+ <div id="persona_duplicate_button" class="menu_button fa-solid fa-clone" title="Duplicate Persona" data-i18n="[title]Duplicate Persona"></div>
4969+ <div id="persona_delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Persona" data-i18n="[title]Delete Persona"></div>
49684970 </div>
49694971 </div>
49704972
@@ -5109,13 +5111,13 @@
51095111 </div>
51105112 </div>
51115113 <div class="flex-container flexFlowColumn expander flexNoGap">
51125114 <div id="avatar_div" class="avatar_div buttons_block alignitemsflexstart justifySpaceBetween flexnowrap">
51135115 <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">
51145116 <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
51155117 <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
51165118 </label>
51175119 <div class="flex-container" id="avatar_controls">
51185120 <div class="form_create_bottom_buttons_block buttons_block">
51195121 <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
51205122 <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
51215123 <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
@@ -5131,7 +5133,7 @@
51315133 <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
51325134 <input type="submit" id="create_button" name="create_button">
51335135 </label>
51345136 <div id="delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Character" data-i18n="[title]Delete Character"></div>
51355137 </div>
51365138 <label class="flex1 height100p" for="char-management-dropdown">
51375139 <select id="char-management-dropdown" class="text_pole">
@@ -5469,23 +5471,23 @@
54695471 <div class="wide100p character_name_block">
54705472 <span class="ch_name flex1"></span>
54715473 <div class="avatar-buttons">
54725474 <!-- <button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
54735475 <i class="fa-fw fa-solid fa-user-edit fa-sm"></i>
54745476 </button>
54755477 <button class="menu_button set_persona_image" title="Change persona image" data-i18n="[title]Change persona image">
54765478 <i class="fa-fw fa-solid fa-image fa-sm"></i>
54775479 </button>
5478- <!--
5480+
54795481 <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.">
54805482 <i class="fa-fw fa-solid fa-crown fa-sm"></i>
54815483 </button>
5482- -->
5484+
54835485 <button class="menu_button duplicate_persona" title="Duplicate persona" data-i18n="[title]Duplicate persona">
54845486 <i class="fa-fw fa-solid fa-clone fa-sm"></i>
54855487 </button>
54865488 <button class="menu_button delete_avatar" title="Delete persona" data-i18n="[title]Delete persona">
54875489 <i class="fa-fw fa-solid fa-trash-alt fa-sm"></i>
54885490 </button> -->
54895491 </div>
54905492 </div>
54915493 <div class="ch_description"></div>
public/script.js+2 -2
@@ -6810,7 +6810,7 @@ export function setUserName(value, { toastPersonaNameChange = true } = {}) {
68106810 if (name1 === undefined || name1 == '')
68116811 name1 = default_user_name;
68126812 console.log(`User name changed to ${name1}`);
68136813 $('#your_name').valtext(name1);
68146814 if (toastPersonaNameChange && power_user.persona_show_notifications) {
68156815 toastr.success(t`Your messages will now be sent as ${name1}`, t`Persona Changed`);
68166816 }
@@ -6864,7 +6864,7 @@ export async function getSettings() {
68646864 settings = JSON.parse(data.settings);
68656865 if (settings.username !== undefined && settings.username !== '') {
68666866 name1 = settings.username;
68676867 $('#your_name').valtext(name1);
68686868 }
68696869
68706870 await setUserControls(data.enable_accounts);
public/scripts/personas.js+24 -38
@@ -466,6 +466,8 @@ const countPersonaDescriptionTokens = debounce(async () => {
466466}, debounce_timeout.relaxed);
467467
468468export function setPersonaDescription() {
469+ $('#your_name').text(name1);
470+
469471 if (power_user.persona_description_position === persona_description_positions.AFTER_CHAR) {
470472 power_user.persona_description_position = persona_description_positions.IN_PROMPT;
471473 }
@@ -674,9 +676,8 @@ async function updatePersonaNameIfExists(avatarId, newName) {
674676 saveSettingsDebounced();
675677}
676678
677679async function bindUserNameToPersona(e) {
678- e?.stopPropagation();
680+ const avatarId = user_avatar;
679- const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
680681
681682 if (!avatarId) {
682683 console.warn('No avatar id found');
@@ -719,6 +720,7 @@ async function bindUserNameToPersona(e) {
719720 if (isCurrentPersona) {
720721 console.log(`Auto-updating user name to ${personaName}`);
721722 setUserName(personaName);
723+ await updatePersonaNameIfExists(user_avatar, personaName);
722724 }
723725 } else {
724726 // If the user clicked ok, but didn't enter a name, delete the persona
@@ -730,6 +732,8 @@ async function bindUserNameToPersona(e) {
730732 saveSettingsDebounced();
731733 await getUserAvatars(true, avatarId);
732734 setPersonaDescription();
735+
736+ retriggerFirstMessageOnEmptyChat();
733737}
734738
735739function selectCurrentPersona({ toastPersonaNameChange = true } = {}) {
@@ -969,22 +973,15 @@ async function lockPersona(type = 'chat') {
969973}
970974
971975
972976async function deleteUserAvatar(e) {
973- e?.stopPropagation();
977+ const avatarId = user_avatar;
974- const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
975978
976979 if (!avatarId) {
977980 console.warn('No avatar id found');
978981 return;
979982 }
980-
983+ const confirm = await Popup.show.confirm(t`Delete Persona`,
981- if (avatarId == user_avatar) {
984+ t`Are you sure you want to delete this avatar?` + '<br />' + t`All information associated with its linked persona will be lost.`);
982- console.warn(`User tried to delete their current avatar ${avatarId}`);
983- toastr.warning(t`You cannot delete the avatar you are currently using`, t`Persona Warning`);
984- return;
985- }
986-
987- 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.`);
988985
989986 if (!confirm) {
990987 console.debug('User cancelled deleting avatar');
@@ -1016,8 +1013,9 @@ async function deleteUserAvatar(e) {
10161013 }
10171014
10181015 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 });
10211019 }
10221020}
10231021
@@ -1237,9 +1235,9 @@ function updatePersonaLockIcons() {
12371235 $('#lock_persona_to_char i.icon').toggleClass('fa-unlock', !hasCharLock);
12381236}
12391237
12401238async function loadPersonaForCurrentChat({ doRender = false } = {}) {
12411239 // Cache persona list to check if they exist
12421240 const userAvatars = await getUserAvatars(falsedoRender);
12431241
12441242 // Define a persona for this chat
12451243 let chatPersona = '';
@@ -1500,9 +1498,8 @@ async function duplicatePersona(avatarId) {
15001498}
15011499
15021500export function initPersonas() {
1503- $(document).on('click', '.bind_user_name', bindUserNameToPersona);
15041501 $(document).on('click', '.set_default_persona', toggleDefaultPersonaClicked);
15051502 $(document'#persona_delete_button').on('click', '.delete_avatar', deleteUserAvatar);
15061503 $('#lock_persona_default').on('click', () => togglePersonaLock('default'));
15071504 $('#lock_user_name').on('click', () => togglePersonaLock('chat'));
15081505 $('#lock_persona_to_char').on('click', () => togglePersonaLock('character'));
@@ -1548,11 +1545,13 @@ export function initPersonas() {
15481545 retriggerFirstMessageOnEmptyChat();
15491546 });
15501547
15511548 $('#your_name_buttonpersona_rename_button').click(async function () {
15521549 const userName = String($('#your_name').val()).trim();
15531550 setUserName(userName);
15541551 await updatePersonaNameIfExists(user_avatar, userName);
15551552 retriggerFirstMessageOnEmptyChat();
1553+ // TODO: Do both binding and/or rename?
1554+ //bindUserNameToPersona();
15561555 });
15571556
15581557 $(document).on('click', '#user_avatar_block .avatar_upload', function () {
@@ -1560,28 +1559,15 @@ export function initPersonas() {
15601559 $('#avatar_upload_file').trigger('click');
15611560 });
15621561
15631562 $(document'#persona_duplicate_button').on('click', '#user_avatar_block .duplicate_persona',() function=> duplicatePersona(euser_avatar) {);
1564- e.stopPropagation();
1565- const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
1566-
1567- if (!avatarId) {
1568- console.log('no imgfile');
1569- return;
1570- }
1571-
1572- duplicatePersona(avatarId);
1573- });
1574-
1575- $(document).on('click', '#user_avatar_block .set_persona_image', function (e) {
1576- e.stopPropagation();
1577- const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
15781563
1579- if (!avatarId) {
1564+ $('#persona_set_image_button').on('click', function () {
1565+ if (!user_avatar) {
15801566 console.log('no imgfile');
15811567 return;
15821568 }
15831569
15841570 $('#avatar_upload_overwrite').val(avatarIduser_avatar);
15851571 $('#avatar_upload_file').trigger('click');
15861572 });
15871573
public/style.css+17 -16
@@ -2919,6 +2919,16 @@ select option:not(:checked) {
29192919 filter: grayscale(0.5);
29202920}
29212921
2922+#persona_controls .persona_name {
2923+ text-overflow: ellipsis;
2924+ overflow: hidden;
2925+ text-align: left;
2926+ white-space: nowrap;
2927+ margin-right: 10px;
2928+ font-size: calc(var(--mainFontSize) * 1.25);
2929+ color: var(--grey50);
2930+}
2931+
29222932input[type=search]::-webkit-search-cancel-button {
29232933 -webkit-appearance: none;
29242934 height: 1em;
@@ -3395,12 +3405,7 @@ grammarly-extension {
33953405 cursor: pointer;
33963406}
33973407
33983408#rm_characters_block .form_create_bottom_buttons_blockbuttons_block {
3399- justify-content: space-evenly !important;
3400- flex-grow: 0;
3401-}
3402-
3403-.form_create_bottom_buttons_block {
34043409 display: flex;
34053410 flex: 1;
34063411 gap: 5px;
@@ -3409,18 +3414,21 @@ grammarly-extension {
34093414 flex-wrap: wrap;
34103415}
34113416
34123417.form_create_bottom_buttons_blockbuttons_block .menu_button {
34133418 display: flex;
34143419 justify-content: center;
34153420 align-items: center;
3421+ padding: 5px;
3422+ margin: 0;
3423+ filter: grayscale(0.5);
34163424}
34173425
3418-#delete_button,
3426+.red_button,
34193427.redWarningBG {
34203428 background-color: var(--crimson70a) !important;
34213429}
34223430
34233431#delete_button.red_button:hover,
34243432.redWarningBG:hover {
34253433 background-color: var(--fullred) !important;
34263434}
@@ -3614,13 +3622,6 @@ grammarly-extension {
36143622 min-width: calc(1.25em + 12px);
36153623}
36163624
3617-.avatar_div .menu_button,
3618-.form_create_bottom_buttons_block .menu_button {
3619- padding: 5px;
3620- margin: 0;
3621- filter: grayscale(0.5);
3622-}
3623-
36243625.menu_button:hover,
36253626.menu_button.active {
36263627 background-color: var(--white30a);