GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Update theme selector to change chat colors and add login page logo

Browse source 
- Fix theme CSS path from /public/themes/ to /suite/public/themes/
- When user selects theme, update chat color variables to match
- Only apply bot config colors if user hasn't selected custom theme
- Add bot logo support to login page
- Add CSS styling for login logo image

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Rodrigo Rodriguez 2026-02-15 21:33:18 +00:00
parent 4f654dd95d
commit a29255c848
4 changed files with 124 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
ui/suite/auth/login.html
View file

@ -75,6 +75,18 @@
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3); box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
} }
.login-logo img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 18px;
}
.login-logo:has(img[src]) {
background: transparent;
box-shadow: none;
}
.login-title { .login-title {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 700; font-weight: 700;
@ -585,9 +597,12 @@
<body> <body>
<div class="login-container"> <div class="login-container">
<div class="login-header"> <div class="login-header">
<div class="login-logo">🤖</div> <div class="login-logo" id="login-logo">
<h1 class="login-title">Welcome Back</h1> <img id="login-logo-img" src="" alt="Logo" style="display:none; width:100%; height:100%; object-fit:contain;">
<p class="login-subtitle"> <span id="login-logo-default">🤖</span>
</div>
<h1 class="login-title" id="login-title">Welcome Back</h1>
<p class="login-subtitle" id="login-subtitle">
Sign in to your General Bots account Sign in to your General Bots account
</p> </p>
</div> </div>
@ -1018,6 +1033,55 @@
</div> </div>
<script> <script>
// Load bot config and apply logo/title
async function loadBotConfig() {
try {
// Get bot name from URL path
const pathParts = window.location.pathname.split('/');
const botName = pathParts[1] || 'default';
// Fetch bot config
const response = await fetch(`/api/bot/config?bot_name=${botName}`);
if (response.ok) {
const config = await response.json();
// Apply logo if provided
const logo = config.theme_logo || config["theme-logo"] || "";
if (logo) {
const logoImg = document.getElementById("login-logo-img");
const logoDefault = document.getElementById("login-logo-default");
const logoContainer = document.getElementById("login-logo");
if (logoImg) {
logoImg.src = logo;
logoImg.style.display = "block";
}
if (logoDefault) {
logoDefault.style.display = "none";
}
}
// Apply title if provided
const title = config.theme_title || config["theme-title"] || "";
if (title) {
const titleEl = document.getElementById("login-title");
if (titleEl) {
titleEl.textContent = title;
}
const subtitleEl = document.getElementById("login-subtitle");
if (subtitleEl) {
subtitleEl.textContent = "Sign in to your account";
}
}
}
} catch (e) {
console.log("Could not load bot config:", e);
}
}
// Load bot config on page load
loadBotConfig();
// Password visibility toggle // Password visibility toggle
function togglePassword() { function togglePassword() {
const passwordInput = document.getElementById("password"); const passwordInput = document.getElementById("password");

58
ui/suite/chat/chat.html
View file

@ -30,15 +30,6 @@
autofocus autofocus
autocomplete="off" autocomplete="off"
/> />
<button
type="button"
id="voiceBtn"
title="Voice"
data-i18n-title="chat-voice"
style="display: none"
>
🎤
</button>
<button <button
type="submit" type="submit"
id="sendBtn" id="sendBtn"
@ -166,6 +157,7 @@
var currentStreamingContent = ""; var currentStreamingContent = "";
var reconnectAttempts = 0; var reconnectAttempts = 0;
var maxReconnectAttempts = 5; var maxReconnectAttempts = 5;
var disconnectNotified = false;
var isUserScrolling = false; var isUserScrolling = false;
var mentionState = { var mentionState = {
@ -898,6 +890,7 @@
ws.onopen = function () { ws.onopen = function () {
console.log("WebSocket connected"); console.log("WebSocket connected");
reconnectAttempts = 0; reconnectAttempts = 0;
disconnectNotified = false;
updateConnectionStatus("connected"); updateConnectionStatus("connected");
}; };
@ -944,7 +937,10 @@
ws.onclose = function () { ws.onclose = function () {
updateConnectionStatus("disconnected"); updateConnectionStatus("disconnected");
notify("Disconnected from chat server", "error"); if (!disconnectNotified) {
notify("Disconnected from chat server", "error");
disconnectNotified = true;
}
if (reconnectAttempts < maxReconnectAttempts) { if (reconnectAttempts < maxReconnectAttempts) {
reconnectAttempts++; reconnectAttempts++;
updateConnectionStatus("connecting"); updateConnectionStatus("connecting");
@ -995,22 +991,44 @@
.then(function(config) { .then(function(config) {
if (!config) return; if (!config) return;
// Check if user has explicitly selected a theme (not the default)
var userTheme = localStorage.getItem("gb-theme");
var useThemeColors = userTheme && userTheme !== "default" && userTheme !== "light";
// Apply colors from config (API returns snake_case) // Apply colors from config (API returns snake_case)
var color1 = config.theme_color1 || config["theme-color1"] || config["Theme Color"] || "#3b82f6"; var color1 = config.theme_color1 || config["theme-color1"] || config["Theme Color"] || "#3b82f6";
var color2 = config.theme_color2 || config["theme-color2"] || "#f5deb3"; var color2 = config.theme_color2 || config["theme-color2"] || "#f5deb3";
var title = config.theme_title || config["theme-title"] || botName; var title = config.theme_title || config["theme-title"] || botName;
var logo = config.theme_logo || config["theme-logo"] || "";
// Set CSS variables for colors on document element // Only set bot config colors if user hasn't selected a custom theme
document.documentElement.style.setProperty("--chat-color1", color1); if (!useThemeColors) {
document.documentElement.style.setProperty("--chat-color2", color2); document.documentElement.style.setProperty("--chat-color1", color1);
document.documentElement.style.setProperty("--suggestion-color", color1); document.documentElement.style.setProperty("--chat-color2", color2);
document.documentElement.style.setProperty("--suggestion-bg", color2); document.documentElement.style.setProperty("--suggestion-color", color1);
document.documentElement.style.setProperty("--color1", color1); document.documentElement.style.setProperty("--suggestion-bg", color2);
document.documentElement.style.setProperty("--color2", color2); document.documentElement.style.setProperty("--color1", color1);
document.documentElement.style.setProperty("--primary", color1); document.documentElement.style.setProperty("--color2", color2);
document.documentElement.style.setProperty("--accent", color1); document.documentElement.style.setProperty("--primary", color1);
document.documentElement.style.setProperty("--accent", color1);
}
console.log("Bot config loaded:", { color1: color1, color2: color2, title: title }); // Update logo if provided
if (logo) {
var logoImg = document.querySelector(".logo-icon-img");
if (logoImg) {
logoImg.src = logo;
logoImg.alt = title || botName;
logoImg.style.display = "block";
}
// Hide the SVG logo when image logo is used
var logoSvg = document.querySelector(".logo-icon-svg");
if (logoSvg) {
logoSvg.style.display = "none";
}
}
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); console.log("Could not load bot config:", e);

4
ui/suite/css/app.css
View file

@ -1096,6 +1096,10 @@ body {
/* Theme logo image - when src is set, show as image */ /* Theme logo image - when src is set, show as image */
.logo-icon.logo-icon-img[src:not=""]] { .logo-icon.logo-icon-img[src:not=""]] {
display: block; display: block;
width: auto;
height: 40px;
object-fit: contain;
filter: none;
} }
/* Hide SVG when logo image is shown */ /* Hide SVG when logo image is shown */

16
ui/suite/js/theme-manager.js
View file

@ -75,11 +75,25 @@ const ThemeManager = (() => {
const link = document.createElement("link"); const link = document.createElement("link");
link.id = "theme-css"; link.id = "theme-css";
link.rel = "stylesheet"; link.rel = "stylesheet";
link.href = `/public/themes/${theme.file}`; link.href = `/suite/public/themes/${theme.file}`;
link.onload = () => { link.onload = () => {
console.log("✓ Theme loaded:", theme.name); console.log("✓ Theme loaded:", theme.name);
currentThemeId = id; currentThemeId = id;
localStorage.setItem("gb-theme", id); localStorage.setItem("gb-theme", id);
// Get the theme's primary color from CSS variables
const rootStyle = getComputedStyle(document.documentElement);
const primaryColor = rootStyle.getPropertyValue("--primary")?.trim() || "#3b82f6";
const cardColor = rootStyle.getPropertyValue("--card")?.trim() || "#fafafa";
// Update chat-specific CSS variables to match the theme
document.documentElement.style.setProperty("--chat-color1", primaryColor);
document.documentElement.style.setProperty("--chat-color2", cardColor);
document.documentElement.style.setProperty("--suggestion-color", primaryColor);
document.documentElement.style.setProperty("--suggestion-bg", cardColor);
console.log("✓ Chat colors updated to match theme:", { primary: primaryColor, card: cardColor });
updateDropdown(); updateDropdown();
subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name })); subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name }));
}; };