Merge branch 'staging' into connection-manager

public/index.html

@@ -1916,17 +1916,26 @@
                         <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <div id="kobold_horde_block">
                                 <ul>
-                                    <li data-i18n="Avoid sending sensitive information to the Horde.">
+                                    <li>
-                                        Avoid sending sensitive information to the Horde.
+                                        <a target="_blank" href="https://aihorde.net/" data-i18n="KoboldAI Horde Website">
-                                        <a target="_blank" href="https://docs.sillytavern.app/usage/api-connections/horde/" data-i18n="Review the Privacy statement">Review the Privacy statement</a>
+                                            KoboldAI Horde Website
+                                        </a>
                                     </li>
                                     <li>
-                                        <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register a Horde account for faster queue times">Register a Horde
+                                        <span data-i18n="Avoid sending sensitive information to the Horde.">Avoid sending sensitive information to the Horde.</span>
-                                            account for faster queue times</a>
+                                        <a target="_blank" href="https://docs.sillytavern.app/usage/api-connections/horde/" data-i18n="Review the Privacy statement">
+                                            Review the Privacy statement
+                                        </a>
                                     </li>
                                     <li>
-                                        <a target="_blank" href="https://github.com/Haidra-Org/horde-worker-reGen?tab=readme-ov-file#ai-horde-worker-regen" data-i18n="Learn how to contribute your idle GPU cycles to the Horde">Learn
+                                        <a target="_blank" href="https://aihorde.net/register" data-i18n="Register a Horde account for faster queue times">
-                                            how to contribute your idle GPU cycles to the Horde</a>
+                                            Register a Horde account for faster queue times
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a target="_blank" href="https://github.com/Haidra-Org/horde-worker-reGen?tab=readme-ov-file#ai-horde-worker-regen" data-i18n="Learn how to contribute your idle GPU cycles to the Horde">
+                                            Learn how to contribute your idle GPU cycles to the Horde
+                                        </a>
                                     </li>
                                 </ul>
                                 <label for="horde_auto_adjust_context_length" class="checkbox_label">
@@ -1944,12 +1953,9 @@
                                 <small id="adjustedHordeParams">Context: --, Response: --</small>
                                 <h4 data-i18n="API key">API key</h4>
                                 <small>
-                                    <span data-i18n="Get it here:">Get it here: </span> <a target="_blank" href="https://horde.koboldai.net/register" data-i18n="Register">Register</a> (<a id="horde_kudos" href="javascript:void(0);" data-i18n="View my Kudos">View my Kudos</a>)<br>
+                                    <span data-i18n="Get it here:">Get it here: </span> <a target="_blank" href="https://aihorde.net/register" data-i18n="Register">Register</a> (<a id="horde_kudos" href="javascript:void(0);" data-i18n="View my Kudos">View my Kudos</a>)<br>
                                     <span data-i18n="Enter">Enter </span> <span class="monospace">0000000000</span> <span data-i18n="to use anonymous mode.">to use anonymous mode. </span>
                                 </small>
-                                <!-- <div>
-                                        <a id="horde_kudos" href="javascript:void(0);">View my Kudos</a>
-                                    </div> -->
                                 <div class="flex-container">
                                     <input id="horde_api_key" name="horde_api_key" class="text_pole flex1" type="text" placeholder="0000000000" autocomplete="off">
                                     <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_horde"></div>
@@ -4333,7 +4339,10 @@
             </div>
             <div id="Backgrounds" class="drawer-content closedDrawer">
                 <div class="flex-container">
-                    <div class="flex-container wide100p">
+                    <div class="flex-container alignItemsBaseline wide100p">
+                        <h3 class="margin0 flex2" data-i18n="Background Image">
+                            Background Image
+                        </h3>
                         <input id="bg-filter" data-i18n="[placeholder]Filter" placeholder="Filter" class="text_pole flex1" type="search" />
                         <div id="auto_background" class="menu_button menu_button_icon" data-i18n="[title]Automatically select a background based on the chat context" title="Automatically select a background based on the chat context.">
                             <i class="fa-solid fa-wand-magic"></i>

public/scripts/popup.js

@@ -92,7 +92,7 @@ const showPopupHelper = {
      * @param {string?} header - The header text for the popup.
      * @param {string?} text - The main text for the popup.
      * @param {PopupOptions} [popupOptions={}] - Options for the popup.
-     * @return {Promise<POPUP_RESULT>} A Promise that resolves with the result of the user's interaction.
+     * @return {Promise<POPUP_RESULT?>} A Promise that resolves with the result of the user's interaction.
      */
     confirm: async (header, text, popupOptions = {}) => {
         const content = PopupUtils.BuildTextWithHeader(header, text);
@@ -107,7 +107,7 @@ const showPopupHelper = {
      * @param {string?} header - The header text for the popup.
      * @param {string?} text - The main text for the popup.
      * @param {PopupOptions} [popupOptions={}] - Options for the popup.
-     * @return {Promise<POPUP_RESULT>} A Promise that resolves with the result of the user's interaction.
+     * @return {Promise<POPUP_RESULT?>} A Promise that resolves with the result of the user's interaction.
      */
     text: async (header, text, popupOptions = {}) => {
         const content = PopupUtils.BuildTextWithHeader(header, text);

public/scripts/slash-commands.js

@@ -1267,20 +1267,59 @@ export function initDefaultSlashCommands() {
         callback: popupCallback,
         returns: 'popup text',
         namedArgumentList: [
-            new SlashCommandNamedArgument(
+            SlashCommandNamedArgument.fromProps({
-                'large', 'show large popup', [ARGUMENT_TYPE.BOOLEAN], false, false, null, commonEnumProviders.boolean('onOff')(),
+                name: 'large',
-            ),
+                description: 'show large popup',
-            new SlashCommandNamedArgument(
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
-                'wide', 'show wide popup', [ARGUMENT_TYPE.BOOLEAN], false, false, null, commonEnumProviders.boolean('onOff')(),
+                enumList: commonEnumProviders.boolean('trueFalse')(),
-            ),
+                defaultValue: 'false',
-            new SlashCommandNamedArgument(
+            }),
-                'okButton', 'text for the OK button', [ARGUMENT_TYPE.STRING], false,
+            SlashCommandNamedArgument.fromProps({
-            ),
+                name: 'wide',
+                description: 'show wide popup',
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+                defaultValue: 'false',
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'wider',
+                description: 'show wider popup',
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+                defaultValue: 'false',
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'transparent',
+                description: 'show transparent popup',
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+                defaultValue: 'false',
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'okButton',
+                description: 'text for the OK button',
+                typeList: [ARGUMENT_TYPE.STRING],
+                defaultValue: 'OK',
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'cancelButton',
+                description: 'text for the Cancel button',
+                typeList: [ARGUMENT_TYPE.STRING],
+            }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'result',
+                description: 'if enabled, returns the popup result (as an integer) instead of the popup text. Resolves to 1 for OK and 0 cancel button, empty string for exiting out.',
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+                defaultValue: 'false',
+            }),
         ],
         unnamedArgumentList: [
-            new SlashCommandArgument(
+            SlashCommandArgument.fromProps({
-                'text', [ARGUMENT_TYPE.STRING], true,
+                description: 'popup text',
-            ),
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+            }),
         ],
         helpString: `
         <div>
@@ -1291,7 +1330,10 @@ export function initDefaultSlashCommands() {
             <strong>Example:</strong>
             <ul>
                 <li>
-                    <pre><code>/popup large=on wide=on okButton="Submit" Enter some text:</code></pre>
+                    <pre><code>/popup large=on wide=on okButton="Confirm" Please confirm this action.</code></pre>
+                </li>
+                <li>
+                    <pre><code>/popup okButton="Left" cancelButton="Right" result=true Do you want to go left or right? | /echo 0 means right, 1 means left. Choice: {{pipe}}</code></pre>
                 </li>
             </ul>
         </div>
@@ -1574,6 +1616,13 @@ export function initDefaultSlashCommands() {
                 defaultValue: 'true',
                 enumList: commonEnumProviders.boolean('trueFalse')(),
             }),
+            SlashCommandNamedArgument.fromProps({
+                name: 'quiet',
+                description: 'suppress the toast message on API change',
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                defaultValue: 'false',
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+            }),
         ],
         unnamedArgumentList: [
             SlashCommandArgument.fromProps({
@@ -1882,16 +1931,21 @@ async function buttonsCallback(args, text) {
 }
 
 async function popupCallback(args, value) {
-    const safeValue = DOMPurify.sanitize(value || '');
+    const safeBody = DOMPurify.sanitize(value || '');
+    const safeHeader = args?.header && typeof args?.header === 'string' ? DOMPurify.sanitize(args.header) : null;
+    const requestedResult = isTrueBoolean(args?.result);
+
+    /** @type {import('./popup.js').PopupOptions} */
     const popupOptions = {
         large: isTrueBoolean(args?.large),
         wide: isTrueBoolean(args?.wide),
+        wider: isTrueBoolean(args?.wider),
+        transparent: isTrueBoolean(args?.transparent),
         okButton: args?.okButton !== undefined && typeof args?.okButton === 'string' ? args.okButton : 'Ok',
+        cancelButton: args?.cancelButton !== undefined && typeof args?.cancelButton === 'string' ? args.cancelButton : null,
     };
-    await delay(1);
+    const result = await Popup.show.text(safeHeader, safeBody, popupOptions);
-    await callGenericPopup(safeValue, POPUP_TYPE.TEXT, '', popupOptions);
+    return String(requestedResult ? result ?? '' : value);
-    await delay(1);
-    return String(value);
 }
 
 async function getMessagesCallback(args, value) {
@@ -3530,10 +3584,12 @@ function setPromptEntryCallback(args, targetState) {
  * @param {object} args - named args
  * @param {string?} [args.api=null] - the API name to set/get the URL for
  * @param {string?} [args.connect=true] - whether to connect to the API after setting
+ * @param {string?} [args.quiet=false] - whether to suppress toasts
  * @param {string} url - the API URL to set
  * @returns {Promise<string>}
  */
-async function setApiUrlCallback({ api = null, connect = 'true' }, url) {
+async function setApiUrlCallback({ api = null, connect = 'true', quiet = 'false' }, url) {
+    const isQuiet = isTrueBoolean(quiet);
     const autoConnect = isTrueBoolean(connect);
 
     // Special handling for Chat Completion Custom OpenAI compatible, that one can also support API url handling
@@ -3582,22 +3638,26 @@ async function setApiUrlCallback({ api = null, connect = 'true' }, url) {
 
     // Do some checks and get the api type we are targeting with this command
     if (api && !Object.values(textgen_types).includes(api)) {
-        toastr.warning(`API '${api}' is not a valid text_gen API.`);
+        !isQuiet && toastr.warning(`API '${api}' is not a valid text_gen API.`);
         return '';
     }
     if (!api && !Object.values(textgen_types).includes(textgenerationwebui_settings.type)) {
-        toastr.warning(`API '${textgenerationwebui_settings.type}' is not a valid text_gen API.`);
+        !isQuiet && toastr.warning(`API '${textgenerationwebui_settings.type}' is not a valid text_gen API.`);
+        return '';
+    }
+    if (!api && main_api !== 'textgenerationwebui') {
+        !isQuiet && toastr.warning(`API type '${main_api}' does not support setting the server URL.`);
         return '';
     }
     if (api && url && autoConnect && api !== textgenerationwebui_settings.type) {
-        toastr.warning(`API '${api}' is not the currently selected API, so we cannot do an auto-connect. Consider switching to it via /api beforehand.`);
+        !isQuiet && toastr.warning(`API '${api}' is not the currently selected API, so we cannot do an auto-connect. Consider switching to it via /api beforehand.`);
         return '';
     }
     const type = api || textgenerationwebui_settings.type;
 
     const inputSelector = SERVER_INPUTS[type];
     if (!inputSelector) {
-        toastr.warning(`API '${type}' does not have a server url input.`);
+        !isQuiet && toastr.warning(`API '${type}' does not have a server url input.`);
         return '';
     }