@celljs/ta-web 0.0.0-stage → 4.6.0

package/src/browser/components/chat-list.tsx

@@ -0,0 +1,276 @@
+import type { TaSessionInfo } from '@celljs/ta-protocol';
+import { Plus, Search, Trash2, X } from 'lucide-react';
+import * as React from 'react';
+import type { TaChat } from '../chat/chat-protocol';
+import type { MessageId } from '../i18n/messages';
+import { type Translate, useT } from '../i18n/use-t';
+import { MessageUtil } from '../util/message';
+import { Icon, IconButton } from './icon';
+
+/** Where a conversation belongs: the directory of the user's own, or the package that opened it. */
+export interface ChatSource {
+    /** `dir:<cwd>` or `pkg:<package>`. */
+    key: string;
+    label: string;
+    /** The whole directory or package name. */
+    title: string;
+    /** The directory a new chat of this source opens in; none for a package. */
+    cwd?: string;
+    count: number;
+    /** The letter of its avatar. */
+    initial: string;
+    /** One of the colors of the avatars: by its name, else the next one no other source of the list has. */
+    tone: number;
+}
+
+export interface ChatSection {
+    id: MessageId;
+    sessions: TaSessionInfo[];
+}
+
+const TONES = 6;
+const DAY = 24 * 60 * 60_000;
+
+export namespace ChatListUtil {
+    export function sourceKey(session: TaSessionInfo): string {
+        return session.group ? `pkg:${session.group}` : `dir:${session.cwd}`;
+    }
+
+    /** `@celljs/ta-channels` → `ta-channels`. */
+    export function label(group: string): string {
+        return group.slice(group.lastIndexOf('/') + 1);
+    }
+
+    export function tone(key: string): number {
+        let hash = 0;
+        for (let i = 0; i < key.length; i++) {
+            hash = (hash * 31 + key.charCodeAt(i)) | 0;
+        }
+        return Math.abs(hash) % TONES;
+    }
+
+    /** The directories and packages of the conversations, the one with the latest first. */
+    export function sources(sessions: TaSessionInfo[]): ChatSource[] {
+        const sources = new Map<string, ChatSource & { latest: number }>();
+        for (const session of sessions) {
+            const key = sourceKey(session);
+            const known = sources.get(key);
+            if (known) {
+                known.count++;
+                known.latest = Math.max(known.latest, session.updatedAt);
+                continue;
+            }
+            const name = session.group ? label(session.group) : MessageUtil.basename(session.cwd);
+            sources.set(key, {
+                key,
+                label: name,
+                title: session.group ?? session.cwd,
+                cwd: session.group ? undefined : session.cwd,
+                count: 1,
+                initial: initial(session.group ? name.replace(/^ta-/, '') : name),
+                tone: 0,
+                latest: session.updatedAt,
+            });
+        }
+        const taken = new Set<number>();
+        for (const source of [...sources.values()].sort((a, b) => a.key.localeCompare(b.key))) {
+            const first = tone(source.key);
+            const free = Array.from({ length: TONES }, (_, i) => (first + i) % TONES).find(candidate => !taken.has(candidate));
+            source.tone = free ?? first;
+            taken.add(source.tone);
+        }
+        return [...sources.values()].sort((a, b) => b.latest - a.latest).map(({ latest, ...source }) => source);
+    }
+
+    /** The conversations of a source (all for none) whose title or place holds the query, the latest first. */
+    export function filter(sessions: TaSessionInfo[], source: string, query: string, t: Translate): TaSessionInfo[] {
+        const words = query.trim().toLowerCase();
+        return sessions
+            .filter(session => !source || sourceKey(session) === source)
+            .filter(session => !words || `${title(session, t)} ${session.group ?? session.cwd}`.toLowerCase().includes(words))
+            .sort((a, b) => b.updatedAt - a.updatedAt);
+    }
+
+    /** Today, yesterday, the week before, earlier: by the local day. */
+    export function sections(sessions: TaSessionInfo[], now: number): ChatSection[] {
+        const today = new Date(now).setHours(0, 0, 0, 0);
+        const bounds: [number, MessageId][] = [
+            [today, 'ta.time.today'],
+            [today - DAY, 'ta.time.yesterday'],
+            [today - 7 * DAY, 'ta.time.week'],
+            [-Infinity, 'ta.time.earlier'],
+        ];
+        const sections: ChatSection[] = [];
+        for (const session of sessions) {
+            const [, id] = bounds.find(([from]) => session.updatedAt >= from) ?? bounds[bounds.length - 1];
+            const last = sections[sections.length - 1];
+            if (last?.id === id) {
+                last.sessions.push(session);
+            } else {
+                sections.push({ id, sessions: [session] });
+            }
+        }
+        return sections;
+    }
+
+    /** `19:59` today, `11/8` before. */
+    export function clock(time: number, now: number): string {
+        const date = new Date(time);
+        if (date.toDateString() === new Date(now).toDateString()) {
+            return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+        }
+        return `${date.getMonth() + 1}/${date.getDate()}`;
+    }
+
+    export function title(session: TaSessionInfo, t: Translate): string {
+        return session.sessionName || session.firstMessage || t('ta.chat.new');
+    }
+
+    /** The first letter of a name, for its avatar. */
+    export function initial(name: string): string {
+        const letter = [...name].find(char => /[\p{L}\p{N}]/u.test(char));
+        return (letter ?? '?').toUpperCase();
+    }
+}
+
+/** The time now, again each minute. */
+function useMinute(): number {
+    const [now, setNow] = React.useState(Date.now);
+    React.useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), 60_000);
+        return () => clearInterval(timer);
+    }, []);
+    return now;
+}
+
+interface ItemProps {
+    session: TaSessionInfo;
+    source: ChatSource;
+    selected: boolean;
+    now: number;
+    onSelect(): void;
+    onClose(): void;
+}
+
+function ChatItem({ session, source, selected, now, onSelect, onClose }: ItemProps) {
+    const t = useT();
+    const title = ChatListUtil.title(session, t);
+    return (
+        <li className={`ta-chat-row ${selected ? 'ta-selected' : ''}`}>
+            <button type="button" className="ta-chat-item" title={`${title}\n${source.title}`} aria-current={selected ? 'true' : undefined} onClick={onSelect}>
+                <span className={`ta-chat-avatar ta-tone-${source.tone}`} aria-hidden="true">
+                    {source.initial}
+                </span>
+                <span className="ta-chat-text">
+                    <span className="ta-chat-line">
+                        <span className="ta-chat-title">{title}</span>
+                        <span className="ta-chat-time">{ChatListUtil.clock(session.updatedAt, now)}</span>
+                    </span>
+                    <span className="ta-chat-line">
+                        <span className="ta-chat-sub">{source.label}</span>
+                        {session.isStreaming && <span className="ta-spinner" />}
+                    </span>
+                </span>
+            </button>
+            <IconButton className="ta-chat-delete" icon={Trash2} label={t('ta.sidebar.closeTitle')} onClick={onClose} />
+        </li>
+    );
+}
+
+export interface ChatListProps {
+    /** Before the search: the tabs of the sidebar. */
+    tabs?: React.ReactNode;
+    sessions: TaSessionInfo[];
+    selected?: string;
+    chat: TaChat;
+    /** After a chat was picked or a new one shown: a drawer closes. */
+    onPicked(): void;
+}
+
+/** The open sessions of the server, the latest first by day, with a search, a filter by directory or package, and `+` for a new one. */
+export function ChatList({ tabs, sessions, selected, chat, onPicked }: ChatListProps) {
+    const t = useT();
+    const now = useMinute();
+    const [query, setQuery] = React.useState('');
+    const [filter, setFilter] = React.useState('');
+    const pick = (change: Promise<void>) => change.then(onPicked);
+    const sources = ChatListUtil.sources(sessions);
+    const source = sources.find(candidate => candidate.key === filter);
+    const shown = ChatListUtil.filter(sessions, source ? filter : '', query, t);
+    const byKey = new Map(sources.map(candidate => [candidate.key, candidate]));
+    // The conversation shown is found in the list, however it came to be shown: out of a search or a filter that hides it, and scrolled to.
+    const scroller = React.useRef<HTMLDivElement>(null);
+    const reveal = React.useRef(false);
+    const hidden = !!selected && sessions.some(session => session.sessionId === selected) && !shown.some(session => session.sessionId === selected);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only when another conversation is shown
+    React.useEffect(() => {
+        reveal.current = !!selected;
+        if (hidden) {
+            setQuery('');
+            setFilter('');
+        }
+    }, [selected]);
+    React.useEffect(() => {
+        const row = reveal.current ? scroller.current?.querySelector('[aria-current="true"]') : null;
+        if (row) {
+            reveal.current = false;
+            row.scrollIntoView({ block: 'nearest' });
+        }
+    });
+    return (
+        <section className="ta-chats" aria-label={t('ta.chat')}>
+            <header className="ta-chats-head">
+                {tabs}
+                <label className="ta-chats-search">
+                    <Icon icon={Search} size={15} />
+                    <input value={query} placeholder={t('ta.chat.search')} aria-label={t('ta.chat.search')} onChange={event => setQuery(event.target.value)} />
+                    {query && <IconButton className="ta-chats-clear" icon={X} label={t('ta.close')} onClick={() => setQuery('')} />}
+                </label>
+                <IconButton className="ta-chats-add" icon={Plus} label={t('ta.chat.new')} onClick={() => pick(chat.draft())} />
+            </header>
+            {sources.length > 1 && (
+                <div className="ta-chips" role="tablist" aria-label={t('ta.chat')}>
+                    <button type="button" role="tab" aria-selected={!source} className="ta-chip-filter" onClick={() => setFilter('')}>
+                        {t('ta.chat.all')}
+                    </button>
+                    {sources.map(candidate => (
+                        <button
+                            key={candidate.key}
+                            type="button"
+                            role="tab"
+                            aria-selected={candidate === source}
+                            className="ta-chip-filter"
+                            title={candidate.title}
+                            onClick={() => setFilter(candidate === source ? '' : candidate.key)}
+                        >
+                            <span className={`ta-chip-dot ta-tone-${candidate.tone}`} />
+                            {candidate.label}
+                            <span className="ta-chip-count">{candidate.count}</span>
+                        </button>
+                    ))}
+                </div>
+            )}
+            <div className="ta-side-scroll" ref={scroller}>
+                {ChatListUtil.sections(shown, now).map(section => (
+                    <section key={section.id} className="ta-chat-section">
+                        <div className="ta-chat-section-title">{t(section.id)}</div>
+                        <ul className="ta-side-list">
+                            {section.sessions.map(session => (
+                                <ChatItem
+                                    key={session.sessionId}
+                                    session={session}
+                                    source={byKey.get(ChatListUtil.sourceKey(session)) as ChatSource}
+                                    selected={session.sessionId === selected}
+                                    now={now}
+                                    onSelect={() => pick(chat.show(session.sessionId))}
+                                    onClose={() => void chat.close(session.sessionId)}
+                                />
+                            ))}
+                        </ul>
+                    </section>
+                ))}
+                {shown.length === 0 && <div className="ta-side-empty">{t(sessions.length ? 'ta.chat.noMatch' : 'ta.chat.none')}</div>}
+            </div>
+        </section>
+    );
+}

package/src/browser/components/code-editor.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { type MonacoApi, MonacoLoader, MonacoUtil } from '../editor/monaco-loader';
+import type { CodeEditorProps } from '../extension/web-extension-api';
+import { useT } from '../i18n/use-t';
+import type { TaSettings } from '../settings/settings-protocol';
+
+type Editor = ReturnType<MonacoApi['editor']['create']>;
+
+let models = 0;
+
+/** Monaco on the text of a file, in the theme of `settings`; it loads the first time one is shown. */
+export function CodeEditor({
+    settings: store,
+    path,
+    value,
+    readOnly = false,
+    line,
+    column,
+    endColumn,
+    selection,
+    onChange,
+    onSave,
+}: CodeEditorProps & { settings: TaSettings }) {
+    const t = useT();
+    const settings = React.useSyncExternalStore(
+        listener => store.subscribe(listener),
+        () => store.state,
+    );
+    const host = React.useRef<HTMLDivElement>(null);
+    const [monaco, setMonaco] = React.useState<MonacoApi>();
+    const [error, setError] = React.useState<string>();
+    const [editor, setEditor] = React.useState<Editor>();
+    const callbacks = React.useRef({ onChange, onSave });
+    callbacks.current = { onChange, onSave };
+    /** A change from `value`, which is not the user's: onChange does not hear it. */
+    const applying = React.useRef(false);
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Monaco loads once, in the language of that time
+    React.useEffect(() => {
+        let live = true;
+        MonacoLoader.load(settings.language).then(
+            loaded => live && setMonaco(() => loaded),
+            failure => live && setError(failure instanceof Error ? failure.message : String(failure)),
+        );
+        return () => {
+            live = false;
+        };
+    }, []);
+
+    React.useEffect(() => {
+        if (monaco) {
+            MonacoUtil.applyTheme(monaco, settings.theme);
+        }
+    }, [monaco, settings.theme]);
+
+    // One model and one editor for each file; the value of that time is its text.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: later values and readOnly are applied by the effects below, without a new editor
+    React.useEffect(() => {
+        if (!monaco || !host.current) {
+            return;
+        }
+        const uri = monaco.Uri.from({ scheme: 'ta', path: `/${++models}/${path.replace(/^\/+/, '')}` });
+        const model = monaco.editor.createModel(value, undefined, uri);
+        const created = monaco.editor.create(host.current, { model, readOnly, ...MonacoUtil.editorOptions() });
+        const changes = model.onDidChangeContent(() => {
+            if (!applying.current) {
+                callbacks.current.onChange?.(model.getValue());
+            }
+        });
+        created.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => callbacks.current.onSave?.(model.getValue()));
+        setEditor(created);
+        return () => {
+            changes.dispose();
+            created.dispose();
+            model.dispose();
+            setEditor(undefined);
+        };
+    }, [monaco, path]);
+
+    // A new text from outside (the file changed on disk): an edit, so that undo goes back to the old one.
+    React.useEffect(() => {
+        const model = editor?.getModel();
+        if (model && model.getValue() !== value) {
+            applying.current = true;
+            try {
+                model.pushEditOperations(editor?.getSelections() ?? [], [{ range: model.getFullModelRange(), text: value }], () => null);
+            } finally {
+                applying.current = false;
+            }
+        }
+    }, [editor, value]);
+
+    React.useEffect(() => editor?.updateOptions({ readOnly }), [editor, readOnly]);
+
+    const range = MonacoUtil.range(selection ?? MonacoUtil.lineSelection(line, column, endColumn));
+    const rangeKey = range && `${range.startLineNumber}:${range.startColumn}:${range.endLineNumber}:${range.endColumn}`;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the same lines are not selected again
+    React.useEffect(() => {
+        const model = editor?.getModel();
+        if (editor && model && range) {
+            // Past the end of the file: its last line, as the link points to what it had.
+            const valid = model.validateRange(range);
+            editor.setSelection(valid);
+            editor.revealRangeInCenter(valid);
+        }
+    }, [editor, rangeKey]);
+
+    return (
+        <div className="ta-code-editor">
+            <div ref={host} className="ta-code-editor-host" />
+            {!editor && <div className="ta-code-editor-state">{error ? t('ta.editor.failed', { message: error }) : t('ta.editor.loading')}</div>}
+        </div>
+    );
+}