agentic-ui-kit 0.2.1 → 0.4.0

package/dist/types/react/src/components/markdown.d.ts

@@ -1,8 +1,26 @@
+import { type ReactNode } from "react";
+/**
+ * Draws some links in message markdown your way, e.g. a job link as a job row. Return undefined to keep the
+ * kit's link. Set with `MarkdownLinksProvider`.
+ */
+export type RenderLink = (link: {
+    href: string;
+    children: ReactNode;
+}) => ReactNode | undefined;
+export declare function MarkdownLinksProvider({ renderLink, children }: {
+    renderLink: RenderLink;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export interface MarkdownProps {
     children: string;
     /** While true, text is paced and new words fade in; unfinished markdown is completed for display. */
     streaming?: boolean;
     className?: string;
+    /**
+     * The text part's id. With it, ```ui blocks are drawn with the components of the surrounding
+     * `UiComponentsProvider` (their state is keyed by it); without it, they show as code.
+     */
+    partId?: string;
 }
 /** Message markdown: GFM, KaTeX math ($…$ and $$…$$), Shiki code blocks, smooth fade-in while streaming. */
-export declare function Markdown({ children, streaming, className }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, streaming, className, partId }: MarkdownProps): import("react").JSX.Element;

package/dist/types/react/src/components/message-list.d.ts

@@ -1,18 +1,26 @@
 import type { Message, Part } from "../../../core/src/index.js";
 import { type ReactNode } from "react";
-import { type Feedback } from "./messages";
+import { type Feedback, type MessageActions } from "./messages";
 export interface MessageListProps {
     messages: Message[];
     onRetry?: (assistantId: string) => void;
     onEdit?: (userId: string) => void;
     onFeedback?: (assistantId: string, feedback: Feedback) => void;
+    /** Read aloud button on assistant messages. */
+    onReadAloud?: (assistantId: string) => void;
+    /** Add your own buttons to each message's action row, or hide copy and the time. */
+    actions?: MessageActions;
     renderPart?: (part: Part) => ReactNode;
     /** Under the last message, inside the scroll area, e.g. the docked composer. Stays in view at the bottom. */
     footer?: ReactNode;
+    /** Above the first message, inside the column; scrolls with the conversation. E.g. a ChatNotice. */
+    header?: ReactNode;
+    /** Where reading starts: "bottom" (default, a live chat) or "top" (a transcript read from the start). */
+    start?: "bottom" | "top";
     className?: string;
 }
 /**
  * The scrolling conversation. It follows a streaming reply while the reader is at the bottom and leaves
  * them alone once they scroll up, with a button to jump back. Sending a message always jumps down.
  */
-export declare function MessageList({ messages, onRetry, onEdit, onFeedback, renderPart, footer, className }: MessageListProps): import("react").JSX.Element;
+export declare function MessageList({ messages, onRetry, onEdit, onFeedback, onReadAloud, actions, renderPart, header, footer, start, className }: MessageListProps): import("react").JSX.Element;

package/dist/types/react/src/components/messages.d.ts

@@ -1,33 +1,54 @@
 import { type Message, type Part } from "../../../core/src/index.js";
 import { type ReactNode } from "react";
+import { type ChatLabels } from "../primitives/labels";
 /** "just now", "5 minutes ago", "21 hours ago", "yesterday", then a date. */
-export declare function formatRelativeTime(iso: string, now?: number): string;
+export declare function formatRelativeTime(iso: string, now?: number, labels?: ChatLabels): string;
 /** Plain text of a message, for copy and read aloud. */
 export declare function messageText(message: Message): string;
+/**
+ * The action row under each message. The kit's buttons show when you pass their handler (retry, edit,
+ * feedback, read aloud); copy and the time show unless turned off; `extra` adds your own after them.
+ */
+export interface MessageActions {
+    /** Your buttons after the kit's, per message, e.g. Share or a "…" menu. Use `IconButton size="sm"`. */
+    extra?: (message: Message) => ReactNode;
+    /** The copy button. Default true. */
+    copy?: boolean;
+    /** The relative time. Default true. */
+    time?: boolean;
+}
 export interface UserMessageProps {
     message: Message;
     onRetry?: () => void;
     onEdit?: () => void;
     /** Extra buttons in the action row. */
     actions?: ReactNode;
+    /** Hide the copy button. */
+    copy?: boolean;
+    /** Hide the time. */
+    time?: boolean;
     className?: string;
 }
 /** The user's turn: a bubble on the right, with time, retry, edit and copy under it on hover. */
-export declare function UserMessage({ message, onRetry, onEdit, actions, className }: UserMessageProps): import("react").JSX.Element;
+export declare function UserMessage({ message, onRetry, onEdit, actions, copy, time, className }: UserMessageProps): import("react").JSX.Element;
 export type Feedback = "good" | "bad";
 export interface AssistantMessageProps {
     message: Message;
     onRetry?: () => void;
     onFeedback?: (feedback: Feedback) => void;
     onReadAloud?: () => void;
-    /** Renders parts the kit does not draw itself (custom parts, widgets until WidgetFrame lands). */
+    /** Renders parts the kit does not draw itself (custom parts), or replaces its own look (widgets). */
     renderPart?: (part: Part) => ReactNode;
     /** Extra buttons in the action row. */
     actions?: ReactNode;
+    /** Hide the copy button. */
+    copy?: boolean;
+    /** Hide the time. */
+    time?: boolean;
     className?: string;
 }
 /**
  * The assistant's turn: activity groups (each with its own token count), markdown, and other parts in
  * order. When done, copy / read aloud / feedback / retry and the time sit under it.
  */
-export declare function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPart, actions, className }: AssistantMessageProps): import("react").JSX.Element;
+export declare function AssistantMessage({ message, onRetry, onFeedback, onReadAloud, renderPart, actions, copy, time, className }: AssistantMessageProps): import("react").JSX.Element;

package/dist/types/react/src/components/tools.d.ts

@@ -1,13 +1,14 @@
 import type { ActivityPart, ToolCallPart } from "../../../core/src/index.js";
 import { type ComponentType, type ReactNode } from "react";
 import { type AgentTool } from "../hooks/agent";
+import { type ChatLabels } from "../primitives/labels";
 /**
  * How one kind of tool call shows up in an activity group. Registered by tool name; hosts add their own and
  * override the built-in ones through `ChatProvider`.
  */
 export interface ToolView {
-    /** Row label, e.g. "Ran a command". Defaults to the part's title, then its name. */
-    label?: (part: ToolCallPart) => ReactNode;
+    /** Row label, e.g. "Ran a command". Defaults to the part's title, then its name. `labels` are the active UI strings. */
+    label?: (part: ToolCallPart, labels: ChatLabels) => ReactNode;
     /** Highlighted text after the label, e.g. the search query. Defaults to the part's subtitle. */
     subtitle?: (part: ToolCallPart) => ReactNode;
     /** Tooltip on the row label, e.g. the command's description. */
@@ -15,7 +16,7 @@ export interface ToolView {
     /** The approval question, e.g. "Add 4 events to your calendar?". Defaults to "Allow <label>?". */
     ask?: (part: ToolCallPart) => ReactNode;
     /** Phrase for the group heading, lowercase: "ran a command", "ran 3 commands". */
-    summary?: (count: number) => string;
+    summary?: (count: number, labels: ChatLabels) => string;
     /** Body shown when the row is expanded. Defaults to the result, or the input as JSON. */
     Detail?: ComponentType<{
         part: ToolCallPart;
@@ -27,6 +28,13 @@ export interface ToolView {
     Block?: ComponentType<{
         part: ToolCallPart;
     }>;
+    /**
+     * A card under the activity group the call sits in, while the call keeps its row: job cards, a diff with
+     * Apply/Undo. Reads the part's `data` (display data the model does not see) or its result.
+     */
+    Card?: ComponentType<{
+        part: ToolCallPart;
+    }>;
 }
 export type ToolViews = Record<string, ToolView>;
 export declare function ToolViewsProvider({ tools, children }: {
@@ -45,12 +53,12 @@ export declare const useChatTool: <Input, Output>(tool: ChatTool<Input, Output>)
 /** Streaming or running: the model or a tool is busy with it. */
 export declare const isWorking: (part: ActivityPart) => boolean;
 /** Row label for any activity part. */
-export declare function activityLabel(part: ActivityPart, view?: ToolView): ReactNode;
+export declare function activityLabel(part: ActivityPart, labels: ChatLabels, view?: ToolView): ReactNode;
 /**
  * Heading of an activity group. While live it follows the latest step. Once done it lists what the tools
  * did, in order ("Ran a command, searched the web"); a group of only thinking shows the first title.
  */
-export declare function activityHeading(parts: readonly ActivityPart[], views: ToolViews): ReactNode;
+export declare function activityHeading(parts: readonly ActivityPart[], views: ToolViews, labels: ChatLabels): ReactNode;
 /** A shell command. Input `{ command, description? }`; result a string or `{ stdout, stderr, exitCode }`. */
 export declare const commandTool: ToolView;
 export interface SearchResult {
@@ -59,10 +67,15 @@ export interface SearchResult {
     /** Icon url. Without one a globe is shown; the kit never fetches icons itself. */
     favicon?: string;
 }
-/** A web search. Input `{ query }`; result `{ results: SearchResult[] }` or `SearchResult[]`. */
+/**
+ * A web search. Input `{ query }`; results (`{ results: SearchResult[] }` or `SearchResult[]`) from the
+ * part's display `data`, else its `result`.
+ */
 export declare const webSearchTool: ToolView;
+/** Reads a web page. Input `{ url }`; the row shows the page's host, the detail links to it. */
+export declare const webFetchTool: ToolView;
 /** Memory lookups, e.g. Anthropic's memory tool. Input `{ path }`. */
 export declare const memoryTool: ToolView;
 export declare const defaultToolViews: ToolViews;
 /** "9s", "1m 5s". */
-export declare function formatDuration(ms: number): string;
+export declare function formatDuration(ms: number, labels?: ChatLabels): string;

package/dist/types/react/src/components/ui-tree.d.ts

@@ -0,0 +1,87 @@
+import { type ToolCallPart, type UiComponentSpec } from "../../../core/src/index.js";
+import { type ComponentType, type ReactNode } from "react";
+/** A component the model may use in a `render_ui` tree: its spec for the model and the React that draws it. */
+export interface UiComponent<Props = any> extends UiComponentSpec {
+    /** Gets the node's props (already checked against `props`, state refs resolved) and its rendered children. */
+    render: ComponentType<Props & {
+        children?: ReactNode;
+    }>;
+}
+/** Keeps a widget's state across reloads, keyed by the tool call's id. */
+export interface UiStateStore {
+    load(id: string): Record<string, unknown> | undefined;
+    save(id: string, state: Record<string, unknown>): void;
+}
+export interface UiComponentsProviderProps {
+    components: readonly UiComponent[];
+    /** Keeps each widget's state (ticks, picked tab) across reloads. */
+    persist?: UiStateStore;
+    /** Fence language of UI blocks in replies (```ui); `false` shows them as code. */
+    markup?: string | false;
+    children: ReactNode;
+}
+/**
+ * The components the model may use: in ```ui blocks of its replies (see `uiMarkupGuide` in
+ * agentic-ui-kit/core) and in tool calls drawn with `uiTreeToolView`. `persist` keeps each widget's state.
+ */
+export declare function UiComponentsProvider({ components, persist, markup, children }: UiComponentsProviderProps): import("react").JSX.Element;
+/** Inside a registered component: runs an action from its props, e.g. `run(props.onPress)`. Bad actions do nothing. */
+export declare function useUiAction(): (action: unknown) => void;
+/** Inside a registered component: the widget's state and a setter, for inputs that write to it. */
+export declare function useUiState(): [Record<string, unknown>, (key: string, value: unknown) => void];
+export interface UiTreeProps {
+    /** Keys the widget's state in the store, usually the tool call's id. */
+    id: string;
+    /** The tree so far; it may be cut short while it streams. */
+    root: unknown;
+    /** Starting values of the state, from the tree. */
+    state?: Record<string, unknown>;
+    streaming?: boolean;
+}
+/** Draws a `render_ui` tree with the registered components. Unknown components and bad props render nothing. */
+export declare function UiTree({ id, root, state: initial, streaming }: UiTreeProps): import("react").JSX.Element | null;
+/** The fence language drawn as UI here, or undefined outside a `UiComponentsProvider`. */
+export declare function useUiMarkupLanguage(): string | undefined;
+/** A ```ui block from a reply, drawn with the registered components. Safe on a block that is still streaming. */
+export declare function UiMarkupBlock({ id, source, streaming }: {
+    id: string;
+    source: string;
+    streaming?: boolean;
+}): import("react").JSX.Element;
+/**
+ * A tool view that draws a call's (streaming) JSX markup with your registered components, for whatever tool
+ * your harness uses; the suggested one is core's `showUiTool`. Register it under your tool's name:
+ * `{ show_ui: uiMarkupToolView() }`. `read` maps your tool's input to the markup; the default reads `markup`.
+ */
+export declare function uiMarkupToolView(read?: (input: unknown) => string | undefined): {
+    Block: ({ part }: {
+        part: ToolCallPart;
+    }) => import("react").JSX.Element | null;
+};
+/** Reads `{ root, state }`. Models sometimes send `root` or `state` as a JSON string; those are parsed too. */
+export declare function readTreeInput(input: unknown): {
+    root?: unknown;
+    state?: Record<string, unknown>;
+};
+/**
+ * A tool view that draws a call's (streaming) input as a tree of your registered components, for whatever
+ * tool your harness uses. Register it under your tool's name: `{ render_ui: uiTreeToolView() }`. `read` maps
+ * your tool's input to the tree and its starting state; the default reads `{ root, state }`, the shape of
+ * the suggested `renderUiTool`.
+ */
+export declare function uiTreeToolView(read?: (input: unknown) => {
+    root?: unknown;
+    state?: Record<string, unknown>;
+}): {
+    Block: ({ part }: {
+        part: ToolCallPart;
+    }) => import("react").JSX.Element | null;
+};
+/**
+ * The escape hatch: raw HTML or SVG in a sandboxed WidgetFrame, as a node of the tree. Register it only if
+ * the model may write HTML; it gets what the chat's `widgets` host allows.
+ */
+export declare const htmlComponent: UiComponent<{
+    html: string;
+    title?: string;
+}>;

package/dist/types/react/src/components/widget-frame.d.ts

@@ -0,0 +1,97 @@
+import type { ToolCallPart, WidgetPart } from "../../../core/src/index.js";
+import { type ReactNode } from "react";
+/** Origins a widget may load from, e.g. "https://unpkg.com". Entries that are not plain origins are dropped. */
+export interface WidgetAllow {
+    /** Scripts, styles, images, fonts, media: a CDN for a library, a map tile server. */
+    resourceDomains?: string[];
+    /** fetch, XHR and WebSocket. */
+    connectDomains?: string[];
+}
+/** An MCP App UI resource, read by the host (the kit never fetches anything for a widget). */
+export interface WidgetResource {
+    /** The full HTML document (`text/html;profile=mcp-app`). */
+    html: string;
+    /** What the resource asks to load (its `_meta.ui.csp`); intersected with the host's `allow`. */
+    csp?: WidgetAllow;
+}
+/** What widgets in this chat may do. A callback left out turns that ability off. */
+export interface WidgetHost {
+    /** The most any widget may load. Nothing by default. */
+    allow?: WidgetAllow;
+    /** The widget's sendPrompt(text) / MCP `ui/message`: send a message as the user. */
+    onPrompt?: (text: string) => void | undefined;
+    /** The widget's openLink(url) / MCP `ui/open-link`. Only http(s) URLs get here. */
+    onOpenLink?: (url: string) => void | undefined;
+    /** MCP `tools/call` from an app UI: call a tool on its server. Resolves to the MCP CallToolResult. */
+    onCallTool?: (name: string, args: Record<string, unknown>) => Promise<unknown> | undefined;
+    /** Reads the UI resource of a `widget` part with a `resourceUri`. Without it such parts render nothing. */
+    readResource?: (uri: string) => Promise<WidgetResource>;
+    /**
+     * A widget's script failed (an exception or a rejected promise), e.g. to send back to the model so it can
+     * fix the widget. `partId` is the widget part or tool call. Each message is reported once per widget.
+     */
+    onWidgetError?: ((error: {
+        partId: string;
+        message: string;
+    }) => void) | undefined;
+}
+/** Sets what widgets below may do. ChatView and ChatTranscript set it from their `widgets` prop. */
+export declare function WidgetHostProvider({ host, children }: {
+    host: WidgetHost;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useWidgetHost(): WidgetHost;
+export interface WidgetFrameProps extends Omit<WidgetHost, "readResource" | "onWidgetError"> {
+    /** The widget's script failed; each message once. */
+    onError?: (message: string) => void;
+    /** A fragment (no <html>/<body>) or an <svg>, as the model writes it; or a full document when `document`. */
+    html: string;
+    /** `html` is a full MCP App document: it runs as is and talks MCP Apps itself. */
+    document?: boolean;
+    /** True while the model is still writing the fragment: it fills in as it arrives, scripts run once done. */
+    streaming?: boolean;
+    title?: string;
+    /** Shown in turn while streaming, e.g. "Finding free slots". */
+    loadingMessages?: string[];
+    /** What the widget asks to load (MCP `_meta.ui.csp`). Intersected with `allow`, never more. */
+    csp?: WidgetAllow;
+    /** App UIs: the tool call's arguments (`ui/notifications/tool-input`). */
+    toolInput?: Record<string, unknown>;
+    /** App UIs: the tool's CallToolResult (`ui/notifications/tool-result`). */
+    toolResult?: unknown;
+    /** App UIs: set when the call was cancelled, with the reason (`ui/notifications/tool-cancelled`). */
+    cancelled?: string;
+    className?: string;
+}
+/** The tallest a widget may grow, in px. */
+export declare const WIDGET_MAX_HEIGHT = 2000;
+/** The part of a widget's request that the host allows. */
+export declare function intersectAllow(request: WidgetAllow, allow?: WidgetAllow): WidgetAllow;
+/** The Content-Security-Policy of a widget's document. */
+export declare function widgetCsp(allow?: WidgetAllow): string;
+export declare function WidgetFrame({ html, document: isDocument, streaming, title, loadingMessages, allow, csp: request, onPrompt, onOpenLink, onCallTool, onError, toolInput, toolResult, cancelled, className, }: WidgetFrameProps): import("react").JSX.Element;
+/** The default look of a `widget` part: inline html, or an app UI the host reads from `resourceUri`. */
+export declare function WidgetPartView({ part }: {
+    part: WidgetPart;
+}): import("react").JSX.Element | null;
+/** What a widget tool call's input means for the frame. */
+export interface WidgetToolInput {
+    html?: string;
+    title?: string;
+    loadingMessages?: string[];
+}
+/** Reads the fields of the suggested `visualizeTool` (widget_code, title, loading_messages). */
+export declare function readVisualizeInput(input: unknown): WidgetToolInput;
+/**
+ * A tool view that draws a call's (streaming) input in a WidgetFrame, for whatever tool your harness uses
+ * to write HTML. Register it under your tool's name: `{ show_widget: widgetToolView() }`. `read` maps your
+ * tool's input (possibly cut short while it streams) to the frame's fields; the default reads the suggested
+ * `visualizeTool`'s fields.
+ */
+export declare function widgetToolView(read?: (input: unknown) => WidgetToolInput): {
+    Block: ({ part }: {
+        part: ToolCallPart;
+    }) => import("react").JSX.Element | null;
+};
+/** The default `onOpenLink` of ChatView and ChatTranscript: a new tab with no opener. */
+export declare function openInNewTab(url: string): void;

package/dist/types/react/src/index.d.ts

@@ -3,9 +3,14 @@ export type { ButtonProps, IconButtonProps } from "./primitives/button";
 export { Badge } from "./primitives/badge";
 export type { BadgeProps } from "./primitives/badge";
 export { Tooltip } from "./primitives/tooltip";
+export type { TooltipProps } from "./primitives/tooltip";
+export { SegmentedControl } from "./primitives/segmented-control";
+export type { SegmentedControlProps, SegmentedOption } from "./primitives/segmented-control";
 export { Caret } from "./primitives/caret";
 export { Disclosure } from "./primitives/disclosure";
+export type { DisclosureProps } from "./primitives/disclosure";
 export { Popover, Menu, MenuItem, MenuSearch, MenuSection, MenuSeparator, MenuNote, MenuTrigger, SubmenuTrigger } from "./primitives/menu";
+export type { MenuSearchProps, PopoverProps, MenuProps, MenuItemProps, MenuSectionProps } from "./primitives/menu";
 export { ContextMenu } from "./primitives/context-menu";
 export type { ContextMenuProps } from "./primitives/context-menu";
 export { Modal, Drawer } from "./primitives/overlay";
@@ -13,8 +18,13 @@ export type { ModalProps, DrawerProps } from "./primitives/overlay";
 export { Panel } from "./primitives/panel";
 export type { PanelProps } from "./primitives/panel";
 export { CodeBlock } from "./primitives/code-block";
+export type { CodeBlockProps } from "./primitives/code-block";
 export { ChatTheme } from "./primitives/chat-theme";
 export type { ChatThemeProps } from "./primitives/chat-theme";
+export { defaultLabels, useLabels } from "./primitives/labels";
+export type { ChatLabels } from "./primitives/labels";
+export { defaultIcons, useIcons } from "./primitives/icons";
+export type { ChatIcons } from "./primitives/icons";
 export type { CodeThemes, ChatMotion } from "./primitives/appearance";
 export { useChat, userMessage } from "./hooks/use-chat";
 export type { Transport, SendRequest, SendOptions, UseChat, UseChatOptions, PendingApproval } from "./hooks/use-chat";
@@ -23,14 +33,19 @@ export { AgentProvider, AgentRegistry, useAgentRegistry, useAgentSnapshot, useAg
 export type { AgentTool, ToolContext, ToolSpec, JsonSchema } from "./hooks/agent";
 export { useSmoothText } from "./hooks/smooth-text";
 export { useSidebar, useMediaQuery, DRAWER_QUERY } from "./hooks/sidebar-state";
+export type { SidebarState } from "./hooks/sidebar-state";
 export { UserMessage, AssistantMessage, formatRelativeTime, messageText } from "./components/messages";
-export type { UserMessageProps, AssistantMessageProps, Feedback } from "./components/messages";
-export { Markdown } from "./components/markdown";
-export type { MarkdownProps } from "./components/markdown";
+export type { UserMessageProps, AssistantMessageProps, Feedback, MessageActions } from "./components/messages";
+export { Markdown, MarkdownLinksProvider } from "./components/markdown";
+export type { MarkdownProps, RenderLink } from "./components/markdown";
 export { ActivityGroup } from "./components/activity-group";
 export type { ActivityGroupProps } from "./components/activity-group";
-export { ToolViewsProvider, useToolView, useToolViews, activityLabel, activityHeading, commandTool, webSearchTool, memoryTool, defaultToolViews, formatDuration, useChatTool, } from "./components/tools";
+export { ToolViewsProvider, useToolView, useToolViews, activityLabel, activityHeading, commandTool, webSearchTool, webFetchTool, memoryTool, defaultToolViews, formatDuration, useChatTool, } from "./components/tools";
 export type { ToolView, ToolViews, SearchResult, ChatTool } from "./components/tools";
+export { WidgetFrame, WidgetHostProvider, useWidgetHost, WidgetPartView, widgetToolView, readVisualizeInput, widgetCsp, intersectAllow, openInNewTab, WIDGET_MAX_HEIGHT } from "./components/widget-frame";
+export type { WidgetFrameProps, WidgetToolInput, WidgetHost, WidgetAllow, WidgetResource } from "./components/widget-frame";
+export { UiComponentsProvider, UiTree, UiMarkupBlock, useUiMarkupLanguage, useUiAction, useUiState, htmlComponent, uiTreeToolView, uiMarkupToolView, readTreeInput } from "./components/ui-tree";
+export type { UiComponent, UiStateStore, UiTreeProps } from "./components/ui-tree";
 export { ApprovalCard } from "./components/approval-card";
 export type { ApprovalCardProps } from "./components/approval-card";
 export { TokenCounter, useCountUp, formatTokens } from "./components/token-counter";
@@ -47,10 +62,14 @@ export { MessageList } from "./components/message-list";
 export type { MessageListProps } from "./components/message-list";
 export { ChatHeader, ChatTitleMenu } from "./components/chat-header";
 export type { ChatHeaderProps, ChatTitleMenuProps } from "./components/chat-header";
+export { ChatNotice } from "./components/chat-notice";
+export type { ChatNoticeProps } from "./components/chat-notice";
 export { ChatList } from "./components/chat-list";
 export type { ChatListProps, ChatListSection, ChatListItem, ChatSummary, ProjectSummary } from "./components/chat-list";
 export { ChatView, EmptyState } from "./views/chat-view";
 export type { ChatViewProps, EmptyStateProps, Density } from "./views/chat-view";
+export { ChatTranscript } from "./views/chat-transcript";
+export type { ChatTranscriptProps } from "./views/chat-transcript";
 export { AppShell, SidebarToggle } from "./views/app-shell";
 export type { AppShellProps, SidebarToggleProps } from "./views/app-shell";
 export { Sidebar, SidebarItem, SidebarUser } from "./views/sidebar";

package/dist/types/react/src/primitives/button.d.ts

@@ -5,12 +5,21 @@ declare const variants: {
     ghost: string;
     /** Filled with the surface color, e.g. the selected Chat/Cowork toggle. */
     subtle: string;
-    /** The send button. */
+    /** A thin border, no fill: secondary actions next to a primary one, e.g. Cancel or Share. */
+    outline: string;
+    /** The send button and the one main action of a dialog. */
     primary: string;
+    /**
+     * Destructive confirmations, e.g. Delete chat. Fill --chat-danger-bg (default: --chat-danger, darkened so it
+     * doesn't read as the accent), text --chat-danger-fg (default white).
+     */
+    danger: string;
 };
 declare const sizes: {
     sm: string;
     md: string;
+    /** Dialog and empty-state actions. */
+    lg: string;
 };
 export interface ButtonProps extends Omit<AriaButtonProps, "className"> {
     variant?: keyof typeof variants;

package/dist/types/react/src/primitives/chat-theme.d.ts

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
 import { type ChatMotion, type CodeThemes } from "./appearance";
+import { type ChatIcons } from "./icons";
+import { type ChatLabels } from "./labels";
 export interface ChatThemeProps {
     /** Value for `data-chat-theme`, matched by the host's theme CSS. */
     theme?: string;
@@ -11,6 +13,16 @@ export interface ChatThemeProps {
      * `data-chat-motion="reduce"` (or "full") on <html> instead: the CSS and the JS checks both honor it.
      */
     motion?: ChatMotion;
+    /**
+     * Overrides for the kit's UI strings, to reword or translate it. Merged over the parent ChatTheme's labels,
+     * then over the English defaults. Functions take the values that go into the text.
+     */
+    labels?: Partial<ChatLabels>;
+    /**
+     * Overrides for the kit's icons (SVG elements). Merged over the parent ChatTheme's icons, then over the
+     * Lucide defaults.
+     */
+    icons?: Partial<ChatIcons>;
     children: ReactNode;
     className?: string;
 }
@@ -19,4 +31,4 @@ export interface ChatThemeProps {
  * element instead of `<body>`, so they get the same theme. An app themed as a whole (variables on
  * `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`.
  */
-export declare function ChatTheme({ theme, codeThemes, motion, children, className }: ChatThemeProps): import("react").JSX.Element;
+export declare function ChatTheme({ theme, codeThemes, motion, labels, icons, children, className }: ChatThemeProps): import("react").JSX.Element;

package/dist/types/react/src/primitives/icons.d.ts

@@ -0,0 +1,95 @@
+import { type ReactNode } from "react";
+/**
+ * Every icon the kit shows, so a host can swap them for its own set. Set through
+ * `ChatTheme icons={{ copy: <MyCopy /> }}`; keys left out keep the default (Lucide). Icons should be SVGs:
+ * the kit sizes and colors them through CSS (`size-*`, `currentColor`).
+ */
+export interface ChatIcons {
+    /** Copy button on messages. */
+    copy: ReactNode;
+    /** Copy button for the moment after copying. */
+    copied: ReactNode;
+    /** Retry / regenerate a response. */
+    retry: ReactNode;
+    /** Edit a message or a pasted-text attachment. */
+    edit: ReactNode;
+    /** Read a message aloud. */
+    speak: ReactNode;
+    /** Positive feedback on a response. */
+    thumbsUp: ReactNode;
+    /** Negative feedback on a response. */
+    thumbsDown: ReactNode;
+    /** Send the composer's message. */
+    send: ReactNode;
+    /** Stop a running response. */
+    stop: ReactNode;
+    /** Open the attach menu in the composer. */
+    attach: ReactNode;
+    /** Jump to the newest message. */
+    scrollToBottom: ReactNode;
+    /** Prefix of the token counter. */
+    tokens: ReactNode;
+    /** Toggle the sidebar. */
+    sidebar: ReactNode;
+    /** Account or workspace switcher in the sidebar. */
+    switcher: ReactNode;
+    /** Down chevron on dropdown triggers (chat title menu, model picker). */
+    dropdown: ReactNode;
+    /** Right-pointing chevron of a collapsed section or disclosure; rotates 90 degrees when open. */
+    expand: ReactNode;
+    /** Small filled triangle after expandable labels; rotates 90 degrees when open. */
+    caret: ReactNode;
+    /** Marks a menu item that opens a submenu. */
+    submenu: ReactNode;
+    /** Marks the selected menu item. */
+    check: ReactNode;
+    /** Default icon of a ChatNotice. */
+    info: ReactNode;
+    /** Warning badge, e.g. on unavailable models. */
+    warning: ReactNode;
+    /** Tool approval card. */
+    approval: ReactNode;
+    /** Web link without a favicon, in search results. */
+    web: ReactNode;
+    /** Pin a chat. */
+    pin: ReactNode;
+    /** Unpin a chat. */
+    unpin: ReactNode;
+    /** Rename a chat. */
+    rename: ReactNode;
+    /** Move a chat into a project. */
+    addToProject: ReactNode;
+    /** Create something new (a project from the project picker). */
+    add: ReactNode;
+    /** Share a chat. */
+    share: ReactNode;
+    /** Delete a chat. */
+    delete: ReactNode;
+    /** Row actions button in chat lists. */
+    more: ReactNode;
+    /** Collapsed project folder. */
+    folder: ReactNode;
+    /** Expanded project folder. */
+    folderOpen: ReactNode;
+    /** Attachment without a preview. */
+    file: ReactNode;
+    /** Remove an attachment. */
+    remove: ReactNode;
+}
+/** Lucide icons, plus the claude.ai caret. Unsized: the places that show them size them with CSS. */
+export declare const defaultIcons: ChatIcons;
+/** Merges `icons` over the icons of the enclosing provider (or the defaults). */
+export declare function IconsProvider({ icons, children }: {
+    icons: Partial<ChatIcons> | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The active icons: the enclosing `ChatTheme`'s `icons` over the defaults. */
+export declare function useIcons(): ChatIcons;
+/**
+ * Sizes and colors an icon where no button does it already. Pass the size as `[&_svg]:size-4` so it
+ * reaches whatever SVG the host supplies.
+ */
+export declare function IconSlot({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;