@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/chat-sheet.js

@@ -0,0 +1,544 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The Ask Ciridae sheet: the agent's conversation about the page the user is on, as a chat.
+ * Docked, it is an aside beside the page inside `AppShell`; as a drawer, it is the lib's sheet
+ * over the page. The host owns the chat client, which conversation is open, the lines the
+ * page adds to the thread and what a mention does on the page; the sheet owns the thread, the
+ * composer, the files waiting to go with a message and the in-flight states. Files dropped
+ * on the conversation, pasted into it or picked with the paperclip upload as they arrive.
+ * `ChatConversation` is the same thread and composer without the sheet, such as for a full page.
+ *
+ * `variant="agent"`, the default, is one long-running thread with the main agent: the tasks it
+ * runs post cards into the thread under day labels, and a line over the thread sums up what it
+ * is working on and what waits on the user. `variant="conversations"` is a chat per question.
+ */
+import { ArrowsOutSimpleIcon, ArrowSquareOutIcon, PaperclipIcon, SidebarSimpleIcon, SparkleIcon, XIcon, } from "@phosphor-icons/react";
+import { Fragment, useRef, useState, } from "react";
+import { css, cx } from "#primitives/css";
+import { parseMentions } from "../chat/contract.js";
+import { describeApprovalRequest } from "../chat/describe-tool-call.js";
+import { MessageText, splitSources } from "../chat/message-text.js";
+import { useChatConversation } from "../chat/use-chat-conversation.js";
+import { AgentTaskCard, AgentWork } from "./agent-work.js";
+import { Button, IconButton } from "./button.js";
+import { ChatComposer, ChatSuggestions, ChatThread } from "./chat.js";
+import { CopyButton } from "./copyable-id.js";
+import { Drawer, DrawerBody } from "./drawer.js";
+import { Dropzone, DropzoneFileList } from "./dropzone.js";
+import { icon } from "./icon.js";
+import { heading } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+/* The docked aside, drawn like the shell's main panel beside it. */
+const docked = css({
+    display: "flex",
+    flexDirection: "column",
+    flexShrink: "0",
+    width: "overlay.sheetDocked",
+    minHeight: "0",
+    border: "1px solid token(colors.border.panel)",
+    borderRadius: "action",
+    background: "bg.panel",
+    color: "fg.primary",
+    overflow: "hidden",
+    textStyle: "body",
+    position: "relative",
+});
+/*
+ * The gap between the page and the docked sheet: drag or arrow keys to widen the sheet,
+ * double-click for its default. A line down its middle shows while it is held or hovered.
+ */
+const resizeHandle = css({
+    position: "relative",
+    flexShrink: "0",
+    width: "token(spacing.panel.compact)",
+    cursor: "col-resize",
+    touchAction: "none",
+    outline: "none",
+    "&::after": {
+        content: '""',
+        position: "absolute",
+        insetBlock: "0",
+        left: "50%",
+        width: "token(spacing.control.trackInset)",
+        transform: "translateX(-50%)",
+        transitionProperty: "background",
+        transitionDuration: "fast",
+    },
+    "&:hover::after, &:focus-visible::after, &[data-dragging]::after": {
+        background: "border.focus",
+    },
+});
+const MIN_DOCKED_WIDTH = 360;
+const MAX_DOCKED_WIDTH = 720;
+const RESIZE_KEY_STEP = 16;
+function clampDockedWidth(width) {
+    const maximum = Math.min(MAX_DOCKED_WIDTH, window.innerWidth / 2);
+    return Math.round(Math.min(Math.max(width, MIN_DOCKED_WIDTH), maximum));
+}
+/** The docked width the person dragged to, or null for the token's default. */
+function useDockedWidth(asideRef) {
+    const [width, setWidth] = useState(null);
+    const [dragging, setDragging] = useState(false);
+    const { labels } = useCiridaeLocale();
+    const handleProps = {
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": labels.chat.resize,
+        "aria-valuemin": MIN_DOCKED_WIDTH,
+        "aria-valuemax": MAX_DOCKED_WIDTH,
+        "aria-valuenow": width ?? undefined,
+        tabIndex: 0,
+        "data-dragging": dragging || undefined,
+        onPointerDown: (event) => {
+            const aside = asideRef.current;
+            if (!aside)
+                return;
+            const startX = event.clientX;
+            const startWidth = aside.getBoundingClientRect().width;
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setDragging(true);
+            const move = (moveEvent) => setWidth(clampDockedWidth(startWidth + startX - moveEvent.clientX));
+            const stop = () => {
+                setDragging(false);
+                window.removeEventListener("pointermove", move);
+                window.removeEventListener("pointerup", stop);
+            };
+            window.addEventListener("pointermove", move);
+            window.addEventListener("pointerup", stop);
+        },
+        onKeyDown: (event) => {
+            const step = event.key === "ArrowLeft"
+                ? RESIZE_KEY_STEP
+                : event.key === "ArrowRight"
+                    ? -RESIZE_KEY_STEP
+                    : 0;
+            if (step === 0)
+                return;
+            event.preventDefault();
+            // Until it is dragged the sheet sits at the token's width, so the first step starts there.
+            const rendered = asideRef.current?.getBoundingClientRect().width ?? MIN_DOCKED_WIDTH;
+            setWidth((current) => clampDockedWidth((current ?? rendered) + step));
+        },
+        onDoubleClick: () => setWidth(null),
+    };
+    return { width, handleProps };
+}
+const dockedHeader = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.contentGap",
+    paddingBlock: "panel.default",
+    paddingInlineStart: "panel.comfortable",
+    paddingInlineEnd: "panel.default",
+    borderBottom: "1px solid token(colors.border.control)",
+});
+const headerActions = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+const titleLine = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    "& svg": { color: "fg.muted" },
+});
+const contextRow = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    paddingBlock: "layout.controlGap",
+    paddingInline: "panel.comfortable",
+    borderBottom: "1px solid token(colors.border.control)",
+    color: "fg.muted",
+    fontSize: "code",
+});
+const contextChip = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    height: "control.shortcut",
+    paddingInlineStart: "control.block",
+    paddingInlineEnd: "control.iconInline",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "pill",
+    background: "bg.raised",
+    color: "fg.primary",
+    "& svg": { color: "fg.muted" },
+});
+/* The thread's scrolling area, between the header and the composer. */
+const threadScroll = css({ flex: "1", minHeight: "0", padding: "none", overflowY: "auto" });
+/* A card in the assistant's flow: an approval or a question, with its answers as flat rows. */
+const card = css({
+    display: "grid",
+    gap: "control.iconGap",
+    width: "100%",
+    maxWidth: "chat.bubble",
+    paddingBlock: "control.block",
+    paddingInline: "control.compactInline",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "field",
+    background: "bg.card",
+    fontSize: "caption",
+    lineHeight: "log",
+});
+const cardLabel = css({ color: "fg.muted", fontSize: "code", lineHeight: "compact" });
+const argumentList = css({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr)",
+    columnGap: "layout.controlGap",
+    margin: "none",
+    fontSize: "code",
+    lineHeight: "compact",
+    "& > dt": { color: "fg.muted", whiteSpace: "nowrap" },
+    "& > dd": { margin: "none", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+});
+const cardActions = css({ display: "flex", justifyContent: "flex-end", gap: "layout.controlGap" });
+// Option rows run to the card's edges, split by its hairlines.
+const optionList = css({
+    marginInline: "calc(token(spacing.control.compactInline) * -1)",
+    marginBlockEnd: "calc(token(spacing.control.block) * -1)",
+    "& > button": {
+        display: "block",
+        width: "100%",
+        paddingBlock: "control.compactBlock",
+        paddingInline: "control.compactInline",
+        border: "0",
+        borderTop: "1px solid token(colors.border.control)",
+        background: "transparent",
+        color: "fg.primary",
+        font: "inherit",
+        textAlign: "start",
+        cursor: "pointer",
+        _hover: { background: "bg.hover" },
+        _focusVisible: { focusRing: "inset" },
+        "&:last-child": { borderBottomLeftRadius: "field", borderBottomRightRadius: "field" },
+    },
+});
+const optionDetail = css({ display: "block", color: "fg.muted", fontSize: "code" });
+/* The thread and composer, the drop target for files; it fills what the sheet or page gives it. */
+const conversationRoot = css({
+    display: "flex",
+    flex: "1",
+    minHeight: "0",
+    flexDirection: "column",
+});
+const composerFooter = css({
+    display: "grid",
+    gap: "layout.tightGap",
+    flexShrink: "0",
+    paddingBlock: "layout.controlGap",
+    paddingInline: "panel.default",
+    borderTop: "1px solid token(colors.border.control)",
+    "&[data-layout=wide]": { borderTop: "0", paddingBlockEnd: "panel.default" },
+});
+/* Full page: the thread and composer in one readable column down the middle. */
+const wideColumn = css({ width: "100%", maxWidth: "chat.thread", marginInline: "auto" });
+const hiddenInput = css({ display: "none" });
+/* In a drawer, the context row and the conversation stack under its header. */
+const drawerStack = css({ display: "flex", flex: "1", minHeight: "0", flexDirection: "column" });
+/** How many of an approval's arguments show before the rest become "+N". */
+const maximumArgumentRows = 3;
+export function ChatSheet({ open, onOpenChange, title, context, placement = "drawer", onPlacementChange, onOpenFullPage, ...conversationProps }) {
+    const { variant = "agent", tasks } = conversationProps;
+    const { labels } = useCiridaeLocale();
+    const asideRef = useRef(null);
+    const dockedWidth = useDockedWidth(asideRef);
+    const titleContent = (_jsxs("span", { className: titleLine, children: [_jsx(SparkleIcon, { className: icon({ size: "small" }), weight: "fill" }), title] }));
+    const actions = (_jsxs(_Fragment, { children: [onOpenFullPage && (_jsx(IconButton, { "aria-label": labels.chat.openFullPage, variant: "ghost", size: "small", onClick: onOpenFullPage, children: _jsx(ArrowsOutSimpleIcon, { className: icon({ size: "small" }) }) })), onPlacementChange &&
+                (placement === "docked" ? (_jsx(IconButton, { "aria-label": labels.chat.undock, variant: "ghost", size: "small", onClick: () => onPlacementChange("drawer"), children: _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) }) })) : (_jsx(IconButton, { "aria-label": labels.chat.dock, variant: "ghost", size: "small", onClick: () => onPlacementChange("docked"), children: _jsx(SidebarSimpleIcon, { className: icon({ size: "small" }), mirrored: true }) })))] }));
+    const contextContent = (_jsxs(_Fragment, { children: [context && context.length > 0 && (_jsxs("div", { className: contextRow, children: ["Reading", context.map((item) => (_jsxs("span", { className: contextChip, "data-ciridae-ui": "", children: [item.icon, item.label] }, item.label)))] })), variant === "agent" && tasks && _jsx(AgentWork, { layout: "summary", tasks: tasks })] }));
+    if (placement === "docked") {
+        if (!open)
+            return null;
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeHandle, ...dockedWidth.handleProps }), _jsxs("aside", { ref: asideRef, className: docked, "data-ciridae-ui": "", "aria-label": typeof title === "string" ? title : undefined, style: dockedWidth.width === null ? undefined : { width: dockedWidth.width }, children: [_jsxs("header", { className: dockedHeader, children: [_jsx("h2", { className: cx(heading(), css({ lineHeight: "tight" })), children: titleContent }), _jsxs("div", { className: headerActions, children: [actions, _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost", size: "small", onClick: () => onOpenChange(false), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] })] }), contextContent, _jsx(ChatConversation, { ...conversationProps })] })] }));
+    }
+    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, size: "narrow", title: title, icon: _jsx(SparkleIcon, { className: icon({ size: "small" }), weight: "fill" }), actions: actions, children: _jsxs("div", { className: drawerStack, children: [contextContent, _jsx(ChatConversation, { ...conversationProps, scrollBody: DrawerBody })] }) }));
+}
+/* The files for the next message: each uploads as it is added; send waits until all have. */
+function useComposerFiles(client) {
+    const [entries, setEntries] = useState([]);
+    const remove = (file) => setEntries((existing) => existing.filter((entry) => entry.file !== file));
+    const add = (files) => {
+        setEntries((existing) => [...existing, ...files.map((file) => ({ file, attachment: null }))]);
+        for (const file of files) {
+            void client.uploadAttachment(file).then((attachment) => setEntries((existing) => existing.map((entry) => (entry.file === file ? { file, attachment } : entry))), (error) => {
+                remove(file);
+                throw error;
+            });
+        }
+    };
+    return {
+        files: entries.map((entry) => entry.file),
+        attachments: entries.flatMap((entry) => (entry.attachment ? [entry.attachment] : [])),
+        uploading: entries.some((entry) => entry.attachment === null),
+        add,
+        remove,
+        clear: () => setEntries([]),
+    };
+}
+/**
+ * The thread and the composer: everything that reads or writes the conversation. `layout="wide"`
+ * sets both in one readable column for a full page; the sheet uses `sheet`.
+ */
+export function ChatConversation({ client, conversationId, onConversationCreated, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events = [], assistantName: ownAssistantName, suggestions, copyReplies = false, variant = "agent", tasks, onTaskReply, layout = "sheet", scrollBody: ScrollBody = "div", }) {
+    const { labels } = useCiridaeLocale();
+    const assistantName = ownAssistantName ?? labels.chat.assistantName;
+    const state = useChatConversation({
+        client,
+        conversationId,
+        onConversationCreated,
+    });
+    const files = useComposerFiles(client);
+    const [sendError, setSendError] = useState(null);
+    const fileInputRef = useRef(null);
+    const send = async (content, sentAttachments) => {
+        setSendError(null);
+        try {
+            await state.sendMessage(content, sentAttachments);
+        }
+        catch (error) {
+            setSendError(error instanceof Error ? error : new Error(String(error)));
+        }
+    };
+    const renderReply = (content, plain) => (_jsx(MessageText, { content: content, plain: plain, onMentionSelect: onMentionSelect, mentionHref: mentionHref }));
+    const entries = buildThread({
+        labels: labels.chat,
+        items: state.items,
+        pendingMessages: state.pendingMessages,
+        response: state.response,
+        isResponseActive: state.isResponseActive,
+        events,
+        tasks: variant === "agent" ? (tasks ?? []) : [],
+        sendError,
+        renderReply,
+        replyActions: copyReplies ? (content) => _jsx(CopyReplyButton, { content: content }) : undefined,
+        attachmentUrl: (attachment) => client.getAttachmentUrl(attachment),
+        retryPending: (message) => {
+            state.discardPendingMessage(message.localId);
+            void send(message.content, message.attachments);
+        },
+        retryMessage: (message) => void send(message.content, message.attachments),
+    });
+    const wide = layout === "wide";
+    const showSuggestions = entries.length === 0 && !state.isLoading && suggestions !== undefined && suggestions.length > 0;
+    return (_jsxs(Dropzone, { onFiles: files.add, className: conversationRoot, children: [_jsx(ScrollBody, { className: threadScroll, children: showSuggestions ? (_jsx(ChatSuggestions, { className: cx(wide && wideColumn), suggestions: suggestions, onSelect: (suggestion) => void send(suggestion, []) })) : (_jsx(ChatThread, { className: cx(wide && wideColumn), entries: entries, density: "compact", attachmentTiles: true, dayLabels: true, assistant: { name: assistantName, kind: "agent" }, renderCustom: (card) => card.kind === "approval" ? (_jsx(ApprovalCard, { item: card.item, onDecide: state.decideApproval })) : card.kind === "question" ? (_jsx(QuestionCard, { item: card.item, onAnswer: state.answerQuestion })) : (_jsx(AgentTaskCard, { task: card.task, onReply: onTaskReply })) })) }), _jsx("div", { className: composerFooter, "data-layout": layout, children: _jsx("div", { className: cx(wide && wideColumn), children: _jsx(ChatComposer, { variant: "sheet", placeholder: placeholder, autoFocus: true, value: draft, onValueChange: onDraftChange, inputProps: { ref: composerRef }, mentions: mentions, mentionMark: mentionMark, sendDisabled: files.uploading, sendsWithoutText: files.attachments.length > 0, attachments: files.files.length > 0 && (_jsx(DropzoneFileList, { variant: "tiles", files: files.files, pending: files.uploading, onRemove: files.remove })), onSend: (content) => {
+                            void send(content, files.attachments);
+                            files.clear();
+                        }, tools: _jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": labels.chat.attachFile, size: "compact", variant: "ghost", onClick: () => fileInputRef.current?.click(), children: _jsx(PaperclipIcon, { className: icon({ size: "small" }) }) }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: hiddenInput, onChange: (event) => {
+                                        files.add(Array.from(event.target.files ?? []));
+                                        event.target.value = "";
+                                    } })] }) }) }) })] }));
+}
+/** Copies a reply's text, its mentions as their labels, and shows a tick for a moment. */
+function CopyReplyButton({ content }) {
+    return (_jsx(CopyButton, { variant: "inline", value: () => parseMentions(splitSources(content).body)
+            .map((part) => (typeof part === "string" ? part : part.label))
+            .join("") }));
+}
+/** The conversation's items, pending messages, page events and running state in one timeline. */
+function buildThread({ items, pendingMessages, response, isResponseActive, events, tasks, sendError, renderReply, replyActions, attachmentUrl, retryPending, retryMessage, labels, }) {
+    const entries = [];
+    const toAttachments = (attachments) => attachments.map((attachment) => ({
+        id: attachment.id,
+        name: attachment.name,
+        mediaType: attachment.media_type,
+        url: attachmentUrl(attachment),
+    }));
+    for (const item of items) {
+        const at = Date.parse(item.created_at);
+        const waitingOnUser = response?.id === item.response_id && response.status === "requires_action";
+        // A reply is done once its turn is: not still running, and not failed.
+        const turnUnfinished = response?.id === item.response_id && (isResponseActive || response.status === "failed");
+        switch (item.type) {
+            case "message": {
+                const { content } = item;
+                const { sources } = splitSources(content);
+                entries.push({
+                    kind: "message",
+                    id: item.id,
+                    side: item.role,
+                    at,
+                    // Files sent alone keep an empty body, so the thread draws their tiles with no bubble.
+                    body: content.trim() ? renderReply(content, item.role === "user") : "",
+                    attachments: toAttachments(item.attachments),
+                    sources: item.role === "assistant"
+                        ? sources.map((source) => ({
+                            id: source.id,
+                            label: source.label,
+                            href: source.href,
+                        }))
+                        : undefined,
+                    actions: item.role === "assistant" && !turnUnfinished ? replyActions?.(content) : undefined,
+                });
+                break;
+            }
+            case "approval_request":
+                if (item.decision === null && waitingOnUser) {
+                    entries.push({
+                        kind: "custom",
+                        id: item.id,
+                        side: "assistant",
+                        at,
+                        data: { kind: "approval", item },
+                    });
+                }
+                else if (item.decision !== null) {
+                    entries.push({
+                        kind: "line",
+                        id: item.id,
+                        at,
+                        text: `${describeApprovalRequest(item.tool)} · ${item.decision === "allow" ? "allowed" : "denied"}`,
+                    });
+                }
+                break;
+            case "question":
+                if (item.answers === null && waitingOnUser) {
+                    entries.push({
+                        kind: "custom",
+                        id: item.id,
+                        side: "assistant",
+                        at,
+                        data: { kind: "question", item },
+                    });
+                }
+                else if (item.answers !== null) {
+                    entries.push({
+                        kind: "line",
+                        id: item.id,
+                        at,
+                        text: labels.answered(item.answers.flat().filter(Boolean).join(", ")),
+                    });
+                }
+                break;
+            // What the agent runs on its way to a reply stays behind its typing.
+            case "function_call":
+            case "function_call_output":
+            case "reasoning":
+                break;
+        }
+    }
+    for (const event of events) {
+        entries.push({
+            kind: "line",
+            id: `event-${event.id}`,
+            at: Date.parse(event.at),
+            text: event.text,
+        });
+    }
+    // A waiting task is the agent asking; a finished one, its summary as a reply.
+    for (const task of tasks) {
+        if (task.status === "waiting" && task.ask) {
+            entries.push({
+                kind: "custom",
+                id: `task-${task.id}`,
+                side: "assistant",
+                at: Date.parse(task.ask.askedAt),
+                data: { kind: "task", task },
+            });
+        }
+        if ((task.status === "done" || task.status === "failed") && task.summary) {
+            entries.push({
+                kind: "message",
+                id: `task-${task.id}`,
+                side: "assistant",
+                at: Date.parse(task.finishedAt ?? task.startedAt),
+                body: renderReply(task.summary),
+                actions: task.status === "done" ? replyActions?.(task.summary) : undefined,
+            });
+        }
+    }
+    entries.sort((first, second) => first.at - second.at);
+    if (response?.status === "failed") {
+        const userMessages = items.filter((item) => item.type === "message" && item.role === "user" && item.response_id === response.id);
+        const lastUserMessage = userMessages[userMessages.length - 1];
+        if (lastUserMessage) {
+            entries.push({
+                kind: "failure",
+                id: `failure-${response.id}`,
+                at: Date.parse(response.completed_at ?? lastUserMessage.created_at),
+                message: response.error?.message ?? "Couldn’t finish",
+                onRetry: () => retryMessage(lastUserMessage),
+            });
+        }
+    }
+    if (response?.status === "cancelled") {
+        entries.push({
+            kind: "line",
+            id: `stopped-${response.id}`,
+            at: Date.parse(response.completed_at ?? response.created_at),
+            text: labels.stopped,
+        });
+    }
+    for (const message of pendingMessages) {
+        // A posted message the items already include would show twice until it is discarded.
+        if (message.state === "posted" && items.some((item) => isSameMessage(item, message)))
+            continue;
+        entries.push({
+            kind: "message",
+            id: message.localId,
+            side: "user",
+            at: message.sentAt,
+            body: message.content,
+            attachments: toAttachments(message.attachments),
+            sending: message.state === "sending",
+        });
+        if (message.state === "failed") {
+            entries.push({
+                kind: "failure",
+                id: `failure-${message.localId}`,
+                at: message.sentAt,
+                message: sendError?.message ?? labels.notSent,
+                onRetry: () => retryPending(message),
+            });
+        }
+    }
+    const last = entries[entries.length - 1];
+    if (isResponseActive &&
+        response?.status !== "requires_action" &&
+        !(last?.kind === "message" && last.side === "assistant")) {
+        entries.push({ kind: "typing", id: "typing", at: last?.at ?? Date.now() });
+    }
+    return entries;
+}
+/** A tool call waiting for the user: what it would do, its arguments, and Deny or Allow. */
+function ApprovalCard({ item, onDecide, }) {
+    const { labels } = useCiridaeLocale();
+    const rows = listArgumentRows(item.arguments);
+    return (_jsxs("div", { className: card, children: [_jsx("span", { children: describeApprovalRequest(item.tool) }), rows.length > 0 && (_jsxs("dl", { className: argumentList, children: [rows.slice(0, maximumArgumentRows).map(([name, value]) => (_jsxs(Fragment, { children: [_jsx("dt", { children: name }), _jsx("dd", { children: value })] }, name))), rows.length > maximumArgumentRows && (_jsxs("dd", { className: cardLabel, children: ["+", rows.length - maximumArgumentRows] }))] })), _jsxs("div", { className: cardActions, children: [_jsx(Button, { variant: "secondary", onClick: () => void onDecide(item, "deny"), children: labels.chat.deny }), _jsx(Button, { onClick: () => void onDecide(item, "allow"), children: labels.chat.allow })] })] }));
+}
+/** The assistant's questions, one option row per answer; picking one answers that question. */
+function QuestionCard({ item, onAnswer, }) {
+    const [picked, setPicked] = useState([]);
+    const questionIndex = picked.length;
+    const question = item.questions[questionIndex];
+    if (!question)
+        return null;
+    const pick = (label) => {
+        const answers = [...picked, label];
+        if (answers.length === item.questions.length) {
+            void onAnswer(item, answers.map((answer) => [answer]));
+        }
+        setPicked(answers);
+    };
+    return (_jsxs("div", { className: card, children: [_jsxs("span", { className: cardLabel, children: [question.header, item.questions.length > 1 && ` · ${questionIndex + 1} of ${item.questions.length}`] }), _jsx("span", { children: question.question }), _jsx("div", { className: optionList, children: question.options.map((option) => (_jsxs("button", { type: "button", onClick: () => pick(option.label), children: [option.label, option.description && _jsx("span", { className: optionDetail, children: option.description })] }, option.label))) })] }));
+}
+function isSameMessage(item, message) {
+    return (item.type === "message" &&
+        item.role === "user" &&
+        item.content === message.content &&
+        Date.parse(item.created_at) >= message.sentAt - 60000);
+}
+/** A call's JSON arguments as name and value pairs, values shortened to one line. */
+function listArgumentRows(argumentsJson) {
+    try {
+        const parsed = JSON.parse(argumentsJson);
+        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+            return [];
+        return Object.entries(parsed).map(([name, value]) => [
+            name.replace(/[_-]+/g, " "),
+            typeof value === "string" ? value : JSON.stringify(value),
+        ]);
+    }
+    catch {
+        return [];
+    }
+}