Changeset 0.22.7 (#149)

This commit is contained in:
2026-03-04 10:44:42 +00:00
parent d8e0664fa3
commit 389e47b0f9
62 changed files with 6820 additions and 1476 deletions

View File

@@ -55,12 +55,12 @@
{{/* ── Sidebar ─────────────────────── */}}
<div id="sidebar" class="sidebar">
<div class="sidebar-top">
{{/* Brand */}}
<div class="sb-brand">
{{/* Brand — click toggles sidebar */}}
<div class="sb-brand" onclick="UI.toggleSidebar()" role="button" tabindex="0">
<div id="brandSidebarLogo" class="sb-logo">
<img src="{{.BasePath}}/favicon.svg" alt="" style="width:28px;height:28px;">
<img src="{{.BasePath}}/favicon-32.png" alt="" class="brand-logo-img">
</div>
<span id="brandSidebarText" class="brand-text">Chat Switchboard</span>
<span id="brandSidebarText" class="brand-text">Switchboard</span>
<span id="brandWordmark" class="brand-text" style="display:none;"></span>
</div>
@@ -73,24 +73,41 @@
<button id="newChatDropBtn" class="split-btn-drop" title="More options">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div id="newChatDropdown" class="split-btn-dropdown">
{{/* Populated by projects-ui.js */}}
<div id="newChatDropdown" class="split-dropdown">
<button class="split-dropdown-item" onclick="document.getElementById('newChatDropdown').classList.remove('open'); newChat();">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
<span>New Chat</span>
</button>
<button class="split-dropdown-item" onclick="document.getElementById('newChatDropdown').classList.remove('open'); if(typeof createProject==='function') createProject();">
<svg width="14" height="14" 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>
<span>New Project</span>
</button>
<button class="split-dropdown-item disabled" title="Coming soon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span>Group Chat</span>
<span class="dd-hint">soon</span>
</button>
<button class="split-dropdown-item disabled" title="Coming soon">
<svg width="14" height="14" 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>New Channel</span>
<span class="dd-hint">soon</span>
</button>
</div>
</div>
{{/* Search */}}
<div id="sidebarSearch" class="sidebar-search">
<svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="chatSearchInput" placeholder="Search chats…" autocomplete="off">
<button id="chatSearchClear" class="search-clear" title="Clear search"></button>
</div>
{{/* Sidebar toggle (hamburger) */}}
<button id="sidebarToggle" class="sb-btn sidebar-toggle" title="Toggle sidebar">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
{{/* Search (outside sidebar-top, below brand section) */}}
<div id="sidebarSearch" class="sidebar-search">
<svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" id="chatSearchInput" placeholder="Search chats…" autocomplete="off">
<button id="chatSearchClear" class="sidebar-search-clear" title="Clear search"></button>
</div>
{{/* Sidebar toggle (hidden on desktop, used by JS for mobile) */}}
<button id="sidebarToggle" class="sb-btn sidebar-toggle" title="Toggle sidebar">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
{{/* Sidebar Tabs (Chats / Files) */}}
<div id="sidebarTabs" class="sidebar-tabs" style="display:none;">
<button class="sidebar-tab active" data-tab="chats">Chats</button>
@@ -107,6 +124,12 @@
{{/* User / bottom */}}
<div class="sidebar-bottom">
{{/* Notes shortcut */}}
<button id="notesBtn" class="sb-btn sidebar-notes-btn">
<svg width="15" height="15" 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>
<span class="sb-label">Notes</span>
</button>
<div class="sidebar-bottom-divider"></div>
<button id="userMenuBtn" class="user-btn">
<div id="userAvatar" class="user-avatar">
<span id="avatarLetter">?</span>
@@ -151,7 +174,7 @@
<div class="workspace">
<div class="workspace-primary workspace-pane">
{{/* Chat header: model selector + token count */}}
{{/* Chat header: model selector + caps + tokens + panel + notif */}}
<div class="chat-header">
<div id="modelDropdown" class="model-dropdown">
<button id="modelDropdownBtn" class="model-dropdown-btn">
@@ -169,6 +192,21 @@
<button id="summarizeBtn" class="action-btn" style="display:none;" title="Summarize older messages">
<svg width="14" height="14" 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>
</button>
{{/* Panel toggle */}}
<button id="panelToggleBtn" class="action-btn" title="Toggle side panel" onclick="if(typeof PanelRegistry!=='undefined')PanelRegistry.toggle('preview')">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
</button>
{{/* Notification bell (inline, not fixed) */}}
<div id="notifWrap" class="notif-wrap">
<button class="notif-bell" onclick="Notifications.toggleDropdown()">
<svg width="16" height="16" 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 id="notifBadge" class="notif-badge" style="display:none;">0</span>
</button>
<div id="notifDropdown" class="notif-dropdown" style="display:none;">
<div id="notifPanelList"></div>
<div id="notifPanelMore" style="text-align:center;padding:8px;"></div>
</div>
</div>
</div>
</div>
@@ -188,28 +226,49 @@
{{/* Streaming tools display */}}
<div id="streamTools" class="stream-tools" style="display:none;"></div>
{{/* Input toolbar (attach, tools toggle, KB) */}}
<div class="input-toolbar">
<button id="attachBtn" class="action-btn attach-btn" title="Attach file">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
</button>
{{/* tools-toggle.js adds toggle buttons here */}}
</div>
{{/* Input wrap: CM6 editor + send/stop */}}
<div class="input-wrap">
<div id="messageInputWrap">
{{/* CM6 mounts here (chat.js). Fallback textarea below. */}}
<textarea id="messageInput" placeholder="Type a message…" rows="1"></textarea>
{{/* Input area (centered, padded bottom) */}}
<div class="chat-input-area">
{{/* Input toolbar (attach, tools toggle, KB) */}}
<div class="input-toolbar">
<button id="attachBtn" class="action-btn attach-btn" title="Attach file">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
</button>
{{/* Tools toggle */}}
<div class="tools-toggle-wrap" style="display:none;">
<button id="toolsToggleBtn" class="action-btn tools-toggle-btn" title="Tools">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
</button>
<div id="toolsPopup" class="popup tools-popup"></div>
</div>
{{/* Knowledge Bases toggle */}}
<div class="kb-toggle-wrap">
<button id="kbToggleBtn" class="action-btn kb-toggle-btn" title="Knowledge Bases">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
</button>
<div id="kbPopup" class="popup kb-popup"></div>
</div>
{{/* tools-toggle.js + knowledge-ui.js show/populate these at init */}}
</div>
<div class="input-actions">
<span id="inputTokenCount" class="input-token-count"></span>
<button id="sendBtn" class="action-btn send-btn" title="Send message">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
<button id="stopBtn" class="action-btn stop-btn" title="Stop generating">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
</button>
{{/* Input wrap: CM6 editor + send/stop */}}
<div class="input-wrap">
<div id="messageInputWrap">
{{/* CM6 mounts here (chat.js). Fallback textarea below. */}}
<textarea id="messageInput" placeholder="Type a message…" rows="1"></textarea>
</div>
<div class="input-actions">
<span id="inputTokenCount" class="input-token-count"></span>
<button id="sendBtn" class="action-btn send-btn" title="Send message">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
<button id="stopBtn" class="action-btn stop-btn" title="Stop generating">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
</button>
</div>
</div>
<div class="chat-footer">
<span class="chat-version">Switchboard v{{.Version}}</span>
</div>
</div>
</div>
@@ -239,7 +298,7 @@
<p>Open a code block preview or extension output here.</p>
</div>
</div>
{{/* Notes and project panels are registered dynamically */}}
{{/* Notes and project panels are registered dynamically by their JS modules */}}
</div>
</div>
</div>
@@ -273,13 +332,13 @@
<div class="modal-content modal-lg">
<div class="modal-header">
<h2>Settings</h2>
<button class="modal-close" onclick="closeModal('settingsModal')"></button>
<button id="settingsCloseBtn" class="modal-close" onclick="closeModal('settingsModal')"></button>
</div>
<div class="modal-tabs">
<button class="settings-tab active" data-stab="general" onclick="UI.switchSettingsTab('general')">General</button>
<button class="settings-tab" data-stab="appearance" onclick="UI.switchSettingsTab('appearance')">Appearance</button>
<button id="settingsProvidersTabBtn" class="settings-tab" data-stab="providers" onclick="UI.switchSettingsTab('providers')">My Providers</button>
<button id="settingsPersonasTabBtn" class="settings-tab" data-stab="personas" onclick="UI.switchSettingsTab('personas')">My Presets</button>
<button id="settingsPersonasTabBtn" class="settings-tab" data-stab="personas" onclick="UI.switchSettingsTab('personas')">My Personas</button>
<button id="settingsUsageTabBtn" class="settings-tab" data-stab="usage" onclick="UI.switchSettingsTab('usage')">Usage</button>
<button class="settings-tab" data-stab="profile" onclick="UI.switchSettingsTab('profile')">Profile</button>
<button id="settingsRolesTabBtn" class="settings-tab" data-stab="roles" onclick="UI.switchSettingsTab('roles')" style="display:none;">Roles</button>
@@ -333,11 +392,11 @@
<div id="providerAddForm" style="display:none;"></div>
<div id="providerList"></div>
</div>
{{/* Presets tab */}}
{{/* Personas tab */}}
<div id="settingsPersonasTab" class="settings-tab-content" style="display:none;">
<button id="userAddPresetBtn" class="btn-small" style="display:none;">+ New Preset</button>
<div id="userAddPresetForm" style="display:none;"></div>
<div id="userPresetList"></div>
<button id="userAddPersonaBtn" class="btn-small" style="display:none;">+ New Persona</button>
<div id="userAddPersonaForm" style="display:none;"></div>
<div id="userPersonaList"></div>
</div>
{{/* Usage tab */}}
<div id="settingsUsageTab" class="settings-tab-content" style="display:none;">
@@ -345,6 +404,19 @@
</div>
{{/* Profile tab */}}
<div id="settingsProfileTab" class="settings-tab-content" style="display:none;">
<div class="form-group">
<label>Avatar</label>
<div style="display:flex;align-items:center;gap:12px;margin-bottom:4px;">
<div id="avatarPreview" class="user-avatar" style="width:48px;height:48px;font-size:20px;">
<span id="avatarPreviewLetter">?</span>
</div>
<div style="display:flex;gap:6px;">
<button id="avatarUploadBtn" class="btn-small">Upload</button>
<button id="avatarRemoveBtn" class="btn-small btn-danger" style="display:none;">Remove</button>
</div>
<input type="file" id="avatarFileInput" accept="image/*" style="display:none;">
</div>
</div>
<div class="form-group">
<label>Display Name</label>
<input type="text" id="profileDisplayName">
@@ -354,12 +426,12 @@
<input type="email" id="profileEmail" disabled>
</div>
<div class="form-group">
<button class="btn-small" onclick="document.getElementById('profileChangePwForm').style.display=''">Change Password</button>
<button id="profileChangePwBtn" class="btn-small">Change Password</button>
<div id="profileChangePwForm" style="display:none;margin-top:8px;">
<input type="password" id="settingsCurrentPw" placeholder="Current password" autocomplete="current-password" style="margin-bottom:6px;">
<input type="password" id="settingsNewPw" placeholder="New password" autocomplete="new-password" style="margin-bottom:6px;">
<input type="password" id="settingsConfirmPw" placeholder="Confirm new password" autocomplete="new-password" style="margin-bottom:6px;">
<button class="btn-small" onclick="Pages.changePassword()">Update Password</button>
<input type="password" id="profileCurrentPw" placeholder="Current password" autocomplete="current-password" style="margin-bottom:6px;">
<input type="password" id="profileNewPw" placeholder="New password" autocomplete="new-password" style="margin-bottom:6px;">
<input type="password" id="profileConfirmPw" placeholder="Confirm new password" autocomplete="new-password" style="margin-bottom:6px;">
<button id="profileSavePwBtn" class="btn-small">Update Password</button>
</div>
</div>
</div>
@@ -377,8 +449,8 @@
<div id="settingsTeamsTab" class="settings-tab-content" style="display:none;">
<div id="settingsTeamsList"></div>
<div id="settingsTeamMembers" style="display:none;"></div>
<div id="settingsTeamPresets" style="display:none;">
<div id="adminPresetList"></div>
<div id="settingsTeamPersonas" style="display:none;">
<div id="adminPersonaList"></div>
</div>
<div id="settingsTeamProviders" style="display:none;">
<button id="settingsTeamAddProviderBtn" class="btn-small" style="display:none;">+ Add Provider</button>
@@ -394,7 +466,7 @@
</div>
</div>
<div class="modal-footer">
<button class="btn-primary" onclick="UI.saveSettingsAndClose()">Save</button>
<button id="settingsSaveBtn" class="btn-primary" onclick="UI.saveSettingsAndClose()">Save</button>
<button class="btn-secondary" onclick="closeModal('settingsModal')">Cancel</button>
</div>
</div>
@@ -457,7 +529,7 @@
<div class="form-group"><label><input type="checkbox" id="adminRegToggle"> Registration Enabled</label></div>
<div class="form-group"><label>Default User State</label><select id="adminRegDefaultState"><option value="active">Active</option><option value="pending">Pending Approval</option></select></div>
<div class="form-group"><label><input type="checkbox" id="adminUserProvidersToggle"> Allow User BYOK</label></div>
<div class="form-group"><label><input type="checkbox" id="adminUserPresetsToggle"> Allow User Presets</label></div>
<div class="form-group"><label><input type="checkbox" id="adminUserPersonasToggle"> Allow User Personas</label></div>
<div class="form-group"><label><input type="checkbox" id="adminKBDirectAccessToggle"> KB Direct Access</label></div>
<div class="form-group"><label>Default Model</label><select id="adminDefaultModel"></select></div>
<div class="form-group"><label>System Prompt</label><textarea id="adminSystemPrompt" rows="4"></textarea></div>
@@ -544,8 +616,8 @@
<button id="teamAuditNextBtn" class="btn-small"></button>
</div>
</div>
{{/* Team preset model select */}}
<div style="display:none;"><select id="teamPreset_model"></select></div>
{{/* Team persona model select */}}
<div style="display:none;"><select id="teamPersona_model"></select></div>
</div>
</div>
</div>
@@ -590,17 +662,7 @@
</div>
</div>
{{/* ── Notification Bell ───────────────────── */}}
<div id="notifWrap" class="notif-wrap" style="position:fixed;top:8px;right:12px;z-index:100;">
<button class="notif-btn" onclick="Notifications.toggleDropdown()">
<svg width="16" height="16" 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 id="notifBadge" class="notif-badge" style="display:none;">0</span>
</button>
<div id="notifDropdown" class="notif-dropdown" style="display:none;">
<div id="notifPanelList"></div>
<div id="notifPanelMore" style="text-align:center;padding:8px;"></div>
</div>
</div>
{{/* ── Notification bell is now inside .chat-header ── */}}
{{/* ── Routing Policy Form (shared) ────────── */}}
<div id="routingPolicyForm" style="display:none;">
@@ -649,7 +711,6 @@
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/extensions.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/panels.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-format.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-core.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-settings.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-admin.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/tokens.js?v={{$.Version}}"></script>
@@ -667,6 +728,7 @@
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/chat.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/settings-handlers.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/admin-handlers.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/surface-nav.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/editor-mode.js?v={{$.Version}}"></script>
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/app.js?v={{$.Version}}"></script>
{{end}}