Changeset 0.37.14 (#226)
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
@@ -27,7 +27,7 @@ export function ChatHistory({ channelId, onSelect, onNew }) {
|
||||
if (!window.sw?.api?.channels?.list) return;
|
||||
window.sw.api.channels.list({ page: 1, per_page: 20, channel_type: 'direct' })
|
||||
.then(resp => {
|
||||
setChannels(resp?.data || resp || []);
|
||||
setChannels(resp || []);
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
@@ -25,8 +25,8 @@ import { ChatHistory } from './chat-history.js';
|
||||
import { renderMarkdown } from './markdown.js';
|
||||
import { CodeBlock, extractCodeBlocks } from './code-block.js';
|
||||
import { MessageActions } from './message-actions.js';
|
||||
import { MarkdownToolbar, handleFormatShortcut } from './markdown-toolbar.js';
|
||||
import { EmojiPicker } from './emoji-picker.js';
|
||||
import { TypingIndicator } from './typing-indicator.js';
|
||||
|
||||
const { useRef, useEffect, useCallback } = window.hooks;
|
||||
const html = window.html;
|
||||
@@ -59,9 +59,11 @@ export function ChatPane(props) {
|
||||
initialChannelId,
|
||||
getContext,
|
||||
onChannelChange,
|
||||
externalModel: props.modelId,
|
||||
});
|
||||
|
||||
// Expose imperative handle via handleRef prop
|
||||
// Intentional: no deps — handle methods must reference latest chat closures
|
||||
useEffect(() => {
|
||||
if (handleRef) {
|
||||
handleRef.current = {
|
||||
@@ -73,6 +75,8 @@ export function ChatPane(props) {
|
||||
clearInput() { inputHandle.current?.clear(); },
|
||||
clear() { chat.newChat(); },
|
||||
stop() { chat.stop(); },
|
||||
setModel(id) { chat.setModel(id); },
|
||||
getModel() { return chat.model; },
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -103,18 +107,22 @@ export function ChatPane(props) {
|
||||
<${MessageList}
|
||||
messages=${chat.messages}
|
||||
streamContent=${chat.streamContent}
|
||||
streamThinking=${chat.streamThinking}
|
||||
streaming=${chat.streaming}
|
||||
hasMore=${chat.hasMore}
|
||||
loadingMore=${chat.loadingMore}
|
||||
onLoadMore=${chat.loadMore}
|
||||
onRegenerate=${chat.regenerate}
|
||||
onDelete=${chat.deleteMessage} />
|
||||
<${TypingIndicator} users=${chat.typingUsers} />
|
||||
<${MessageInput}
|
||||
handleRef=${inputHandle}
|
||||
onSend=${chat.sendMessage}
|
||||
onStop=${chat.stop}
|
||||
disabled=${chat.sending}
|
||||
streaming=${chat.streaming} />
|
||||
streaming=${chat.streaming}
|
||||
channelId=${chat.channelId}
|
||||
onTyping=${chat.emitTyping} />
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -129,5 +137,5 @@ export { ChatHistory } from './chat-history.js';
|
||||
export { renderMarkdown } from './markdown.js';
|
||||
export { CodeBlock, extractCodeBlocks } from './code-block.js';
|
||||
export { MessageActions } from './message-actions.js';
|
||||
export { MarkdownToolbar, handleFormatShortcut } from './markdown-toolbar.js';
|
||||
export { EmojiPicker } from './emoji-picker.js';
|
||||
export { TypingIndicator } from './typing-indicator.js';
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
// ==========================================
|
||||
// ChatPane Kit — MarkdownToolbar Component
|
||||
// ==========================================
|
||||
// Formatting toolbar for the message input.
|
||||
// Wraps selection with markdown syntax. Independently importable.
|
||||
//
|
||||
// Usage:
|
||||
// html`<${MarkdownToolbar} textareaRef=${ref} onInput=${fn} />`
|
||||
|
||||
const html = window.html;
|
||||
|
||||
/**
|
||||
* Insert markdown wrapper around the textarea's selection.
|
||||
*
|
||||
* @param {HTMLTextAreaElement} ta
|
||||
* @param {string} before — prefix (e.g. '**')
|
||||
* @param {string} after — suffix (e.g. '**')
|
||||
* @param {string} placeholder — text if nothing selected
|
||||
* @param {Function} onInput — trigger resize after edit
|
||||
*/
|
||||
function _wrap(ta, before, after, placeholder, onInput) {
|
||||
if (!ta) return;
|
||||
ta.focus();
|
||||
const start = ta.selectionStart;
|
||||
const end = ta.selectionEnd;
|
||||
const selected = ta.value.slice(start, end) || placeholder;
|
||||
const replacement = before + selected + after;
|
||||
|
||||
// Use execCommand for undo support, fallback to direct edit
|
||||
const hasExecCommand = document.queryCommandSupported?.('insertText');
|
||||
if (hasExecCommand) {
|
||||
document.execCommand('insertText', false, replacement);
|
||||
} else {
|
||||
ta.value = ta.value.slice(0, start) + replacement + ta.value.slice(end);
|
||||
}
|
||||
|
||||
// Select the inserted text (without wrappers) for quick overtype
|
||||
const selStart = start + before.length;
|
||||
const selEnd = selStart + selected.length;
|
||||
ta.setSelectionRange(selStart, selEnd);
|
||||
if (onInput) onInput();
|
||||
}
|
||||
|
||||
/**
|
||||
* Insert text at cursor (no wrapping).
|
||||
*/
|
||||
function _insert(ta, text, onInput) {
|
||||
if (!ta) return;
|
||||
ta.focus();
|
||||
const start = ta.selectionStart;
|
||||
const hasExecCommand = document.queryCommandSupported?.('insertText');
|
||||
if (hasExecCommand) {
|
||||
document.execCommand('insertText', false, text);
|
||||
} else {
|
||||
ta.value = ta.value.slice(0, start) + text + ta.value.slice(ta.selectionEnd);
|
||||
}
|
||||
const pos = start + text.length;
|
||||
ta.setSelectionRange(pos, pos);
|
||||
if (onInput) onInput();
|
||||
}
|
||||
|
||||
const ACTIONS = [
|
||||
{ key: 'bold', label: 'B', title: 'Bold (Ctrl+B)', fn: (ta, cb) => _wrap(ta, '**', '**', 'bold text', cb) },
|
||||
{ key: 'italic', label: 'I', title: 'Italic (Ctrl+I)', fn: (ta, cb) => _wrap(ta, '_', '_', 'italic text', cb), style: 'font-style:italic' },
|
||||
{ key: 'code', label: '<>', title: 'Inline code', fn: (ta, cb) => _wrap(ta, '`', '`', 'code', cb), style: 'font-family:var(--mono, monospace);font-size:11px' },
|
||||
{ key: 'codeblk', label: '```',title: 'Code block', fn: (ta, cb) => _wrap(ta, '```\n', '\n```', 'code', cb), style: 'font-family:var(--mono, monospace);font-size:10px' },
|
||||
{ key: 'link', label: '🔗', title: 'Link', fn: (ta, cb) => _wrap(ta, '[', '](url)', 'link text', cb) },
|
||||
{ key: 'list', label: '•', title: 'Bullet list', fn: (ta, cb) => _insert(ta, '\n- ', cb) },
|
||||
{ key: 'olist', label: '1.', title: 'Numbered list', fn: (ta, cb) => _insert(ta, '\n1. ', cb) },
|
||||
{ key: 'heading', label: 'H', title: 'Heading', fn: (ta, cb) => _insert(ta, '\n## ', cb), style: 'font-weight:700' },
|
||||
{ key: 'quote', label: '>', title: 'Blockquote', fn: (ta, cb) => _insert(ta, '\n> ', cb) },
|
||||
];
|
||||
|
||||
/**
|
||||
* @param {{ textareaRef: { current: HTMLTextAreaElement }, onInput?: () => void }} props
|
||||
*/
|
||||
export function MarkdownToolbar({ textareaRef, onInput }) {
|
||||
return html`
|
||||
<div class="sw-md-toolbar" role="toolbar" aria-label="Formatting">
|
||||
${ACTIONS.map(a => html`
|
||||
<button key=${a.key}
|
||||
class="sw-md-toolbar__btn"
|
||||
title=${a.title}
|
||||
style=${a.style || ''}
|
||||
onClick=${() => a.fn(textareaRef.current, onInput)}
|
||||
tabindex="-1"
|
||||
type="button">
|
||||
${a.label}
|
||||
</button>`)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle keyboard shortcuts for formatting.
|
||||
* Call from textarea onKeyDown handler.
|
||||
*
|
||||
* @param {KeyboardEvent} e
|
||||
* @param {HTMLTextAreaElement} ta
|
||||
* @param {Function} onInput
|
||||
* @returns {boolean} true if handled
|
||||
*/
|
||||
export function handleFormatShortcut(e, ta, onInput) {
|
||||
if (!(e.ctrlKey || e.metaKey)) return false;
|
||||
switch (e.key) {
|
||||
case 'b': e.preventDefault(); _wrap(ta, '**', '**', 'bold', onInput); return true;
|
||||
case 'i': e.preventDefault(); _wrap(ta, '_', '_', 'italic', onInput); return true;
|
||||
case 'e': e.preventDefault(); _wrap(ta, '`', '`', 'code', onInput); return true;
|
||||
default: return false;
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,10 @@
|
||||
// Wraps window.marked + window.DOMPurify with fallback.
|
||||
// Independently importable utility.
|
||||
//
|
||||
// Note: This module uses innerHTML via DOMPurify (sanitized) and imperative
|
||||
// DOM patterns intentionally for rendering performance. This is a documented
|
||||
// exception from the "no raw DOM" convention (Critical Review P3-4).
|
||||
//
|
||||
// v0.37.10: Task list rendering, code block language extraction.
|
||||
//
|
||||
// Usage:
|
||||
@@ -33,21 +37,21 @@ function _ensureConfigured() {
|
||||
gfm: true,
|
||||
});
|
||||
|
||||
// Custom renderer for task list items
|
||||
const renderer = new marked.Renderer();
|
||||
const origListItem = renderer.listitem?.bind(renderer);
|
||||
renderer.listitem = function(text, task, checked) {
|
||||
if (task) {
|
||||
const checkbox = checked
|
||||
? '<input type="checkbox" checked disabled class="sw-task-checkbox" />'
|
||||
: '<input type="checkbox" disabled class="sw-task-checkbox" />';
|
||||
return '<li class="sw-task-item">' + checkbox + ' ' + text + '</li>\n';
|
||||
}
|
||||
if (origListItem) return origListItem(text, task, checked);
|
||||
return '<li>' + text + '</li>\n';
|
||||
};
|
||||
|
||||
marked.use({ renderer });
|
||||
// Custom renderer for task list items (marked v16 token-based API)
|
||||
marked.use({
|
||||
renderer: {
|
||||
listitem(token) {
|
||||
const body = this.parser.parse(token.tokens);
|
||||
if (token.task) {
|
||||
const checkbox = token.checked
|
||||
? '<input type="checkbox" checked disabled class="sw-task-checkbox" />'
|
||||
: '<input type="checkbox" disabled class="sw-task-checkbox" />';
|
||||
return '<li class="sw-task-item">' + checkbox + ' ' + body + '</li>\n';
|
||||
}
|
||||
return '<li>' + body + '</li>\n';
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -69,6 +73,17 @@ export function renderMarkdown(text) {
|
||||
result = _escapeHtml(text);
|
||||
}
|
||||
|
||||
// Highlight @mentions as styled spans (runs after sanitization — safe)
|
||||
result = result.replace(/(^|[\s>])@([\w-]+)/g, '$1<span class="sw-mention">@$2</span>');
|
||||
|
||||
// Run pipe render filters (extensions can transform final HTML)
|
||||
if (window.sw?.pipe?._runRender) {
|
||||
const pipeCtx = window.sw.pipe._runRender({ html: result, raw: text });
|
||||
if (pipeCtx !== null && pipeCtx !== undefined) {
|
||||
result = pipeCtx.html;
|
||||
}
|
||||
}
|
||||
|
||||
_lastInput = text;
|
||||
_lastOutput = result;
|
||||
return result;
|
||||
|
||||
@@ -38,6 +38,7 @@ function _relTime(isoDate) {
|
||||
* @param {{
|
||||
* role: string,
|
||||
* content: string,
|
||||
* thinking?: string,
|
||||
* id?: string,
|
||||
* created_at?: string,
|
||||
* streaming?: boolean,
|
||||
@@ -45,8 +46,11 @@ function _relTime(isoDate) {
|
||||
* onDelete?: () => void,
|
||||
* }} props
|
||||
*/
|
||||
export function MessageBubble({ role, content, id, created_at, streaming, onRegenerate, onDelete }) {
|
||||
const cls = 'sw-chat-msg sw-chat-msg--' + role
|
||||
export function MessageBubble({ role, content, thinking, id, created_at, streaming, onRegenerate, onDelete, isMine, senderName }) {
|
||||
// isMine: true = right-aligned (current user), false = left-aligned (other user/assistant)
|
||||
const alignment = role === 'assistant' ? 'assistant'
|
||||
: (isMine === false ? 'other' : 'user');
|
||||
const cls = 'sw-chat-msg sw-chat-msg--' + alignment
|
||||
+ (streaming ? ' sw-chat-msg--streaming' : '');
|
||||
|
||||
// Parse markdown and extract code blocks for enhanced rendering
|
||||
@@ -55,10 +59,26 @@ export function MessageBubble({ role, content, id, created_at, streaming, onRege
|
||||
return extractCodeBlocks(rendered);
|
||||
}, [content]);
|
||||
|
||||
const thinkingHtml = useMemo(() => {
|
||||
if (!thinking) return null;
|
||||
return renderMarkdown(thinking);
|
||||
}, [thinking]);
|
||||
|
||||
const timeStr = _relTime(created_at);
|
||||
|
||||
// While streaming, show thinking open if content hasn't started yet
|
||||
const thinkingOpen = streaming && thinking && !content;
|
||||
|
||||
return html`
|
||||
<div class=${cls}>
|
||||
${senderName && alignment === 'other' && html`
|
||||
<div class="sw-chat-msg__sender">${senderName}</div>`}
|
||||
${thinkingHtml && html`
|
||||
<details class="sw-chat-msg__thinking" open=${thinkingOpen || undefined}>
|
||||
<summary class="sw-chat-msg__thinking-toggle">Thinking\u2026</summary>
|
||||
<div class="sw-chat-msg__thinking-content"
|
||||
dangerouslySetInnerHTML=${{ __html: thinkingHtml }} />
|
||||
</details>`}
|
||||
<div class="sw-chat-msg__content">
|
||||
${segments.map((seg, i) =>
|
||||
seg.type === 'code'
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
// ==========================================
|
||||
// ChatPane Kit — MessageInput Component
|
||||
// ==========================================
|
||||
// Auto-resize textarea with Enter-to-send, markdown toolbar,
|
||||
// CM6-powered chat input with markdown highlighting,
|
||||
// emoji picker, and stop button.
|
||||
// Independently importable.
|
||||
//
|
||||
// v0.37.10: Added MarkdownToolbar, EmojiPicker, stop overlay, aria.
|
||||
// v0.37.14: Replaced textarea + toolbar with CM.chatInput().
|
||||
//
|
||||
// Usage:
|
||||
// const inputHandle = useRef(null);
|
||||
// html`<${MessageInput} onSend=${fn} onStop=${fn} disabled=${false}
|
||||
// streaming=${false} handleRef=${inputHandle} />`
|
||||
|
||||
import { MarkdownToolbar, handleFormatShortcut } from './markdown-toolbar.js';
|
||||
import { EmojiPicker } from './emoji-picker.js';
|
||||
|
||||
const { useRef, useState, useCallback, useEffect } = window.hooks;
|
||||
@@ -40,6 +40,11 @@ const EMOJI_SVG = html`
|
||||
<line x1="15" y1="9" x2="15.01" y2="9"/>
|
||||
</svg>`;
|
||||
|
||||
// Convert display name to @mention handle (mirrors Go HandleFromName)
|
||||
function _toHandle(name) {
|
||||
return (name || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* onSend: (text: string) => void,
|
||||
@@ -47,12 +52,136 @@ const EMOJI_SVG = html`
|
||||
* disabled?: boolean,
|
||||
* streaming?: boolean,
|
||||
* handleRef?: { current: any },
|
||||
* channelId?: string,
|
||||
* }} props
|
||||
*/
|
||||
export function MessageInput({ onSend, onStop, disabled, streaming, handleRef }) {
|
||||
const taRef = useRef(null);
|
||||
export function MessageInput({ onSend, onStop, disabled, streaming, handleRef, channelId, onTyping }) {
|
||||
const containerRef = useRef(null);
|
||||
const editorRef = useRef(null);
|
||||
const taRef = useRef(null); // fallback textarea
|
||||
const [emojiOpen, setEmojiOpen] = useState(false);
|
||||
const onSendRef = useRef(onSend);
|
||||
onSendRef.current = onSend;
|
||||
const disabledRef = useRef(disabled);
|
||||
disabledRef.current = disabled;
|
||||
const participantsCache = useRef({ channelId: null, list: null });
|
||||
const onTypingRef = useRef(onTyping);
|
||||
onTypingRef.current = onTyping;
|
||||
const typingTimerRef = useRef(null);
|
||||
const isTypingRef = useRef(false);
|
||||
|
||||
// ── CM6 editor lifecycle ────────────────────
|
||||
useEffect(() => {
|
||||
if (!window.CM?.chatInput || !containerRef.current) return;
|
||||
|
||||
// Build @mention completer bound to current channelId
|
||||
const mentionCompleter = async (query) => {
|
||||
if (!channelId || !window.sw?.api?.channels?.participants) return [];
|
||||
|
||||
// Fetch and cache participants per channel
|
||||
if (participantsCache.current.channelId !== channelId) {
|
||||
try {
|
||||
const resp = await window.sw.api.channels.participants(channelId);
|
||||
participantsCache.current = {
|
||||
channelId,
|
||||
list: (resp || []).map(p => ({
|
||||
label: p.display_name || p.participant_id,
|
||||
handle: _toHandle(p.display_name || p.participant_id),
|
||||
type: p.participant_type || 'user',
|
||||
})),
|
||||
};
|
||||
} catch (e) {
|
||||
console.warn('[mention] Failed to fetch participants:', e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
const q = query.toLowerCase();
|
||||
const results = participantsCache.current.list.filter(p =>
|
||||
p.handle.startsWith(q) || p.label.toLowerCase().includes(q)
|
||||
);
|
||||
|
||||
// Add @all option
|
||||
if (!q || 'all'.startsWith(q)) {
|
||||
results.unshift({ label: 'All users', handle: 'all', type: 'all' });
|
||||
}
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
// Build extensions array with @mention support
|
||||
const extraExtensions = window.CM.mentionExtension
|
||||
? window.CM.mentionExtension({ completer: mentionCompleter })
|
||||
: [];
|
||||
|
||||
const editor = window.CM.chatInput(containerRef.current, {
|
||||
placeholder: 'Type a message\u2026',
|
||||
maxHeight: 160,
|
||||
extensions: extraExtensions,
|
||||
onSubmit: (text) => {
|
||||
const trimmed = text?.trim();
|
||||
if (trimmed && !disabledRef.current) {
|
||||
onSendRef.current(trimmed);
|
||||
editor.setValue('');
|
||||
// Stop typing on send
|
||||
if (isTypingRef.current) {
|
||||
isTypingRef.current = false;
|
||||
onTypingRef.current?.(false);
|
||||
}
|
||||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
|
||||
}
|
||||
},
|
||||
onChange: () => {
|
||||
// Emit typing start (debounced: stop after 3s of inactivity)
|
||||
if (!isTypingRef.current) {
|
||||
isTypingRef.current = true;
|
||||
onTypingRef.current?.(true);
|
||||
}
|
||||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
|
||||
typingTimerRef.current = setTimeout(() => {
|
||||
isTypingRef.current = false;
|
||||
onTypingRef.current?.(false);
|
||||
}, 3000);
|
||||
},
|
||||
});
|
||||
editorRef.current = editor;
|
||||
|
||||
return () => {
|
||||
editor.destroy();
|
||||
editorRef.current = null;
|
||||
if (typingTimerRef.current) clearTimeout(typingTimerRef.current);
|
||||
if (isTypingRef.current) {
|
||||
isTypingRef.current = false;
|
||||
onTypingRef.current?.(false);
|
||||
}
|
||||
};
|
||||
}, [channelId]);
|
||||
|
||||
// ── Imperative handle ───────────────────────
|
||||
useEffect(() => {
|
||||
if (!handleRef) return;
|
||||
handleRef.current = {
|
||||
getValue() {
|
||||
if (editorRef.current) return editorRef.current.getValue();
|
||||
return taRef.current?.value || '';
|
||||
},
|
||||
setValue(val) {
|
||||
if (editorRef.current) { editorRef.current.setValue(val || ''); return; }
|
||||
if (taRef.current) { taRef.current.value = val || ''; _autoResize(); }
|
||||
},
|
||||
focus() {
|
||||
if (editorRef.current) { editorRef.current.focus(); return; }
|
||||
taRef.current?.focus();
|
||||
},
|
||||
clear() {
|
||||
if (editorRef.current) { editorRef.current.setValue(''); return; }
|
||||
if (taRef.current) { taRef.current.value = ''; _autoResize(); }
|
||||
},
|
||||
};
|
||||
return () => { handleRef.current = null; };
|
||||
}, [handleRef]);
|
||||
|
||||
// ── Fallback textarea helpers ───────────────
|
||||
function _autoResize() {
|
||||
const ta = taRef.current;
|
||||
if (!ta) return;
|
||||
@@ -60,26 +189,9 @@ export function MessageInput({ onSend, onStop, disabled, streaming, handleRef })
|
||||
ta.style.height = Math.min(ta.scrollHeight, 160) + 'px';
|
||||
}
|
||||
|
||||
// Expose imperative handle via handleRef prop
|
||||
useEffect(() => {
|
||||
if (handleRef) {
|
||||
handleRef.current = {
|
||||
getValue() { return taRef.current?.value || ''; },
|
||||
setValue(val) { if (taRef.current) { taRef.current.value = val; _autoResize(); } },
|
||||
focus() { taRef.current?.focus(); },
|
||||
clear() { if (taRef.current) { taRef.current.value = ''; _autoResize(); } },
|
||||
getTextarea() { return taRef.current; },
|
||||
};
|
||||
}
|
||||
return () => { if (handleRef) handleRef.current = null; };
|
||||
}, [handleRef]);
|
||||
|
||||
const _onInput = useCallback(() => _autoResize(), []);
|
||||
|
||||
const _onKeyDown = useCallback((e) => {
|
||||
// Formatting shortcuts (Ctrl+B, Ctrl+I, Ctrl+E)
|
||||
if (handleFormatShortcut(e, taRef.current, _autoResize)) return;
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
const text = taRef.current?.value?.trim();
|
||||
@@ -91,14 +203,26 @@ export function MessageInput({ onSend, onStop, disabled, streaming, handleRef })
|
||||
}, [onSend, disabled]);
|
||||
|
||||
const _onClickSend = useCallback(() => {
|
||||
const text = taRef.current?.value?.trim();
|
||||
const text = editorRef.current
|
||||
? editorRef.current.getValue()?.trim()
|
||||
: taRef.current?.value?.trim();
|
||||
if (text && !disabled) {
|
||||
onSend(text);
|
||||
if (taRef.current) { taRef.current.value = ''; _autoResize(); }
|
||||
if (editorRef.current) editorRef.current.setValue('');
|
||||
else if (taRef.current) { taRef.current.value = ''; _autoResize(); }
|
||||
}
|
||||
}, [onSend, disabled]);
|
||||
|
||||
// ── Emoji ───────────────────────────────────
|
||||
const _insertEmoji = useCallback((emoji) => {
|
||||
if (editorRef.current) {
|
||||
const view = editorRef.current.getView();
|
||||
const pos = view.state.selection.main.head;
|
||||
view.dispatch({ changes: { from: pos, insert: emoji } });
|
||||
view.focus();
|
||||
return;
|
||||
}
|
||||
// Fallback: textarea
|
||||
const ta = taRef.current;
|
||||
if (!ta) return;
|
||||
ta.focus();
|
||||
@@ -117,20 +241,24 @@ export function MessageInput({ onSend, onStop, disabled, streaming, handleRef })
|
||||
const _toggleEmoji = useCallback(() => setEmojiOpen(v => !v), []);
|
||||
const _closeEmoji = useCallback(() => setEmojiOpen(false), []);
|
||||
|
||||
// ── Render ──────────────────────────────────
|
||||
const useCM = !!window.CM?.chatInput;
|
||||
|
||||
return html`
|
||||
<div class="sw-chat-pane__input-bar">
|
||||
<${MarkdownToolbar} textareaRef=${taRef} onInput=${_autoResize} />
|
||||
<div class="sw-msg-input__wrap">
|
||||
<textarea
|
||||
ref=${taRef}
|
||||
class="sw-msg-input__textarea"
|
||||
placeholder="Type a message\u2026"
|
||||
rows="1"
|
||||
disabled=${disabled}
|
||||
onInput=${_onInput}
|
||||
onKeyDown=${_onKeyDown}
|
||||
aria-label="Message input"
|
||||
/>
|
||||
${useCM
|
||||
? html`<div ref=${containerRef} class="sw-msg-input__cm-container" />`
|
||||
: html`<textarea
|
||||
ref=${taRef}
|
||||
class="sw-msg-input__textarea"
|
||||
placeholder="Type a message\u2026"
|
||||
rows="1"
|
||||
disabled=${disabled}
|
||||
onInput=${_onInput}
|
||||
onKeyDown=${_onKeyDown}
|
||||
aria-label="Message input"
|
||||
/>`}
|
||||
<div class="sw-msg-input__buttons">
|
||||
<div class="sw-msg-input__emoji-wrap">
|
||||
<button
|
||||
|
||||
@@ -23,6 +23,7 @@ const SCROLL_THRESHOLD = 60;
|
||||
* @param {{
|
||||
* messages: Array<{role: string, content: string, id?: string, created_at?: string}>,
|
||||
* streamContent?: string,
|
||||
* streamThinking?: string,
|
||||
* streaming?: boolean,
|
||||
* hasMore?: boolean,
|
||||
* loadingMore?: boolean,
|
||||
@@ -33,7 +34,7 @@ const SCROLL_THRESHOLD = 60;
|
||||
* }} props
|
||||
*/
|
||||
export function MessageList({
|
||||
messages, streamContent, streaming, hasMore, loadingMore,
|
||||
messages, streamContent, streamThinking, streaming, hasMore, loadingMore,
|
||||
onLoadMore, onRegenerate, onDelete, className,
|
||||
}) {
|
||||
const scrollRef = useRef(null);
|
||||
@@ -68,6 +69,7 @@ export function MessageList({
|
||||
}, [messages.length]);
|
||||
|
||||
const hasContent = messages.length > 0 || streaming;
|
||||
const myUserId = window.sw?.auth?.user?.id;
|
||||
|
||||
return html`
|
||||
<div class=${'sw-chat-pane__messages' + (className ? ' ' + className : '')}
|
||||
@@ -90,16 +92,25 @@ export function MessageList({
|
||||
<p class="sw-chat-welcome__title">Start a conversation</p>
|
||||
<p class="sw-chat-welcome__hint">Type a message below to get started.</p>
|
||||
</div>`}
|
||||
${messages.map((m, i) => html`
|
||||
${messages.map((m, i) => {
|
||||
// Determine if this message was sent by the current user
|
||||
const senderId = m.user_id || m.participant_id;
|
||||
const isMine = m.role === 'user' && (!senderId || senderId === myUserId);
|
||||
return html`
|
||||
<${MessageBubble}
|
||||
key=${m.id || i}
|
||||
role=${m.role}
|
||||
content=${m.content}
|
||||
thinking=${m.thinking}
|
||||
id=${m.id}
|
||||
created_at=${m.created_at}
|
||||
isMine=${isMine}
|
||||
senderName=${m.role === 'user' && !isMine ? (m.display_name || m.sender_name || m.username || '') : ''}
|
||||
onRegenerate=${m.role === 'assistant' && m.id && onRegenerate ? () => onRegenerate(m.id) : undefined}
|
||||
onDelete=${m.id && onDelete ? () => onDelete(m.id) : undefined} />`)}
|
||||
onDelete=${m.id && onDelete ? () => onDelete(m.id) : undefined} />`;
|
||||
})}
|
||||
${streaming && html`
|
||||
<${MessageBubble} role="assistant" content=${streamContent} streaming=${true} />`}
|
||||
<${MessageBubble} role="assistant" content=${streamContent}
|
||||
thinking=${streamThinking} streaming=${true} />`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -21,14 +21,18 @@ export function ModelSelector({ value, onChange }) {
|
||||
let cancelled = false;
|
||||
window.sw.api.models.enabled().then(resp => {
|
||||
if (cancelled) return;
|
||||
const list = resp?.data || resp || [];
|
||||
setModels(list.filter(m => !m.hidden));
|
||||
const list = (resp.data || []).filter(m => !m.hidden);
|
||||
setModels(list);
|
||||
// Auto-select first model if no value set
|
||||
if (!value && list.length && onChange) {
|
||||
const first = list[0];
|
||||
const id = first.isPersona ? (first.personaId || first.id) : first.id;
|
||||
onChange(id);
|
||||
}
|
||||
}).catch(() => {});
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
if (!models.length) return null;
|
||||
|
||||
function _onChange(e) {
|
||||
onChange(e.target.value);
|
||||
}
|
||||
@@ -36,8 +40,11 @@ export function ModelSelector({ value, onChange }) {
|
||||
return html`
|
||||
<select class="sw-model-selector__select"
|
||||
title="Select model"
|
||||
value=${value}
|
||||
onChange=${_onChange}>
|
||||
value=${value || ''}
|
||||
onChange=${_onChange}
|
||||
disabled=${!models.length}>
|
||||
${!models.length && html`
|
||||
<option value="" disabled selected>No models</option>`}
|
||||
${models.map(m => {
|
||||
const id = m.isPersona ? (m.personaId || m.id) : m.id;
|
||||
const label = (m.isPersona ? '\ud83c\udfad ' : '') + (m.name || m.id);
|
||||
|
||||
38
src/js/sw/components/chat-pane/typing-indicator.js
Normal file
38
src/js/sw/components/chat-pane/typing-indicator.js
Normal file
@@ -0,0 +1,38 @@
|
||||
// ==========================================
|
||||
// ChatPane Kit — TypingIndicator Component
|
||||
// ==========================================
|
||||
// Shows "X is typing..." below the message list.
|
||||
// Handles 1, 2, or 3+ typers.
|
||||
//
|
||||
// v0.37.14: Initial implementation.
|
||||
//
|
||||
// Usage:
|
||||
// html`<${TypingIndicator} users=${[{id, name}]} />`
|
||||
|
||||
const html = window.html;
|
||||
|
||||
/**
|
||||
* @param {{ users: Array<{id: string, name: string}> }} props
|
||||
*/
|
||||
export function TypingIndicator({ users }) {
|
||||
if (!users || users.length === 0) return null;
|
||||
|
||||
let text;
|
||||
if (users.length === 1) {
|
||||
text = users[0].name + ' is typing';
|
||||
} else if (users.length === 2) {
|
||||
text = users[0].name + ' and ' + users[1].name + ' are typing';
|
||||
} else {
|
||||
text = users[0].name + ' and ' + (users.length - 1) + ' others are typing';
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="sw-typing-indicator" aria-live="polite">
|
||||
<span class="sw-typing-indicator__dots">
|
||||
<span class="sw-typing-indicator__dot" />
|
||||
<span class="sw-typing-indicator__dot" />
|
||||
<span class="sw-typing-indicator__dot" />
|
||||
</span>
|
||||
<span class="sw-typing-indicator__text">${text}</span>
|
||||
</div>`;
|
||||
}
|
||||
@@ -12,15 +12,35 @@
|
||||
|
||||
import { useStream } from './use-stream.js';
|
||||
|
||||
const { useState, useRef, useCallback } = window.hooks;
|
||||
const { useState, useRef, useCallback, useEffect } = window.hooks;
|
||||
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
/** Extract <think>…</think> blocks from raw content.
|
||||
* Returns { content, thinking } with tags stripped. */
|
||||
function extractThinking(raw) {
|
||||
if (!raw || !raw.includes('<think>')) return { content: raw, thinking: '' };
|
||||
let thinking = '';
|
||||
const content = raw.replace(/<think>([\s\S]*?)<\/think>/g, (_, t) => {
|
||||
thinking += (thinking ? '\n' : '') + t.trim();
|
||||
return '';
|
||||
});
|
||||
return { content: content.trim(), thinking };
|
||||
}
|
||||
|
||||
/** Apply extractThinking to an array of message objects. */
|
||||
function hydrateThinking(msgs) {
|
||||
return msgs.map(m => {
|
||||
const { content, thinking } = extractThinking(m.content);
|
||||
return thinking ? { ...m, content, thinking } : m;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{ initialChannelId?: string, getContext?: () => {path: string, content: string}|null, onChannelChange?: (id: string) => void }} opts
|
||||
*/
|
||||
export function useChat(opts = {}) {
|
||||
const { initialChannelId, getContext, onChannelChange } = opts;
|
||||
const { initialChannelId, getContext, onChannelChange, externalModel } = opts;
|
||||
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [channelId, setChannelId] = useState(initialChannelId || null);
|
||||
@@ -32,15 +52,33 @@ export function useChat(opts = {}) {
|
||||
|
||||
const channelRef = useRef(channelId);
|
||||
const pageRef = useRef(1);
|
||||
const { streamContent, streaming, startStream, stopStream } = useStream();
|
||||
const { streamContent, streamThinking, streaming, startStream, stopStream } = useStream();
|
||||
|
||||
// Keep ref in sync
|
||||
channelRef.current = channelId;
|
||||
|
||||
// ── Init model from session ─────────────
|
||||
// Use external model (from parent surface) when provided
|
||||
const effectiveModel = externalModel || model;
|
||||
const modelRef = useRef(effectiveModel);
|
||||
modelRef.current = effectiveModel;
|
||||
|
||||
// ── Init model from session or first enabled ─────────────
|
||||
if (!model && window.sw?.auth?.session?.settings?.model) {
|
||||
setTimeout(() => setModel(window.sw.auth.session.settings.model), 0);
|
||||
}
|
||||
// Auto-load first enabled model if none set
|
||||
const modelInitRef = useRef(false);
|
||||
if (!effectiveModel && !modelInitRef.current && window.sw?.api?.models?.enabled) {
|
||||
modelInitRef.current = true;
|
||||
window.sw.api.models.enabled().then(resp => {
|
||||
const list = resp.data || [];
|
||||
const visible = list.filter(m => !m.hidden);
|
||||
if (visible.length && !model && !externalModel) {
|
||||
const first = visible[0];
|
||||
setModel(first.isPersona ? (first.personaId || first.id) : first.id);
|
||||
}
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
// ── Send Message ────────────────────────
|
||||
const sendMessage = useCallback(async (text) => {
|
||||
@@ -48,13 +86,27 @@ export function useChat(opts = {}) {
|
||||
setSending(true);
|
||||
setError(null);
|
||||
|
||||
// Resolve model: use current ref value, or fetch first enabled model on the fly
|
||||
let resolvedModel = modelRef.current;
|
||||
if (!resolvedModel && window.sw?.api?.models?.enabled) {
|
||||
try {
|
||||
const resp = await window.sw.api.models.enabled();
|
||||
const list = (resp.data || []).filter(m => !m.hidden);
|
||||
if (list.length) {
|
||||
const first = list[0];
|
||||
resolvedModel = first.isPersona ? (first.personaId || first.id) : first.id;
|
||||
setModel(resolvedModel);
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
let cid = channelRef.current;
|
||||
|
||||
// Create channel if needed
|
||||
if (!cid) {
|
||||
try {
|
||||
const title = text.slice(0, 50) + (text.length > 50 ? '\u2026' : '');
|
||||
const resp = await window.sw.api.channels.create({ title, model_id: model, channel_type: 'direct' });
|
||||
const resp = await window.sw.api.channels.create({ title, model_id: resolvedModel, channel_type: 'direct' });
|
||||
cid = resp.id;
|
||||
channelRef.current = cid;
|
||||
setChannelId(cid);
|
||||
@@ -67,7 +119,8 @@ export function useChat(opts = {}) {
|
||||
}
|
||||
|
||||
// Append user message optimistically
|
||||
const userMsg = { role: 'user', content: text };
|
||||
const myId = window.sw?.auth?.user?.id;
|
||||
const userMsg = { id: 'tmp-' + Date.now(), role: 'user', content: text, user_id: myId };
|
||||
setMessages(prev => [...prev, userMsg]);
|
||||
|
||||
try {
|
||||
@@ -80,9 +133,22 @@ export function useChat(opts = {}) {
|
||||
}
|
||||
}
|
||||
|
||||
const data = { channel_id: cid, content, model };
|
||||
// Run pipe pre-send filters (extensions can transform or block)
|
||||
if (window.sw?.pipe?._runPre) {
|
||||
const pipeCtx = window.sw.pipe._runPre({ content, channel: { id: cid }, model: resolvedModel });
|
||||
if (pipeCtx === null) { setSending(false); return; }
|
||||
content = pipeCtx.content;
|
||||
}
|
||||
|
||||
const data = { channel_id: cid, content, model: resolvedModel };
|
||||
const resp = await window.sw.api.channels.complete(data);
|
||||
await startStream(resp);
|
||||
// ai_mode off/mention_only returns JSON, not SSE — skip streaming
|
||||
const ct = resp.headers.get('content-type') || '';
|
||||
if (ct.includes('application/json')) {
|
||||
// Message persisted server-side, no AI response expected
|
||||
} else {
|
||||
await startStream(resp);
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.name !== 'AbortError') {
|
||||
setError('Error: ' + e.message);
|
||||
@@ -90,13 +156,15 @@ export function useChat(opts = {}) {
|
||||
}
|
||||
|
||||
setSending(false);
|
||||
}, [sending, model, getContext, onChannelChange, startStream]);
|
||||
}, [sending, effectiveModel, getContext, onChannelChange, startStream]);
|
||||
|
||||
// Finalize: when streaming ends, capture the final content into messages
|
||||
const prevStreamingRef = useRef(false);
|
||||
if (prevStreamingRef.current && !streaming && streamContent) {
|
||||
prevStreamingRef.current = false;
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: streamContent }]);
|
||||
const msg = { role: 'assistant', content: streamContent };
|
||||
if (streamThinking) msg.thinking = streamThinking;
|
||||
setMessages(prev => [...prev, msg]);
|
||||
}
|
||||
prevStreamingRef.current = streaming;
|
||||
|
||||
@@ -109,7 +177,7 @@ export function useChat(opts = {}) {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const resp = await window.sw.api.channels.regenerate(cid, msgId, { model });
|
||||
const resp = await window.sw.api.channels.regenerate(cid, msgId, { model: modelRef.current });
|
||||
// Remove the old assistant message being regenerated
|
||||
setMessages(prev => {
|
||||
const idx = prev.findIndex(m => m.id === msgId);
|
||||
@@ -123,7 +191,7 @@ export function useChat(opts = {}) {
|
||||
}
|
||||
|
||||
setSending(false);
|
||||
}, [sending, model, startStream]);
|
||||
}, [sending, effectiveModel, startStream]);
|
||||
|
||||
// ── Delete Message ──────────────────────
|
||||
const deleteMessage = useCallback(async (msgId) => {
|
||||
@@ -152,12 +220,24 @@ export function useChat(opts = {}) {
|
||||
|
||||
try {
|
||||
const resp = await window.sw.api.channels.messages(id, { page: 1, per_page: PAGE_SIZE });
|
||||
const data = resp?.data || resp || [];
|
||||
const data = hydrateThinking(resp.data || resp || []);
|
||||
setMessages(data);
|
||||
setHasMore(data.length >= PAGE_SIZE);
|
||||
} catch (e) {
|
||||
// Channel deleted/not found — clear selection
|
||||
if ((e.status === 404 || e.message?.includes('404')) && onChannelChange) {
|
||||
channelRef.current = null;
|
||||
setChannelId(null);
|
||||
onChannelChange(null);
|
||||
return;
|
||||
}
|
||||
setError('Failed to load messages: ' + e.message);
|
||||
}
|
||||
|
||||
// Mark channel as read
|
||||
if (window.sw?.api?.channels?.markRead) {
|
||||
window.sw.api.channels.markRead(id).catch(() => {});
|
||||
}
|
||||
}, [onChannelChange]);
|
||||
|
||||
// ── Load More (pagination) ──────────────
|
||||
@@ -170,7 +250,7 @@ export function useChat(opts = {}) {
|
||||
|
||||
try {
|
||||
const resp = await window.sw.api.channels.messages(cid, { page: nextPage, per_page: PAGE_SIZE });
|
||||
const data = resp?.data || resp || [];
|
||||
const data = hydrateThinking(resp.data || resp || []);
|
||||
if (data.length > 0) {
|
||||
pageRef.current = nextPage;
|
||||
// Prepend older messages
|
||||
@@ -207,6 +287,116 @@ export function useChat(opts = {}) {
|
||||
// ── Clear Error ─────────────────────────
|
||||
const clearError = useCallback(() => setError(null), []);
|
||||
|
||||
// ── Typing indicators ───────────────────
|
||||
const [typingUsers, setTypingUsers] = useState([]); // [{ id, name }]
|
||||
const typingTimers = useRef({}); // id → timeout
|
||||
|
||||
// ── WebSocket: listen for messages from other users ──
|
||||
useEffect(() => {
|
||||
if (!window.sw?.on) return;
|
||||
const handler = (evt) => {
|
||||
try {
|
||||
const data = typeof evt.payload === 'string' ? JSON.parse(evt.payload) : (evt.payload || evt);
|
||||
// Only append if it's for the active channel
|
||||
if (data.channel_id !== channelRef.current) return;
|
||||
// Skip messages from self (already added optimistically)
|
||||
const myId = window.sw?.auth?.user?.id;
|
||||
if (data.user_id && data.user_id === myId) return;
|
||||
const { content: cleanContent, thinking } = extractThinking(data.content);
|
||||
const msg = {
|
||||
id: data.id,
|
||||
role: data.role || 'user',
|
||||
content: cleanContent,
|
||||
user_id: data.user_id,
|
||||
participant_id: data.participant_id || data.user_id,
|
||||
participant_type: data.participant_type || 'user',
|
||||
display_name: data.display_name,
|
||||
created_at: data.created_at || new Date().toISOString(),
|
||||
};
|
||||
if (thinking) msg.thinking = thinking;
|
||||
setMessages(prev => prev.some(m => m.id && m.id === msg.id) ? prev : [...prev, msg]);
|
||||
// Clear typing for this user/persona when their message arrives
|
||||
const pid = data.participant_id || data.user_id;
|
||||
if (pid) _clearTyping(pid);
|
||||
} catch (_) {}
|
||||
};
|
||||
|
||||
// Typing start handler (persona chaining + user typing)
|
||||
const typingStartHandler = (evt) => {
|
||||
try {
|
||||
const data = typeof evt.payload === 'string' ? JSON.parse(evt.payload) : (evt.payload || evt);
|
||||
if (data.channel_id !== channelRef.current) return;
|
||||
const pid = data.participant_id || data.user_id;
|
||||
if (!pid) return;
|
||||
const myId = window.sw?.auth?.user?.id;
|
||||
if (pid === myId) return;
|
||||
const name = data.display_name || pid;
|
||||
setTypingUsers(prev => {
|
||||
if (prev.some(t => t.id === pid)) return prev;
|
||||
return [...prev, { id: pid, name }];
|
||||
});
|
||||
// Auto-clear after 10s (safety net)
|
||||
if (typingTimers.current[pid]) clearTimeout(typingTimers.current[pid]);
|
||||
typingTimers.current[pid] = setTimeout(() => _clearTyping(pid), 10000);
|
||||
} catch (_) {}
|
||||
};
|
||||
|
||||
// Typing stop handler
|
||||
const typingStopHandler = (evt) => {
|
||||
try {
|
||||
const data = typeof evt.payload === 'string' ? JSON.parse(evt.payload) : (evt.payload || evt);
|
||||
const pid = data.participant_id || data.user_id;
|
||||
if (pid) _clearTyping(pid);
|
||||
} catch (_) {}
|
||||
};
|
||||
|
||||
// message.deleted handler (other clients' deletes)
|
||||
const deleteHandler = (evt) => {
|
||||
try {
|
||||
const data = typeof evt.payload === 'string' ? JSON.parse(evt.payload) : (evt.payload || evt);
|
||||
if (data.channel_id !== channelRef.current) return;
|
||||
setMessages(prev => prev.filter(m => m.id !== data.id));
|
||||
} catch (_) {}
|
||||
};
|
||||
|
||||
window.sw.on('message.created', handler);
|
||||
window.sw.on('message.deleted', deleteHandler);
|
||||
window.sw.on('typing.start', typingStartHandler);
|
||||
window.sw.on('typing.stop', typingStopHandler);
|
||||
window.sw.on('chat.typing.start', typingStartHandler);
|
||||
window.sw.on('chat.typing.stop', typingStopHandler);
|
||||
return () => {
|
||||
window.sw.off?.('message.created', handler);
|
||||
window.sw.off?.('message.deleted', deleteHandler);
|
||||
window.sw.off?.('typing.start', typingStartHandler);
|
||||
window.sw.off?.('typing.stop', typingStopHandler);
|
||||
window.sw.off?.('chat.typing.start', typingStartHandler);
|
||||
window.sw.off?.('chat.typing.stop', typingStopHandler);
|
||||
};
|
||||
}, []);
|
||||
|
||||
function _clearTyping(pid) {
|
||||
if (typingTimers.current[pid]) {
|
||||
clearTimeout(typingTimers.current[pid]);
|
||||
delete typingTimers.current[pid];
|
||||
}
|
||||
setTypingUsers(prev => prev.filter(t => t.id !== pid));
|
||||
}
|
||||
|
||||
// Emit typing event (called from MessageInput via prop)
|
||||
const emitTyping = useCallback((isTyping) => {
|
||||
const cid = channelRef.current;
|
||||
if (!cid || !window.sw?.emit) return;
|
||||
const myId = window.sw?.auth?.user?.id;
|
||||
const myName = window.sw?.auth?.user?.display_name || window.sw?.auth?.user?.username || '';
|
||||
window.sw.emit(isTyping ? 'chat.typing.start' : 'chat.typing.stop', {
|
||||
channel_id: cid,
|
||||
participant_id: myId,
|
||||
participant_type: 'user',
|
||||
display_name: myName,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return {
|
||||
messages,
|
||||
channelId,
|
||||
@@ -221,6 +411,7 @@ export function useChat(opts = {}) {
|
||||
clearError,
|
||||
// Streaming state (passthrough from useStream)
|
||||
streamContent,
|
||||
streamThinking,
|
||||
streaming,
|
||||
// v0.37.10: new methods
|
||||
regenerate,
|
||||
@@ -228,5 +419,8 @@ export function useChat(opts = {}) {
|
||||
loadMore,
|
||||
hasMore,
|
||||
loadingMore,
|
||||
// v0.37.14: typing indicators
|
||||
typingUsers,
|
||||
emitTyping,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -18,13 +18,16 @@ const { useState, useRef, useCallback } = window.hooks;
|
||||
*/
|
||||
export function useStream() {
|
||||
const [streamContent, setStreamContent] = useState('');
|
||||
const [streamThinking, setStreamThinking] = useState('');
|
||||
const [streaming, setStreaming] = useState(false);
|
||||
const contentRef = useRef('');
|
||||
const thinkingRef = useRef('');
|
||||
const abortRef = useRef(null);
|
||||
const rafRef = useRef(null);
|
||||
|
||||
const _flush = useCallback(() => {
|
||||
setStreamContent(contentRef.current);
|
||||
setStreamThinking(thinkingRef.current);
|
||||
rafRef.current = null;
|
||||
}, []);
|
||||
|
||||
@@ -44,13 +47,16 @@ export function useStream() {
|
||||
rafRef.current = null;
|
||||
}
|
||||
setStreamContent(contentRef.current);
|
||||
setStreamThinking(thinkingRef.current);
|
||||
setStreaming(false);
|
||||
}, []);
|
||||
|
||||
const startStream = useCallback(async (response) => {
|
||||
// Reset
|
||||
contentRef.current = '';
|
||||
thinkingRef.current = '';
|
||||
setStreamContent('');
|
||||
setStreamThinking('');
|
||||
setStreaming(true);
|
||||
|
||||
const controller = new AbortController();
|
||||
@@ -75,9 +81,20 @@ export function useStream() {
|
||||
const data = line.slice(6);
|
||||
if (data === '[DONE]') continue;
|
||||
try {
|
||||
const delta = JSON.parse(data).choices?.[0]?.delta?.content;
|
||||
if (delta) {
|
||||
contentRef.current += delta;
|
||||
const parsed = JSON.parse(data).choices?.[0]?.delta;
|
||||
if (parsed?.content) {
|
||||
let chunk = parsed.content;
|
||||
// Run pipe stream filters (extensions can transform or suppress chunks)
|
||||
if (window.sw?.pipe?._runStream) {
|
||||
const pipeCtx = window.sw.pipe._runStream({ content: chunk });
|
||||
if (pipeCtx === null) continue;
|
||||
chunk = pipeCtx.content;
|
||||
}
|
||||
contentRef.current += chunk;
|
||||
_scheduleFlush();
|
||||
}
|
||||
if (parsed?.reasoning_content) {
|
||||
thinkingRef.current += parsed.reasoning_content;
|
||||
_scheduleFlush();
|
||||
}
|
||||
} catch (_) { /* skip malformed JSON */ }
|
||||
@@ -95,9 +112,10 @@ export function useStream() {
|
||||
rafRef.current = null;
|
||||
}
|
||||
setStreamContent(contentRef.current);
|
||||
setStreamThinking(thinkingRef.current);
|
||||
setStreaming(false);
|
||||
abortRef.current = null;
|
||||
}, [_scheduleFlush]);
|
||||
|
||||
return { streamContent, streaming, startStream, stopStream };
|
||||
return { streamContent, streamThinking, streaming, startStream, stopStream };
|
||||
}
|
||||
|
||||
@@ -101,7 +101,7 @@ export async function resolveTransclusions(container, onLinkClick) {
|
||||
let note = cache[title.toLowerCase()];
|
||||
if (!note) {
|
||||
const resp = await api.searchTitles(title, 1);
|
||||
const match = (resp.data || resp || []).find(
|
||||
const match = (resp || []).find(
|
||||
n => n.title.toLowerCase() === title.toLowerCase()
|
||||
);
|
||||
if (!match) {
|
||||
|
||||
@@ -69,7 +69,7 @@ export function NoteEditor(props) {
|
||||
if (!query || query.length < 1) return [];
|
||||
try {
|
||||
const resp = await window.sw.api.notes.searchTitles(query, 8);
|
||||
return (resp.data || resp || []).map(n => ({ label: n.title, id: n.id }));
|
||||
return (resp || []).map(n => ({ label: n.title, id: n.id }));
|
||||
} catch { return []; }
|
||||
},
|
||||
});
|
||||
|
||||
@@ -67,7 +67,7 @@ export function NoteReader(props) {
|
||||
if (!api) return;
|
||||
// Get all note titles (limited)
|
||||
const resp = await api.list({ limit: 200, offset: 0 });
|
||||
const allNotes = resp.data || resp || [];
|
||||
const allNotes = resp.data || [];
|
||||
const content = note.content.toLowerCase();
|
||||
|
||||
// Find titles mentioned in content but not wikilinked
|
||||
|
||||
@@ -66,7 +66,7 @@ export function QuickSwitcher(props) {
|
||||
searchTimerRef.current = setTimeout(async () => {
|
||||
try {
|
||||
const resp = await window.sw.api.notes.searchTitles(query, 10);
|
||||
setResults(resp.data || resp || []);
|
||||
setResults(resp || []);
|
||||
setActiveIndex(0);
|
||||
} catch { setResults([]); }
|
||||
}, 150);
|
||||
|
||||
@@ -58,7 +58,7 @@ export function SaveToNoteDialog(props) {
|
||||
searchTimerRef.current = setTimeout(async () => {
|
||||
try {
|
||||
const resp = await window.sw.api.notes.searchTitles(searchQuery, 8);
|
||||
setSearchResults(resp.data || resp || []);
|
||||
setSearchResults(resp || []);
|
||||
} catch { setSearchResults([]); }
|
||||
}, 250);
|
||||
}, [searchQuery, mode]);
|
||||
|
||||
@@ -104,15 +104,15 @@ export function useNotes(opts = {}) {
|
||||
let result, isSearch = false;
|
||||
if (searchQuery && searchQuery.length >= 2) {
|
||||
isSearch = true;
|
||||
const data = await api().search(searchQuery);
|
||||
result = data.data || data || [];
|
||||
const resp = await api().search(searchQuery);
|
||||
result = resp.data || [];
|
||||
setHasMore(false);
|
||||
} else {
|
||||
const page = append ? pageRef.current : 1;
|
||||
if (!append) pageRef.current = 1;
|
||||
const offset = (page - 1) * PAGE_SIZE;
|
||||
const data = await api().list({ limit: PAGE_SIZE, offset, folder, tag: tagFilter, sort });
|
||||
result = data.data || data || [];
|
||||
const resp = await api().list({ limit: PAGE_SIZE, offset, folder, tag: tagFilter, sort });
|
||||
result = resp.data || [];
|
||||
setHasMore(result.length >= PAGE_SIZE);
|
||||
}
|
||||
if (append) {
|
||||
@@ -224,7 +224,7 @@ export function useNotes(opts = {}) {
|
||||
// Load backlinks
|
||||
try {
|
||||
const bl = await api().backlinks(id);
|
||||
setBacklinks(bl.data || bl || []);
|
||||
setBacklinks(bl || []);
|
||||
} catch { setBacklinks([]); }
|
||||
} catch (e) {
|
||||
toast('Failed to load note: ' + e.message, 'error');
|
||||
@@ -260,7 +260,7 @@ export function useNotes(opts = {}) {
|
||||
// Reload backlinks
|
||||
try {
|
||||
const bl = await api().backlinks(editingId);
|
||||
setBacklinks(bl.data || bl || []);
|
||||
setBacklinks(bl || []);
|
||||
} catch {}
|
||||
} else {
|
||||
const created = await api().create({ title, content, folder_path, tags });
|
||||
@@ -305,7 +305,7 @@ export function useNotes(opts = {}) {
|
||||
const navigateToLink = useCallback(async (title) => {
|
||||
try {
|
||||
const resp = await api().searchTitles(title, 1);
|
||||
const match = (resp.data || resp || []).find(
|
||||
const match = (resp || []).find(
|
||||
n => n.title.toLowerCase() === title.toLowerCase()
|
||||
);
|
||||
if (match) {
|
||||
@@ -337,7 +337,7 @@ export function useNotes(opts = {}) {
|
||||
const title = `Daily \u2014 ${today}`;
|
||||
try {
|
||||
const resp = await api().searchTitles(title, 1);
|
||||
const existing = (resp.data || resp || []).find(
|
||||
const existing = (resp || []).find(
|
||||
n => n.title.toLowerCase() === title.toLowerCase()
|
||||
);
|
||||
if (existing) {
|
||||
@@ -362,7 +362,7 @@ export function useNotes(opts = {}) {
|
||||
const title = `Daily \u2014 ${newDate}`;
|
||||
try {
|
||||
const resp = await api().searchTitles(title, 1);
|
||||
const existing = (resp.data || resp || []).find(
|
||||
const existing = (resp || []).find(
|
||||
n => n.title.toLowerCase() === title.toLowerCase()
|
||||
);
|
||||
if (existing) {
|
||||
|
||||
@@ -11,7 +11,8 @@ export function Menu({ items = [], anchor, open, direction = 'down-right', onSel
|
||||
const menuRef = useRef(null);
|
||||
const [pos, setPos] = useState(null);
|
||||
const [focusIdx, setFocusIdx] = useState(-1);
|
||||
const [submenu, setSubmenu] = useState(null);
|
||||
const [submenu, setSubmenu] = useState(null); // { item, anchorEl }
|
||||
const itemRefs = useRef({}); // selIdx → DOM element
|
||||
|
||||
const selectableItems = items.filter(i => !i.divider && !i.disabled);
|
||||
|
||||
@@ -90,14 +91,14 @@ export function Menu({ items = [], anchor, open, direction = 'down-right', onSel
|
||||
e.preventDefault();
|
||||
if (focusIdx >= 0 && focusIdx < count) {
|
||||
const item = selectableItems[focusIdx];
|
||||
if (item.children) setSubmenu(item);
|
||||
if (item.children) setSubmenu({ item, anchorEl: itemRefs.current[focusIdx] });
|
||||
else if (onSelect) { onSelect(item.action || item.label); if (onClose) onClose(); }
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ArrowRight': {
|
||||
if (focusIdx >= 0 && selectableItems[focusIdx]?.children) {
|
||||
setSubmenu(selectableItems[focusIdx]);
|
||||
setSubmenu({ item: selectableItems[focusIdx], anchorEl: itemRefs.current[focusIdx] });
|
||||
}
|
||||
break;
|
||||
}
|
||||
@@ -130,11 +131,12 @@ export function Menu({ items = [], anchor, open, direction = 'down-right', onSel
|
||||
return html`
|
||||
<div class="sw-menu__item ${item.disabled ? 'sw-menu__item--disabled' : ''} ${focused ? 'sw-menu__item--focused' : ''}"
|
||||
role="menuitem"
|
||||
ref=${el => { if (el) itemRefs.current[mySelIdx] = el; }}
|
||||
aria-disabled=${item.disabled || false}
|
||||
onMouseEnter=${() => { setFocusIdx(mySelIdx); if (item.children) setSubmenu(item); }}
|
||||
onMouseEnter=${(e) => { setFocusIdx(mySelIdx); if (item.children) setSubmenu({ item, anchorEl: e.currentTarget }); }}
|
||||
onClick=${() => {
|
||||
if (item.disabled) return;
|
||||
if (item.children) { setSubmenu(item); return; }
|
||||
if (item.children) { setSubmenu({ item, anchorEl: itemRefs.current[mySelIdx] }); return; }
|
||||
if (onSelect) onSelect(item.action || item.label);
|
||||
if (onClose) onClose();
|
||||
}}>
|
||||
@@ -146,9 +148,9 @@ export function Menu({ items = [], anchor, open, direction = 'down-right', onSel
|
||||
})}
|
||||
${submenu && html`
|
||||
<${Menu}
|
||||
items=${submenu.children}
|
||||
items=${submenu.item.children}
|
||||
open
|
||||
anchor=${menuRef.current}
|
||||
anchor=${submenu.anchorEl}
|
||||
direction="down-right"
|
||||
onSelect=${(action) => { if (onSelect) onSelect(action); if (onClose) onClose(); }}
|
||||
onClose=${() => setSubmenu(null)}
|
||||
|
||||
130
src/js/sw/primitives/user-picker.js
Normal file
130
src/js/sw/primitives/user-picker.js
Normal file
@@ -0,0 +1,130 @@
|
||||
// ==========================================
|
||||
// Primitive — UserPicker (autocomplete)
|
||||
// ==========================================
|
||||
// Debounced search input with dropdown results.
|
||||
// Calls sw.api.users.search(q) and shows matching users.
|
||||
//
|
||||
// Usage:
|
||||
// html`<${UserPicker} onSelect=${(user) => ...} placeholder="Search users..." />`
|
||||
|
||||
const { html } = window;
|
||||
const { useState, useRef, useEffect, useCallback } = hooks;
|
||||
|
||||
const DEBOUNCE_MS = 250;
|
||||
|
||||
function _initials(name) {
|
||||
if (!name) return '?';
|
||||
return name.split(/\s+/).map(w => w[0]).join('').toUpperCase().slice(0, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* onSelect: (user: {id: string, username: string, display_name?: string}) => void,
|
||||
* placeholder?: string,
|
||||
* autoFocus?: boolean,
|
||||
* className?: string,
|
||||
* }} props
|
||||
*/
|
||||
export function UserPicker({ onSelect, placeholder = 'Search users\u2026', autoFocus, className }) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [results, setResults] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeIdx, setActiveIdx] = useState(-1);
|
||||
const timerRef = useRef(null);
|
||||
const inputRef = useRef(null);
|
||||
const containerRef = useRef(null);
|
||||
|
||||
// Debounced search
|
||||
useEffect(() => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
const q = query.trim();
|
||||
if (!q || q.length < 1) {
|
||||
setResults([]);
|
||||
setOpen(false);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
timerRef.current = setTimeout(async () => {
|
||||
try {
|
||||
const resp = await sw.api.users.search(q);
|
||||
const list = resp || [];
|
||||
setResults(Array.isArray(list) ? list : []);
|
||||
setOpen(list.length > 0);
|
||||
setActiveIdx(-1);
|
||||
} catch (_) {
|
||||
setResults([]);
|
||||
}
|
||||
setLoading(false);
|
||||
}, DEBOUNCE_MS);
|
||||
return () => { if (timerRef.current) clearTimeout(timerRef.current); };
|
||||
}, [query]);
|
||||
|
||||
// Close on outside click
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function _onClick(e) {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', _onClick);
|
||||
return () => document.removeEventListener('mousedown', _onClick);
|
||||
}, [open]);
|
||||
|
||||
function _select(user) {
|
||||
setQuery('');
|
||||
setResults([]);
|
||||
setOpen(false);
|
||||
onSelect(user);
|
||||
}
|
||||
|
||||
function _onKeyDown(e) {
|
||||
if (!open || !results.length) return;
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setActiveIdx(i => Math.min(i + 1, results.length - 1));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setActiveIdx(i => Math.max(i - 1, 0));
|
||||
} else if (e.key === 'Enter' && activeIdx >= 0) {
|
||||
e.preventDefault();
|
||||
_select(results[activeIdx]);
|
||||
} else if (e.key === 'Escape') {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class=${'sw-user-picker' + (className ? ' ' + className : '')}
|
||||
ref=${containerRef}>
|
||||
<input class="sw-user-picker__input"
|
||||
ref=${inputRef}
|
||||
type="text"
|
||||
value=${query}
|
||||
placeholder=${placeholder}
|
||||
autoFocus=${autoFocus}
|
||||
onInput=${e => setQuery(e.target.value)}
|
||||
onFocus=${() => results.length && setOpen(true)}
|
||||
onKeyDown=${_onKeyDown}
|
||||
autocomplete="off" />
|
||||
${loading && html`<span class="sw-user-picker__spinner" />`}
|
||||
${open && html`
|
||||
<div class="sw-user-picker__dropdown" role="listbox">
|
||||
${results.map((u, i) => html`
|
||||
<div key=${u.id}
|
||||
class=${'sw-user-picker__option' + (i === activeIdx ? ' sw-user-picker__option--active' : '')}
|
||||
role="option"
|
||||
aria-selected=${i === activeIdx}
|
||||
onMouseDown=${() => _select(u)}
|
||||
onMouseEnter=${() => setActiveIdx(i)}>
|
||||
<span class="sw-user-picker__avatar">${_initials(u.display_name || u.username)}</span>
|
||||
<div class="sw-user-picker__label">
|
||||
<span class="sw-user-picker__name">${u.display_name || u.username}</span>
|
||||
${u.display_name && u.username && html`
|
||||
<span class="sw-user-picker__handle">@${u.username}</span>`}
|
||||
</div>
|
||||
</div>`)}
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
@@ -73,6 +73,7 @@ export function createDomains(restClient) {
|
||||
complete: (data, signal) => rc.stream('/api/v1/chat/completions', data, signal),
|
||||
regenerate: (id, msgId, data, signal) => rc.stream(`/api/v1/channels/${id}/messages/${msgId}/regenerate`, data, signal),
|
||||
editMessage: (id, msgId, content) => rc.post(`/api/v1/channels/${id}/messages/${msgId}/edit`, { content }),
|
||||
deleteMessage: (id, msgId) => rc.del(`/api/v1/channels/${id}/messages/${msgId}`),
|
||||
siblings: (id, msgId) => rc.get(`/api/v1/channels/${id}/messages/${msgId}/siblings`),
|
||||
path: (id) => rc.get(`/api/v1/channels/${id}/path`),
|
||||
cursor: (id, leafId) => rc.put(`/api/v1/channels/${id}/cursor`, { active_leaf_id: leafId }),
|
||||
@@ -184,11 +185,13 @@ export function createDomains(restClient) {
|
||||
|
||||
// ── 11. Notifications ──────────────────
|
||||
notifications: {
|
||||
list: (opts) => rc.get('/api/v1/notifications' + _qs(opts)),
|
||||
markRead: (id) => rc.post(`/api/v1/notifications/${id}/read`, {}),
|
||||
prefs: () => rc.get('/api/v1/notifications/preferences'),
|
||||
setPref: (type, data) => rc.put(`/api/v1/notifications/preferences/${encodeURIComponent(type)}`, data),
|
||||
delPref: (type) => rc.del(`/api/v1/notifications/preferences/${encodeURIComponent(type)}`),
|
||||
list: (opts) => rc.get('/api/v1/notifications' + _qs(opts)),
|
||||
unreadCount: () => rc.get('/api/v1/notifications/unread-count'),
|
||||
markRead: (id) => rc.post(`/api/v1/notifications/${id}/read`, {}),
|
||||
markAllRead: () => rc.post('/api/v1/notifications/mark-all-read', {}),
|
||||
prefs: () => rc.get('/api/v1/notifications/preferences'),
|
||||
setPref: (type, data) => rc.put(`/api/v1/notifications/preferences/${encodeURIComponent(type)}`, data),
|
||||
delPref: (type) => rc.del(`/api/v1/notifications/preferences/${encodeURIComponent(type)}`),
|
||||
},
|
||||
|
||||
// ── 12. Extensions ─────────────────────
|
||||
@@ -443,6 +446,19 @@ export function createDomains(restClient) {
|
||||
del: (id) => rc.del(`/api/v1/admin/extensions/${id}`),
|
||||
},
|
||||
|
||||
packages: {
|
||||
list: (opts) => rc.get('/api/v1/admin/packages' + _qs(opts)),
|
||||
get: (id) => rc.get(`/api/v1/admin/packages/${id}`),
|
||||
install: (file) => rc.upload('/api/v1/admin/packages/install', file),
|
||||
enable: (id) => rc.put(`/api/v1/admin/packages/${id}/enable`, {}),
|
||||
disable: (id) => rc.put(`/api/v1/admin/packages/${id}/disable`, {}),
|
||||
del: (id) => rc.del(`/api/v1/admin/packages/${id}`),
|
||||
settings: (id) => rc.get(`/api/v1/admin/packages/${id}/settings`),
|
||||
updateSettings: (id, data) => rc.put(`/api/v1/admin/packages/${id}/settings`, data),
|
||||
registry: () => rc.get('/api/v1/admin/packages/registry'),
|
||||
registryInstall: (url) => rc.post('/api/v1/admin/packages/registry/install', { url }),
|
||||
},
|
||||
|
||||
tasks: {
|
||||
list: () => rc.get('/api/v1/admin/tasks'),
|
||||
run: (id) => rc.post(`/api/v1/admin/tasks/${id}/run`, {}),
|
||||
@@ -478,11 +494,19 @@ export function createDomains(restClient) {
|
||||
// ── Misc (not domain-specific) ─────────
|
||||
folders: {
|
||||
list: () => rc.get('/api/v1/folders'),
|
||||
create: (name, sort) => rc.post('/api/v1/folders', { name, sort_order: sort || 0 }),
|
||||
create: (name, opts) => rc.post('/api/v1/folders', { name, parent_id: opts?.parent_id || null, sort_order: opts?.sort_order || 0 }),
|
||||
update: (id, data) => rc.put(`/api/v1/folders/${id}`, data),
|
||||
del: (id) => rc.del(`/api/v1/folders/${id}`),
|
||||
},
|
||||
|
||||
notifications: {
|
||||
list: (params) => rc.get('/api/v1/notifications', params),
|
||||
unreadCount: () => rc.get('/api/v1/notifications/unread-count'),
|
||||
markRead: (id) => rc.patch(`/api/v1/notifications/${id}/read`),
|
||||
markAllRead: () => rc.post('/api/v1/notifications/mark-all-read'),
|
||||
del: (id) => rc.del(`/api/v1/notifications/${id}`),
|
||||
},
|
||||
|
||||
files: {
|
||||
get: (id) => rc.get(`/api/v1/files/${id}`),
|
||||
del: (id) => rc.del(`/api/v1/files/${id}`),
|
||||
@@ -492,6 +516,11 @@ export function createDomains(restClient) {
|
||||
list: () => rc.get('/api/v1/tools'),
|
||||
},
|
||||
|
||||
// ── Users ──────────────────────────────
|
||||
users: {
|
||||
search: (q) => rc.get('/api/v1/users/search' + _qs({ q })),
|
||||
},
|
||||
|
||||
presence: {
|
||||
heartbeat: () => rc.post('/api/v1/presence/heartbeat', {}),
|
||||
},
|
||||
|
||||
@@ -30,6 +30,7 @@ export function createAuth() {
|
||||
let _policies = {};
|
||||
let _refreshTimer = null;
|
||||
let _refreshPromise = null;
|
||||
let _booting = false;
|
||||
let _restClient = null;
|
||||
let _emit = () => {};
|
||||
|
||||
@@ -69,6 +70,7 @@ export function createAuth() {
|
||||
_groups = [];
|
||||
_policies = {};
|
||||
localStorage.removeItem(_storageKey);
|
||||
sessionStorage.removeItem('sw-chat-active');
|
||||
document.cookie = 'sb_token=; path=/; max-age=0';
|
||||
if (_refreshTimer) { clearTimeout(_refreshTimer); _refreshTimer = null; }
|
||||
}
|
||||
@@ -194,11 +196,19 @@ export function createAuth() {
|
||||
*/
|
||||
async boot() {
|
||||
_loadTokens();
|
||||
if (!_refreshToken) return;
|
||||
if (!_refreshToken) {
|
||||
// No tokens in localStorage — clear any stale sb_token cookie
|
||||
// so Go SSR middleware doesn't trust a leftover cookie.
|
||||
document.cookie = 'sb_token=; path=/; max-age=0';
|
||||
return;
|
||||
}
|
||||
|
||||
// Unknown token age — schedule refresh soon
|
||||
_scheduleRefresh(60);
|
||||
|
||||
// Suppress _on401Failure redirect during boot — boot handles 401 itself.
|
||||
_booting = true;
|
||||
|
||||
// Fetch permissions (validates the access token)
|
||||
try {
|
||||
await _fetchPermissions();
|
||||
@@ -215,6 +225,8 @@ export function createAuth() {
|
||||
// Network error or other — keep tokens, user may be offline
|
||||
console.warn('[sw.auth] Boot: permissions fetch failed (keeping tokens):', e.message);
|
||||
}
|
||||
} finally {
|
||||
_booting = false;
|
||||
}
|
||||
|
||||
if (_accessToken) {
|
||||
@@ -233,8 +245,15 @@ export function createAuth() {
|
||||
|
||||
_on401Failure() {
|
||||
_clearTokens();
|
||||
// During boot(), auth.boot() handles 401 gracefully — don't redirect.
|
||||
if (_booting) return;
|
||||
// Already on login page — don't redirect (prevents blank-page reload loop
|
||||
// when stale localStorage tokens trigger 401 during SDK boot on /login).
|
||||
const base = window.__BASE__ || '';
|
||||
window.location.href = base + '/login';
|
||||
const loginPath = base + '/login';
|
||||
const here = window.location.pathname.replace(/\/+$/, '');
|
||||
if (here === loginPath) return;
|
||||
window.location.href = loginPath;
|
||||
},
|
||||
|
||||
_setAuth(data) { _setAuth(data); },
|
||||
|
||||
@@ -139,7 +139,7 @@ export async function boot() {
|
||||
};
|
||||
|
||||
// Marker for idempotency
|
||||
sw._sdk = '0.37.9';
|
||||
sw._sdk = '0.37.14';
|
||||
|
||||
// 8. Expose globally
|
||||
window.sw = sw;
|
||||
@@ -161,7 +161,7 @@ export async function boot() {
|
||||
// 10. Signal ready
|
||||
events.emit('sdk.ready', {}, { localOnly: true });
|
||||
document.dispatchEvent(new CustomEvent('sw:ready', { detail: { sw } }));
|
||||
console.log('[sw] SDK v0.37.9 ready');
|
||||
console.log(`[sw] SDK v${sw._sdk} ready`);
|
||||
|
||||
return sw;
|
||||
}
|
||||
|
||||
@@ -85,6 +85,12 @@ export function createPipe() {
|
||||
entry.stats.calls++;
|
||||
entry.stats.totalMs += performance.now() - t0;
|
||||
|
||||
if (result instanceof Promise) {
|
||||
console.error(`[sw.pipe] ${stage}: filter '${entry.source}' returned Promise (async not supported)`);
|
||||
entry.stats.errors++;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (result === null || result === undefined) {
|
||||
return null; // halt chain
|
||||
}
|
||||
|
||||
@@ -97,8 +97,10 @@ export function createRestClient(getToken, onRefresh, on401Failure) {
|
||||
if (!text) return null;
|
||||
const json = JSON.parse(text);
|
||||
|
||||
// List envelope: { data: Array, ... }
|
||||
if (json && Array.isArray(json.data) && ('page' in json || 'total' in json || 'per_page' in json)) {
|
||||
// List envelope: { data: Array } with no sibling keys → unwrap.
|
||||
// If siblings exist (total, page, etc.) return full object so
|
||||
// callers can access metadata alongside the list.
|
||||
if (json && Array.isArray(json.data) && Object.keys(json).length === 1) {
|
||||
return json.data;
|
||||
}
|
||||
return json;
|
||||
|
||||
152
src/js/sw/shell/notification-bell.js
Normal file
152
src/js/sw/shell/notification-bell.js
Normal file
@@ -0,0 +1,152 @@
|
||||
// ==========================================
|
||||
// Shell — Notification Bell Component
|
||||
// ==========================================
|
||||
// Bell icon with unread count badge and dropdown panel.
|
||||
// Fetches notifications on mount and listens for WS events.
|
||||
|
||||
const html = window.html;
|
||||
const { useState, useEffect, useCallback, useRef } = window.hooks;
|
||||
|
||||
const BELL_SVG = html`
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>`;
|
||||
|
||||
export function NotificationBell({ onNavigate } = {}) {
|
||||
const [notifications, setNotifications] = useState([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef(null);
|
||||
|
||||
const unreadCount = notifications.filter(n => !n.read_at).length;
|
||||
|
||||
// ── Fetch notifications ─────────────
|
||||
const reload = useCallback(async () => {
|
||||
if (!window.sw?.api?.notifications?.list) return;
|
||||
try {
|
||||
const resp = await window.sw.api.notifications.list({ per_page: 20 });
|
||||
const items = Array.isArray(resp) ? resp
|
||||
: Array.isArray(resp?.data) ? resp.data
|
||||
: Array.isArray(resp?.notifications) ? resp.notifications
|
||||
: [];
|
||||
setNotifications(items);
|
||||
} catch (_) {}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { reload(); }, [reload]);
|
||||
|
||||
// ── WebSocket live updates ──────────
|
||||
useEffect(() => {
|
||||
if (!window.sw?.on) return;
|
||||
const handler = () => reload();
|
||||
window.sw.on('notification.created', handler);
|
||||
return () => window.sw.off?.('notification.created', handler);
|
||||
}, [reload]);
|
||||
|
||||
// ── Close on outside click ──────────
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function _close(e) {
|
||||
if (ref.current?.contains(e.target)) return;
|
||||
setOpen(false);
|
||||
}
|
||||
document.addEventListener('click', _close);
|
||||
return () => document.removeEventListener('click', _close);
|
||||
}, [open]);
|
||||
|
||||
// ── Mark as read ────────────────────
|
||||
const _markRead = useCallback(async (id) => {
|
||||
if (!window.sw?.api?.notifications?.markRead) return;
|
||||
try {
|
||||
await window.sw.api.notifications.markRead(id);
|
||||
setNotifications(prev => prev.map(n =>
|
||||
n.id === id ? { ...n, read_at: new Date().toISOString() } : n
|
||||
));
|
||||
} catch (_) {}
|
||||
}, []);
|
||||
|
||||
const _markAllRead = useCallback(async () => {
|
||||
if (window.sw?.api?.notifications?.markAllRead) {
|
||||
try {
|
||||
await window.sw.api.notifications.markAllRead();
|
||||
setNotifications(prev => prev.map(n => ({ ...n, read_at: n.read_at || new Date().toISOString() })));
|
||||
return;
|
||||
} catch (_) {}
|
||||
}
|
||||
// Fallback: mark one by one
|
||||
const unread = notifications.filter(n => !n.read_at);
|
||||
for (const n of unread) {
|
||||
await _markRead(n.id);
|
||||
}
|
||||
}, [notifications, _markRead]);
|
||||
|
||||
const _toggle = useCallback(() => {
|
||||
setOpen(v => !v);
|
||||
}, []);
|
||||
|
||||
// ── Click-to-navigate ────────────────
|
||||
const _onClick = useCallback((n) => {
|
||||
if (!n.read_at) _markRead(n.id);
|
||||
if (n.resource_type === 'channel' && n.resource_id && onNavigate) {
|
||||
onNavigate(n.resource_id);
|
||||
setOpen(false);
|
||||
}
|
||||
}, [_markRead, onNavigate]);
|
||||
|
||||
return html`
|
||||
<div class="sw-notification-bell" ref=${ref}>
|
||||
<button class="sw-notification-bell__trigger"
|
||||
onClick=${_toggle}
|
||||
title="Notifications"
|
||||
aria-label="Notifications"
|
||||
aria-expanded=${open}>
|
||||
${BELL_SVG}
|
||||
${unreadCount > 0 && html`
|
||||
<span class="sw-notification-bell__badge">${unreadCount > 9 ? '9+' : unreadCount}</span>`}
|
||||
</button>
|
||||
${open && html`
|
||||
<div class="sw-notification-bell__panel">
|
||||
<div class="sw-notification-bell__header">
|
||||
<span>Notifications</span>
|
||||
${unreadCount > 0 && html`
|
||||
<button class="sw-notification-bell__mark-all"
|
||||
onClick=${_markAllRead}>
|
||||
Mark all read
|
||||
</button>`}
|
||||
</div>
|
||||
<div class="sw-notification-bell__list">
|
||||
${notifications.length === 0 && html`
|
||||
<div class="sw-notification-bell__empty">No notifications</div>`}
|
||||
${notifications.map(n => {
|
||||
const navigable = n.resource_type === 'channel' && n.resource_id && onNavigate;
|
||||
return html`
|
||||
<div key=${n.id}
|
||||
class=${'sw-notification-bell__item'
|
||||
+ (n.read_at ? '' : ' sw-notification-bell__item--unread')
|
||||
+ (navigable ? ' sw-notification-bell__item--navigable' : '')}
|
||||
onClick=${() => _onClick(n)}>
|
||||
<div class="sw-notification-bell__item-text">${n.title || n.message || 'Notification'}</div>
|
||||
${n.body && html`<div class="sw-notification-bell__item-body">${n.body}</div>`}
|
||||
<div class="sw-notification-bell__item-time">
|
||||
${_timeAgo(n.created_at)}
|
||||
${navigable && html`<span class="sw-notification-bell__item-action">Open</span>`}
|
||||
</div>
|
||||
</div>`;
|
||||
})}
|
||||
</div>
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function _timeAgo(ts) {
|
||||
if (!ts) return '';
|
||||
const diff = Date.now() - new Date(ts).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return 'just now';
|
||||
if (mins < 60) return mins + 'm ago';
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return hrs + 'h ago';
|
||||
const days = Math.floor(hrs / 24);
|
||||
return days + 'd ago';
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
* extraItems — Additional menu items inserted after surface links
|
||||
*/
|
||||
const { html } = window;
|
||||
const { useState, useRef, useMemo } = hooks;
|
||||
const { useState, useRef, useMemo, useEffect } = hooks;
|
||||
|
||||
import { Avatar } from '../primitives/avatar.js';
|
||||
import { Menu } from '../primitives/menu.js';
|
||||
@@ -27,12 +27,23 @@ function _currentSurface() {
|
||||
|
||||
export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [extSurfaces, setExtSurfaces] = useState([]);
|
||||
const btnRef = useRef(null);
|
||||
|
||||
const sw = window.sw;
|
||||
const user = sw?.auth?.user;
|
||||
const authenticated = sw?.auth?.isAuthenticated;
|
||||
|
||||
// Fetch extension surfaces once on mount
|
||||
useEffect(() => {
|
||||
if (!sw?.api?.surfaces?.list) return;
|
||||
sw.api.surfaces.list().then(data => {
|
||||
const all = data || [];
|
||||
const CORE = new Set(['chat', 'admin', 'notes', 'settings', 'team-admin', 'workflow', 'workflow-landing']);
|
||||
setExtSurfaces(all.filter(s => !CORE.has(s.id)));
|
||||
}).catch(() => {});
|
||||
}, [authenticated]);
|
||||
|
||||
const items = useMemo(() => {
|
||||
const current = _currentSurface();
|
||||
const list = [];
|
||||
@@ -44,10 +55,9 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
{ key: 'notes', label: 'Notes', icon: '\ud83d\udcdd' },
|
||||
];
|
||||
|
||||
// Add extension surfaces from page data if available
|
||||
const extSurfaces = window.__EXTENSION_SURFACES__ || [];
|
||||
// Add extension surfaces fetched from API
|
||||
for (const ext of extSurfaces) {
|
||||
surfaces.push({ key: ext.id || ext.route, label: ext.title, icon: '\ud83e\udde9' });
|
||||
surfaces.push({ key: ext.id, label: ext.title, icon: '\ud83e\udde9', route: ext.route });
|
||||
}
|
||||
|
||||
const surfaceItems = surfaces
|
||||
@@ -72,18 +82,18 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
}
|
||||
|
||||
// Admin — requires admin role
|
||||
if ((!authenticated || sw?.isAdmin) && current !== 'admin') {
|
||||
if (authenticated && sw?.isAdmin && current !== 'admin') {
|
||||
list.push({ label: 'Admin', action: 'admin', icon: '\ud83d\udee1\ufe0f' });
|
||||
}
|
||||
|
||||
// Team Admin — requires admin role on at least one team
|
||||
const hasTeamAdmin = sw?.auth?.teams?.some(t => t.my_role === 'admin');
|
||||
if ((!authenticated || hasTeamAdmin) && current !== 'team-admin') {
|
||||
if (authenticated && hasTeamAdmin && current !== 'team-admin') {
|
||||
list.push({ label: 'Team Admin', action: 'team-admin', icon: '\ud83d\udc65' });
|
||||
}
|
||||
|
||||
// Debug — admin only
|
||||
if (!authenticated || sw?.isAdmin) {
|
||||
if (authenticated && sw?.isAdmin) {
|
||||
list.push({ label: 'Debug', action: 'debug', icon: '\ud83d\udc1b' });
|
||||
}
|
||||
|
||||
@@ -91,7 +101,7 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
list.push({ label: 'Sign Out', action: 'sign-out' });
|
||||
|
||||
return list;
|
||||
}, [user, authenticated, extraItems]);
|
||||
}, [user, authenticated, extraItems, extSurfaces]);
|
||||
|
||||
function handleSelect(action) {
|
||||
setOpen(false);
|
||||
@@ -101,7 +111,9 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
const BASE = window.__BASE__ || '';
|
||||
switch (action) {
|
||||
case 'sign-out':
|
||||
window.sw?.auth?.logout();
|
||||
window.sw?.auth?.logout().then(() => {
|
||||
location.href = BASE + '/login';
|
||||
});
|
||||
break;
|
||||
case 'debug':
|
||||
const dbg = document.getElementById('debugModal');
|
||||
@@ -110,8 +122,12 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
case 'chat':
|
||||
location.href = BASE + '/';
|
||||
break;
|
||||
default:
|
||||
location.href = BASE + '/' + action;
|
||||
default: {
|
||||
// Extension surfaces use /s/{id} routes
|
||||
const ext = extSurfaces.find(s => s.id === action);
|
||||
location.href = BASE + (ext?.route || '/' + action);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,17 +135,20 @@ export function UserMenu({ placement = 'down-right', onAction, extraItems }) {
|
||||
const avatar = user?.avatar || null;
|
||||
|
||||
return html`
|
||||
<button class="sw-user-menu__trigger" ref=${btnRef}
|
||||
onClick=${() => setOpen(!open)} aria-label="User menu">
|
||||
<${Avatar} src=${avatar} name=${displayName} size="sm" />
|
||||
</button>
|
||||
<${Menu}
|
||||
open=${open}
|
||||
anchor=${btnRef.current}
|
||||
direction=${placement}
|
||||
items=${items}
|
||||
onSelect=${handleSelect}
|
||||
onClose=${() => setOpen(false)}
|
||||
/>
|
||||
<div class="user-menu-wrap">
|
||||
<button class="user-btn" ref=${btnRef}
|
||||
onClick=${() => setOpen(!open)} aria-label="User menu">
|
||||
<${Avatar} src=${avatar} name=${displayName} size="sm" />
|
||||
<span class="sb-label">${displayName}</span>
|
||||
</button>
|
||||
<${Menu}
|
||||
open=${open}
|
||||
anchor=${btnRef.current}
|
||||
direction=${placement}
|
||||
items=${items}
|
||||
onSelect=${handleSelect}
|
||||
onClose=${() => setOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -18,8 +18,8 @@ export default function CapabilitiesSection() {
|
||||
sw.api.admin.models.overrides(),
|
||||
sw.api.admin.models.list().catch(() => []),
|
||||
]);
|
||||
setOverrides(Array.isArray(o) ? o : o.data || []);
|
||||
setModels(Array.isArray(m) ? m : m.models || m.data || []);
|
||||
setOverrides(o.data || []);
|
||||
setModels(m || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Admin > System > Channels (Archived)
|
||||
* Admin > System > Channels (Archived + Retention)
|
||||
*/
|
||||
const { html } = window;
|
||||
const { useState, useEffect, useCallback } = hooks;
|
||||
@@ -7,21 +7,34 @@ const { useState, useEffect, useCallback } = hooks;
|
||||
export default function ChannelsSection() {
|
||||
const [channels, setChannels] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [retentionMode, setRetentionMode] = useState('');
|
||||
const [retentionTTL, setRetentionTTL] = useState(0);
|
||||
const [ttlDraft, setTTLDraft] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.channels.archived();
|
||||
setChannels(data.channels || data.data || []);
|
||||
setChannels(data.data || []);
|
||||
setTotal(data.total || 0);
|
||||
setRetentionMode(data.retention_mode || '');
|
||||
const ttl = data.retention_ttl_days || 0;
|
||||
setRetentionTTL(ttl);
|
||||
setTTLDraft(String(ttl));
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
async function saveTTL() {
|
||||
const val = parseInt(ttlDraft, 10);
|
||||
if (isNaN(val) || val < 0) { sw.toast('TTL must be 0 or more', 'error'); return; }
|
||||
try {
|
||||
await sw.api.admin.settings.update('retention_ttl_days', { value: { value: val } });
|
||||
setRetentionTTL(val);
|
||||
sw.toast('Retention TTL saved', 'success');
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function purge(id, title) {
|
||||
const ok = await sw.confirm(`Permanently delete "${title || id}"? This cannot be undone.`, true);
|
||||
if (!ok) return;
|
||||
@@ -38,9 +51,27 @@ export default function ChannelsSection() {
|
||||
<div>
|
||||
<div class="stat-cards-grid" style="margin-bottom:16px;">
|
||||
<div class="stat-card"><div class="stat-value">${total}</div><div class="stat-label">Archived</div></div>
|
||||
<div class="stat-card"><div class="stat-value">${retentionMode || '\u2014'}</div><div class="stat-label">Retention Mode</div></div>
|
||||
<div class="stat-card"><div class="stat-value">${retentionTTL || 'Off'}</div><div class="stat-label">Retention TTL (days)</div></div>
|
||||
</div>
|
||||
|
||||
<div class="admin-section" style="margin-bottom:20px;">
|
||||
<h4 style="margin:0 0 8px;">Retention Policy</h4>
|
||||
<p class="text-muted" style="font-size:12px;margin:0 0 8px;">
|
||||
Channels are archived on delete and purged after this many days.
|
||||
Only Personal (BYOK) provider channels are exempt. Set to 0 to disable retention.
|
||||
</p>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<input type="number" min="0" value=${ttlDraft}
|
||||
onInput=${e => setTTLDraft(e.target.value)}
|
||||
style="width:80px;padding:6px 8px;background:var(--bg-2);color:var(--text);border:1px solid var(--border);border-radius:4px;"
|
||||
placeholder="0" />
|
||||
<span class="text-muted" style="font-size:12px;">days</span>
|
||||
<button class="btn-small" onClick=${saveTTL}
|
||||
disabled=${String(retentionTTL) === ttlDraft}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 style="margin:0 0 8px;">Archived Channels</h4>
|
||||
<div class="admin-list">
|
||||
${channels.length === 0 && html`<div class="empty-hint">No archived channels</div>`}
|
||||
${channels.map(c => html`
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function GroupsSection() {
|
||||
const loadGroups = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.groups.list();
|
||||
setGroups(Array.isArray(data) ? data : data.data || []);
|
||||
setGroups(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
@@ -41,10 +41,10 @@ export default function GroupsSection() {
|
||||
sw.api.admin.users.list(),
|
||||
sw.api.admin.models.list().catch(() => []),
|
||||
]);
|
||||
setMembers(Array.isArray(m) ? m : m.data || []);
|
||||
setMembers(m || []);
|
||||
setAllPerms(p.permissions || []);
|
||||
setAllUsers(Array.isArray(u) ? u : u.users || []);
|
||||
setAllModels(Array.isArray(models) ? models : models.models || models.data || []);
|
||||
setAllUsers(u || []);
|
||||
setAllModels(models || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@ export default function GroupsSection() {
|
||||
sw.toast('Member added', 'success');
|
||||
setShowAddMember(false);
|
||||
const m = await sw.api.admin.groups.members(detail.id);
|
||||
setMembers(Array.isArray(m) ? m : m.data || []);
|
||||
setMembers(m || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function HealthSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.providers.health();
|
||||
setProviders(Array.isArray(data) ? data : data.data || []);
|
||||
setProviders(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -46,30 +46,32 @@ const CATEGORY_META = {
|
||||
};
|
||||
|
||||
// ── Lazy section imports ────────────────────
|
||||
// Version query busts browser module cache on upgrades.
|
||||
const _v = window.__VERSION__ ? `?v=${window.__VERSION__}` : '';
|
||||
const sectionModules = {
|
||||
users: () => import('./users.js'),
|
||||
teams: () => import('./teams.js'),
|
||||
groups: () => import('./groups.js'),
|
||||
providers: () => import('./providers.js'),
|
||||
models: () => import('./models.js'),
|
||||
personas: () => import('./personas.js'),
|
||||
roles: () => import('./roles.js'),
|
||||
knowledgeBases: () => import('./knowledge.js'),
|
||||
memory: () => import('./memory.js'),
|
||||
workflows: () => import('./workflows.js'),
|
||||
tasks: () => import('./tasks.js'),
|
||||
health: () => import('./health.js'),
|
||||
routing: () => import('./routing.js'),
|
||||
capabilities: () => import('./capabilities.js'),
|
||||
settings: () => import('./settings.js'),
|
||||
storage: () => import('./storage.js'),
|
||||
packages: () => import('./packages.js'),
|
||||
channels: () => import('./channels.js'),
|
||||
broadcast: () => import('./broadcast.js'),
|
||||
dashboard: () => import('./dashboard.js'),
|
||||
usage: () => import('./usage.js'),
|
||||
audit: () => import('./audit.js'),
|
||||
stats: () => import('./stats.js'),
|
||||
users: () => import(`./users.js${_v}`),
|
||||
teams: () => import(`./teams.js${_v}`),
|
||||
groups: () => import(`./groups.js${_v}`),
|
||||
providers: () => import(`./providers.js${_v}`),
|
||||
models: () => import(`./models.js${_v}`),
|
||||
personas: () => import(`./personas.js${_v}`),
|
||||
roles: () => import(`./roles.js${_v}`),
|
||||
knowledgeBases: () => import(`./knowledge.js${_v}`),
|
||||
memory: () => import(`./memory.js${_v}`),
|
||||
workflows: () => import(`./workflows.js${_v}`),
|
||||
tasks: () => import(`./tasks.js${_v}`),
|
||||
health: () => import(`./health.js${_v}`),
|
||||
routing: () => import(`./routing.js${_v}`),
|
||||
capabilities: () => import(`./capabilities.js${_v}`),
|
||||
settings: () => import(`./settings.js${_v}`),
|
||||
storage: () => import(`./storage.js${_v}`),
|
||||
packages: () => import(`./packages.js${_v}`),
|
||||
channels: () => import(`./channels.js${_v}`),
|
||||
broadcast: () => import(`./broadcast.js${_v}`),
|
||||
dashboard: () => import(`./dashboard.js${_v}`),
|
||||
usage: () => import(`./usage.js${_v}`),
|
||||
audit: () => import(`./audit.js${_v}`),
|
||||
stats: () => import(`./stats.js${_v}`),
|
||||
};
|
||||
|
||||
// ── Derive category from section ────────────
|
||||
|
||||
@@ -12,8 +12,8 @@ export default function KnowledgeSection() {
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.knowledge.list();
|
||||
setKbs(Array.isArray(data) ? data : data.data || []);
|
||||
const resp = await sw.api.knowledge.list();
|
||||
setKbs(resp.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
@@ -24,7 +24,7 @@ export default function KnowledgeSection() {
|
||||
setDetail(kb);
|
||||
try {
|
||||
const d = await sw.api.knowledge.documents(kb.id);
|
||||
setDocs(Array.isArray(d) ? d : d.data || []);
|
||||
setDocs(d.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@ export default function KnowledgeSection() {
|
||||
await sw.api.knowledge.upload(detail.id, file);
|
||||
sw.toast('Document uploaded', 'success');
|
||||
const d = await sw.api.knowledge.documents(detail.id);
|
||||
setDocs(Array.isArray(d) ? d : d.data || []);
|
||||
setDocs(d.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
};
|
||||
input.click();
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function MemorySection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.memories.pending();
|
||||
setPending(Array.isArray(data) ? data : data.data || []);
|
||||
setPending(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function ModelsSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.models.list();
|
||||
setModels(Array.isArray(data) ? data : data.models || data.data || []);
|
||||
setModels(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -1,69 +1,274 @@
|
||||
/**
|
||||
* Admin > System > Packages (Extensions)
|
||||
* Admin > System > Packages
|
||||
*
|
||||
* Full package lifecycle: list, install (upload + registry), enable/disable,
|
||||
* settings, export, delete. Uses /api/v1/admin/packages endpoints.
|
||||
*/
|
||||
const { html } = window;
|
||||
const { useState, useEffect, useCallback } = hooks;
|
||||
|
||||
export default function PackagesSection() {
|
||||
const [extensions, setExtensions] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const TYPE_OPTIONS = ['all', 'surface', 'extension', 'full', 'workflow'];
|
||||
const CORE_IDS = new Set(['chat', 'admin']);
|
||||
|
||||
function typeBadge(type) {
|
||||
const cls = type === 'surface' ? 'badge-active'
|
||||
: type === 'extension' ? 'badge-pending' : '';
|
||||
return html`<span class="badge ${cls}">${type || '?'}</span>`;
|
||||
}
|
||||
|
||||
function tierBadge(tier) {
|
||||
const cls = tier === 'browser' ? 'badge-active' : tier === 'starlark' ? 'badge-pending' : '';
|
||||
return html`<span class="badge ${cls}">${tier || 'unknown'}</span>`;
|
||||
}
|
||||
|
||||
function sourceBadge(source) {
|
||||
if (!source || source === 'extension') return null;
|
||||
const cls = source === 'core' ? 'badge-active' : source === 'registry' ? 'badge-pending' : '';
|
||||
return html`<span class="badge ${cls}">${source}</span>`;
|
||||
}
|
||||
|
||||
export default function PackagesSection() {
|
||||
const [packages, setPackages] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [typeFilter, setTypeFilter] = useState('all');
|
||||
const [expandedId, setExpandedId] = useState(null);
|
||||
const [pkgSettings, setPkgSettings] = useState(null);
|
||||
const [settingsDraft, setSettingsDraft] = useState({});
|
||||
const [registryOpen, setRegistryOpen] = useState(false);
|
||||
const [registryPkgs, setRegistryPkgs] = useState([]);
|
||||
const [registryLoading, setRegistryLoading] = useState(false);
|
||||
const [installing, setInstalling] = useState(false);
|
||||
|
||||
const BASE = window.__BASE__ || '';
|
||||
|
||||
// ── Load packages ───────────────────────────
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.extensions.list();
|
||||
setExtensions(Array.isArray(data) ? data : data.data || []);
|
||||
const opts = typeFilter !== 'all' ? { type: typeFilter } : undefined;
|
||||
const data = await sw.api.admin.packages.list(opts);
|
||||
setPackages(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
}, [typeFilter]);
|
||||
|
||||
useEffect(() => { load(); }, []);
|
||||
useEffect(() => { setLoading(true); load(); }, [typeFilter]);
|
||||
|
||||
async function toggleEnabled(ext) {
|
||||
// ── Actions ─────────────────────────────────
|
||||
async function toggleEnabled(pkg) {
|
||||
if (CORE_IDS.has(pkg.id)) return;
|
||||
try {
|
||||
await sw.api.admin.extensions.update(ext.id, { is_enabled: !ext.is_enabled });
|
||||
sw.toast(`Extension ${ext.is_enabled ? 'disabled' : 'enabled'}`, 'success');
|
||||
if (pkg.enabled) {
|
||||
await sw.api.admin.packages.disable(pkg.id);
|
||||
sw.toast(`${pkg.title || pkg.id} disabled`, 'success');
|
||||
} else {
|
||||
await sw.api.admin.packages.enable(pkg.id);
|
||||
sw.toast(`${pkg.title || pkg.id} enabled`, 'success');
|
||||
}
|
||||
load();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function deleteExt(id) {
|
||||
const ok = await sw.confirm('Delete this extension?', true);
|
||||
async function deletePkg(pkg) {
|
||||
if (pkg.source === 'core') return;
|
||||
const ok = await sw.confirm(`Delete "${pkg.title || pkg.id}"? This cannot be undone.`, true);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await sw.api.admin.extensions.del(id);
|
||||
sw.toast('Extension deleted', 'success');
|
||||
await sw.api.admin.packages.del(pkg.id);
|
||||
sw.toast('Package deleted', 'success');
|
||||
if (expandedId === pkg.id) { setExpandedId(null); setPkgSettings(null); }
|
||||
load();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
function tierBadge(tier) {
|
||||
const cls = tier === 'browser' ? 'badge-active' : tier === 'starlark' ? 'badge-pending' : '';
|
||||
return html`<span class="badge ${cls}">${tier || 'unknown'}</span>`;
|
||||
function uploadPackage() {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.pkg,.surface,.zip';
|
||||
input.onchange = async () => {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
setInstalling(true);
|
||||
try {
|
||||
await sw.api.admin.packages.install(file);
|
||||
sw.toast('Package installed', 'success');
|
||||
load();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setInstalling(false); }
|
||||
};
|
||||
input.click();
|
||||
}
|
||||
|
||||
function exportPkg(id) {
|
||||
window.open(`${BASE}/api/v1/admin/packages/${id}/export`, '_blank');
|
||||
}
|
||||
|
||||
// ── Settings drawer ─────────────────────────
|
||||
async function toggleSettings(pkgId) {
|
||||
if (expandedId === pkgId) {
|
||||
setExpandedId(null); setPkgSettings(null); setSettingsDraft({});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = await sw.api.admin.packages.settings(pkgId);
|
||||
const settings = data?.data || {};
|
||||
setPkgSettings(settings);
|
||||
setSettingsDraft({ ...settings });
|
||||
setExpandedId(pkgId);
|
||||
} catch (e) {
|
||||
sw.toast(e.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSettings(pkgId) {
|
||||
try {
|
||||
await sw.api.admin.packages.updateSettings(pkgId, settingsDraft);
|
||||
sw.toast('Settings saved', 'success');
|
||||
setPkgSettings({ ...settingsDraft });
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
// ── Registry ────────────────────────────────
|
||||
async function toggleRegistry() {
|
||||
if (registryOpen) { setRegistryOpen(false); return; }
|
||||
setRegistryOpen(true);
|
||||
setRegistryLoading(true);
|
||||
try {
|
||||
const data = await sw.api.admin.packages.registry();
|
||||
setRegistryPkgs(data?.data || []);
|
||||
} catch (e) {
|
||||
sw.toast('Registry unavailable: ' + e.message, 'error');
|
||||
setRegistryPkgs([]);
|
||||
}
|
||||
finally { setRegistryLoading(false); }
|
||||
}
|
||||
|
||||
async function installFromRegistry(url) {
|
||||
try {
|
||||
await sw.api.admin.packages.registryInstall(url);
|
||||
sw.toast('Package installed from registry', 'success');
|
||||
load();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
// ── Render ───────────────────────────────────
|
||||
if (loading) return html`<div class="settings-placeholder">Loading\u2026</div>`;
|
||||
|
||||
const enabled = packages.filter(p => p.enabled).length;
|
||||
const hasManifestSettings = (pkg) =>
|
||||
pkg.manifest?.settings || pkg.package_settings;
|
||||
|
||||
return html`
|
||||
<div>
|
||||
${/* ── Stat cards ─────────────── */``}
|
||||
<div class="stat-cards-grid" style="margin-bottom:16px;">
|
||||
<div class="stat-card"><div class="stat-value">${packages.length}</div><div class="stat-label">Total</div></div>
|
||||
<div class="stat-card"><div class="stat-value">${enabled}</div><div class="stat-label">Enabled</div></div>
|
||||
</div>
|
||||
|
||||
${/* ── Action bar ─────────────── */``}
|
||||
<div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px;">
|
||||
${TYPE_OPTIONS.map(t => html`
|
||||
<button key=${t}
|
||||
class="btn-small ${typeFilter === t ? 'btn-primary' : ''}"
|
||||
onClick=${() => setTypeFilter(t)}
|
||||
style="text-transform:capitalize;">${t}</button>
|
||||
`)}
|
||||
<span style="flex:1;" />
|
||||
<button class="btn-small" onClick=${uploadPackage} disabled=${installing}>
|
||||
${installing ? 'Installing\u2026' : 'Install Package'}
|
||||
</button>
|
||||
<button class="btn-small" onClick=${toggleRegistry}>
|
||||
${registryOpen ? 'Close Registry' : 'Browse Registry'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
${/* ── Package list ────────────── */``}
|
||||
<div class="admin-list">
|
||||
${extensions.length === 0 && html`<div class="empty-hint">No extensions installed</div>`}
|
||||
${extensions.map(ext => html`
|
||||
<div class="admin-surface-row" key=${ext.id}>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<strong>${ext.name}</strong>
|
||||
<span class="text-muted" style="margin-left:6px;font-size:11px;">v${ext.version || '?'}</span>
|
||||
${' '}${tierBadge(ext.tier)}
|
||||
${ext.is_system && html`<span class="badge" style="margin-left:4px;">system</span>`}
|
||||
</div>
|
||||
<div class="admin-actions-cell">
|
||||
<button class="btn-small" onClick=${() => toggleEnabled(ext)}>
|
||||
${ext.is_enabled ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
${!ext.is_system && html`<button class="btn-small btn-danger" onClick=${() => deleteExt(ext.id)}>Delete</button>`}
|
||||
${packages.length === 0 && html`<div class="empty-hint">No packages found</div>`}
|
||||
${packages.map(pkg => html`
|
||||
<div key=${pkg.id}>
|
||||
<div class="admin-surface-row">
|
||||
<div style="flex:1;min-width:0;">
|
||||
<strong>${pkg.title || pkg.id}</strong>
|
||||
<span class="text-muted" style="margin-left:6px;font-size:11px;">v${pkg.version || '?'}</span>
|
||||
${' '}${typeBadge(pkg.type)}
|
||||
${' '}${tierBadge(pkg.tier)}
|
||||
${sourceBadge(pkg.source)}
|
||||
${pkg.is_system && html`<span class="badge" style="margin-left:4px;">system</span>`}
|
||||
</div>
|
||||
<div class="admin-actions-cell">
|
||||
<button class="btn-small"
|
||||
onClick=${() => toggleEnabled(pkg)}
|
||||
disabled=${CORE_IDS.has(pkg.id)}>
|
||||
${pkg.enabled ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
${hasManifestSettings(pkg) && html`
|
||||
<button class="btn-small" onClick=${() => toggleSettings(pkg.id)}>
|
||||
${expandedId === pkg.id ? 'Close' : 'Settings'}
|
||||
</button>
|
||||
`}
|
||||
<button class="btn-small" onClick=${() => exportPkg(pkg.id)}>Export</button>
|
||||
${pkg.source !== 'core' && !pkg.is_system && html`
|
||||
<button class="btn-small btn-danger" onClick=${() => deletePkg(pkg)}>Delete</button>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${/* ── Inline settings drawer ── */``}
|
||||
${expandedId === pkg.id && pkgSettings != null && html`
|
||||
<div style="padding:8px 12px 12px 24px;background:var(--bg-2);border-bottom:1px solid var(--border);">
|
||||
${Object.keys(pkgSettings).length === 0
|
||||
? html`<span class="text-muted" style="font-size:12px;">No configurable settings</span>`
|
||||
: html`
|
||||
${Object.entries(settingsDraft).map(([k, v]) => html`
|
||||
<div key=${k} style="display:flex;gap:8px;align-items:center;margin-bottom:6px;">
|
||||
<label style="min-width:120px;font-size:12px;color:var(--text-muted);">${k}</label>
|
||||
<input type="text"
|
||||
value=${v ?? ''}
|
||||
onInput=${e => setSettingsDraft(prev => ({ ...prev, [k]: e.target.value }))}
|
||||
style="flex:1;padding:4px 8px;background:var(--bg-1,var(--bg));color:var(--text);border:1px solid var(--border);border-radius:4px;font-size:12px;" />
|
||||
</div>
|
||||
`)}
|
||||
<button class="btn-small" style="margin-top:4px;" onClick=${() => saveSettings(pkg.id)}>Save</button>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
${/* ── Registry panel ──────────── */``}
|
||||
${registryOpen && html`
|
||||
<div class="admin-section" style="margin-top:20px;padding:12px;border:1px solid var(--border);border-radius:6px;">
|
||||
<h4 style="margin:0 0 8px;">Package Registry</h4>
|
||||
${registryLoading
|
||||
? html`<div class="settings-placeholder">Loading registry\u2026</div>`
|
||||
: registryPkgs.length === 0
|
||||
? html`<div class="empty-hint">No packages available in registry</div>`
|
||||
: html`
|
||||
<div class="admin-list">
|
||||
${registryPkgs.map(rp => html`
|
||||
<div class="admin-surface-row" key=${rp.id}>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<strong>${rp.title || rp.id}</strong>
|
||||
<span class="text-muted" style="margin-left:6px;font-size:11px;">v${rp.version || '?'}</span>
|
||||
${rp.description && html`
|
||||
<div class="text-muted" style="font-size:11px;margin-top:2px;">${rp.description}</div>
|
||||
`}
|
||||
</div>
|
||||
<div class="admin-actions-cell">
|
||||
${typeBadge(rp.type)}
|
||||
<button class="btn-small btn-primary"
|
||||
onClick=${() => installFromRegistry(rp.download_url)}>Install</button>
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@ export default function PersonasSection() {
|
||||
sw.api.admin.models.list().catch(() => []),
|
||||
sw.api.knowledge.list().catch(() => []),
|
||||
]);
|
||||
setPersonas(Array.isArray(p) ? p : p.data || []);
|
||||
setModels(Array.isArray(m) ? m : m.models || m.data || []);
|
||||
setKbs(Array.isArray(k) ? k : k.data || []);
|
||||
setPersonas(p || []);
|
||||
setModels(m || []);
|
||||
setKbs(k.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -16,8 +16,8 @@ export default function ProvidersSection() {
|
||||
sw.api.admin.configs.list(),
|
||||
sw.api.admin.providers.types(),
|
||||
]);
|
||||
setConfigs(Array.isArray(c) ? c : c.configs || c.data || []);
|
||||
setProviderTypes(t.types || t.data || []);
|
||||
setConfigs(c || []);
|
||||
setProviderTypes(t || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
@@ -82,7 +82,7 @@ export default function ProvidersSection() {
|
||||
</div>
|
||||
<div class="form-group"><label>Type</label>
|
||||
<select name="provider">
|
||||
${providerTypes.map(t => html`<option key=${t.name} value=${t.name} selected=${editing !== 'new' && editing.provider === t.name}>${t.display_name || t.name}</option>`)}
|
||||
${providerTypes.map(t => html`<option key=${t.id} value=${t.id} selected=${editing !== 'new' && editing.provider === t.id}>${t.display_name || t.name}</option>`)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ const { html } = window;
|
||||
const { useState, useEffect, useCallback } = hooks;
|
||||
|
||||
export default function RolesSection() {
|
||||
const [roles, setRoles] = useState([]);
|
||||
const [roles, setRoles] = useState({});
|
||||
const [models, setModels] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dirty, setDirty] = useState({});
|
||||
@@ -16,8 +16,8 @@ export default function RolesSection() {
|
||||
sw.api.admin.roles.list(),
|
||||
sw.api.admin.models.list().catch(() => []),
|
||||
]);
|
||||
setRoles(r.roles || r.data || (Array.isArray(r) ? r : []));
|
||||
setModels(Array.isArray(m) ? m : m.models || m.data || []);
|
||||
setRoles(r || {});
|
||||
setModels(m || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
@@ -49,10 +49,8 @@ export default function RolesSection() {
|
||||
|
||||
return html`
|
||||
<div>
|
||||
${roles.length === 0 && html`<div class="empty-hint">No roles configured</div>`}
|
||||
${roles.map(r => {
|
||||
const name = typeof r === 'string' ? r : r.name || r.role;
|
||||
const config = typeof r === 'object' ? r : {};
|
||||
${Object.keys(roles).length === 0 && html`<div class="empty-hint">No roles configured</div>`}
|
||||
${Object.entries(roles).map(([name, config]) => {
|
||||
const changes = dirty[name] || {};
|
||||
const primary = changes.primary_model ?? config.primary_model ?? '';
|
||||
const fallback = changes.fallback_model ?? config.fallback_model ?? '';
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function RoutingSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.routing.policies();
|
||||
setPolicies(Array.isArray(data) ? data : data.data || []);
|
||||
setPolicies(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -18,31 +18,38 @@ export default function SettingsSection() {
|
||||
sw.api.admin.models.list().catch(() => []),
|
||||
sw.api.admin.vault.status().catch(() => null),
|
||||
]);
|
||||
const settings = s || {};
|
||||
const raw = s || {};
|
||||
const pol = raw.policies || {};
|
||||
const cfg_ = raw.settings || {};
|
||||
setCfg({
|
||||
allow_registration: settings.policies?.allow_registration === 'true',
|
||||
registration_default_state: settings.registration_default_state || 'pending',
|
||||
system_prompt: settings.system_prompt || '',
|
||||
default_model: settings.default_model || '',
|
||||
allow_user_byok: settings.policies?.allow_user_byok === 'true',
|
||||
allow_user_personas: settings.policies?.allow_user_personas === 'true',
|
||||
allow_kb_direct_access: settings.policies?.allow_kb_direct_access === 'true',
|
||||
banner_enabled: !!settings.banner?.enabled,
|
||||
banner_text: settings.banner?.text || '',
|
||||
banner_bg: settings.banner?.bg || '#007a33',
|
||||
banner_fg: settings.banner?.fg || '#ffffff',
|
||||
banner_position: settings.banner?.position || 'both',
|
||||
search_provider: settings.search_provider || 'duckduckgo',
|
||||
search_endpoint: settings.search_endpoint || '',
|
||||
search_api_key: settings.search_api_key || '',
|
||||
search_max_results: settings.search_max_results || 5,
|
||||
compaction_enabled: !!settings.auto_compaction_enabled,
|
||||
compaction_threshold: settings.compaction_threshold || 70,
|
||||
compaction_cooldown: settings.compaction_cooldown || 30,
|
||||
memory_extraction_enabled: !!settings.memory_extraction_enabled,
|
||||
memory_auto_approve: !!settings.memory_auto_approve,
|
||||
allow_registration: pol.allow_registration === 'true',
|
||||
registration_default_state: cfg_.registration_default_state || 'pending',
|
||||
system_prompt: cfg_.system_prompt || '',
|
||||
default_model: pol.default_model || '',
|
||||
allow_user_byok: pol.allow_user_byok === 'true',
|
||||
allow_user_personas: pol.allow_user_personas === 'true',
|
||||
allow_kb_direct_access: pol.allow_kb_direct_access === 'true' || pol.kb_direct_access === 'true',
|
||||
banner_enabled: !!cfg_.banner?.enabled,
|
||||
banner_text: cfg_.banner?.text || '',
|
||||
banner_bg: cfg_.banner?.bg || '#007a33',
|
||||
banner_fg: cfg_.banner?.fg || '#ffffff',
|
||||
banner_position: cfg_.banner?.position || 'both',
|
||||
message_enabled: !!cfg_.message?.enabled,
|
||||
message_text: cfg_.message?.text || '',
|
||||
message_variant: cfg_.message?.variant || 'info',
|
||||
footer_enabled: !!cfg_.footer?.enabled,
|
||||
footer_text: cfg_.footer?.text || '',
|
||||
search_provider: cfg_.search_provider || 'duckduckgo',
|
||||
search_endpoint: cfg_.search_endpoint || '',
|
||||
search_api_key: cfg_.search_api_key || '',
|
||||
search_max_results: cfg_.search_max_results || 5,
|
||||
compaction_enabled: !!cfg_.auto_compaction_enabled,
|
||||
compaction_threshold: cfg_.compaction_threshold || 70,
|
||||
compaction_cooldown: cfg_.compaction_cooldown || 30,
|
||||
memory_extraction_enabled: !!cfg_.memory_extraction_enabled,
|
||||
memory_auto_approve: !!cfg_.memory_auto_approve,
|
||||
});
|
||||
setModels(Array.isArray(m) ? m : m.models || m.data || []);
|
||||
setModels(m || []);
|
||||
setVault(v);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
@@ -75,6 +82,19 @@ export default function SettingsSection() {
|
||||
position: cfg.banner_position,
|
||||
}});
|
||||
|
||||
// Message bar
|
||||
await sw.api.admin.settings.update('message', { value: {
|
||||
enabled: cfg.message_enabled,
|
||||
text: cfg.message_text,
|
||||
variant: cfg.message_variant,
|
||||
}});
|
||||
|
||||
// Footer
|
||||
await sw.api.admin.settings.update('footer', { value: {
|
||||
enabled: cfg.footer_enabled,
|
||||
text: cfg.footer_text,
|
||||
}});
|
||||
|
||||
// Search
|
||||
await sw.api.admin.settings.update('search_provider', { value: cfg.search_provider });
|
||||
if (cfg.search_provider === 'searxng') {
|
||||
@@ -154,6 +174,32 @@ export default function SettingsSection() {
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="settings-section"><h3>Message Bar</h3>
|
||||
<label class="toggle-label"><input type="checkbox" checked=${cfg.message_enabled} onChange=${e => set('message_enabled', e.target.checked)} /><span class="toggle-track"></span><span>Show dismissible message bar</span></label>
|
||||
${cfg.message_enabled && html`
|
||||
<div style="margin-top:8px;">
|
||||
<div class="form-group"><label>Text</label><input value=${cfg.message_text} onInput=${e => set('message_text', e.target.value)} placeholder="System maintenance scheduled..." /></div>
|
||||
<div class="form-group"><label>Variant</label>
|
||||
<select value=${cfg.message_variant} onChange=${e => set('message_variant', e.target.value)}>
|
||||
<option value="info">Info</option>
|
||||
<option value="warn">Warning</option>
|
||||
<option value="error">Error</option>
|
||||
<option value="success">Success</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="settings-section"><h3>Footer</h3>
|
||||
<label class="toggle-label"><input type="checkbox" checked=${cfg.footer_enabled} onChange=${e => set('footer_enabled', e.target.checked)} /><span class="toggle-track"></span><span>Show footer bar</span></label>
|
||||
${cfg.footer_enabled && html`
|
||||
<div style="margin-top:8px;">
|
||||
<div class="form-group"><label>Text</label><input value=${cfg.footer_text} onInput=${e => set('footer_text', e.target.value)} placeholder="Powered by Chat Switchboard" /></div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="settings-section"><h3>Web Search</h3>
|
||||
<div class="form-group"><label>Provider</label>
|
||||
<select value=${cfg.search_provider} onChange=${e => set('search_provider', e.target.value)}>
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function TasksSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.tasks.list();
|
||||
setTasks(Array.isArray(data) ? data : data.data || []);
|
||||
setTasks(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
@@ -50,7 +50,7 @@ export default function TasksSection() {
|
||||
}
|
||||
try {
|
||||
const data = await sw.api.tasks.runs(taskId);
|
||||
const runs = Array.isArray(data) ? data : data.data || [];
|
||||
const runs = data || [];
|
||||
setExpandedRuns(prev => ({ ...prev, [taskId]: runs }));
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function TeamsSection() {
|
||||
const loadTeams = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.teams.list();
|
||||
setTeams(Array.isArray(data) ? data : data.data || []);
|
||||
setTeams(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
@@ -30,8 +30,8 @@ export default function TeamsSection() {
|
||||
sw.api.admin.teams.members(team.id),
|
||||
sw.api.admin.users.list(),
|
||||
]);
|
||||
setMembers(Array.isArray(m) ? m : m.data || []);
|
||||
const uList = Array.isArray(u) ? u : u.users || [];
|
||||
setMembers(m || []);
|
||||
const uList = u || [];
|
||||
setAllUsers(uList);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
@@ -66,7 +66,7 @@ export default function TeamsSection() {
|
||||
sw.toast('Member added', 'success');
|
||||
setShowAddMember(false);
|
||||
const m = await sw.api.admin.teams.members(detail.id);
|
||||
setMembers(Array.isArray(m) ? m : m.data || []);
|
||||
setMembers(m || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function UsageSection() {
|
||||
sw.api.admin.pricing.list().catch(() => []),
|
||||
]);
|
||||
setUsage(u);
|
||||
setPricing(Array.isArray(p) ? p : p.data || []);
|
||||
setPricing(p || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
const { html } = window;
|
||||
const { useState, useEffect, useCallback } = hooks;
|
||||
|
||||
function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
|
||||
|
||||
export default function UsersSection() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [search, setSearch] = useState('');
|
||||
@@ -14,8 +12,8 @@ export default function UsersSection() {
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.admin.users.list();
|
||||
setUsers(Array.isArray(data) ? data : data.users || []);
|
||||
const resp = await sw.api.admin.users.list();
|
||||
setUsers(resp.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function WorkflowsSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.workflows.list();
|
||||
setWorkflows(Array.isArray(data) ? data : data.data || []);
|
||||
setWorkflows(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
104
src/js/sw/surfaces/chat/channel-members-panel.js
Normal file
104
src/js/sw/surfaces/chat/channel-members-panel.js
Normal file
@@ -0,0 +1,104 @@
|
||||
// ==========================================
|
||||
// Chat Surface — Channel Members Panel
|
||||
// ==========================================
|
||||
// Drawer showing channel participants with role management.
|
||||
// Uses Drawer primitive + channels.participants API.
|
||||
|
||||
import { Drawer } from '../../primitives/drawer.js';
|
||||
import { UserPicker } from '../../primitives/user-picker.js';
|
||||
|
||||
const { html } = window;
|
||||
const { useState, useEffect, useCallback } = hooks;
|
||||
|
||||
const ROLES = ['owner', 'member', 'observer'];
|
||||
|
||||
function _initials(name) {
|
||||
if (!name) return '?';
|
||||
return name.split(/\s+/).map(w => w[0]).join('').toUpperCase().slice(0, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{ open: boolean, channelId: string, onClose: () => void }} props
|
||||
*/
|
||||
export function ChannelMembersPanel({ open, channelId, onClose }) {
|
||||
const [members, setMembers] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [adding, setAdding] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!channelId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await sw.api.channels.participants(channelId);
|
||||
setMembers(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [channelId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && channelId) load();
|
||||
}, [open, channelId, load]);
|
||||
|
||||
async function updateRole(pid, role) {
|
||||
try {
|
||||
await sw.api.channels.updateParticipant(channelId, pid, { role });
|
||||
sw.toast('Role updated', 'success');
|
||||
load();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
async function remove(pid) {
|
||||
const ok = await sw.confirm('Remove this participant?', true);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await sw.api.channels.removeParticipant(channelId, pid);
|
||||
sw.toast('Participant removed', 'success');
|
||||
load();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
const _onUserSelect = useCallback(async (user) => {
|
||||
setAdding(true);
|
||||
try {
|
||||
await sw.api.channels.addParticipant(channelId, {
|
||||
participant_type: 'user',
|
||||
participant_id: user.id,
|
||||
});
|
||||
sw.toast('Participant added', 'success');
|
||||
load();
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setAdding(false); }
|
||||
}, [channelId, load]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return html`
|
||||
<${Drawer} open=${open} side="right" width="340px" title="Members" onClose=${onClose}>
|
||||
${loading && !members.length
|
||||
? html`<div class="sw-panel-loading">Loading\u2026</div>`
|
||||
: html`
|
||||
<div class="sw-members-list">
|
||||
${members.map(m => html`
|
||||
<div class="sw-members-row" key=${m.id}>
|
||||
<span class="sw-members-avatar">${_initials(m.display_name || m.participant_id)}</span>
|
||||
<div class="sw-members-info">
|
||||
<span class="sw-members-name">${m.display_name || m.participant_id}</span>
|
||||
<span class="sw-members-type">${m.participant_type}</span>
|
||||
</div>
|
||||
<select class="sw-members-role" value=${m.role || 'member'}
|
||||
onChange=${e => updateRole(m.id, e.target.value)}>
|
||||
${ROLES.map(r => html`<option key=${r} value=${r}>${r}</option>`)}
|
||||
</select>
|
||||
<button class="sw-members-remove" onClick=${() => remove(m.id)}
|
||||
title="Remove">\u00d7</button>
|
||||
</div>`)}
|
||||
${members.length === 0 && html`
|
||||
<div class="sw-panel-empty">No participants</div>`}
|
||||
</div>
|
||||
<div class="sw-members-add">
|
||||
<${UserPicker}
|
||||
onSelect=${_onUserSelect}
|
||||
placeholder=${adding ? 'Adding\u2026' : 'Add participant\u2026'} />
|
||||
</div>`}
|
||||
<//>`;
|
||||
}
|
||||
108
src/js/sw/surfaces/chat/channel-settings-panel.js
Normal file
108
src/js/sw/surfaces/chat/channel-settings-panel.js
Normal file
@@ -0,0 +1,108 @@
|
||||
// ==========================================
|
||||
// Chat Surface — Channel Settings Panel
|
||||
// ==========================================
|
||||
// Drawer for editing channel title, description, topic, ai_mode.
|
||||
// Uses Drawer primitive + channels.update API.
|
||||
|
||||
import { Drawer } from '../../primitives/drawer.js';
|
||||
|
||||
const { html } = window;
|
||||
const { useState, useEffect, useCallback } = hooks;
|
||||
|
||||
const AI_MODES = [
|
||||
{ value: 'auto', label: 'Auto (always reply)' },
|
||||
{ value: 'mention_only', label: 'Mention only' },
|
||||
{ value: 'off', label: 'Off' },
|
||||
];
|
||||
|
||||
/**
|
||||
* @param {{ open: boolean, channelId: string, onClose: () => void }} props
|
||||
*/
|
||||
export function ChannelSettingsPanel({ open, channelId, onClose }) {
|
||||
const [channel, setChannel] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [form, setForm] = useState({ title: '', description: '', topic: '', ai_mode: 'auto' });
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!channelId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await sw.api.channels.get(channelId);
|
||||
setChannel(data);
|
||||
setForm({
|
||||
title: data.title || '',
|
||||
description: data.description || '',
|
||||
topic: data.topic || '',
|
||||
ai_mode: data.ai_mode || 'auto',
|
||||
});
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [channelId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && channelId) load();
|
||||
}, [open, channelId, load]);
|
||||
|
||||
function _set(key, value) {
|
||||
setForm(prev => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
async function save(e) {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
try {
|
||||
await sw.api.channels.update(channelId, {
|
||||
title: form.title || undefined,
|
||||
description: form.description || undefined,
|
||||
topic: form.topic || undefined,
|
||||
ai_mode: form.ai_mode || undefined,
|
||||
});
|
||||
sw.toast('Settings saved', 'success');
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setSaving(false); }
|
||||
}
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return html`
|
||||
<${Drawer} open=${open} side="right" width="340px" title="Channel Settings" onClose=${onClose}>
|
||||
${loading && !channel
|
||||
? html`<div class="sw-panel-loading">Loading\u2026</div>`
|
||||
: html`
|
||||
<form class="sw-settings-form" onSubmit=${save}>
|
||||
<div class="sw-settings-field">
|
||||
<label>Title</label>
|
||||
<input type="text" value=${form.title}
|
||||
onInput=${e => _set('title', e.target.value)} />
|
||||
</div>
|
||||
<div class="sw-settings-field">
|
||||
<label>Description</label>
|
||||
<textarea rows="3" value=${form.description}
|
||||
onInput=${e => _set('description', e.target.value)} />
|
||||
</div>
|
||||
<div class="sw-settings-field">
|
||||
<label>Topic</label>
|
||||
<input type="text" value=${form.topic}
|
||||
onInput=${e => _set('topic', e.target.value)} />
|
||||
</div>
|
||||
<div class="sw-settings-field">
|
||||
<label>AI Mode</label>
|
||||
<select value=${form.ai_mode}
|
||||
onChange=${e => _set('ai_mode', e.target.value)}>
|
||||
${AI_MODES.map(m => html`
|
||||
<option key=${m.value} value=${m.value}>${m.label}</option>`)}
|
||||
</select>
|
||||
</div>
|
||||
${channel && html`
|
||||
<div class="sw-settings-info">
|
||||
<div><strong>Type:</strong> ${channel.channel_type || channel.type || '\u2014'}</div>
|
||||
<div><strong>Created:</strong> ${channel.created_at ? new Date(channel.created_at).toLocaleDateString() : '\u2014'}</div>
|
||||
</div>`}
|
||||
<button type="submit" class="btn-md btn-primary sw-settings-save"
|
||||
disabled=${saving}>
|
||||
${saving ? 'Saving\u2026' : 'Save'}
|
||||
</button>
|
||||
</form>`}
|
||||
<//>`;
|
||||
}
|
||||
@@ -5,9 +5,14 @@
|
||||
// ChatPane runs standalone=false — the surface manages navigation.
|
||||
|
||||
import { ChatPane, ModelSelector, useChat } from '../../components/chat-pane/index.js';
|
||||
import { NotificationBell } from '../../shell/notification-bell.js';
|
||||
import { ChannelMembersPanel } from './channel-members-panel.js';
|
||||
import { ChannelSettingsPanel } from './channel-settings-panel.js';
|
||||
import { UserPicker } from '../../primitives/user-picker.js';
|
||||
|
||||
const html = window.html;
|
||||
const { useRef, useEffect } = window.hooks;
|
||||
const { useState, useRef, useEffect, useCallback } = window.hooks;
|
||||
|
||||
|
||||
const PANEL_SVG = html`
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
@@ -16,6 +21,22 @@ const PANEL_SVG = html`
|
||||
<line x1="9" y1="3" x2="9" y2="21"/>
|
||||
</svg>`;
|
||||
|
||||
const PEOPLE_SVG = html`
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>`;
|
||||
|
||||
const GEAR_SVG = html`
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>`;
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* activeId: string|null,
|
||||
@@ -28,10 +49,28 @@ const PANEL_SVG = html`
|
||||
* }} props
|
||||
*/
|
||||
export function ChatWorkspace({
|
||||
activeId, activeType, onChannelChange, onNewChat,
|
||||
sidebarOpen, onToggleSidebar, toolsButton,
|
||||
activeId, activeType, channelType, onChannelChange, onNewChat, onCreateChannel,
|
||||
sidebarOpen, onToggleSidebar, toolsButton, sidebar,
|
||||
}) {
|
||||
const chatRef = useRef(null);
|
||||
const [selectedModel, setSelectedModel] = useState(null);
|
||||
const [membersOpen, setMembersOpen] = useState(false);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const activeChannel = sidebar?.items?.find(c => c.id === activeId);
|
||||
const showModelSelector = (activeChannel?.ai_mode || 'auto') !== 'off';
|
||||
|
||||
// Close panels on channel switch
|
||||
useEffect(() => {
|
||||
setMembersOpen(false);
|
||||
setSettingsOpen(false);
|
||||
}, [activeId]);
|
||||
|
||||
// Sync model selection into ChatPane's useChat
|
||||
useEffect(() => {
|
||||
if (selectedModel && chatRef.current?.setModel) {
|
||||
chatRef.current.setModel(selectedModel);
|
||||
}
|
||||
}, [selectedModel]);
|
||||
|
||||
// When activeId changes, tell ChatPane to switch channel
|
||||
useEffect(() => {
|
||||
@@ -40,6 +79,29 @@ export function ChatWorkspace({
|
||||
}
|
||||
}, [activeId]);
|
||||
|
||||
// Dashboard view when no channel selected
|
||||
if (!activeId) {
|
||||
return html`
|
||||
<div class="sw-chat-surface__workspace">
|
||||
<div class="sw-chat-surface__workspace-header">
|
||||
<div class="sw-chat-surface__workspace-header-left">
|
||||
${!sidebarOpen && html`
|
||||
<button class="sw-chat-surface__sidebar-toggle"
|
||||
onClick=${onToggleSidebar}
|
||||
title="Show sidebar"
|
||||
aria-label="Show sidebar">
|
||||
${PANEL_SVG}
|
||||
</button>`}
|
||||
</div>
|
||||
<div class="sw-chat-surface__workspace-header-right">
|
||||
<${NotificationBell} onNavigate=${onChannelChange} />
|
||||
</div>
|
||||
</div>
|
||||
<${ChatDashboard} onNewChat=${onNewChat} onCreateChannel=${onCreateChannel}
|
||||
items=${sidebar?.items} onNavigate=${onChannelChange} />
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="sw-chat-surface__workspace">
|
||||
<div class="sw-chat-surface__workspace-header">
|
||||
@@ -53,14 +115,115 @@ export function ChatWorkspace({
|
||||
</button>`}
|
||||
</div>
|
||||
<div class="sw-chat-surface__workspace-header-right">
|
||||
${showModelSelector && html`
|
||||
<${ModelSelector}
|
||||
value=${selectedModel}
|
||||
onChange=${setSelectedModel} />`}
|
||||
<button class="sw-chat-surface__header-btn"
|
||||
onClick=${() => setMembersOpen(v => !v)}
|
||||
title="Members"
|
||||
aria-label="Members">
|
||||
${PEOPLE_SVG}
|
||||
</button>
|
||||
<button class="sw-chat-surface__header-btn"
|
||||
onClick=${() => setSettingsOpen(v => !v)}
|
||||
title="Channel settings"
|
||||
aria-label="Channel settings">
|
||||
${GEAR_SVG}
|
||||
</button>
|
||||
<${NotificationBell} onNavigate=${onChannelChange} />
|
||||
${toolsButton}
|
||||
</div>
|
||||
</div>
|
||||
<${ChatPane}
|
||||
channelId=${activeId}
|
||||
standalone=${false}
|
||||
modelId=${selectedModel}
|
||||
handleRef=${chatRef}
|
||||
onChannelChange=${onChannelChange}
|
||||
className="sw-chat-surface__chat-pane" />
|
||||
<${ChannelMembersPanel}
|
||||
open=${membersOpen}
|
||||
channelId=${activeId}
|
||||
onClose=${() => setMembersOpen(false)} />
|
||||
<${ChannelSettingsPanel}
|
||||
open=${settingsOpen}
|
||||
channelId=${activeId}
|
||||
onClose=${() => setSettingsOpen(false)} />
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ── Dashboard (no chat selected) ────────────
|
||||
|
||||
function ChatDashboard({ onNewChat, onCreateChannel, items, onNavigate }) {
|
||||
const recentItems = (items || []).slice(0, 8);
|
||||
const [showDmPicker, setShowDmPicker] = useState(false);
|
||||
|
||||
async function _create(type) {
|
||||
if (type === 'dm') {
|
||||
setShowDmPicker(true);
|
||||
return;
|
||||
}
|
||||
const label = type === 'channel' ? 'Channel' : 'Group';
|
||||
const name = await window.sw.prompt(label + ' name:', '');
|
||||
if (name && name.trim()) onCreateChannel(type, name.trim());
|
||||
}
|
||||
|
||||
const _onDmSelect = useCallback((user) => {
|
||||
setShowDmPicker(false);
|
||||
const name = user.display_name || user.username;
|
||||
onCreateChannel('dm', 'DM: ' + name, { participant: user.username || user.id });
|
||||
}, [onCreateChannel]);
|
||||
|
||||
return html`
|
||||
<div class="sw-chat-dashboard">
|
||||
<div class="sw-chat-dashboard__welcome">
|
||||
<h2 class="sw-chat-dashboard__title">Chat Switchboard</h2>
|
||||
<p class="sw-chat-dashboard__hint">Start a conversation or browse your channels.</p>
|
||||
</div>
|
||||
<div class="sw-chat-dashboard__actions">
|
||||
<button class="sw-chat-dashboard__card" onClick=${onNewChat}>
|
||||
<span class="sw-chat-dashboard__card-icon">\u{1F4AC}</span>
|
||||
<span class="sw-chat-dashboard__card-label">New AI Chat</span>
|
||||
</button>
|
||||
<button class="sw-chat-dashboard__card" onClick=${() => _create('channel')}>
|
||||
<span class="sw-chat-dashboard__card-icon">#</span>
|
||||
<span class="sw-chat-dashboard__card-label">New Channel</span>
|
||||
</button>
|
||||
<button class="sw-chat-dashboard__card" onClick=${() => _create('group')}>
|
||||
<span class="sw-chat-dashboard__card-icon">\u{1F465}</span>
|
||||
<span class="sw-chat-dashboard__card-label">New Group</span>
|
||||
</button>
|
||||
<button class="sw-chat-dashboard__card" onClick=${() => _create('dm')}>
|
||||
<span class="sw-chat-dashboard__card-icon">\u{1F4E8}</span>
|
||||
<span class="sw-chat-dashboard__card-label">Direct Message</span>
|
||||
</button>
|
||||
</div>
|
||||
${showDmPicker && html`
|
||||
<div class="sw-chat-dashboard__dm-picker">
|
||||
<h3 class="sw-chat-dashboard__section-title">Start a DM</h3>
|
||||
<${UserPicker}
|
||||
onSelect=${_onDmSelect}
|
||||
placeholder="Search for a user\u2026"
|
||||
autoFocus=${true} />
|
||||
<button class="btn-small"
|
||||
style="margin-top: 8px;"
|
||||
onClick=${() => setShowDmPicker(false)}>Cancel</button>
|
||||
</div>`}
|
||||
${recentItems.length > 0 && html`
|
||||
<div class="sw-chat-dashboard__recent">
|
||||
<h3 class="sw-chat-dashboard__section-title">Recent</h3>
|
||||
<div class="sw-chat-dashboard__recent-list">
|
||||
${recentItems.map(ch => html`
|
||||
<div class="sw-chat-dashboard__recent-item" key=${ch.id}
|
||||
onClick=${() => onNavigate?.(ch.id)}
|
||||
style="cursor: pointer">
|
||||
<span class="sw-chat-dashboard__recent-icon">
|
||||
${ch.type === 'channel' || ch.type === 'group' ? '#' : '\u{1F4AC}'}
|
||||
</span>
|
||||
<span class="sw-chat-dashboard__recent-title">${ch.title || 'Untitled'}</span>
|
||||
</div>`)}
|
||||
</div>
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -32,13 +32,45 @@ function ChatSurface() {
|
||||
const tools = useTools();
|
||||
const [toolsOpen, setToolsOpen] = useState(false);
|
||||
|
||||
const _onNewChat = useCallback(() => {
|
||||
workspace.clearSelection();
|
||||
}, [workspace.clearSelection]);
|
||||
const _onNewChat = useCallback(async () => {
|
||||
try {
|
||||
const resp = await window.sw.api.channels.create({ type: 'direct', title: 'New Chat' });
|
||||
const ch = resp;
|
||||
if (ch?.id) {
|
||||
sidebar.reload();
|
||||
workspace.select(ch.id, 'direct');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[chat] New chat failed:', err);
|
||||
window.sw?.toast?.('Failed to create chat', 'error');
|
||||
}
|
||||
}, [workspace.select, sidebar.reload]);
|
||||
|
||||
const _onCreateChannel = useCallback(async (type, title, opts) => {
|
||||
try {
|
||||
const body = { type, title };
|
||||
if (opts?.participant) body.participants = [opts.participant];
|
||||
const resp = await window.sw.api.channels.create(body);
|
||||
const ch = resp;
|
||||
if (ch?.id) {
|
||||
sidebar.reload();
|
||||
workspace.select(ch.id, type);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[chat] Create channel failed:', err);
|
||||
window.sw?.toast?.('Failed to create ' + type, 'error');
|
||||
}
|
||||
}, [workspace.select, sidebar.reload]);
|
||||
|
||||
const _onDeleteChat = useCallback(async (id) => {
|
||||
await sidebar.deleteChat(id);
|
||||
if (id === workspace.activeId) workspace.clearSelection();
|
||||
}, [sidebar.deleteChat, workspace.activeId, workspace.clearSelection]);
|
||||
|
||||
const _onChannelChange = useCallback((id) => {
|
||||
if (id) workspace.selectChat(id);
|
||||
}, [workspace.selectChat]);
|
||||
if (id) workspace.select(id, 'direct');
|
||||
else workspace.clearSelection();
|
||||
}, [workspace.select, workspace.clearSelection]);
|
||||
|
||||
const _toggleSidebar = useCallback(() => {
|
||||
workspace.setSidebarOpen(!workspace.sidebarOpen);
|
||||
@@ -76,9 +108,10 @@ function ChatSurface() {
|
||||
<${Sidebar}
|
||||
sidebar=${sidebar}
|
||||
activeId=${workspace.activeId}
|
||||
onSelectChat=${workspace.selectChat}
|
||||
onSelectChannel=${workspace.selectChannel}
|
||||
onSelect=${workspace.select}
|
||||
onNewChat=${_onNewChat}
|
||||
onCreateChannel=${_onCreateChannel}
|
||||
onDeleteChat=${_onDeleteChat}
|
||||
onCollapse=${_toggleSidebar} />`}
|
||||
|
||||
${/* Main workspace */''}
|
||||
@@ -86,11 +119,14 @@ function ChatSurface() {
|
||||
<${ChatWorkspace}
|
||||
activeId=${workspace.activeId}
|
||||
activeType=${workspace.activeType}
|
||||
channelType=${workspace.channelType}
|
||||
onChannelChange=${_onChannelChange}
|
||||
onNewChat=${_onNewChat}
|
||||
onCreateChannel=${_onCreateChannel}
|
||||
sidebarOpen=${workspace.sidebarOpen}
|
||||
onToggleSidebar=${_toggleSidebar}
|
||||
toolsButton=${toolsButton} />
|
||||
toolsButton=${toolsButton}
|
||||
sidebar=${sidebar} />
|
||||
<${ToolsPopup}
|
||||
open=${toolsOpen}
|
||||
onClose=${_closeTools}
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
// ==========================================
|
||||
// Chat Surface — SidebarChannels Component
|
||||
// ==========================================
|
||||
// Collapsible channels section: DMs and named channels.
|
||||
|
||||
const html = window.html;
|
||||
|
||||
const CHEVRON_SVG = html`
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>`;
|
||||
|
||||
const HASH_SVG = html`
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>`;
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* channels: Array<{id: string, title: string, unread_count?: number}>,
|
||||
* activeId: string|null,
|
||||
* collapsed: boolean,
|
||||
* onToggle: () => void,
|
||||
* onSelect: (id: string) => void,
|
||||
* }} props
|
||||
*/
|
||||
export function SidebarChannels({ channels, activeId, collapsed, onToggle, onSelect }) {
|
||||
if (!channels.length && collapsed) return null;
|
||||
|
||||
return html`
|
||||
<div class="sw-chat-surface__section">
|
||||
<button class="sw-chat-surface__section-header"
|
||||
onClick=${onToggle}
|
||||
aria-expanded=${!collapsed}>
|
||||
<span class=${'sw-chat-surface__chevron' + (collapsed ? '' : ' sw-chat-surface__chevron--open')}>
|
||||
${CHEVRON_SVG}
|
||||
</span>
|
||||
<span class="sw-chat-surface__section-label">Channels</span>
|
||||
${channels.length > 0 && html`
|
||||
<span class="sw-chat-surface__section-count">${channels.length}</span>`}
|
||||
</button>
|
||||
${!collapsed && html`
|
||||
<div class="sw-chat-surface__section-body" role="listbox">
|
||||
${channels.length === 0 && html`
|
||||
<div class="sw-chat-surface__empty">No channels</div>`}
|
||||
${channels.map(ch => html`
|
||||
<button key=${ch.id}
|
||||
class=${'sw-chat-surface__item' + (ch.id === activeId ? ' sw-chat-surface__item--active' : '')}
|
||||
onClick=${() => onSelect(ch.id)}
|
||||
role="option"
|
||||
aria-selected=${ch.id === activeId}
|
||||
title=${ch.title || 'Untitled'}>
|
||||
<span class="sw-chat-surface__item-icon">${HASH_SVG}</span>
|
||||
<span class="sw-chat-surface__item-title">${ch.title || 'Untitled'}</span>
|
||||
${(ch.unread_count || 0) > 0 && html`
|
||||
<span class="sw-chat-surface__unread">${ch.unread_count}</span>`}
|
||||
</button>`)}
|
||||
</div>`}
|
||||
</div>`;
|
||||
}
|
||||
@@ -1,16 +1,13 @@
|
||||
// ==========================================
|
||||
// Chat Surface — SidebarChats Component
|
||||
// Chat Surface — SidebarItems Component
|
||||
// ==========================================
|
||||
// Personal AI chats with folder grouping and context menus.
|
||||
// Unified channel list with folder grouping, context menus,
|
||||
// nested folders, and HTML5 drag-and-drop.
|
||||
|
||||
const html = window.html;
|
||||
const { useState, useCallback, useRef, useEffect } = window.hooks;
|
||||
|
||||
const CHEVRON_SVG = html`
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>`;
|
||||
// ── Icons ────────────────────────────────
|
||||
|
||||
const CHAT_SVG = html`
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
@@ -18,6 +15,15 @@ const CHAT_SVG = html`
|
||||
<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>`;
|
||||
|
||||
const HASH_SVG = html`
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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 FOLDER_SVG = html`
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
@@ -30,31 +36,34 @@ const DOTS_SVG = html`
|
||||
<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>
|
||||
</svg>`;
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* chatsByFolder: Record<string, Array>,
|
||||
* folders: Array<{id: string, name: string}>,
|
||||
* activeId: string|null,
|
||||
* collapsed: boolean,
|
||||
* onToggle: () => void,
|
||||
* onSelect: (id: string) => void,
|
||||
* onRename: (id: string, title: string) => void,
|
||||
* onDelete: (id: string) => void,
|
||||
* onMoveToFolder: (chatId: string, folderId: string|null) => void,
|
||||
* onCreateFolder: (name: string) => void,
|
||||
* onRenameFolder: (id: string, name: string) => void,
|
||||
* onDeleteFolder: (id: string) => void,
|
||||
* }} props
|
||||
*/
|
||||
export function SidebarChats({
|
||||
chatsByFolder, folders, activeId, collapsed, onToggle, onSelect,
|
||||
onRename, onDelete, onMoveToFolder, onCreateFolder,
|
||||
const CHEVRON_SVG = html`
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>`;
|
||||
|
||||
function _iconForType(type) {
|
||||
if (type === 'channel' || type === 'group') return HASH_SVG;
|
||||
return CHAT_SVG;
|
||||
}
|
||||
|
||||
// Max nesting depth for folders
|
||||
const MAX_DEPTH = 3;
|
||||
|
||||
// ── Main Component ───────────────────────
|
||||
|
||||
export function SidebarItems({
|
||||
itemsByFolder, folders, folderTree, activeId, onSelect,
|
||||
onRename, onDelete, onMoveToFolder, onMoveFolderTo, onCreateFolder,
|
||||
onRenameFolder, onDeleteFolder,
|
||||
}) {
|
||||
const [contextMenu, setContextMenu] = useState(null);
|
||||
const [dragOver, setDragOver] = useState(null); // { id, type } of drop target
|
||||
const [dragging, setDragging] = useState(false); // true while any drag in progress
|
||||
const [collapsedFolders, setCollapsedFolders] = useState({});
|
||||
const menuRef = useRef(null);
|
||||
|
||||
// Close context menu on outside click or Escape
|
||||
// ── Context menu close ──────────────
|
||||
useEffect(() => {
|
||||
if (!contextMenu) return;
|
||||
function _close(e) {
|
||||
@@ -73,127 +82,290 @@ export function SidebarChats({
|
||||
const _openMenu = useCallback((e, type, item) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
setContextMenu({ type, item, x: rect.right, y: rect.bottom });
|
||||
const scale = _getScale();
|
||||
// The dots button may be display:none (zero rect) — fall back to parent
|
||||
let rect = e.currentTarget.getBoundingClientRect();
|
||||
if (!rect.width && !rect.height) {
|
||||
const parent = e.currentTarget.closest('.sw-chat-surface__item, .sw-chat-surface__folder-header');
|
||||
if (parent) rect = parent.getBoundingClientRect();
|
||||
}
|
||||
const x = rect.right / scale;
|
||||
const y = rect.bottom / scale;
|
||||
setContextMenu({ type, item, x, y });
|
||||
}, []);
|
||||
|
||||
const _bodyContextMenu = useCallback((e) => {
|
||||
if (e.target.closest('.sw-chat-surface__item') || e.target.closest('.sw-chat-surface__folder-header')) return;
|
||||
e.preventDefault();
|
||||
const scale = _getScale();
|
||||
setContextMenu({ type: 'body', item: null, x: e.clientX / scale, y: e.clientY / scale });
|
||||
}, []);
|
||||
|
||||
const _action = useCallback(async (action, item) => {
|
||||
setContextMenu(null);
|
||||
if (action === 'rename') {
|
||||
const newTitle = prompt('Rename:', item.title || item.name || '');
|
||||
const newTitle = await window.sw.prompt('Rename:', item.title || item.name || '');
|
||||
if (newTitle && newTitle.trim()) {
|
||||
if (item.name !== undefined) await onRenameFolder(item.id, newTitle.trim());
|
||||
else await onRename(item.id, newTitle.trim());
|
||||
}
|
||||
} else if (action === 'delete') {
|
||||
const label = item.name !== undefined ? 'folder' : 'chat';
|
||||
if (confirm('Delete this ' + label + '?')) {
|
||||
const label = item.name !== undefined ? 'folder' : 'conversation';
|
||||
const ok = await window.sw.confirm('Delete this ' + label + '?', true);
|
||||
if (ok) {
|
||||
if (item.name !== undefined) await onDeleteFolder(item.id);
|
||||
else await onDelete(item.id);
|
||||
}
|
||||
} else if (action === 'move-out') {
|
||||
await onMoveToFolder(item.id, null);
|
||||
} else if (action === 'new-folder') {
|
||||
const name = prompt('Folder name:');
|
||||
const name = await window.sw.prompt('Folder name:', '');
|
||||
if (name && name.trim()) await onCreateFolder(name.trim());
|
||||
} else if (action === 'new-subfolder') {
|
||||
const name = await window.sw.prompt('Subfolder name:', '');
|
||||
if (name && name.trim()) await onCreateFolder(name.trim(), item.id);
|
||||
} else if (action === 'unnest-folder') {
|
||||
await onMoveFolderTo(item.id, null);
|
||||
} else if (action.startsWith('move-to:')) {
|
||||
const fid = action.slice(8);
|
||||
await onMoveToFolder(item.id, fid);
|
||||
}
|
||||
}, [onRename, onDelete, onMoveToFolder, onCreateFolder, onRenameFolder, onDeleteFolder]);
|
||||
}, [onRename, onDelete, onMoveToFolder, onMoveFolderTo, onCreateFolder, onRenameFolder, onDeleteFolder]);
|
||||
|
||||
// Count total chats
|
||||
const totalChats = Object.values(chatsByFolder).reduce((sum, arr) => sum + arr.length, 0);
|
||||
const unfolderedChats = chatsByFolder[''] || [];
|
||||
// ── Folder collapse toggle ──────────
|
||||
const _toggleFolder = useCallback((folderId) => {
|
||||
setCollapsedFolders(prev => ({ ...prev, [folderId]: !prev[folderId] }));
|
||||
}, []);
|
||||
|
||||
// ── Drag & Drop ─────────────────────
|
||||
const _onDragStart = useCallback((e, dragType, item) => {
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify({ dragType, id: item.id }));
|
||||
setDragging(true);
|
||||
}, []);
|
||||
|
||||
const _onDragOver = useCallback((e, targetId, targetType) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragOver({ id: targetId, type: targetType });
|
||||
}, []);
|
||||
|
||||
const _onDragLeave = useCallback(() => {
|
||||
setDragOver(null);
|
||||
}, []);
|
||||
|
||||
const _onDropOnFolder = useCallback((e, folderId) => {
|
||||
e.preventDefault();
|
||||
setDragOver(null);
|
||||
try {
|
||||
const data = JSON.parse(e.dataTransfer.getData('text/plain'));
|
||||
if (data.dragType === 'channel') {
|
||||
onMoveToFolder(data.id, folderId);
|
||||
} else if (data.dragType === 'folder' && data.id !== folderId) {
|
||||
onMoveFolderTo(data.id, folderId);
|
||||
}
|
||||
} catch (_) {}
|
||||
}, [onMoveToFolder, onMoveFolderTo]);
|
||||
|
||||
const _onDropOnRoot = useCallback((e) => {
|
||||
e.preventDefault();
|
||||
setDragOver(null);
|
||||
setDragging(false);
|
||||
try {
|
||||
const data = JSON.parse(e.dataTransfer.getData('text/plain'));
|
||||
if (data.dragType === 'channel') {
|
||||
onMoveToFolder(data.id, null);
|
||||
} else if (data.dragType === 'folder') {
|
||||
onMoveFolderTo(data.id, null);
|
||||
}
|
||||
} catch (_) {}
|
||||
}, [onMoveToFolder, onMoveFolderTo]);
|
||||
|
||||
const _onDragEnd = useCallback(() => {
|
||||
setDragging(false);
|
||||
setDragOver(null);
|
||||
}, []);
|
||||
|
||||
// ── Render ───────────────────────────
|
||||
const unfolderedItems = itemsByFolder[''] || [];
|
||||
const totalItems = Object.values(itemsByFolder).reduce((sum, arr) => sum + arr.length, 0);
|
||||
const tree = folderTree || [];
|
||||
|
||||
const rootDropActive = dragging && dragOver?.id === '__root' && dragOver?.type === 'root';
|
||||
|
||||
return html`
|
||||
<div class="sw-chat-surface__section">
|
||||
<button class="sw-chat-surface__section-header"
|
||||
onClick=${onToggle}
|
||||
aria-expanded=${!collapsed}>
|
||||
<span class=${'sw-chat-surface__chevron' + (collapsed ? '' : ' sw-chat-surface__chevron--open')}>
|
||||
<div class="sw-chat-surface__section-body"
|
||||
role="listbox"
|
||||
onContextMenu=${_bodyContextMenu}
|
||||
onDragOver=${(e) => { e.preventDefault(); }}
|
||||
onDrop=${_onDropOnRoot}
|
||||
onDragEnd=${_onDragEnd}>
|
||||
${/* Render folder tree recursively */''}
|
||||
${tree.map(node => html`
|
||||
<${FolderNode}
|
||||
key=${'f-' + node.id}
|
||||
node=${node}
|
||||
depth=${0}
|
||||
itemsByFolder=${itemsByFolder}
|
||||
activeId=${activeId}
|
||||
collapsedFolders=${collapsedFolders}
|
||||
dragOver=${dragOver}
|
||||
onSelect=${onSelect}
|
||||
onOpenMenu=${_openMenu}
|
||||
onToggleFolder=${_toggleFolder}
|
||||
onDragStart=${_onDragStart}
|
||||
onDragOver=${_onDragOver}
|
||||
onDragLeave=${_onDragLeave}
|
||||
onDropOnFolder=${_onDropOnFolder} />`)}
|
||||
${/* Unfoldered items */''}
|
||||
${unfolderedItems.map(ch => html`
|
||||
<${ChannelItem} key=${ch.id} channel=${ch} activeId=${activeId}
|
||||
onSelect=${onSelect} onOpenMenu=${_openMenu}
|
||||
onDragStart=${_onDragStart} />`)}
|
||||
${totalItems === 0 && tree.length === 0 && html`
|
||||
<div class="sw-chat-surface__empty">No conversations yet</div>`}
|
||||
${/* Visible root drop zone — shown during drag */''}
|
||||
${dragging && tree.length > 0 && html`
|
||||
<div class=${'sw-chat-surface__root-drop' + (rootDropActive ? ' sw-chat-surface__root-drop--active' : '')}
|
||||
onDragOver=${(e) => _onDragOver(e, '__root', 'root')}
|
||||
onDragLeave=${_onDragLeave}
|
||||
onDrop=${_onDropOnRoot}>
|
||||
Drop here to remove from folder
|
||||
</div>`}
|
||||
</div>
|
||||
|
||||
${/* Context Menu */''}
|
||||
${contextMenu && html`
|
||||
<div class="sw-chat-surface__context-menu" ref=${menuRef}
|
||||
style=${'left:' + contextMenu.x + 'px;top:' + contextMenu.y + 'px;'}>
|
||||
${contextMenu.type === 'chat' && html`
|
||||
<button onClick=${() => _action('rename', contextMenu.item)}>Rename</button>
|
||||
${folders.length > 0 && folders.map(f => html`
|
||||
<button key=${f.id} onClick=${() => _action('move-to:' + f.id, contextMenu.item)}>
|
||||
Move to ${f.name}
|
||||
</button>`)}
|
||||
${contextMenu.item.folder_id && html`
|
||||
<button onClick=${() => _action('move-out', contextMenu.item)}>Remove from folder</button>`}
|
||||
<button class="sw-chat-surface__ctx-danger"
|
||||
onClick=${() => _action('delete', contextMenu.item)}>Delete</button>
|
||||
`}
|
||||
${contextMenu.type === 'folder' && html`
|
||||
<button onClick=${() => _action('rename', contextMenu.item)}>Rename</button>
|
||||
<button onClick=${() => _action('new-subfolder', contextMenu.item)}>New subfolder</button>
|
||||
${contextMenu.item.parent_id && html`
|
||||
<button onClick=${() => _action('unnest-folder', contextMenu.item)}>Move to root</button>`}
|
||||
<button class="sw-chat-surface__ctx-danger"
|
||||
onClick=${() => _action('delete', contextMenu.item)}>Delete</button>
|
||||
`}
|
||||
${contextMenu.type === 'body' && html`
|
||||
<button onClick=${() => _action('new-folder', null)}>New Folder</button>
|
||||
`}
|
||||
</div>`}
|
||||
`;
|
||||
}
|
||||
|
||||
// ── FolderNode (recursive) ───────────────
|
||||
|
||||
function FolderNode({
|
||||
node, depth, itemsByFolder, activeId, collapsedFolders, dragOver,
|
||||
onSelect, onOpenMenu, onToggleFolder,
|
||||
onDragStart, onDragOver, onDragLeave, onDropOnFolder,
|
||||
}) {
|
||||
const folderItems = itemsByFolder[node.id] || [];
|
||||
const totalCount = folderItems.length + (node.children || []).length;
|
||||
const isCollapsed = !!collapsedFolders[node.id];
|
||||
const isDragTarget = dragOver?.id === node.id && dragOver?.type === 'folder';
|
||||
const hasChildren = (node.children?.length > 0) || folderItems.length > 0;
|
||||
const indent = depth * 12;
|
||||
|
||||
return html`
|
||||
<div key=${'f-' + node.id}
|
||||
class=${'sw-chat-surface__folder' + (isDragTarget ? ' sw-chat-surface__folder--drag-over' : '')}
|
||||
style=${indent ? 'padding-left:' + indent + 'px' : ''}
|
||||
draggable=${depth < MAX_DEPTH}
|
||||
onDragStart=${(e) => { e.stopPropagation(); onDragStart(e, 'folder', node); }}
|
||||
onDragOver=${(e) => { if (depth < MAX_DEPTH - 1) onDragOver(e, node.id, 'folder'); }}
|
||||
onDragLeave=${onDragLeave}
|
||||
onDrop=${(e) => { e.stopPropagation(); onDropOnFolder(e, node.id); }}>
|
||||
<div class="sw-chat-surface__folder-header"
|
||||
onClick=${() => onToggleFolder(node.id)}>
|
||||
<span class=${'sw-chat-surface__chevron' + (isCollapsed ? '' : ' sw-chat-surface__chevron--open')}>
|
||||
${CHEVRON_SVG}
|
||||
</span>
|
||||
<span class="sw-chat-surface__section-label">Chats</span>
|
||||
${totalChats > 0 && html`
|
||||
<span class="sw-chat-surface__section-count">${totalChats}</span>`}
|
||||
</button>
|
||||
${!collapsed && html`
|
||||
<div class="sw-chat-surface__section-body" role="listbox">
|
||||
${/* Folders first */''}
|
||||
${folders.map(folder => {
|
||||
const folderChats = chatsByFolder[folder.id] || [];
|
||||
return html`
|
||||
<div key=${'f-' + folder.id} class="sw-chat-surface__folder">
|
||||
<div class="sw-chat-surface__folder-header">
|
||||
<span class="sw-chat-surface__item-icon">${FOLDER_SVG}</span>
|
||||
<span class="sw-chat-surface__folder-name">${folder.name}</span>
|
||||
<span class="sw-chat-surface__folder-count">${folderChats.length}</span>
|
||||
<button class="sw-chat-surface__item-menu"
|
||||
onClick=${(e) => _openMenu(e, 'folder', folder)}
|
||||
title="Folder actions"
|
||||
aria-label="Folder actions">
|
||||
${DOTS_SVG}
|
||||
</button>
|
||||
</div>
|
||||
${folderChats.map(ch => html`
|
||||
<${ChatItem} key=${ch.id} chat=${ch} activeId=${activeId}
|
||||
onSelect=${onSelect} onOpenMenu=${_openMenu}
|
||||
indent=${true} />`)}
|
||||
</div>`;
|
||||
})}
|
||||
${/* Unfoldered chats */''}
|
||||
${unfolderedChats.map(ch => html`
|
||||
<${ChatItem} key=${ch.id} chat=${ch} activeId=${activeId}
|
||||
onSelect=${onSelect} onOpenMenu=${_openMenu} />`)}
|
||||
${totalChats === 0 && html`
|
||||
<div class="sw-chat-surface__empty">No chats yet</div>`}
|
||||
</div>`}
|
||||
|
||||
${/* Context Menu */''}
|
||||
${contextMenu && html`
|
||||
<div class="sw-chat-surface__context-menu" ref=${menuRef}
|
||||
style=${'left:' + contextMenu.x + 'px;top:' + contextMenu.y + 'px;'}>
|
||||
${contextMenu.type === 'chat' && html`
|
||||
<button onClick=${() => _action('rename', contextMenu.item)}>Rename</button>
|
||||
${folders.length > 0 && folders.map(f => html`
|
||||
<button key=${f.id} onClick=${() => _action('move-to:' + f.id, contextMenu.item)}>
|
||||
Move to ${f.name}
|
||||
</button>`)}
|
||||
${contextMenu.item.folder_id && html`
|
||||
<button onClick=${() => _action('move-out', contextMenu.item)}>Remove from folder</button>`}
|
||||
<button class="sw-chat-surface__ctx-danger"
|
||||
onClick=${() => _action('delete', contextMenu.item)}>Delete</button>
|
||||
`}
|
||||
${contextMenu.type === 'folder' && html`
|
||||
<button onClick=${() => _action('rename', contextMenu.item)}>Rename</button>
|
||||
<button class="sw-chat-surface__ctx-danger"
|
||||
onClick=${() => _action('delete', contextMenu.item)}>Delete</button>
|
||||
`}
|
||||
</div>`}
|
||||
<span class="sw-chat-surface__item-icon">${FOLDER_SVG}</span>
|
||||
<span class="sw-chat-surface__folder-name">${node.name}</span>
|
||||
<span class="sw-chat-surface__folder-count">${totalCount}</span>
|
||||
<button class="sw-chat-surface__item-menu"
|
||||
onClick=${(e) => { e.stopPropagation(); onOpenMenu(e, 'folder', node); }}
|
||||
title="Folder actions"
|
||||
aria-label="Folder actions">
|
||||
${DOTS_SVG}
|
||||
</button>
|
||||
</div>
|
||||
${!isCollapsed && html`
|
||||
${/* Child folders */''}
|
||||
${(node.children || []).map(child => html`
|
||||
<${FolderNode}
|
||||
key=${'f-' + child.id}
|
||||
node=${child}
|
||||
depth=${depth + 1}
|
||||
itemsByFolder=${itemsByFolder}
|
||||
activeId=${activeId}
|
||||
collapsedFolders=${collapsedFolders}
|
||||
dragOver=${dragOver}
|
||||
onSelect=${onSelect}
|
||||
onOpenMenu=${onOpenMenu}
|
||||
onToggleFolder=${onToggleFolder}
|
||||
onDragStart=${onDragStart}
|
||||
onDragOver=${onDragOver}
|
||||
onDragLeave=${onDragLeave}
|
||||
onDropOnFolder=${onDropOnFolder} />`)}
|
||||
${/* Channel items in this folder */''}
|
||||
${folderItems.map(ch => html`
|
||||
<${ChannelItem} key=${ch.id} channel=${ch} activeId=${activeId}
|
||||
onSelect=${onSelect} onOpenMenu=${onOpenMenu}
|
||||
onDragStart=${onDragStart}
|
||||
indent=${true} />`)}
|
||||
`}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function ChatItem({ chat, activeId, onSelect, onOpenMenu, indent }) {
|
||||
// ── ChannelItem ──────────────────────────
|
||||
|
||||
function ChannelItem({ channel, activeId, onSelect, onOpenMenu, onDragStart, indent }) {
|
||||
const icon = _iconForType(channel.type);
|
||||
return html`
|
||||
<button class=${'sw-chat-surface__item' + (chat.id === activeId ? ' sw-chat-surface__item--active' : '') + (indent ? ' sw-chat-surface__item--indent' : '')}
|
||||
onClick=${() => onSelect(chat.id)}
|
||||
onContextMenu=${(e) => { e.preventDefault(); onOpenMenu(e, 'chat', chat); }}
|
||||
<button class=${'sw-chat-surface__item' + (channel.id === activeId ? ' sw-chat-surface__item--active' : '') + (indent ? ' sw-chat-surface__item--indent' : '')}
|
||||
onClick=${() => onSelect(channel.id, channel.type)}
|
||||
onContextMenu=${(e) => { e.preventDefault(); onOpenMenu(e, 'chat', channel); }}
|
||||
draggable=${true}
|
||||
onDragStart=${(e) => onDragStart(e, 'channel', channel)}
|
||||
role="option"
|
||||
aria-selected=${chat.id === activeId}
|
||||
title=${chat.title || 'Untitled'}>
|
||||
<span class="sw-chat-surface__item-icon">${CHAT_SVG}</span>
|
||||
<span class="sw-chat-surface__item-title">${chat.title || 'Untitled'}</span>
|
||||
aria-selected=${channel.id === activeId}
|
||||
title=${channel.title || 'Untitled'}>
|
||||
<span class="sw-chat-surface__item-icon">${icon}</span>
|
||||
<span class="sw-chat-surface__item-title">${channel.title || 'Untitled'}</span>
|
||||
${(channel.unread_count || 0) > 0 && html`
|
||||
<span class="sw-chat-surface__unread">${channel.unread_count}</span>`}
|
||||
<button class="sw-chat-surface__item-menu"
|
||||
onClick=${(e) => _stopAndOpen(e, onOpenMenu, 'chat', chat)}
|
||||
title="Chat actions"
|
||||
aria-label="Chat actions">
|
||||
onClick=${(e) => { e.stopPropagation(); onOpenMenu(e, 'chat', channel); }}
|
||||
title="Actions"
|
||||
aria-label="Actions">
|
||||
${DOTS_SVG}
|
||||
</button>
|
||||
</button>`;
|
||||
}
|
||||
|
||||
function _stopAndOpen(e, onOpenMenu, type, item) {
|
||||
e.stopPropagation();
|
||||
onOpenMenu(e, type, item);
|
||||
// Read the CSS scale transform on .surface-inner (set by appearance zoom).
|
||||
// Context menus use position:fixed which breaks under transforms,
|
||||
// so we divide getBoundingClientRect values by scale to compensate.
|
||||
function _getScale() {
|
||||
const el = document.getElementById('surfaceInner');
|
||||
if (!el) return 1;
|
||||
const t = getComputedStyle(el).transform;
|
||||
if (!t || t === 'none') return 1;
|
||||
const m = t.match(/matrix\(([^,]+)/);
|
||||
return m ? parseFloat(m[1]) || 1 : 1;
|
||||
}
|
||||
|
||||
// Folder count = direct children only (subfolders + channels in this folder).
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
// ==========================================
|
||||
// Chat Surface — Sidebar Component
|
||||
// ==========================================
|
||||
// Search bar, new chat, channels section, chats section with folders.
|
||||
// Search bar, new chat, unified channel list with folders.
|
||||
// Footer has UserMenu (avatar) — all navigation lives in the menu flyout.
|
||||
|
||||
import { SidebarChannels } from './sidebar-channels.js';
|
||||
import { SidebarChats } from './sidebar-chats.js';
|
||||
import { SidebarItems } from './sidebar-chats.js';
|
||||
import { UserMenu } from '../../shell/user-menu.js';
|
||||
|
||||
const html = window.html;
|
||||
const { useCallback } = window.hooks;
|
||||
const { useState, useCallback, useRef, useEffect } = window.hooks;
|
||||
|
||||
const PLUS_SVG = html`
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
@@ -32,31 +31,98 @@ const COLLAPSE_SVG = html`
|
||||
<line x1="9" y1="3" x2="9" y2="21"/>
|
||||
</svg>`;
|
||||
|
||||
const FOLDER_PLUS_SVG = html`
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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"/>
|
||||
<line x1="12" y1="11" x2="12" y2="17"/>
|
||||
<line x1="9" y1="14" x2="15" y2="14"/>
|
||||
</svg>`;
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* sidebar: ReturnType<import('./use-sidebar.js').useSidebar>,
|
||||
* activeId: string|null,
|
||||
* onSelectChat: (id: string) => void,
|
||||
* onSelectChannel: (id: string) => void,
|
||||
* onSelect: (id: string, type: string) => void,
|
||||
* onNewChat: () => void,
|
||||
* onCollapse: () => void,
|
||||
* }} props
|
||||
*/
|
||||
export function Sidebar({ sidebar, activeId, onSelectChat, onSelectChannel, onNewChat, onCollapse }) {
|
||||
export function Sidebar({ sidebar, activeId, onSelect, onNewChat, onCreateChannel, onDeleteChat, onCollapse }) {
|
||||
const [newMenuOpen, setNewMenuOpen] = useState(false);
|
||||
const newMenuRef = useRef(null);
|
||||
|
||||
const _onSearch = useCallback((e) => {
|
||||
sidebar.setSearch(e.target.value);
|
||||
}, [sidebar.setSearch]);
|
||||
|
||||
const _onNewFolder = useCallback(async () => {
|
||||
const name = await window.sw.prompt('Folder name:', '');
|
||||
if (name && name.trim()) sidebar.createFolder(name.trim());
|
||||
}, [sidebar.createFolder]);
|
||||
|
||||
// Close new-channel dropdown on outside click / Escape
|
||||
useEffect(() => {
|
||||
if (!newMenuOpen) return;
|
||||
function _close(e) {
|
||||
if (e.type === 'keydown' && e.key !== 'Escape') return;
|
||||
if (e.type === 'click' && newMenuRef.current?.contains(e.target)) return;
|
||||
setNewMenuOpen(false);
|
||||
}
|
||||
document.addEventListener('click', _close);
|
||||
document.addEventListener('keydown', _close);
|
||||
return () => {
|
||||
document.removeEventListener('click', _close);
|
||||
document.removeEventListener('keydown', _close);
|
||||
};
|
||||
}, [newMenuOpen]);
|
||||
|
||||
const _newChannel = useCallback(async (type) => {
|
||||
setNewMenuOpen(false);
|
||||
if (type === 'direct') {
|
||||
onNewChat();
|
||||
} else if (type === 'dm') {
|
||||
const who = await window.sw.prompt('Username to DM:', '');
|
||||
if (who && who.trim()) onCreateChannel('dm', 'DM: ' + who.trim(), { participant: who.trim() });
|
||||
} else {
|
||||
const name = await window.sw.prompt((type === 'channel' ? 'Channel' : 'Group') + ' name:', '');
|
||||
if (name && name.trim()) onCreateChannel(type, name.trim());
|
||||
}
|
||||
}, [onNewChat, onCreateChannel]);
|
||||
|
||||
return html`
|
||||
<div class="sw-chat-surface__sidebar" role="navigation" aria-label="Chat sidebar">
|
||||
${/* Header: new chat + collapse */''}
|
||||
<div class="sw-chat-surface__sidebar-header">
|
||||
<button class="sw-chat-surface__new-chat-btn"
|
||||
onClick=${onNewChat}
|
||||
title="New chat"
|
||||
aria-label="Start new chat">
|
||||
${PLUS_SVG}
|
||||
<span>New Chat</span>
|
||||
<div class="sw-chat-surface__new-menu-wrap" ref=${newMenuRef}>
|
||||
<button class="sw-chat-surface__new-chat-btn"
|
||||
onClick=${() => setNewMenuOpen(!newMenuOpen)}
|
||||
title="New conversation"
|
||||
aria-label="New conversation">
|
||||
${PLUS_SVG}
|
||||
<span>New</span>
|
||||
</button>
|
||||
${newMenuOpen && html`
|
||||
<div class="sw-chat-surface__new-menu">
|
||||
<button onClick=${() => _newChannel('direct')}>
|
||||
<span class="sw-chat-surface__new-menu-icon">\u{1F4AC}</span> AI Chat
|
||||
</button>
|
||||
<button onClick=${() => _newChannel('channel')}>
|
||||
<span class="sw-chat-surface__new-menu-icon">#</span> Channel
|
||||
</button>
|
||||
<button onClick=${() => _newChannel('group')}>
|
||||
<span class="sw-chat-surface__new-menu-icon">\u{1F465}</span> Group
|
||||
</button>
|
||||
<button onClick=${() => _newChannel('dm')}>
|
||||
<span class="sw-chat-surface__new-menu-icon">\u{1F4E8}</span> Direct Message
|
||||
</button>
|
||||
</div>`}
|
||||
</div>
|
||||
<button class="sw-chat-surface__new-folder-btn"
|
||||
onClick=${_onNewFolder}
|
||||
title="New folder"
|
||||
aria-label="Create new folder">
|
||||
${FOLDER_PLUS_SVG}
|
||||
</button>
|
||||
<button class="sw-chat-surface__collapse-btn"
|
||||
onClick=${onCollapse}
|
||||
@@ -79,23 +145,16 @@ export function Sidebar({ sidebar, activeId, onSelectChat, onSelectChannel, onNe
|
||||
|
||||
${/* Scrollable content */''}
|
||||
<div class="sw-chat-surface__sidebar-body">
|
||||
<${SidebarChannels}
|
||||
channels=${sidebar.channels}
|
||||
activeId=${activeId}
|
||||
collapsed=${sidebar.collapsed.channels}
|
||||
onToggle=${() => sidebar.toggleCollapsed('channels')}
|
||||
onSelect=${onSelectChannel} />
|
||||
|
||||
<${SidebarChats}
|
||||
chatsByFolder=${sidebar.chatsByFolder}
|
||||
<${SidebarItems}
|
||||
itemsByFolder=${sidebar.itemsByFolder}
|
||||
folders=${sidebar.folders}
|
||||
folderTree=${sidebar.folderTree}
|
||||
activeId=${activeId}
|
||||
collapsed=${sidebar.collapsed.chats}
|
||||
onToggle=${() => sidebar.toggleCollapsed('chats')}
|
||||
onSelect=${onSelectChat}
|
||||
onSelect=${onSelect}
|
||||
onRename=${sidebar.renameChat}
|
||||
onDelete=${sidebar.deleteChat}
|
||||
onDelete=${onDeleteChat || sidebar.deleteChat}
|
||||
onMoveToFolder=${sidebar.moveToFolder}
|
||||
onMoveFolderTo=${sidebar.moveFolderTo}
|
||||
onCreateFolder=${sidebar.createFolder}
|
||||
onRenameFolder=${sidebar.renameFolder}
|
||||
onDeleteFolder=${sidebar.deleteFolder} />
|
||||
|
||||
@@ -19,14 +19,9 @@ export function useTools() {
|
||||
|
||||
useEffect(() => {
|
||||
// Load available tools from API
|
||||
if (window.sw?.api?.admin?.tools?.list) {
|
||||
window.sw.api.admin.tools.list().then(resp => {
|
||||
setTools(resp?.data || resp || []);
|
||||
}).catch(() => {});
|
||||
} else if (window.sw?.api?.channels?.tools) {
|
||||
// Fallback — try the channels tools endpoint
|
||||
window.sw.api.channels.tools?.().then(resp => {
|
||||
setTools(resp?.data || resp || []);
|
||||
if (window.sw?.api?.tools?.list) {
|
||||
window.sw.api.tools.list().then(resp => {
|
||||
setTools(resp || []);
|
||||
}).catch(() => {});
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
// ==========================================
|
||||
// Chat Surface — useSidebar Hook
|
||||
// ==========================================
|
||||
// Loads and manages sidebar data: channels (DMs + named),
|
||||
// personal chats, and folders. Subscribes to WS events
|
||||
// for live updates.
|
||||
// Loads and manages sidebar data: all channels (unified)
|
||||
// and folders. Subscribes to WS events for live updates.
|
||||
|
||||
const { useState, useEffect, useCallback, useMemo } = window.hooks;
|
||||
const { useState, useEffect, useCallback, useMemo, useRef } = window.hooks;
|
||||
|
||||
const COLLAPSE_KEY = 'sw-chat-sidebar-collapsed';
|
||||
|
||||
@@ -15,12 +14,13 @@ const COLLAPSE_KEY = 'sw-chat-sidebar-collapsed';
|
||||
export function useSidebar(opts = {}) {
|
||||
const { activeId } = opts;
|
||||
|
||||
const [channels, setChannels] = useState([]); // named channels + DMs
|
||||
const [chats, setChats] = useState([]); // personal AI chats (direct, no participants)
|
||||
const [allChannels, setAllChannels] = useState([]);
|
||||
const [folders, setFolders] = useState([]);
|
||||
const [search, setSearch] = useState('');
|
||||
const [collapsed, setCollapsed] = useState(_loadCollapsed);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const activeIdRef = useRef(activeId);
|
||||
activeIdRef.current = activeId;
|
||||
|
||||
// ── Load data ───────────────────────────
|
||||
const reload = useCallback(async () => {
|
||||
@@ -31,17 +31,19 @@ export function useSidebar(opts = {}) {
|
||||
? window.sw.api.folders.list().catch(() => [])
|
||||
: Promise.resolve([]);
|
||||
|
||||
const [chResp, dmResp, fResp] = await Promise.all([
|
||||
// Named channels (group chats, DMs with participants)
|
||||
window.sw.api.channels.list({ page: 1, per_page: 100, channel_type: 'channel' }).catch(() => []),
|
||||
// Personal AI chats
|
||||
window.sw.api.channels.list({ page: 1, per_page: 100, channel_type: 'direct' }).catch(() => []),
|
||||
// Folders
|
||||
const [allResp, fResp] = await Promise.all([
|
||||
window.sw.api.channels.list({ page: 1, per_page: 200, types: 'direct,dm,group,channel' }).catch(() => []),
|
||||
foldersPromise,
|
||||
]);
|
||||
|
||||
setChannels(_extract(chResp));
|
||||
setChats(_extract(dmResp));
|
||||
const fresh = _extract(allResp);
|
||||
// Zero unread for the active channel (mark-read already fired)
|
||||
const aid = activeIdRef.current;
|
||||
if (aid) {
|
||||
const idx = fresh.findIndex(c => c.id === aid);
|
||||
if (idx !== -1) fresh[idx] = { ...fresh[idx], unread_count: 0 };
|
||||
}
|
||||
setAllChannels(fresh);
|
||||
setFolders(_extract(fResp));
|
||||
} catch (_) {}
|
||||
|
||||
@@ -50,6 +52,16 @@ export function useSidebar(opts = {}) {
|
||||
|
||||
useEffect(() => { reload(); }, [reload]);
|
||||
|
||||
// ── Clear unread badge when channel becomes active ──
|
||||
useEffect(() => {
|
||||
if (!activeId) return;
|
||||
setAllChannels(prev => prev.map(c =>
|
||||
c.id === activeId && c.unread_count > 0
|
||||
? { ...c, unread_count: 0 }
|
||||
: c
|
||||
));
|
||||
}, [activeId]);
|
||||
|
||||
// ── WebSocket live updates ──────────────
|
||||
useEffect(() => {
|
||||
if (!window.sw?.on) return;
|
||||
@@ -70,31 +82,42 @@ export function useSidebar(opts = {}) {
|
||||
}, [reload]);
|
||||
|
||||
// ── Search filter ───────────────────────
|
||||
const filteredChannels = useMemo(() => {
|
||||
if (!search) return channels;
|
||||
const filtered = useMemo(() => {
|
||||
if (!search) return allChannels;
|
||||
const q = search.toLowerCase();
|
||||
return channels.filter(c => (c.title || '').toLowerCase().includes(q));
|
||||
}, [channels, search]);
|
||||
return allChannels.filter(c => (c.title || '').toLowerCase().includes(q));
|
||||
}, [allChannels, search]);
|
||||
|
||||
const filteredChats = useMemo(() => {
|
||||
if (!search) return chats;
|
||||
const q = search.toLowerCase();
|
||||
return chats.filter(c => (c.title || '').toLowerCase().includes(q));
|
||||
}, [chats, search]);
|
||||
|
||||
// Group chats by folder
|
||||
const chatsByFolder = useMemo(() => {
|
||||
// Group all channels by folder
|
||||
const itemsByFolder = useMemo(() => {
|
||||
const map = { '': [] };
|
||||
for (const f of (folders || [])) map[f.id] = [];
|
||||
for (const c of filteredChats) {
|
||||
for (const c of filtered) {
|
||||
const fid = c.folder_id || '';
|
||||
if (!map[fid]) map[fid] = [];
|
||||
map[fid].push(c);
|
||||
}
|
||||
return map;
|
||||
}, [filteredChats, folders]);
|
||||
}, [filtered, folders]);
|
||||
|
||||
// ── Collapse sections ───────────────────
|
||||
// Build nested folder tree (max 3 levels)
|
||||
const folderTree = useMemo(() => {
|
||||
if (!folders || !folders.length) return [];
|
||||
const byId = {};
|
||||
for (const f of folders) byId[f.id] = { ...f, children: [] };
|
||||
const roots = [];
|
||||
for (const f of folders) {
|
||||
const node = byId[f.id];
|
||||
if (f.parent_id && byId[f.parent_id]) {
|
||||
byId[f.parent_id].children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
}
|
||||
return roots;
|
||||
}, [folders]);
|
||||
|
||||
// ── Collapse folders ────────────────────
|
||||
const toggleCollapsed = useCallback((key) => {
|
||||
setCollapsed(prev => {
|
||||
const next = { ...prev, [key]: !prev[key] };
|
||||
@@ -104,9 +127,15 @@ export function useSidebar(opts = {}) {
|
||||
}, []);
|
||||
|
||||
// ── CRUD helpers ────────────────────────
|
||||
const createFolder = useCallback(async (name) => {
|
||||
const createFolder = useCallback(async (name, parentId) => {
|
||||
if (!window.sw?.api?.folders?.create) return;
|
||||
await window.sw.api.folders.create(name);
|
||||
await window.sw.api.folders.create(name, parentId ? { parent_id: parentId } : undefined);
|
||||
reload();
|
||||
}, [reload]);
|
||||
|
||||
const moveFolderTo = useCallback(async (folderId, parentId) => {
|
||||
if (!window.sw?.api?.folders?.update) return;
|
||||
await window.sw.api.folders.update(folderId, { parent_id: parentId || null });
|
||||
reload();
|
||||
}, [reload]);
|
||||
|
||||
@@ -136,10 +165,10 @@ export function useSidebar(opts = {}) {
|
||||
}, [reload]);
|
||||
|
||||
return {
|
||||
channels: filteredChannels,
|
||||
chats: filteredChats,
|
||||
chatsByFolder,
|
||||
items: filtered,
|
||||
itemsByFolder,
|
||||
folders,
|
||||
folderTree,
|
||||
search,
|
||||
setSearch,
|
||||
collapsed,
|
||||
@@ -151,6 +180,7 @@ export function useSidebar(opts = {}) {
|
||||
renameChat,
|
||||
deleteChat,
|
||||
moveToFolder,
|
||||
moveFolderTo,
|
||||
renameFolder,
|
||||
deleteFolder,
|
||||
};
|
||||
|
||||
@@ -24,42 +24,47 @@ export function useWorkspace() {
|
||||
const stored = _loadStored();
|
||||
const [activeId, setActiveId] = useState(stored.id);
|
||||
const [activeType, setActiveType] = useState(stored.type);
|
||||
const [channelType, setChannelType] = useState(stored.channelType || null);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
|
||||
// Persist on change
|
||||
useEffect(() => {
|
||||
if (activeId) {
|
||||
try {
|
||||
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ id: activeId, type: activeType }));
|
||||
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ id: activeId, type: activeType, channelType }));
|
||||
} catch (_) {}
|
||||
} else {
|
||||
sessionStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
}, [activeId, activeType]);
|
||||
}, [activeId, activeType, channelType]);
|
||||
|
||||
const selectChat = useCallback((id) => {
|
||||
const select = useCallback((id, chType) => {
|
||||
setActiveId(id);
|
||||
setActiveType('chat');
|
||||
setChannelType(chType || 'direct');
|
||||
// Map channel model type to workspace type
|
||||
const wsType = (chType === 'channel' || chType === 'group') ? 'channel' : 'chat';
|
||||
setActiveType(wsType);
|
||||
// Auto-close sidebar on mobile
|
||||
if (window.innerWidth < 768) setSidebarOpen(false);
|
||||
}, []);
|
||||
|
||||
const selectChannel = useCallback((id) => {
|
||||
setActiveId(id);
|
||||
setActiveType('channel');
|
||||
if (window.innerWidth < 768) setSidebarOpen(false);
|
||||
}, []);
|
||||
// Keep legacy aliases for any other callers
|
||||
const selectChat = useCallback((id) => select(id, 'direct'), [select]);
|
||||
const selectChannel = useCallback((id) => select(id, 'channel'), [select]);
|
||||
|
||||
const clearSelection = useCallback(() => {
|
||||
setActiveId(null);
|
||||
setActiveType(null);
|
||||
setChannelType(null);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
activeId,
|
||||
activeType,
|
||||
channelType,
|
||||
sidebarOpen,
|
||||
setSidebarOpen,
|
||||
select,
|
||||
selectChat,
|
||||
selectChannel,
|
||||
clearSelection,
|
||||
@@ -71,8 +76,8 @@ function _loadStored() {
|
||||
const raw = sessionStorage.getItem(STORAGE_KEY);
|
||||
if (raw) {
|
||||
const obj = JSON.parse(raw);
|
||||
return { id: obj.id || null, type: obj.type || null };
|
||||
return { id: obj.id || null, type: obj.type || null, channelType: obj.channelType || null };
|
||||
}
|
||||
} catch (_) {}
|
||||
return { id: null, type: null };
|
||||
return { id: null, type: null, channelType: null };
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
// v0.37.11
|
||||
|
||||
import { NotesPane } from '../../components/notes-pane/index.js';
|
||||
import { NotificationBell } from '../../shell/notification-bell.js';
|
||||
|
||||
const html = window.html;
|
||||
|
||||
@@ -41,7 +42,9 @@ export function NotesWorkspace({
|
||||
${PANEL_SVG}
|
||||
</button>`}
|
||||
</div>
|
||||
<div class="sw-notes-surface__workspace-header-right" />
|
||||
<div class="sw-notes-surface__workspace-header-right">
|
||||
<${NotificationBell} />
|
||||
</div>
|
||||
</div>
|
||||
<${NotesPane}
|
||||
standalone=${false}
|
||||
|
||||
@@ -33,9 +33,22 @@ export function AppearanceSection() {
|
||||
p.msgFont = msgFont;
|
||||
localStorage.setItem('cs-appearance', JSON.stringify(p));
|
||||
|
||||
// Apply zoom + font size
|
||||
document.documentElement.style.zoom = scale !== 100 ? (scale / 100) : '';
|
||||
document.documentElement.style.setProperty('--msg-font-size', msgFont + 'px');
|
||||
// Apply scale to content area only (not shell/nav)
|
||||
const inner = document.getElementById('surfaceInner');
|
||||
if (inner) {
|
||||
if (scale !== 100) {
|
||||
const s = scale / 100;
|
||||
inner.style.transform = `scale(${s})`;
|
||||
inner.style.transformOrigin = 'top left';
|
||||
inner.style.width = (100 / s) + '%';
|
||||
inner.style.height = (100 / s) + '%';
|
||||
} else {
|
||||
inner.style.transform = '';
|
||||
inner.style.width = '';
|
||||
inner.style.height = '';
|
||||
}
|
||||
}
|
||||
document.documentElement.style.setProperty('--msg-font', msgFont + 'px');
|
||||
|
||||
sw.emit('toast', { message: 'Appearance saved', variant: 'success' });
|
||||
}, [scale, msgFont]);
|
||||
|
||||
@@ -27,7 +27,7 @@ export function GeneralSection() {
|
||||
temperature: sObj.temperature ?? 0.7,
|
||||
show_thinking: sObj.show_thinking || false,
|
||||
});
|
||||
const modelList = (m?.data || m || []).filter(x => !x.hidden);
|
||||
const modelList = (m.data || []).filter(x => !x.hidden);
|
||||
setModels(modelList);
|
||||
|
||||
// Set initial max hint
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function GitKeysSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.git.credentials.list();
|
||||
setKeys(Array.isArray(data) ? data : data.data || []);
|
||||
setKeys(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -25,8 +25,8 @@ export default function KnowledgeSection() {
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.knowledge.list();
|
||||
setKbs(Array.isArray(data) ? data : data.data || []);
|
||||
const resp = await sw.api.knowledge.list();
|
||||
setKbs(resp.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
@@ -37,7 +37,7 @@ export default function KnowledgeSection() {
|
||||
setDetail(kb);
|
||||
try {
|
||||
const d = await sw.api.knowledge.documents(kb.id);
|
||||
setDocs(Array.isArray(d) ? d : d.data || []);
|
||||
setDocs(d.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@ export default function KnowledgeSection() {
|
||||
await sw.api.knowledge.upload(detail.id, file);
|
||||
sw.toast('Document uploaded', 'success');
|
||||
const d = await sw.api.knowledge.documents(detail.id);
|
||||
setDocs(Array.isArray(d) ? d : d.data || []);
|
||||
setDocs(d.data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
};
|
||||
input.click();
|
||||
|
||||
@@ -27,7 +27,7 @@ export default function MemorySection() {
|
||||
sw.api.memory.list(),
|
||||
sw.api.memory.count().catch(() => null),
|
||||
]);
|
||||
setMemories(Array.isArray(data) ? data : data.data || []);
|
||||
setMemories(data || []);
|
||||
if (c != null) setCount(typeof c === 'number' ? c : c.count || 0);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
|
||||
@@ -20,10 +20,10 @@ export function ModelsSection() {
|
||||
sw.api.models.enabled(),
|
||||
sw.api.models.preferences(),
|
||||
]);
|
||||
setModels(m?.data || m || []);
|
||||
setModels(m.data || []);
|
||||
// Build prefs map: model_id → { hidden }
|
||||
const map = {};
|
||||
(p?.data || p || []).forEach(x => { map[x.model_id] = x; });
|
||||
(p || []).forEach(x => { map[x.model_id] = x; });
|
||||
setPrefs(map);
|
||||
} catch (e) {
|
||||
console.warn('[settings/models]', e.message);
|
||||
|
||||
@@ -16,7 +16,7 @@ export function PersonasSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const resp = await sw.api.personas.list();
|
||||
setPersonas(resp?.data || resp || []);
|
||||
setPersonas(resp || []);
|
||||
} catch (e) {
|
||||
setPersonas([]);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ export function ProvidersSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const resp = await sw.api.providers.list();
|
||||
setProviders(resp?.configs || resp?.data || resp || []);
|
||||
setProviders(resp || []);
|
||||
} catch (e) {
|
||||
setProviders([]);
|
||||
}
|
||||
|
||||
@@ -26,10 +26,10 @@ export function RolesSection() {
|
||||
sw.api.models.enabled(),
|
||||
sw.api.profile.settings(),
|
||||
]);
|
||||
const provs = (provResp?.configs || provResp?.data || [])
|
||||
const provs = (provResp || [])
|
||||
.filter(c => c.scope === 'personal');
|
||||
setProviders(provs);
|
||||
setModels(modResp?.data || modResp || []);
|
||||
setModels(modResp.data || []);
|
||||
|
||||
// Extract role overrides from settings
|
||||
const overrides = settings?.model_roles || {};
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function TasksSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.tasks.list();
|
||||
setTasks(Array.isArray(data) ? data : data.data || []);
|
||||
setTasks(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -11,7 +11,7 @@ export function TeamsSection() {
|
||||
|
||||
useEffect(() => {
|
||||
sw.api.teams.mine().then(resp => {
|
||||
setTeams(resp?.data || resp || []);
|
||||
setTeams(resp || []);
|
||||
}).catch(() => setTeams([]));
|
||||
}, []);
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function WorkflowsSection() {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.workflows.list();
|
||||
setWorkflows(Array.isArray(data) ? data : data.data || []);
|
||||
setWorkflows(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, []);
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function GroupsSection({ teamId }) {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.teams.groups(teamId);
|
||||
setGroups(Array.isArray(data) ? data : data.data || []);
|
||||
setGroups(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [teamId]);
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function KnowledgeSection({ teamId }) {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.teams.knowledgeBases(teamId);
|
||||
setKbs(Array.isArray(data) ? data : data.data || []);
|
||||
setKbs(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [teamId]);
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function MembersSection({ teamId }) {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.teams.members(teamId);
|
||||
setMembers(Array.isArray(data) ? data : data.data || []);
|
||||
setMembers(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [teamId]);
|
||||
@@ -23,8 +23,8 @@ export default function MembersSection({ teamId }) {
|
||||
async function openAdd() {
|
||||
setShowAdd(true);
|
||||
try {
|
||||
const data = await sw.api.admin.users.list();
|
||||
setUsers(Array.isArray(data) ? data : data.users || data.data || []);
|
||||
const resp = await sw.api.admin.users.list();
|
||||
setUsers(resp.data || []);
|
||||
} catch {
|
||||
// non-admin may not have access — leave empty
|
||||
setUsers([]);
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function PersonasSection({ teamId }) {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.teams.personas(teamId);
|
||||
setPersonas(Array.isArray(data) ? data : data.data || []);
|
||||
setPersonas(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [teamId]);
|
||||
|
||||
@@ -16,8 +16,8 @@ export default function ProvidersSection({ teamId }) {
|
||||
sw.api.teams.providers(teamId),
|
||||
sw.api.admin.providers.types().catch(() => ({ types: [] })),
|
||||
]);
|
||||
setConfigs(Array.isArray(c) ? c : c.data || []);
|
||||
setProviderTypes(t.types || t.data || []);
|
||||
setConfigs(c.data || []);
|
||||
setProviderTypes(t || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [teamId]);
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function TasksSection({ teamId }) {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.teams.tasks(teamId);
|
||||
setTasks(Array.isArray(data) ? data : data.data || []);
|
||||
setTasks(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [teamId]);
|
||||
|
||||
@@ -16,7 +16,7 @@ export default function WorkflowsSection({ teamId }) {
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const data = await sw.api.teams.workflows(teamId);
|
||||
setWorkflows(Array.isArray(data) ? data : data.data || []);
|
||||
setWorkflows(data || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setLoading(false); }
|
||||
}, [teamId]);
|
||||
@@ -27,7 +27,7 @@ export default function WorkflowsSection({ teamId }) {
|
||||
setEditing(wf);
|
||||
try {
|
||||
const detail = await sw.api.teams.workflows(teamId);
|
||||
const match = (Array.isArray(detail) ? detail : detail.data || []).find(w => w.id === wf.id);
|
||||
const match = (detail || []).find(w => w.id === wf.id);
|
||||
setStages(match?.stages || wf.stages || []);
|
||||
} catch (e) { sw.toast(e.message, 'error'); setStages([]); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user