Add configurable welcome screen recent chats, fix pin loss on rename, and add popup number input validation (#5436) * Add configurable recent chats settings and fix pin loss on chat rename - Add gear icon button to welcome screen header for settings - Settings popup with Max recent chats (default: 15) and Collapsed recent chats (default: 3) options - Settings stored in accountStorage as 'recentChatsSettings' - Add PinnedChatsManager.rename() to migrate pin state when chats are renamed - Call rename() from both character and group chat rename functions Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/99fa84c4-a82b-4253-96ff-a0621fb63f5c Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Fix pin rename: use file_name with .jsonl extension to match stored pin keys The data-file attribute contains chat_name (without .jsonl), but PinnedChatsManager stores keys using file_name (with .jsonl). Append .jsonl to both old and new names when calling PinnedChatsManager.rename() in character and group chat rename functions. Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/c8e4f720-1d0b-49ef-b57b-ba9d85c42d4f Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Refactor to support number inputs * Restore package-lock * Use clamp() from utils.js instead of manual Math.min/Math.max Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/1669884c-1bd3-4b60-808d-5610f24838e6 Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Revert unintended package-lock.json changes Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/1669884c-1bd3-4b60-808d-5610f24838e6 Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Use input values instead of magic numbers * Add auto-clamping on number inputs in popups and range placeholders in welcome-screen settings Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/9af8ad07-77bc-46db-9ec6-0030fecf0f8d Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Use constants for min/max chat limits to avoid hardcoded duplication in tooltips Agent-Logs-Url: https://github.com/SillyTavern/SillyTavern/sessions/9af8ad07-77bc-46db-9ec6-0030fecf0f8d Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com> * Improve input validation by using Number.isFinite for min/max values in Popup class --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Cohee1207 <18619528+Cohee1207@users.noreply.github.com>

ff10249ab5ef7accac43815ae24b67877b3ce008

Copilot <198982749+Copilot@users.noreply.github.com>

Signed

Parents: 64e8c8d964c74b72b421ed06f1d5706713edb804

public/css/welcome.css+1 -0 Viewed

 .welcomePanel.recentHidden .welcomeRecent,
 .welcomePanel.recentHidden .recentChatsTitle,
 .welcomePanel.recentHidden .hideRecentChats,
+.welcomePanel.recentHidden .recentChatsSettings,
 .welcomePanel:not(.recentHidden) .showRecentChats {
     display: none;
+}

public/scripts/popup.js+45 -4 Viewed

 import { shouldSendOnEnter } from './RossAscends-mods.js';
 import { t } from './i18n.js';
 import { power_user, toastPositionClasses } from './power-user.js';
-import { removeFromArray, runAfterAnimation, uuidv4 } from './utils.js';
+import { clamp, removeFromArray, runAfterAnimation, uuidv4 } from './utils.js';
 /** @readonly */
 /** @enum {Number} */

  * @property {string} label - The label text for the input
  * @property {string?} [tooltip=null] - Optional tooltip to be displayed. Default placeholder in input controls, tooltip icon behind the checkbox for those.
  * @property {boolean|string|undefined} [defaultState=false] - The default state when opening the popup (false if not set)
- * @property {('checkbox'|'text'|'textarea')?} [type='checkbox'] - The type of the input (default is checkbox)
+ * @property {('checkbox'|'text'|'textarea'|'number')?} [type='checkbox'] - The type of the input (default is checkbox)
  * @property {number?} [rows=1] - The number of rows for the input field, if the input is 'textarea'
+ * @property {number?} [min] - The minimum value for number inputs
+ * @property {number?} [max] - The maximum value for number inputs
+ * @property {number?} [step] - The step value for number inputs
  */
 /**

                 label.appendChild(inputElement);
                 this.inputControls.appendChild(label);
+            } else if (input.type === 'number') {
+                const label = document.createElement('label');
+                label.classList.add('text_label', 'justifyCenter');
+                label.setAttribute('for', input.id);
+                const inputElement = document.createElement('input');
+                inputElement.classList.add('text_pole', 'result-control');
+                inputElement.type = 'number';
+                inputElement.id = input.id;
+                inputElement.value = String(input.defaultState ?? '');
+                inputElement.placeholder = input.tooltip ?? '';
+                inputElement.min = String(input.min ?? '');
+                inputElement.max = String(input.max ?? '');
+                inputElement.step = String(input.step ?? '');
+                setTitleFromTooltip(inputElement, input.tooltip);
+                inputElement.addEventListener('change', () => {
+                    const value = parseFloat(inputElement.value);
+                    if (isNaN(value)) return;
+                    const min = Number.isFinite(input.min) ? input.min : -Infinity;
+                    const max = Number.isFinite(input.max) ? input.max : Infinity;
+                    const clamped = clamp(value, min, max);
+                    if (clamped !== value) {
+                        inputElement.value = String(clamped);
+                        toastr.warning(t`Value must be between ${min} and ${max}. Clamped to ${clamped}.`);
+                    }
+                });
+                const labelText = document.createElement('span');
+                labelText.innerText = input.label;
+                labelText.dataset.i18n = input.label;
+                label.appendChild(labelText);
+                label.appendChild(inputElement);
+                this.inputControls.appendChild(label);
             } else {
-                console.warn('Unknown custom input type. Only checkbox, text and textarea are supported.', input);
+                console.warn('Unknown custom input type. Only checkbox, text, number and textarea are supported.', input);
                 return;
+            }
         });

             this.inputResults = new Map(this.customInputs.map(input => {
                 /** @type {HTMLInputElement} */
                 const inputControl = this.dlg.querySelector(`#${input.id}`);
-                const value = ['text', 'textarea'].includes(input.type) ? inputControl.value : inputControl.checked;
+                const value = ['text', 'textarea', 'number'].includes(input.type) ? inputControl.value : inputControl.checked;
                 return [inputControl.id, value];
             }));
+        }

public/scripts/templates/welcomePanel.html+3 -0 Viewed

         <div class="mes_button showRecentChats" title="Show recent chats" data-i18n="[title]Show recent chats">
             <i class="fa-solid fa-circle-chevron-down fa-fw fa-lg"></i>
         </div>
+        <div class="mes_button recentChatsSettings" title="Recent chats settings" data-i18n="[title]Recent chats settings">
+            <i class="fa-solid fa-gear fa-fw fa-lg"></i>
+        </div>
         <div class="mes_button hideRecentChats" title="Hide recent chats" data-i18n="[title]Hide recent chats">
             <i class="fa-solid fa-circle-xmark fa-fw fa-lg"></i>
         </div>

public/scripts/welcome-screen.js+121 -6 Viewed

 import { getMessageTimeStamp } from './RossAscends-mods.js';
 import { renderTemplateAsync } from './templates.js';
 import { accountStorage } from './util/AccountStorage.js';
-import { flashHighlight, isElementInViewport, sortMoments, timestampToMoment } from './utils.js';
+import { clamp, flashHighlight, isElementInViewport, sortMoments, timestampToMoment } from './utils.js';
 const assistantAvatarKey = 'assistant';
 const pinnedChatsKey = 'pinnedChats';
+const recentChatsSettingsKey = 'recentChatsSettings';
 const defaultAssistantAvatar = 'default_Assistant.png';
-const DEFAULT_DISPLAYED = 3;
+const DEFAULT_MAX_DISPLAYED = 15;
-const MAX_DISPLAYED = 15;
+const DEFAULT_COLLAPSED_DISPLAYED = 3;
+/**
+ * Gets the current recent chats settings from account storage.
+ * @returns {{ maxDisplayed: number, collapsedDisplayed: number }}
+ */
+function getRecentChatsSettings() {
+    const value = accountStorage.getItem(recentChatsSettingsKey);
+    if (value) {
+        try {
+            const parsed = JSON.parse(value);
+            return {
+                maxDisplayed: Math.max(1, parseInt(parsed.maxDisplayed) || DEFAULT_MAX_DISPLAYED),
+                collapsedDisplayed: Math.max(1, parseInt(parsed.collapsedDisplayed) || DEFAULT_COLLAPSED_DISPLAYED),
+            };
+        } catch {
+            // Ignore parse errors
+        }
+    }
+    return { maxDisplayed: DEFAULT_MAX_DISPLAYED, collapsedDisplayed: DEFAULT_COLLAPSED_DISPLAYED };
+}
+/**
+ * Saves recent chats settings to account storage.
+ * @param {{ maxDisplayed: number, collapsedDisplayed: number }} settings
+ */
+function saveRecentChatsSettings(settings) {
+    accountStorage.setItem(recentChatsSettingsKey, JSON.stringify(settings));
+}
 /**
  * @typedef {Pick<RecentChat, 'group' | 'avatar' | 'file_name'>} PinnedChat

     /**
      * Generates a key for pinned chat storage.
-     * @param {RecentChat} recentChat Recent chat data
+     * @param {Partial<RecentChat>} recentChat Recent chat data
      * @returns {string} Key for pinned chat storage
      */
     static getKey(recentChat) {

+    }
     /**
+     * Migrates pinned state when a chat is renamed.
+     * @param {Partial<RecentChat>} recentChat Recent chat data (with original file_name)
+     * @param {string} newFileName New file name after rename
+     */
+    static rename(recentChat, newFileName) {
+        const oldKey = this.getKey(recentChat);
+        const pinState = { ...this.getState() };
+        if (!(oldKey in pinState)) {
+            return;
+        }
+        const updatedChat = { ...recentChat, file_name: newFileName };
+        const newKey = this.getKey(updatedChat);
+        pinState[newKey] = {
+            group: recentChat.group,
+            avatar: recentChat.avatar,
+            file_name: newFileName,
+        };
+        delete pinState[oldKey];
+        this.#saveState(pinState);
+    }
+    /**
      * Gets all pinned chats.
      * @returns {PinnedChat[]}
      */

                     accountStorage.setItem(recentHiddenKey, 'true');
                 });
             });
+            root.querySelectorAll('.recentChatsSettings').forEach((button) => {
+                button.addEventListener('click', async (event) => {
+                    event.stopPropagation();
+                    await openRecentChatsSettingsPopup();
+                });
+            });
         });
         fragment.querySelectorAll('.recentChat').forEach((item) => {
             item.addEventListener('click', () => {

             newFileName: newName,
             loader: false,
         });
+        PinnedChatsManager.rename({ avatar: avatarId, group: '', file_name: fileName }, newName);
         await updateRemoteChatName(characterId, newName);
         await refreshWelcomeScreen();
         toastr.success(t`Chat renamed.`);

             newFileName: String(newName),
             loader: false,
         });
+        PinnedChatsManager.rename({ avatar: '', group: groupId, file_name: fileName }, String(newName));
         await refreshWelcomeScreen();
         toastr.success(t`Group chat renamed.`);
     } catch (error) {

+}
 /**
+ * Opens a popup to configure recent chats settings.
+ */
+async function openRecentChatsSettingsPopup() {
+    const settings = getRecentChatsSettings();
+    const MIN_CHATS = 1;
+    const MAX_CHATS = 1000;
+    /** @type {import('./popup.js').CustomPopupInput} */
+    const maxRecentChatsInput = {
+        id: 'maxRecentChats',
+        type: 'number',
+        label: t`Max recent chats`,
+        tooltip: t`${MIN_CHATS} - ${MAX_CHATS}`,
+        defaultState: String(settings.maxDisplayed),
+        min: MIN_CHATS,
+        max: MAX_CHATS,
+        step: 1,
+    };
+    /** @type {import('./popup.js').CustomPopupInput} */
+    const collapsedRecentChatsInput = {
+        id: 'collapsedRecentChats',
+        type: 'number',
+        label: t`Collapsed recent chats`,
+        tooltip: t`${MIN_CHATS} - ${MAX_CHATS}`,
+        defaultState: String(settings.collapsedDisplayed),
+        min: MIN_CHATS,
+        max: MAX_CHATS,
+        step: 1,
+    };
+    await callGenericPopup(t`Recent Chats Settings`, POPUP_TYPE.CONFIRM, null, {
+        okButton: t`Save`,
+        cancelButton: t`Cancel`,
+        customInputs: [maxRecentChatsInput, collapsedRecentChatsInput],
+        onClose: (popup) => {
+            if (!popup.result) {
+                return;
+            }
+            const maxInputValue = popup.inputResults.get(maxRecentChatsInput.id)?.toString() ?? String(DEFAULT_MAX_DISPLAYED);
+            const collapsedInputValue = popup.inputResults.get(collapsedRecentChatsInput.id)?.toString() ?? String(DEFAULT_COLLAPSED_DISPLAYED);
+            const newMax = clamp(parseInt(maxInputValue) || DEFAULT_MAX_DISPLAYED, maxRecentChatsInput.min, maxRecentChatsInput.max);
+            const newCollapsed = clamp(parseInt(collapsedInputValue) || DEFAULT_COLLAPSED_DISPLAYED, collapsedRecentChatsInput.min, newMax);
+            saveRecentChatsSettings({ maxDisplayed: newMax, collapsedDisplayed: newCollapsed });
+        },
+    });
+    await refreshWelcomeScreen();
+}
+/**
  * Gets the list of recent chats from the server.
  * @returns {Promise<RecentChat[]>} List of recent chats
+ *

  * @property {boolean} pinned Indicates if the chat is pinned
  */
 async function getRecentChats() {
+    const settings = getRecentChatsSettings();
     const response = await fetch('/api/chats/recent', {
         method: 'POST',
         headers: getRequestHeaders(),
-        body: JSON.stringify({ max: MAX_DISPLAYED, pinned: PinnedChatsManager.getAll() }),
+        body: JSON.stringify({ max: settings.maxDisplayed, pinned: PinnedChatsManager.getAll() }),
         cache: 'no-cache',
     });

         chat.chat_name = chat.file_name.replace('.jsonl', '');
         chat.char_thumbnail = character ? getThumbnailUrl('avatar', character.avatar) : system_avatar;
         chat.is_group = !!group;
-        chat.hidden = index >= DEFAULT_DISPLAYED;
+        chat.hidden = index >= settings.collapsedDisplayed;
         chat.avatar = chat.avatar || '';
         chat.group = chat.group || '';
         chat.pinned = PinnedChatsManager.isPinned(chat);