@calliopelabs/ui 0.13.0 → 0.16.0

package/dist/agent/tool.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Frontend tools: what the agent may call in the browser, typed once. The
+ * parameters are a Standard Schema (zod 3.25+ and 4, valibot, arktype), which
+ * types the handler's arguments and validates them, or a plain JSON Schema
+ * with the argument type given as a type parameter. Pure: no React, no
+ * network, so a Server Component can import a tool's definition.
+ */
+import type * as React from "react";
+import type { ChatToolCall } from "../chat/model.js";
+/** The Standard Schema v1 interface (standardschema.dev), inlined so no schema library is a dependency. */
+export interface StandardSchemaV1<Input = unknown, Output = Input> {
+    readonly "~standard": {
+        readonly version: 1;
+        readonly vendor: string;
+        readonly validate: (value: unknown) => StandardResult<Output> | Promise<StandardResult<Output>>;
+        readonly types?: {
+            readonly input: Input;
+            readonly output: Output;
+        } | undefined;
+        /** Standard JSON Schema v1, when the library implements it. */
+        readonly jsonSchema?: {
+            readonly input: (options: {
+                target: string;
+            }) => JsonSchema;
+        };
+    };
+}
+type StandardResult<Output> = {
+    readonly value: Output;
+    readonly issues?: undefined;
+} | {
+    readonly issues: readonly {
+        readonly message: string;
+    }[];
+};
+/** A JSON Schema object, as AG-UI's `Tool.parameters` carries it. */
+export type JsonSchema = Record<string, unknown>;
+/** What a tool's handler is told besides its arguments. */
+export interface AgentToolContext {
+    /** Aborts when the person stops the run or the agent unmounts. */
+    signal: AbortSignal;
+    toolCallId: string;
+}
+/** What a tool's renderer draws from. */
+export interface AgentToolRenderProps<Args = unknown> {
+    call: ChatToolCall;
+    /** The arguments so far: undefined while they stream and do not parse yet. */
+    args: Partial<Args> | undefined;
+    /**
+     * Set while the call waits on the person (a tool with no handler): answers
+     * it, and the answer goes back to the agent as the tool's result.
+     */
+    respond?: (result: unknown) => void;
+}
+export interface AgentTool<Args = unknown> {
+    /** The name the agent calls it by. */
+    name: string;
+    /** What it does, for the agent. */
+    description?: string;
+    parameters?: StandardSchemaV1<unknown, Args> | JsonSchema;
+    /**
+     * Runs the call and returns its result (sent to the agent as JSON text). A
+     * tool with no handler and a `render` is a human-in-the-loop tool: the run
+     * waits until the rendered component calls `respond`.
+     */
+    handler?: (args: Args, context: AgentToolContext) => unknown;
+    /** Draws the call in the conversation instead of the default tool card. */
+    render?: (props: AgentToolRenderProps<Args>) => React.ReactNode;
+    /** Whether the agent runs again after the result. Defaults to true. */
+    followUp?: boolean;
+    /** False hides the tool from the agent without unregistering it. */
+    available?: boolean;
+}
+/** Types a tool's handler and renderer from its parameters; returns the tool as given. */
+export declare function defineTool<Args = Record<string, unknown>>(tool: AgentTool<Args>): AgentTool<Args>;
+export declare function isStandardSchema(value: unknown): value is StandardSchemaV1;
+/**
+ * A tool's parameters as JSON Schema for the agent: Standard JSON Schema when
+ * the library implements it, zod 4's `toJSONSchema()`, or the JSON Schema
+ * given. Throws for a schema it cannot convert (zod 3 without Standard JSON
+ * Schema), naming the tool.
+ */
+export declare function toolJsonSchema(tool: Pick<AgentTool, "name" | "parameters">): JsonSchema;
+/**
+ * The arguments as the handler receives them: validated (and transformed)
+ * through a Standard Schema, or as parsed for a JSON Schema. Rejects with
+ * the schema's issues.
+ */
+export declare function validateToolArgs<Args>(tool: AgentTool<Args>, args: unknown): Promise<Args>;
+/**
+ * A tool's parameters as a Standard Schema, for an engine that only takes
+ * one (CopilotKit): a JSON Schema becomes a schema that passes values through
+ * and reports itself as Standard JSON Schema.
+ */
+export declare function toolStandardSchema(tool: AgentTool): StandardSchemaV1;
+/** A tool result as the text AG-UI's tool message carries. */
+export declare function toolResultText(result: unknown): string;
+export {};

package/dist/agent/tool.js

@@ -0,0 +1,81 @@
+/** Types a tool's handler and renderer from its parameters; returns the tool as given. */
+export function defineTool(tool) {
+    return tool;
+}
+export function isStandardSchema(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "~standard" in value &&
+        typeof value["~standard"]?.validate === "function");
+}
+const EMPTY_OBJECT = { type: "object", properties: {} };
+/**
+ * A tool's parameters as JSON Schema for the agent: Standard JSON Schema when
+ * the library implements it, zod 4's `toJSONSchema()`, or the JSON Schema
+ * given. Throws for a schema it cannot convert (zod 3 without Standard JSON
+ * Schema), naming the tool.
+ */
+export function toolJsonSchema(tool) {
+    const { parameters } = tool;
+    if (parameters === undefined)
+        return EMPTY_OBJECT;
+    if (!isStandardSchema(parameters))
+        return parameters;
+    const standard = parameters["~standard"];
+    if (typeof standard.jsonSchema?.input === "function") {
+        return clean(standard.jsonSchema.input({ target: "draft-07" }));
+    }
+    const withMethod = parameters;
+    if (typeof withMethod.toJSONSchema === "function")
+        return clean(withMethod.toJSONSchema());
+    throw new Error(`Tool ${tool.name}: its ${standard.vendor} schema has no JSON Schema form. Use a library with Standard JSON Schema (zod 4, valibot 1, arktype 2) or pass a JSON Schema.`);
+}
+function clean(schema) {
+    const { $schema: _, ...rest } = schema;
+    return rest;
+}
+/**
+ * The arguments as the handler receives them: validated (and transformed)
+ * through a Standard Schema, or as parsed for a JSON Schema. Rejects with
+ * the schema's issues.
+ */
+export async function validateToolArgs(tool, args) {
+    if (!isStandardSchema(tool.parameters))
+        return args;
+    const result = await tool.parameters["~standard"].validate(args);
+    if (result.issues) {
+        throw new Error(`Invalid arguments for ${tool.name}: ${result.issues.map((i) => i.message).join("; ")}`);
+    }
+    return result.value;
+}
+/**
+ * A tool's parameters as a Standard Schema, for an engine that only takes
+ * one (CopilotKit): a JSON Schema becomes a schema that passes values through
+ * and reports itself as Standard JSON Schema.
+ */
+export function toolStandardSchema(tool) {
+    if (isStandardSchema(tool.parameters))
+        return tool.parameters;
+    const schema = toolJsonSchema(tool);
+    return {
+        "~standard": {
+            version: 1,
+            vendor: "calliope-json-schema",
+            validate: (value) => ({ value }),
+            jsonSchema: { input: () => schema },
+        },
+    };
+}
+/** A tool result as the text AG-UI's tool message carries. */
+export function toolResultText(result) {
+    if (result === undefined)
+        return "";
+    if (typeof result === "string")
+        return result;
+    try {
+        return JSON.stringify(result);
+    }
+    catch {
+        return String(result);
+    }
+}

package/dist/appearance/brands.d.ts

@@ -1,6 +1,8 @@
 /**
- * The two consoles' brands, kept here so both apps and the catalog read the
- * same values. An app adds its navigation:
+ * The family's brands, kept here so every app and the catalog read the same
+ * values. Their colours (sidebar and the product's own accent) live in
+ * `tokens/brand/*.json`; this file adds names, grounds, defaults and themes.
+ * An app adds its navigation:
  *
  *   export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
  */
@@ -78,12 +80,12 @@ export declare const zentinelleBrand: {
     readonly id: "zentinelle";
     readonly name: "Zentinelle AI";
     readonly accent: {
-        readonly key: "teal";
-        readonly label: "Teal";
         readonly dark: "#37efed";
         readonly onDark: "#0b0b19";
         readonly light: "#0d7470";
         readonly onLight: "#f3fbf7";
+        readonly key: "teal";
+        readonly label: "Teal";
     };
     readonly sidebar: "#0b0b19";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
@@ -102,12 +104,12 @@ export declare const workbenchBrand: {
     readonly id: "workbench";
     readonly name: "Calliope AI Workbench";
     readonly accent: {
-        readonly key: "workbench-blue";
-        readonly label: "Workbench blue";
         readonly dark: "#8fb8e8";
         readonly onDark: "#0b1120";
         readonly light: "#2f5d94";
         readonly onLight: "#f3fbf7";
+        readonly key: "workbench-blue";
+        readonly label: "Workbench blue";
     };
     readonly sidebar: "#0e1730";
     readonly grounds: readonly ["navy", "black", "charcoal", "graphite", "paper", "mist"];
@@ -124,12 +126,12 @@ export declare const chatStudioBrand: {
     readonly id: "chat-studio";
     readonly name: "Calliope AI Chat Studio";
     readonly accent: {
-        readonly key: "studio-blue";
-        readonly label: "Studio blue";
         readonly dark: "#8ab4f8";
         readonly onDark: "#0c0c0c";
         readonly light: "#1d4ed8";
         readonly onLight: "#ffffff";
+        readonly key: "studio-blue";
+        readonly label: "Studio blue";
     };
     readonly sidebar: "#080808";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
@@ -147,12 +149,12 @@ export declare const loadrBrand: {
     readonly id: "loadr";
     readonly name: "Calliope AI Loadr";
     readonly accent: {
-        readonly key: "loadr-blue";
-        readonly label: "Loadr blue";
         readonly dark: "#89b4fa";
         readonly onDark: "#11111b";
         readonly light: "#1e66f5";
         readonly onLight: "#ffffff";
+        readonly key: "loadr-blue";
+        readonly label: "Loadr blue";
     };
     readonly sidebar: "#181825";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
@@ -161,6 +163,23 @@ export declare const loadrBrand: {
         readonly light: "paper";
     };
 };
+/**
+ * Calliope AI Deep Data Agent: the family amber on a warm umber sidebar, with
+ * charcoal and mist as its defaults. A separate product from Chat Studio, and
+ * kept visibly apart from it (Studio blue on black and paper), from Astrolift
+ * (green), Zentinelle (teal) and Loadr (blue).
+ */
+export declare const deepDataAgentBrand: {
+    readonly id: "deep-data-agent";
+    readonly name: "Deep Data Agent";
+    readonly accent: "amber";
+    readonly sidebar: "#1a150c";
+    readonly grounds: readonly ["charcoal", "black", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "charcoal";
+        readonly light: "mist";
+    };
+};
 /**
  * Cykick: cyan on near-black with square corners, from
  * `ui/theme/native-themes.json` (primary, background, radius 0). Cykick's
@@ -171,12 +190,12 @@ export declare const cykickBrand: {
     readonly id: "cykick";
     readonly name: "Cykick";
     readonly accent: {
-        readonly key: "cykick-cyan";
-        readonly label: "Cykick cyan";
         readonly dark: "#22d3ee";
         readonly onDark: "#07090e";
         readonly light: "#0e7490";
         readonly onLight: "#ffffff";
+        readonly key: "cykick-cyan";
+        readonly label: "Cykick cyan";
     };
     readonly sidebar: "#07090e";
     readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];

package/dist/appearance/brands.js

@@ -1,6 +1,9 @@
+import { TOKENS } from "../theme/tokens.generated.js";
 /**
- * The two consoles' brands, kept here so both apps and the catalog read the
- * same values. An app adds its navigation:
+ * The family's brands, kept here so every app and the catalog read the same
+ * values. Their colours (sidebar and the product's own accent) live in
+ * `tokens/brand/*.json`; this file adds names, grounds, defaults and themes.
+ * An app adds its navigation:
  *
  *   export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
  */
@@ -13,7 +16,7 @@ export const astroliftBrand = {
     id: "astrolift",
     name: "Astrolift AI",
     accent: "green",
-    sidebar: "#04231a",
+    sidebar: TOKENS.brand.astrolift.sidebar,
     grounds: ["black", "charcoal", "graphite", "emerald", "paper", "mist"],
     defaultGround: { dark: "graphite", light: "mist" },
     themes: [
@@ -47,15 +50,8 @@ export const astroliftBrand = {
 export const zentinelleBrand = {
     id: "zentinelle",
     name: "Zentinelle AI",
-    accent: {
-        key: "teal",
-        label: "Teal",
-        dark: "#37efed",
-        onDark: "#0b0b19",
-        light: "#0d7470",
-        onLight: "#f3fbf7",
-    },
-    sidebar: "#0b0b19",
+    accent: { key: "teal", label: "Teal", ...TOKENS.brand.zentinelle.accent },
+    sidebar: TOKENS.brand.zentinelle.sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "black", light: "mist" },
 };
@@ -63,7 +59,8 @@ export const zentinelleBrand = {
  * The brands below are copied from what each product ships today, so nothing
  * changes when an app moves onto the library. Where a product has no value
  * the model needs (usually a light-ground accent), the nearest one that
- * passes the contrast tests is used and marked "derived" for the designer.
+ * passes the contrast tests is used and its token's description says
+ * "Derived" for the designer.
  */
 /**
  * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
@@ -74,16 +71,8 @@ export const zentinelleBrand = {
 export const workbenchBrand = {
     id: "workbench",
     name: "Calliope AI Workbench",
-    accent: {
-        key: "workbench-blue",
-        label: "Workbench blue",
-        dark: "#8fb8e8",
-        onDark: "#0b1120",
-        // derived: the hub has no light ground
-        light: "#2f5d94",
-        onLight: "#f3fbf7",
-    },
-    sidebar: "#0e1730",
+    accent: { key: "workbench-blue", label: "Workbench blue", ...TOKENS.brand.workbench.accent },
+    sidebar: TOKENS.brand.workbench.sidebar,
     grounds: ["navy", "black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "navy", light: "mist" },
 };
@@ -94,15 +83,8 @@ export const workbenchBrand = {
 export const chatStudioBrand = {
     id: "chat-studio",
     name: "Calliope AI Chat Studio",
-    accent: {
-        key: "studio-blue",
-        label: "Studio blue",
-        dark: "#8ab4f8",
-        onDark: "#0c0c0c",
-        light: "#1d4ed8",
-        onLight: "#ffffff",
-    },
-    sidebar: "#080808",
+    accent: { key: "studio-blue", label: "Studio blue", ...TOKENS.brand["chat-studio"].accent },
+    sidebar: TOKENS.brand["chat-studio"].sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "black", light: "paper" },
 };
@@ -114,18 +96,25 @@ export const chatStudioBrand = {
 export const loadrBrand = {
     id: "loadr",
     name: "Calliope AI Loadr",
-    accent: {
-        key: "loadr-blue",
-        label: "Loadr blue",
-        dark: "#89b4fa",
-        onDark: "#11111b",
-        light: "#1e66f5",
-        onLight: "#ffffff",
-    },
-    sidebar: "#181825",
+    accent: { key: "loadr-blue", label: "Loadr blue", ...TOKENS.brand.loadr.accent },
+    sidebar: TOKENS.brand.loadr.sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "charcoal", light: "paper" },
 };
+/**
+ * Calliope AI Deep Data Agent: the family amber on a warm umber sidebar, with
+ * charcoal and mist as its defaults. A separate product from Chat Studio, and
+ * kept visibly apart from it (Studio blue on black and paper), from Astrolift
+ * (green), Zentinelle (teal) and Loadr (blue).
+ */
+export const deepDataAgentBrand = {
+    id: "deep-data-agent",
+    name: "Deep Data Agent",
+    accent: "amber",
+    sidebar: TOKENS.brand["deep-data-agent"].sidebar,
+    grounds: ["charcoal", "black", "graphite", "paper", "mist"],
+    defaultGround: { dark: "charcoal", light: "mist" },
+};
 /**
  * Cykick: cyan on near-black with square corners, from
  * `ui/theme/native-themes.json` (primary, background, radius 0). Cykick's
@@ -135,16 +124,8 @@ export const loadrBrand = {
 export const cykickBrand = {
     id: "cykick",
     name: "Cykick",
-    accent: {
-        key: "cykick-cyan",
-        label: "Cykick cyan",
-        dark: "#22d3ee",
-        onDark: "#07090e",
-        // derived: no light accent in native-themes.json
-        light: "#0e7490",
-        onLight: "#ffffff",
-    },
-    sidebar: "#07090e",
+    accent: { key: "cykick-cyan", label: "Cykick cyan", ...TOKENS.brand.cykick.accent },
+    sidebar: TOKENS.brand.cykick.sidebar,
     grounds: ["black", "charcoal", "graphite", "paper", "mist"],
     defaultGround: { dark: "black", light: "mist" },
     defaultCorners: 0,

package/dist/chat/AgentProgress.d.ts

@@ -0,0 +1,19 @@
+import type { StatusTone } from "../status/tones.js";
+import type { RunStage } from "../workflow/run.js";
+import type { ChatRunStatus, ChatStep, ChatView } from "./model.js";
+export interface AgentProgressProps {
+    /** The run: a `ChatView`, or the part of one this reads. */
+    view: Pick<ChatView, "status" | "steps" | "error">;
+    /** Names the section. Defaults to "Agent progress". */
+    label?: string;
+    className?: string;
+}
+export declare const CHAT_RUN_TONE: Record<ChatRunStatus, StatusTone>;
+/** A run's steps as the run timeline's stages. */
+export declare function chatStepStages(steps: readonly ChatStep[]): RunStage[];
+/**
+ * Where the agent's run stands: its status, and its steps on the library's
+ * RunTimeline, so a chat run reads like any other run. The error, when the
+ * run failed, sits beside the status.
+ */
+export declare function AgentProgress({ view, label, className }: AgentProgressProps): import("react").JSX.Element;

package/dist/chat/AgentProgress.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusBadge } from "../status/StatusBadge.js";
+import { RunTimeline } from "../workflow/RunTimeline.js";
+export const CHAT_RUN_TONE = {
+    idle: "muted",
+    running: "info",
+    finished: "ok",
+    interrupted: "warn",
+    cancelled: "muted",
+    error: "error",
+};
+const STAGE = {
+    running: "running",
+    finished: "passed",
+    failed: "failed",
+    cancelled: "cancelled",
+};
+/** A run's steps as the run timeline's stages. */
+export function chatStepStages(steps) {
+    return steps.map((step, i) => ({ id: String(i), label: step.name, status: STAGE[step.status] }));
+}
+/**
+ * Where the agent's run stands: its status, and its steps on the library's
+ * RunTimeline, so a chat run reads like any other run. The error, when the
+ * run failed, sits beside the status.
+ */
+export function AgentProgress({ view, label, className }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    return (_jsxs("section", { "aria-label": label ?? t.progress, "data-slot": "agent-progress", className: cn("flex min-w-0 flex-col gap-3", className), children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(StatusBadge, { tone: CHAT_RUN_TONE[view.status], pulse: view.status === "running", children: t.runStatus(view.status) }), view.status === "error" && view.error && (_jsx("p", { className: "min-w-0 text-sm [overflow-wrap:anywhere] text-danger-fg", children: view.error.message }))] }), view.steps.length > 0 && _jsx(RunTimeline, { stages: chatStepStages(view.steps), label: t.steps })] }));
+}

package/dist/chat/Composer.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface ComposerProps {
+    /** The draft, when the host holds it. Leave it out and the composer keeps its own. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Sends the trimmed draft. A composer that keeps its own draft clears it;
+     * a host that holds it clears it when it wants to.
+     */
+    onSubmit: (text: string) => void;
+    /** A run is in flight: send is held, and stop shows when `onStop` is given. */
+    running?: boolean;
+    onStop?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Names the field. Defaults to "Message". */
+    label?: string;
+    /** Above the field: the files the host has attached, as chips. */
+    attachments?: React.ReactNode;
+    /** Beside send: an attach button, a ModelPicker. */
+    actions?: React.ReactNode;
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * Where the person writes. Multi-line, growing with the text; Enter sends,
+ * Shift+Enter breaks the line, and nothing sends while an input method is
+ * composing. While a run is in flight, send is held and stop is offered.
+ * Attachments and actions are slots: the host owns files and models.
+ */
+export declare function Composer({ value, onValueChange, onSubmit, running, onStop, disabled, placeholder, label, attachments, actions, autoFocus, className, }: ComposerProps): React.JSX.Element;

package/dist/chat/Composer.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, SquareIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * Where the person writes. Multi-line, growing with the text; Enter sends,
+ * Shift+Enter breaks the line, and nothing sends while an input method is
+ * composing. While a run is in flight, send is held and stop is offered.
+ * Attachments and actions are slots: the host owns files and models.
+ */
+export function Composer({ value, onValueChange, onSubmit, running = false, onStop, disabled = false, placeholder, label, attachments, actions, autoFocus, className, }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    const hintId = React.useId();
+    const [own, setOwn] = React.useState("");
+    const draft = value ?? own;
+    const canSend = !disabled && !running && draft.trim() !== "";
+    const change = (next) => {
+        if (value === undefined)
+            setOwn(next);
+        onValueChange?.(next);
+    };
+    const submit = () => {
+        if (!canSend)
+            return;
+        onSubmit(draft.trim());
+        if (value === undefined)
+            setOwn("");
+    };
+    return (_jsxs("form", { "data-slot": "composer", onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, className: cn("flex min-w-0 flex-col rounded-lg border border-input bg-background focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30", disabled && "opacity-50", className), children: [attachments && (_jsx("div", { role: "group", "aria-label": t.attachments, className: "flex min-w-0 flex-wrap gap-2 px-3 pt-2", children: attachments })), _jsx("textarea", { "aria-label": label ?? t.composer, "aria-describedby": hintId, value: draft, disabled: disabled, placeholder: placeholder ?? t.placeholder, rows: 1, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus -- the host asks for it, on a chat screen
+                autoFocus: autoFocus, onChange: (event) => change(event.target.value), onKeyDown: (event) => {
+                    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing)
+                        return;
+                    event.preventDefault();
+                    submit();
+                }, className: "field-sizing-content max-h-48 min-h-10 w-full min-w-0 resize-none bg-transparent px-3 py-2 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm" }), _jsx("p", { id: hintId, className: "sr-only", children: t.composerHint }), _jsxs("div", { className: "flex min-w-0 items-center gap-2 px-2 pb-2", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: actions }), running && onStop ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onStop, children: [_jsx(SquareIcon, { "aria-hidden": true }), t.stop] })) : (_jsxs(Button, { type: "submit", size: "sm", disabled: !canSend, children: [_jsx(ArrowUpIcon, { "aria-hidden": true }), t.send] }))] })] }));
+}

package/dist/chat/MessageBubble.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import type { ChatMessage } from "./model.js";
+/**
+ * Renders a message's text: the host's markdown renderer, say. It receives
+ * the text so far (it grows while the message streams) and must treat it as
+ * untrusted. Without one, the text shows as plain text.
+ */
+export type ChatContentRenderer = (content: string, message: ChatMessage) => React.ReactNode;
+export interface MessageBubbleProps {
+    message: ChatMessage;
+    renderContent?: ChatContentRenderer;
+    /** Beside the speaker: a time, a copy button. */
+    meta?: React.ReactNode;
+    className?: string;
+}
+/**
+ * One message, by role: the person's on the right in a muted bubble, the
+ * assistant's full width, system and developer notes dashed and quiet, a tool
+ * message in mono. While it streams, an empty one says it is thinking and a
+ * growing one shows a caret. Text is plain unless the host passes
+ * `renderContent`; plain text is never parsed as HTML.
+ */
+export declare function MessageBubble({ message, renderContent, meta, className }: MessageBubbleProps): React.JSX.Element;

package/dist/chat/MessageBubble.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusDot } from "../status/StatusDot.js";
+const ROLE_CLASS = {
+    user: "ml-auto max-w-[85%] rounded-lg bg-muted px-3 py-2",
+    assistant: "",
+    system: "rounded-lg border border-dashed px-3 py-2 text-xs text-muted-foreground",
+    developer: "rounded-lg border border-dashed px-3 py-2 text-xs text-muted-foreground",
+    tool: "rounded-lg border bg-card px-3 py-2 font-mono text-xs",
+};
+/**
+ * One message, by role: the person's on the right in a muted bubble, the
+ * assistant's full width, system and developer notes dashed and quiet, a tool
+ * message in mono. While it streams, an empty one says it is thinking and a
+ * growing one shows a caret. Text is plain unless the host passes
+ * `renderContent`; plain text is never parsed as HTML.
+ */
+export function MessageBubble({ message, renderContent, meta, className }) {
+    const { messages } = useUI();
+    const t = messages.chat;
+    const speaker = message.name ?? t.role(message.role);
+    const empty = message.content === "";
+    return (_jsxs("article", { "aria-label": t.messageFrom(speaker), "aria-busy": message.streaming || undefined, "data-slot": "message-bubble", "data-role": message.role, className: cn("flex min-w-0 flex-col gap-1", ROLE_CLASS[message.role], className), children: [(message.role !== "user" || meta) && (_jsxs("header", { className: "flex min-w-0 items-center gap-2 text-xs text-muted-foreground", children: [message.role !== "user" && _jsx("span", { className: "font-medium", children: speaker }), meta && _jsx("span", { className: "ml-auto flex items-center gap-2", children: meta })] })), message.streaming && empty ? (_jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(StatusDot, { tone: "info", pulse: true }), t.thinking] })) : (_jsxs("div", { className: "min-w-0 text-sm [overflow-wrap:break-word]", children: [renderContent ? (renderContent(message.content, message)) : (_jsx("p", { className: "whitespace-pre-wrap", children: message.content })), message.streaming && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "ml-0.5 inline-block h-4 w-1.5 translate-y-0.5 bg-foreground/60 motion-safe:animate-pulse" }), _jsx("span", { className: "sr-only", children: t.writing })] }))] }))] }));
+}

package/dist/chat/MessageList.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { type ChatContentRenderer } from "./MessageBubble.js";
+import type { ChatTimelineItem, ChatToolCall, ChatView } from "./model.js";
+import { type ToolCallCardProps } from "./ToolCallCard.js";
+export interface MessageListProps {
+    /** The conversation: a `ChatView`, or the part of one the list reads. */
+    view: Pick<ChatView, "messages" | "toolCalls" | "timeline" | "status" | "error">;
+    renderContent?: ChatContentRenderer;
+    /**
+     * Draws a tool call the host has its own component for; return undefined
+     * for the default `ToolCallCard`.
+     */
+    renderToolCall?: (call: ChatToolCall) => React.ReactNode;
+    /** The tool's name for people, per call. */
+    toolTitle?: (call: ChatToolCall) => string | undefined;
+    onApprove?: ToolCallCardProps["onApprove"];
+    onDeny?: ToolCallCardProps["onDeny"];
+    /**
+     * Draws something after a timeline item: generative UI an agent sent
+     * between messages (a progress card, an artifact). Called for each item.
+     */
+    renderAfter?: (item: ChatTimelineItem) => React.ReactNode;
+    /** Drawn after the whole conversation, before a failed run's error: what the run waits on. */
+    footer?: React.ReactNode;
+    /** Offered beside a failed run's error. */
+    onRetry?: () => void;
+    /** The first page of history is loading. */
+    loading?: boolean;
+    /** Replaces the default empty state. */
+    empty?: React.ReactNode;
+    /** Names the list. Defaults to "Conversation". */
+    label?: string;
+    className?: string;
+}
+/**
+ * The conversation in arrival order: message bubbles with tool call cards
+ * between them, a failed run's error at the end. It follows the stream while
+ * the person is at the bottom and stops following when they scroll up, with
+ * a button back to the latest. Each bubble re-renders only when its message
+ * changes, so a long conversation streams without virtualization; a host
+ * with thousands of turns pages its history.
+ */
+export declare function MessageList({ view, renderContent, renderToolCall, renderAfter, footer, toolTitle, onApprove, onDeny, onRetry, loading, empty, label, className, }: MessageListProps): React.JSX.Element;