Remove chat header and fix theming from config.csv
Some checks failed
BotUI CI / build (push) Has been cancelled
Some checks failed
BotUI CI / build (push) Has been cancelled
- Remove chat header (logo and title) from chat window since logo will be displayed in top bar from config.csv - Update CSS to use --chat-color1 and --chat-color2 for all themed elements - Remove hardcoded theme overrides that interfered with config colors - Fix text contrast: bot messages now use color2 background with black text - Update suggestion buttons to use theme colors from config.csv - Clean up JavaScript to remove references to deleted header elements Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
a8bc5530b0
commit
af78f31565
2 changed files with 29 additions and 157 deletions
|
|
@ -94,38 +94,6 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Chat Header */
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
background: linear-gradient(135deg, var(--chat-color1, #8B4513) 0%, var(--chat-color2, #F5DEB3) 100%);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.bot-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.bot-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Connection Status - use shared styles from app.css */
|
||||
|
||||
@keyframes pulse {
|
||||
|
|
@ -271,31 +239,16 @@
|
|||
}
|
||||
|
||||
.user-message {
|
||||
background: var(--accent, var(--primary, #3b82f6));
|
||||
background: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
color: #ffffff !important;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Light accent themes need dark text on user messages */
|
||||
[data-theme="sentient"] .user-message,
|
||||
[data-theme="y2kglow"] .user-message,
|
||||
[data-theme="arcadeflash"] .user-message,
|
||||
[data-theme="green"] .user-message,
|
||||
[data-theme="jazzage"] .user-message,
|
||||
[data-theme="mellowgold"] .user-message,
|
||||
[data-theme="polaroidmemories"] .user-message,
|
||||
[data-theme="seasidepostcard"] .user-message,
|
||||
[data-theme="saturdaycartoons"] .user-message,
|
||||
[data-theme="light"] .user-message,
|
||||
[data-theme="typewriter"] .user-message,
|
||||
[data-theme="3dbevel"] .user-message {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.bot-message {
|
||||
background: var(--surface, var(--card, #2a2a2a));
|
||||
color: #ffffff !important;
|
||||
background: var(--chat-color2, var(--surface, var(--card, #2a2a2a)));
|
||||
color: #000000 !important;
|
||||
border-bottom-left-radius: 4px;
|
||||
border: 1px solid var(--chat-color1, rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.bot-message,
|
||||
|
|
@ -309,56 +262,6 @@
|
|||
.bot-message h2,
|
||||
.bot-message h3,
|
||||
.bot-message h4 {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Light background themes need dark bot message text */
|
||||
[data-theme="light"] .bot-message,
|
||||
[data-theme="light"] .bot-message p,
|
||||
[data-theme="light"] .bot-message span,
|
||||
[data-theme="light"] .bot-message li,
|
||||
[data-theme="light"] .bot-message a,
|
||||
[data-theme="light"] .bot-message strong,
|
||||
[data-theme="light"] .bot-message em,
|
||||
[data-theme="light"] .bot-message h1,
|
||||
[data-theme="light"] .bot-message h2,
|
||||
[data-theme="light"] .bot-message h3,
|
||||
[data-theme="light"] .bot-message h4,
|
||||
[data-theme="polaroidmemories"] .bot-message,
|
||||
[data-theme="polaroidmemories"] .bot-message p,
|
||||
[data-theme="polaroidmemories"] .bot-message span,
|
||||
[data-theme="polaroidmemories"] .bot-message li,
|
||||
[data-theme="polaroidmemories"] .bot-message a,
|
||||
[data-theme="polaroidmemories"] .bot-message h1,
|
||||
[data-theme="polaroidmemories"] .bot-message h2,
|
||||
[data-theme="seasidepostcard"] .bot-message,
|
||||
[data-theme="seasidepostcard"] .bot-message p,
|
||||
[data-theme="seasidepostcard"] .bot-message span,
|
||||
[data-theme="seasidepostcard"] .bot-message li,
|
||||
[data-theme="seasidepostcard"] .bot-message a,
|
||||
[data-theme="seasidepostcard"] .bot-message h1,
|
||||
[data-theme="seasidepostcard"] .bot-message h2,
|
||||
[data-theme="saturdaycartoons"] .bot-message,
|
||||
[data-theme="saturdaycartoons"] .bot-message p,
|
||||
[data-theme="saturdaycartoons"] .bot-message span,
|
||||
[data-theme="saturdaycartoons"] .bot-message li,
|
||||
[data-theme="saturdaycartoons"] .bot-message a,
|
||||
[data-theme="saturdaycartoons"] .bot-message h1,
|
||||
[data-theme="saturdaycartoons"] .bot-message h2,
|
||||
[data-theme="typewriter"] .bot-message,
|
||||
[data-theme="typewriter"] .bot-message p,
|
||||
[data-theme="typewriter"] .bot-message span,
|
||||
[data-theme="typewriter"] .bot-message li,
|
||||
[data-theme="typewriter"] .bot-message a,
|
||||
[data-theme="typewriter"] .bot-message h1,
|
||||
[data-theme="typewriter"] .bot-message h2,
|
||||
[data-theme="3dbevel"] .bot-message,
|
||||
[data-theme="3dbevel"] .bot-message p,
|
||||
[data-theme="3dbevel"] .bot-message span,
|
||||
[data-theme="3dbevel"] .bot-message li,
|
||||
[data-theme="3dbevel"] .bot-message a,
|
||||
[data-theme="3dbevel"] .bot-message h1,
|
||||
[data-theme="3dbevel"] .bot-message h2 {
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
|
|
@ -644,9 +547,9 @@ footer {
|
|||
.suggestion-button {
|
||||
padding: 10px 18px;
|
||||
border-radius: 24px;
|
||||
border: 2px solid var(--suggestion-color, #4a9eff);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ffffff;
|
||||
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);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
|
@ -658,7 +561,7 @@ footer {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.suggestion-chip::before,
|
||||
|
|
@ -666,7 +569,7 @@ footer {
|
|||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--accent, #3b82f6);
|
||||
background: var(--chat-color1, var(--accent, #3b82f6));
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: inherit;
|
||||
|
|
@ -675,9 +578,9 @@ footer {
|
|||
|
||||
.suggestion-chip:hover,
|
||||
.suggestion-button:hover {
|
||||
background: var(--suggestion-color, #4a9eff);
|
||||
color: #000000;
|
||||
border-color: var(--suggestion-color, #6bb3ff);
|
||||
background: var(--chat-color1, var(--suggestion-color, #4a9eff));
|
||||
color: #ffffff;
|
||||
border-color: var(--chat-color1, var(--suggestion-color, #6bb3ff));
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
text-shadow: none;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,6 @@
|
|||
<span class="connection-text">Connecting...</span>
|
||||
</div>
|
||||
|
||||
<!-- Bot Header with Logo -->
|
||||
<div class="chat-header" id="chatHeader">
|
||||
<img class="bot-logo" id="botLogo" src="" alt="Bot Logo" />
|
||||
<h1 class="bot-title" id="botTitle">Chat</h1>
|
||||
</div>
|
||||
|
||||
<main id="messages"></main>
|
||||
|
||||
<footer>
|
||||
|
|
@ -967,35 +961,24 @@
|
|||
function applyThemeData(themeData) {
|
||||
console.log("Applying theme data:", themeData);
|
||||
|
||||
var color1 = themeData.color1 || themeData.data?.color1 || "#8B4513";
|
||||
var color2 = themeData.color2 || themeData.data?.color2 || "#F5DEB3";
|
||||
var color1 = themeData.color1 || themeData.data?.color1 || "#3b82f6";
|
||||
var color2 = themeData.color2 || themeData.data?.color2 || "#f5deb3";
|
||||
var logo = themeData.logo_url || themeData.data?.logo_url || "";
|
||||
var title = themeData.title || themeData.data?.title || window.__INITIAL_BOT_NAME__ || "Chat";
|
||||
|
||||
// Set CSS variables for colors
|
||||
// Set CSS variables for colors on document element
|
||||
document.documentElement.style.setProperty("--chat-color1", color1);
|
||||
document.documentElement.style.setProperty("--chat-color2", color2);
|
||||
|
||||
// Update suggestion button colors to match theme
|
||||
document.documentElement.style.setProperty("--suggestion-color", color1);
|
||||
document.documentElement.style.setProperty("--suggestion-bg", color2);
|
||||
|
||||
// Set logo
|
||||
var logoEl = document.getElementById("botLogo");
|
||||
if (logoEl) {
|
||||
if (logo) {
|
||||
logoEl.src = logo;
|
||||
logoEl.style.display = "block";
|
||||
} else {
|
||||
logoEl.style.display = "none";
|
||||
}
|
||||
}
|
||||
// Also set on root for better cascading
|
||||
document.documentElement.style.setProperty("--color1", color1);
|
||||
document.documentElement.style.setProperty("--color2", color2);
|
||||
|
||||
// Set title
|
||||
var titleEl = document.getElementById("botTitle");
|
||||
if (titleEl) {
|
||||
titleEl.textContent = title;
|
||||
}
|
||||
// Update suggestion button colors to match theme
|
||||
document.documentElement.style.setProperty("--primary", color1);
|
||||
document.documentElement.style.setProperty("--accent", color1);
|
||||
|
||||
console.log("Theme applied:", { color1: color1, color2: color2, logo: logo, title: title });
|
||||
}
|
||||
|
|
@ -1012,35 +995,21 @@
|
|||
if (!config) return;
|
||||
|
||||
// Apply colors from config
|
||||
var color1 = config["theme-color1"] || config["Theme Color"] || "#8B4513";
|
||||
var color2 = config["theme-color2"] || "#F5DEB3";
|
||||
var logo = config["theme-logo"] || "";
|
||||
var color1 = config["theme-color1"] || config["Theme Color"] || "#3b82f6";
|
||||
var color2 = config["theme-color2"] || "#f5deb3";
|
||||
var title = config["theme-title"] || botName;
|
||||
|
||||
// Set CSS variables for colors
|
||||
// Set CSS variables for colors on document element
|
||||
document.documentElement.style.setProperty("--chat-color1", color1);
|
||||
document.documentElement.style.setProperty("--chat-color2", color2);
|
||||
|
||||
// Update suggestion button colors to match theme
|
||||
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);
|
||||
|
||||
// Set logo
|
||||
var logoEl = document.getElementById("botLogo");
|
||||
if (logoEl && logo) {
|
||||
logoEl.src = logo;
|
||||
logoEl.style.display = "block";
|
||||
} else if (logoEl) {
|
||||
logoEl.style.display = "none";
|
||||
}
|
||||
|
||||
// Set title
|
||||
var titleEl = document.getElementById("botTitle");
|
||||
if (titleEl) {
|
||||
titleEl.textContent = title;
|
||||
}
|
||||
|
||||
console.log("Bot config loaded:", { color1: color1, color2: color2, logo: logo, title: title });
|
||||
console.log("Bot config loaded:", { color1: color1, color2: color2, title: title });
|
||||
})
|
||||
.catch(function(e) {
|
||||
console.log("Could not load bot config:", e);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue