@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/chat/ui/BookmarkSubmenu.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, Pencil, X } from 'lucide-react';
+import { goToBookmark, removeBookmark } from '../bookmarks';
+import { bookmarkLabel, bookmarksInThreadOrder } from '../logic/bookmarks';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatRow } from '../../state/chats';
+import { Icon, Menu } from '@adecore/ui';
+
+/*
+ * "Bookmarks" in the menu of a chat node or a chat view: the chat's bookmarks in the order of the
+ * thread, each a jump to its message, with rename and remove on the row. A chat without bookmarks
+ * draws nothing.
+ */
+export function BookmarkSubmenu({ chatId }: { chatId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const bookmarks = useChatRow(chatId, (row) => row?.bookmarks);
+    const order = useChatRow(chatId, (row) => row?.order);
+    const place = chatHost().useChatPlace(chatId);
+    const sorted = useMemo(() => bookmarksInThreadOrder(bookmarks ?? [], order ?? []), [bookmarks, order]);
+    if (sorted.length === 0) {
+        return null;
+    }
+
+    const go = (itemId: string, rename: boolean): void => {
+        if (!goToBookmark(scope, chatId, itemId, rename)) {
+            place.go();
+        }
+    };
+
+    return (
+        <Menu.SubmenuRoot>
+            <Menu.SubmenuTrigger>
+                <Icon icon={Bookmark} size={14} /> {t('bookmarks.menu')}
+            </Menu.SubmenuTrigger>
+            <Menu.Popup className="max-w-80 min-w-56">
+                {sorted.map((bookmark) => (
+                    <Menu.Row key={bookmark.itemId} aria-label={bookmarkLabel(bookmark)}>
+                        <Menu.Item onClick={() => go(bookmark.itemId, false)}>
+                            <Icon icon={Bookmark} size={14} className="shrink-0 text-accent" />
+                            <span className={clsx('min-w-0 grow truncate', bookmark.name === undefined && 'text-text-muted')}>{bookmarkLabel(bookmark)}</span>
+                        </Menu.Item>
+                        <Menu.RowAction icon={Pencil} label={t('bookmarks.rename')} onClick={() => go(bookmark.itemId, true)} />
+                        <Menu.RowAction icon={X} label={t('bookmarks.remove')} onClick={() => void removeBookmark(scope, chatId, bookmark)} />
+                    </Menu.Row>
+                ))}
+            </Menu.Popup>
+        </Menu.SubmenuRoot>
+    );
+}

package/src/chat/ui/ChatActivity.tsx

@@ -0,0 +1,198 @@
+import { useMemo, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Activity, Square, SquareTerminal } from 'lucide-react';
+import type { ChatBackgroundTask, ChatSubagentItem } from '@adecore/agent-contracts';
+import { backgroundCounts } from '../activity';
+import { badgeCountOf, entryTimeOf, flyoutSubagents, statusWordOf, subagentTitle, summaryWordOf, taskIdOf } from '../subagent-list';
+import { useSubagentSupport } from '../subagent-support';
+import { canOpenSubagent, crumbOf, openFromMain, useSubagentTrail } from '../subagent-view';
+import { SubagentStopButton } from './SubagentStopButton';
+import { formatElapsedShort } from '@adecore/ui/format';
+import { Icon, IconButton, Popover, Surface, useNow } from '@adecore/ui';
+import { useChatRow } from '../../state/chats';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatActions } from '../actions';
+import { statusLookOf, type StatusWord } from '../../agents/status-look';
+
+const NO_TASKS: readonly ChatBackgroundTask[] = [];
+
+const NO_ITEMS: readonly string[] = [];
+
+const ROW_BODY = 'flex min-h-9 min-w-0 grow items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left';
+
+/* What the chat keeps working on beside the thread, in one small line over the composer: its sub-agents and what runs in the background. */
+export function ChatActivity({ chatId }: { chatId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const order = useChatRow(chatId, (row) => row?.order) ?? NO_ITEMS;
+    const structure = useChatRow(chatId, (row) => row?.structure);
+    const subagents = useMemo(() => (structure === undefined ? [] : flyoutSubagents(order, structure)), [order, structure]);
+    const { id } = useChatScope();
+    const tasks = chatHost().tasks.useTasks(id);
+    const words = useMemo(
+        () =>
+            subagents.map((item) => {
+                const taskId = taskIdOf(item);
+                return statusWordOf(item, taskId === null ? null : (tasks?.[taskId] ?? null));
+            }),
+        [subagents, tasks]
+    );
+    const background = useChatRow(chatId, (row) => row?.info.background) ?? NO_TASKS;
+    if (subagents.length === 0 && background.length === 0) {
+        return null;
+    }
+    const { shells, monitors } = backgroundCounts(background);
+    const Slot = chatHost().SubagentSlot;
+    return (
+        <div className="mb-3 flex flex-wrap items-center gap-2">
+            {subagents.length > 0 &&
+                (Slot === null ? (
+                    <Flyout
+                        icon={<StatusIcon word={summaryWordOf(words)} />}
+                        label={t('activity.subagents', { count: badgeCountOf(words) })}
+                        heading={t('activity.subagents', { count: subagents.length })}
+                    >
+                        <SubagentRows chatId={chatId} items={subagents} />
+                    </Flyout>
+                ) : (
+                    <Slot chatId={chatId} items={subagents} />
+                ))}
+            {background.length > 0 && (
+                <Flyout
+                    icon={<Icon icon={shells > 0 ? SquareTerminal : Activity} size={14} />}
+                    label={[shells > 0 && t('activity.shells', { count: shells }), monitors > 0 && t('activity.monitors', { count: monitors })]
+                        .filter(Boolean)
+                        .join(' · ')}
+                >
+                    <BackgroundTaskRows chatId={chatId} tasks={background} />
+                </Flyout>
+            )}
+        </div>
+    );
+}
+
+export function StatusIcon({ word }: { word: StatusWord }) {
+    const look = statusLookOf(word);
+    return <Icon icon={look.icon} size={14} className={clsx('shrink-0', look.tone, look.spins && 'animate-spin')} />;
+}
+
+/* A chip that opens a list over it, headed by what the chip says unless the list counts more than the chip does. */
+function Flyout({ icon, label, heading = label, children }: { icon: ReactNode; label: string; heading?: string; children: ReactNode }) {
+    return (
+        <Popover.Root>
+            <Surface
+                render={<Popover.Trigger />}
+                className="pointer-events-auto inline-flex h-7.5 items-center gap-1.5 rounded-full px-3 text-xs text-text-muted hover:text-text"
+            >
+                {icon}
+                {label}
+            </Surface>
+            <Popover.Popup side="top" className="w-80">
+                <div className="px-2.5 pt-1.5 pb-1 text-xs text-text-faint">{heading}</div>
+                {children}
+            </Popover.Popup>
+        </Popover.Root>
+    );
+}
+
+/* One line of a flyout; with `onOpen` the line leads somewhere and closes the flyout on the way. */
+function ActivityRow({
+    icon,
+    title,
+    detail,
+    time,
+    onOpen,
+    children
+}: {
+    icon: ReactNode;
+    title: ReactNode;
+    detail?: string | null;
+    time: string;
+    onOpen?: () => void;
+    children?: ReactNode;
+}) {
+    const body = (
+        <>
+            {icon}
+            <span className="flex min-w-0 grow flex-col">
+                <span className="truncate text-sm text-text">{title}</span>
+                {detail && <span className="truncate font-mono text-xs text-text-faint">{detail}</span>}
+            </span>
+            {time !== '' && <span className="shrink-0 text-xs text-text-faint tabular-nums">{time}</span>}
+        </>
+    );
+    // The stop is a button of its own beside the line, since a button cannot hold another.
+    return (
+        <div className={clsx('flex items-center gap-1 rounded-md', onOpen && 'hover:bg-surface-hover')}>
+            {onOpen ? (
+                <Popover.Close className={ROW_BODY} onClick={onOpen}>
+                    {body}
+                </Popover.Close>
+            ) : (
+                <div className={ROW_BODY}>{body}</div>
+            )}
+            {children}
+        </div>
+    );
+}
+
+/* Only drawn while the flyout is open, so the clock ticks for nobody otherwise. */
+function SubagentRows({ chatId, items }: { chatId: string; items: readonly ChatSubagentItem[] }) {
+    const now = useNow(
+        1000,
+        items.some((item) => item.status === 'running')
+    );
+    return items.map((item) => <SubagentEntry key={item.id} chatId={chatId} item={item} now={now} />);
+}
+
+function SubagentEntry({ chatId, item, now }: { chatId: string; item: ChatSubagentItem; now: number }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    const task = chatHost().tasks.useTask(id, taskIdOf(item));
+    const { show } = useSubagentTrail(chatId);
+    const word = statusWordOf(item, task);
+    return (
+        <ActivityRow
+            icon={<StatusIcon word={word} />}
+            title={
+                <>
+                    {subagentTitle(item)}
+                    {/* The icon says the state to the eye; a screen reader hears it with the title. */}
+                    <span className="sr-only">, {t(`common.status.${word}`)}</span>
+                </>
+            }
+            time={entryTimeOf(item, task, now)}
+            onOpen={canOpenSubagent(item, refused) ? () => show(openFromMain(crumbOf(item))) : undefined}
+        >
+            <SubagentStopButton chatId={chatId} item={item} className="mr-1.5" />
+        </ActivityRow>
+    );
+}
+
+/* Only drawn while the flyout is open, so the clock ticks for nobody otherwise. */
+function BackgroundTaskRows({ chatId, tasks }: { chatId: string; tasks: readonly ChatBackgroundTask[] }) {
+    const { t } = useTranslation('agent-chat');
+    const now = useNow(1000);
+    const actions = useChatActions();
+
+    function stop(taskId: string): void {
+        void actions.stopTask(chatId, taskId).catch((e: unknown) => {
+            const description = e instanceof Error ? e.message : t('subagents.noAnswer');
+            chatHost().notify({ kind: 'error', title: t('activity.stopFailed'), description });
+        });
+    }
+
+    return tasks.map((task) => (
+        <ActivityRow
+            key={task.id}
+            icon={<Icon icon={task.kind === 'shell' ? SquareTerminal : Activity} size={14} className="shrink-0 text-text-faint" />}
+            title={task.description || task.command || t(`activity.${task.kind}`)}
+            detail={task.description ? task.command : null}
+            time={formatElapsedShort(now - task.startedAt)}
+        >
+            <IconButton icon={Square} size="xs" label={t('activity.stop')} className="mr-1.5" onClick={() => stop(task.id)} />
+        </ActivityRow>
+    ));
+}

package/src/chat/ui/ChatReferenceChip.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { MessageSquare, X } from 'lucide-react';
+import { chatHost } from '../../host';
+import { CHIP_IN_MESSAGE, MENTION_TONE } from './chips';
+import { Icon, Tooltip } from '@adecore/ui';
+
+/* A chat attached to a message, under the title it has now rather than the one it had when it was attached. */
+export function ChatReferenceChip({ chatId, onRemove }: { chatId: string; onRemove?: () => void }) {
+    const { t } = useTranslation('agent-chat');
+    const chat = chatHost()
+        .useReferableChats()
+        .find((candidate) => candidate.id === chatId);
+    const title = chat === undefined ? t('chatReference.gone') : chat.title || t('chatReference.untitled');
+    return (
+        <span className={clsx(MENTION_TONE, CHIP_IN_MESSAGE)}>
+            <Icon icon={MessageSquare} size={12} className="shrink-0" />
+            <span className="truncate">{title}</span>
+            {onRemove && (
+                <Tooltip label={t('chatReference.remove', { title })} name>
+                    <button className="-mr-0.5 shrink-0 rounded-sm opacity-70 hover:opacity-100" onClick={onRemove}>
+                        <Icon icon={X} size={12} />
+                    </button>
+                </Tooltip>
+            )}
+        </span>
+    );
+}

package/src/chat/ui/CodeBlock.tsx

@@ -0,0 +1,175 @@
+import { Fragment, memo, useContext, useEffect, useMemo, useState, type CSSProperties } from 'react';
+import clsx from 'clsx';
+import type { BundledLanguage, BundledTheme, createHighlighter, ThemeRegistration } from 'shiki/bundle/web';
+import { IncrementalLines, type CodeToken, type Tokenize } from './code-lines';
+import { CodeStreamingContext } from './code-streaming';
+import { WHOLE_FADE_CLASS } from './rehype-fade';
+import { shikiThemeOf, useCodeTheme } from './code-theme';
+
+type Highlighter = Awaited<ReturnType<typeof createHighlighter>>;
+type GrammarState = ReturnType<Highlighter['getLastGrammarState']>;
+// A plain language needs no grammar; shiki draws it in the theme's own foreground.
+const PLAIN = 'text';
+
+let highlighter: Highlighter | null = null;
+let highlighterLoad: Promise<Highlighter> | null = null;
+const loadedLanguages = new Set<string>([PLAIN]);
+const languageLoads = new Map<string, Promise<void>>();
+const loadedThemes = new Set<string>();
+const themeLoads = new Map<string, Promise<void>>();
+const tokenizers = new Map<string, { tokenize: Tokenize<GrammarState>; fg: string | undefined }>();
+
+// Shiki loads on the first code block, not with the app; the web bundle covers the languages a coding agent writes.
+function loadHighlighter(): Promise<Highlighter> {
+    highlighterLoad ??= import('shiki/bundle/web').then(async ({ createHighlighter }) => {
+        highlighter = await createHighlighter({ themes: [], langs: [] });
+        return highlighter;
+    });
+    return highlighterLoad;
+}
+
+function resolveLanguage(lang: string, known: Record<string, unknown> | null): string {
+    return known !== null && lang in known ? lang : PLAIN;
+}
+
+let bundled: Record<string, unknown> | null = null;
+
+/* Loads the highlighter and the grammar of one language, once each. */
+function loadLanguage(lang: string): Promise<void> {
+    let load = languageLoads.get(lang);
+    if (!load) {
+        load = Promise.all([loadHighlighter(), import('shiki/bundle/web')]).then(async ([loaded, { bundledLanguages }]) => {
+            bundled = bundledLanguages;
+            const language = resolveLanguage(lang, bundledLanguages);
+            if (!loadedLanguages.has(language)) {
+                await loaded.loadLanguage(language as BundledLanguage);
+                loadedLanguages.add(language);
+            }
+        });
+        languageLoads.set(lang, load);
+    }
+    return load;
+}
+
+/* Loads a theme into the highlighter, once. */
+function loadTheme(theme: string): Promise<void> {
+    let load = themeLoads.get(theme);
+    if (!load) {
+        load = loadHighlighter().then(async (loaded) => {
+            await loaded.loadTheme(shikiThemeOf(theme) as BundledTheme | ThemeRegistration);
+            loadedThemes.add(theme);
+        });
+        themeLoads.set(theme, load);
+    }
+    return load;
+}
+
+/* The tokenizer for a language in a theme, or null while shiki, the grammar or the theme is still on its way. */
+function tokenizerFor(lang: string, theme: string): { tokenize: Tokenize<GrammarState>; fg: string | undefined } | null {
+    if (highlighter === null || bundled === null || !languageLoads.has(lang) || !loadedThemes.has(theme)) {
+        return null;
+    }
+    const language = resolveLanguage(lang, bundled);
+    if (!loadedLanguages.has(language)) {
+        return null;
+    }
+    const key = `${language}:${theme}`;
+    let entry = tokenizers.get(key);
+    if (!entry) {
+        const loaded = highlighter;
+        const options = { lang: language as BundledLanguage, theme };
+        entry = {
+            tokenize: (code, state) => {
+                const result = loaded.codeToTokens(code, state ? { ...options, grammarState: state } : options);
+                return { lines: result.tokens, state: result.grammarState };
+            },
+            fg: loaded.getTheme(theme).fg
+        };
+        tokenizers.set(key, entry);
+    }
+    return entry;
+}
+
+function styleOf(token: CodeToken): CSSProperties | undefined {
+    const style = token.fontStyle ?? 0;
+    if (token.color === undefined && style <= 0) {
+        return undefined;
+    }
+    const decorations = [style & 4 ? 'underline' : '', style & 8 ? 'line-through' : ''].filter(Boolean).join(' ');
+    return {
+        color: token.color,
+        ...(style & 1 ? { fontStyle: 'italic' } : {}),
+        ...(style & 2 ? { fontWeight: 'bold' } : {}),
+        ...(decorations ? { textDecoration: decorations } : {})
+    };
+}
+
+/* A line whose tokens did not change keeps its elements, so a selection in it survives the next delta. */
+const CodeLine = memo(function CodeLine({ tokens }: { tokens: CodeToken[] }) {
+    return (
+        <span className="line">
+            {tokens.map((token, index) => (
+                <span key={index} style={styleOf(token)}>
+                    {token.content}
+                </span>
+            ))}
+        </span>
+    );
+});
+
+/*
+ * A fenced block, highlighted a line at a time. Until shiki and the grammar are there it holds its
+ * place invisibly in the same shape, so there is never a frame of bare code that turns colored. A
+ * fence that is still open is tokenized as it grows, and the same component carries on once it
+ * closes, so closing it does not draw it again.
+ */
+export function CodeBlock({ code, lang }: { code: string; lang: string }) {
+    const theme = useCodeTheme();
+    const streaming = useContext(CodeStreamingContext);
+    // What loaded last, so a block whose theme changes draws again once the new one is in.
+    const [loaded, setLoaded] = useState<string | null>(null);
+    const tokenizer = tokenizerFor(lang, theme);
+    // Only a block that had to wait fades in; one drawn highlighted from its first frame just stands there.
+    const [waited] = useState(tokenizer === null);
+    const lines = useMemo(() => (tokenizer ? new IncrementalLines(tokenizer.tokenize) : null), [tokenizer]);
+    const tokens = useMemo(() => lines?.update(code, !streaming) ?? null, [lines, code, streaming]);
+
+    useEffect(() => {
+        if (tokenizer !== null) {
+            return;
+        }
+        let cancelled = false;
+        Promise.all([loadLanguage(lang), loadTheme(theme)])
+            .then(() => !cancelled && setLoaded(`${lang}:${theme}`))
+            .catch(() => !cancelled && setLoaded('failed'));
+        return () => {
+            cancelled = true;
+        };
+    }, [lang, theme, tokenizer]);
+
+    if (tokenizer === null || tokens === null) {
+        const failed = loaded === 'failed';
+        return (
+            <div className={clsx('chat-code', !failed && 'invisible')} aria-hidden={failed ? undefined : true}>
+                <pre>
+                    <code>{code}</code>
+                </pre>
+            </div>
+        );
+    }
+    return (
+        <div className={clsx('chat-code', waited && WHOLE_FADE_CLASS)}>
+            <pre style={{ color: tokenizer.fg }}>
+                <code>
+                    {tokens.map((line, index) => (
+                        // Lines only ever grow at the end, so the place of a line is a stable key.
+                        <Fragment key={index}>
+                            <CodeLine tokens={line} />
+                            {index < tokens.length - 1 && '\n'}
+                        </Fragment>
+                    ))}
+                </code>
+            </pre>
+        </div>
+    );
+}