From e0801176ac68c7647fe9c53e0f72d40e3eee6b57 Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Fri, 12 Apr 2024 17:26:39 -0400
Subject: [PATCH] add autocomplete style  selector

---
 public/index.html                |  8 ++++++++
 public/scripts/power-user.js     | 10 +++++++++-
 public/scripts/slash-commands.js | 19 ++++++++++++++++++-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9c95fd06d..0ef12400a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3748,6 +3748,14 @@
                                 <option data-i18n="Fuzzy" value="fuzzy">Fuzzy</option>
                             </select>
                         </div>
+                        <div title="Sets the style of the autocomplete for STscript." data-i18n="[title]Sets the style of the autocomplete for STscript.">
+                            <label for="stscript_autocomplete_style" data-i18n="STscript Autocomplete Style">STscript Autocomplete Style</label>
+                            <select id="stscript_autocomplete_style">
+                                <option data-i18n="Follow Theme" value="theme">Follow Theme</option>
+                                <option data-i18n="Dark" value="dark">Dark</option>
+                                <option data-i18n="Light" value="light">Light</option>
+                            </select>
+                        </div>
                         <div title="If set in the advanced character definitions, this field will be displayed in the characters list." data-i18n="[title]If set in the advanced character definitions, this field will be displayed in the characters list.">
                             <label for="aux_field" data-i18n="Aux List Field">Aux List Field</label>
                             <select id="aux_field">
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index b64954ae2..2d0be854d 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -251,6 +251,7 @@ let power_user = {
     aux_field: 'character_version',
     stscript: {
         matching: 'fuzzy',
+        autocomplete_style: 'theme',
     },
     restore_user_input: true,
     reduced_motion: false,
@@ -1544,7 +1545,8 @@ function loadPowerUserSettings(settings, data) {
     $('#chat_width_slider').val(power_user.chat_width);
     $('#token_padding').val(power_user.token_padding);
     $('#aux_field').val(power_user.aux_field);
-    $('#stscript_matching').val(power_user.stscript.matching);
+    $('#stscript_matching').val(power_user.stscript.matching ?? 'fuzzy');
+    $('#stscript_autocomplete_style').val(power_user.stscript.autocomplete_style ?? 'theme');
     $('#restore_user_input').prop('checked', power_user.restore_user_input);
 
     $('#chat_truncation').val(power_user.chat_truncation);
@@ -3426,6 +3428,12 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $('#stscript_autocomplete_style').on('change', function () {
+        const value = $(this).find(':selected').val();
+        power_user.stscript.autocomplete_style = String(value);
+        saveSettingsDebounced();
+    });
+
     $('#restore_user_input').on('input', function () {
         power_user.restore_user_input = !!$(this).prop('checked');
         saveSettingsDebounced();
diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js
index cd6f2db23..3934cfde7 100644
--- a/public/scripts/slash-commands.js
+++ b/public/scripts/slash-commands.js
@@ -1797,7 +1797,6 @@ async function executeSlashCommands(text, handleParserErrors = true, scope = nul
 export function setSlashCommandAutoComplete(textarea, isFloating = false) {
     const dom = document.createElement('ul'); {
         dom.classList.add('slashCommandAutoComplete');
-        dom.classList.add('defaultThemed');
     }
     let isReplacable = false;
     let result = [];
@@ -1956,6 +1955,24 @@ export function setSlashCommandAutoComplete(textarea, isFloating = false) {
 
         // render autocomplete list
         dom.innerHTML = '';
+        dom.classList.remove('defaultDark');
+        dom.classList.remove('defaultLight');
+        dom.classList.remove('defaultThemed');
+        switch (power_user.stscript.autocomplete_style ?? 'theme') {
+            case 'dark': {
+                dom.classList.add('defaultDark');
+                break;
+            }
+            case 'light': {
+                dom.classList.add('defaultLight');
+                break;
+            }
+            case 'theme':
+            default: {
+                dom.classList.add('defaultThemed');
+                break;
+            }
+        }
         for (const item of result) {
             const li = document.createElement('li'); {
                 li.classList.add('item');