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

Compare commits

base: GeneralBots:4987a15858a09566913e1f81fa43b0bce901529e
Branches Tags
GeneralBots:main
GeneralBots:master
..
compare: GeneralBots:a8bff4e1a7ff8512e1e2eb5368981d4c0904f41f
Branches Tags
GeneralBots:main
GeneralBots:master

No commits in common. "4987a15858a09566913e1f81fa43b0bce901529e" and "a8bff4e1a7ff8512e1e2eb5368981d4c0904f41f" have entirely different histories.
4987a15858 ... a8bff4e1a7

7 changed files with 2912 additions and 2996 deletions
Show stats Expand all files Collapse all files

4
src/ui_server/mod.rs
View file

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

3364
ui/minimal/index.html
View file

File diff suppressed because it is too large Load diff

51
ui/suite/chat/chat.css
View file

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

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

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

2357
ui/suite/chat/projector.html
View file

File diff suppressed because it is too large Load diff

5
ui/suite/default.gbui
View file

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

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

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