1349 lines
60 KiB
HTML
1349 lines
60 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>General Bots</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="General Bots - AI-powered workspace"
|
|
/>
|
|
<meta name="theme-color" content="#d4f505" />
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
<link rel="stylesheet" href="css/apps-extended.css" />
|
|
<link rel="stylesheet" href="css/components.css" />
|
|
<link rel="stylesheet" href="css/base.css" />
|
|
<link rel="stylesheet" href="css/theme-sentient.css" />
|
|
|
|
<!-- App-specific CSS -->
|
|
<link rel="stylesheet" href="chat/chat.css" />
|
|
<link rel="stylesheet" href="calendar/calendar.css" />
|
|
<link rel="stylesheet" href="drive/drive.css" />
|
|
<link rel="stylesheet" href="mail/mail.css" />
|
|
<link rel="stylesheet" href="meet/meet.css" />
|
|
<link rel="stylesheet" href="paper/paper.css" />
|
|
<link rel="stylesheet" href="research/research.css" />
|
|
<link rel="stylesheet" href="tasks/tasks.css" />
|
|
<link rel="stylesheet" href="analytics/analytics.css" />
|
|
<link rel="stylesheet" href="monitoring/monitoring.css" />
|
|
|
|
<!-- Local Libraries (no external CDN dependencies) -->
|
|
<script src="js/vendor/htmx.min.js"></script>
|
|
<script src="js/vendor/htmx-ws.js"></script>
|
|
<script src="js/vendor/htmx-json-enc.js"></script>
|
|
<script src="js/vendor/marked.min.js"></script>
|
|
|
|
<!-- Enable HTMX to process inline scripts in swapped content -->
|
|
<script>
|
|
htmx.config.allowEval = true;
|
|
htmx.config.includeIndicatorStyles = false;
|
|
</script>
|
|
</head>
|
|
|
|
<body data-theme="sentient">
|
|
<!-- Loading overlay -->
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
|
|
<!-- Floating header -->
|
|
<header class="float-header" role="banner">
|
|
<!-- Left: Logo + App Tabs -->
|
|
<div class="header-left">
|
|
<button
|
|
class="logo-wrapper"
|
|
onclick="window.location.href='/#chat'"
|
|
title="General Bots"
|
|
aria-label="General Bots - Home"
|
|
>
|
|
<div
|
|
class="logo-icon"
|
|
role="img"
|
|
aria-label="General Bots logo"
|
|
></div>
|
|
</button>
|
|
|
|
<!-- Main App Tabs -->
|
|
<nav class="header-app-tabs">
|
|
<a
|
|
class="app-tab active"
|
|
href="#chat"
|
|
hx-get="/suite/chat/chat.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#chat"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
|
/>
|
|
</svg>
|
|
<span>Chat</span>
|
|
</a>
|
|
<a
|
|
class="app-tab"
|
|
href="#mail"
|
|
hx-get="/suite/mail/mail.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#mail"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
|
|
/>
|
|
<polyline points="22,6 12,13 2,6" />
|
|
</svg>
|
|
<span>Email</span>
|
|
</a>
|
|
<a
|
|
class="app-tab"
|
|
href="#calendar"
|
|
hx-get="/suite/calendar/calendar.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#calendar"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<rect
|
|
x="3"
|
|
y="4"
|
|
width="18"
|
|
height="18"
|
|
rx="2"
|
|
ry="2"
|
|
/>
|
|
<line x1="16" y1="2" x2="16" y2="6" />
|
|
<line x1="8" y1="2" x2="8" y2="6" />
|
|
<line x1="3" y1="10" x2="21" y2="10" />
|
|
</svg>
|
|
<span>Calendar</span>
|
|
</a>
|
|
<a
|
|
class="app-tab"
|
|
href="#tasks"
|
|
hx-get="/suite/tasks/tasks.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#tasks"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M9 11l3 3L22 4" />
|
|
<path
|
|
d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
|
|
/>
|
|
</svg>
|
|
<span>Tasks</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Apps menu button (launcher for all apps) -->
|
|
<button
|
|
class="icon-button apps-button"
|
|
id="appsButton"
|
|
title="All Applications"
|
|
aria-label="Open applications menu"
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="5" cy="5" r="2"></circle>
|
|
<circle cx="12" cy="5" r="2"></circle>
|
|
<circle cx="19" cy="5" r="2"></circle>
|
|
<circle cx="5" cy="12" r="2"></circle>
|
|
<circle cx="12" cy="12" r="2"></circle>
|
|
<circle cx="19" cy="12" r="2"></circle>
|
|
<circle cx="5" cy="19" r="2"></circle>
|
|
<circle cx="12" cy="19" r="2"></circle>
|
|
<circle cx="19" cy="19" r="2"></circle>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Center: Search -->
|
|
<div class="header-center">
|
|
<div class="header-search">
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.35-4.35" />
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
class="search-input"
|
|
placeholder="Search..."
|
|
id="globalSearch"
|
|
/>
|
|
<kbd class="search-shortcut">⌘K</kbd>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Notifications + User -->
|
|
<div class="header-right">
|
|
<button class="icon-button" title="Notifications">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
|
</svg>
|
|
<span class="notification-badge">3</span>
|
|
</button>
|
|
<button
|
|
class="icon-button"
|
|
id="settingsBtn"
|
|
title="Settings"
|
|
aria-expanded="false"
|
|
aria-haspopup="true"
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Settings/Theme Panel -->
|
|
<div
|
|
class="settings-panel"
|
|
id="settingsPanel"
|
|
role="menu"
|
|
aria-label="Settings"
|
|
>
|
|
<div class="settings-panel-title">Theme</div>
|
|
<div class="theme-grid">
|
|
<!-- Core Themes -->
|
|
<button
|
|
class="theme-option theme-sentient"
|
|
data-theme="sentient"
|
|
title="Sentient"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🤖 Sentient</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-dark"
|
|
data-theme="dark"
|
|
title="Dark"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🌑 Dark</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-light"
|
|
data-theme="light"
|
|
title="Light"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">☀️ Light</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-blue"
|
|
data-theme="blue"
|
|
title="Ocean"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🌊 Ocean</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-purple"
|
|
data-theme="purple"
|
|
title="Violet"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">💜 Violet</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-green"
|
|
data-theme="green"
|
|
title="Forest"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🌲 Forest</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-orange"
|
|
data-theme="orange"
|
|
title="Sunset"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🌅 Sunset</span>
|
|
</button>
|
|
<!-- Retro Themes -->
|
|
<button
|
|
class="theme-option theme-cyberpunk"
|
|
data-theme="cyberpunk"
|
|
title="Cyberpunk"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🌃 Cyberpunk</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-retrowave"
|
|
data-theme="retrowave"
|
|
title="Retrowave"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🌴 Retrowave</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-vapordream"
|
|
data-theme="vapordream"
|
|
title="Vapor Dream"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name"
|
|
>💭 Vapor Dream</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-y2kglow"
|
|
data-theme="y2kglow"
|
|
title="Y2K"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">✨ Y2K</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-arcadeflash"
|
|
data-theme="arcadeflash"
|
|
title="Arcade"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🕹️ Arcade</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-discofever"
|
|
data-theme="discofever"
|
|
title="Disco"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🪩 Disco</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-grungeera"
|
|
data-theme="grungeera"
|
|
title="Grunge"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🎸 Grunge</span>
|
|
</button>
|
|
<!-- Classic Themes -->
|
|
<button
|
|
class="theme-option theme-jazzage"
|
|
data-theme="jazzage"
|
|
title="Jazz Age"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🎺 Jazz Age</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-mellowgold"
|
|
data-theme="mellowgold"
|
|
title="Mellow Gold"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name"
|
|
>🌻 Mellow Gold</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-midcenturymod"
|
|
data-theme="midcenturymod"
|
|
title="Mid Century"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name"
|
|
>🏠 Mid Century</span
|
|
>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-polaroidmemories"
|
|
data-theme="polaroidmemories"
|
|
title="Polaroid"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">📷 Polaroid</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-saturdaycartoons"
|
|
data-theme="saturdaycartoons"
|
|
title="Cartoons"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">📺 Cartoons</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-seasidepostcard"
|
|
data-theme="seasidepostcard"
|
|
title="Seaside"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🏖️ Seaside</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-typewriter"
|
|
data-theme="typewriter"
|
|
title="Typewriter"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">⌨️ Typewriter</span>
|
|
</button>
|
|
<!-- Tech Themes -->
|
|
<button
|
|
class="theme-option theme-3dbevel"
|
|
data-theme="3dbevel"
|
|
title="3D Bevel"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">🔲 3D Bevel</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-xeroxui"
|
|
data-theme="xeroxui"
|
|
title="Xerox UI"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">📠 Xerox UI</span>
|
|
</button>
|
|
<button
|
|
class="theme-option theme-xtreegold"
|
|
data-theme="xtreegold"
|
|
title="XTree Gold"
|
|
>
|
|
<div class="theme-option-inner">
|
|
<div class="theme-option-header">
|
|
<div class="theme-option-dot"></div>
|
|
</div>
|
|
<div class="theme-option-body">
|
|
<div class="theme-option-line"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-option-name">📁 XTree Gold</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Apps dropdown menu -->
|
|
<nav
|
|
class="apps-dropdown"
|
|
id="appsDropdown"
|
|
role="menu"
|
|
aria-label="Applications"
|
|
>
|
|
<div class="apps-dropdown-title">All Applications</div>
|
|
<div class="app-grid" role="group">
|
|
<!-- Chat -->
|
|
<a
|
|
class="app-item active"
|
|
href="#chat"
|
|
data-section="chat"
|
|
role="menuitem"
|
|
aria-label="Chat application"
|
|
hx-get="/suite/chat/chat.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#chat"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span>Chat</span>
|
|
</a>
|
|
|
|
<!-- Research</span> -->
|
|
<a
|
|
class="app-item"
|
|
href="#research"
|
|
data-section="research"
|
|
role="menuitem"
|
|
aria-label="Research application"
|
|
hx-get="/suite/research/research.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#research"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.35-4.35" />
|
|
<path d="M11 8v6M8 11h6" />
|
|
</svg>
|
|
</div>
|
|
<span>Research</span>
|
|
</a>
|
|
|
|
<!-- Paper -->
|
|
<a
|
|
class="app-item"
|
|
href="#paper"
|
|
data-section="paper"
|
|
role="menuitem"
|
|
aria-label="Paper - Notes & Writing"
|
|
hx-get="/suite/paper/paper.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#paper"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
|
/>
|
|
<polyline points="14 2 14 8 20 8" />
|
|
<line x1="16" y1="13" x2="8" y2="13" />
|
|
<line x1="16" y1="17" x2="8" y2="17" />
|
|
</svg>
|
|
</div>
|
|
<span>Paper</span>
|
|
</a>
|
|
|
|
<!-- Drive -->
|
|
<a
|
|
class="app-item"
|
|
href="#drive"
|
|
data-section="drive"
|
|
role="menuitem"
|
|
aria-label="Drive application"
|
|
hx-get="/suite/drive/drive.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#drive"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span>Drive</span>
|
|
</a>
|
|
|
|
<!-- Calendar -->
|
|
<a
|
|
class="app-item"
|
|
href="#calendar"
|
|
data-section="calendar"
|
|
role="menuitem"
|
|
aria-label="Calendar application"
|
|
hx-get="/suite/calendar/calendar.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#calendar"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<rect
|
|
x="3"
|
|
y="4"
|
|
width="18"
|
|
height="18"
|
|
rx="2"
|
|
ry="2"
|
|
/>
|
|
<line x1="16" y1="2" x2="16" y2="6" />
|
|
<line x1="8" y1="2" x2="8" y2="6" />
|
|
<line x1="3" y1="10" x2="21" y2="10" />
|
|
</svg>
|
|
</div>
|
|
<span>Calendar</span>
|
|
</a>
|
|
|
|
<!-- Tasks -->
|
|
<a
|
|
class="app-item"
|
|
href="#tasks"
|
|
data-section="tasks"
|
|
role="menuitem"
|
|
aria-label="Tasks application"
|
|
hx-get="/suite/tasks/tasks.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#tasks"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M9 11l3 3L22 4" />
|
|
<path
|
|
d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span>Tasks</span>
|
|
</a>
|
|
|
|
<!-- Mail -->
|
|
<a
|
|
class="app-item"
|
|
href="#mail"
|
|
data-section="mail"
|
|
role="menuitem"
|
|
aria-label="Mail application"
|
|
hx-get="/suite/mail/mail.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#mail"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
|
|
/>
|
|
<polyline points="22,6 12,13 2,6" />
|
|
</svg>
|
|
</div>
|
|
<span>Mail</span>
|
|
</a>
|
|
|
|
<!-- Meet -->
|
|
<a
|
|
class="app-item"
|
|
href="#meet"
|
|
data-section="meet"
|
|
role="menuitem"
|
|
aria-label="Meet application"
|
|
hx-get="/suite/meet/meet.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#meet"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<polygon points="23 7 16 12 23 17 23 7" />
|
|
<rect
|
|
x="1"
|
|
y="5"
|
|
width="15"
|
|
height="14"
|
|
rx="2"
|
|
ry="2"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span>Meet</span>
|
|
</a>
|
|
|
|
<!-- Analytics -->
|
|
<a
|
|
class="app-item"
|
|
href="#analytics"
|
|
data-section="analytics"
|
|
role="menuitem"
|
|
aria-label="Analytics Dashboard"
|
|
hx-get="/suite/analytics/analytics.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#analytics"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<line x1="18" y1="20" x2="18" y2="10" />
|
|
<line x1="12" y1="20" x2="12" y2="4" />
|
|
<line x1="6" y1="20" x2="6" y2="14" />
|
|
</svg>
|
|
</div>
|
|
<span>Analytics</span>
|
|
</a>
|
|
|
|
<!-- Monitoring -->
|
|
<a
|
|
class="app-item"
|
|
href="#monitoring"
|
|
data-section="monitoring"
|
|
role="menuitem"
|
|
aria-label="System Monitoring"
|
|
hx-get="/suite/monitoring/monitoring.html"
|
|
hx-target="#main-content"
|
|
hx-push-url="/#monitoring"
|
|
>
|
|
<div class="app-icon" aria-hidden="true">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<circle cx="12" cy="12" r="6" />
|
|
<circle cx="12" cy="12" r="2" />
|
|
</svg>
|
|
</div>
|
|
<span>Monitoring</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- User avatar -->
|
|
<button
|
|
class="user-avatar"
|
|
id="userAvatar"
|
|
title="User Account"
|
|
aria-label="User account menu"
|
|
>
|
|
<span aria-hidden="true">U</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main content area -->
|
|
<main id="main-content" role="main">
|
|
<!-- Sections will be loaded dynamically -->
|
|
</main>
|
|
|
|
<!-- Core scripts -->
|
|
<script src="js/theme-manager.js"></script>
|
|
<script src="js/htmx-app.js"></script>
|
|
|
|
<!-- Application initialization -->
|
|
<script>
|
|
// Chat initialization function (called after HTMX loads chat content)
|
|
function initChatModule() {
|
|
if (window.chatModuleInitialized) return;
|
|
const messageInput = document.getElementById("messageInput");
|
|
const sendBtn = document.getElementById("sendBtn");
|
|
if (!messageInput || !sendBtn) return;
|
|
|
|
window.chatModuleInitialized = true;
|
|
console.log("Initializing chat module...");
|
|
|
|
// WebSocket URL
|
|
const WS_BASE_URL =
|
|
window.location.protocol === "https:" ? "wss://" : "ws://";
|
|
const WS_URL = `${WS_BASE_URL}${window.location.host}`;
|
|
|
|
// Message Type Constants
|
|
const MessageType = {
|
|
EXTERNAL: 0,
|
|
USER: 1,
|
|
BOT_RESPONSE: 2,
|
|
CONTINUE: 3,
|
|
SUGGESTION: 4,
|
|
CONTEXT_CHANGE: 5,
|
|
};
|
|
|
|
// State
|
|
let ws = null,
|
|
currentSessionId = null,
|
|
currentUserId = null,
|
|
currentBotId = "default";
|
|
let isStreaming = false,
|
|
streamingMessageId = null,
|
|
currentStreamingContent = "";
|
|
let reconnectAttempts = 0;
|
|
const maxReconnectAttempts = 5;
|
|
|
|
// Initialize auth and WebSocket
|
|
async function initChat() {
|
|
try {
|
|
updateConnectionStatus("connecting");
|
|
const response = await fetch(
|
|
`/api/auth?bot_name=default`,
|
|
);
|
|
const auth = await response.json();
|
|
currentUserId = auth.user_id;
|
|
currentSessionId = auth.session_id;
|
|
currentBotId = auth.bot_id || "default";
|
|
console.log("Auth:", {
|
|
currentUserId,
|
|
currentSessionId,
|
|
currentBotId,
|
|
});
|
|
connectWebSocket();
|
|
} catch (e) {
|
|
console.error("Auth failed:", e);
|
|
updateConnectionStatus("disconnected");
|
|
setTimeout(initChat, 3000);
|
|
}
|
|
}
|
|
|
|
function connectWebSocket() {
|
|
if (ws) ws.close();
|
|
const url = `${WS_URL}/ws?session_id=${currentSessionId}&user_id=${currentUserId}`;
|
|
ws = new WebSocket(url);
|
|
|
|
ws.onopen = () => {
|
|
console.log("WebSocket connected");
|
|
updateConnectionStatus("connected");
|
|
reconnectAttempts = 0;
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
if (data.type === "connected") return;
|
|
if (
|
|
data.message_type === MessageType.BOT_RESPONSE
|
|
) {
|
|
processMessage(data);
|
|
}
|
|
} catch (e) {
|
|
console.error("WS message error:", e);
|
|
}
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
updateConnectionStatus("disconnected");
|
|
if (reconnectAttempts < maxReconnectAttempts) {
|
|
reconnectAttempts++;
|
|
setTimeout(
|
|
connectWebSocket,
|
|
1000 * reconnectAttempts,
|
|
);
|
|
}
|
|
};
|
|
|
|
ws.onerror = (e) => console.error("WebSocket error:", e);
|
|
}
|
|
|
|
function processMessage(data) {
|
|
if (data.is_complete) {
|
|
if (isStreaming) finalizeStreaming();
|
|
else addMessage("bot", data.content);
|
|
isStreaming = false;
|
|
} else {
|
|
if (!isStreaming) {
|
|
isStreaming = true;
|
|
streamingMessageId = "streaming-" + Date.now();
|
|
currentStreamingContent = data.content || "";
|
|
addMessage(
|
|
"bot",
|
|
currentStreamingContent,
|
|
streamingMessageId,
|
|
);
|
|
} else {
|
|
currentStreamingContent += data.content || "";
|
|
updateStreaming(currentStreamingContent);
|
|
}
|
|
}
|
|
}
|
|
|
|
function addMessage(sender, content, msgId = null) {
|
|
const messages = document.getElementById("messages");
|
|
if (!messages) return;
|
|
const div = document.createElement("div");
|
|
div.className = `message ${sender}`;
|
|
if (msgId) div.id = msgId;
|
|
|
|
if (sender === "user") {
|
|
div.innerHTML = `<div class="message-content user-message">${escapeHtml(content)}</div>`;
|
|
} else {
|
|
div.innerHTML = `<div class="message-content bot-message">${marked.parse(content)}</div>`;
|
|
}
|
|
messages.appendChild(div);
|
|
messages.scrollTop = messages.scrollHeight;
|
|
}
|
|
|
|
function updateStreaming(content) {
|
|
const el = document.getElementById(streamingMessageId);
|
|
if (el)
|
|
el.querySelector(".message-content").innerHTML =
|
|
marked.parse(content);
|
|
}
|
|
|
|
function finalizeStreaming() {
|
|
const el = document.getElementById(streamingMessageId);
|
|
if (el) {
|
|
el.querySelector(".message-content").innerHTML =
|
|
marked.parse(currentStreamingContent);
|
|
el.removeAttribute("id");
|
|
}
|
|
streamingMessageId = null;
|
|
currentStreamingContent = "";
|
|
}
|
|
|
|
function sendMessage() {
|
|
const input = document.getElementById("messageInput");
|
|
const content = input.value.trim();
|
|
if (!content || !ws || ws.readyState !== WebSocket.OPEN)
|
|
return;
|
|
|
|
addMessage("user", content);
|
|
|
|
ws.send(
|
|
JSON.stringify({
|
|
bot_id: currentBotId,
|
|
user_id: currentUserId,
|
|
session_id: currentSessionId,
|
|
channel: "web",
|
|
content: content,
|
|
message_type: MessageType.USER,
|
|
timestamp: new Date().toISOString(),
|
|
}),
|
|
);
|
|
|
|
input.value = "";
|
|
input.focus();
|
|
}
|
|
|
|
function updateConnectionStatus(status) {
|
|
const el = document.getElementById("connectionStatus");
|
|
if (el) el.className = `connection-status ${status}`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Setup event handlers
|
|
sendBtn.onclick = sendMessage;
|
|
messageInput.addEventListener("keypress", (e) => {
|
|
if (e.key === "Enter") sendMessage();
|
|
});
|
|
|
|
// Start chat
|
|
initChat();
|
|
}
|
|
|
|
// Listen for HTMX content swaps to initialize chat
|
|
document.addEventListener("htmx:afterSettle", (e) => {
|
|
if (document.getElementById("messageInput")) {
|
|
window.chatModuleInitialized = false; // Reset flag for reinitialization
|
|
initChatModule();
|
|
}
|
|
});
|
|
|
|
// Simple initialization for HTMX app
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
console.log("🚀 Initializing General Bots with HTMX...");
|
|
|
|
// Hide loading overlay
|
|
setTimeout(() => {
|
|
const loadingOverlay =
|
|
document.getElementById("loadingOverlay");
|
|
if (loadingOverlay) {
|
|
loadingOverlay.classList.add("hidden");
|
|
}
|
|
}, 500);
|
|
|
|
// Simple apps menu handling
|
|
const appsBtn = document.getElementById("appsButton");
|
|
const appsDropdown = document.getElementById("appsDropdown");
|
|
const settingsBtn = document.getElementById("settingsBtn");
|
|
const settingsPanel = document.getElementById("settingsPanel");
|
|
|
|
if (appsBtn && appsDropdown) {
|
|
appsBtn.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
const isOpen = appsDropdown.classList.toggle("show");
|
|
appsBtn.setAttribute("aria-expanded", isOpen);
|
|
// Close settings panel
|
|
if (settingsPanel)
|
|
settingsPanel.classList.remove("show");
|
|
});
|
|
|
|
document.addEventListener("click", (e) => {
|
|
if (
|
|
!appsDropdown.contains(e.target) &&
|
|
!appsBtn.contains(e.target)
|
|
) {
|
|
appsDropdown.classList.remove("show");
|
|
appsBtn.setAttribute("aria-expanded", "false");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Settings panel handling
|
|
if (settingsBtn && settingsPanel) {
|
|
settingsBtn.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
const isOpen = settingsPanel.classList.toggle("show");
|
|
settingsBtn.setAttribute("aria-expanded", isOpen);
|
|
// Close apps dropdown
|
|
if (appsDropdown) appsDropdown.classList.remove("show");
|
|
});
|
|
|
|
document.addEventListener("click", (e) => {
|
|
if (
|
|
!settingsPanel.contains(e.target) &&
|
|
!settingsBtn.contains(e.target)
|
|
) {
|
|
settingsPanel.classList.remove("show");
|
|
settingsBtn.setAttribute("aria-expanded", "false");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Theme selection handling
|
|
const themeOptions = document.querySelectorAll(".theme-option");
|
|
const savedTheme =
|
|
localStorage.getItem("gb-theme") || "sentient";
|
|
|
|
// Apply saved theme
|
|
document.body.setAttribute("data-theme", savedTheme);
|
|
document
|
|
.querySelector(`.theme-option[data-theme="${savedTheme}"]`)
|
|
?.classList.add("active");
|
|
|
|
themeOptions.forEach((option) => {
|
|
option.addEventListener("click", () => {
|
|
const theme = option.getAttribute("data-theme");
|
|
document.body.setAttribute("data-theme", theme);
|
|
localStorage.setItem("gb-theme", theme);
|
|
themeOptions.forEach((o) =>
|
|
o.classList.remove("active"),
|
|
);
|
|
option.classList.add("active");
|
|
|
|
// Update theme-color meta tag
|
|
const themeColors = {
|
|
dark: "#3b82f6",
|
|
light: "#3b82f6",
|
|
purple: "#a855f7",
|
|
green: "#22c55e",
|
|
orange: "#f97316",
|
|
sentient: "#d4f505",
|
|
};
|
|
const metaTheme = document.querySelector(
|
|
'meta[name="theme-color"]',
|
|
);
|
|
if (metaTheme) {
|
|
metaTheme.setAttribute(
|
|
"content",
|
|
themeColors[theme] || "#d4f505",
|
|
);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Handle app item clicks - update active state
|
|
document.querySelectorAll(".app-item").forEach((item) => {
|
|
item.addEventListener("click", function () {
|
|
document
|
|
.querySelectorAll(".app-item")
|
|
.forEach((i) => i.classList.remove("active"));
|
|
this.classList.add("active");
|
|
appsDropdown.classList.remove("show");
|
|
appsBtn.setAttribute("aria-expanded", "false");
|
|
});
|
|
});
|
|
|
|
// Handle hash navigation
|
|
function handleHashChange() {
|
|
const hash = window.location.hash.slice(1) || "chat";
|
|
const appItem = document.querySelector(
|
|
`[data-section="${hash}"]`,
|
|
);
|
|
if (appItem) {
|
|
document
|
|
.querySelectorAll(".app-item")
|
|
.forEach((i) => i.classList.remove("active"));
|
|
appItem.classList.add("active");
|
|
|
|
// Trigger HTMX load if not already loaded
|
|
const hxGet = appItem.getAttribute("hx-get");
|
|
if (hxGet) {
|
|
htmx.ajax("GET", hxGet, {
|
|
target: "#main-content",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Load initial content based on hash or default to chat
|
|
window.addEventListener("hashchange", handleHashChange);
|
|
|
|
// Initial load
|
|
setTimeout(() => {
|
|
handleHashChange();
|
|
}, 100);
|
|
|
|
// Keyboard shortcuts
|
|
document.addEventListener("keydown", (e) => {
|
|
// Alt + number for quick app switching
|
|
if (e.altKey && !e.ctrlKey && !e.shiftKey) {
|
|
const num = parseInt(e.key);
|
|
if (num >= 1 && num <= 9) {
|
|
const items =
|
|
document.querySelectorAll(".app-item");
|
|
if (items[num - 1]) {
|
|
items[num - 1].click();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Alt + A to open apps menu
|
|
if (e.altKey && e.key.toLowerCase() === "a") {
|
|
appsBtn.click();
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|