agentic-ui-kit 0.2.1 → 0.3.0

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

@@ -1,7 +1,8 @@
 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;
 export interface UserMessageProps {
@@ -20,7 +21,7 @@ export interface AssistantMessageProps {
     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;

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

@@ -15,6 +15,10 @@ export type { PanelProps } from "./primitives/panel";
 export { CodeBlock } 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";
@@ -25,12 +29,16 @@ export { useSmoothText } from "./hooks/smooth-text";
 export { useSidebar, useMediaQuery, DRAWER_QUERY } 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 { 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 +55,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/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;

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

@@ -0,0 +1,193 @@
+import { type ReactNode } from "react";
+/**
+ * Every string the kit shows (visible text, aria-labels, placeholders, tooltips), so a host can reword or
+ * translate the UI. Set through `ChatTheme labels={{ copy: "Copier" }}`; keys left out keep the English
+ * default. Keys that take values are functions.
+ */
+export interface ChatLabels {
+    /** BCP 47 tag for dates and relative times ("fr", "de-CH"). Default: the browser's locale. */
+    locale?: string | undefined;
+    /** Row label while the model is thinking. */
+    thinking: string;
+    /** Row label for finished thinking without a duration. */
+    thought: string;
+    /** Row label for finished thinking; `duration` is already formatted by `duration`. */
+    thoughtFor: (duration: string) => string;
+    /** Appended to the heading of a group that waits for the user, including its separator. */
+    waitingForYou: string;
+    /** Heading phrase for a tool without a view of its own, lowercase. */
+    usedTool: (name: string) => string;
+    /** Joins the heading phrases of a finished group. Default joins with ", " and capitalizes the first letter. */
+    joinSummaries: (phrases: string[]) => string;
+    /** "9s", "1m 5s": a duration in whole seconds. */
+    duration: (seconds: number) => string;
+    /** Row label of the command tool. */
+    ranCommandLabel: string;
+    /** Heading phrase for command calls, lowercase: "ran a command", "ran 3 commands". */
+    ranCommands: (count: number) => string;
+    /** Row label of the web search tool. */
+    searchedWebLabel: string;
+    readPageLabel: string;
+    readPages: (count: number) => string;
+    /** Heading phrase for web searches, lowercase. */
+    searchedWeb: (count: number) => string;
+    /** Row label of the memory tool. */
+    recalledMemoryLabel: string;
+    /** Heading phrase for memory lookups, lowercase. */
+    recalledMemory: (count: number) => string;
+    /** Title of a command's output block. */
+    output: string;
+    /** Command output block when the command printed nothing. */
+    noOutput: string;
+    /** Web search detail without results. */
+    noResults: string;
+    /** Thinking detail when the model's reasoning is hidden. */
+    reasoningHidden: string;
+    /** Accessible name of the approval dialog. */
+    allowTool: (name: string) => string;
+    /** The approval question for a tool without its own `ask`; `label` is the tool's row label. */
+    allowAction: (label: ReactNode) => ReactNode;
+    /** Approve button. */
+    allow: string;
+    /** Decline button. */
+    deny: string;
+    /** Accessible name of the sidebar drawer. */
+    sidebar: string;
+    /** Sidebar toggle, drawer open. */
+    closeSidebar: string;
+    /** Sidebar toggle, drawer closed. */
+    openSidebar: string;
+    /** Sidebar toggle, rail. */
+    expandSidebar: string;
+    /** Sidebar toggle, full width. */
+    collapseSidebar: string;
+    /** Default title of the context panel. */
+    context: string;
+    /** Accessible name of the usage meter. */
+    contextUsed: string;
+    /** "42% used". */
+    percentUsed: (percent: number) => string;
+    /** Row for the unused part of the window. */
+    freeSpace: string;
+    /** "1.2k tokens"; `count` is already formatted. */
+    tokenCount: (count: string) => string;
+    /** Composer placeholder. */
+    replyPlaceholder: string;
+    /** Composer placeholder while a tool waits for approval. */
+    replyDirectly: string;
+    /** Accessible name of the composer text box. */
+    message: string;
+    /** Stop button. */
+    stop: string;
+    /** Send button. */
+    send: string;
+    /** The `+` button of the composer. */
+    addFiles: string;
+    /** Accessible name of an attachment list. */
+    attachments: string;
+    /** Button on a pasted-text card. */
+    editPastedText: string;
+    /** Overlay button on a read-only pasted-text card. */
+    viewPastedText: string;
+    /** Remove button of an attachment card. */
+    removeAttachment: (name: string) => string;
+    /** Dialog title, and the name given to pasted text. */
+    pastedText: string;
+    /** Badge on a pasted-text card. */
+    pasted: string;
+    /** Badge on a failed card. */
+    failed: string;
+    /** Badge on a card whose file has no extension. */
+    file: string;
+    /** Tooltip of a failed card without an error message. */
+    uploadFailed: string;
+    /** Dialog button. */
+    cancel: string;
+    /** Dialog button. */
+    close: string;
+    /** Dialog button. */
+    save: string;
+    /** Accessible name of the chat list. */
+    chats: string;
+    /** Marker on a running chat. */
+    running: string;
+    /** Marker on an unread chat. */
+    unread: string;
+    /** Row menu button of a chat. */
+    moreOptionsFor: (title: string) => string;
+    /** Badge on a collapsed project with new activity. */
+    new: string;
+    /** Button under a chat list section. */
+    viewAll: string;
+    /** Accessible name of the title menu. */
+    chatActions: string;
+    /** Menu item. */
+    pin: string;
+    /** Menu item. */
+    unpin: string;
+    /** Menu item. */
+    rename: string;
+    /** Menu item. */
+    addToProject: string;
+    /** Search box of the project submenu. */
+    searchProjects: string;
+    /** Accessible name of the project list. */
+    projects: string;
+    /** Menu item. */
+    newProject: string;
+    /** Menu item. */
+    shareChat: string;
+    /** Menu item. */
+    delete: string;
+    /** Relative time under a minute. */
+    justNow: string;
+    /** Copy button. */
+    copy: string;
+    /** Copy button right after copying. */
+    copied: string;
+    /** Retry button. */
+    retry: string;
+    /** Edit button. */
+    edit: string;
+    /** Read aloud button. */
+    readAloud: string;
+    /** Feedback button. */
+    goodResponse: string;
+    /** Feedback button. */
+    badResponse: string;
+    /** Shown under a failed message without an error text. */
+    somethingWentWrong: string;
+    /** Accessible name of the message log. */
+    conversation: string;
+    /** Button that jumps to the newest message. */
+    scrollToBottom: string;
+    /** Unfolds a long user message. */
+    showMore: string;
+    /** Folds it again. */
+    showLess: string;
+    /** Accessible name of the model menu. */
+    model: string;
+    /** Accessible name of the model button; `label` is the current model. */
+    modelButton: (label: string) => string;
+    /** Effort submenu item and list name. */
+    effort: string;
+    /** Note above the effort list. */
+    effortNote: string;
+    /** Badge on the recommended effort. */
+    recommended: string;
+    /** Submenu item and list name. */
+    moreModels: string;
+    /** Accessible name of a widget without a title. */
+    widget: string;
+    /** Loading line while a widget streams and the model gave none. */
+    drawingWidget: string;
+}
+/** The English strings. */
+export declare const defaultLabels: ChatLabels;
+/** Merges `labels` over the labels of the enclosing provider (or the defaults). */
+export declare function LabelsProvider({ labels, children }: {
+    labels: Partial<ChatLabels> | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The active UI strings: the enclosing `ChatTheme`'s `labels` over the English defaults. */
+export declare function useLabels(): ChatLabels;