@candor-ui/react 0.0.0-stage → 1.0.0

package/dist/chat/entity-chip.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import type { EntityRef } from "../lib/chat.js";
+export type EntityKindInfo = {
+    Icon: LucideIcon;
+    noun: string;
+};
+/** Kinds most apps have. Add your own (or a preset) with EntityKindsProvider. */
+export declare const baseKinds: Record<string, EntityKindInfo>;
+/**
+ * The kinds of thing your app's entities can be: an icon and a noun each.
+ * Nested providers add to (and can override) the kinds above them.
+ */
+declare function EntityKindsProvider({ kinds, children, }: {
+    /** Kind ids mapped to an icon and a noun. */
+    kinds: Record<string, EntityKindInfo>;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Look up a kind's icon and noun; unknown kinds read as "Item". */
+declare function useEntityKinds(): (kind: string) => EntityKindInfo;
+/**
+ * A thing in the user's system (a record, a table, a field, a workflow…) named
+ * in a message or the composer. The kind's icon and noun are always present,
+ * so "Account" the table and "Account" the report never read alike. The
+ * identifier is the label unless a friendlier one is given; then the
+ * identifier is on hover and for screen readers.
+ */
+declare function EntityChip({ entity, onOpen, onRemove, className, }: {
+    /** The thing to show: its kind, identifier and optional label. */
+    entity: EntityRef;
+    /** Makes the chip a button that opens the thing. */
+    onOpen?: (entity: EntityRef) => void;
+    /** Adds a remove button, e.g. in the composer. */
+    onRemove?: (entity: EntityRef) => void;
+    className?: string;
+}): React.JSX.Element;
+export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/entity-chip.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Box, Braces, ChartColumn, File, FileText, Gauge, Link, Table2, TextCursorInput, UserRound, Waypoints, } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/** Kinds most apps have. Add your own (or a preset) with EntityKindsProvider. */
+export const baseKinds = {
+    record: { Icon: FileText, noun: "Record" },
+    document: { Icon: FileText, noun: "Document" },
+    file: { Icon: File, noun: "File" },
+    table: { Icon: Table2, noun: "Table" },
+    field: { Icon: TextCursorInput, noun: "Field" },
+    person: { Icon: UserRound, noun: "Person" },
+    link: { Icon: Link, noun: "Link" },
+    code: { Icon: Braces, noun: "Code" },
+    workflow: { Icon: Waypoints, noun: "Workflow" },
+    report: { Icon: ChartColumn, noun: "Report" },
+    dashboard: { Icon: Gauge, noun: "Dashboard" },
+};
+/** What an unregistered kind shows: still labelled, never a crash or a blank. */
+const unknownKind = { Icon: Box, noun: "Item" };
+const KindsContext = React.createContext(baseKinds);
+/**
+ * The kinds of thing your app's entities can be: an icon and a noun each.
+ * Nested providers add to (and can override) the kinds above them.
+ */
+function EntityKindsProvider({ kinds, children, }) {
+    const parent = React.useContext(KindsContext);
+    const value = React.useMemo(() => ({ ...parent, ...kinds }), [parent, kinds]);
+    return _jsx(KindsContext.Provider, { value: value, children: children });
+}
+/** Look up a kind's icon and noun; unknown kinds read as "Item". */
+function useEntityKinds() {
+    const kinds = React.useContext(KindsContext);
+    return React.useCallback((kind) => kinds[kind] ?? unknownKind, [kinds]);
+}
+/**
+ * A thing in the user's system (a record, a table, a field, a workflow…) named
+ * in a message or the composer. The kind's icon and noun are always present,
+ * so "Account" the table and "Account" the report never read alike. The
+ * identifier is the label unless a friendlier one is given; then the
+ * identifier is on hover and for screen readers.
+ */
+function EntityChip({ entity, onOpen, onRemove, className, }) {
+    const { Icon, noun } = useEntityKinds()(entity.kind);
+    const shown = entity.label ?? entity.name;
+    const title = `${noun}: ${entity.name}${entity.location ? ` in ${entity.location}` : ""}`;
+    const body = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: shown }), _jsxs("span", { className: "sr-only", children: [" (", title, ")"] })] }));
+    const base = "inline-flex max-w-full items-center gap-1 rounded-sm border bg-card px-1.5 py-px align-baseline font-mono text-[0.92em] leading-[1.35] text-foreground";
+    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": `Remove ${shown}`, onClick: () => onRemove(entity), className: "-ml-px rounded-r-sm border border-l-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
+}
+export { EntityChip, EntityKindsProvider, useEntityKinds };

package/dist/chat/message-actions.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type Rating = "up" | "down" | null;
+/**
+ * Copy, retry and rate under an agent's reply. Each action appears only when
+ * its handler is given. Copy reports what the clipboard did. A rating is the
+ * caller's state, so it shows only what the service recorded.
+ */
+declare function MessageActions({ text, onRetry, rating, onRate, meta, className, }: {
+    /** What Copy copies; without it there's no Copy. */
+    text?: string;
+    /** Shows Retry. */
+    onRetry?: () => void;
+    /** The current rating: up, down or none. */
+    rating?: Rating;
+    /** Shows thumbs up and down. */
+    onRate?: (rating: Rating) => void;
+    /** Facts after the actions, e.g. the model and cost. */
+    meta?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export { MessageActions };

package/dist/chat/message-actions.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, RotateCw, ThumbsDown, ThumbsUp, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { useCopy } from "../lib/use-copy.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+function ActionButton({ label, onClick, pressed, children, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, "aria-pressed": pressed, onClick: onClick, className: "flex size-7 items-center justify-center rounded-md text-faint-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 aria-pressed:text-accent-text [&_svg]:size-3.5", children: children }) }), _jsx(TooltipContent, { children: label })] }));
+}
+/**
+ * Copy, retry and rate under an agent's reply. Each action appears only when
+ * its handler is given. Copy reports what the clipboard did. A rating is the
+ * caller's state, so it shows only what the service recorded.
+ */
+function MessageActions({ text, onRetry, rating, onRate, meta, className, }) {
+    const { state, copy } = useCopy();
+    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? "Copied" : state === "failed" ? "Couldn’t copy" : "Copy", onClick: () => copy(text), children: state === "copied" ? _jsx(Check, { className: "text-success-text" }) : state === "failed" ? _jsx(X, { className: "text-destructive-text" }) : _jsx(Copy, {}) })), onRetry && (_jsx(ActionButton, { label: "Retry", onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: "Good answer", pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: "Bad answer", pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ml-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
+}
+export { MessageActions };

package/dist/chat/message-content.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { EntityRef, InlineNode, MessageBlock, MessageSource } from "../lib/chat.js";
+/**
+ * Inline nodes. Every string here may come from a model or the user's system, so it is
+ * only ever rendered as a React text child: no markdown parsing, no HTML.
+ */
+declare function Inline({ nodes, }: {
+    /** Inline nodes: text, strong, code, entities, citations. */
+    nodes: InlineNode[];
+}): React.JSX.Element;
+/** A message's blocks, in order. */
+declare function MessageContent({ blocks, sources, onOpenEntity, onNavigate, className, }: {
+    /** The reply as typed blocks: paragraphs, lists, payloads, tool calls, cards. */
+    blocks: MessageBlock[];
+    /** Sources the blocks cite by marker. */
+    sources?: MessageSource[];
+    /** Makes entity chips open their thing. */
+    onOpenEntity?: (entity: EntityRef) => void;
+    /** Follows in-app links; links from a model are never rendered. */
+    onNavigate?: (to: string) => void;
+    className?: string;
+}): React.JSX.Element;
+/** Plain text of a message, for copy. Citations become [n]; entities their API name. */
+export declare function blocksToText(blocks: MessageBlock[], sources?: MessageSource[]): string;
+export { MessageContent, Inline };

package/dist/chat/message-content.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { useTerms } from "../blocks/terms.js";
+import { DegradedPanel } from "../blocks/degraded-panel.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { Citation } from "./citation.js";
+import { EntityChip } from "./entity-chip.js";
+import { Card } from "./card-registry.js";
+import { Payload } from "./payload.js";
+import { ToolCallGroup } from "./tool-call.js";
+const ContentContext = React.createContext({ sources: new Map() });
+/**
+ * Inline nodes. Every string here may come from a model or the user's system, so it is
+ * only ever rendered as a React text child: no markdown parsing, no HTML.
+ */
+function Inline({ nodes, }) {
+    const terms = useTerms();
+    const ctx = React.useContext(ContentContext);
+    return (_jsx(_Fragment, { children: nodes.map((n, i) => {
+            switch (n.kind) {
+                case "text":
+                    return _jsx(React.Fragment, { children: n.text }, i);
+                case "strong":
+                    return _jsx("strong", { className: "font-semibold", children: n.text }, i);
+                case "em":
+                    return _jsx("em", { children: n.text }, i);
+                case "code":
+                    return (_jsx("code", { className: "rounded-xs bg-muted px-1 py-px font-mono text-[0.88em]", children: n.text }, i));
+                case "orgData":
+                    return (_jsx("span", { title: n.source ? `From the ${terms.environment}: ${n.source}` : `From the ${terms.environment}`, className: "font-medium tabular-nums text-foreground", children: n.text }, i));
+                case "provisional":
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-provisional": true, className: "inline rounded-xs text-left text-provisional underline decoration-provisional/50 decoration-dotted underline-offset-[3px] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Inline, { nodes: n.nodes }), _jsx("span", { className: "sr-only", children: " (not verified)" })] }) }), _jsx(TooltipContent, { children: n.reason ?? `The agent hasn’t verified this against the ${terms.environment}.` })] }, i));
+                case "citation":
+                    return _jsx(Citation, { source: ctx.sources.get(n.sourceId) }, i);
+                case "entity":
+                    return _jsx(EntityChip, { entity: n.entity, onOpen: ctx.onOpenEntity }, i);
+                case "link":
+                    return (_jsx("a", { href: n.to, onClick: (e) => {
+                            if (ctx.onNavigate) {
+                                e.preventDefault();
+                                ctx.onNavigate(n.to);
+                            }
+                        }, className: "font-medium text-accent-text underline-offset-2 hover:underline", children: n.text }, i));
+            }
+        }) }));
+}
+function Block({ block, }) {
+    switch (block.kind) {
+        case "paragraph":
+            return (_jsx("p", { children: _jsx(Inline, { nodes: block.nodes }) }));
+        case "list": {
+            const List = block.ordered ? "ol" : "ul";
+            return (_jsx(List, { className: cn("flex flex-col gap-1 pl-5", block.ordered ? "list-decimal" : "list-disc marker:text-faint-foreground"), children: block.items.map((item, i) => (_jsx("li", { className: "pl-0.5", children: _jsx(Inline, { nodes: item }) }, i))) }));
+        }
+        case "payload":
+            return _jsx(Payload, { language: block.language, text: block.text, title: block.title });
+        case "tools":
+            return _jsx(ToolCallGroup, { calls: block.calls });
+        case "degraded":
+            return _jsx(DegradedPanel, { reason: block.reason, missing: block.missing });
+        case "card":
+            return _jsx(Card, { name: block.card, props: block.props, summary: block.summary });
+    }
+}
+/** A message's blocks, in order. */
+function MessageContent({ blocks, sources = [], onOpenEntity, onNavigate, className, }) {
+    const ctx = React.useMemo(() => ({ sources: new Map(sources.map((s) => [s.id, s])), onOpenEntity, onNavigate }), [sources, onOpenEntity, onNavigate]);
+    return (_jsx(ContentContext.Provider, { value: ctx, children: _jsx("div", { "data-slot": "message-content", className: cn("flex flex-col gap-3 text-base leading-relaxed", className), children: blocks.map((b, i) => (_jsx(Block, { block: b }, i))) }) }));
+}
+/** Plain text of a message, for copy. Citations become [n]; entities their API name. */
+export function blocksToText(blocks, sources = []) {
+    const marker = new Map(sources.map((s) => [s.id, s.marker]));
+    const inline = (nodes) => nodes
+        .map((n) => {
+        switch (n.kind) {
+            case "provisional":
+                return inline(n.nodes);
+            case "citation":
+                return `[${marker.get(n.sourceId) ?? "?"}]`;
+            case "entity":
+                return n.entity.name;
+            default:
+                return n.text;
+        }
+    })
+        .join("");
+    return blocks
+        .map((b) => {
+        switch (b.kind) {
+            case "paragraph":
+                return inline(b.nodes);
+            case "list":
+                return b.items.map((it, i) => `${b.ordered ? `${i + 1}.` : "-"} ${inline(it)}`).join("\n");
+            case "payload":
+                return b.text;
+            case "degraded":
+                return b.reason;
+            case "card":
+                return b.summary;
+            case "tools":
+                return "";
+        }
+    })
+        .filter(Boolean)
+        .join("\n\n");
+}
+export { MessageContent, Inline };

package/dist/chat/message.d.ts

@@ -0,0 +1,39 @@
+import type { EntityRef, Message as MessageData } from "../lib/chat.js";
+import { type Rating } from "./message-actions.js";
+/**
+ * One message in a thread.
+ *
+ * - A person's message sits right, on the user surface.
+ * - An agent's sits left, under its avatar, name and role, with reasoning above
+ *   the answer, sources and actions below. While streaming, a caret follows the
+ *   last block; an interrupted reply keeps what arrived and says it stopped.
+ * - A person on the team (support, say) sits left like an agent, under a
+ *   neutral avatar with their name and team, so they never read as the agent.
+ * - A system line is centred and quiet.
+ * - A reply a person checked (or edited) before it went out can say so in a
+ *   caption under it, so a reader knows a person stood behind it.
+ */
+declare function Message({ message, onOpenEntity, onNavigate, onRetry, onContinue, rating, onRate, reviewedBy, className, }: {
+    /** The message: author, status, blocks, and optional reasoning, sources and attribution. */
+    message: MessageData;
+    /** Makes entity chips open their thing. */
+    onOpenEntity?: (entity: EntityRef) => void;
+    /** Follows in-app links. */
+    onNavigate?: (to: string) => void;
+    /** Shows Retry on a failed or finished reply. */
+    onRetry?: () => void;
+    /** Shows Continue on an interrupted reply. */
+    onContinue?: () => void;
+    /** The current rating of an agent reply. */
+    rating?: Rating;
+    /** Shows thumbs up and down under agent replies. */
+    onRate?: (rating: Rating) => void;
+    /** A person who checked this agent reply before it was sent: "Checked by Sam", or "Edited by Sam" when they changed it. */
+    reviewedBy?: {
+        name: string;
+        at?: string;
+        edited?: boolean;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+export { Message };

package/dist/chat/message.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CircleStop, Info, UserCheck, UserRound } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { DegradedPanel } from "../blocks/degraded-panel.js";
+import { RelativeTime } from "../blocks/relative-time.js";
+import { AgentAvatar, useAgentRoles } from "./agent-avatar.js";
+import { SourceList } from "./citation.js";
+import { blocksToText, MessageContent } from "./message-content.js";
+import { MessageActions } from "./message-actions.js";
+import { Reasoning } from "./reasoning.js";
+/**
+ * One message in a thread.
+ *
+ * - A person's message sits right, on the user surface.
+ * - An agent's sits left, under its avatar, name and role, with reasoning above
+ *   the answer, sources and actions below. While streaming, a caret follows the
+ *   last block; an interrupted reply keeps what arrived and says it stopped.
+ * - A person on the team (support, say) sits left like an agent, under a
+ *   neutral avatar with their name and team, so they never read as the agent.
+ * - A system line is centred and quiet.
+ * - A reply a person checked (or edited) before it went out can say so in a
+ *   caption under it, so a reader knows a person stood behind it.
+ */
+function Message({ message, onOpenEntity, onNavigate, onRetry, onContinue, rating, onRate, reviewedBy, className, }) {
+    const { author } = message;
+    const roleOf = useAgentRoles();
+    if (author.role === "system") {
+        return (_jsxs("div", { "data-slot": "message", "data-role": "system", className: cn("flex items-center justify-center gap-1.5 py-1 text-xs text-faint-foreground", className), children: [_jsx(Info, { "aria-hidden": true, className: "size-3" }), _jsx(MessageContent, { blocks: message.blocks, className: "text-xs leading-normal" })] }));
+    }
+    if (author.role === "user") {
+        return (_jsx("div", { "data-slot": "message", "data-role": "user", className: cn("flex justify-end pl-10 sm:pl-24 animate-rise-in", className), children: _jsxs("div", { className: "flex max-w-full flex-col items-end gap-1", children: [_jsx("div", { className: "rounded-xl rounded-br-sm bg-surface-user px-3.5 py-2.5", children: _jsx(MessageContent, { blocks: message.blocks, onOpenEntity: onOpenEntity, onNavigate: onNavigate, className: "gap-2" }) }), _jsxs("span", { className: "px-1 text-2xs text-faint-foreground", children: [author.name ?? "You", message.createdAt && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: message.createdAt })] }))] })] }) }));
+    }
+    if (author.role === "person") {
+        return (_jsxs("article", { "data-slot": "message", "data-role": "person", "aria-label": author.team ? `${author.name}, ${author.team}` : author.name, className: cn("flex gap-3 animate-rise-in", className), children: [_jsx("span", { "aria-hidden": true, className: "mt-px flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("header", { className: "flex h-7 items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: author.name }), author.team && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: author.team }), message.createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: message.createdAt }) }))] }), _jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate, className: "mt-1" })] })] }));
+    }
+    const { agent } = author;
+    const streaming = message.status === "streaming";
+    const thinking = streaming && message.blocks.length === 0;
+    const text = blocksToText(message.blocks, message.sources);
+    const meta = [message.attribution?.model, message.attribution?.cost].filter(Boolean).join(" · ");
+    return (_jsxs("article", { "data-slot": "message", "data-role": "agent", "data-status": message.status, "aria-busy": streaming, "aria-label": `${agent.name}, ${roleOf(agent.role).noun} agent`, className: cn("group/message flex gap-3 animate-rise-in", className), children: [_jsx(AgentAvatar, { agent: agent, className: "mt-px" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("header", { className: "flex h-7 items-center gap-2", children: [_jsx("span", { className: "text-sm font-semibold", children: agent.name }), agent.specialty && _jsx("span", { className: "truncate text-xs text-muted-foreground", children: agent.specialty }), message.createdAt && (_jsx("span", { className: "text-xs text-faint-foreground", children: _jsx(RelativeTime, { date: message.createdAt }) }))] }), _jsxs("div", { className: "mt-1 flex flex-col gap-3", children: [message.reasoning && message.reasoning.length > 0 && (_jsx(Reasoning, { entries: message.reasoning, thinking: thinking, thoughtFor: message.thoughtFor })), message.blocks.length > 0 && (_jsxs("div", { className: "relative", children: [_jsx(MessageContent, { blocks: message.blocks, sources: message.sources, onOpenEntity: onOpenEntity, onNavigate: onNavigate }), streaming && (_jsx("span", { "aria-hidden": true, className: "ml-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary animate-caret" }))] })), message.status === "interrupted" && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [_jsx(CircleStop, { "aria-hidden": true, className: "size-3.5" }), "Stopped before it finished. What arrived is kept.", onContinue && (_jsx("button", { type: "button", onClick: onContinue, className: "font-medium text-accent-text hover:underline", children: "Continue" }))] })), message.status === "failed" && (_jsx(DegradedPanel, { reason: "The agent couldn\u2019t finish this reply.", missing: "The rest of the answer", onRetry: onRetry })), !streaming && message.sources && message.sources.length > 0 && _jsx(SourceList, { sources: message.sources }), reviewedBy && (_jsxs("p", { "data-slot": "message-reviewed", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(UserCheck, { "aria-hidden": true, className: "size-3.5" }), reviewedBy.edited ? "Edited" : "Checked", " by ", reviewedBy.name, " before sending", reviewedBy.at && (_jsxs(_Fragment, { children: [" · ", _jsx(RelativeTime, { date: reviewedBy.at })] }))] })), !streaming && message.status !== "failed" && (_jsx(MessageActions, { text: text, onRetry: onRetry, rating: rating, onRate: onRate, meta: meta || undefined, className: "-ml-1.5 opacity-100 transition-opacity duration-150 sm:opacity-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100" }))] })] })] }));
+}
+export { Message };

package/dist/chat/payload.d.ts

@@ -0,0 +1,16 @@
+import type { PayloadLanguage } from "../lib/chat.js";
+/**
+ * A block of code or query text from the agent: a query it ran, code it
+ * wrote, a config file. Rendered as text in a sunken well, with its language and a copy
+ * control that only says "Copied" once the clipboard took it.
+ */
+declare function Payload({ language, text, title, className, }: {
+    /** Shown as the label, e.g. json, sql, python. Never executed or highlighted as HTML. */
+    language: PayloadLanguage;
+    /** The code or query, shown as text. */
+    text: string;
+    /** What it is, e.g. "The query I ran". */
+    title?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export { Payload };

package/dist/chat/payload.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, Copy, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { useCopy } from "../lib/use-copy.js";
+const knownLabels = { json: "JSON", xml: "XML", sql: "SQL", yaml: "YAML", html: "HTML", css: "CSS", js: "JavaScript", ts: "TypeScript", tsx: "TSX", python: "Python", bash: "Shell", sh: "Shell", text: "Text" };
+/** "json" → "JSON", "python" → "Python", short unknown ones upper-cased ("hcl" → "HCL"). */
+const languageLabel = (lang) => knownLabels[lang] ?? (lang.length <= 4 ? lang.toUpperCase() : lang.charAt(0).toUpperCase() + lang.slice(1));
+/**
+ * A block of code or query text from the agent: a query it ran, code it
+ * wrote, a config file. Rendered as text in a sunken well, with its language and a copy
+ * control that only says "Copied" once the clipboard took it.
+ */
+function Payload({ language, text, title, className, }) {
+    const { state, copy } = useCopy();
+    return (_jsxs("figure", { "data-slot": "payload", className: cn("overflow-hidden rounded-lg border bg-sunken", className), children: [_jsxs("figcaption", { className: "flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: languageLabel(language) }), title && _jsxs("span", { children: [" \u00B7 ", title] })] }), _jsx("button", { type: "button", onClick: () => copy(text), "aria-live": "polite", className: "inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " Copied"] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " Couldn\u2019t copy"] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " Copy"] })) })] }), _jsx("pre", { className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", children: _jsx("code", { children: text }) })] }));
+}
+export { Payload };

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

@@ -0,0 +1,20 @@
+import type { PromptSuggestion } from "../lib/chat.js";
+/**
+ * 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, }: {
+    /** 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. */
+    label?: string;
+    /** Shows placeholders while suggestions load. */
+    loading?: boolean;
+    /** Compact chips, or larger cards for an empty thread. */
+    variant?: "chips" | "cards";
+    className?: string;
+}): import("react").JSX.Element | null;
+export { PromptSuggestions };

package/dist/chat/prompt-suggestions.js

@@ -0,0 +1,18 @@
+"use client";
+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";
+/**
+ * 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, }) {
+    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))) })] }));
+}
+export { PromptSuggestions };

package/dist/chat/reasoning.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { ReasoningEntry } from "../lib/chat.js";
+/**
+ * The agent's stated reasoning above its answer. Each step says what it rests
+ * on: verified against evidence, believed, or assumed (with the assumption
+ * spelled out). Open while the agent is thinking; folds to a one-line summary
+ * when it answers.
+ */
+declare function Reasoning({ entries, thinking, thoughtFor, className, }: {
+    /** The steps, each verified (with evidence), believed or assumed. */
+    entries: ReasoningEntry[];
+    /** The agent is still thinking; opens the panel and shows progress. */
+    thinking?: boolean;
+    /** How long it thought, once known, e.g. "6s". */
+    thoughtFor?: string;
+    className?: string;
+}): React.JSX.Element;
+export { Reasoning };

package/dist/chat/reasoning.js

@@ -0,0 +1,31 @@
+"use client";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+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 = {
+    verified: "Verified",
+    believed: "Believed",
+    assumed: "Assumed",
+};
+const basisTone = {
+    verified: "bg-success-weak text-success-text",
+    believed: "bg-muted text-muted-foreground",
+    assumed: "bg-warning-weak text-warning-text",
+};
+/**
+ * The agent's stated reasoning above its answer. Each step says what it rests
+ * on: verified against evidence, believed, or assumed (with the assumption
+ * spelled out). Open while the agent is thinking; folds to a one-line summary
+ * when it answers.
+ */
+function Reasoning({ entries, thinking = false, thoughtFor, className, }) {
+    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))) }) })] }));
+}
+export { Reasoning };

package/dist/chat/thread.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+/**
+ * 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`.
+ */
+declare function Thread({ children, empty, footer, className, contentClassName, }: {
+    children?: React.ReactNode;
+    /** Shown before the first message. */
+    empty?: React.ReactNode;
+    /** Below the messages, usually the composer. */
+    footer?: React.ReactNode;
+    className?: string;
+    /** Classes for the message column. */
+    contentClassName?: string;
+}): React.JSX.Element;
+export { Thread };

package/dist/chat/thread.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/**
+ * 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`.
+ */
+function Thread({ children, empty, footer, className, contentClassName, }) {
+    const scroller = React.useRef(null);
+    const content = React.useRef(null);
+    const pinnedRef = React.useRef(true);
+    const [pinned, setPinned] = React.useState(true);
+    const toBottom = React.useCallback((behavior = "auto") => {
+        const el = scroller.current;
+        if (el)
+            el.scrollTo({ top: el.scrollHeight, behavior });
+    }, []);
+    React.useEffect(() => {
+        const el = content.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(() => {
+            if (pinnedRef.current)
+                toBottom();
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [toBottom]);
+    // Scroll events arrive a frame late, after streaming content may already have
+    // grown the column, so distance from the bottom alone would read growth as
+    // the reader scrolling away. Only an actual move up unpins.
+    const lastTop = React.useRef(0);
+    const onScroll = () => {
+        const el = scroller.current;
+        if (!el)
+            return;
+        const top = el.scrollTop;
+        const atBottom = el.scrollHeight - top - el.clientHeight < 48;
+        if (atBottom) {
+            pinnedRef.current = true;
+            setPinned(true);
+        }
+        else if (top < lastTop.current - 2) {
+            pinnedRef.current = false;
+            setPinned(false);
+        }
+        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: () => {
+                            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 })] }));
+}
+export { Thread };

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { ToolCall as ToolCallData } from "../lib/chat.js";
+/**
+ * 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.
+ */
+declare function ToolCall({ call, className, }: {
+    /** The call: tool name, plain-words title, status, input, output, duration or error. */
+    call: ToolCallData;
+    className?: string;
+}): React.JSX.Element;
+/** A run of tool calls, with a count when it's long enough to fold. */
+declare function ToolCallGroup({ calls, className, }: {
+    /** Several calls, summarised as a group. */
+    calls: ToolCallData[];
+    className?: string;
+}): React.JSX.Element;
+export { ToolCall, ToolCallGroup };