@ciridae/ui 1.0.1 → 1.0.3

package/dist/components/chat-sheet.js

@@ -2,32 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * 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.
+ * over the page. The host owns the conversation's `source` (the lib's chat client through
+ * `useChatClientSource`, or the app's own hooks), 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 { 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 { IconButton } from "./button.js";
+import { ChatComposer, ChatSuggestions, ChatSystemLine, 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 { Dropzone, DropzoneFileList, useDropzonePicker } from "./dropzone.js";
+import { icon, Spinner } from "./icon.js";
 import { heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
+export { useChatClientConversations, useChatClientSource, } from "./chat-client-source.js";
 /* The docked aside, drawn like the shell's main panel beside it. */
 const docked = css({
     display: "flex",
@@ -133,7 +133,7 @@ const dockedHeader = css({
     paddingInlineEnd: "panel.default",
     borderBottom: "1px solid token(colors.border.control)",
 });
-const headerActions = css({ display: "flex", alignItems: "center", gap: "layout.controlGap" });
+const headerActions = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
 const titleLine = css({
     display: "inline-flex",
     alignItems: "center",
@@ -166,54 +166,7 @@ const contextChip = css({
 });
 /* 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" });
+const centered = css({ display: "grid", placeItems: "center", height: "100%" });
 /* The thread and composer, the drop target for files; it fills what the sheet or page gives it. */
 const conversationRoot = css({
     display: "flex",
@@ -230,13 +183,12 @@ const composerFooter = css({
     borderTop: "1px solid token(colors.border.control)",
     "&[data-layout=wide]": { borderTop: "0", paddingBlockEnd: "panel.default" },
 });
+/* Over the composer, what goes with it: an error. */
+const footerStack = css({ display: "grid", gap: "layout.tightGap", minWidth: "0" });
 /* 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();
@@ -245,7 +197,7 @@ export function ChatSheet({ open, onOpenChange, title, context, placement = "dra
     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 })] }));
+    const contextContent = (_jsxs(_Fragment, { children: [context && context.length > 0 && (_jsxs("div", { className: contextRow, children: [labels.chat.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;
@@ -254,15 +206,17 @@ export function ChatSheet({ open, onOpenChange, title, context, placement = "dra
     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) {
+function useComposerFiles(upload, onUploadError) {
     const [entries, setEntries] = useState([]);
     const remove = (file) => setEntries((existing) => existing.filter((entry) => entry.file !== file));
     const add = (files) => {
+        if (!upload)
+            return;
         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) => {
+            upload(file).then((attachment) => setEntries((existing) => existing.map((entry) => (entry.file === file ? { file, attachment } : entry))), (error) => {
                 remove(file);
-                throw error;
+                onUploadError(error);
             });
         }
     };
@@ -279,54 +233,53 @@ function useComposerFiles(client) {
  * 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", }) {
+export function ChatConversation({ source, 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);
+    const [ownDraft, setOwnDraft] = useState("");
+    const currentDraft = draft ?? ownDraft;
+    const setDraft = (next) => {
+        setOwnDraft(next);
+        onDraftChange?.(next);
+    };
+    const [sending, setSending] = useState(false);
+    const [composerError, setComposerError] = useState(null);
+    const showError = (error) => setComposerError(error instanceof Error ? error.message : String(error));
+    const files = useComposerFiles(source.upload, showError);
+    const send = async (text) => {
+        setSending(true);
+        setComposerError(null);
         try {
-            await state.sendMessage(content, sentAttachments);
+            await source.send({ text, attachments: files.attachments });
+            files.clear();
         }
         catch (error) {
-            setSendError(error instanceof Error ? error : new Error(String(error)));
+            // The composer cleared as it sent: the text comes back, with the files still waiting.
+            setDraft(text);
+            showError(error);
+        }
+        finally {
+            setSending(false);
         }
     };
-    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,
+        source,
         events,
         tasks: variant === "agent" ? (tasks ?? []) : [],
-        sendError,
-        renderReply,
+        renderReply: (content, plain) => (_jsx(MessageText, { content: content, plain: plain, onMentionSelect: onMentionSelect, mentionHref: mentionHref })),
         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),
+        taskCard: (task) => _jsx(AgentTaskCard, { task: task, onReply: onTaskReply }),
     });
     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 = "";
-                                    } })] }) }) }) })] }));
+    const showSuggestions = entries.length === 0 && !source.loading && suggestions !== undefined && suggestions.length > 0;
+    return (_jsxs(Dropzone, { onFiles: files.add, disabled: !source.upload, className: conversationRoot, children: [_jsx(ScrollBody, { className: threadScroll, children: source.loading && entries.length === 0 ? (_jsx("div", { className: centered, children: _jsx(Spinner, { label: labels.common.loading }) })) : 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, resolveAttachmentUrl: source.resolveAttachmentUrl, assistant: { name: assistantName, kind: "agent" }, renderCustom: (content) => content })) }), _jsx("div", { className: composerFooter, "data-layout": layout, children: _jsxs("div", { className: cx(footerStack, wide && wideColumn), children: [composerError && (_jsx(ChatSystemLine, { tone: "error", role: "alert", children: composerError })), _jsx(ChatComposer, { variant: "sheet", placeholder: placeholder, autoFocus: true, value: currentDraft, onValueChange: setDraft, inputProps: { ref: composerRef }, mentions: mentions, mentionMark: mentionMark, sendDisabled: files.uploading || sending, sendsWithoutText: files.attachments.length > 0, onPasteFiles: source.upload ? files.add : undefined, attachments: files.files.length > 0 && (_jsx(DropzoneFileList, { variant: "tiles", files: files.files, pending: files.uploading, onRemove: files.remove })), onSend: (content) => void send(content), tools: source.upload && _jsx(AttachFilesButton, {}) })] }) })] }));
+}
+/** The paperclip: the enclosing `Dropzone`'s file picker. */
+function AttachFilesButton() {
+    const { labels } = useCiridaeLocale();
+    const picker = useDropzonePicker();
+    return (_jsx(IconButton, { "aria-label": labels.chat.attachFile, size: "compact", variant: "ghost", disabled: picker.disabled, onClick: picker.openPicker, children: _jsx(PaperclipIcon, { className: icon({ size: "small" }) }) }));
 }
 /** Copies a reply's text, its mentions as their labels, and shows a tick for a moment. */
 function CopyReplyButton({ content }) {
@@ -334,88 +287,23 @@ function CopyReplyButton({ content }) {
             .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, }) {
+/**
+ * The source's items, the page's events, the agent's tasks and how the latest turn stands, in one
+ * timeline: the turn's typing, failure or stop at its foot.
+ */
+function buildThread({ labels, source: { items, status, failureMessage, retry }, events, tasks, renderReply, replyActions, taskCard, }) {
     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;
-        }
-    }
+    // The latest turn is everything after the user's last message; its replies are done once it is.
+    let latestTurnStart = -1;
+    items.forEach((item, index) => {
+        if (item.kind === "message" && item.role === "user")
+            latestTurnStart = index;
+    });
+    const latestTurnUnfinished = status === "running" || status === "failed";
+    items.forEach((item, index) => {
+        const inUnfinishedTurn = latestTurnUnfinished && index > latestTurnStart;
+        entries.push(...toEntries(item, inUnfinishedTurn));
+    });
     for (const event of events) {
         entries.push({
             kind: "line",
@@ -432,7 +320,7 @@ function buildThread({ items, pendingMessages, response, isResponseActive, event
                 id: `task-${task.id}`,
                 side: "assistant",
                 at: Date.parse(task.ask.askedAt),
-                data: { kind: "task", task },
+                data: taskCard(task),
             });
         }
         if ((task.status === "done" || task.status === "failed") && task.summary) {
@@ -447,98 +335,72 @@ function buildThread({ items, pendingMessages, response, isResponseActive, event
         }
     }
     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 lastItem = items[items.length - 1];
+    const at = Math.max(lastItem?.at ?? 0, entries[entries.length - 1]?.at ?? 0) || Date.now();
+    appendTurnEnding(entries, { status, retry, failureMessage, lastItem, at, labels });
+    return entries;
+    function toEntries(item, inUnfinishedTurn) {
+        switch (item.kind) {
+            case "message": {
+                const assistant = item.role === "assistant";
+                const message = {
+                    kind: "message",
+                    id: item.id,
+                    side: item.role,
+                    at: item.at,
+                    // Files sent alone keep an empty body, so the thread draws their tiles with no bubble.
+                    body: item.text.trim() ? renderReply(item.text, !assistant) : "",
+                    attachments: item.attachments,
+                    sending: item.sending,
+                    sources: assistant
+                        ? splitSources(item.text).sources.map((source) => ({
+                            id: source.id,
+                            label: source.label,
+                            href: source.href,
+                        }))
+                        : undefined,
+                    actions: assistant && !inUnfinishedTurn ? replyActions?.(item.text) : undefined,
+                };
+                if (!item.failure)
+                    return [message];
+                return [
+                    message,
+                    {
+                        kind: "failure",
+                        id: `failure-${item.id}`,
+                        at: item.at,
+                        message: item.failure.message ?? labels.notSent,
+                        onRetry: item.failure.retry,
+                    },
+                ];
+            }
+            case "line":
+                return [{ kind: "line", id: item.id, at: item.at, text: item.text, tone: item.tone }];
+            case "card":
+                return [{ kind: "custom", id: item.id, side: "assistant", at: item.at, data: item.content }];
         }
     }
-    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]));
+/** The latest turn's foot: the agent typing while it runs, its failure with Retry, or Stopped. */
+function appendTurnEnding(entries, { status, retry, failureMessage, lastItem, at, labels, }) {
+    switch (status) {
+        case "running":
+            // Once its reply or a card waiting on the user is there, the agent is no longer typing.
+            if (lastItem?.kind !== "card" &&
+                !(lastItem?.kind === "message" && lastItem.role === "assistant"))
+                entries.push({ kind: "typing", id: "typing", at });
+            return;
+        case "failed": {
+            const message = failureMessage ?? labels.failed;
+            entries.push(retry
+                ? { kind: "failure", id: "turn-failure", at, message, onRetry: retry }
+                : { kind: "line", id: "turn-failure", at, text: message, tone: "error" });
+            return;
         }
-        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 [];
+        case "stopped":
+            entries.push({ kind: "line", id: "turn-stopped", at, text: labels.stopped });
+            return;
+        case "idle":
+            return;
     }
 }

package/dist/components/chat.d.ts

@@ -1,6 +1,9 @@
 import { type ComponentProps, type ReactNode } from "react";
 import { type MessageSide } from "../chat/message-group-position.js";
 import { type MentionMark, type MentionTrigger } from "./mention-input.js";
+import { type ResolveFileUrl } from "./resolved-file-url.js";
+export { MessageText, splitSources, type MessageSource, type MessageTextProps, } from "../chat/message-text.js";
+export type { ResolvableFile, ResolveFileUrl } from "./resolved-file-url.js";
 export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
     /** The text, each mention in it as `[@label](mention://kind/id)`. */
     value?: string;
@@ -18,6 +21,11 @@ export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
     sendsWithoutText?: boolean;
     /** What goes with the message, such as its files as chips, just above the text. */
     attachments?: ReactNode;
+    /**
+     * Files pasted into the composer, such as a screenshot or files copied from the desktop, to
+     * attach as a drop or the picker would. Rich text pasted with a picture of itself stays text.
+     */
+    onPasteFiles?: (files: File[]) => void;
     /**
      * `page` is a chat page's wide card; `sheet` the field at the foot of the agent sheet; `feed`
      * a comment field, which sends on Cmd/Ctrl+Enter rather than Enter.
@@ -33,21 +41,21 @@ export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
     /** Props for the text field itself, such as a ref. */
     inputProps?: Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSubmit" | "placeholder">;
 };
-export declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled, sendsWithoutText, attachments, variant, autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }: ChatComposerProps): import("@types/react").JSX.Element;
+export declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, ariaLabel: ownAriaLabel, tools, actions, submitLabel: ownSubmitLabel, sendDisabled, sendsWithoutText, attachments, onPasteFiles, variant, autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }: ChatComposerProps): import("react").JSX.Element;
 export type ChatBubbleProps = ComponentProps<"div"> & {
     side: "user" | "assistant";
     /** Where the bubble sits in its run of messages from one side; see `listMessageGroupPositions`. */
     groupPosition?: "single" | "first" | "middle" | "last";
 };
 /** A message bubble in the agent sheet. */
-export declare function ChatBubble({ side, groupPosition, className, ...props }: ChatBubbleProps): import("@types/react").JSX.Element;
+export declare function ChatBubble({ side, groupPosition, className, ...props }: ChatBubbleProps): import("react").JSX.Element;
 /** A centered line between bubbles: a finished tool call, a decision, something the page did. */
 export declare function ChatSystemLine({ tone, className, ...props }: ComponentProps<"div"> & {
     tone?: "muted" | "error";
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /** Three pulsing dots: the assistant is typing. */
-export declare function ChatTypingDots({ className, ...props }: ComponentProps<"span">): import("@types/react").JSX.Element;
-export declare function ChatAction({ className, ...props }: ComponentProps<"button">): import("@types/react").JSX.Element;
+export declare function ChatTypingDots({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+export declare function ChatAction({ className, ...props }: ComponentProps<"button">): import("react").JSX.Element;
 /** Who wrote a message: drawn as the avatar beside its group and named in the group's footer. */
 export type ChatAuthor = {
     name: string;
@@ -58,7 +66,8 @@ export type ChatAuthor = {
 };
 /**
  * A file sent with a message, linked when it has a `url`. With the thread's `attachmentTiles`, an
- * image (`mediaType` `image/*`) with a `url` shows as a thumbnail.
+ * image (`mediaType` `image/*`) shows as a thumbnail; one with no `url` loads through the thread's
+ * `resolveAttachmentUrl`.
  */
 export type ChatAttachment = {
     id: string;
@@ -123,13 +132,18 @@ export type ChatThreadProps<Custom = never> = {
     attachmentTiles?: boolean;
     /** Heads each day's entries with its date, for a thread that runs over days. */
     dayLabels?: boolean;
+    /**
+     * Loads the link of an attachment with no `url`, such as a file the service serves only with a
+     * bearer token, for its thumbnail and the lightbox; see `ResolveFileUrl`.
+     */
+    resolveAttachmentUrl?: ResolveFileUrl<ChatAttachment>;
     className?: string;
 };
-export declare function ChatThread<Custom = never>({ entries, assistant, renderCustom, formatTime, density, attachmentTiles, dayLabels, className, }: ChatThreadProps<Custom>): import("@types/react").JSX.Element;
+export declare function ChatThread<Custom = never>({ entries, assistant, renderCustom, formatTime, density, attachmentTiles, dayLabels, resolveAttachmentUrl, className, }: ChatThreadProps<Custom>): import("react").JSX.Element;
 export type ChatSuggestionsProps = {
     suggestions: readonly string[];
     onSelect: (suggestion: string) => void;
     className?: string;
 };
 /** Prompts to start a conversation from, stacked at the foot of an empty thread. */
-export declare function ChatSuggestions({ suggestions, onSelect, className }: ChatSuggestionsProps): import("@types/react").JSX.Element;
+export declare function ChatSuggestions({ suggestions, onSelect, className }: ChatSuggestionsProps): import("react").JSX.Element;