From 0b6bb599557ddcb19f4ce5d0f59cbe090166abb9 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Fri, 19 Apr 2024 22:46:49 +0300
Subject: [PATCH] Try optimize slash autocomplete

---
 public/scripts/slash-commands.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js
index 272b0734a..215295e37 100644
--- a/public/scripts/slash-commands.js
+++ b/public/scripts/slash-commands.js
@@ -47,7 +47,7 @@ import { autoSelectPersona } from './personas.js';
 import { addEphemeralStoppingString, chat_styles, flushEphemeralStoppingStrings, power_user } from './power-user.js';
 import { textgen_types, textgenerationwebui_settings } from './textgen-settings.js';
 import { decodeTextTokens, getFriendlyTokenizerName, getTextTokens, getTokenCountAsync } from './tokenizers.js';
-import { delay, isFalseBoolean, isTrueBoolean, stringToRange, trimToEndSentence, trimToStartSentence, waitUntilCondition } from './utils.js';
+import { debounce, delay, isFalseBoolean, isTrueBoolean, stringToRange, trimToEndSentence, trimToStartSentence, waitUntilCondition } from './utils.js';
 import { registerVariableCommands, resolveVariable } from './variables.js';
 import { background_settings } from './backgrounds.js';
 
@@ -1863,11 +1863,24 @@ export async function executeSlashCommands(text, unescape = false) {
     return { interrupt, newText, pipe: pipeResult };
 }
 
+/**
+ * @param {JQuery<HTMLElement>} textarea
+ */
 function setSlashCommandAutocomplete(textarea) {
+    const nativeElement = textarea.get(0);
+    let width = 0;
+
+    function setItemWidth() {
+        width = nativeElement.offsetWidth - 5;
+    }
+
+    const setWidthDebounced = debounce(setItemWidth);
+    $(window).on('resize', () => setWidthDebounced());
+
     textarea.autocomplete({
         source: (input, output) => {
             // Only show for slash commands (requiring at least 1 letter after the slash) and if there's no space
-            if (!input.term.startsWith('/') || input.term.includes(' ') || input.term === '/') {
+            if (!input.term.startsWith('/') || input.term.includes(' ')) {
                 output([]);
                 return;
             }
@@ -1877,7 +1890,7 @@ function setSlashCommandAutocomplete(textarea) {
                 .keys(parser.helpStrings) // Get all slash commands
                 .filter(x => x.startsWith(slashCommand)) // Filter by the input
                 .sort((a, b) => a.localeCompare(b)) // Sort alphabetically
-                .slice(0, 5) // Limit to 5 results
+                .slice(0, 50) // Limit to 50 results
                 .map(x => ({ label: parser.helpStrings[x], value: `/${x} ` })); // Map to the help string
 
             output(result); // Return the results
@@ -1891,10 +1904,11 @@ function setSlashCommandAutocomplete(textarea) {
     });
 
     textarea.autocomplete('instance')._renderItem = function (ul, item) {
-        const width = $(textarea).innerWidth();
         const content = $('<div></div>').html(item.label);
         return $('<li>').width(width).append(content).appendTo(ul);
     };
+
+    setItemWidth();
 }
 
 jQuery(function () {