@candor-ui/react 1.0.1 → 1.3.0

package/dist/chat/prompt-suggestions.d.ts

@@ -1,15 +1,19 @@
 import type { PromptSuggestion } from "../lib/chat.js";
+/** PromptSuggestions' fixed words; override them under `promptSuggestions` in LocaleProvider's `strings`. */
+export declare const promptSuggestionsStrings: {
+    label: string;
+};
 /**
  * Prompts to start from. Choosing one puts it in the composer to edit, rather
  * than sending it, because suggestions are model output too. Loading shows
  * placeholders of the right shape; an empty list renders nothing.
  */
-declare function PromptSuggestions({ suggestions, onChoose, label, loading, variant, className, }: {
+declare function PromptSuggestions({ suggestions, onChoose, label: labelProp, loading, variant, className, }: {
     /** What to offer. */
     suggestions: PromptSuggestion[];
     /** Called with the chosen one; put it in the composer to edit rather than sending it. */
     onChoose: (suggestion: PromptSuggestion) => void;
-    /** The heading above the suggestions. */
+    /** The heading above the suggestions; "Try asking" by default. */
     label?: string;
     /** Shows placeholders while suggestions load. */
     loading?: boolean;

package/dist/chat/prompt-suggestions.js

@@ -3,16 +3,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUpRight, Sparkles } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Skeleton } from "../ui/skeleton.js";
+import { useStrings } from "../blocks/locale.js";
+/** PromptSuggestions' fixed words; override them under `promptSuggestions` in LocaleProvider's `strings`. */
+export const promptSuggestionsStrings = {
+    label: "Try asking",
+};
 /**
  * Prompts to start from. Choosing one puts it in the composer to edit, rather
  * than sending it, because suggestions are model output too. Loading shows
  * placeholders of the right shape; an empty list renders nothing.
  */
-function PromptSuggestions({ suggestions, onChoose, label = "Try asking", loading = false, variant = "chips", className, }) {
+function PromptSuggestions({ suggestions, onChoose, label: labelProp, loading = false, variant = "chips", className, }) {
+    const t = useStrings("promptSuggestions", promptSuggestionsStrings);
+    const label = labelProp ?? t("label");
     if (!loading && suggestions.length === 0)
         return null;
     return (_jsxs("section", { "data-slot": "prompt-suggestions", "aria-label": label, className: cn("flex flex-col gap-2", className), children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Sparkles, { "aria-hidden": true, className: "size-3" }), " ", label] }), _jsx("div", { className: cn(variant === "cards" ? "grid gap-2 sm:grid-cols-2" : "flex flex-wrap gap-1.5"), children: loading
                     ? Array.from({ length: variant === "cards" ? 4 : 3 }, (_, i) => (_jsx(Skeleton, { className: variant === "cards" ? "h-16 rounded-xl" : "h-8 w-44 rounded-lg" }, i)))
-                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-left text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: s.text }, s.id))) })] }));
+                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-start text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: s.text }, s.id))) })] }));
 }
 export { PromptSuggestions };

package/dist/chat/reasoning.d.ts

@@ -1,5 +1,20 @@
 import * as React from "react";
 import type { ReasoningEntry } from "../lib/chat.js";
+/** Reasoning's fixed words; override them under `reasoning` in LocaleProvider's `strings`. */
+export declare const reasoningStrings: {
+    verified: string;
+    believed: string;
+    assumed: string;
+    reasoning: string;
+    steps: {
+        one: string;
+        other: string;
+    };
+    assumedCount: string;
+    thinking: string;
+    evidence: string;
+    assumption: string;
+};
 /**
  * The agent's stated reasoning above its answer. Each step says what it rests
  * on: verified against evidence, believed, or assumed (with the assumption

package/dist/chat/reasoning.js

@@ -5,10 +5,18 @@ import { Brain, ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { ShimmerLabel } from "../blocks/streaming-text.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
-const basisLabel = {
+import { useStrings } from "../blocks/locale.js";
+/** Reasoning's fixed words; override them under `reasoning` in LocaleProvider's `strings`. */
+export const reasoningStrings = {
     verified: "Verified",
     believed: "Believed",
     assumed: "Assumed",
+    reasoning: "Reasoning",
+    steps: { one: "{count} step", other: "{count} steps" },
+    assumedCount: "{count} assumed",
+    thinking: "Thinking",
+    evidence: "Evidence:",
+    assumption: "Assumption:",
 };
 const basisTone = {
     verified: "bg-success-weak text-success-text",
@@ -22,10 +30,11 @@ const basisTone = {
  * when it answers.
  */
 function Reasoning({ entries, thinking = false, thoughtFor, className, }) {
+    const t = useStrings("reasoning", reasoningStrings);
     const [open, setOpen] = React.useState(thinking);
     React.useEffect(() => setOpen(thinking), [thinking]);
     const assumed = entries.filter((e) => e.basis === "assumed").length;
-    const summary = thinking ? null : (_jsxs(_Fragment, { children: ["Reasoning", thoughtFor && _jsxs(_Fragment, { children: [" \u00B7 ", thoughtFor] }), " \u00B7 ", entries.length, " ", entries.length === 1 ? "step" : "steps", assumed > 0 && _jsxs("span", { className: "text-warning-text", children: [" \u00B7 ", assumed, " assumed"] })] }));
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "reasoning", className: cn("group/reasoning", className), children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1.5 rounded-md py-0.5 pr-1.5 text-xs text-muted-foreground outline-none transition-colors duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Brain, { "aria-hidden": true, className: cn("size-3.5", thinking && "text-accent-text") }), thinking ? _jsx(ShimmerLabel, { className: "text-xs", children: "Thinking" }) : summary, _jsx(ChevronRight, { "aria-hidden": true, className: "size-3 transition-transform duration-200 ease-standard group-data-[state=open]/reasoning:rotate-90" })] }), _jsx(CollapsibleContent, { children: _jsx("ol", { className: "mt-2 ml-1.5 flex flex-col gap-3 border-l pl-4", children: entries.map((e) => (_jsxs("li", { className: "relative animate-rise-in", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-1.5 -left-[1.2rem] size-1.5 rounded-full bg-border-strong" }), _jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: e.title }), _jsx("span", { className: cn("rounded-xs px-1 text-2xs font-medium", basisTone[e.basis]), children: basisLabel[e.basis] })] }), e.body && _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: e.body }), _jsx("p", { className: "mt-1 text-xs text-faint-foreground", children: e.basis === "verified" ? _jsxs(_Fragment, { children: ["Evidence: ", e.evidence] }) : _jsxs(_Fragment, { children: ["Assumption: ", e.assumption] }) })] }, e.id))) }) })] }));
+    const summary = thinking ? null : (_jsxs(_Fragment, { children: [t("reasoning"), thoughtFor && _jsxs(_Fragment, { children: [" \u00B7 ", thoughtFor] }), " \u00B7 ", t("steps", { count: entries.length }), assumed > 0 && _jsxs("span", { className: "text-warning-text", children: [" \u00B7 ", t("assumedCount", { count: assumed })] })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "reasoning", className: cn("group/reasoning", className), children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1.5 rounded-md py-0.5 pe-1.5 text-xs text-muted-foreground outline-none transition-colors duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Brain, { "aria-hidden": true, className: cn("size-3.5", thinking && "text-accent-text") }), thinking ? _jsx(ShimmerLabel, { className: "text-xs", children: t("thinking") }) : summary, _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform duration-200 ease-standard group-data-[state=open]/reasoning:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("ol", { className: "mt-2 ms-1.5 flex flex-col gap-3 border-s ps-4", children: entries.map((e) => (_jsxs("li", { className: "relative animate-rise-in", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-1.5 -start-[1.2rem] size-1.5 rounded-full bg-border-strong" }), _jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: e.title }), _jsx("span", { className: cn("rounded-xs px-1 text-2xs font-medium", basisTone[e.basis]), children: t(e.basis) })] }), e.body && _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: e.body }), _jsx("p", { className: "mt-1 text-xs text-faint-foreground", children: e.basis === "verified" ? _jsxs(_Fragment, { children: [t("evidence"), " ", e.evidence] }) : _jsxs(_Fragment, { children: [t("assumption"), " ", e.assumption] }) })] }, e.id))) }) })] }));
 }
 export { Reasoning };

package/dist/chat/thread-divider.d.ts

@@ -0,0 +1,18 @@
+/** ThreadDivider's fixed words; override them under `threadDivider` in LocaleProvider's `strings`. */
+export declare const threadDividerStrings: {
+    today: string;
+    yesterday: string;
+};
+/**
+ * A rule across the thread with a label in the middle: a day ("Today", "Yesterday", "5 Nov 2026") or a chapter of
+ * the conversation ("Drafting", "Review"). Read by screen readers as a separator with that label. Dates wait for the
+ * browser's clock and time zone, like every time in Candor, so server and browser render the same thing.
+ */
+declare function ThreadDivider({ date, label, className, }: {
+    /** A day to mark, shown as Today, Yesterday or the date in the locale. With neither this nor `label`, a plain rule. */
+    date?: Date | string;
+    /** A chapter or any other label; wins over `date`. */
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export { ThreadDivider };

package/dist/chat/thread-divider.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { useFormat, useLocale, useStrings } from "../blocks/locale.js";
+import { useNow } from "../blocks/relative-time.js";
+/** ThreadDivider's fixed words; override them under `threadDivider` in LocaleProvider's `strings`. */
+export const threadDividerStrings = {
+    today: "Today",
+    yesterday: "Yesterday",
+};
+/** The calendar day of a time, as y-m-d in a time zone (the browser's when left out). */
+function dayOf(d, timeZone) {
+    return new Intl.DateTimeFormat("en-CA", { year: "numeric", month: "2-digit", day: "2-digit", ...(timeZone && { timeZone }) }).format(d);
+}
+/**
+ * A rule across the thread with a label in the middle: a day ("Today", "Yesterday", "5 Nov 2026") or a chapter of
+ * the conversation ("Drafting", "Review"). Read by screen readers as a separator with that label. Dates wait for the
+ * browser's clock and time zone, like every time in Candor, so server and browser render the same thing.
+ */
+function ThreadDivider({ date, label, className, }) {
+    const t = useStrings("threadDivider", threadDividerStrings);
+    const fmt = useFormat();
+    const now = useNow();
+    const { timeZone } = useLocale();
+    let text = label ?? "";
+    if (!label && date !== undefined) {
+        const d = typeof date === "string" ? new Date(date) : date;
+        if (now !== null) {
+            const day = dayOf(d, timeZone);
+            const today = dayOf(new Date(now), timeZone);
+            const yesterday = dayOf(new Date(now - 86_400_000), timeZone);
+            text = day === today ? t("today") : day === yesterday ? t("yesterday") : fmt.date(d, "date");
+        }
+        else
+            text = fmt.date(d, "date");
+    }
+    return (_jsxs("div", { "data-slot": "thread-divider", role: "separator", "aria-label": text || undefined, className: cn("flex items-center gap-3 py-1 text-xs font-medium text-muted-foreground", className), children: [_jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-border" }), _jsx("span", { "aria-hidden": true, children: text }), _jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-border" })] }));
+}
+export { ThreadDivider };

package/dist/chat/thread-event.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+/**
+ * A quiet, centred line in a thread for something that happened rather than something said: "Sam joined", "Switched
+ * to the staging environment", "Run stopped by a guardrail". System messages are drawn with it too, so app events and
+ * system lines look the same. Text here is the app's own, never model output.
+ */
+declare function ThreadEvent({ icon: Icon, tone, at, children, className, ...props }: {
+    /** The glyph before the text; `null` for none. Default: an info mark. */
+    icon?: LucideIcon | null;
+    /** "quiet" (the default) or "attention", for an event a reader shouldn't miss. */
+    tone?: "quiet" | "attention";
+    /** When it happened, shown after the text as a relative time. */
+    at?: string;
+    /** What happened, in a short line. */
+    children: React.ReactNode;
+    className?: string;
+} & Omit<React.ComponentProps<"div">, "children">): React.JSX.Element;
+export { ThreadEvent };

package/dist/chat/thread-event.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Info } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { RelativeTime } from "../blocks/relative-time.js";
+/**
+ * A quiet, centred line in a thread for something that happened rather than something said: "Sam joined", "Switched
+ * to the staging environment", "Run stopped by a guardrail". System messages are drawn with it too, so app events and
+ * system lines look the same. Text here is the app's own, never model output.
+ */
+function ThreadEvent({ icon: Icon = Info, tone = "quiet", at, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "thread-event", "data-tone": tone, className: cn("flex items-center justify-center gap-1.5 py-1 text-center text-xs", tone === "attention" ? "text-attention-text" : "text-faint-foreground", className), ...props, children: [Icon && _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), children, at && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx(RelativeTime, { date: at })] }))] }));
+}
+export { ThreadEvent };

package/dist/chat/thread.d.ts

@@ -1,11 +1,20 @@
 import * as React from "react";
+/** Thread's fixed words; override them under `thread` in LocaleProvider's `strings`. */
+export declare const threadStrings: {
+    messages: string;
+    jumpToLatest: string;
+};
 /**
  * The scrolling message column. It follows new content while you're at the
  * bottom and stops following the moment you scroll up to read, offering a
  * "Jump to latest" button instead. Pass `empty` for the first-run state and
  * the composer as `footer`.
+ *
+ * For long histories, `virtualize` renders only the messages in or near view
+ * (each child is one item, keyed by its `key`). The column stays a `log`, the
+ * message holding focus stays rendered, and Jump to latest works the same.
  */
-declare function Thread({ children, empty, footer, className, contentClassName, }: {
+declare function Thread({ children, empty, footer, className, contentClassName, virtualize, }: {
     children?: React.ReactNode;
     /** Shown before the first message. */
     empty?: React.ReactNode;
@@ -14,5 +23,7 @@ declare function Thread({ children, empty, footer, className, contentClassName,
     className?: string;
     /** Classes for the message column. */
     contentClassName?: string;
+    /** Render only the messages in or near view, for histories of hundreds of messages. Give each child a `key`. Defaults to false. */
+    virtualize?: boolean;
 }): React.JSX.Element;
 export { Thread };

package/dist/chat/thread.js

@@ -1,15 +1,27 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowDown } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+import { useVirtualList } from "../lib/use-virtual-list.js";
+/** Thread's fixed words; override them under `thread` in LocaleProvider's `strings`. */
+export const threadStrings = {
+    messages: "Messages",
+    jumpToLatest: "Jump to latest",
+};
 /**
  * The scrolling message column. It follows new content while you're at the
  * bottom and stops following the moment you scroll up to read, offering a
  * "Jump to latest" button instead. Pass `empty` for the first-run state and
  * the composer as `footer`.
+ *
+ * For long histories, `virtualize` renders only the messages in or near view
+ * (each child is one item, keyed by its `key`). The column stays a `log`, the
+ * message holding focus stays rendered, and Jump to latest works the same.
  */
-function Thread({ children, empty, footer, className, contentClassName, }) {
+function Thread({ children, empty, footer, className, contentClassName, virtualize = false, }) {
+    const t = useStrings("thread", threadStrings);
     const scroller = React.useRef(null);
     const content = React.useRef(null);
     const pinnedRef = React.useRef(true);
@@ -51,10 +63,26 @@ function Thread({ children, empty, footer, className, contentClassName, }) {
         lastTop.current = top;
     };
     const hasMessages = React.Children.count(children) > 0;
-    return (_jsxs("div", { "data-slot": "thread", className: cn("flex min-h-0 flex-col", className), children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scroller, onScroll: onScroll, className: "h-full overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": "Messages", className: cn("mx-auto flex w-full max-w-3xl flex-col gap-7 px-4 py-6", contentClassName), children: hasMessages ? children : empty }) }), !pinned && hasMessages && (_jsxs("button", { type: "button", onClick: () => {
+    const items = virtualize ? React.Children.toArray(children) : [];
+    const keyOf = (i) => (React.isValidElement(items[i]) ? (items[i].key ?? i) : i);
+    // The message holding focus stays rendered, so focus isn't lost when it scrolls out of view.
+    const [focused, setFocused] = React.useState(null);
+    const list = useVirtualList({
+        enabled: virtualize,
+        count: items.length,
+        keyOf,
+        scroller,
+        pin: focused,
+        gap: () => (content.current ? Number.parseFloat(getComputedStyle(content.current).rowGap) || 0 : 0),
+    });
+    return (_jsxs("div", { "data-slot": "thread", className: cn("flex min-h-0 flex-col", className), children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scroller, onScroll: onScroll, onFocus: virtualize
+                            ? (e) => {
+                                setFocused(e.target.closest("[data-virtual-key]")?.getAttribute("data-virtual-key") ?? null);
+                            }
+                            : undefined, onBlur: virtualize ? (e) => !e.currentTarget.contains(e.relatedTarget) && setFocused(null) : undefined, className: "h-full overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": t("messages"), className: cn("mx-auto flex w-full max-w-(--cd-thread-width) flex-col gap-7 px-4 py-6", contentClassName), children: !hasMessages ? (empty) : virtualize ? (_jsx(_Fragment, { children: list.rows.map((row) => "spacer" in row ? (_jsx("div", { "aria-hidden": true, style: { height: row.spacer } }, row.key)) : (_jsx("div", { ref: list.measure, "data-virtual-key": String(keyOf(row.index)), className: "flex flex-col", children: items[row.index] }, keyOf(row.index)))) })) : (children) }) }), !pinned && hasMessages && (_jsxs("button", { type: "button", onClick: () => {
                             pinnedRef.current = true;
                             setPinned(true);
                             toBottom("smooth");
-                        }, className: "absolute bottom-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: [_jsx(ArrowDown, { className: "size-3" }), " Jump to latest"] })), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-3xl px-4 pb-4", children: footer })] }));
+                        }, className: "absolute bottom-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: [_jsx(ArrowDown, { "aria-hidden": true, className: "size-3" }), " ", t("jumpToLatest")] })), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-(--cd-thread-width) px-4 pb-4", children: footer })] }));
 }
 export { Thread };

package/dist/chat/tool-call.d.ts

@@ -1,5 +1,17 @@
 import * as React from "react";
 import type { ToolCall as ToolCallData } from "../lib/chat.js";
+/** ToolCall's fixed words; override them under `toolCall` in LocaleProvider's `strings`. */
+export declare const toolCallStrings: {
+    input: string;
+    output: string;
+    calls: {
+        one: string;
+        other: string;
+    };
+    done: string;
+    failed: string;
+    working: string;
+};
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by

package/dist/chat/tool-call.js

@@ -5,22 +5,35 @@ import { ChevronRight, Wrench } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { StepMark } from "../blocks/step-list.js";
 import { ShimmerLabel } from "../blocks/streaming-text.js";
-import { statusLabel } from "../lib/status.js";
+import { useStatusLabel } from "../lib/status.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { Payload } from "./payload.js";
+import { useStrings } from "../blocks/locale.js";
+/** ToolCall's fixed words; override them under `toolCall` in LocaleProvider's `strings`. */
+export const toolCallStrings = {
+    input: "Input",
+    output: "Output",
+    calls: { one: "{count} tool call", other: "{count} tool calls" },
+    done: "{count} done",
+    failed: "{count} failed",
+    working: "working",
+};
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by
  * default and leads with its error.
  */
 function ToolCall({ call, className, }) {
+    const t = useStrings("toolCall", toolCallStrings);
+    const statusLabel = useStatusLabel();
     const failed = call.status === "failed";
     const [open, setOpen] = React.useState(failed);
     const hasDetail = Boolean(call.input || call.output || call.error);
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-left outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel[call.status]] })] }), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:rotate-90" }))] }), _jsx(CollapsibleContent, { className: "data-[state=open]:animate-in data-[state=open]:fade-in-0", children: _jsxs("div", { className: "mt-1 mb-2 ml-[1.375rem] flex flex-col gap-2 border-l pl-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.input && _jsx(Payload, { language: "json", title: "Input", text: call.input }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: "Output", text: call.output })] }) })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-start outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(call.status)] })] }), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:[transform:rotate(90deg)]" }))] }), _jsx(CollapsibleContent, { className: "data-[state=open]:animate-in data-[state=open]:fade-in-0", children: _jsxs("div", { className: "mt-1 mb-2 ms-[1.375rem] flex flex-col gap-2 border-s ps-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.input && _jsx(Payload, { language: "json", title: t("input"), text: call.input }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: t("output"), text: call.output })] }) })] }));
 }
 /** A run of tool calls, with a count when it's long enough to fold. */
 function ToolCallGroup({ calls, className, }) {
+    const t = useStrings("toolCall", toolCallStrings);
     const done = calls.filter((c) => c.status === "succeeded").length;
     const failed = calls.filter((c) => c.status === "failed").length;
     const running = calls.some((c) => c.status === "running");
@@ -28,6 +41,6 @@ function ToolCallGroup({ calls, className, }) {
     if (calls.length <= 2) {
         return (_jsx("div", { "data-slot": "tool-call-group", className: cn("flex flex-col", className), children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }));
     }
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call-group", className: cn("group/tools rounded-lg border bg-card", className), children: [_jsxs(CollapsibleTrigger, { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-lg", children: [_jsx(Wrench, { "aria-hidden": true, className: "size-3.5" }), _jsxs("span", { className: "flex-1", children: [calls.length, " tool calls", done > 0 && ` · ${done} done`, failed > 0 && _jsxs("span", { className: "text-destructive-text", children: [" \u00B7 ", failed, " failed"] }), running && " · working"] }), _jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 transition-transform duration-200 ease-standard group-data-[state=open]/tools:rotate-90" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col border-t px-1.5 py-1.5", children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }) })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call-group", className: cn("group/tools rounded-lg border bg-card", className), children: [_jsxs(CollapsibleTrigger, { className: "flex w-full items-center gap-2 px-3 py-2 text-start text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-lg", children: [_jsx(Wrench, { "aria-hidden": true, className: "size-3.5" }), _jsxs("span", { className: "flex-1", children: [t("calls", { count: calls.length }), done > 0 && ` · ${t("done", { count: done })}`, failed > 0 && _jsxs("span", { className: "text-destructive-text", children: [" \u00B7 ", t("failed", { count: failed })] }), running && ` · ${t("working")}`] }), _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 ease-standard group-data-[state=open]/tools:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col border-t px-1.5 py-1.5", children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }) })] }));
 }
 export { ToolCall, ToolCallGroup };

package/dist/index.d.ts

@@ -2,7 +2,9 @@ export * from "./lib/chat.js";
 export * from "./lib/status.js";
 export * from "./lib/use-copy.js";
 export * from "./lib/use-shortcut.js";
+export * from "./lib/use-virtual-list.js";
 export * from "./blocks/terms.js";
+export * from "./blocks/locale.js";
 export * from "./blocks/locked.js";
 export * from "./blocks/status-dot.js";
 export * from "./blocks/step-list.js";
@@ -14,6 +16,7 @@ export * from "./blocks/surface.js";
 export * from "./chat/agent-avatar.js";
 export * from "./chat/entity-chip.js";
 export * from "./chat/citation.js";
+export * from "./lib/highlight.js";
 export * from "./chat/payload.js";
 export * from "./chat/message-content.js";
 export * from "./chat/message.js";
@@ -21,7 +24,11 @@ export * from "./chat/message-actions.js";
 export * from "./chat/reasoning.js";
 export * from "./chat/tool-call.js";
 export * from "./chat/thread.js";
+export * from "./chat/thread-divider.js";
+export * from "./chat/thread-event.js";
+export * from "./chat/folded-turns.js";
 export * from "./chat/composer.js";
+export * from "./chat/attachment-preview.js";
 export * from "./chat/prompt-suggestions.js";
 export * from "./chat/context-meter.js";
 export * from "./chat/card-registry.js";

package/dist/index.js

@@ -2,7 +2,9 @@ export * from "./lib/chat.js";
 export * from "./lib/status.js";
 export * from "./lib/use-copy.js";
 export * from "./lib/use-shortcut.js";
+export * from "./lib/use-virtual-list.js";
 export * from "./blocks/terms.js";
+export * from "./blocks/locale.js";
 export * from "./blocks/locked.js";
 export * from "./blocks/status-dot.js";
 export * from "./blocks/step-list.js";
@@ -14,6 +16,7 @@ export * from "./blocks/surface.js";
 export * from "./chat/agent-avatar.js";
 export * from "./chat/entity-chip.js";
 export * from "./chat/citation.js";
+export * from "./lib/highlight.js";
 export * from "./chat/payload.js";
 export * from "./chat/message-content.js";
 export * from "./chat/message.js";
@@ -21,7 +24,11 @@ export * from "./chat/message-actions.js";
 export * from "./chat/reasoning.js";
 export * from "./chat/tool-call.js";
 export * from "./chat/thread.js";
+export * from "./chat/thread-divider.js";
+export * from "./chat/thread-event.js";
+export * from "./chat/folded-turns.js";
 export * from "./chat/composer.js";
+export * from "./chat/attachment-preview.js";
 export * from "./chat/prompt-suggestions.js";
 export * from "./chat/context-meter.js";
 export * from "./chat/card-registry.js";

package/dist/lib/chat.d.ts

@@ -44,7 +44,7 @@ export type MessageAuthor = {
 export type EntityKind = string;
 export type EntityRef = {
     kind: EntityKind;
-    /** The identifier, e.g. "Account.Region__c" or "orders.status". */
+    /** The identifier, e.g. "orders.status" or "billing.invoice.due_date". */
     name: string;
     /** A friendlier label when there is one, e.g. "Region". */
     label?: string;
@@ -185,6 +185,11 @@ export type MessageBlock = {
     card: string;
     props: unknown;
     summary: string;
+}
+/** Files sent with the message, shown as tiles. New in 1.1: a `switch` over kinds needs a `default` branch. */
+ | {
+    kind: "attachments";
+    files: Attachment[];
 };
 export type MessageStatus = "streaming" | "complete" | "interrupted" | "failed";
 export type Message = {
@@ -229,7 +234,12 @@ export type SlashCommand = {
 export type Attachment = {
     id: string;
     name: string;
+    /** In bytes. */
     size?: number;
+    /** e.g. "image/png", "application/pdf": picks the icon, and allows an image preview. */
+    mediaType?: string;
+    /** A thumbnail your app serves (or a blob: URL), shown for images. Never a URL from model output. */
+    previewUrl?: string;
     /** 0–1 while uploading; absent when done. */
     progress?: number;
     error?: string;

package/dist/lib/highlight.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A small syntax highlighter for code an agent shows: it splits text into typed tokens (keyword, string, comment…),
+ * and Payload renders each as a span. The output is text, never HTML, so nothing in the code can run or inject markup.
+ * It covers the languages agents show most (JS/TS, Python, SQL, JSON, shell, YAML, CSS, HTML/XML, Go, Rust, Java, C)
+ * in a few kilobytes; anything else comes back as one plain token.
+ */
+export type TokenType = "keyword" | "string" | "number" | "comment" | "function" | "property" | "type" | "tag" | "variable" | "operator" | "plain";
+export type Token = {
+    type: TokenType;
+    text: string;
+};
+/** Whether `language` has a grammar here. */
+export declare function canHighlight(language: string): boolean;
+/** The text split into typed tokens; their texts joined give back the input exactly. */
+export declare function tokenize(text: string, language: string): Token[];