1655 lines
77 KiB
JavaScript
1655 lines
77 KiB
JavaScript
// ==========================================
|
||
// Chat Switchboard – UI Core
|
||
// ==========================================
|
||
// UI object definition: sidebar, chat list, messages, streaming,
|
||
// model selector, capability badges, user, generating state, toast,
|
||
// settings modal dispatcher, export, message actions, scroll.
|
||
// Extended by ui-settings.js and ui-admin.js via Object.assign.
|
||
//
|
||
// Exports: window.UI, window.renderPersonaForm,
|
||
// window.toggleSummarizedHistory (onclick handler)
|
||
// ==========================================
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
// ── Delegated Action Dispatcher ────────────────────
|
||
// Buttons use data-action="fnName" data-args='[...]' instead of onclick.
|
||
// data-pass-event: prepends the click event as first arg (for positioning).
|
||
// data-stop-prop: calls event.stopPropagation() (handled by default).
|
||
function _uiDispatch(container) {
|
||
if (container._uiBound) return;
|
||
container._uiBound = true;
|
||
container.addEventListener('click', (e) => {
|
||
const btn = e.target.closest('[data-action]');
|
||
if (!btn) return;
|
||
e.stopPropagation();
|
||
const action = btn.dataset.action;
|
||
const fn = sb.resolve(action);
|
||
if (typeof fn !== 'function') {
|
||
console.warn('[ui] Unknown action:', action);
|
||
return;
|
||
}
|
||
const args = JSON.parse(btn.dataset.args || '[]');
|
||
if (btn.hasAttribute('data-pass-event')) {
|
||
fn(e, ...args);
|
||
} else if (btn.hasAttribute('data-pass-el')) {
|
||
fn(btn, ...args);
|
||
} else {
|
||
fn(...args);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Wrapper: toggle archived projects visibility + re-render
|
||
function _toggleArchivedProjects() {
|
||
App.showArchivedProjects = !App.showArchivedProjects;
|
||
UI.renderProjectsSection();
|
||
}
|
||
|
||
// Wrapper: read edit input value at click time, then call submitEdit
|
||
function _submitEditFromDOM(messageId) {
|
||
const val = document.getElementById('editInput_' + messageId)?.value || '';
|
||
submitEdit(messageId, val);
|
||
}
|
||
|
||
// ── Avatar Helper ────────────────────────────
|
||
// Returns HTML for a message avatar: <img> if data URI available, emoji fallback.
|
||
function avatarHTML(role, avatarDataURI) {
|
||
if (avatarDataURI) {
|
||
return `<img src="${avatarDataURI}" alt="" class="msg-avatar-img">`;
|
||
}
|
||
return role === 'user' ? '👤' : role === 'other-user' ? '👤' : '🤖';
|
||
}
|
||
|
||
// Look up the current model/persona avatar for assistant messages.
|
||
function assistantAvatarURI(msg) {
|
||
// 1. Check channel model roster for persona avatar (v0.23.0)
|
||
if (typeof ChannelModels !== 'undefined' && msg?.model) {
|
||
const info = ChannelModels.resolvePersonaInfo(msg.model);
|
||
if (info?.avatar) return info.avatar;
|
||
}
|
||
// 2. Check participant_id directly (for chained messages)
|
||
if (msg?.participant_type === 'persona' && msg?.participant_id) {
|
||
const m = App.models.find(x => x.personaId === msg.participant_id);
|
||
if (m?.personaAvatar) return m.personaAvatar;
|
||
}
|
||
// 3. Standard lookup by model ID or persona ID
|
||
const modelId = msg?.model || msg?.persona_id;
|
||
if (modelId) {
|
||
const m = App.models.find(x => x.id === modelId || x.personaId === modelId);
|
||
if (m?.personaAvatar) return m.personaAvatar;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
// ── Shared Persona Form Component ────────────
|
||
// Renders a persona creation/edit form into a container element.
|
||
// Options: { prefix, showAvatar, showProviderConfig, onSubmit, onCancel }
|
||
// Returns: { getValues(), setValues(persona), clearForm(), container }
|
||
function renderPersonaForm(containerEl, options = {}) {
|
||
const pfx = options.prefix || 'pf';
|
||
const showAvatar = options.showAvatar !== false;
|
||
const showConfig = !!options.showProviderConfig;
|
||
|
||
containerEl.innerHTML = `
|
||
<div class="form-group"><label>Name</label><input type="text" id="${pfx}_name" placeholder="Code Reviewer"></div>
|
||
<div class="form-group"><label>@mention Handle</label><input type="text" id="${pfx}_handle" placeholder="code-reviewer" maxlength="50" class="mono-input"><div class="form-hint">Auto-generated from name. Used for @mentions in chat.</div></div>
|
||
${showAvatar ? `
|
||
<div class="avatar-upload-row" style="margin-bottom:0.75rem">
|
||
<div class="avatar-preview avatar-preview-sm" id="${pfx}_avatarPreview">
|
||
<span id="${pfx}_avatarPlaceholder">🤖</span>
|
||
</div>
|
||
<div class="avatar-actions">
|
||
<button class="btn-small" type="button" id="${pfx}_avatarUploadBtn">Upload Avatar</button>
|
||
<button class="btn-small btn-danger" type="button" id="${pfx}_avatarRemoveBtn" style="display:none">Remove</button>
|
||
<input type="file" id="${pfx}_avatarFileInput" accept="image/png,image/jpeg,image/gif" style="display:none">
|
||
<div class="form-hint">Optional · 128×128 · shown in chat</div>
|
||
</div>
|
||
</div>` : ''}
|
||
<div class="form-group"><label>Description</label><input type="text" id="${pfx}_desc" placeholder="Reviews code for best practices"></div>
|
||
<div class="form-row">
|
||
<div class="form-group"><label>Base Model</label><select id="${pfx}_model"></select></div>
|
||
${showConfig ? `<div class="form-group"><label>Provider Config</label><select id="${pfx}_config"><option value="">Auto-resolve</option></select></div>` : ''}
|
||
</div>
|
||
<div class="form-group"><label>System Prompt</label><textarea id="${pfx}_prompt" rows="3" placeholder="You are a code reviewer..."></textarea></div>
|
||
<div class="form-row">
|
||
<div class="form-group"><label>Temperature</label><input type="number" id="${pfx}_temp" step="0.1" min="0" max="2" placeholder="default"></div>
|
||
<div class="form-group"><label>Max Tokens</label><input type="number" id="${pfx}_maxTokens" placeholder="default"></div>
|
||
</div>
|
||
<div class="form-group memory-persona-section" style="border-top:1px solid var(--border);padding-top:8px;margin-top:4px">
|
||
<label class="checkbox-label" style="font-weight:500"><input type="checkbox" id="${pfx}_memoryEnabled" checked> Enable Memory</label>
|
||
<p class="form-hint" style="margin:2px 0 6px">When enabled, the AI can save and recall facts about users across conversations.</p>
|
||
<div id="${pfx}_memoryExtractionPromptWrap">
|
||
<label>Custom Extraction Prompt <span class="form-hint">(optional)</span></label>
|
||
<textarea id="${pfx}_memoryExtractionPrompt" rows="2" placeholder="Override the default extraction prompt for this persona..."></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-group tool-grants-section" style="border-top:1px solid var(--border);padding-top:8px;margin-top:4px">
|
||
<label class="checkbox-label" style="font-weight:500"><input type="checkbox" id="${pfx}_toolsAll" checked> All tools (inherit from context)</label>
|
||
<p class="form-hint" style="margin:2px 0 6px">When unchecked, restrict this persona to only the selected tools below.</p>
|
||
<div id="${pfx}_toolsList" class="tool-grants-list" style="display:none;max-height:200px;overflow-y:auto;padding:4px 0"></div>
|
||
</div>
|
||
<div class="form-row">
|
||
<button class="btn-small btn-primary" id="${pfx}_submitBtn">Create</button>
|
||
<button class="btn-small" id="${pfx}_cancelBtn">Cancel</button>
|
||
</div>
|
||
`;
|
||
|
||
// Avatar wiring
|
||
if (showAvatar) {
|
||
const uploadBtn = document.getElementById(`${pfx}_avatarUploadBtn`);
|
||
const fileInput = document.getElementById(`${pfx}_avatarFileInput`);
|
||
const removeBtn = document.getElementById(`${pfx}_avatarRemoveBtn`);
|
||
uploadBtn?.addEventListener('click', () => fileInput.click());
|
||
fileInput?.addEventListener('change', function() {
|
||
const file = this.files[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = () => form.updateAvatarPreview(reader.result);
|
||
reader.readAsDataURL(file);
|
||
this.value = '';
|
||
});
|
||
removeBtn?.addEventListener('click', () => form.updateAvatarPreview(null));
|
||
}
|
||
|
||
// Cancel wiring
|
||
document.getElementById(`${pfx}_cancelBtn`)?.addEventListener('click', () => {
|
||
if (options.onCancel) options.onCancel();
|
||
});
|
||
|
||
// Auto-generate handle from name
|
||
let _handleManuallyEdited = false;
|
||
document.getElementById(`${pfx}_handle`)?.addEventListener('input', () => { _handleManuallyEdited = true; });
|
||
document.getElementById(`${pfx}_name`)?.addEventListener('input', () => {
|
||
if (_handleManuallyEdited) return;
|
||
const name = document.getElementById(`${pfx}_name`)?.value || '';
|
||
const handle = name.toLowerCase().trim()
|
||
.replace(/[^a-z0-9\s-]/g, '')
|
||
.replace(/\s+/g, '-')
|
||
.replace(/-+/g, '-')
|
||
.replace(/^-|-$/g, '')
|
||
.slice(0, 50);
|
||
const hEl = document.getElementById(`${pfx}_handle`);
|
||
if (hEl) hEl.value = handle;
|
||
});
|
||
|
||
// Submit wiring
|
||
document.getElementById(`${pfx}_submitBtn`)?.addEventListener('click', () => {
|
||
if (options.onSubmit) options.onSubmit(form.getValues());
|
||
});
|
||
|
||
// v0.25.0: Tool grants — toggle "All tools" checkbox shows/hides tool list
|
||
const toolsAllCb = document.getElementById(`${pfx}_toolsAll`);
|
||
const toolsListEl = document.getElementById(`${pfx}_toolsList`);
|
||
if (toolsAllCb && toolsListEl) {
|
||
toolsAllCb.addEventListener('change', () => {
|
||
toolsListEl.style.display = toolsAllCb.checked ? 'none' : '';
|
||
if (!toolsAllCb.checked && toolsListEl.children.length === 0) {
|
||
form.loadToolList();
|
||
}
|
||
});
|
||
}
|
||
|
||
const form = {
|
||
getValues() {
|
||
const v = {
|
||
name: document.getElementById(`${pfx}_name`)?.value.trim() || '',
|
||
handle: document.getElementById(`${pfx}_handle`)?.value.trim() || '',
|
||
description: document.getElementById(`${pfx}_desc`)?.value.trim() || '',
|
||
base_model_id: document.getElementById(`${pfx}_model`)?.value || '',
|
||
system_prompt: document.getElementById(`${pfx}_prompt`)?.value || '',
|
||
};
|
||
if (showConfig) {
|
||
const cfgId = document.getElementById(`${pfx}_config`)?.value;
|
||
if (cfgId) v.provider_config_id = cfgId;
|
||
}
|
||
const temp = parseFloat(document.getElementById(`${pfx}_temp`)?.value);
|
||
if (!isNaN(temp)) v.temperature = temp;
|
||
const maxTok = parseInt(document.getElementById(`${pfx}_maxTokens`)?.value);
|
||
if (!isNaN(maxTok) && maxTok > 0) v.max_tokens = maxTok;
|
||
// Pending avatar data URI
|
||
const img = document.querySelector(`#${pfx}_avatarPreview img`);
|
||
if (img?.src?.startsWith('data:')) v._pendingAvatar = img.src;
|
||
// Memory fields (v0.18.0)
|
||
const memCb = document.getElementById(`${pfx}_memoryEnabled`);
|
||
if (memCb) v.memory_enabled = memCb.checked;
|
||
const memPrompt = document.getElementById(`${pfx}_memoryExtractionPrompt`)?.value?.trim();
|
||
if (memPrompt) v.memory_extraction_prompt = memPrompt;
|
||
// v0.25.0: Tool grants
|
||
const toolsAllCb = document.getElementById(`${pfx}_toolsAll`);
|
||
if (toolsAllCb && !toolsAllCb.checked) {
|
||
const checked = document.querySelectorAll(`#${pfx}_toolsList input[type="checkbox"]:checked`);
|
||
v.tool_grants = Array.from(checked).map(cb => cb.value);
|
||
} else {
|
||
v.tool_grants = []; // empty = inherit all
|
||
}
|
||
return v;
|
||
},
|
||
setValues(p) {
|
||
const el = id => document.getElementById(`${pfx}_${id}`);
|
||
if (el('name')) el('name').value = p.name || '';
|
||
if (el('handle')) { el('handle').value = p.handle || ''; _handleManuallyEdited = !!p.handle; }
|
||
if (el('desc')) el('desc').value = p.description || '';
|
||
if (el('prompt')) el('prompt').value = p.system_prompt || '';
|
||
if (el('temp')) el('temp').value = p.temperature != null ? p.temperature : '';
|
||
if (el('maxTokens')) el('maxTokens').value = p.max_tokens != null ? p.max_tokens : '';
|
||
if (el('model')) el('model').value = p.base_model_id || '';
|
||
if (showConfig && el('config')) el('config').value = p.provider_config_id || '';
|
||
if (showAvatar) form.updateAvatarPreview(p.avatar || null);
|
||
// Memory fields (v0.18.0)
|
||
if (el('memoryEnabled')) el('memoryEnabled').checked = p.memory_enabled !== false;
|
||
if (el('memoryExtractionPrompt')) el('memoryExtractionPrompt').value = p.memory_extraction_prompt || '';
|
||
// v0.25.0: Tool grants — load and apply
|
||
if (p.id) form.loadToolGrants(p.id);
|
||
},
|
||
clearForm() {
|
||
['name','handle','desc','prompt','temp','maxTokens'].forEach(f => {
|
||
const el = document.getElementById(`${pfx}_${f}`);
|
||
if (el) el.value = '';
|
||
});
|
||
const modelSel = document.getElementById(`${pfx}_model`);
|
||
if (modelSel) modelSel.selectedIndex = 0;
|
||
if (showConfig) {
|
||
const cfgSel = document.getElementById(`${pfx}_config`);
|
||
if (cfgSel) cfgSel.selectedIndex = 0;
|
||
}
|
||
if (showAvatar) form.updateAvatarPreview(null);
|
||
},
|
||
updateAvatarPreview(dataURI) {
|
||
const preview = document.getElementById(`${pfx}_avatarPreview`);
|
||
const placeholder = document.getElementById(`${pfx}_avatarPlaceholder`);
|
||
const removeBtn = document.getElementById(`${pfx}_avatarRemoveBtn`);
|
||
if (!preview) return;
|
||
const existing = preview.querySelector('img');
|
||
if (dataURI) {
|
||
if (placeholder) placeholder.style.display = 'none';
|
||
if (existing) { existing.src = dataURI; }
|
||
else {
|
||
const img = document.createElement('img');
|
||
img.src = dataURI; img.alt = 'Persona avatar';
|
||
preview.insertBefore(img, placeholder);
|
||
}
|
||
if (removeBtn) removeBtn.style.display = '';
|
||
} else {
|
||
if (existing) existing.remove();
|
||
if (placeholder) placeholder.style.display = '';
|
||
if (removeBtn) removeBtn.style.display = 'none';
|
||
}
|
||
},
|
||
setSubmitLabel(label) {
|
||
const btn = document.getElementById(`${pfx}_submitBtn`);
|
||
if (btn) btn.textContent = label;
|
||
},
|
||
getModelSelect() { return document.getElementById(`${pfx}_model`); },
|
||
getConfigSelect() { return showConfig ? document.getElementById(`${pfx}_config`) : null; },
|
||
|
||
// v0.25.0: Tool grants management
|
||
async loadToolList() {
|
||
const listEl = document.getElementById(`${pfx}_toolsList`);
|
||
if (!listEl) return;
|
||
try {
|
||
const resp = await API._get('/api/v1/tools');
|
||
const tools = resp.tools || resp.data || resp || [];
|
||
listEl.innerHTML = '';
|
||
// Group by category
|
||
const groups = {};
|
||
tools.forEach(t => {
|
||
const cat = t.category || 'other';
|
||
(groups[cat] = groups[cat] || []).push(t);
|
||
});
|
||
Object.keys(groups).sort().forEach(cat => {
|
||
const hdr = document.createElement('div');
|
||
hdr.className = 'tool-grants-category';
|
||
hdr.textContent = cat.charAt(0).toUpperCase() + cat.slice(1);
|
||
listEl.appendChild(hdr);
|
||
groups[cat].forEach(t => {
|
||
const label = document.createElement('label');
|
||
label.className = 'tool-grants-item';
|
||
label.innerHTML = `<input type="checkbox" value="${t.name}"> ${t.display_name || t.name}`;
|
||
listEl.appendChild(label);
|
||
});
|
||
});
|
||
} catch (e) {
|
||
listEl.innerHTML = '<div class="form-hint">Failed to load tools</div>';
|
||
}
|
||
},
|
||
|
||
async loadToolGrants(personaId) {
|
||
const toolsAllCb = document.getElementById(`${pfx}_toolsAll`);
|
||
const listEl = document.getElementById(`${pfx}_toolsList`);
|
||
if (!toolsAllCb || !listEl) return;
|
||
try {
|
||
const resp = await API._get(`/api/v1/personas/${personaId}/tool-grants`);
|
||
const grants = resp.data || [];
|
||
if (grants.length === 0) {
|
||
toolsAllCb.checked = true;
|
||
listEl.style.display = 'none';
|
||
} else {
|
||
toolsAllCb.checked = false;
|
||
listEl.style.display = '';
|
||
await form.loadToolList();
|
||
const grantSet = new Set(grants);
|
||
listEl.querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
||
cb.checked = grantSet.has(cb.value);
|
||
});
|
||
}
|
||
} catch (_) {
|
||
// Endpoint may not exist yet — default to all tools
|
||
toolsAllCb.checked = true;
|
||
listEl.style.display = 'none';
|
||
}
|
||
},
|
||
};
|
||
return form;
|
||
}
|
||
|
||
// ── Summary Message Helpers ─────────────────
|
||
|
||
function _isSummaryMessage(msg) {
|
||
if (!msg.metadata) return false;
|
||
const meta = typeof msg.metadata === 'string' ? JSON.parse(msg.metadata) : msg.metadata;
|
||
return meta?.type === 'summary';
|
||
}
|
||
|
||
function toggleSummarizedHistory() {
|
||
const el = document.getElementById('summarizedHistory');
|
||
const btn = document.querySelector('.message-summary-divider .summary-toggle');
|
||
if (!el) return;
|
||
const show = el.style.display === 'none';
|
||
el.style.display = show ? 'block' : 'none';
|
||
if (btn) {
|
||
const count = el.querySelectorAll('.message').length;
|
||
btn.textContent = show ? `▾ Hide ${count} earlier messages` : `▸ ${count} earlier messages summarized`;
|
||
}
|
||
}
|
||
|
||
const UI = {
|
||
|
||
// ── Sidebar ──────────────────────────────
|
||
|
||
toggleSidebar() {
|
||
const sb = document.getElementById('sidebar');
|
||
sb.classList.toggle('collapsed');
|
||
const collapsed = sb.classList.contains('collapsed');
|
||
localStorage.setItem('sb_sidebar', collapsed ? '1' : '0');
|
||
const overlay = document.getElementById('sidebarOverlay');
|
||
if (overlay) overlay.style.display = collapsed ? 'none' : (window.innerWidth <= 768 ? 'block' : 'none');
|
||
},
|
||
|
||
restoreSidebar() {
|
||
const el = document.getElementById('sidebar');
|
||
if (!el) return; // not all surfaces have a sidebar (e.g. editor)
|
||
if (window.innerWidth <= 768 || localStorage.getItem('sb_sidebar') === '1') {
|
||
el.classList.add('collapsed');
|
||
}
|
||
},
|
||
|
||
// ── User Menu Flyout ─────────────────────
|
||
|
||
toggleUserMenu() {
|
||
const flyout = document.getElementById('userFlyout');
|
||
const opening = !flyout.classList.contains('open');
|
||
flyout.classList.toggle('open');
|
||
|
||
// On open: refresh team admin button visibility (fire-and-forget)
|
||
if (opening) {
|
||
const menuBtn = document.getElementById('menuTeamAdmin');
|
||
if (menuBtn) {
|
||
// Show from cache immediately if available
|
||
if (UI._myTeams && UI._myTeams.length > 0) {
|
||
const cached = UI._myTeams.some(t => t.my_role === 'admin');
|
||
menuBtn.style.display = cached ? '' : 'none';
|
||
}
|
||
// Refresh in background
|
||
API.listMyTeams().then(resp => {
|
||
const teams = resp.data || [];
|
||
UI._myTeams = teams;
|
||
menuBtn.style.display = teams.some(t => t.my_role === 'admin') ? '' : 'none';
|
||
}).catch(() => {});
|
||
}
|
||
}
|
||
},
|
||
|
||
closeUserMenu() {
|
||
const el = document.getElementById('userFlyout');
|
||
if (el) el.classList.remove('open');
|
||
},
|
||
|
||
// ── Sidebar Section Collapse ──────────────
|
||
// State persisted in localStorage per section key.
|
||
|
||
_sidebarSections: null,
|
||
|
||
_getSidebarSections() {
|
||
if (!this._sidebarSections) {
|
||
try {
|
||
this._sidebarSections = JSON.parse(localStorage.getItem('cs-sidebar-sections') || '{}');
|
||
} catch (_) { this._sidebarSections = {}; }
|
||
}
|
||
return this._sidebarSections;
|
||
},
|
||
|
||
toggleSidebarSection(key) {
|
||
const sections = this._getSidebarSections();
|
||
sections[key] = !sections[key]; // true = collapsed
|
||
try { localStorage.setItem('cs-sidebar-sections', JSON.stringify(sections)); } catch (_) {}
|
||
this._applySidebarSection(key, sections[key]);
|
||
},
|
||
|
||
_applySidebarSection(key, collapsed) {
|
||
const body = document.getElementById('sbBody' + key[0].toUpperCase() + key.slice(1));
|
||
const arrow = document.getElementById('sbArrow' + key[0].toUpperCase() + key.slice(1));
|
||
if (body) body.style.display = collapsed ? 'none' : '';
|
||
if (arrow) arrow.textContent = collapsed ? '▸' : '▾';
|
||
},
|
||
|
||
restoreSidebarSections() {
|
||
const sections = this._getSidebarSections();
|
||
['projects', 'channels', 'chats'].forEach(k => {
|
||
this._applySidebarSection(k, !!sections[k]);
|
||
});
|
||
},
|
||
|
||
// ── Projects Section ──────────────────────
|
||
|
||
renderProjectsSection() {
|
||
const el = document.getElementById('sbBodyProjects');
|
||
if (!el) return;
|
||
|
||
const projects = App.projects || [];
|
||
const showArchived = App.showArchivedProjects || false;
|
||
const visible = showArchived ? projects : projects.filter(p => !p.isArchived);
|
||
const hasArchived = projects.some(p => p.isArchived);
|
||
const sidebar = document.getElementById('sidebar');
|
||
const collapsed = sidebar?.classList.contains('collapsed');
|
||
|
||
if (visible.length === 0 && !hasArchived) {
|
||
el.innerHTML = collapsed ? '' :
|
||
'<div class="sb-section-empty">No projects yet</div>';
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
visible.forEach(proj => {
|
||
const isCollapsed = App.collapsedProjects?.[proj.id];
|
||
const isActive = App.activeProjectId === proj.id;
|
||
const dot = proj.color
|
||
? `<span class="sb-proj-dot" style="background:${esc(proj.color)}"></span>`
|
||
: '<span class="sb-proj-dot"></span>';
|
||
const arrow = isCollapsed ? '▸' : '▾';
|
||
const pinIcon = isActive ? '<span class="sb-proj-pin" title="Pinned for new chats">📍</span>' : '';
|
||
const chats = (App.chats || []).filter(c => c.projectId === proj.id);
|
||
|
||
html += `<div class="sb-proj-group${isActive ? ' active' : ''}${proj.isArchived ? ' archived' : ''}"
|
||
ondragover="onProjectDragOver(event)"
|
||
ondragleave="onProjectDragLeave(event)"
|
||
ondrop="onProjectDrop(event,'${proj.id}')">
|
||
<div class="sb-proj-header" data-action="toggleProjectCollapse" data-args='${JSON.stringify([proj.id])}' >
|
||
${collapsed ? dot : `<span class="sb-proj-arrow">${arrow}</span>${dot}<span class="sb-proj-name">${esc(proj.name)}</span>${pinIcon}`}
|
||
${!collapsed ? `<span class="sb-proj-count">${chats.length}</span>
|
||
<button class="sb-proj-menu" data-action="showProjectMenu" data-args='${JSON.stringify([proj.id])}' data-pass-event title="Options">⋯</button>` : ''}
|
||
</div>`;
|
||
|
||
if (!isCollapsed && !collapsed) {
|
||
if (chats.length === 0) {
|
||
html += '<div class="sb-proj-empty">Drop chats here</div>';
|
||
} else {
|
||
chats.forEach(c => { html += this._chatItemHTML(c); });
|
||
}
|
||
}
|
||
html += '</div>';
|
||
});
|
||
|
||
if (hasArchived && !collapsed) {
|
||
html += `<button class="sb-show-archived" data-action="_toggleArchivedProjects"">
|
||
${showArchived ? '▾ Hide archived' : `▸ Show archived (${projects.filter(p => p.isArchived).length})`}
|
||
</button>`;
|
||
}
|
||
|
||
el.innerHTML = html;
|
||
},
|
||
|
||
// ── Channels Section ──────────────────────
|
||
|
||
renderChannelsSection() {
|
||
const el = document.getElementById('sbBodyChannels');
|
||
if (!el) return;
|
||
|
||
const channels = App.channels || [];
|
||
const sidebar = document.getElementById('sidebar');
|
||
const collapsed = sidebar?.classList.contains('collapsed');
|
||
|
||
if (channels.length === 0) {
|
||
el.innerHTML = collapsed ? '' :
|
||
'<div class="sb-section-empty">No channels yet</div>';
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
channels.forEach(ch => {
|
||
const isActive = App.activeId === ch.id;
|
||
const isDM = ch.type === 'dm';
|
||
const isChannel = ch.type === 'channel';
|
||
const online = App.presence?.[ch.dmPartnerId] === 'online';
|
||
|
||
// Icon: @ for DM, # for channel
|
||
const icon = isDM
|
||
? `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`
|
||
: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg>`;
|
||
|
||
const onlineDot = isDM && online
|
||
? '<span class="sb-presence online"></span>'
|
||
: '';
|
||
const unreadBadge = ch.unread > 0
|
||
? `<span class="sb-unread">${ch.unread > 99 ? '99+' : ch.unread}</span>`
|
||
: '';
|
||
|
||
html += `<div class="sb-channel-item${isActive ? ' active' : ''}"
|
||
data-action="selectChannel" data-args='${JSON.stringify([ch.id])}' oncontextmenu="showChannelContextMenu(event,'${ch.id}')"
|
||
title="${esc(ch.name)}">
|
||
<span class="sb-ch-icon">${icon}</span>
|
||
${!collapsed ? `<span class="sb-ch-name">${esc(ch.name)}</span>${onlineDot}${unreadBadge}
|
||
<button class="sb-ch-menu" data-action="showChannelContextMenu" data-args='${JSON.stringify([ch.id])}' data-pass-event title="Options">⋯</button>` : unreadBadge}
|
||
</div>`;
|
||
});
|
||
|
||
el.innerHTML = html;
|
||
},
|
||
|
||
// ── Chats Section (renderChatList) ────────
|
||
|
||
renderChatList() {
|
||
// Target the new section body; fall back to legacy id during transition.
|
||
const el = document.getElementById('sbBodyChats') || document.getElementById('chatHistory');
|
||
if (!el) return;
|
||
|
||
const searchInput = document.getElementById('chatSearchInput');
|
||
const searchWrap = document.getElementById('sidebarSearch');
|
||
const query = (searchInput?.value || '').trim().toLowerCase();
|
||
if (searchWrap) searchWrap.classList.toggle('has-value', query.length > 0);
|
||
|
||
// Chats section shows only direct/group chats not in a project.
|
||
// type='channel' and type='dm' belong to the Channels section (App.channels).
|
||
// type='workflow' belongs to the Queue section (WorkflowQueue).
|
||
// Project chats rendered by renderProjectsSection.
|
||
let chats = (App.chats || []).filter(c =>
|
||
!c.projectId &&
|
||
c.type !== 'channel' &&
|
||
c.type !== 'dm' &&
|
||
c.type !== 'workflow'
|
||
);
|
||
if (query) chats = chats.filter(c => (c.title || '').toLowerCase().includes(query));
|
||
|
||
const folders = App.folders || [];
|
||
|
||
if (chats.length === 0 && folders.length === 0) {
|
||
el.innerHTML = query
|
||
? `<div class="sb-section-empty">No chats matching "${esc(query)}"</div>`
|
||
: '<div class="sb-section-empty">No chats yet</div>';
|
||
// Still re-render projects in case search is cross-cutting
|
||
this.renderProjectsSection();
|
||
return;
|
||
}
|
||
|
||
// Group by folder, then by time for unfiled
|
||
const folderMap = {};
|
||
folders.forEach(f => { folderMap[f.id] = []; });
|
||
|
||
const unfiled = [];
|
||
chats.forEach(c => {
|
||
if (c.folderId && folderMap[c.folderId]) {
|
||
folderMap[c.folderId].push(c);
|
||
} else {
|
||
unfiled.push(c);
|
||
}
|
||
});
|
||
|
||
let html = '';
|
||
|
||
// Folder groups — always render, even when empty (with drag handlers)
|
||
folders.forEach(f => {
|
||
const items = folderMap[f.id] || [];
|
||
const isOpen = !App.collapsedFolders?.[f.id];
|
||
html += `<div class="sb-folder-group"
|
||
ondragover="event.preventDefault();event.dataTransfer.dropEffect='move';this.classList.add('drag-over')"
|
||
ondragleave="this.classList.remove('drag-over')"
|
||
ondrop="onFolderDrop(event,'${f.id}')">
|
||
<div class="sb-folder-header" data-action="UI.toggleFolder" data-args='${JSON.stringify([f.id])}'">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
|
||
</svg>
|
||
<span class="sb-folder-name">${esc(f.name)}</span>
|
||
<button class="sb-folder-menu" data-action="showFolderMenu" data-args='${JSON.stringify([f.id])}' data-pass-event title="Folder options">⋯</button>
|
||
<span class="sb-folder-arrow">${isOpen ? '▾' : '▸'}</span>
|
||
</div>
|
||
${isOpen
|
||
? (items.length > 0
|
||
? items.map(c => this._chatItemHTML(c, true)).join('')
|
||
: '<div class="sb-folder-empty">Drop chats here</div>')
|
||
: ''}
|
||
</div>`;
|
||
});
|
||
|
||
// Unfiled chats grouped by time
|
||
const now = Date.now();
|
||
const DAY = 86400000;
|
||
const groups = { today: [], yesterday: [], week: [], older: [] };
|
||
unfiled.forEach(c => {
|
||
const age = now - new Date(c.updatedAt).getTime();
|
||
if (age < DAY) groups.today.push(c);
|
||
else if (age < 2*DAY) groups.yesterday.push(c);
|
||
else if (age < 7*DAY) groups.week.push(c);
|
||
else groups.older.push(c);
|
||
});
|
||
|
||
// When folders exist, wrap unfiled chats in a drop zone
|
||
if (folders.length > 0) {
|
||
html += `<div class="sb-unfiled-zone"
|
||
ondragover="event.preventDefault();event.dataTransfer.dropEffect='move';this.classList.add('drag-over')"
|
||
ondragleave="this.classList.remove('drag-over')"
|
||
ondrop="onUnfiledDrop(event)">`;
|
||
if (unfiled.length === 0) {
|
||
html += '<div class="sb-unfiled-hint">Drop here to unfile</div>';
|
||
}
|
||
}
|
||
|
||
const renderTimeGroup = (label, items) => {
|
||
if (!items.length) return;
|
||
html += `<div class="chat-group-label">${label}</div>`;
|
||
items.forEach(c => { html += this._chatItemHTML(c); });
|
||
};
|
||
|
||
renderTimeGroup('Today', groups.today);
|
||
renderTimeGroup('Yesterday', groups.yesterday);
|
||
renderTimeGroup('Previous 7 days', groups.week);
|
||
renderTimeGroup('Older', groups.older);
|
||
|
||
if (folders.length > 0) {
|
||
html += '</div>'; // close .sb-unfiled-zone
|
||
}
|
||
|
||
el.innerHTML = html;
|
||
|
||
// Always keep projects section in sync
|
||
this.renderProjectsSection();
|
||
|
||
// Refresh workflow queue section (workflow channels filtered out of chat list)
|
||
if (typeof WorkflowQueue !== 'undefined') WorkflowQueue.refresh();
|
||
|
||
// Refresh task sidebar section (v0.27.4)
|
||
if (typeof TaskSidebar !== 'undefined') TaskSidebar.refresh();
|
||
},
|
||
|
||
toggleFolder(folderId) {
|
||
if (!App.collapsedFolders) App.collapsedFolders = {};
|
||
App.collapsedFolders[folderId] = !App.collapsedFolders[folderId];
|
||
this.renderChatList();
|
||
},
|
||
|
||
_chatItemHTML(c, indented = false) {
|
||
const time = _relativeTime(c.updatedAt);
|
||
const active = c.id === App.activeId ? ' active' : '';
|
||
const indent = indented ? ' indented' : '';
|
||
const typeIcon = c.type === 'group'
|
||
? '<span class="chat-type-icon" title="Group Chat">👥</span> '
|
||
: c.type === 'workflow' ? '<span class="chat-type-icon" title="Workflow">⚙</span> ' : '';
|
||
return `<div class="chat-item${active}${indent}"
|
||
data-action="selectChat" data-args='${JSON.stringify([c.id])}' oncontextmenu="showChatContextMenu(event,'${c.id}')"
|
||
draggable="true"
|
||
ondragstart="onChatDragStart(event,'${c.id}')"
|
||
ondragend="onChatDragEnd(event)">
|
||
<span class="chat-item-title" ondblclick="startRenameChat('${c.id}');event.stopPropagation();"
|
||
title="Double-click to rename">${typeIcon}${esc(c.title)}</span>
|
||
<span class="chat-item-time">${time}</span>
|
||
<button class="chat-item-delete" data-action="deleteChat" data-args='${JSON.stringify([c.id])}' title="Delete">✕</button>
|
||
</div>`;
|
||
},
|
||
|
||
// ── Messages ─────────────────────────────
|
||
|
||
renderMessages(messages) {
|
||
const el = document.getElementById('chatMessages');
|
||
if (!messages || messages.length === 0) {
|
||
this.showEmptyState();
|
||
return;
|
||
}
|
||
|
||
// Find the most recent summary boundary
|
||
let summaryIdx = -1;
|
||
for (let i = 0; i < messages.length; i++) {
|
||
if (_isSummaryMessage(messages[i])) summaryIdx = i;
|
||
}
|
||
|
||
// Render: if summary exists, show collapsed-history toggle + summary + messages after
|
||
let html = '';
|
||
if (summaryIdx >= 0) {
|
||
const hiddenCount = messages.filter((m, i) => i < summaryIdx && m.role !== 'system').length;
|
||
if (hiddenCount > 0) {
|
||
html += `<div class="message-summary-divider" id="summaryDivider">
|
||
<button class="summary-toggle" data-action="toggleSummarizedHistory"">
|
||
▸ ${hiddenCount} earlier messages summarized
|
||
</button>
|
||
</div>
|
||
<div id="summarizedHistory" style="display:none">
|
||
${messages.slice(0, summaryIdx)
|
||
.filter(m => m.role !== 'system')
|
||
.map((m, i) => this._messageHTML(m, i, true))
|
||
.join('')}
|
||
</div>`;
|
||
}
|
||
// Render summary node
|
||
html += this._summaryHTML(messages[summaryIdx]);
|
||
// Render messages after summary
|
||
html += messages.slice(summaryIdx + 1)
|
||
.filter(m => m.role !== 'system' && !_isSummaryMessage(m))
|
||
.map((m, i) => this._messageHTML(m, summaryIdx + 1 + i))
|
||
.join('');
|
||
} else {
|
||
html = messages
|
||
.filter(m => m.role !== 'system')
|
||
.map((m, i) => this._messageHTML(m, i))
|
||
.join('');
|
||
}
|
||
|
||
el.innerHTML = html;
|
||
if (typeof runExtensionPostRender === 'function') runExtensionPostRender(el);
|
||
if (typeof loadAuthImages === 'function') loadAuthImages(el);
|
||
this._scrollToBottom(true);
|
||
},
|
||
|
||
_summaryHTML(msg) {
|
||
const meta = msg.metadata || {};
|
||
const count = meta.summarized_count || '?';
|
||
const model = meta.utility_model || 'utility model';
|
||
const trigger = meta.trigger === 'auto' ? ' · auto' : '';
|
||
return `
|
||
<div class="message-summary" data-msg-id="${esc(msg.id || '')}">
|
||
<div class="summary-header">
|
||
<span>📝 Conversation summary (${count} messages, by ${esc(model)}${trigger})</span>
|
||
</div>
|
||
<div class="msg-text">${formatMessage(msg.content)}</div>
|
||
</div>`;
|
||
},
|
||
|
||
_messageHTML(msg, index, dimmed) {
|
||
const isUser = msg.role === 'user';
|
||
// Skip summary messages in normal rendering — they get _summaryHTML
|
||
if (_isSummaryMessage(msg)) return '';
|
||
const time = msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
|
||
|
||
// v0.23.2: Sender attribution — distinguish self from other humans
|
||
const isSelf = !isUser ? false
|
||
: (!msg.participant_id || msg.participant_id === API.user?.id);
|
||
const isOtherUser = isUser && !isSelf;
|
||
|
||
let senderLabel = 'You';
|
||
let senderAvatarURI = API.user?.avatar || null;
|
||
|
||
if (isOtherUser) {
|
||
senderLabel = msg.sender_name || 'User';
|
||
senderAvatarURI = msg.sender_avatar || null;
|
||
} else if (!isUser) {
|
||
// Assistant message — use model/persona label
|
||
senderLabel = 'Assistant';
|
||
senderAvatarURI = assistantAvatarURI(msg);
|
||
if (msg.sender_name) {
|
||
senderLabel = msg.sender_name;
|
||
} else if (msg.modelName) {
|
||
senderLabel = msg.modelName;
|
||
} else if (typeof ChannelModels !== 'undefined' && msg.model) {
|
||
senderLabel = ChannelModels.resolveDisplayName(msg.model);
|
||
} else if (msg.model) {
|
||
const m = App.models.find(x => x.id === msg.model || x.baseModelId === msg.model);
|
||
senderLabel = m?.name || msg.model;
|
||
}
|
||
if (msg.sender_avatar) {
|
||
senderAvatarURI = msg.sender_avatar;
|
||
}
|
||
}
|
||
|
||
// CSS class: self = right-aligned "user", other humans = left-aligned "other-user", AI = "assistant"
|
||
const roleClass = isSelf ? 'user' : isOtherUser ? 'other-user' : msg.role;
|
||
|
||
// Branch indicator: show ‹ 2/3 › when siblings exist
|
||
const hasSiblings = (msg.siblingCount || 1) > 1;
|
||
const sibPos = (msg.siblingIndex || 0) + 1; // display as 1-indexed
|
||
const sibTotal = msg.siblingCount || 1;
|
||
const branchNav = hasSiblings ? `
|
||
<div class="branch-nav">
|
||
<button class="branch-arrow" data-action="switchSibling" data-args='${JSON.stringify([msg.id, -1])}' ${sibPos <= 1 ? 'disabled' : ''} title="Previous version">‹</button>
|
||
<span class="branch-pos">${sibPos}/${sibTotal}</span>
|
||
<button class="branch-arrow" data-action="switchSibling" data-args='${JSON.stringify([msg.id, 1])}' ${sibPos >= sibTotal ? 'disabled' : ''} title="Next version">›</button>
|
||
</div>` : '';
|
||
|
||
// Action buttons
|
||
const msgId = msg.id ? esc(msg.id) : '';
|
||
const editBtn = isSelf && msgId ? `<button class="msg-action-btn" data-action="editMessage" data-args='${JSON.stringify([msgId])}' title="Edit">Edit</button>` : '';
|
||
const regenBtn = !isUser && msgId ? `<button class="msg-action-btn" data-action="regenerateMessage" data-args='${JSON.stringify([msgId])}' title="Regenerate">Regen</button>` : '';
|
||
|
||
return `
|
||
<div class="message ${roleClass}${dimmed ? ' msg-dimmed' : ''}" data-msg-id="${msgId}">
|
||
<div class="msg-inner">
|
||
<div class="msg-avatar">${avatarHTML(isOtherUser ? 'other-user' : msg.role, senderAvatarURI)}</div>
|
||
<div class="msg-body">
|
||
<div class="msg-head">
|
||
<span class="msg-role">${esc(senderLabel)}</span>
|
||
${branchNav}
|
||
${time ? `<span class="msg-time">${time}</span>` : ''}
|
||
<div class="msg-actions">
|
||
${editBtn}
|
||
${regenBtn}
|
||
<button class="msg-action-btn" data-action="UI.copyMessage" data-args='${JSON.stringify([index])}'" title="Copy">Copy</button>
|
||
<button class="msg-action-btn" data-action="saveMessageToNote" data-args='${JSON.stringify([index])}'" title="Save to note">Note</button>
|
||
</div>
|
||
</div>
|
||
${!isUser ? _renderToolCallsHTML(msg.tool_calls) : ''}
|
||
<div class="msg-text">${formatMessage(msg.content)}</div>
|
||
${typeof renderMessageFiles === 'function' ? renderMessageFiles(msgId) : ''}
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
},
|
||
|
||
showEmptyState() {
|
||
var base = window.__BASE__ || '';
|
||
document.getElementById('chatMessages').innerHTML = `
|
||
<div class="empty-state">
|
||
<div class="empty-logo"><img src="${base}/favicon-256.png" class="empty-logo-img" alt=""></div>
|
||
<h2>Chat Switchboard</h2>
|
||
<p>Select a model and start chatting</p>
|
||
</div>`;
|
||
this.updateContextBanner();
|
||
},
|
||
|
||
// v0.23.2: Show/hide context banner based on active conversation type
|
||
updateContextBanner() {
|
||
const el = document.getElementById('channelContextBanner');
|
||
if (!el) return;
|
||
const ac = App.activeConversation;
|
||
if (!ac || ac.type === 'direct') {
|
||
el.style.display = 'none';
|
||
this.updateWorkflowStageBar();
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
if (ac.type === 'dm') {
|
||
const ch = (App.channels || []).find(c => c.id === ac.id);
|
||
const name = ch?.name || 'someone';
|
||
html = `<span class="ctx-mode">DM</span>` +
|
||
`<span>with <b>${esc(name)}</b></span>` +
|
||
`<span class="ctx-hint">@mention a persona to bring in AI</span>` +
|
||
`<span style="flex:1;"></span>` +
|
||
`<button class="ctx-participants-btn" data-action="openParticipantsPanel" data-args='${JSON.stringify([ac.id])}' title="Manage participants">👥 Members</button>`;
|
||
} else if (ac.type === 'group') {
|
||
html = `<span class="ctx-mode">Group</span>` +
|
||
`<span class="ctx-hint">No @mention = leader responds · @mention to route · @all for everyone</span>` +
|
||
`<span style="flex:1;"></span>` +
|
||
`<button class="ctx-participants-btn" data-action="openParticipantsPanel" data-args='${JSON.stringify([ac.id])}' title="Manage participants">👥 Members</button>`;
|
||
} else if (ac.type === 'channel') {
|
||
const ch = (App.channels || []).find(c => c.id === ac.id);
|
||
const mode = ch?.aiMode || 'auto';
|
||
const topic = ch?.topic || '';
|
||
const modeLabel = mode === 'auto' ? 'AI: auto' : mode === 'mention_only' ? 'AI: @mention only' : 'AI: off';
|
||
html = `<button class="ctx-mode ctx-mode-btn" data-action="cycleChannelAiMode" data-args='${JSON.stringify([ac.id])}' title="Click to change AI mode">${esc(modeLabel)}</button>`;
|
||
if (topic) html += `<span class="ctx-topic">${esc(topic)}</span>`;
|
||
html += `<span style="flex:1;"></span>`;
|
||
html += `<button class="ctx-participants-btn" data-action="openParticipantsPanel" data-args='${JSON.stringify([ac.id])}' title="Manage participants">👥 Members</button>`;
|
||
}
|
||
el.innerHTML = html;
|
||
el.style.display = '';
|
||
this.updateWorkflowStageBar();
|
||
},
|
||
// Fetches workflow status and renders stage dots, name, advance/reject buttons.
|
||
updateWorkflowStageBar() {
|
||
const el = document.getElementById('workflowStageBar');
|
||
if (!el) return;
|
||
|
||
const ac = App.activeConversation;
|
||
if (!ac || ac.type !== 'workflow') {
|
||
el.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
// Fetch status (async, non-blocking — renders on completion)
|
||
const base = window.__BASE__ || '';
|
||
API._get(`/api/v1/channels/${ac.id}/workflow/status`).then(ws => {
|
||
if (!ws || !ws.workflow_id) {
|
||
el.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
// Cache on App for WS event handler access
|
||
App._workflowStatus = ws;
|
||
|
||
// Load stage definitions for name display
|
||
API._get(`/api/v1/workflows/${ws.workflow_id}`).then(wf => {
|
||
const stages = wf.stages || [];
|
||
const current = ws.current_stage || 0;
|
||
const status = ws.status || 'active';
|
||
const totalStages = stages.length || 1;
|
||
const stageName = stages[current] ? stages[current].name : 'Stage ' + current;
|
||
|
||
// Step dots
|
||
let dots = '';
|
||
for (let i = 0; i < totalStages; i++) {
|
||
const cls = i < current ? 'completed' : i === current ? 'current' : '';
|
||
dots += '<div class="wf-bar-step ' + cls + '" title="Stage ' + i + (stages[i] ? ': ' + esc(stages[i].name) : '') + '"></div>';
|
||
}
|
||
|
||
// Status badge
|
||
const statusCls = status === 'completed' ? 'completed' : status === 'stale' ? 'stale' : 'active';
|
||
const statusLabel = status.charAt(0).toUpperCase() + status.slice(1);
|
||
|
||
// Advance/reject buttons (only for active workflows, admin or team members)
|
||
let actions = '';
|
||
if (status === 'active' && API.isAdmin) {
|
||
actions =
|
||
'<button class="btn-small btn-primary" data-action="advanceWorkflowStage"">Advance ▸</button>' +
|
||
(current > 0 ? '<button class="btn-small btn-danger" data-action="rejectWorkflowStage"">◂ Reject</button>' : '');
|
||
}
|
||
|
||
el.innerHTML =
|
||
'<div class="wf-bar-steps">' + dots + '</div>' +
|
||
'<span class="wf-bar-stage-name">' + esc(stageName) + '</span>' +
|
||
'<span class="wf-bar-status ' + statusCls + '">' + esc(statusLabel) + '</span>' +
|
||
'<span class="wf-bar-spacer"></span>' +
|
||
'<span style="font-size:11px;color:var(--text-3)">Step ' + (current + 1) + ' of ' + totalStages + '</span>' +
|
||
(actions ? '<div class="wf-bar-actions">' + actions + '</div>' : '');
|
||
el.style.display = '';
|
||
}).catch(() => {
|
||
el.style.display = 'none';
|
||
});
|
||
}).catch(() => {
|
||
el.style.display = 'none';
|
||
});
|
||
},
|
||
|
||
showEditInline(messageId, currentContent) {
|
||
const msgEl = document.querySelector(`.message[data-msg-id="${messageId}"]`);
|
||
if (!msgEl) return;
|
||
|
||
const textEl = msgEl.querySelector('.msg-text');
|
||
if (!textEl) return;
|
||
|
||
// Replace message text with an edit form
|
||
const escaped = currentContent.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||
textEl.innerHTML = `
|
||
<textarea class="msg-edit-input" id="editInput_${messageId}">${escaped}</textarea>
|
||
<div class="msg-edit-actions">
|
||
<button class="msg-edit-cancel" data-action="cancelEdit">Cancel</button>
|
||
<button class="msg-edit-submit" data-action="_submitEditFromDOM" data-args='${JSON.stringify([messageId])}'">Submit & Regenerate</button>
|
||
</div>`;
|
||
|
||
// Focus and select all
|
||
const textarea = document.getElementById(`editInput_${messageId}`);
|
||
if (textarea) {
|
||
textarea.focus();
|
||
textarea.selectionStart = textarea.value.length;
|
||
// Auto-resize
|
||
textarea.style.height = 'auto';
|
||
textarea.style.height = textarea.scrollHeight + 'px';
|
||
textarea.addEventListener('input', () => {
|
||
textarea.style.height = 'auto';
|
||
textarea.style.height = textarea.scrollHeight + 'px';
|
||
});
|
||
// Ctrl+Enter to submit
|
||
textarea.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
||
e.preventDefault();
|
||
submitEdit(messageId, textarea.value);
|
||
}
|
||
if (e.key === 'Escape') {
|
||
e.preventDefault();
|
||
cancelEdit();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
// ── Streaming ────────────────────────────
|
||
|
||
async streamResponse(response, messages, modelName) {
|
||
const container = document.getElementById('chatMessages');
|
||
document.getElementById('typingIndicator')?.remove();
|
||
|
||
const label = modelName || 'Assistant';
|
||
const currentModel = App.findModel(App.settings.model);
|
||
// Resolve avatar: channel roster persona → selected model → null
|
||
let streamAvatar = null;
|
||
if (typeof ChannelModels !== 'undefined') {
|
||
const info = ChannelModels.resolvePersonaInfo(currentModel?.baseModelId);
|
||
if (info?.avatar) streamAvatar = info.avatar;
|
||
}
|
||
if (!streamAvatar) {
|
||
streamAvatar = currentModel?.personaAvatar || null;
|
||
}
|
||
|
||
// Multi-model state: when model_start events arrive, we create
|
||
// separate message bubbles per model. Without them, single-bubble.
|
||
let multiModel = false;
|
||
let activeContentEl = null;
|
||
let activeToolsEl = null;
|
||
let content = '';
|
||
let reasoning = '';
|
||
|
||
// Create initial single-model bubble (replaced if multi-model)
|
||
const _createBubble = (bubbleLabel) => {
|
||
const div = document.createElement('div');
|
||
div.className = 'message assistant';
|
||
div.innerHTML = `
|
||
<div class="msg-inner">
|
||
<div class="msg-avatar">${avatarHTML('assistant', streamAvatar)}</div>
|
||
<div class="msg-body">
|
||
<div class="msg-head"><span class="msg-role">${esc(bubbleLabel)}</span></div>
|
||
<div class="msg-tools" style="display:none"></div>
|
||
<div class="msg-text"></div>
|
||
</div>
|
||
</div>`;
|
||
container.appendChild(div);
|
||
activeContentEl = div.querySelector('.msg-text');
|
||
activeToolsEl = div.querySelector('.msg-tools');
|
||
return div;
|
||
};
|
||
|
||
_createBubble(label);
|
||
|
||
const reader = response.body.getReader();
|
||
const decoder = new TextDecoder();
|
||
let buffer = '';
|
||
let currentEvent = ''; // SSE event type
|
||
|
||
while (true) {
|
||
const { done, value } = await reader.read();
|
||
if (done) break;
|
||
|
||
buffer += decoder.decode(value, { stream: true });
|
||
const lines = buffer.split('\n');
|
||
buffer = lines.pop() || '';
|
||
|
||
for (const line of lines) {
|
||
// SSE event type line
|
||
if (line.startsWith('event: ')) {
|
||
currentEvent = line.slice(7).trim();
|
||
continue;
|
||
}
|
||
|
||
if (!line.startsWith('data: ')) continue;
|
||
const data = line.slice(6);
|
||
if (data === '[DONE]') { currentEvent = ''; continue; }
|
||
|
||
try {
|
||
const parsed = JSON.parse(data);
|
||
|
||
// ── Multi-model: model_start creates a new bubble ──
|
||
if (currentEvent === 'model_start') {
|
||
if (!multiModel) {
|
||
// First model_start: remove the initial empty bubble
|
||
multiModel = true;
|
||
container.lastElementChild?.remove();
|
||
}
|
||
content = '';
|
||
reasoning = '';
|
||
const dn = parsed.display_name || parsed.model_id || 'Model';
|
||
_createBubble(dn);
|
||
currentEvent = '';
|
||
continue;
|
||
}
|
||
|
||
if (currentEvent === 'model_end') {
|
||
currentEvent = '';
|
||
continue;
|
||
}
|
||
|
||
if (currentEvent === 'tool_use') {
|
||
this._renderToolUseInEl(activeToolsEl, parsed);
|
||
currentEvent = '';
|
||
continue;
|
||
}
|
||
|
||
if (currentEvent === 'tool_result') {
|
||
this._renderToolResultInEl(activeToolsEl, parsed);
|
||
currentEvent = '';
|
||
continue;
|
||
}
|
||
|
||
// Reasoning content delta (thinking blocks)
|
||
const reasoningDelta = parsed.choices?.[0]?.delta?.reasoning_content || '';
|
||
if (reasoningDelta) {
|
||
reasoning += reasoningDelta;
|
||
const full = (reasoning ? '<think>' + reasoning + '</think>' : '') + content;
|
||
if (activeContentEl) activeContentEl.innerHTML = formatMessage(full);
|
||
this._scrollToBottom();
|
||
}
|
||
|
||
// Normal content delta
|
||
const delta = parsed.choices?.[0]?.delta?.content || '';
|
||
if (delta) {
|
||
content += delta;
|
||
const full = (reasoning ? '<think>' + reasoning + '</think>' : '') + content;
|
||
if (activeContentEl) activeContentEl.innerHTML = formatMessage(full);
|
||
this._scrollToBottom();
|
||
|
||
// Live-update preview panel if open (debounced)
|
||
if (typeof _livePreviewUpdate === 'function') {
|
||
_livePreviewUpdate(content);
|
||
}
|
||
}
|
||
currentEvent = '';
|
||
} catch (e) { /* partial JSON */ }
|
||
}
|
||
}
|
||
|
||
return content;
|
||
},
|
||
|
||
// Tool rendering helpers that take explicit element refs (for multi-model)
|
||
_renderToolUseInEl(toolsEl, toolCalls) {
|
||
if (!toolsEl) {
|
||
// Fallback to id-based (single model compat)
|
||
this._renderToolUse(toolCalls);
|
||
return;
|
||
}
|
||
toolsEl.style.display = '';
|
||
for (const tc of toolCalls) {
|
||
const name = tc.function?.name || tc.name || 'unknown';
|
||
const toolDiv = document.createElement('div');
|
||
toolDiv.className = 'tool-activity';
|
||
toolDiv.dataset.toolId = tc.id;
|
||
toolDiv.innerHTML = `
|
||
<span class="tool-icon">🔧</span>
|
||
<span class="tool-name">${esc(name)}</span>
|
||
<span class="tool-status tool-running">running…</span>`;
|
||
toolsEl.appendChild(toolDiv);
|
||
}
|
||
this._scrollToBottom();
|
||
},
|
||
|
||
_renderToolResultInEl(toolsEl, result) {
|
||
if (!toolsEl) {
|
||
this._renderToolResult(result);
|
||
return;
|
||
}
|
||
const el = toolsEl.querySelector(`[data-tool-id="${result.tool_call_id}"]`);
|
||
if (el) {
|
||
const statusEl = el.querySelector('.tool-status');
|
||
if (statusEl) {
|
||
statusEl.textContent = result.is_error ? 'error' : 'done';
|
||
statusEl.className = `tool-status ${result.is_error ? 'tool-error' : 'tool-done'}`;
|
||
}
|
||
}
|
||
},
|
||
|
||
_renderToolUse(toolCalls) {
|
||
const el = document.getElementById('streamTools');
|
||
if (!el) return;
|
||
el.style.display = '';
|
||
for (const tc of toolCalls) {
|
||
const name = tc.function?.name || tc.name || 'unknown';
|
||
const toolDiv = document.createElement('div');
|
||
toolDiv.className = 'tool-activity';
|
||
toolDiv.dataset.toolId = tc.id;
|
||
toolDiv.innerHTML = `
|
||
<span class="tool-icon">🔧</span>
|
||
<span class="tool-name">${esc(name)}</span>
|
||
<span class="tool-status tool-running">running…</span>`;
|
||
el.appendChild(toolDiv);
|
||
}
|
||
this._scrollToBottom();
|
||
},
|
||
|
||
_renderToolResult(result) {
|
||
// Search all tool-activity elements by data-tool-id
|
||
const el = document.querySelector(`[data-tool-id="${result.tool_call_id}"]`);
|
||
if (el) {
|
||
const statusEl = el.querySelector('.tool-status');
|
||
if (statusEl) {
|
||
statusEl.textContent = result.is_error ? 'error' : 'done';
|
||
statusEl.className = `tool-status ${result.is_error ? 'tool-error' : 'tool-done'}`;
|
||
}
|
||
// Parse tool result content for a brief summary
|
||
try {
|
||
const parsed = JSON.parse(result.content);
|
||
let summary = '';
|
||
if (parsed.title) summary = parsed.title;
|
||
else if (parsed.count != null) summary = `${parsed.count} results`;
|
||
if (summary) {
|
||
const hint = document.createElement('span');
|
||
hint.className = 'tool-hint';
|
||
hint.textContent = typeof summary === 'string' ? summary : JSON.stringify(summary);
|
||
el.appendChild(hint);
|
||
}
|
||
// Add "View note" link for note tools
|
||
if (result.name && result.name.startsWith('note_') && parsed.id) {
|
||
const link = document.createElement('button');
|
||
link.className = 'tool-note-link';
|
||
link.textContent = '📝 View note';
|
||
link.onclick = () => { openNotes(); setTimeout(() => openNoteEditor(parsed.id), 300); };
|
||
el.appendChild(link);
|
||
}
|
||
} catch (e) { /* not JSON or no useful summary */ }
|
||
}
|
||
this._scrollToBottom();
|
||
},
|
||
|
||
// ── Model Selector (Custom Dropdown) ────
|
||
|
||
_modelValue: '',
|
||
|
||
getModelValue() { return UI._modelValue || App.settings.model || ''; },
|
||
|
||
setModelValue(val, label) {
|
||
UI._modelValue = val;
|
||
if (val) { App.settings.model = val; saveSettings(); }
|
||
const btn = document.getElementById('modelDropdownLabel');
|
||
if (btn) btn.textContent = label || val || 'Select a model';
|
||
// Highlight selected item
|
||
document.querySelectorAll('#modelDropdownMenu .model-dropdown-item').forEach(el => {
|
||
el.classList.toggle('selected', el.dataset.value === val);
|
||
});
|
||
UI.updateCapabilityBadges();
|
||
if (typeof updateContextWarning === 'function') updateContextWarning();
|
||
if (typeof updateInputTokens === 'function') updateInputTokens();
|
||
},
|
||
|
||
updateModelSelector() {
|
||
const menu = document.getElementById('modelDropdownMenu');
|
||
if (!menu) return;
|
||
const current = App.settings.model;
|
||
menu.innerHTML = '';
|
||
|
||
if (App.models.length === 0) {
|
||
menu.innerHTML = '<div class="model-dropdown-item" style="color:var(--text-3);cursor:default">No models loaded</div>';
|
||
UI.setModelValue('', 'No models loaded');
|
||
} else {
|
||
const globalPersonas = App.models.filter(m => m.isPersona && m.personaScope === 'global');
|
||
const teamPersonas = App.models.filter(m => m.isPersona && m.personaScope === 'team');
|
||
const personalPersonas = App.models.filter(m => m.isPersona && m.personaScope === 'personal');
|
||
const models = App.models.filter(m => !m.isPersona && !m.hidden);
|
||
|
||
const addGroup = (label, items) => {
|
||
if (items.length === 0) return;
|
||
const hdr = document.createElement('div');
|
||
hdr.className = 'model-dropdown-group';
|
||
hdr.textContent = label;
|
||
menu.appendChild(hdr);
|
||
items.forEach(m => menu.appendChild(UI._createDropdownItem(m)));
|
||
};
|
||
|
||
addGroup('⚡ Personas', globalPersonas);
|
||
|
||
// Group team personas by team name
|
||
const teamGroups = {};
|
||
teamPersonas.forEach(m => {
|
||
const tn = m.personaTeamName || 'Team';
|
||
(teamGroups[tn] = teamGroups[tn] || []).push(m);
|
||
});
|
||
Object.keys(teamGroups).sort().forEach(tn => {
|
||
addGroup(`👥 ${tn}`, teamGroups[tn]);
|
||
});
|
||
|
||
addGroup('🔧 My Personas', personalPersonas);
|
||
|
||
// No team model groups — team providers are for persona building only.
|
||
// Team members access team models through curated personas.
|
||
addGroup('Models', models.filter(m => m.source !== 'personal'));
|
||
addGroup('🔑 My Providers', models.filter(m => m.source === 'personal'));
|
||
|
||
// Restore selection — resolution chain: localStorage → admin default → first visible
|
||
const visibleModels = App.models.filter(m => !m.hidden);
|
||
const match = visibleModels.find(m => m.id === current || m.baseModelId === current);
|
||
if (match) {
|
||
UI.setModelValue(match.id, match.name + (match.provider ? ` (${match.provider})` : ''));
|
||
} else if (App.defaultModel && visibleModels.length > 0) {
|
||
// Admin-configured default
|
||
const def = visibleModels.find(m => m.id === App.defaultModel || m.baseModelId === App.defaultModel);
|
||
if (def) {
|
||
UI.setModelValue(def.id, def.name + (def.provider ? ` (${def.provider})` : ''));
|
||
} else {
|
||
const first = visibleModels[0];
|
||
UI.setModelValue(first.id, first.name + (first.provider ? ` (${first.provider})` : ''));
|
||
}
|
||
} else if (visibleModels.length > 0) {
|
||
const first = visibleModels[0];
|
||
UI.setModelValue(first.id, first.name + (first.provider ? ` (${first.provider})` : ''));
|
||
} else {
|
||
UI.setModelValue('', 'No visible models');
|
||
}
|
||
}
|
||
|
||
// Sync settings modal selector (flat select is fine there)
|
||
const settingsSel = document.getElementById('settingsModel');
|
||
if (settingsSel) {
|
||
settingsSel.innerHTML = '';
|
||
App.models.filter(m => !m.hidden).forEach(m => {
|
||
const opt = document.createElement('option');
|
||
opt.value = m.id;
|
||
opt.textContent = (m.name || m.id) + (m.provider ? ` (${m.provider})` : '');
|
||
settingsSel.appendChild(opt);
|
||
});
|
||
if (current) settingsSel.value = current;
|
||
}
|
||
},
|
||
|
||
_createDropdownItem(m) {
|
||
const div = document.createElement('div');
|
||
div.className = 'model-dropdown-item';
|
||
div.dataset.value = m.id;
|
||
const avatar = m.personaAvatar ? `<img src="${m.personaAvatar}" class="dropdown-avatar" alt="">` : '';
|
||
const handleHint = m.isPersona && m.personaHandle ? `<span class="item-handle">@${esc(m.personaHandle)}</span>` : '';
|
||
const teamBadge = m.source === 'team' && m.teamName ? `<span class="badge-team" style="font-size:9px;padding:0 4px">👥 ${esc(m.teamName)}</span>` : '';
|
||
div.innerHTML = `${avatar}<span class="item-label">${esc(m.name || m.id)}${handleHint}</span>${teamBadge}${m.provider ? `<span class="item-provider">${esc(m.provider)}</span>` : ''}`;
|
||
div.addEventListener('click', () => {
|
||
UI.setModelValue(m.id, (m.name || m.id) + (m.provider ? ` (${m.provider})` : ''));
|
||
UI._closeModelDropdown();
|
||
});
|
||
return div;
|
||
},
|
||
|
||
_closeModelDropdown() {
|
||
document.getElementById('modelDropdownMenu')?.classList.remove('open');
|
||
},
|
||
|
||
initModelDropdown() {
|
||
const btn = document.getElementById('modelDropdownBtn');
|
||
const menu = document.getElementById('modelDropdownMenu');
|
||
if (!btn || !menu) return;
|
||
|
||
btn.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
menu.classList.toggle('open');
|
||
});
|
||
document.addEventListener('click', (e) => {
|
||
if (!e.target.closest('#modelDropdown')) menu.classList.remove('open');
|
||
});
|
||
},
|
||
|
||
// ── Capability Badges ────────────────────
|
||
|
||
getSelectedModelCaps() {
|
||
const modelId = UI.getModelValue();
|
||
if (!modelId) return {};
|
||
const model = App.findModel(modelId);
|
||
// Model in list has resolved caps from backend (catalog → heuristic)
|
||
return model?.capabilities || {};
|
||
},
|
||
|
||
updateCapabilityBadges() {
|
||
const el = document.getElementById('modelCaps');
|
||
if (!el) return;
|
||
|
||
const caps = this.getSelectedModelCaps();
|
||
if (!caps || Object.keys(caps).length === 0) {
|
||
el.innerHTML = '';
|
||
return;
|
||
}
|
||
|
||
el.innerHTML = renderCapBadges(caps);
|
||
},
|
||
|
||
// ── User / Connection ────────────────────
|
||
|
||
updateUser() {
|
||
const name = API.user?.display_name || API.user?.username || 'User';
|
||
const letter = (name[0] || '?').toUpperCase();
|
||
const avatarEl = document.getElementById('userAvatar');
|
||
const letterEl = document.getElementById('avatarLetter');
|
||
if (!avatarEl || !letterEl) return; // not all surfaces have user menu DOM
|
||
// Show avatar image or initial letter
|
||
let existingImg = avatarEl.querySelector('.user-avatar-img');
|
||
if (API.user?.avatar) {
|
||
letterEl.style.display = 'none';
|
||
if (existingImg) {
|
||
existingImg.src = API.user.avatar;
|
||
} else {
|
||
const img = document.createElement('img');
|
||
img.src = API.user.avatar;
|
||
img.alt = '';
|
||
img.className = 'user-avatar-img';
|
||
img.onerror = function() {
|
||
this.remove();
|
||
letterEl.style.display = '';
|
||
letterEl.textContent = letter;
|
||
};
|
||
avatarEl.insertBefore(img, letterEl);
|
||
}
|
||
} else {
|
||
if (existingImg) existingImg.remove();
|
||
letterEl.style.display = '';
|
||
letterEl.textContent = letter;
|
||
}
|
||
const nameEl = document.getElementById('userName');
|
||
if (nameEl) nameEl.textContent = name;
|
||
},
|
||
|
||
showAdminButton(show) {
|
||
const adminEl = document.getElementById('menuAdmin');
|
||
if (adminEl) adminEl.style.display = show ? '' : 'none';
|
||
var dbg = document.getElementById('menuDebug');
|
||
if (dbg) dbg.style.display = show ? '' : 'none';
|
||
},
|
||
|
||
// ── Generating State ─────────────────────
|
||
|
||
setGenerating(on) {
|
||
document.getElementById('stopBtn').classList.toggle('visible', on);
|
||
document.getElementById('sendBtn').disabled = on;
|
||
|
||
// Swap favicon to animated version during generation
|
||
const faviconLink = document.querySelector('link[rel="icon"][type="image/svg+xml"]');
|
||
if (faviconLink) {
|
||
if (on) {
|
||
// Pulsing favicon: dots fade in/out rapidly
|
||
faviconLink._origHref = faviconLink._origHref || faviconLink.href;
|
||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||
<rect x="4" y="4" width="56" height="56" rx="10" fill="%23252220" stroke="%234a4540" stroke-width="1.5"/>
|
||
<circle cx="22" cy="23" r="8" fill="%23111"/><circle cx="42" cy="23" r="8" fill="%23111"/>
|
||
<circle cx="42" cy="43" r="8" fill="%23111"/><circle cx="22" cy="43" r="8" fill="%23111"/>
|
||
<circle cx="22" cy="23" r="5.5" fill="%232D7DD2"><animate attributeName="opacity" values="1;0.2;1" dur="1.2s" repeatCount="indefinite" begin="0s"/></circle>
|
||
<circle cx="42" cy="23" r="5.5" fill="%23E8852E"><animate attributeName="opacity" values="1;0.2;1" dur="1.2s" repeatCount="indefinite" begin="0.3s"/></circle>
|
||
<circle cx="42" cy="43" r="5.5" fill="%239B59B6"><animate attributeName="opacity" values="1;0.2;1" dur="1.2s" repeatCount="indefinite" begin="0.6s"/></circle>
|
||
<circle cx="22" cy="43" r="5.5" fill="%232EAA4E"><animate attributeName="opacity" values="1;0.2;1" dur="1.2s" repeatCount="indefinite" begin="0.9s"/></circle>
|
||
</svg>`;
|
||
faviconLink.href = 'data:image/svg+xml,' + svg;
|
||
} else if (faviconLink._origHref) {
|
||
faviconLink.href = faviconLink._origHref;
|
||
}
|
||
}
|
||
|
||
if (on) {
|
||
const container = document.getElementById('chatMessages');
|
||
const currentModel = App.findModel(App.settings.model);
|
||
const typingAvatar = currentModel?.personaAvatar || null;
|
||
const typing = document.createElement('div');
|
||
typing.id = 'typingIndicator';
|
||
typing.className = 'message assistant';
|
||
typing.innerHTML = `
|
||
<div class="msg-inner">
|
||
<div class="msg-avatar">${avatarHTML('assistant', typingAvatar)}</div>
|
||
<div class="msg-body"><div class="typing-dots"><span></span><span></span><span></span></div></div>
|
||
</div>`;
|
||
container.appendChild(typing);
|
||
this._scrollToBottom(true);
|
||
} else {
|
||
document.getElementById('typingIndicator')?.remove();
|
||
}
|
||
},
|
||
|
||
showRegenerate(show) {
|
||
// Bottom-bar regenerate button removed in v0.7.1.
|
||
// Regen is now per-message via inline buttons.
|
||
},
|
||
|
||
// ── Toast ────────────────────────────────
|
||
|
||
toast(message, type = 'success') {
|
||
const container = document.getElementById('toastContainer');
|
||
const el = document.createElement('div');
|
||
el.className = `toast ${type}`;
|
||
el.innerHTML = `<span>${esc(message)}</span><button onclick="this.parentElement.remove()">✕</button>`;
|
||
container.appendChild(el);
|
||
setTimeout(() => el.remove(), 5000);
|
||
},
|
||
|
||
// ── Settings Modal ───────────────────────
|
||
|
||
openSettings(section) {
|
||
const base = window.__BASE__ || '';
|
||
window.location.href = base + '/settings/' + (section || 'general');
|
||
},
|
||
closeSettings() {
|
||
const base = window.__BASE__ || '';
|
||
const returnURL = sessionStorage.getItem('sb_settings_return');
|
||
sessionStorage.removeItem('sb_settings_return');
|
||
window.location.href = returnURL || (base + '/');
|
||
},
|
||
|
||
switchSettingsTab(tab) {
|
||
document.querySelectorAll('.settings-tab').forEach(t => t.classList.toggle('active', t.dataset.stab === tab));
|
||
document.querySelectorAll('.settings-tab-content').forEach(c => c.style.display = 'none');
|
||
const panel = document.getElementById(`settings${tab.charAt(0).toUpperCase() + tab.slice(1)}Tab`);
|
||
if (panel) panel.style.display = '';
|
||
|
||
if (tab === 'providers') {
|
||
UI.loadProviderList();
|
||
UI.checkUserProvidersAllowed();
|
||
}
|
||
if (tab === 'models') UI.loadUserModels();
|
||
if (tab === 'personas') { UI.loadUserPersonas(); UI.checkUserPersonasAllowed(); }
|
||
if (tab === 'usage') UI.loadMyUsage();
|
||
if (tab === 'roles') UI.loadUserRoles();
|
||
if (tab === 'knowledgeBases') {
|
||
if (typeof KnowledgeUI === 'undefined') {
|
||
console.error('[Settings] KnowledgeUI not loaded — check js/knowledge-ui.js');
|
||
const c = document.getElementById('kbManagePanel');
|
||
if (c) c.innerHTML = '<div style="padding:20px;color:var(--text-3);text-align:center">Knowledge UI failed to load. Check browser console.</div>';
|
||
} else {
|
||
KnowledgeUI.openManagePanel();
|
||
}
|
||
}
|
||
if (tab === 'appearance') UI.loadAppearanceSettings();
|
||
if (tab === 'memory') {
|
||
if (typeof MemoryUI !== 'undefined') {
|
||
MemoryUI.openSettingsPanel();
|
||
} else {
|
||
const c = document.getElementById('settingsMemoryContent');
|
||
if (c) c.innerHTML = '<div style="padding:20px;color:var(--text-3);text-align:center">Memory UI failed to load.</div>';
|
||
}
|
||
}
|
||
if (tab === 'notifPrefs') {
|
||
if (typeof NotifPrefs !== 'undefined') {
|
||
NotifPrefs.load();
|
||
}
|
||
}
|
||
},
|
||
|
||
// ── Export ────────────────────────────────
|
||
|
||
exportChat(format) {
|
||
const chat = App.getActiveChat();
|
||
if (!chat) return UI.toast('No chat to export', 'warning');
|
||
|
||
let content, ext, mime;
|
||
const safeName = chat.title.replace(/[^a-z0-9]/gi, '_');
|
||
|
||
if (format === 'json') { content = JSON.stringify(chat, null, 2); ext = 'json'; mime = 'application/json'; }
|
||
else if (format === 'md') {
|
||
content = `# ${chat.title}\n\n` + chat.messages.filter(m => m.role !== 'system')
|
||
.map(m => `## ${m.role === 'user' ? 'You' : (m.modelName || m.model || 'Assistant')}\n\n${m.content}`).join('\n\n---\n\n');
|
||
ext = 'md'; mime = 'text/markdown';
|
||
} else {
|
||
content = chat.messages.filter(m => m.role !== 'system').map(m => `[${m.role === 'user' ? 'You' : (m.modelName || m.model || 'Assistant')}]\n${m.content}`).join('\n\n');
|
||
ext = 'txt'; mime = 'text/plain';
|
||
}
|
||
|
||
const blob = new Blob([content], { type: mime });
|
||
const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
|
||
a.download = `${safeName}.${ext}`; a.click(); URL.revokeObjectURL(a.href);
|
||
},
|
||
|
||
// ── Message Actions ──────────────────────
|
||
|
||
copyMessage(index) {
|
||
const chat = App.getActiveChat();
|
||
if (chat?.messages[index]) {
|
||
navigator.clipboard.writeText(chat.messages[index].content)
|
||
.then(() => UI.toast('Copied', 'success'))
|
||
.catch(() => UI.toast('Copy failed', 'error'));
|
||
}
|
||
},
|
||
|
||
// ── Scroll ───────────────────────────────
|
||
|
||
_isNearBottom() {
|
||
const el = document.getElementById('chatMessages');
|
||
return el.scrollHeight - el.scrollTop - el.clientHeight < 80;
|
||
},
|
||
|
||
_scrollToBottom(force) {
|
||
if (force || this._isNearBottom()) {
|
||
const el = document.getElementById('chatMessages');
|
||
el.scrollTop = el.scrollHeight;
|
||
}
|
||
},
|
||
|
||
// ── Appearance (scale + font) ────────────
|
||
// Shared across ALL surfaces. Previously in ui-settings.js
|
||
// which only loaded on chat/settings — editor surface was skipped.
|
||
|
||
applyAppearance(scale, msgFont) {
|
||
// Scale #surfaceInner — the generic wrapper injected by base.html
|
||
// around every surface template. No surface-specific selectors.
|
||
// #surface stays as flex child, banners are siblings — untouched.
|
||
const inner = document.getElementById('surfaceInner');
|
||
if (inner) {
|
||
if (scale === 100) {
|
||
inner.style.transform = '';
|
||
inner.style.width = '';
|
||
inner.style.height = '';
|
||
} else {
|
||
const z = scale / 100;
|
||
inner.style.transform = `scale(${z})`;
|
||
inner.style.width = (100 / z) + '%';
|
||
inner.style.height = (100 / z) + '%';
|
||
}
|
||
}
|
||
document.documentElement.style.setProperty('--msg-font', msgFont + 'px');
|
||
localStorage.setItem('cs-appearance', JSON.stringify({ scale, msgFont }));
|
||
requestAnimationFrame(() => {
|
||
document.querySelectorAll('.modal-overlay.active .modal-tabs').forEach(t => {
|
||
if (typeof checkTabsOverflow === 'function') checkTabsOverflow(t);
|
||
});
|
||
});
|
||
},
|
||
|
||
restoreAppearance() {
|
||
// Clear stale zoom/transform from any previous scaling approaches
|
||
document.body.style.zoom = '';
|
||
document.documentElement.style.zoom = '';
|
||
try {
|
||
const prefs = JSON.parse(localStorage.getItem('cs-appearance') || '{}');
|
||
const scale = prefs.scale || 100;
|
||
const msgFont = prefs.msgFont || 14;
|
||
if (scale !== 100 || msgFont !== 14) {
|
||
UI.applyAppearance(scale, msgFont);
|
||
} else {
|
||
document.documentElement.style.setProperty('--msg-font', msgFont + 'px');
|
||
}
|
||
} catch (_) { /* corrupt localStorage — ignore */ }
|
||
}
|
||
};
|
||
|
||
// ── Body-level delegation for data-action buttons ──
|
||
// Wired once, handles all data-action clicks across sidebar, messages, etc.
|
||
_uiDispatch(document.body);
|
||
|
||
// ── Exports ─────────────────────────────────
|
||
sb.ns('UI', UI);
|
||
sb.register('renderPersonaForm', renderPersonaForm);
|
||
sb.register('_uiDispatch', _uiDispatch);
|
||
sb.register('_toggleArchivedProjects', _toggleArchivedProjects);
|
||
sb.register('_submitEditFromDOM', _submitEditFromDOM);
|
||
sb.register('toggleSummarizedHistory', toggleSummarizedHistory);
|
||
})();
|