+
{{/* Populated by UI.renderChatList() */}}
{{/* Populated by UI.renderMessages() */}}
diff --git a/server/pages/templates/surfaces/settings.html b/server/pages/templates/surfaces/settings.html
index 1b5bd88..e2b3592 100644
--- a/server/pages/templates/surfaces/settings.html
+++ b/server/pages/templates/surfaces/settings.html
@@ -140,6 +140,10 @@
+ ${pType === 'persona' ? '⚡' : '👤'} ${esc(item.name)}
+
`
+ ).join('');
+ } catch (_) {
+ results.innerHTML = '
+ html += `
${isOpen
? (items.length > 0
@@ -503,6 +508,17 @@ const UI = {
else groups.older.push(c);
});
+ // When folders exist, wrap unfiled chats in a drop zone
+ if (folders.length > 0) {
+ html += `
`;
+ if (unfiled.length === 0) {
+ html += '
Drop here to unfile
';
+ }
+ }
+
const renderTimeGroup = (label, items) => {
if (!items.length) return;
html += `
${label}
`;
@@ -514,6 +530,10 @@ const UI = {
renderTimeGroup('Previous 7 days', groups.week);
renderTimeGroup('Older', groups.older);
+ if (folders.length > 0) {
+ html += '
'; // close .sb-unfiled-zone
+ }
+
el.innerHTML = html;
// Always keep projects section in sync
@@ -528,7 +548,7 @@ const UI = {
_chatItemHTML(c, indented = false) {
const time = _relativeTime(c.updatedAt);
- const active = c.id === App.currentChatId ? ' active' : '';
+ const active = c.id === App.activeId ? ' active' : '';
const indent = indented ? ' indented' : '';
const typeIcon = c.type === 'group'
? '
👥 '
@@ -617,19 +637,40 @@ const UI = {
// 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' }) : '';
- let assistantLabel = 'Assistant';
- if (!isUser) {
- // Use stored modelName, or resolve from channel roster, or model list, or fall back
- if (msg.modelName) {
- assistantLabel = msg.modelName;
+
+ // 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) {
- assistantLabel = ChannelModels.resolveDisplayName(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);
- assistantLabel = m?.name || 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
@@ -645,16 +686,16 @@ const UI = {
// Action buttons
const msgId = msg.id ? esc(msg.id) : '';
- const editBtn = isUser && msgId ? `
` : '';
+ const editBtn = isSelf && msgId ? `
` : '';
const regenBtn = !isUser && msgId ? `
` : '';
return `
-
+
-
${avatarHTML(msg.role, isUser ? API.user?.avatar : assistantAvatarURI(msg))}
+
${avatarHTML(isOtherUser ? 'other-user' : msg.role, senderAvatarURI)}
-
${isUser ? 'You' : esc(assistantLabel)}
+
${esc(senderLabel)}
${branchNav}
${time ? `
${time}` : ''}
@@ -680,6 +721,45 @@ const UI = {
Chat Switchboard
Select a model and start chatting
`;
+ 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';
+ return;
+ }
+
+ let html = '';
+ if (ac.type === 'dm') {
+ const ch = (App.channels || []).find(c => c.id === ac.id);
+ const name = ch?.name || 'someone';
+ html = `
DM` +
+ `
with ${esc(name)}` +
+ `
@mention a persona to bring in AI` +
+ `
` +
+ `
`;
+ } else if (ac.type === 'group') {
+ html = `
Group` +
+ `
No @mention = leader responds · @mention to route · @all for everyone` +
+ `
` +
+ `
`;
+ } 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 = `
`;
+ if (topic) html += `
${esc(topic)}`;
+ html += `
`;
+ html += `
`;
+ }
+ el.innerHTML = html;
+ el.style.display = '';
},
showEditInline(messageId, currentContent) {
@@ -1278,7 +1358,7 @@ const UI = {
// ── Export ────────────────────────────────
exportChat(format) {
- const chat = App.chats.find(c => c.id === App.currentChatId);
+ const chat = App.getActiveChat();
if (!chat) return UI.toast('No chat to export', 'warning');
let content, ext, mime;
@@ -1302,7 +1382,7 @@ const UI = {
// ── Message Actions ──────────────────────
copyMessage(index) {
- const chat = App.chats.find(c => c.id === App.currentChatId);
+ const chat = App.getActiveChat();
if (chat?.messages[index]) {
navigator.clipboard.writeText(chat.messages[index].content)
.then(() => UI.toast('Copied', 'success'))
diff --git a/src/js/ui-format.js b/src/js/ui-format.js
index 517b3d0..89787f0 100644
--- a/src/js/ui-format.js
+++ b/src/js/ui-format.js
@@ -58,35 +58,44 @@ function formatMessage(content) {
function _highlightMentions(html) {
if (typeof ChannelModels === 'undefined') return html;
const roster = ChannelModels.getRoster();
- if (!roster || roster.length < 2) return html;
- // Build patterns from handles (primary) and display names (fallback)
- const patterns = [];
+ // Build patterns from roster handles and display names (AI mentions)
+ const aiPatterns = [];
const seen = new Set();
- for (const m of roster) {
- // Handle pattern (preferred)
- if (m.handle) {
- const escaped = m.handle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
- if (!seen.has(escaped)) {
- patterns.push(new RegExp('(@' + escaped + ')(?=[\\s.,!?;:)\\]}<]|$)', 'gi'));
- seen.add(escaped);
+ if (roster && roster.length >= 2) {
+ for (const m of roster) {
+ if (m.handle) {
+ const escaped = m.handle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ if (!seen.has(escaped)) {
+ aiPatterns.push(new RegExp('(@' + escaped + ')(?=[\\s.,!?;:)\\]}<]|$)', 'gi'));
+ seen.add(escaped);
+ }
}
- }
- // Display name pattern (hyphenated form)
- if (m.display_name) {
- const hyphenated = m.display_name.replace(/\s+/g, '-');
- const escaped = hyphenated.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
- if (!seen.has(escaped.toLowerCase())) {
- const flexible = escaped.replace(/[-]+/g, '[\\s-]+');
- patterns.push(new RegExp('(@' + flexible + ')(?=[\\s.,!?;:)\\]}<]|$)', 'gi'));
- seen.add(escaped.toLowerCase());
+ if (m.display_name) {
+ const hyphenated = m.display_name.replace(/\s+/g, '-');
+ const escaped = hyphenated.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ if (!seen.has(escaped.toLowerCase())) {
+ const flexible = escaped.replace(/[-]+/g, '[\\s-]+');
+ aiPatterns.push(new RegExp('(@' + flexible + ')(?=[\\s.,!?;:)\\]}<]|$)', 'gi'));
+ seen.add(escaped.toLowerCase());
+ }
}
}
}
- // @all
- patterns.push(new RegExp('(@all)(?=[\\s.,!?;:)\\]}<]|$)', 'gi'));
+ // @all is special
+ aiPatterns.push(new RegExp('(@all)(?=[\\s.,!?;:)\\]}<]|$)', 'gi'));
+
+ // v0.23.2: Build user mention patterns
+ const userPatterns = [];
+ for (const u of (App.users || [])) {
+ const escaped = u.username.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ if (!seen.has(escaped.toLowerCase())) {
+ userPatterns.push(new RegExp('(@' + escaped + ')(?=[\\s.,!?;:)\\]}<]|$)', 'gi'));
+ seen.add(escaped.toLowerCase());
+ }
+ }
// Don't highlight inside
, , tags
const parts = html.split(/(<[^>]+>)/);
@@ -101,9 +110,14 @@ function _highlightMentions(html) {
}
if (inCode) continue;
let text = part;
- for (const re of patterns) {
+ // AI mentions first (persona/model)
+ for (const re of aiPatterns) {
text = text.replace(re, '$1');
}
+ // User mentions (different color)
+ for (const re of userPatterns) {
+ text = text.replace(re, '$1');
+ }
parts[i] = text;
}
return parts.join('');
diff --git a/src/js/ui-settings.js b/src/js/ui-settings.js
index 933f47e..76053e4 100644
--- a/src/js/ui-settings.js
+++ b/src/js/ui-settings.js
@@ -106,6 +106,11 @@ Object.assign(UI, {
const prefs = JSON.parse(localStorage.getItem('cs-appearance') || '{}');
if (scaleEl) prefs.scale = parseInt(scaleEl.value);
if (msgFontEl) prefs.msgFont = parseInt(msgFontEl.value);
+ // v0.23.2: Theme saved via Theme API (localStorage key: switchboard_theme)
+ const activeThemeBtn = document.querySelector('#themeToggle .theme-btn.active');
+ if (activeThemeBtn && typeof Theme !== 'undefined') {
+ Theme.set(activeThemeBtn.dataset.theme);
+ }
localStorage.setItem('cs-appearance', JSON.stringify(prefs));
UI.toast('Appearance saved', 'success');
},
@@ -141,7 +146,8 @@ Object.assign(UI, {
const prefs = JSON.parse(localStorage.getItem('cs-appearance') || '{}');
const scale = prefs.scale || 100;
const msgFont = prefs.msgFont || 14;
- const theme = prefs.theme || 'system';
+ // v0.23.2: Read theme from Theme API
+ const theme = typeof Theme !== 'undefined' ? Theme.get() : 'system';
const keymap = prefs.editorKeymap || 'standard';
const scaleEl = document.getElementById('settingsScale');
@@ -149,9 +155,14 @@ Object.assign(UI, {
if (scaleEl) { scaleEl.value = scale; document.getElementById('scaleValue').textContent = scale + '%'; }
if (msgFontEl) { msgFontEl.value = msgFont; document.getElementById('msgFontValue').textContent = msgFont + 'px'; }
- // Highlight active theme button
+ // Highlight active theme button and wire click
document.querySelectorAll('#themeToggle .theme-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.theme === theme);
+ btn.onclick = () => {
+ document.querySelectorAll('#themeToggle .theme-btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ if (typeof Theme !== 'undefined') Theme.set(btn.dataset.theme);
+ };
});
// Highlight active keymap button