Spaces:

OnyxMunk
/

GravityFalls

Paused

App Files Files Community

frdel commited on Oct 24, 2025

Commit

06c8c46

1 Parent(s): 3167019

frontend components refactor cleanup

Browse files

Files changed (7) hide show

webui/components/messages/action-buttons/simple-action-buttons.js +2 -2
webui/components/projects/project-selector.html +2 -2
webui/components/sidebar/bottom/preferences/preferences-panel.html +6 -6
webui/components/sidebar/bottom/preferences/preferences-store.js +92 -42
webui/components/sidebar/left-sidebar.html +76 -46
webui/index.html +11 -5
webui/index.js +1 -59

webui/components/messages/action-buttons/simple-action-buttons.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import { store as speechStore } from "/components/chat/speech/speech-store.js";
 // Extract text content from different message types
-function getTextContent(element) {
   // Get all children except action buttons
   const textParts = [];
   // Loop through all child elements
@@ -15,7 +15,7 @@ function getTextContent(element) {
       continue;
     }
     // Get text content from the child
-    const text = child.innerText || "";
     if (text.trim()) {
       textParts.push(text.trim());
     }

 import { store as speechStore } from "/components/chat/speech/speech-store.js";
 // Extract text content from different message types
+function getTextContent(element,html=false) {
   // Get all children except action buttons
   const textParts = [];
   // Loop through all child elements
       continue;
     }
     // Get text content from the child
+    const text = (html ? child.innerHTML : child.innerText) || "";
     if (text.trim()) {
       textParts.push(text.trim());
     }

webui/components/projects/project-selector.html CHANGED Viewed

@@ -7,7 +7,7 @@
 </head>
 <body>
-    <div x-data>
         <template x-if="$store.projects">
             <div>
                 <template x-if="$store.selectedProject">
@@ -18,7 +18,7 @@
                 </template>
             </div>
         </template>
-    </div>
 </body>
 </html>

 </head>
 <body>
+    <!-- <div x-data>
         <template x-if="$store.projects">
             <div>
                 <template x-if="$store.selectedProject">
                 </template>
             </div>
         </template>
+    </div> -->
 </body>
 </html>

webui/components/sidebar/bottom/preferences/preferences-panel.html CHANGED Viewed

@@ -16,42 +16,42 @@
             </svg>
           </h3>
           <ul class="config-list collapse show" id="pref-list">
-            <li x-data x-init="$watch('$store.preferences.autoScroll', v => $store.preferences.applyAutoScroll(v))">
               <span>Autoscroll</span>
               <label class="switch">
                 <input id="auto-scroll-switch" type="checkbox" x-model="$store.preferences.autoScroll">
                 <span class="slider"></span>
               </label>
             </li>
-            <li x-data x-init="$watch('$store.preferences.darkMode', v => $store.preferences.applyDarkMode(v))">
               <span class="switch-label">Dark mode</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.darkMode">
                 <span class="slider"></span>
               </label>
             </li>
-            <li x-data x-init="$watch('$store.preferences.speech', v => $store.preferences.applySpeech(v))">
               <span class="switch-label">Speech</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.speech">
                 <span class="slider"></span>
               </label>
             </li>
-            <li x-data x-init="$watch('$store.preferences.showThoughts', v => $store.preferences.applyShowThoughts(v))">
               <span>Show thoughts</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.showThoughts">
                 <span class="slider"></span>
               </label>
             </li>
-            <li x-data x-init="$watch('$store.preferences.showJson', v => $store.preferences.applyShowJson(v))">
               <span>Show JSON</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.showJson">
                 <span class="slider"></span>
               </label>
             </li>
-            <li x-data x-init="$watch('$store.preferences.showUtils', v => $store.preferences.applyShowUtils(v))">
               <span>Show utility messages</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.showUtils">

             </svg>
           </h3>
           <ul class="config-list collapse show" id="pref-list">
+            <li x-data>
               <span>Autoscroll</span>
               <label class="switch">
                 <input id="auto-scroll-switch" type="checkbox" x-model="$store.preferences.autoScroll">
                 <span class="slider"></span>
               </label>
             </li>
+            <li x-data>
               <span class="switch-label">Dark mode</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.darkMode">
                 <span class="slider"></span>
               </label>
             </li>
+            <li x-data>
               <span class="switch-label">Speech</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.speech">
                 <span class="slider"></span>
               </label>
             </li>
+            <li x-data>
               <span>Show thoughts</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.showThoughts">
                 <span class="slider"></span>
               </label>
             </li>
+            <li x-data>
               <span>Show JSON</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.showJson">
                 <span class="slider"></span>
               </label>
             </li>
+            <li x-data>
               <span>Show utility messages</span>
               <label class="switch">
                 <input type="checkbox" x-model="$store.preferences.showUtils">

webui/components/sidebar/bottom/preferences/preferences-store.js CHANGED Viewed

@@ -1,14 +1,63 @@
 import { createStore } from "/js/AlpineStore.js";
 // Preferences store centralizes user preference toggles and side-effects
 const model = {
   // UI toggles (initialized with safe defaults, loaded from localStorage in init)
-  autoScroll: true,
-  darkMode: true,
-  speech: false,
-  showThoughts: true,
-  showJson: false,
-  showUtils: false,
   // Initialize preferences and apply current state
   init() {
@@ -16,68 +65,69 @@ const model = {
       // Load persisted preferences with safe fallbacks
       try {
         const storedDarkMode = localStorage.getItem("darkMode");
-        this.darkMode = storedDarkMode !== "false";
       } catch {
-        this.darkMode = true; // Default to dark mode if localStorage is unavailable
       }
       try {
         const storedSpeech = localStorage.getItem("speech");
-        this.speech = storedSpeech === "true";
       } catch {
-        this.speech = false; // Default to speech off if localStorage is unavailable
       }
       // Apply all preferences
-      this.applyDarkMode(this.darkMode);
-      this.applyAutoScroll(this.autoScroll);
-      this.applySpeech(this.speech);
-      this.applyShowThoughts(this.showThoughts);
-      this.applyShowJson(this.showJson);
-      this.applyShowUtils(this.showUtils);
     } catch (e) {
       console.error("Failed to initialize preferences store", e);
     }
   },
-  // Side-effect appliers delegate to existing global handlers for parity
-  applyAutoScroll(value = this.autoScroll) {
-    if (typeof globalThis.toggleAutoScroll === "function") {
-      globalThis.toggleAutoScroll(value);
-    }
   },
-  applyDarkMode(value = this.darkMode) {
-    if (typeof globalThis.toggleDarkMode === "function") {
-      globalThis.toggleDarkMode(value);
     }
   },
-  applySpeech(value = this.speech) {
-    if (typeof globalThis.toggleSpeech === "function") {
-      globalThis.toggleSpeech(value);
-    }
   },
-  applyShowThoughts(value = this.showThoughts) {
-    if (typeof globalThis.toggleThoughts === "function") {
-      globalThis.toggleThoughts(value);
-    }
   },
-  applyShowJson(value = this.showJson) {
-    if (typeof globalThis.toggleJson === "function") {
-      globalThis.toggleJson(value);
-    }
   },
-  applyShowUtils(value = this.showUtils) {
-    if (typeof globalThis.toggleUtils === "function") {
-      globalThis.toggleUtils(value);
-    }
   },
 };
 export const store = createStore("preferences", model);

 import { createStore } from "/js/AlpineStore.js";
+import * as css from "/js/css.js";
+import { store as speechStore } from "/components/chat/speech/speech-store.js";
 // Preferences store centralizes user preference toggles and side-effects
 const model = {
   // UI toggles (initialized with safe defaults, loaded from localStorage in init)
+  get autoScroll() {
+    return this._autoScroll;
+  },
+  set autoScroll(value) {
+    this._autoScroll = value;
+    this._applyAutoScroll(value);
+  },
+  _autoScroll: true,
+  get darkMode() {
+    return this._darkMode;
+  },
+  set darkMode(value) {
+    this._darkMode = value;
+    this._applyDarkMode(value);
+  },
+  _darkMode: true,
+  get speech() {
+    return this._speech;
+  },
+  set speech(value) {
+    this._speech = value;
+    this._applySpeech(value);
+  },
+  _speech: false,
+  get showThoughts() {
+    return this._showThoughts;
+  },
+  set showThoughts(value) {
+    this._showThoughts = value;
+    this._applyShowThoughts(value);
+  },
+  _showThoughts: true,
+  get showJson() {
+    return this._showJson;
+  },
+  set showJson(value) {
+    this._showJson = value;
+    this._applyShowJson(value);
+  },
+  _showJson: false,
+  get showUtils() {
+    return this._showUtils;
+  },
+  set showUtils(value) {
+    this._showUtils = value;
+    this._applyShowUtils(value);
+  },
+  _showUtils: false,
   // Initialize preferences and apply current state
   init() {
       // Load persisted preferences with safe fallbacks
       try {
         const storedDarkMode = localStorage.getItem("darkMode");
+        this._darkMode = storedDarkMode !== "false";
       } catch {
+        this._darkMode = true; // Default to dark mode if localStorage is unavailable
       }
       try {
         const storedSpeech = localStorage.getItem("speech");
+        this._speech = storedSpeech === "true";
       } catch {
+        this._speech = false; // Default to speech off if localStorage is unavailable
       }
       // Apply all preferences
+      this._applyDarkMode(this._darkMode);
+      this._applyAutoScroll(this._autoScroll);
+      this._applySpeech(this._speech);
+      this._applyShowThoughts(this._showThoughts);
+      this._applyShowJson(this._showJson);
+      this._applyShowUtils(this._showUtils);
     } catch (e) {
       console.error("Failed to initialize preferences store", e);
     }
   },
+  _applyAutoScroll(value) {
+    // nothing for now
   },
+  _applyDarkMode(value) {
+    if (value) {
+      document.body.classList.remove("light-mode");
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+      document.body.classList.add("light-mode");
     }
+    localStorage.setItem("darkMode", value);
   },
+  _applySpeech(value) {
+    localStorage.setItem("speech", value);
+    if (!value) speechStore.stopAudio();
   },
+  _applyShowThoughts(value) {
+    css.toggleCssProperty(
+      ".msg-thoughts",
+      "display",
+      value ? undefined : "none"
+    );
   },
+  _applyShowJson(value) {
+    css.toggleCssProperty(".msg-json", "display", value ? "block" : "none");
   },
+  _applyShowUtils(value) {
+    css.toggleCssProperty(
+      ".message-util",
+      "display",
+      value ? undefined : "none"
+    );
   },
 };
 export const store = createStore("preferences", model);

webui/components/sidebar/left-sidebar.html CHANGED Viewed

@@ -1,30 +1,36 @@
 <html>
 <head>
   <script type="module">
     import { store as sidebarStore } from "/components/sidebar/sidebar-store.js";
   </script>
   <!-- Wrapper composes existing sidebar components -->
 </head>
 <body>
-  <div id="left-panel" class="panel" x-data :class="{'hidden': !$store.sidebar.isOpen}">
-    <!--Sidebar upper elements-->
-    <div class="left-panel-top">
-      <!-- Top Section: Header Icons + Quick Actions -->
-      <x-component path="sidebar/top-section/sidebar-top.html"></x-component>
-      <!-- Chats List -->
-      <div class="config-section" id="chats-section">
-        <x-component path="sidebar/chats/chats-list.html"></x-component>
-      </div>
-      <!-- Tasks List -->
-      <div class="config-section" id="tasks-section">
-        <x-component path="sidebar/tasks/tasks-list.html"></x-component>
       </div>
-    </div>
-    <!--Sidebar lower elements-->
-    <div class="left-panel-bottom">
-      <x-component path="sidebar/bottom/sidebar-bottom.html"></x-component>
-    </div>
   </div>
   <style>
@@ -42,21 +48,25 @@
       color: var(--color-text);
       box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
       user-select: none;
-      -webkit-user-select: none; /* Safari compatibility */
-      height: 100vh; /* Ensure full height */
-      overflow: hidden; /* Prevent overall panel overflow */
     }
     /* Ensure component host behaves like the original direct children for flex layout */
-    #left-panel > .left-panel-top,
-    #left-panel > .left-panel-bottom {
-        display: flex;
-        flex-direction: column;
     }
-    #left-panel > .left-panel-top {
-        flex: 1;
-        min-height: 0; /* allow inner flex children to shrink properly */
     }
     #left-panel.hidden {
@@ -64,11 +74,13 @@
     }
     .left-panel-top {
-      flex: 1 1 auto; /* Take available space */
       display: -webkit-flex;
       display: flex;
       flex-direction: column;
-      min-height: 0; /* Critical for allowing flex children to shrink */
       overflow: hidden;
       justify-content: space-between;
       margin-top: 3.5rem;
@@ -76,13 +88,16 @@
       scrollbar-width: none;
       -ms-overflow-style: none;
     }
     .left-panel-top::-webkit-scrollbar {
       width: 0px;
     }
     .left-panel-bottom {
       position: relative;
       flex-shrink: 0;
-      flex-grow: 0; /* Prevent bottom from growing */
     }
     /* Chats section container inside sidebar */
@@ -91,7 +106,8 @@
       display: flex;
       flex-direction: column;
       min-height: 0;
-      flex: 1 1 auto; /* Take all available space */
       max-height: 100%;
       overflow: hidden;
     }
@@ -102,19 +118,21 @@
       display: flex;
       flex-direction: column;
       min-height: 0;
-      flex: 0 0 auto; /* Shrink to content, no reserved space */
-      max-height: 40%; /* Limit to 40% of viewport height when expanded */
       margin-top: 0;
       padding-top: var(--spacing-md);
       overflow: hidden;
     }
     /* Flatten wrapper elements to maintain flex chain for inner scroll containers */
-    #chats-section > x-component,
-    #chats-section > x-component > div[x-data],
-    #tasks-section > x-component,
-    #tasks-section > x-component > div[x-data],
-    #tasks-section > x-component > div[x-data] > div[x-data] {
       display: contents;
     }
@@ -125,10 +143,12 @@
       flex: 1;
       min-height: 0;
     }
     /* During the collapsing transition, allow height animation to control size */
     #tasks-section .collapsing {
       flex: 0 0 auto !important;
     }
     /* Common section header styling (Chats, Tasks) - matching Preferences style */
     .section-header {
       display: flex;
@@ -137,23 +157,25 @@
       gap: 6px;
       margin: 0 0 0.5rem 0;
       padding: 0;
-      -webkit-user-select: none; /* Safari compatibility */
       user-select: none;
       font-size: var(--font-size-normal);
     }
     /* Collapsible section headers (Tasks) */
     .section-header-collapsible {
       cursor: pointer;
     }
     @media (max-width: 768px) {
       #left-panel {
         position: fixed;
         left: 0;
         top: 0;
         bottom: 0;
-        width: 250px !important; /* Force width */
         min-width: 250px;
         z-index: 1003;
         transition: all var(--transition-speed) ease-in-out;
@@ -165,9 +187,17 @@
     }
     @media (max-height: 600px) {
-      #chats-section { min-height: 100%; }
-      .left-panel-top { overflow-y: auto; -webkit-scroll-behavior: smooth; scroll-behavior: smooth; }
     }
   </style>
 </body>
-</html>

 <html>
 <head>
   <script type="module">
     import { store as sidebarStore } from "/components/sidebar/sidebar-store.js";
   </script>
   <!-- Wrapper composes existing sidebar components -->
 </head>
 <body>
+  <div x-data>
+    <template x-if="$store.sidebar">
+      <div id="left-panel" class="panel" x-data :class="{'hidden': !$store.sidebar.isOpen}">
+        <!--Sidebar upper elements-->
+        <div class="left-panel-top">
+          <!-- Top Section: Header Icons + Quick Actions -->
+          <x-component path="sidebar/top-section/sidebar-top.html"></x-component>
+          <!-- Chats List -->
+          <div class="config-section" id="chats-section">
+            <x-component path="sidebar/chats/chats-list.html"></x-component>
+          </div>
+          <!-- Tasks List -->
+          <div class="config-section" id="tasks-section">
+            <x-component path="sidebar/tasks/tasks-list.html"></x-component>
+          </div>
+        </div>
+        <!--Sidebar lower elements-->
+        <div class="left-panel-bottom">
+          <x-component path="sidebar/bottom/sidebar-bottom.html"></x-component>
+        </div>
       </div>
+    </template>
   </div>
   <style>
       color: var(--color-text);
       box-shadow: 1px 0 5px rgba(0, 0, 0, 0.3);
       user-select: none;
+      -webkit-user-select: none;
+      /* Safari compatibility */
+      height: 100vh;
+      /* Ensure full height */
+      overflow: hidden;
+      /* Prevent overall panel overflow */
     }
     /* Ensure component host behaves like the original direct children for flex layout */
+    #left-panel>.left-panel-top,
+    #left-panel>.left-panel-bottom {
+      display: flex;
+      flex-direction: column;
     }
+    #left-panel>.left-panel-top {
+      flex: 1;
+      min-height: 0;
+      /* allow inner flex children to shrink properly */
     }
     #left-panel.hidden {
     }
     .left-panel-top {
+      flex: 1 1 auto;
+      /* Take available space */
       display: -webkit-flex;
       display: flex;
       flex-direction: column;
+      min-height: 0;
+      /* Critical for allowing flex children to shrink */
       overflow: hidden;
       justify-content: space-between;
       margin-top: 3.5rem;
       scrollbar-width: none;
       -ms-overflow-style: none;
     }
     .left-panel-top::-webkit-scrollbar {
       width: 0px;
     }
     .left-panel-bottom {
       position: relative;
       flex-shrink: 0;
+      flex-grow: 0;
+      /* Prevent bottom from growing */
     }
     /* Chats section container inside sidebar */
       display: flex;
       flex-direction: column;
       min-height: 0;
+      flex: 1 1 auto;
+      /* Take all available space */
       max-height: 100%;
       overflow: hidden;
     }
       display: flex;
       flex-direction: column;
       min-height: 0;
+      flex: 0 0 auto;
+      /* Shrink to content, no reserved space */
+      max-height: 40%;
+      /* Limit to 40% of viewport height when expanded */
       margin-top: 0;
       padding-top: var(--spacing-md);
       overflow: hidden;
     }
     /* Flatten wrapper elements to maintain flex chain for inner scroll containers */
+    #chats-section>x-component,
+    #chats-section>x-component>div[x-data],
+    #tasks-section>x-component,
+    #tasks-section>x-component>div[x-data],
+    #tasks-section>x-component>div[x-data]>div[x-data] {
       display: contents;
     }
       flex: 1;
       min-height: 0;
     }
     /* During the collapsing transition, allow height animation to control size */
     #tasks-section .collapsing {
       flex: 0 0 auto !important;
     }
     /* Common section header styling (Chats, Tasks) - matching Preferences style */
     .section-header {
       display: flex;
       gap: 6px;
       margin: 0 0 0.5rem 0;
       padding: 0;
+      -webkit-user-select: none;
+      /* Safari compatibility */
       user-select: none;
       font-size: var(--font-size-normal);
     }
     /* Collapsible section headers (Tasks) */
     .section-header-collapsible {
       cursor: pointer;
     }
     @media (max-width: 768px) {
       #left-panel {
         position: fixed;
         left: 0;
         top: 0;
         bottom: 0;
+        width: 250px !important;
+        /* Force width */
         min-width: 250px;
         z-index: 1003;
         transition: all var(--transition-speed) ease-in-out;
     }
     @media (max-height: 600px) {
+      #chats-section {
+        min-height: 100%;
+      }
+      .left-panel-top {
+        overflow-y: auto;
+        -webkit-scroll-behavior: smooth;
+        scroll-behavior: smooth;
+      }
     }
   </style>
 </body>
+</html>

webui/index.html CHANGED Viewed

@@ -99,7 +99,9 @@
     <script type="module" src="index.js"></script>
     <!-- Bootstrap JS (only for logic, importing bundled CSS => UI conflicts) -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
     <!-- Then load Alpine.js -->
     <!-- <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script> -->
@@ -133,15 +135,19 @@
     </script>
 </head>
-<body class="dark-mode device-pointer">
     <div class="container">
         <!-- Sidebar Overlay -->
-        <div id="sidebar-overlay" class="sidebar-overlay" x-data :class="{'visible': $store.sidebar.isOpen && $store.sidebar.isMobile()}" @click="$store.sidebar.close()"></div>
         <!-- Left Sidebar (Header Icons, Quick Actions, Tabs, Chats, Tasks) -->
         <x-component path="sidebar/left-sidebar.html"></x-component>
         <!-- Right Panel (Message History and Input Section) -->
-        <div id="right-panel" class="panel" :class="{'expanded': !$store.sidebar.isOpen}">
             <!-- Time and Date -->
             <div id="time-date-container">
                 <div id="time-date"></div>

     <script type="module" src="index.js"></script>
     <!-- Bootstrap JS (only for logic, importing bundled CSS => UI conflicts) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+        crossorigin="anonymous"></script>
     <!-- Then load Alpine.js -->
     <!-- <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script> -->
     </script>
 </head>
+<body class="dark-mode device-pointer" x-data>
     <div class="container">
         <!-- Sidebar Overlay -->
+        <template x-if="$store.sidebar">
+            <div id="sidebar-overlay" class="sidebar-overlay" x-data
+                :class="{'visible': $store.sidebar.isOpen && $store.sidebar.isMobile()}"
+                @click="$store.sidebar.close()"></div>
+        </template>
         <!-- Left Sidebar (Header Icons, Quick Actions, Tabs, Chats, Tasks) -->
         <x-component path="sidebar/left-sidebar.html"></x-component>
         <!-- Right Panel (Message History and Input Section) -->
+        <div id="right-panel" class="panel" >
             <!-- Time and Date -->
             <div id="time-date-container">
                 <div id="time-date"></div>

webui/index.js CHANGED Viewed

@@ -21,9 +21,6 @@ globalThis.resetCounter = 0; // Used by stores and getChatBasedId
 let skipOneSpeech = false;
 let connectionStatus = undefined; // undefined = not checked yet, true = connected, false = disconnected
-export function getAutoScroll() {
-  return autoScroll;
-}
 // Sidebar toggle logic is now handled by sidebar-store.js
@@ -175,7 +172,7 @@ setInterval(updateUserTime, 1000);
 function setMessage(id, type, heading, content, temp, kvps = null) {
   const result = msgs.setMessage(id, type, heading, content, temp, kvps);
   const chatHistoryEl = document.getElementById("chat-history");
-  if (autoScroll && chatHistoryEl) {
     chatHistoryEl.scrollTop = chatHistoryEl.scrollHeight;
   }
   return result;
@@ -480,61 +477,6 @@ export const getChatBasedId = function (id) {
   return context + "-" + globalThis.resetCounter + "-" + id;
 };
-globalThis.toggleAutoScroll = async function (_autoScroll) {
-  autoScroll = _autoScroll;
-};
-globalThis.toggleJson = async function (showJson) {
-  css.toggleCssProperty(".msg-json", "display", showJson ? "block" : "none");
-};
-globalThis.toggleThoughts = async function (showThoughts) {
-  css.toggleCssProperty(
-    ".msg-thoughts",
-    "display",
-    showThoughts ? undefined : "none"
-  );
-};
-globalThis.toggleUtils = async function (showUtils) {
-  css.toggleCssProperty(
-    ".message-util",
-    "display",
-    showUtils ? undefined : "none"
-  );
-};
-globalThis.toggleDarkMode = function (isDark) {
-  if (isDark) {
-    document.body.classList.remove("light-mode");
-    document.body.classList.add("dark-mode");
-  } else {
-    document.body.classList.remove("dark-mode");
-    document.body.classList.add("light-mode");
-  }
-  console.log("Dark mode:", isDark);
-  localStorage.setItem("darkMode", isDark);
-};
-globalThis.toggleSpeech = function (isOn) {
-  console.log("Speech:", isOn);
-  localStorage.setItem("speech", isOn);
-  if (!isOn) speechStore.stopAudio();
-};
-globalThis.nudge = async function () {
-  await inputStore.nudge();
-};
-globalThis.restart = async function () {
-  await chatsStore.restart();
-};
-// Modify this part
-document.addEventListener("DOMContentLoaded", () => {
-  const isDarkMode = localStorage.getItem("darkMode") !== "false";
-  toggleDarkMode(isDarkMode);
-});
 globalThis.loadChats = async function () {
   await chatsStore.loadChats();

 let skipOneSpeech = false;
 let connectionStatus = undefined; // undefined = not checked yet, true = connected, false = disconnected
 // Sidebar toggle logic is now handled by sidebar-store.js
 function setMessage(id, type, heading, content, temp, kvps = null) {
   const result = msgs.setMessage(id, type, heading, content, temp, kvps);
   const chatHistoryEl = document.getElementById("chat-history");
+  if (preferencesStore.autoScroll && chatHistoryEl) {
     chatHistoryEl.scrollTop = chatHistoryEl.scrollHeight;
   }
   return result;
   return context + "-" + globalThis.resetCounter + "-" + id;
 };
 globalThis.loadChats = async function () {
   await chatsStore.loadChats();