Merge remote-tracking branch 'upstream/staging' into quad-sample

public/css/toggle-dependent.css

@@ -36,7 +36,8 @@ body.charListGrid #rm_print_characters_block {
 }
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select,
-body.charListGrid #rm_print_characters_block .character_select {
+body.charListGrid #rm_print_characters_block .character_select,
+#user_avatar_block.gridView .avatar-container {
     width: 30%;
     align-items: flex-start;
     height: min-content;
@@ -47,7 +48,8 @@ body.charListGrid #rm_print_characters_block .character_select {
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select .ch_name,
 body.charListGrid #rm_print_characters_block .character_select .ch_name,
-body.charListGrid #rm_print_characters_block .group_select .ch_name {
+body.charListGrid #rm_print_characters_block .group_select .ch_name,
+#user_avatar_block.gridView .avatar-container .ch_name {
     width: 100%;
     max-width: 100px;
     text-align: center;
@@ -55,12 +57,20 @@ body.charListGrid #rm_print_characters_block .group_select .ch_name {
 }
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select .character_name_block,
-body.charListGrid #rm_print_characters_block .character_select .character_name_block {
+body.charListGrid #rm_print_characters_block .character_select .character_name_block,
+#user_avatar_block.gridView .avatar-container .character_name_block {
     width: 100%;
+    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 .character_select .character_select_container,
+#user_avatar_block.gridView .avatar-container .character_select_container {
     width: 100%;
     justify-content: center;
     max-width: 100px;
@@ -83,13 +93,15 @@ body.charListGrid #rm_print_characters_block .bogus_folder_counter_block,
 body.charListGrid #rm_print_characters_block .ch_description,
 body.charListGrid #rm_print_characters_block .tags_inline,
 body.charListGrid #rm_print_characters_block .character_version,
-body.charListGrid #rm_print_characters_block .ch_avatar_url {
+body.charListGrid #rm_print_characters_block .ch_avatar_url,
+#user_avatar_block.gridView .avatar-container .ch_description {
     display: none;
 }
 
 /*big avatars mode page-wide changes*/
 
-body.big-avatars .character_select .avatar {
+body.big-avatars .character_select .avatar,
+body.big-avatars .bogus_folder_select .avatar {
     flex: unset;
 }
 
@@ -149,7 +161,7 @@ body.big-avatars .avatar_collage {
 }
 
 body.big-avatars .ch_description,
-.avatar-container .ch_description {
+body.big-avatars .avatar-container .ch_description {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;

public/index.html

@@ -1294,6 +1294,7 @@
                                         </div>
                                     -->
                                     <div data-newbie-hidden data-tg-type="ooba, koboldcpp, llamacpp" name="dynaTempBlock" class="wide100p">
+                                    <div data-newbie-hidden data-tg-type="ooba, koboldcpp, tabby, llamacpp" name="dynaTempBlock" class="wide100p">
                                         <h4 class="wide100p textAlignCenter" data-i18n="DynaTemp">
                                             <div class="flex-container alignitemscenter" style="justify-content: center;">
                                                 <div class="checkbox_label" for="dynatemp_textgenerationwebui">
@@ -3666,7 +3667,7 @@
                         </div>
                     </div>
                     <div id="persona-management-block" class="flex-container wide100p flexGap10">
-                        <div class="flex1">
+                        <div class="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>
@@ -3674,6 +3675,7 @@
                                 </div>
                                 <input id="persona_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="100">
                                 <div id="persona_pagination_container" class="flex1"></div>
+                                <i id="persona_grid_toggle" class="fa-solid fa-table-cells-large menu_button" title="Toggle grid view"></i>
                             </div>
                             <div id="user_avatar_block">
                                 <div class="avatar_upload">+</div>
@@ -5336,7 +5338,7 @@
         <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
     </div>
     <div id="user_avatar_template" class="template_element">
-        <div class="avatar-container wide100p">
+        <div class="avatar-container">
             <div imgfile="" class="avatar">
                 <img src="" alt="User Avatar">
             </div>

public/script.js

@@ -821,7 +821,7 @@ async function firstLoadInit() {
     await readSecretState();
     await getClientVersion();
     await getSettings();
-    await getUserAvatars();
+    await getUserAvatars(true, user_avatar);
     await getCharacters();
     await getBackgrounds();
     await initTokenizers();
@@ -5400,9 +5400,10 @@ function changeMainAPI() {
 /**
  * Gets a list of user avatars.
  * @param {boolean} doRender Whether to render the list
+ * @param {string} openPageAt Item to be opened at
  * @returns {Promise<string[]>} List of avatar file names
  */
-export async function getUserAvatars(doRender = true) {
+export async function getUserAvatars(doRender = true, openPageAt = '') {
     const response = await fetch('/getuseravatars', {
         method: 'POST',
         headers: getRequestHeaders(),
@@ -5418,10 +5419,11 @@ export async function getUserAvatars(doRender = true) {
 
         const storageKey = 'Personas_PerPage';
         const listId = '#user_avatar_block';
+        const perPage = Number(localStorage.getItem(storageKey)) || 5;
 
         $('#persona_pagination_container').pagination({
             dataSource: entities,
-            pageSize: Number(localStorage.getItem(storageKey)) || 5,
+            pageSize: perPage,
             sizeChangerOptions: [5, 10, 25, 50, 100, 250, 500, 1000],
             pageRange: 1,
             pageNumber: savePersonasPage || 1,
@@ -5450,6 +5452,15 @@ export async function getUserAvatars(doRender = true) {
             },
         });
 
+        if (openPageAt) {
+            const avatarIndex = entities.indexOf(openPageAt);
+            const page = Math.floor(avatarIndex / perPage) + 1;
+
+            if (avatarIndex !== -1) {
+                $('#persona_pagination_container').pagination('go', page);
+            }
+        }
+
         return allEntities;
     }
 }
@@ -5563,7 +5574,7 @@ async function uploadUserAvatar(e) {
             }
 
             crop_data = undefined;
-            await getUserAvatars();
+            await getUserAvatars(true, name || data.path);
         },
         error: (jqXHR, exception) => { },
     });

public/scripts/personas.js

@@ -21,6 +21,13 @@ import { persona_description_positions, power_user } from './power-user.js';
 import { getTokenCount } from './tokenizers.js';
 import { debounce, delay, download, parseJsonFile } from './utils.js';
 
+const GRID_STORAGE_KEY = 'Personas_GridView';
+
+function switchPersonaGridView() {
+    const state = localStorage.getItem(GRID_STORAGE_KEY) === 'true';
+    $('#user_avatar_block').toggleClass('gridView', state);
+}
+
 /**
  * Uploads an avatar file to the server
  * @param {string} url URL for the avatar file
@@ -47,7 +54,7 @@ async function uploadUserAvatar(url, name) {
         contentType: false,
         processData: false,
         success: async function () {
-            await getUserAvatars();
+            await getUserAvatars(true, name);
         },
     });
 }
@@ -157,7 +164,7 @@ export async function convertCharacterToPersona(characterId = null) {
     toastr.success(`You can now select ${name} as a persona in the Persona Management menu.`, 'Persona Created');
 
     // Refresh the persona selector
-    await getUserAvatars();
+    await getUserAvatars(true, overwriteName);
     // Reload the persona description
     setPersonaDescription();
 }
@@ -202,7 +209,7 @@ export function autoSelectPersona(name) {
 export async function updatePersonaNameIfExists(avatarId, newName) {
     if (avatarId in power_user.personas) {
         power_user.personas[avatarId] = newName;
-        await getUserAvatars();
+        await getUserAvatars(true, avatarId);
         saveSettingsDebounced();
         console.log(`Updated persona name for ${avatarId} to ${newName}`);
     } else {
@@ -256,7 +263,7 @@ async function bindUserNameToPersona(e) {
     }
 
     saveSettingsDebounced();
-    await getUserAvatars();
+    await getUserAvatars(true, avatarId);
     setPersonaDescription();
 }
 
@@ -479,7 +486,7 @@ async function setDefaultPersona(e) {
     }
 
     saveSettingsDebounced();
-    await getUserAvatars();
+    await getUserAvatars(true, avatarId);
 }
 
 function updateUserLockIcon() {
@@ -633,6 +640,11 @@ export function initPersonas() {
     $('#personas_backup').on('click', onBackupPersonas);
     $('#personas_restore').on('click', () => $('#personas_restore_input').trigger('click'));
     $('#personas_restore_input').on('change', onPersonasRestoreInput);
+    $('#persona_grid_toggle').on('click', () => {
+        const state = localStorage.getItem(GRID_STORAGE_KEY) === 'true';
+        localStorage.setItem(GRID_STORAGE_KEY, String(!state));
+        switchPersonaGridView();
+    });
 
     eventSource.on('charManagementDropdown', (target) => {
         if (target === 'convert_to_persona') {
@@ -640,4 +652,5 @@ export function initPersonas() {
         }
     });
     eventSource.on(event_types.CHAT_CHANGED, setChatLockedPersona);
+    switchPersonaGridView();
 }

public/style.css

@@ -1521,6 +1521,10 @@ select option:not(:checked) {
     height: auto;
 }
 
+#persona_search_bar {
+    min-width: 80px;
+}
+
 input[type=search]::-webkit-search-cancel-button {
     -webkit-appearance: none;
     height: 1em;
@@ -1586,10 +1590,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 /*applies to both groups and solos chars in the char list*/
-#rm_print_characters_block .ch_name {
+#rm_print_characters_block .ch_name,
+.avatar-container .ch_name {
     flex: 1;
     white-space: nowrap;
-    /* max-width: calc(100% - 29px); */
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
@@ -1828,6 +1832,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
     border-radius: 10px;
     cursor: pointer;
     margin-bottom: 1px;
+    width: 100%;
+    outline: 2px solid transparent;
+    border: 2px solid transparent;
 }
 
 grammarly-extension {
@@ -2272,7 +2279,7 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
 #user_avatar_block {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-evenly;
+    justify-content: space-around;
 }
 
 .avatar-container .avatar {
@@ -2284,11 +2291,6 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
     outline: 2px solid transparent;
 }
 
-.avatar-container {
-    outline: 2px solid transparent;
-    border: 2px solid transparent;
-}
-
 .avatar-container.selected {
     border: 2px solid rgba(255, 255, 255, 0.7);
 }

src/endpoints/translate.js

@@ -19,6 +19,10 @@ router.post('/libre', jsonParser, async (request, response) => {
         return response.sendStatus(400);
     }
 
+    if (request.body.lang === 'zh-CN' || request.body.lang === 'zh-TW') {
+        request.body.lang = 'zh';
+    }
+
     const text = request.body.text;
     const lang = request.body.lang;