@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/chat-sheet.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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 { useRef, useState, } from "react";
+import { useId, useLayoutEffect, useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
 import { parseMentions } from "../chat/contract.js";
 import { MessageText, splitSources } from "../chat/message-text.js";
@@ -45,22 +45,23 @@ const docked = css({
     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.
+ * The gap between the page and the docked sheet: drag it toward the page, or press the arrow that
+ * points there, 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)",
+    width: "[token(spacing.panel.compact)]",
     cursor: "col-resize",
     touchAction: "none",
-    outline: "none",
+    outline: "0",
     "&::after": {
         content: '""',
         position: "absolute",
-        insetBlock: "0",
-        left: "50%",
-        width: "token(spacing.control.trackInset)",
+        insetBlock: "none",
+        left: "[50%]",
+        width: "[token(spacing.control.trackInset)]",
         transform: "translateX(-50%)",
         transitionProperty: "background",
         transitionDuration: "fast",
@@ -72,57 +73,115 @@ const resizeHandle = css({
 const MIN_DOCKED_WIDTH = 360;
 const MAX_DOCKED_WIDTH = 720;
 const RESIZE_KEY_STEP = 16;
+/** The widest the docked sheet may be in this window: half of it, and at most `MAX_DOCKED_WIDTH`. */
+function measureMaximumDockedWidth() {
+    return Math.floor(Math.min(MAX_DOCKED_WIDTH, window.innerWidth / 2));
+}
 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));
+    return Math.round(Math.min(Math.max(width, MIN_DOCKED_WIDTH), measureMaximumDockedWidth()));
 }
-/** The docked width the person dragged to, or null for the token's default. */
-function useDockedWidth(asideRef) {
+/**
+ * The docked width the person dragged or stepped to, or null for the token's default, and the
+ * props of the handle that changes it. `asideRef` takes the docked aside, which the handle
+ * measures for its value.
+ */
+function useDockedWidth() {
+    const [aside, setAside] = useState(null);
     const [width, setWidth] = useState(null);
+    const [renderedWidth, setRenderedWidth] = useState(null);
+    const [maximumWidth, setMaximumWidth] = useState(MAX_DOCKED_WIDTH);
+    const drag = useRef(null);
     const [dragging, setDragging] = useState(false);
-    const { labels } = useCiridaeLocale();
+    const { labels, dir } = useCiridaeLocale();
+    // The sheet docks at the inline end, so the page lies to its left, or to its right in a
+    // right-to-left layout; the drag and the arrow keys widen it toward the page.
+    const pageIsToTheRight = dir === "rtl";
+    const arrowKeyThatWidens = pageIsToTheRight ? "ArrowRight" : "ArrowLeft";
+    const arrowKeyThatNarrows = pageIsToTheRight ? "ArrowLeft" : "ArrowRight";
+    useLayoutEffect(() => {
+        if (!aside)
+            return;
+        const measureAside = () => setRenderedWidth(Math.round(aside.getBoundingClientRect().width));
+        const followWindowWidth = () => {
+            setMaximumWidth(measureMaximumDockedWidth());
+            // A narrower window can leave a dragged width past its new maximum.
+            setWidth((current) => (current === null ? null : clampDockedWidth(current)));
+        };
+        measureAside();
+        followWindowWidth();
+        const asideResizes = new ResizeObserver(measureAside);
+        asideResizes.observe(aside);
+        window.addEventListener("resize", followWindowWidth);
+        return () => {
+            asideResizes.disconnect();
+            window.removeEventListener("resize", followWindowWidth);
+            // The handle goes with the aside, so a drag still held ends with them.
+            drag.current = null;
+            setDragging(false);
+        };
+    }, [aside]);
+    const endDrag = () => {
+        drag.current = null;
+        setDragging(false);
+    };
+    // What the reader set, or, until they do, the token's width as the aside draws it.
+    const currentWidth = width ?? renderedWidth;
     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,
+        "aria-valuemax": maximumWidth,
+        "aria-valuenow": currentWidth ?? undefined,
+        "aria-valuetext": currentWidth === null ? undefined : labels.chat.sheetWidth(currentWidth),
         tabIndex: 0,
         "data-dragging": dragging || undefined,
+        // The handle holds the pointer while it drags, so the moves and the end of the drag come to
+        // it, wherever the pointer goes.
         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);
+            drag.current = {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startWidth: aside.getBoundingClientRect().width,
             };
-            window.addEventListener("pointermove", move);
-            window.addEventListener("pointerup", stop);
+            setDragging(true);
+        },
+        onPointerMove: (event) => {
+            const held = drag.current;
+            if (held?.pointerId !== event.pointerId)
+                return;
+            const movedTowardThePage = pageIsToTheRight
+                ? event.clientX - held.startX
+                : held.startX - event.clientX;
+            setWidth(clampDockedWidth(held.startWidth + movedTowardThePage));
         },
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        onLostPointerCapture: endDrag,
         onKeyDown: (event) => {
-            const step = event.key === "ArrowLeft"
+            const step = event.key === arrowKeyThatWidens
                 ? RESIZE_KEY_STEP
-                : event.key === "ArrowRight"
+                : event.key === arrowKeyThatNarrows
                     ? -RESIZE_KEY_STEP
                     : 0;
+            if (event.key === "Home" || event.key === "End") {
+                event.preventDefault();
+                setWidth(event.key === "Home" ? MIN_DOCKED_WIDTH : measureMaximumDockedWidth());
+                return;
+            }
             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;
+            const rendered = aside?.getBoundingClientRect().width ?? MIN_DOCKED_WIDTH;
             setWidth((current) => clampDockedWidth((current ?? rendered) + step));
         },
         onDoubleClick: () => setWidth(null),
     };
-    return { width, handleProps };
+    return { width, asideRef: setAside, handleProps };
 }
 const dockedHeader = css({
     display: "flex",
@@ -155,24 +214,23 @@ const contextRow = css({
     fontWeight: "medium",
     lineHeight: "tight",
 });
-// A record the agent reads: the raised face under its gradient edge.
 const contextChip = css({
     display: "inline-flex",
     alignItems: "center",
     gap: "control.iconGap",
     height: "control.shortcut",
-    // The kit counts the 1px edge into the padding.
-    paddingInlineStart: "calc(token(spacing.control.block) + token(sizes.border.hairline))",
-    paddingInlineEnd: "calc(token(spacing.control.iconInline) + token(sizes.border.hairline))",
+    // The kit counts the 1px edge into the padding; the edge's transparent border is that pixel.
+    paddingInlineStart: "control.block",
+    paddingInlineEnd: "control.iconInline",
     borderRadius: "field",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     color: "fg.primary",
-    "&::before": { background: "token(gradients.border.raised)" },
+    "&::before": { background: "[token(gradients.border.raised)]" },
     "& 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" });
-const centered = css({ display: "grid", placeItems: "center", height: "100%" });
+const centered = css({ display: "grid", placeItems: "center", height: "full" });
 /* The thread and composer, the drop target for files; it fills what the sheet or page gives it. */
 const conversationRoot = css({
     display: "flex",
@@ -191,22 +249,22 @@ const composerFooter = css({
 /* 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 wideColumn = css({ width: "full", maxWidth: "chat.thread", marginInline: "auto" });
 /* In a drawer, the context row and the conversation stack under its header. */
 const drawerStack = css({ display: "flex", flex: "1", minHeight: "0", flexDirection: "column" });
 export function ChatSheet({ open, onOpenChange, title, context, placement = "drawer", onPlacementChange, onOpenFullPage, shortcut, ...conversationProps }) {
-    const { variant = "agent", tasks } = conversationProps;
+    const { tasks } = conversationProps;
     const { labels } = useCiridaeLocale();
-    const asideRef = useRef(null);
-    const dockedWidth = useDockedWidth(asideRef);
+    const dockedWidth = useDockedWidth();
+    const dockedTitleId = useId();
     const titleContent = (_jsxs("span", { className: titleLine, children: [_jsx(SparkleIcon, { className: icon({ size: "small" }), weight: "fill" }), title] }));
     const actions = (_jsxs(_Fragment, { children: [shortcut && _jsx(ShortcutHint, { hotkey: shortcut, boxed: true }), 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: [labels.chat.reading, context.map((item) => (_jsxs("span", { className: contextChip, "data-ciridae-ui": "", "data-edge": "gradient", 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": "", "data-edge": "gradient", children: [item.icon, item.label] }, item.label)))] })), 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({ size: "small" }), css({ lineHeight: "tight" })), children: titleContent }), _jsxs("div", { className: headerActions, children: [actions, _jsx(IconButton, { "aria-label": labels.common.close, onClick: () => onOpenChange(false), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] })] }), contextContent, _jsx(ChatConversation, { ...conversationProps })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeHandle, ...dockedWidth.handleProps }), _jsxs("aside", { ref: dockedWidth.asideRef, className: docked, "data-ciridae-ui": "", "aria-labelledby": dockedTitleId, style: dockedWidth.width === null ? undefined : { width: dockedWidth.width }, children: [_jsxs("header", { className: dockedHeader, children: [_jsx("h2", { id: dockedTitleId, className: cx(heading({ size: "small" }), css({ lineHeight: "tight" })), children: titleContent }), _jsxs("div", { className: headerActions, children: [actions, _jsx(IconButton, { "aria-label": labels.common.close, 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 })] }) }));
 }
@@ -236,9 +294,10 @@ function useComposerFiles(upload, onUploadError) {
 }
 /**
  * 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`.
+ * sets both in one readable column for a full page; the sheet uses `sheet`. Only the `agent`
+ * variant takes `tasks`.
  */
-export function ChatConversation({ source, placeholder, draft, onDraftChange, composerRef, mentions, mentionMark, onMentionSelect, mentionHref, events = [], assistantName: ownAssistantName, suggestions, copyReplies = false, composerTools, dictation, 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, composerTools, dictation, tasks = [], onTaskReply, layout = "sheet", scrollBody: ScrollBody = "div", }) {
     const { labels } = useCiridaeLocale();
     const assistantName = ownAssistantName ?? labels.chat.assistantName;
     const [ownDraft, setOwnDraft] = useState("");
@@ -271,10 +330,11 @@ export function ChatConversation({ source, placeholder, draft, onDraftChange, co
         labels: labels.chat,
         source,
         events,
-        tasks: variant === "agent" ? (tasks ?? []) : [],
+        tasks,
         renderReply: (content, plain) => (_jsx(MessageText, { content: content, plain: plain, onMentionSelect: onMentionSelect, mentionHref: mentionHref })),
         replyActions: copyReplies ? (content) => _jsx(CopyReplyButton, { content: content }) : undefined,
-        taskCard: (task) => _jsx(AgentTaskCard, { task: task, onReply: onTaskReply }),
+        // `tasks` come with `onTaskReply`, so a task to draw always has a reply to send.
+        taskCard: (task) => onTaskReply && _jsx(AgentTaskCard, { task: task, onReply: onTaskReply }),
     });
     const wide = layout === "wide";
     const showSuggestions = entries.length === 0 && !source.loading && suggestions !== undefined && suggestions.length > 0;
@@ -306,7 +366,6 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
             latestTurnStart = index;
     });
     const latestTurnUnfinished = status === "running" || status === "failed";
-    // The run of steps the items end on, which the running turn draws as what the agent is doing.
     let stepRun = null;
     for (const [index, item] of items.entries()) {
         if (item.kind === "step") {
@@ -318,7 +377,9 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
             entries.push({ kind: "steps", ...stepRun });
         stepRun = null;
         const inUnfinishedTurn = latestTurnUnfinished && index > latestTurnStart;
-        entries.push(...toEntries(item, inUnfinishedTurn));
+        // The running turn's newest item is the one still arriving.
+        const newestOfRunningTurn = status === "running" && index === items.length - 1;
+        entries.push(...toEntries(item, inUnfinishedTurn, newestOfRunningTurn));
     }
     const runningSteps = status === "running" ? stepRun : null;
     if (stepRun && !runningSteps)
@@ -367,7 +428,7 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
         doing: newestStep && `${newestStep.title}…`,
     });
     return entries;
-    function toEntries(item, inUnfinishedTurn) {
+    function toEntries(item, inUnfinishedTurn, newestOfRunningTurn) {
         switch (item.kind) {
             case "message": {
                 const assistant = item.role === "assistant";
@@ -380,6 +441,7 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
                     body: item.text.trim() ? renderReply(item.text, !assistant) : "",
                     attachments: item.attachments,
                     sending: item.sending,
+                    streaming: assistant && newestOfRunningTurn,
                     sources: assistant
                         ? [
                             ...splitSources(item.text).sources.map((source) => ({
@@ -415,10 +477,6 @@ function buildThread({ labels, source: { items, status, failureMessage, retry },
         }
     }
 }
-/**
- * The latest turn's foot: the agent thinking while it runs, saying what it is `doing`; its
- * failure with Try again; or Stopped.
- */
 function appendTurnEnding(entries, { status, retry, failureMessage, lastItem, at, labels, doing, }) {
     switch (status) {
         case "running":

package/dist/components/chat.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps, type ReactNode } from "react";
-import { type MessageSide } from "../chat/message-group-position.js";
+import { type MessageGroupPosition, 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";
@@ -26,11 +26,7 @@ export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
      * attach as a drop or the picker would. Rich text pasted with a picture of itself stays text.
      */
     onPasteFiles?: (files: File[]) => void;
-    /**
-     * While the host takes dictation: the microphone's levels, drawn as a waveform beside the
-     * tools. The host owns the microphone and its controls, such as Cancel and Insert in `actions`,
-     * and writes what it heard into the text.
-     */
+    /** The host owns the microphone and its controls, such as Cancel and Insert in `actions`, and writes what it heard into the text. */
     dictation?: ChatDictation;
     /**
      * `page` is a chat page's wide card; `sheet` the field at the foot of the agent sheet; `feed`
@@ -48,47 +44,39 @@ export type ChatComposerProps = Omit<ComponentProps<"div">, "onSubmit"> & {
     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, onPasteFiles, dictation, variant, autoFocus, mentions, mentionMark, mentionsLabel, inputProps, className, ...props }: ChatComposerProps): import("react").JSX.Element;
-/** A tool for the sheet composer's bar, such as the paperclip: its icon alone. */
 export declare function ChatComposerTool({ className, ...props }: Omit<ComponentProps<"button">, "aria-label"> & {
     "aria-label": string;
 }): import("react").JSX.Element;
-/** The microphone's loudness while the host takes dictation, each level 0 to 1, newest last. */
+/** Each level is 0 to 1, newest last. */
 export type ChatDictation = {
     levels: readonly number[];
     listening: boolean;
 };
-/**
- * Dictation's waveform: a bar per level, each as tall as its level; flat while `listening` is
- * off, such as while the host turns what it heard into text.
- */
+/** Flat while `listening` is off, such as while the host turns what it heard into text. */
 export declare function ChatDictationWaveform({ levels, listening, className, ...props }: ComponentProps<"div"> & ChatDictation): import("react").JSX.Element;
 export type ChatBubbleProps = ComponentProps<"div"> & {
-    side: "user" | "assistant";
+    side: MessageSide;
     /** Where the bubble sits in its run of messages from one side; see `listMessageGroupPositions`. */
-    groupPosition?: "single" | "first" | "middle" | "last";
+    groupPosition?: MessageGroupPosition;
 };
-/** A message bubble: the user's raised on the right, another author's filled on the left. */
 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"> & {
+export type ChatSystemLineProps = ComponentProps<"div"> & {
     tone?: "muted" | "error";
-}): import("react").JSX.Element;
+};
+export declare function ChatSystemLine({ tone, className, ...props }: ChatSystemLineProps): import("react").JSX.Element;
 export declare function ChatAction({ className, ...props }: ComponentProps<"button">): import("react").JSX.Element;
 export type ChatSourceCardProps = {
-    /** The source's name, such as "Vendor portal" or a rule's. */
     label: ReactNode;
     icon?: ReactNode;
-    /** What the source says that the reply relies on. */
     children: ReactNode;
-    /** Under it, who entered it or when. */
     meta?: ReactNode;
-    /** `yellow` marks a source the reply weighs, such as one of two rules in conflict. */
-    tone?: "neutral" | "yellow";
-    /** Makes the card a link to the source. */
+    /** `warning` marks a source the reply weighs, such as one of two rules in conflict. */
+    tone?: "neutral" | "warning";
+    /** Opens in a new tab, as an attachment does, so the conversation stays put. */
     href?: string;
     className?: string;
 };
-/** A source cited in a reply, as a card of what it says under its name. */
 export declare function ChatSourceCard({ label, icon, children, meta, tone, href, className, }: ChatSourceCardProps): 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 = {
@@ -109,39 +97,27 @@ export type ChatAttachment = {
     url?: string | null;
     mediaType?: string;
 };
-/**
- * A source a reply cites: a link in the row under it, linked when it has an `href`; with a
- * `quote`, a `ChatSourceCard` of what it says.
- */
+/** Linked when it has an `href`; with a `quote`, drawn as a `ChatSourceCard`. */
 export type ChatSource = {
     id: string;
     label: ReactNode;
     href?: string;
-    /** What the source says that the reply relies on, such as a value or a rule. */
     quote?: ReactNode;
-    /** Leads the card's label, such as the source's kind as an icon. */
     icon?: ReactNode;
-    /** Under the card's quote: who entered it, or when. */
     meta?: ReactNode;
     tone?: ChatSourceCardProps["tone"];
 };
-/** A step the agent took on its way to a reply: a thought, or a tool it called. */
 export type ChatStep = {
     id: string;
     kind: "reasoning" | "tool";
-    /** What it did, as one line, such as "Search invoices". */
     title: string;
-    /**
-     * More about it, such as the rest of the thought. Everyone reading the thread sees it, so never
-     * a tool call's raw arguments.
-     */
+    /** Everyone reading the thread sees it, so never a tool call's raw arguments. */
     detail?: string;
     status: "running" | "completed" | "failed";
 };
 /**
- * One entry of a thread: a message from either side, a centered line, the agent at work, the
- * steps it took, a failure with its retry, or something of the caller's own, such as an approval
- * card, drawn by `renderCustom` in the side's flow.
+ * Or something of the caller's own, such as an approval card, drawn by `renderCustom` in the
+ * side's flow.
  */
 export type ChatThreadEntry<Custom = never> = {
     id: string;
@@ -155,29 +131,30 @@ export type ChatThreadEntry<Custom = never> = {
     attachments?: readonly ChatAttachment[];
     /** Still on its way: the footer says Sending in place of the time. */
     sending?: boolean;
-    /** What the reply cites: links in a row under it, and the ones with a quote as cards. */
+    /**
+     * The assistant's reply is still arriving. The thread announces a reply to screen readers
+     * once, as this turns false or as it appears without it. Defaults to false.
+     */
+    streaming?: boolean;
     sources?: readonly ChatSource[];
-    /** Controls beside the message, shown while it is hovered or focused, such as Copy. */
+    /** Shown while the message is hovered or focused. */
     actions?: ReactNode;
-    /** Buttons under the message for what it suggests doing, always shown. */
+    /** Always shown. */
     suggestedActions?: ReactNode;
-    /** A closing line under the message, such as what the reply read. */
     footnote?: ReactNode;
 } | {
     kind: "line";
     text: ReactNode;
-    tone?: "muted" | "error";
+    tone?: ChatSystemLineProps["tone"];
 }
-/** The agent at work before its reply: what it is doing, the locale's "Working" by default. */
+/** The locale's "Working" by default. */
  | {
     kind: "typing";
     label?: ReactNode;
 } | {
     kind: "steps";
     steps: readonly ChatStep[];
-}
-/** A reply that did not finish: `title` over why, and Try again under it. */
- | {
+} | {
     kind: "failure";
     title?: ReactNode;
     message?: ReactNode;
@@ -195,14 +172,8 @@ export type ChatThreadProps<Custom = never> = {
     renderCustom?: (data: Custom) => ReactNode;
     /** How a footer writes the time; the time of day, dated once not today, otherwise. */
     formatTime?: (at: number) => string;
-    /** `compact` trims the padding around the thread and between groups. */
     density?: "comfortable" | "compact";
-    /**
-     * `bubble`, the default, draws every message in a bubble, the assistant's beside its author's
-     * avatar, with the author and time under each group. `plain` draws the assistant's replies as
-     * text on the sheet, the thread's full width, with no avatar and no author or time, as the
-     * agent sheet does.
-     */
+    /** `plain` draws the assistant's replies as text on the sheet, the thread's full width, with no avatar and no author or time, as the agent sheet does. */
     replyStyle?: "bubble" | "plain";
     /** Draws a message's files as tiles over its bubble, rather than as names inside it. */
     attachmentTiles?: boolean;