fix: Update chat UI theme management

- Non-logged users no longer see the theme toggle (⚙/🌙/☀️) button
- Theme still auto-detects based on system preference (light/dark)
- Logged-in users have a separate theme menu with preview in the suite

src/ui_server/mod.rs

@@ -289,7 +289,7 @@ pub async fn serve_minimal() -> impl IntoResponse {
     };
 
     match html_res {
-        Ok(html) => (StatusCode::OK, [("content-type", "text/html")], Html(html)),
+        Ok(html) => (StatusCode::OK, [("content-type", "text/html; charset=utf-8")], Html(html)),
         Err(e) => {
             error!("Failed to load minimal UI: {e}");
             (
@@ -530,7 +530,7 @@ pub async fn serve_suite(bot_name: Option<String>) -> impl IntoResponse {
                 html = remove_section(&html, "settings");
             }
 
-            (StatusCode::OK, [("content-type", "text/html")], Html(html))
+            (StatusCode::OK, [("content-type", "text/html; charset=utf-8")], Html(html))
         }
         Err(e) => {
             error!("Failed to load suite UI: {e}");

ui/suite/chat/chat.css

@@ -73,6 +73,7 @@
         opacity: 0;
         transform: translateX(20px);
     }
+
     to {
         opacity: 1;
         transform: translateX(0);
@@ -97,11 +98,13 @@
 /* Connection Status - use shared styles from app.css */
 
 @keyframes pulse {
+
     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }
+
     50% {
         opacity: 0.5;
         transform: scale(1.2);
@@ -216,6 +219,7 @@
         opacity: 0;
         transform: translateY(10px);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -551,9 +555,9 @@ footer {
 .suggestion-button {
     padding: 6px 12px;
     border-radius: 20px;
-    border: 2px solid var(--chat-color1, var(--suggestion-color, #4a9eff));
-    background: var(--chat-color2, rgba(255, 255, 255, 0.15));
-    color: var(--chat-color1, #ffffff);
+    border: 2px solid var(--chat-color2, #002147);
+    background: var(--chat-color2, #002147);
+    color: #ffffff;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
@@ -615,8 +619,8 @@ form.input-container {
 }
 
 .input-container:focus-within {
-    border-color: var(--accent, var(--accent-color, #3b82f6));
-    box-shadow: 0 0 0 3px var(--accent-glow, rgba(59, 130, 246, 0.1));
+    border-color: var(--chat-color1, var(--accent, #3b82f6));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-color1, var(--accent, #3b82f6)) 20%, transparent);
 }
 
 #messageInput {
@@ -637,10 +641,14 @@ form.input-container {
 }
 
 @keyframes cursor-blink {
-    0%, 50% {
+
+    0%,
+    50% {
         caret-color: var(--accent, #3b82f6);
     }
-    51%, 100% {
+
+    51%,
+    100% {
         caret-color: transparent;
     }
 }
@@ -673,7 +681,7 @@ form.input-container {
 }
 
 #sendBtn {
-    background: var(--accent, var(--accent-color, #3b82f6));
+    background: var(--chat-color1, var(--accent, #3b82f6));
 }
 
 #voiceBtn {
@@ -689,7 +697,7 @@ form.input-container {
 }
 
 #sendBtn:hover {
-    background: var(--accent-hover, var(--accent, #2563eb));
+    background: var(--chat-color1, var(--accent-hover, #2563eb));
 }
 
 #voiceBtn:active,
@@ -700,8 +708,8 @@ form.input-container {
 /* Dark/Sentient theme overrides */
 [data-theme="dark"] #sendBtn,
 [data-theme="sentient"] #sendBtn {
-    background: var(--accent, #d4f505);
-    color: #000000;
+    background: var(--chat-color1, #d4f505);
+    color: #ffffff;
 }
 
 [data-theme="dark"] #voiceBtn,
@@ -784,6 +792,7 @@ form.input-container {
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
@@ -1271,10 +1280,14 @@ form.input-container {
 }
 
 @keyframes thinkingBounce {
-    0%, 80%, 100% {
+
+    0%,
+    80%,
+    100% {
         transform: scale(0.8);
         opacity: 0.5;
     }
+
     40% {
         transform: scale(1);
         opacity: 1;
@@ -1331,6 +1344,7 @@ form.input-container {
         opacity: 0;
         transform: translateY(20px) scale(0.95);
     }
+
     to {
         opacity: 1;
         transform: translateY(0) scale(1);
@@ -1396,9 +1410,12 @@ form.input-container {
 }
 
 @keyframes bounce {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: translateX(-50%) translateY(0);
     }
+
     50% {
         transform: translateX(-50%) translateY(-5px);
     }
@@ -1432,10 +1449,14 @@ form.input-container {
 }
 
 @keyframes typing {
-    0%, 60%, 100% {
+
+    0%,
+    60%,
+    100% {
         transform: translateY(0);
     }
+
     30% {
         transform: translateY(-8px);
     }
-}
+}

ui/suite/chat/chat.html

@@ -14,34 +14,21 @@
         <div class="suggestions-container" id="suggestions"></div>
         <div class="mention-dropdown" id="mentionDropdown">
             <div class="mention-header">
-                <span class="mention-title" data-i18n="chat-mention-title"
-                    >Reference Entity</span
-                >
+                <span class="mention-title" data-i18n="chat-mention-title">Reference Entity</span>
             </div>
             <div class="mention-results" id="mentionResults"></div>
         </div>
         <form class="input-container" id="chatForm">
-            <input
-                name="content"
-                id="messageInput"
-                type="text"
-                placeholder="Message... (type @ to mention)"
-                data-i18n-placeholder="chat-placeholder"
-                autofocus
-                autocomplete="off"
-            />
-            <button
-                type="submit"
-                id="sendBtn"
-                title="Send"
-                data-i18n-title="chat-send"
-            >
+            <input name="content" id="messageInput" type="text" placeholder="Message... (type @ to mention)"
+                data-i18n-placeholder="chat-placeholder" autofocus autocomplete="off" />
+            <button type="submit" id="sendBtn" title="Send" data-i18n-title="chat-send">
                 ↑
             </button>
         </form>
     </footer>
     <button class="scroll-to-bottom" id="scrollToBottom" title="Scroll to bottom">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
             <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
     </button>
@@ -55,11 +42,7 @@
     <div class="entity-card-title"></div>
     <div class="entity-card-details"></div>
     <div class="entity-card-actions">
-        <button
-            class="entity-card-btn"
-            data-action="view"
-            data-i18n="action-view"
-        >
+        <button class="entity-card-btn" data-action="view" data-i18n="action-view">
             View
         </button>
     </div>
@@ -372,9 +355,9 @@
         function fetchEntityDetails(type, name) {
             return fetch(
                 "/api/search/entity?type=" +
-                    encodeURIComponent(type) +
-                    "&name=" +
-                    encodeURIComponent(name),
+                encodeURIComponent(type) +
+                "&name=" +
+                encodeURIComponent(name),
             )
                 .then(function (r) {
                     return r.json();
@@ -460,9 +443,9 @@
         function fetchEntitiesOfType(type, searchTerm) {
             fetch(
                 "/api/search/entities?type=" +
-                    encodeURIComponent(type) +
-                    "&q=" +
-                    encodeURIComponent(searchTerm || ""),
+                encodeURIComponent(type) +
+                "&q=" +
+                encodeURIComponent(searchTerm || ""),
             )
                 .then(function (r) {
                     return r.json();
@@ -522,8 +505,8 @@
 
                     var subtitle = item.subtitle
                         ? '<span class="mention-item-subtitle">' +
-                          escapeHtml(item.subtitle) +
-                          "</span>"
+                        escapeHtml(item.subtitle) +
+                        "</span>"
                         : "";
                     var hint = item.isTypeHint
                         ? '<span class="mention-item-hint">Type : to search</span>'
@@ -737,7 +720,9 @@
                 if (isStreaming) {
                     finalizeStreaming();
                 } else {
-                    addMessage("bot", data.content);
+                    if (data.content && data.content.trim() !== "") {
+                        addMessage("bot", data.content);
+                    }
                 }
                 isStreaming = false;
 
@@ -781,8 +766,8 @@
                 chip.textContent = suggestion.text || "Suggestion";
 
                 // Use window.sendMessage which is already exposed
-                chip.onclick = (function(sugg) {
-                    return function() {
+                chip.onclick = (function (sugg) {
+                    return function () {
                         console.log("Suggestion clicked:", sugg);
                         // Check if there's an action to parse
                         if (sugg.action) {
@@ -861,7 +846,7 @@
         window.sendMessage = sendMessage;
 
         // Expose session info for suggestion clicks
-        window.getChatSessionInfo = function() {
+        window.getChatSessionInfo = function () {
             return {
                 ws: ws,
                 currentBotId: currentBotId,
@@ -986,21 +971,22 @@
             var botName = window.__INITIAL_BOT_NAME__ || "default";
 
             fetch("/api/bot/config?bot_name=" + encodeURIComponent(botName))
-                .then(function(response) {
+                .then(function (response) {
                     return response.json();
                 })
-                .then(function(config) {
+                .then(function (config) {
                     if (!config) return;
 
                     // Get the theme manager's theme for this bot to check if user selected a different theme
                     var botId = botName.toLowerCase();
+                    var botThemeKey = "gb-theme-" + botId;
                     var botTheme = window.ThemeManager ? (
                         // Get bot-specific theme from theme manager's mapping
                         (window.ThemeManager.getAvailableThemes &&
-                         window.ThemeManager.getAvailableThemes().find(t => t.id === botId)) ||
+                            window.ThemeManager.getAvailableThemes().find(t => t.id === botId)) ||
                         // Fallback to localStorage
-                        localStorage.getItem("gb-theme")
-                    ) : localStorage.getItem("gb-theme");
+                        localStorage.getItem(botThemeKey)
+                    ) : localStorage.getItem(botThemeKey);
 
                     // Check if bot config has a theme-base setting
                     var configThemeBase = config.theme_base || config["theme-base"] || "light";
@@ -1008,10 +994,10 @@
                     // Only use bot config colors if:
                     // 1. No theme has been explicitly selected by user (localStorage empty or default)
                     // 2. AND the bot config's theme-base matches the current theme
-                    var localStorageTheme = localStorage.getItem("gb-theme");
+                    var localStorageTheme = localStorage.getItem(botThemeKey);
                     var useBotConfigColors = !localStorageTheme ||
-                                             localStorageTheme === "default" ||
-                                             localStorageTheme === configThemeBase;
+                        localStorageTheme === "default" ||
+                        localStorageTheme === configThemeBase;
 
                     // Apply colors from config (API returns snake_case)
                     var color1 = config.theme_color1 || config["theme-color1"] || config["Theme Color"] || "#3b82f6";
@@ -1021,6 +1007,7 @@
 
                     // Only set bot config colors if user hasn't selected a different theme
                     if (useBotConfigColors) {
+                        document.documentElement.setAttribute("data-has-bot-colors", "true");
                         document.documentElement.style.setProperty("--chat-color1", color1);
                         document.documentElement.style.setProperty("--chat-color2", color2);
                         document.documentElement.style.setProperty("--suggestion-color", color1);
@@ -1029,7 +1016,7 @@
                         document.documentElement.style.setProperty("--color2", color2);
                         document.documentElement.style.setProperty("--primary", color1);
                         document.documentElement.style.setProperty("--accent", color1);
-                        console.log("Bot config colors applied:", {color1: color1, color2: color2});
+                        console.log("Bot config colors applied:", { color1: color1, color2: color2 });
                     } else {
                         console.log("Bot config colors skipped - user selected custom theme:", localStorageTheme);
                     }
@@ -1051,7 +1038,7 @@
 
                     console.log("Bot config loaded:", { color1: color1, color2: color2, title: title, logo: logo });
                 })
-                .catch(function(e) {
+                .catch(function (e) {
                     console.log("Could not load bot config:", e);
                 });
         }
@@ -1163,4 +1150,4 @@
 
         console.log("Chat module initialized with @ mentions support");
     })();
-</script>
+</script>

ui/suite/default.gbui

@@ -51,10 +51,7 @@
             <!-- Right: Theme selector, Apps menu and user avatar -->
             <div class="header-right">
                 <!-- Theme dropdown selector -->
-                <div
-                    id="themeSelectorContainer"
-                    aria-label="Theme selector"
-                ></div>
+
 
                 <!-- Apps menu button -->
                 <button

ui/suite/js/theme-manager.js

@@ -67,7 +67,8 @@ const ThemeManager = (() => {
 
     if (!theme.file) {
       currentThemeId = "default";
-      localStorage.setItem("gb-theme", "default");
+      const botId = getCurrentBotId();
+      localStorage.setItem(`gb-theme-${botId}`, "default");
       // Re-enable sentient theme for default
       document.documentElement.setAttribute("data-theme", "sentient");
       updateDropdown();
@@ -81,7 +82,8 @@ const ThemeManager = (() => {
     link.onload = () => {
       console.log("✓ Theme loaded:", theme.name);
       currentThemeId = id;
-      localStorage.setItem("gb-theme", id);
+      const botId = getCurrentBotId();
+      localStorage.setItem(`gb-theme-${botId}`, id);
 
       // Keep data-theme="sentient" on html so CSS selectors work
       // The inline styles will override the colors
@@ -150,14 +152,16 @@ const ThemeManager = (() => {
           document.documentElement.style.setProperty("--border", borderHex);
         }
 
-        // Update ALL color-related CSS variables to match the theme
-        // This overrides any bot config colors
-        document.documentElement.style.setProperty("--chat-color1", `hsl(${primary})`);
-        document.documentElement.style.setProperty("--chat-color2", `hsl(${card})`);
-        document.documentElement.style.setProperty("--suggestion-color", `hsl(${primary})`);
-        document.documentElement.style.setProperty("--suggestion-bg", `hsl(${card})`);
-        document.documentElement.style.setProperty("--color1", `hsl(${primary})`);
-        document.documentElement.style.setProperty("--color2", `hsl(${card})`);
+        // Check if config.csv already set the primary color, we shouldn't wipe it
+        // Only update color and suggestion variables if they aren't marked as bot-config
+        if (document.documentElement.getAttribute("data-has-bot-colors") !== "true") {
+          document.documentElement.style.setProperty("--chat-color1", `hsl(${primary})`);
+          document.documentElement.style.setProperty("--chat-color2", `hsl(${card})`);
+          document.documentElement.style.setProperty("--suggestion-color", `hsl(${primary})`);
+          document.documentElement.style.setProperty("--suggestion-bg", `hsl(${card})`);
+          document.documentElement.style.setProperty("--color1", `hsl(${primary})`);
+          document.documentElement.style.setProperty("--color2", `hsl(${card})`);
+        }
 
         console.log("✓ Theme colors applied:", { bg: background, primary: primary });
         updateDropdown();
@@ -169,8 +173,7 @@ const ThemeManager = (() => {
   }
 
   function updateDropdown() {
-    const dd = document.getElementById("themeDropdown");
-    if (dd) dd.value = currentThemeId;
+    // Dropdown removed
   }
 
   function createDropdown() {
@@ -199,27 +202,29 @@ const ThemeManager = (() => {
 
     // Then load the UI theme (CSS theme)
     // Priority: 1) localStorage user preference, 2) bot-specific theme, 3) default
-    let saved = localStorage.getItem("gb-theme");
+    const botId = getCurrentBotId();
+    let saved = localStorage.getItem(`gb-theme-${botId}`);
     if (!saved || !themes.find((t) => t.id === saved)) {
       // No user preference, try bot-specific theme
-      const botId = getCurrentBotId();
       saved = botThemeMap[botId] || "light";
       // Save to localStorage so it persists
-      localStorage.setItem("gb-theme", saved);
+      localStorage.setItem(`gb-theme-${botId}`, saved);
     }
     if (!themes.find((t) => t.id === saved)) saved = "default";
     currentThemeId = saved;
     loadTheme(saved);
 
-    const container = document.getElementById("themeSelectorContainer");
-    if (container) container.appendChild(createDropdown());
+    // Dropdown injection removed
+    // const container = document.getElementById("themeSelectorContainer");
+    // if (container) container.appendChild(createDropdown());
 
     console.log("✓ Theme Manager initialized");
   }
 
   function setThemeFromServer(data) {
     // Save theme to localStorage for persistence across page loads
-    localStorage.setItem("gb-theme-data", JSON.stringify(data));
+    const botId = getCurrentBotId();
+    localStorage.setItem(`gb-theme-data-${botId}`, JSON.stringify(data));
 
     // Load base theme if specified
     if (data.theme_base) {
@@ -263,12 +268,13 @@ const ThemeManager = (() => {
 
   // Load saved theme from localStorage on page load
   function loadSavedTheme() {
-    const savedTheme = localStorage.getItem("gb-theme-data");
+    const botId = getCurrentBotId();
+    const savedTheme = localStorage.getItem(`gb-theme-data-${botId}`);
     if (savedTheme) {
       try {
         const data = JSON.parse(savedTheme);
         setThemeFromServer(data);
-        console.log("✓ Theme loaded from localStorage");
+        console.log(`✓ Theme loaded from localStorage for ${botId}`);
       } catch (e) {
         console.warn("Failed to load saved theme:", e);
       }