fix: Update theme selector to change chat colors and add login page logo
- 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:
parent
4f654dd95d
commit
a29255c848
4 changed files with 124 additions and 24 deletions
|
|
@ -75,6 +75,18 @@
|
|||
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 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
|
|
@ -585,9 +597,12 @@
|
|||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<div class="login-logo">🤖</div>
|
||||
<h1 class="login-title">Welcome Back</h1>
|
||||
<p class="login-subtitle">
|
||||
<div class="login-logo" id="login-logo">
|
||||
<img id="login-logo-img" src="" alt="Logo" style="display:none; width:100%; height:100%; object-fit:contain;">
|
||||
<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
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1018,6 +1033,55 @@
|
|||
</div>
|
||||
|
||||
<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
|
||||
function togglePassword() {
|
||||
const passwordInput = document.getElementById("password");
|
||||
|
|
|
|||
|
|
@ -30,15 +30,6 @@
|
|||
autofocus
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
id="voiceBtn"
|
||||
title="Voice"
|
||||
data-i18n-title="chat-voice"
|
||||
style="display: none"
|
||||
>
|
||||
🎤
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
id="sendBtn"
|
||||
|
|
@ -166,6 +157,7 @@
|
|||
var currentStreamingContent = "";
|
||||
var reconnectAttempts = 0;
|
||||
var maxReconnectAttempts = 5;
|
||||
var disconnectNotified = false;
|
||||
var isUserScrolling = false;
|
||||
|
||||
var mentionState = {
|
||||
|
|
@ -898,6 +890,7 @@
|
|||
ws.onopen = function () {
|
||||
console.log("WebSocket connected");
|
||||
reconnectAttempts = 0;
|
||||
disconnectNotified = false;
|
||||
updateConnectionStatus("connected");
|
||||
};
|
||||
|
||||
|
|
@ -944,7 +937,10 @@
|
|||
|
||||
ws.onclose = function () {
|
||||
updateConnectionStatus("disconnected");
|
||||
notify("Disconnected from chat server", "error");
|
||||
if (!disconnectNotified) {
|
||||
notify("Disconnected from chat server", "error");
|
||||
disconnectNotified = true;
|
||||
}
|
||||
if (reconnectAttempts < maxReconnectAttempts) {
|
||||
reconnectAttempts++;
|
||||
updateConnectionStatus("connecting");
|
||||
|
|
@ -995,22 +991,44 @@
|
|||
.then(function(config) {
|
||||
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)
|
||||
var color1 = config.theme_color1 || config["theme-color1"] || config["Theme Color"] || "#3b82f6";
|
||||
var color2 = config.theme_color2 || config["theme-color2"] || "#f5deb3";
|
||||
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
|
||||
document.documentElement.style.setProperty("--chat-color1", color1);
|
||||
document.documentElement.style.setProperty("--chat-color2", color2);
|
||||
document.documentElement.style.setProperty("--suggestion-color", color1);
|
||||
document.documentElement.style.setProperty("--suggestion-bg", color2);
|
||||
document.documentElement.style.setProperty("--color1", color1);
|
||||
document.documentElement.style.setProperty("--color2", color2);
|
||||
document.documentElement.style.setProperty("--primary", color1);
|
||||
document.documentElement.style.setProperty("--accent", color1);
|
||||
// Only set bot config colors if user hasn't selected a custom theme
|
||||
if (!useThemeColors) {
|
||||
document.documentElement.style.setProperty("--chat-color1", color1);
|
||||
document.documentElement.style.setProperty("--chat-color2", color2);
|
||||
document.documentElement.style.setProperty("--suggestion-color", color1);
|
||||
document.documentElement.style.setProperty("--suggestion-bg", color2);
|
||||
document.documentElement.style.setProperty("--color1", color1);
|
||||
document.documentElement.style.setProperty("--color2", color2);
|
||||
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) {
|
||||
console.log("Could not load bot config:", e);
|
||||
|
|
|
|||
|
|
@ -1096,6 +1096,10 @@ body {
|
|||
/* Theme logo image - when src is set, show as image */
|
||||
.logo-icon.logo-icon-img[src:not=""]] {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* Hide SVG when logo image is shown */
|
||||
|
|
|
|||
|
|
@ -75,11 +75,25 @@ const ThemeManager = (() => {
|
|||
const link = document.createElement("link");
|
||||
link.id = "theme-css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = `/public/themes/${theme.file}`;
|
||||
link.href = `/suite/public/themes/${theme.file}`;
|
||||
link.onload = () => {
|
||||
console.log("✓ Theme loaded:", theme.name);
|
||||
currentThemeId = 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();
|
||||
subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name }));
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue