Compare commits
No commits in common. "af78f3156594c3bdbb9d76c31b26bcaf30abf77c" and "661edc09fa1063673e84b63d2dcb5cfbe0f91232" have entirely different histories.
af78f31565
...
661edc09fa
17 changed files with 166 additions and 1088 deletions
4
build.rs
4
build.rs
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
fn main() {
|
||||
let manifest_dir = std::env::var("CARGO_MANIFEST_DIR").unwrap();
|
||||
let ui_path = std::path::Path::new(&manifest_dir).join("ui");
|
||||
println!("cargo:rustc-env=BOTUI_UI_PATH={}", ui_path.display());
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@ use tower_http::services::{ServeDir, ServeFile};
|
|||
|
||||
#[cfg(feature = "embed-ui")]
|
||||
#[derive(RustEmbed)]
|
||||
#[folder = "ui"]
|
||||
#[folder = "$CARGO_MANIFEST_DIR/ui"]
|
||||
struct Assets;
|
||||
|
||||
use crate::shared::AppState;
|
||||
|
|
@ -164,12 +164,8 @@ pub async fn index(OriginalUri(uri): OriginalUri) -> Response {
|
|||
let mut start_idx = 1;
|
||||
let known_dirs = ["suite", "js", "css", "vendor", "assets", "public", "partials", "settings", "auth", "about", "drive", "chat", "tasks", "admin", "mail", "calendar", "meet", "docs", "sheet", "slides", "paper", "research", "sources", "learn", "analytics", "dashboards", "monitoring", "people", "crm", "tickets", "billing", "products", "video", "player", "canvas", "social", "project", "goals", "workspace", "designer"];
|
||||
|
||||
// Special case: /auth/suite/* should map to suite/* (auth is a route, not a directory)
|
||||
if path_parts.get(1) == Some(&"auth") && path_parts.get(2) == Some(&"suite") {
|
||||
start_idx = 2;
|
||||
}
|
||||
// Skip bot name if present (first segment is not a known dir, second segment is)
|
||||
else if path_parts.len() > start_idx + 1
|
||||
if path_parts.len() > start_idx + 1
|
||||
&& !known_dirs.contains(&path_parts[start_idx])
|
||||
&& known_dirs.contains(&path_parts[start_idx + 1])
|
||||
{
|
||||
|
|
@ -342,17 +338,8 @@ pub async fn serve_suite(bot_name: Option<String>) -> impl IntoResponse {
|
|||
|
||||
// Inject base tag and bot_name into the page
|
||||
if let Some(head_end) = html.find("</head>") {
|
||||
// Check if bot_name is actually an auth page (login.html, register.html, etc.)
|
||||
// These are not actual bots, so we should use "/" as base href
|
||||
let is_auth_page = bot_name.as_ref()
|
||||
.map(|n| n.ends_with(".html") || n == "login" || n == "register" || n == "forgot-password" || n == "reset-password")
|
||||
.unwrap_or(false);
|
||||
|
||||
// Set base href to include bot context if present (e.g., /edu/)
|
||||
// But NOT for auth pages - those use root
|
||||
let base_href = if is_auth_page {
|
||||
"/".to_string()
|
||||
} else if let Some(ref name) = bot_name {
|
||||
let base_href = if let Some(ref name) = bot_name {
|
||||
format!("/{}/", name)
|
||||
} else {
|
||||
"/".to_string()
|
||||
|
|
@ -360,8 +347,6 @@ pub async fn serve_suite(bot_name: Option<String>) -> impl IntoResponse {
|
|||
let base_tag = format!(r#"<base href="{}">"#, base_href);
|
||||
html.insert_str(head_end, &base_tag);
|
||||
|
||||
// Only inject bot_name script for actual bots, not auth pages
|
||||
if !is_auth_page {
|
||||
if let Some(name) = bot_name {
|
||||
info!("serve_suite: Injecting bot_name '{}' into page with base href='{}'", name, base_href);
|
||||
let bot_script = format!(
|
||||
|
|
@ -373,9 +358,6 @@ pub async fn serve_suite(bot_name: Option<String>) -> impl IntoResponse {
|
|||
} else {
|
||||
info!("serve_suite: Successfully injected base tag (no bot_name)");
|
||||
}
|
||||
} else {
|
||||
info!("serve_suite: Auth page detected, skipping bot_name injection (base href='{}')", base_href);
|
||||
}
|
||||
} else {
|
||||
error!("serve_suite: Failed to find </head> tag to inject content");
|
||||
}
|
||||
|
|
@ -1168,23 +1150,6 @@ async fn handle_embedded_root_asset(
|
|||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "embed-ui")]
|
||||
async fn handle_auth_asset(axum::extract::Path(path): axum::extract::Path<String>) -> impl IntoResponse {
|
||||
let normalized_path = path.strip_prefix('/').unwrap_or(&path);
|
||||
let asset_path = format!("suite/auth/{}", normalized_path);
|
||||
match Assets::get(&asset_path) {
|
||||
Some(content) => {
|
||||
let mime = mime_guess::from_path(&asset_path).first_or_octet_stream();
|
||||
(
|
||||
[(axum::http::header::CONTENT_TYPE, mime.as_ref())],
|
||||
content.data,
|
||||
)
|
||||
.into_response()
|
||||
}
|
||||
None => StatusCode::NOT_FOUND.into_response(),
|
||||
}
|
||||
}
|
||||
|
||||
fn add_static_routes(router: Router<AppState>, _suite_path: &Path) -> Router<AppState> {
|
||||
#[cfg(feature = "embed-ui")]
|
||||
{
|
||||
|
|
@ -1230,16 +1195,6 @@ pub fn configure_router() -> Router {
|
|||
.route("/minimal", get(serve_minimal))
|
||||
.route("/suite", get(serve_suite));
|
||||
|
||||
#[cfg(not(feature = "embed-ui"))]
|
||||
{
|
||||
router = router.nest_service("/auth", ServeDir::new(suite_path.join("auth")));
|
||||
}
|
||||
|
||||
#[cfg(feature = "embed-ui")]
|
||||
{
|
||||
router = router.route("/auth/*path", get(handle_auth_asset));
|
||||
}
|
||||
|
||||
router = add_static_routes(router, &suite_path);
|
||||
|
||||
router.fallback(get(index)).with_state(state)
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
<script>
|
||||
// Configuration
|
||||
const CONFIG = {
|
||||
serverUrl: window.BOTSERVER_URL || 'http://localhost:9000',
|
||||
serverUrl: window.BOTSERVER_URL || 'http://localhost:8088',
|
||||
maxMessages: 10, // Keep memory low
|
||||
maxMsgLen: 100, // Truncate long messages
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
<title>General Bots</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<script>
|
||||
// BotServer URL - configurable via window.BOTSERVER_URL or defaults to same origin port 9000
|
||||
// BotServer URL - configurable via window.BOTSERVER_URL or defaults to same origin port 8088
|
||||
const BOTSERVER_URL =
|
||||
window.BOTSERVER_URL || "https://localhost:9000";
|
||||
window.BOTSERVER_URL || "https://localhost:8088";
|
||||
const BOTSERVER_WS_URL = BOTSERVER_URL.replace(
|
||||
"https://",
|
||||
"wss://",
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
/* Dark Theme for General Bots */
|
||||
:root {
|
||||
--color-primary: #d4f505;
|
||||
--color-secondary: #00d4aa;
|
||||
--color-accent: #818cf8;
|
||||
|
||||
--color-bg: #0f172a;
|
||||
--color-bg-secondary: #1e293b;
|
||||
--color-bg-tertiary: #334155;
|
||||
|
||||
--color-text: #f1f5f9;
|
||||
--color-text-secondary: #cbd5e1;
|
||||
--color-text-muted: #64748b;
|
||||
|
||||
--color-border: #334155;
|
||||
--color-border-light: #1e293b;
|
||||
|
||||
--color-success: #22c55e;
|
||||
--color-warning: #f59e0b;
|
||||
--color-error: #ef4444;
|
||||
--color-info: #3b82f6;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(212, 245, 5, 0.1);
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
/* Light Theme for General Bots */
|
||||
:root {
|
||||
--color-primary: #d4f505;
|
||||
--color-secondary: #00d4aa;
|
||||
--color-accent: #6366f1;
|
||||
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-secondary: #f8fafc;
|
||||
--color-bg-tertiary: #f1f5f9;
|
||||
|
||||
--color-text: #0f172a;
|
||||
--color-text-secondary: #475569;
|
||||
--color-text-muted: #94a3b8;
|
||||
|
||||
--color-border: #e2e8f0;
|
||||
--color-border-light: #f1f5f9;
|
||||
|
||||
--color-success: #22c55e;
|
||||
--color-warning: #f59e0b;
|
||||
--color-error: #ef4444;
|
||||
--color-info: #3b82f6;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(212, 245, 5, 0.1);
|
||||
}
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
/* Y2K Glow Theme for General Bots */
|
||||
:root {
|
||||
--color-primary: #ff00ff;
|
||||
--color-secondary: #00ffff;
|
||||
--color-accent: #ffff00;
|
||||
|
||||
--color-bg: #0a0a1a;
|
||||
--color-bg-secondary: #1a0a2e;
|
||||
--color-bg-tertiary: #2d1b4e;
|
||||
|
||||
--color-text: #00ff00;
|
||||
--color-text-secondary: #ff00ff;
|
||||
--color-text-muted: #00ffff;
|
||||
|
||||
--color-border: #ff00ff;
|
||||
--color-border-light: #00ffff;
|
||||
|
||||
--color-success: #00ff00;
|
||||
--color-warning: #ffff00;
|
||||
--color-error: #ff0066;
|
||||
--color-info: #00ffff;
|
||||
|
||||
--shadow-glow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
|
||||
--shadow-sm: 0 0 5px rgba(255, 0, 255, 0.5);
|
||||
--shadow: 0 0 10px rgba(255, 0, 255, 0.7);
|
||||
--shadow-md: 0 0 15px rgba(255, 0, 255, 0.8);
|
||||
--shadow-lg: 0 0 25px rgba(255, 0, 255, 0.9);
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
text-shadow: 0 0 5px var(--color-text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-secondary);
|
||||
text-shadow: 0 0 5px var(--color-secondary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary);
|
||||
text-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
|
||||
color: var(--color-bg);
|
||||
border: 2px solid var(--color-primary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
|
||||
border-color: var(--color-secondary);
|
||||
box-shadow: 0 0 15px var(--color-secondary), 0 0 30px var(--color-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
|
||||
border: 2px solid var(--color-primary);
|
||||
box-shadow: var(--shadow);
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from {
|
||||
box-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 10px var(--color-secondary), 0 0 20px var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
background: var(--color-bg-secondary);
|
||||
border: 2px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
box-shadow: 0 0 5px var(--color-border);
|
||||
}
|
||||
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent), 0 0 30px var(--color-accent);
|
||||
}
|
||||
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
text-shadow: 0 0 3px var(--color-text-muted);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(var(--color-primary), var(--color-secondary));
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 10px var(--color-primary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(var(--color-secondary), var(--color-accent));
|
||||
}
|
||||
|
|
@ -21,8 +21,6 @@
|
|||
<link rel="stylesheet" href="/css/app.css" />
|
||||
<link rel="stylesheet" href="/themes/sentient/sentient.css" />
|
||||
<link rel="stylesheet" href="/css/ai-panel.css" />
|
||||
<!-- Config color overrides - must load AFTER theme CSS -->
|
||||
<link rel="stylesheet" href="/css/config-colors.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Skip navigation link for accessibility -->
|
||||
|
|
|
|||
|
|
@ -112,34 +112,32 @@
|
|||
#messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent, #3b82f6) var(--surface, #1a1a24);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Enhanced custom scrollbar */
|
||||
/* Custom scrollbar for markers */
|
||||
#messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
#messages::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: var(--surface, #1a1a24);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#messages::-webkit-scrollbar-thumb {
|
||||
background: var(--border, rgba(255, 255, 255, 0.2));
|
||||
background: var(--accent, #3b82f6);
|
||||
border-radius: 3px;
|
||||
transition: background 0.2s;
|
||||
border: 1px solid var(--surface, #1a1a24);
|
||||
}
|
||||
|
||||
#messages::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent, #3b82f6);
|
||||
background: var(--accent-hover, #2563eb);
|
||||
}
|
||||
|
||||
/* Scrollbar markers container */
|
||||
|
|
@ -239,16 +237,31 @@
|
|||
}
|
||||
|
||||
.user-message {
|
||||
background: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
background: var(--accent, var(--primary, #3b82f6));
|
||||
color: #ffffff !important;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bot-message {
|
||||
background: var(--chat-color2, var(--surface, var(--card, #2a2a2a)));
|
||||
/* 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;
|
||||
border-bottom-left-radius: 4px;
|
||||
border: 1px solid var(--chat-color1, rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.bot-message,
|
||||
|
|
@ -262,6 +275,56 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -540,61 +603,23 @@ footer {
|
|||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.suggestion-chip,
|
||||
.suggestion-button {
|
||||
padding: 10px 18px;
|
||||
border-radius: 24px;
|
||||
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;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
background: var(--secondary-bg, #f9fafb);
|
||||
color: var(--text-primary, #374151);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
text-shadow: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.suggestion-chip::before,
|
||||
.suggestion-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--chat-color1, var(--accent, #3b82f6));
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.suggestion-chip:hover,
|
||||
.suggestion-button:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
.suggestion-chip:hover::before,
|
||||
.suggestion-button:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.suggestion-chip:active,
|
||||
.suggestion-button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
|
||||
background: var(--accent-color, #3b82f6);
|
||||
color: white;
|
||||
border-color: var(--accent-color, #3b82f6);
|
||||
}
|
||||
|
||||
/* Input Container */
|
||||
|
|
@ -712,38 +737,28 @@ form.input-container {
|
|||
position: fixed;
|
||||
bottom: 100px;
|
||||
right: 20px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--accent, #3b82f6);
|
||||
color: white;
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
background: var(--primary-bg, #ffffff);
|
||||
color: var(--text-primary, #374151);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
|
||||
font-size: 18px;
|
||||
transition: all 0.2s;
|
||||
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(10px);
|
||||
}
|
||||
|
||||
.scroll-to-bottom.visible {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.scroll-to-bottom:hover {
|
||||
background: var(--accent-hover, #2563eb);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.scroll-to-bottom:active {
|
||||
transform: scale(0.95);
|
||||
background: var(--bg-hover, #f3f4f6);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
|
@ -1231,207 +1246,3 @@ form.input-container {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Enhanced Chat Elements ===== */
|
||||
|
||||
/* Thinking Indicator */
|
||||
.thinking-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
background: var(--surface, rgba(42, 42, 42, 0.8));
|
||||
border-radius: 16px;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.thinking-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.thinking-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--accent, #3b82f6);
|
||||
border-radius: 50%;
|
||||
animation: thinkingBounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.thinking-dot:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.thinking-dot:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes thinkingBounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Connection Status */
|
||||
.connection-status {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: var(--surface, rgba(26, 26, 36, 0.95));
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border, rgba(42, 42, 42, 0.5));
|
||||
border-radius: 24px;
|
||||
font-size: 13px;
|
||||
color: var(--text, #ffffff);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.connection-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.connection-status.connected .connection-status-dot {
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
|
||||
}
|
||||
|
||||
.connection-status.disconnected .connection-status-dot {
|
||||
background: #ef4444;
|
||||
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.connection-status.connecting .connection-status-dot {
|
||||
background: #f59e0b;
|
||||
box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
|
||||
}
|
||||
|
||||
/* Message Animations */
|
||||
@keyframes messageIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
animation: messageIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Bot Message Glow Effect */
|
||||
.message.bot .message-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.bot .message-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
background: var(--accent-glow, rgba(59, 130, 246, 0.1));
|
||||
border-radius: 18px;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.message.bot:hover .message-content::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Enhanced User Message */
|
||||
.message.user .message-content {
|
||||
box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.message.user:hover .message-content {
|
||||
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
|
||||
transform: translateY(-1px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
#messages {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* New Message Indicator */
|
||||
.new-message-indicator {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 6px 12px;
|
||||
background: var(--accent, #3b82f6);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
animation: bounce 0.5s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Typing Indicator */
|
||||
.typing-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
background: var(--surface, #2a2a2a);
|
||||
border-radius: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--text-secondary, #888);
|
||||
border-radius: 50%;
|
||||
animation: typing 1.4s infinite;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
<link rel="stylesheet" href="/suite/chat/chat.css" />
|
||||
|
||||
<div class="chat-layout" id="chat-app">
|
||||
<!-- Connection Status -->
|
||||
<div class="connection-status connecting" id="connectionStatus" style="display: none;">
|
||||
<span class="connection-status-dot"></span>
|
||||
<span class="connection-text">Connecting...</span>
|
||||
</div>
|
||||
|
||||
<main id="messages"></main>
|
||||
|
||||
<footer>
|
||||
|
|
@ -48,11 +42,7 @@
|
|||
</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">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="scroll-to-bottom" id="scrollToBottom">↓</button>
|
||||
</div>
|
||||
|
||||
<div class="entity-card-tooltip" id="entityCardTooltip">
|
||||
|
|
@ -165,7 +155,6 @@
|
|||
var currentStreamingContent = "";
|
||||
var reconnectAttempts = 0;
|
||||
var maxReconnectAttempts = 5;
|
||||
var isUserScrolling = false;
|
||||
|
||||
var mentionState = {
|
||||
active: false,
|
||||
|
|
@ -181,61 +170,6 @@
|
|||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Scroll handling
|
||||
function scrollToBottom(animate) {
|
||||
var messages = document.getElementById("messages");
|
||||
if (messages) {
|
||||
if (animate) {
|
||||
messages.scrollTo({
|
||||
top: messages.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
} else {
|
||||
messages.scrollTop = messages.scrollHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateScrollButton() {
|
||||
var messages = document.getElementById("messages");
|
||||
var scrollBtn = document.getElementById("scrollToBottom");
|
||||
if (!messages || !scrollBtn) return;
|
||||
|
||||
var isNearBottom =
|
||||
messages.scrollHeight - messages.scrollTop - messages.clientHeight <
|
||||
100;
|
||||
|
||||
if (isNearBottom) {
|
||||
scrollBtn.classList.remove("visible");
|
||||
} else {
|
||||
scrollBtn.classList.add("visible");
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll-to-bottom button click
|
||||
var scrollBtn = document.getElementById("scrollToBottom");
|
||||
if (scrollBtn) {
|
||||
scrollBtn.addEventListener("click", function () {
|
||||
scrollToBottom(true);
|
||||
isUserScrolling = false;
|
||||
});
|
||||
}
|
||||
|
||||
// Detect user scrolling
|
||||
var messagesEl = document.getElementById("messages");
|
||||
if (messagesEl) {
|
||||
messagesEl.addEventListener("scroll", function () {
|
||||
isUserScrolling = true;
|
||||
updateScrollButton();
|
||||
|
||||
// Reset isUserScrolling after 2 seconds of no scrolling
|
||||
clearTimeout(messagesEl.scrollTimeout);
|
||||
messagesEl.scrollTimeout = setTimeout(function () {
|
||||
isUserScrolling = false;
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function renderMentionInMessage(content) {
|
||||
return content.replace(
|
||||
/@(\w+):([^\s]+)/g,
|
||||
|
|
@ -293,13 +227,7 @@
|
|||
}
|
||||
|
||||
messages.appendChild(div);
|
||||
|
||||
// Auto-scroll to bottom unless user is manually scrolling
|
||||
if (!isUserScrolling) {
|
||||
scrollToBottom(true);
|
||||
} else {
|
||||
updateScrollButton();
|
||||
}
|
||||
messages.scrollTop = messages.scrollHeight;
|
||||
|
||||
setupMentionClickHandlers(div);
|
||||
}
|
||||
|
|
@ -747,11 +675,6 @@
|
|||
addMessage("bot", data.content);
|
||||
}
|
||||
isStreaming = false;
|
||||
|
||||
// Render suggestions when message is complete
|
||||
if (data.suggestions && Array.isArray(data.suggestions) && data.suggestions.length > 0) {
|
||||
renderSuggestions(data.suggestions);
|
||||
}
|
||||
} else {
|
||||
if (!isStreaming) {
|
||||
isStreaming = true;
|
||||
|
|
@ -769,83 +692,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Render suggestion buttons
|
||||
function renderSuggestions(suggestions) {
|
||||
var suggestionsEl = document.getElementById("suggestions");
|
||||
if (!suggestionsEl) {
|
||||
console.warn("Suggestions container not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear existing suggestions
|
||||
suggestionsEl.innerHTML = "";
|
||||
|
||||
console.log("Rendering " + suggestions.length + " suggestions");
|
||||
|
||||
suggestions.forEach(function (suggestion) {
|
||||
var chip = document.createElement("button");
|
||||
chip.className = "suggestion-chip";
|
||||
chip.textContent = suggestion.text || "Suggestion";
|
||||
|
||||
// Use window.sendMessage which is already exposed
|
||||
chip.onclick = (function(sugg) {
|
||||
return function() {
|
||||
console.log("Suggestion clicked:", sugg);
|
||||
// Check if there's an action to parse
|
||||
if (sugg.action) {
|
||||
try {
|
||||
var action = typeof sugg.action === "string"
|
||||
? JSON.parse(sugg.action)
|
||||
: sugg.action;
|
||||
|
||||
console.log("Parsed action:", action);
|
||||
|
||||
if (action.type === "invoke_tool") {
|
||||
// Send the tool name as text - the backend will handle tool invocation
|
||||
window.sendMessage(action.tool);
|
||||
} else if (action.type === "send_message") {
|
||||
window.sendMessage(action.message || sugg.text);
|
||||
} else if (action.type === "select_context") {
|
||||
window.sendMessage(action.context);
|
||||
} else {
|
||||
window.sendMessage(sugg.text);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to parse action:", e, "falling back to text");
|
||||
window.sendMessage(sugg.text);
|
||||
}
|
||||
} else {
|
||||
// No action, just send the text
|
||||
window.sendMessage(sugg.text);
|
||||
}
|
||||
};
|
||||
})(suggestion);
|
||||
|
||||
suggestionsEl.appendChild(chip);
|
||||
});
|
||||
}
|
||||
|
||||
function sendMessage(messageContent) {
|
||||
function sendMessage() {
|
||||
var input = document.getElementById("messageInput");
|
||||
if (!input) {
|
||||
console.error("Chat input not found");
|
||||
return;
|
||||
}
|
||||
|
||||
// If no messageContent provided, read from input
|
||||
var content = messageContent || input.value.trim();
|
||||
var content = input.value.trim();
|
||||
if (!content) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If called from input field (no messageContent provided), clear input
|
||||
if (!messageContent) {
|
||||
hideMentionDropdown();
|
||||
addMessage("user", content);
|
||||
input.value = "";
|
||||
input.focus();
|
||||
}
|
||||
|
||||
addMessage("user", content);
|
||||
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(
|
||||
|
|
@ -866,24 +728,11 @@
|
|||
|
||||
window.sendMessage = sendMessage;
|
||||
|
||||
// Expose session info for suggestion clicks
|
||||
window.getChatSessionInfo = function() {
|
||||
return {
|
||||
ws: ws,
|
||||
currentBotId: currentBotId,
|
||||
currentUserId: currentUserId,
|
||||
currentSessionId: currentSessionId,
|
||||
currentBotName: currentBotName
|
||||
};
|
||||
};
|
||||
|
||||
function connectWebSocket() {
|
||||
if (ws) {
|
||||
ws.close();
|
||||
}
|
||||
|
||||
updateConnectionStatus("connecting");
|
||||
|
||||
var url =
|
||||
WS_URL +
|
||||
"?session_id=" +
|
||||
|
|
@ -897,7 +746,6 @@
|
|||
ws.onopen = function () {
|
||||
console.log("WebSocket connected");
|
||||
reconnectAttempts = 0;
|
||||
updateConnectionStatus("connected");
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
|
|
@ -908,11 +756,13 @@
|
|||
// Ignore connection confirmation
|
||||
if (data.type === "connected") return;
|
||||
|
||||
// Process system events (theme changes, etc)
|
||||
// Ignore system events (theme changes, etc)
|
||||
if (data.event) {
|
||||
if (data.event === "change_theme") {
|
||||
applyThemeData(data.data || {});
|
||||
}
|
||||
console.log(
|
||||
"System event received, ignoring:",
|
||||
data.event,
|
||||
data,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -921,7 +771,10 @@
|
|||
try {
|
||||
var contentObj = JSON.parse(data.content);
|
||||
if (contentObj.event === "change_theme") {
|
||||
applyThemeData(contentObj.data || {});
|
||||
console.log(
|
||||
"Theme change event in content, ignoring:",
|
||||
contentObj,
|
||||
);
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
|
|
@ -942,83 +795,19 @@
|
|||
};
|
||||
|
||||
ws.onclose = function () {
|
||||
updateConnectionStatus("disconnected");
|
||||
notify("Disconnected from chat server", "error");
|
||||
if (reconnectAttempts < maxReconnectAttempts) {
|
||||
reconnectAttempts++;
|
||||
updateConnectionStatus("connecting");
|
||||
setTimeout(connectWebSocket, 1000 * reconnectAttempts);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = function (e) {
|
||||
console.error("WebSocket error:", e);
|
||||
updateConnectionStatus("disconnected");
|
||||
};
|
||||
}
|
||||
|
||||
// Apply theme data from WebSocket events
|
||||
function applyThemeData(themeData) {
|
||||
console.log("Applying theme data:", themeData);
|
||||
|
||||
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 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);
|
||||
|
||||
// Also set on root for better cascading
|
||||
document.documentElement.style.setProperty("--color1", color1);
|
||||
document.documentElement.style.setProperty("--color2", color2);
|
||||
|
||||
// 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 });
|
||||
}
|
||||
|
||||
// Load bot config and apply colors/logo
|
||||
function loadBotConfig() {
|
||||
var botName = window.__INITIAL_BOT_NAME__ || "default";
|
||||
|
||||
fetch("/api/bot/config?bot_name=" + encodeURIComponent(botName))
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function(config) {
|
||||
if (!config) return;
|
||||
|
||||
// Apply colors from config
|
||||
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 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);
|
||||
|
||||
console.log("Bot config loaded:", { color1: color1, color2: color2, title: title });
|
||||
})
|
||||
.catch(function(e) {
|
||||
console.log("Could not load bot config:", e);
|
||||
});
|
||||
}
|
||||
|
||||
function initChat() {
|
||||
// Load bot config first
|
||||
loadBotConfig();
|
||||
// Just proceed with chat initialization - no auth check
|
||||
proceedWithChatInit();
|
||||
}
|
||||
|
|
@ -1049,31 +838,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
function updateConnectionStatus(status) {
|
||||
var statusEl = document.getElementById("connectionStatus");
|
||||
if (!statusEl) return;
|
||||
|
||||
statusEl.className = "connection-status " + status;
|
||||
|
||||
var statusText = statusEl.querySelector(".connection-text");
|
||||
if (statusText) {
|
||||
switch (status) {
|
||||
case "connected":
|
||||
statusText.textContent = "Connected";
|
||||
statusEl.style.display = "none";
|
||||
break;
|
||||
case "disconnected":
|
||||
statusText.textContent = "Disconnected";
|
||||
statusEl.style.display = "flex";
|
||||
break;
|
||||
case "connecting":
|
||||
statusText.textContent = "Connecting...";
|
||||
statusEl.style.display = "flex";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setupEventHandlers() {
|
||||
var form = document.getElementById("chatForm");
|
||||
var input = document.getElementById("messageInput");
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
/* Config Color Overrides */
|
||||
/* Maps theme-color1 and theme-color2 from config.csv to actual theme variables */
|
||||
|
||||
:root {
|
||||
/* Use --color1 and --color2 from config.csv, with fallback defaults */
|
||||
--sentient-accent: var(--color1, #3b82f6);
|
||||
--primary: var(--color1, #3b82f6);
|
||||
--primary-hover: color-mix(in srgb, var(--color1, #3b82f6) 85%, black);
|
||||
--primary-light: color-mix(in srgb, var(--color1, #3b82f6) 10%, transparent);
|
||||
--chart-1: var(--color1, #3b82f6);
|
||||
--chart-2: var(--color2, #f59e0b);
|
||||
--ring: var(--color1, #3b82f6);
|
||||
|
||||
/* Background can use color2 for subtle tint */
|
||||
/* --sentient-bg-primary stays white/light for text readability */
|
||||
}
|
||||
|
|
@ -50,10 +50,10 @@
|
|||
|
||||
<!-- SECURITY BOOTSTRAP - MUST load immediately after HTMX -->
|
||||
<!-- This provides centralized auth for ALL apps: HTMX, fetch, XHR -->
|
||||
<script src="suite/js/security-bootstrap.js?v=20260207b"></script>
|
||||
<script src="suite/js/security-bootstrap.js?v=20260110"></script>
|
||||
|
||||
<!-- ERROR REPORTER - Captures JS errors and sends to server log -->
|
||||
<script src="suite/js/error-reporter.js?v=20260207c"></script>
|
||||
<script src="suite/js/error-reporter.js"></script>
|
||||
|
||||
<!-- i18n -->
|
||||
<script src="suite/js/i18n.js"></script>
|
||||
|
|
|
|||
|
|
@ -36,8 +36,6 @@
|
|||
|
||||
if (!response.ok) {
|
||||
console.warn('[ErrorReporter] Failed to send errors:', response.status);
|
||||
} else {
|
||||
console.log('[ErrorReporter] Sent', errorsToReport.length, 'errors to server');
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[ErrorReporter] Failed to send errors:', e.message);
|
||||
|
|
@ -78,15 +76,6 @@
|
|||
report: function(error, context) {
|
||||
queueError(formatError(error, context));
|
||||
},
|
||||
reportNetworkError: function(url, status, statusText) {
|
||||
queueError({
|
||||
type: 'NetworkError',
|
||||
message: `Failed to load ${url}: ${status} ${statusText}`,
|
||||
url: window.location.href,
|
||||
timestamp: new Date().toISOString(),
|
||||
context: { url, status, statusText }
|
||||
});
|
||||
},
|
||||
flush: function() {
|
||||
reportErrors();
|
||||
}
|
||||
|
|
@ -121,13 +110,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
function initNavigationTracking() {
|
||||
if (!document.body) {
|
||||
setTimeout(initNavigationTracking, 50);
|
||||
return;
|
||||
}
|
||||
|
||||
if (document.body) {
|
||||
document.body.addEventListener('click', function(e) {
|
||||
const target = e.target.closest('[data-section]');
|
||||
if (target) {
|
||||
|
|
@ -140,7 +122,6 @@
|
|||
}
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', function(e) {
|
||||
const oldURL = new URL(e.oldURL);
|
||||
|
|
@ -151,40 +132,4 @@
|
|||
});
|
||||
|
||||
console.log('[NavigationLogger] Navigation tracking initialized');
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initNavigationTracking);
|
||||
} else {
|
||||
initNavigationTracking();
|
||||
}
|
||||
|
||||
// Intercept link onload/onerror events to catch CSS/image load failures
|
||||
const originalCreateElement = document.createElement;
|
||||
document.createElement = function(tagName) {
|
||||
const element = originalCreateElement.call(document, tagName);
|
||||
if (tagName.toLowerCase() === 'link') {
|
||||
element.addEventListener('error', function() {
|
||||
if (this.href && window.ErrorReporter && window.ErrorReporter.reportNetworkError) {
|
||||
window.ErrorReporter.reportNetworkError(this.href, 'LOAD_FAILED', 'Resource failed to load');
|
||||
}
|
||||
});
|
||||
}
|
||||
return element;
|
||||
};
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
const failedResources = performance.getEntriesByType('resource').filter(entry =>
|
||||
entry.transferSize === 0 && entry.decodedBodySize > 0 && !entry.name.includes('anon') && entry.duration > 100
|
||||
);
|
||||
|
||||
if (failedResources.length > 0) {
|
||||
console.warn('[ErrorReporter] Detected potentially failed resources:', failedResources);
|
||||
failedResources.forEach(resource => {
|
||||
window.ErrorReporter.reportNetworkError(resource.name, 'FAILED', 'Resource load timeout/failure');
|
||||
});
|
||||
}
|
||||
}, 5000);
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -208,14 +208,6 @@
|
|||
// Debug logging
|
||||
console.log("handleWebSocketMessage called with:", { messageType, message });
|
||||
|
||||
// Handle suggestions array from BotResponse
|
||||
if (message.suggestions && Array.isArray(message.suggestions) && message.suggestions.length > 0) {
|
||||
clearSuggestions();
|
||||
message.suggestions.forEach(suggestion => {
|
||||
addSuggestionButton(suggestion.text, suggestion.value || suggestion.text);
|
||||
});
|
||||
}
|
||||
|
||||
switch (messageType) {
|
||||
case "message":
|
||||
appendMessage(message);
|
||||
|
|
@ -254,31 +246,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Clear all suggestions
|
||||
function clearSuggestions() {
|
||||
const suggestionsEl = document.getElementById("suggestions");
|
||||
if (suggestionsEl) {
|
||||
suggestionsEl.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Add suggestion button with value
|
||||
function addSuggestionButton(text, value) {
|
||||
const suggestionsEl = document.getElementById("suggestions");
|
||||
if (!suggestionsEl) return;
|
||||
|
||||
const chip = document.createElement("button");
|
||||
chip.className = "suggestion-chip";
|
||||
chip.textContent = text;
|
||||
chip.setAttribute("hx-post", "/api/sessions/current/message");
|
||||
chip.setAttribute("hx-vals", JSON.stringify({ content: value }));
|
||||
chip.setAttribute("hx-target", "#messages");
|
||||
chip.setAttribute("hx-swap", "beforeend");
|
||||
|
||||
suggestionsEl.appendChild(chip);
|
||||
htmx.process(chip);
|
||||
}
|
||||
|
||||
// Append message to chat
|
||||
function appendMessage(message) {
|
||||
const messagesEl = document.getElementById("messages");
|
||||
|
|
|
|||
|
|
@ -210,14 +210,10 @@
|
|||
return originalFetch
|
||||
.call(window, input, init)
|
||||
.then(function (response) {
|
||||
var url = typeof input === "string" ? input : input.url;
|
||||
|
||||
if (response.status === 401) {
|
||||
var url = typeof input === "string" ? input : input.url;
|
||||
self.handleUnauthorized(url);
|
||||
} else if (!response.ok && window.ErrorReporter && window.ErrorReporter.reportNetworkError) {
|
||||
window.ErrorReporter.reportNetworkError(url, response.status, response.statusText);
|
||||
}
|
||||
|
||||
return response;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -698,20 +698,15 @@ const Omnibox = {
|
|||
|
||||
// Initialize Omnibox when DOM is ready
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Detect bot name from pathname (e.g., /bot/cristo -> bot_name = "cristo", /edu -> bot_name = "edu")
|
||||
// Detect bot name from pathname (e.g., /edu -> bot_name = "edu")
|
||||
const detectBotFromPath = () => {
|
||||
const pathname = window.location.pathname;
|
||||
// Remove leading/trailing slashes and split
|
||||
// Remove leading/trailing slashes and get first segment
|
||||
const segments = pathname.replace(/^\/|\/$/g, "").split("/");
|
||||
|
||||
// Handle /bot/{bot_name} pattern
|
||||
if (segments[0] === "bot" && segments[1]) {
|
||||
return segments[1];
|
||||
}
|
||||
|
||||
// For other patterns, use first segment if it's not a known route
|
||||
const firstSegment = segments[0];
|
||||
const knownRoutes = ["suite", "auth", "api", "static", "public", "bot"];
|
||||
|
||||
// If first segment is not a known route, treat it as bot name
|
||||
const knownRoutes = ["suite", "auth", "api", "static", "public"];
|
||||
if (firstSegment && !knownRoutes.includes(firstSegment)) {
|
||||
return firstSegment;
|
||||
}
|
||||
|
|
@ -1029,10 +1024,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Skip SPA initialization on auth pages (login, register, etc.)
|
||||
if (window.location.pathname.startsWith("/auth/")) {
|
||||
console.log("[SPA] Skipping initialization on auth page");
|
||||
} else if (document.readyState === "complete") {
|
||||
if (document.readyState === "complete") {
|
||||
setTimeout(initialLoad, 50);
|
||||
} else {
|
||||
window.addEventListener("load", () => {
|
||||
|
|
|
|||
|
|
@ -3,27 +3,6 @@ const ThemeManager = (() => {
|
|||
let currentThemeId = "default";
|
||||
let subscribers = [];
|
||||
|
||||
// Bot ID to theme mapping (configured via config.csv theme-base field)
|
||||
const botThemeMap = {
|
||||
// Default bot uses light theme with brown accents
|
||||
"default": "light",
|
||||
// Cristo bot uses mellowgold theme with earth tones
|
||||
"cristo": "mellowgold",
|
||||
// Salesianos bot uses light theme with blue accents
|
||||
"salesianos": "light",
|
||||
};
|
||||
|
||||
// Detect current bot from URL path
|
||||
function getCurrentBotId() {
|
||||
const path = window.location.pathname;
|
||||
// Match patterns like /bot/cristo, /cristo, etc.
|
||||
const match = path.match(/(?:\/bot\/)?([a-z0-9-]+)/i);
|
||||
if (match && match[1]) {
|
||||
return match[1].toLowerCase();
|
||||
}
|
||||
return "default";
|
||||
}
|
||||
|
||||
const themes = [
|
||||
{ id: "default", name: "🎨 Default", file: "light.css" },
|
||||
{ id: "light", name: "☀️ Light", file: "light.css" },
|
||||
|
|
@ -75,7 +54,7 @@ const ThemeManager = (() => {
|
|||
const link = document.createElement("link");
|
||||
link.id = "theme-css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = `/public/themes/${theme.file}`;
|
||||
link.href = `public/themes/${theme.file}`;
|
||||
link.onload = () => {
|
||||
console.log("✓ Theme loaded:", theme.name);
|
||||
currentThemeId = id;
|
||||
|
|
@ -108,19 +87,7 @@ const ThemeManager = (() => {
|
|||
}
|
||||
|
||||
function init() {
|
||||
// First, load saved bot theme from config.csv (if available)
|
||||
loadSavedTheme();
|
||||
|
||||
// Then load the UI theme (CSS theme)
|
||||
// Priority: 1) localStorage user preference, 2) bot-specific theme, 3) default
|
||||
let saved = localStorage.getItem("gb-theme");
|
||||
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);
|
||||
}
|
||||
let saved = localStorage.getItem("gb-theme") || "default";
|
||||
if (!themes.find((t) => t.id === saved)) saved = "default";
|
||||
currentThemeId = saved;
|
||||
loadTheme(saved);
|
||||
|
|
@ -132,56 +99,21 @@ const ThemeManager = (() => {
|
|||
}
|
||||
|
||||
function setThemeFromServer(data) {
|
||||
// Save theme to localStorage for persistence across page loads
|
||||
localStorage.setItem("gb-theme-data", JSON.stringify(data));
|
||||
|
||||
// Load base theme if specified
|
||||
if (data.theme_base) {
|
||||
loadTheme(data.theme_base);
|
||||
}
|
||||
|
||||
if (data.logo_url) {
|
||||
document
|
||||
.querySelectorAll(".logo-icon, .assistant-avatar")
|
||||
.forEach((el) => {
|
||||
el.style.backgroundImage = `url("${data.logo_url}")`;
|
||||
el.style.backgroundSize = "contain";
|
||||
el.style.backgroundRepeat = "no-repeat";
|
||||
el.style.backgroundPosition = "center";
|
||||
// Clear emoji text content when logo image is applied
|
||||
if (el.classList.contains("logo-icon")) {
|
||||
el.textContent = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
if (data.color1) {
|
||||
document.documentElement.style.setProperty("--color1", data.color1);
|
||||
}
|
||||
if (data.color2) {
|
||||
document.documentElement.style.setProperty("--color2", data.color2);
|
||||
}
|
||||
if (data.title) document.title = data.title;
|
||||
if (data.logo_text) {
|
||||
document.querySelectorAll(".logo span, .logo-text").forEach((el) => {
|
||||
document.querySelectorAll(".logo-text").forEach((el) => {
|
||||
el.textContent = data.logo_text;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Load saved theme from localStorage on page load
|
||||
function loadSavedTheme() {
|
||||
const savedTheme = localStorage.getItem("gb-theme-data");
|
||||
if (savedTheme) {
|
||||
try {
|
||||
const data = JSON.parse(savedTheme);
|
||||
setThemeFromServer(data);
|
||||
console.log("✓ Theme loaded from localStorage");
|
||||
} catch (e) {
|
||||
console.warn("Failed to load saved theme:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyCustomizations() {
|
||||
// Called by modules if needed
|
||||
}
|
||||
|
|
@ -194,7 +126,6 @@ const ThemeManager = (() => {
|
|||
init,
|
||||
loadTheme,
|
||||
setThemeFromServer,
|
||||
loadSavedTheme,
|
||||
applyCustomizations,
|
||||
subscribe,
|
||||
getAvailableThemes: () => themes,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue