agentic-ui-kit 0.7.0 → 0.8.0

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

@@ -9,8 +9,12 @@ export { widgetFrameLoader, widgetLoaderMessages } from "./widget-loader";
 export { replacesProperty, replacesGuide, replacedId, resolveReplaces, withCallId } from "./replaces";
 export { visualizeTool, visualizeGuide, checkWidgetCode } from "./visualize";
 export type { VisualizeInput, WidgetCodeCheck } from "./visualize";
+export { askUserTool, readAskUserInput, readAskUserResult } from "./ask-user";
+export type { AskUserKind, AskUserQuestion, AskUserInput, AskUserAnswer, AskUserResult } from "./ask-user";
 export { matchesSchema, schemaErrors, checkUiTree, isStateRef, renderUiTool, renderUiToolName, uiActionSchema } from "./ui-tree";
 export type { UiNode, UiAction, RenderUiInput, UiComponentSpec, UiTreeCheck } from "./ui-tree";
 export { parseUiMarkup, readUiValue, findUiBlocks, checkUiMarkup, checkUiMarkupCode, showUiTool, showUiToolName, uiMarkupGuide, uiMarkupLanguage } from "./ui-markup";
 export type { UiMarkup, UiMarkupBlock, UiMarkupCheck, ShowUiInput } from "./ui-markup";
 export type { UiTreeCheckOptions } from "./ui-tree";
+export { uiSpecs, uiSpecGroups, uiSpecSet, uiComponentSpecs } from "./ui-components";
+export type { UiSpecName, UiSpecPick, UiSpecSelection } from "./ui-components";

package/dist/types/core/src/ui-components.d.ts

@@ -0,0 +1,103 @@
+import { type JsonSchema, type UiComponentSpec } from "./ui-tree";
+/**
+ * The specs by name, so a host can pick or adjust one: `{ ...uiSpecs.Card, description: "..." }`.
+ * Stack, Grid, Card, Heading, Text, Metric, List, Table, Badge, Progress, Checklist, Tabs, Show, Button.
+ */
+export declare const uiSpecs: {
+    Stack: {
+        name: string;
+        description: string;
+        children: true;
+        props: JsonSchema;
+    };
+    Grid: {
+        name: string;
+        description: string;
+        children: true;
+        props: JsonSchema;
+    };
+    Card: {
+        name: string;
+        description: string;
+        children: true;
+        props: JsonSchema;
+    };
+    Heading: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Text: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Metric: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    List: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Table: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Badge: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Progress: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Checklist: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Tabs: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+    Show: {
+        name: string;
+        description: string;
+        children: true;
+        props: JsonSchema;
+    };
+    Button: {
+        name: string;
+        description: string;
+        props: JsonSchema;
+    };
+};
+/** Which components are display only and which take input or drive state. */
+export declare const uiSpecGroups: {
+    readonly display: readonly ["Stack", "Grid", "Card", "Heading", "Text", "Metric", "List", "Table", "Badge", "Progress"];
+    readonly interactive: readonly ["Checklist", "Tabs", "Show", "Button"];
+};
+export type UiSpecName = keyof typeof uiSpecs;
+/** A component name, or a group of them: "display" or "interactive". */
+export type UiSpecPick = UiSpecName | keyof typeof uiSpecGroups;
+export interface UiSpecSelection {
+    /** Only these (names or groups). Default: all. */
+    include?: readonly UiSpecPick[];
+    /** Leave these out (names or groups), after `include`. */
+    exclude?: readonly UiSpecPick[];
+}
+/**
+ * The specs of the components a host registers, in a fixed order. Feed it to `renderUiTool`, `showUiTool`,
+ * `uiMarkupGuide` and `checkUiTree` so the model is only told about, and only checked against, those:
+ * `uiSpecSet({ exclude: ["interactive"] })` is display only.
+ */
+export declare function uiSpecSet({ include, exclude }?: UiSpecSelection): UiComponentSpec[];
+/** All of `uiSpecs` as a list: `uiSpecSet()`. */
+export declare const uiComponentSpecs: readonly UiComponentSpec[];

package/dist/types/react/src/components/activity-group.d.ts

@@ -10,4 +10,4 @@ export interface ActivityGroupProps {
  * row per step. Each row expands on its own; tool rows render through the registered `ToolView`.
  * A group of one step skips the rows: the heading is the step's own label and the box holds its detail.
  */
-export declare function ActivityGroup({ parts, defaultExpanded, className }: ActivityGroupProps): import("react").JSX.Element;
+export declare function ActivityGroup({ parts: all, defaultExpanded, className }: ActivityGroupProps): import("react").JSX.Element | null;

package/dist/types/react/src/components/ask-user.d.ts

@@ -0,0 +1,17 @@
+import { type ToolCallPart } from "../../../core/src/index.js";
+import type { ToolPromptProps, ToolView } from "./tools";
+/**
+ * The `ask_user` prompt: the model's questions one at a time with a pager, answered by clicking or the keyboard
+ * (number keys, arrows, Enter; Alt+arrows reorder a rank). Submits `{ answers }` (an `AskUserResult`) after the
+ * last question; Skip leaves a question out, the close button or Escape declines everything.
+ */
+export declare function AskUserPrompt({ part, onSubmit, onDecline }: ToolPromptProps): import("react").JSX.Element | null;
+/** The user's answers as a card in the message: each question with its answer, "Ranked: 1. …", or "Skipped". */
+export declare function AskUserAnswers({ part }: {
+    part: ToolCallPart;
+}): import("react").JSX.Element | null;
+/**
+ * The view of the `ask_user` tool (`askUserTool` in `agentic-ui-kit/core`): the prompt over the composer while
+ * the call awaits the user, then the answers card in the message. Registered in `defaultToolViews`.
+ */
+export declare const askUserToolView: ToolView;

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

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { type PopoverProps } from "../primitives/menu";
 export interface ChatSummary {
     id: string;
     title: string;
@@ -49,3 +50,14 @@ export interface ChatListProps {
  * markers and a per-row menu. Usable on its own (in a host's own sidebar) or inside `Sidebar`.
  */
 export declare function ChatList({ sections, activeId, onSelect, rowMenu, className, ...props }: ChatListProps): import("react").JSX.Element;
+export interface ChatListRailButtonProps extends ChatListProps {
+    /** Accessible name and tooltip of the button. Default: the `chats` label. */
+    label?: string;
+    /** Passed to the popover, e.g. `{ placement: "right top" }` (the default). */
+    popoverProps?: Omit<PopoverProps, "children">;
+}
+/**
+ * An icon button that opens a `ChatList` in a popover, for `Sidebar`'s `railActions`: the list itself is
+ * hidden on the collapsed rail, so this keeps recent chats reachable. Picking a chat closes the popover.
+ */
+export declare function ChatListRailButton({ label, popoverProps, onSelect, className, ...list }: ChatListRailButtonProps): import("react").JSX.Element;

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

@@ -21,11 +21,27 @@ export interface LinkList {
 }
 /** Draws a list whose items are all links your way, e.g. a list of job links as cards. Return undefined to keep the list. */
 export type RenderLinkList = (list: LinkList) => ReactNode | undefined;
-export declare function MarkdownLinksProvider({ renderLink, renderLinkList, children, }: {
+/** Draws an image in message markdown your way: an `<img>`, a link, or nothing (return null). Set with `MarkdownLinksProvider`. */
+export type RenderImage = (image: {
+    src: string;
+    alt: string;
+}) => ReactNode;
+export declare function MarkdownLinksProvider({ renderLink, renderLinkList, renderImage, imageOrigins, children, }: {
     /** Draws single links. */
     renderLink?: RenderLink;
     /** Draws a bullet or numbered list in which every item is a link (and nothing else). */
     renderLinkList?: RenderLinkList;
+    /**
+     * Draws every image in a reply (markdown or raw HTML) your way. Without it, images load only from
+     * `imageOrigins` and otherwise show as a link. Models can be tricked into writing an image whose URL
+     * carries private data, and the browser would send it on render.
+     */
+    renderImage?: RenderImage;
+    /**
+     * Origins (`"https://cdn.example.com"`) whose images load as `<img>`, or `"all"` for any (not advised for
+     * replies built from web pages or other untrusted text). `data:image/` URLs always load. Default: none.
+     */
+    imageOrigins?: string[] | "all";
     children: ReactNode;
 }): import("react").JSX.Element;
 export interface MarkdownProps {

package/dist/types/react/src/components/tool-prompt.d.ts

@@ -0,0 +1,14 @@
+import type { PendingPrompt } from "../hooks/use-chat";
+export interface ToolPromptCardProps {
+    prompt: PendingPrompt;
+    /** The user's answer: the call's result. `useChat().answer`. */
+    onAnswer: (partId: string, result: unknown) => void;
+    /** The user closed the prompt. `useChat().decline`. */
+    onDecline: (partId: string) => void;
+}
+/**
+ * Shows the `Prompt` of a pending call's tool view, above the composer (`ChatView` does this for you). Apps
+ * that lay out the chat themselves render it from `useChat().prompts[0]`. Renders nothing if the tool's view
+ * has no `Prompt`.
+ */
+export declare function ToolPromptCard({ prompt, onAnswer, onDecline }: ToolPromptCardProps): import("react").JSX.Element | null;

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

@@ -33,6 +33,13 @@ export interface ToolView {
     Block?: ComponentType<{
         part: ToolCallPart;
     }>;
+    /**
+     * Makes the call a client tool the user answers: while it is "awaiting" (a client tool no page handler
+     * runs) the prompt shows over the composer, and what it submits becomes the call's result, sent back like
+     * an approval so the run continues. `useChat` (`promptTools`) and `ChatView` (`prompts`) wire this up; apps
+     * without them use `ToolPromptCard` and the guide "Tools the user answers". Typing in the composer instead declines the call.
+     */
+    Prompt?: ComponentType<ToolPromptProps>;
     /**
      * 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.
@@ -41,6 +48,15 @@ export interface ToolView {
         part: ToolCallPart;
     }>;
 }
+/** Props of a tool view's `Prompt`. */
+export interface ToolPromptProps {
+    /** The awaiting call; `part.input` is complete. */
+    part: ToolCallPart;
+    /** The user's answer: becomes the call's `result`. */
+    onSubmit: (result: unknown) => void;
+    /** The user closed the prompt without answering: the call ends as an error "Declined by the user". */
+    onDecline: () => void;
+}
 export type ToolViews = Record<string, ToolView>;
 export declare function ToolViewsProvider({ tools, children }: {
     tools: ToolViews;

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

@@ -0,0 +1,42 @@
+import { type UiSpecName, type UiSpecSelection } from "../../../core/src/index.js";
+import type { ComponentType } from "react";
+import { type UiComponent } from "./ui-tree";
+/** How a component is drawn: gets its props (checked, state refs resolved) and its rendered children. */
+type UiRender = ComponentType<any>;
+/**
+ * The drawing of each component, by name and apart from its spec. Take one to reuse in your own
+ * component: `{ ...uiSpecs.Card, render: uiRenders.Card }`.
+ */
+export declare const uiRenders: {
+    Stack: import("react").FunctionComponent<any>;
+    Grid: import("react").FunctionComponent<any>;
+    Card: import("react").FunctionComponent<any>;
+    Heading: import("react").FunctionComponent<any>;
+    Text: import("react").FunctionComponent<any>;
+    Metric: import("react").FunctionComponent<any>;
+    List: import("react").FunctionComponent<any>;
+    Table: import("react").FunctionComponent<any>;
+    Badge: import("react").FunctionComponent<any>;
+    Progress: import("react").FunctionComponent<any>;
+    Checklist: import("react").FunctionComponent<any>;
+    Tabs: import("react").FunctionComponent<any>;
+    Show: import("react").FunctionComponent<any>;
+    Button: import("react").FunctionComponent<any>;
+};
+export interface UiComponentSetOptions extends UiSpecSelection {
+    /** Draw a component with your own render (your design system's Button, say); its spec, and so what the model is told, stays. */
+    renders?: {
+        [Name in UiSpecName]?: UiRender;
+    };
+}
+/**
+ * The ready components for `UiComponentsProvider`, in the order of `uiComponentSpecs`. Everything by default;
+ * `include` and `exclude` take component names or the groups `"display"` (Stack, Grid, Card, Heading, Text,
+ * Metric, List, Table, Badge, Progress) and `"interactive"` (Checklist, Tabs, Show, Button). `renders` swaps the
+ * drawing of single components. Build the model's tool from the same picks so it only hears of what you
+ * registered: `uiSpecSet({ include })` in `agentic-ui-kit/core`, or strip the renders from this list.
+ */
+export declare function uiComponentSet({ renders, ...selection }?: UiComponentSetOptions): UiComponent[];
+/** The whole set: `uiComponentSet()`. */
+export declare const uiComponents: readonly UiComponent[];
+export {};

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

@@ -30,8 +30,13 @@ 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. */
+    /** Identifies the widget, usually the tool call's id. Keys its state in the store unless `stateKey` is set. */
     id: string;
+    /**
+     * Keys the widget's state in the `persist` store instead of `id`. Pass an id that is the same while the
+     * message streams and after it is saved, when the part ids differ between the two (e.g. your tool activity id).
+     */
+    stateKey?: string;
     /** The tree so far; it may be cut short while it streams. */
     root: unknown;
     /** Starting values of the state, from the tree. */
@@ -39,21 +44,26 @@ export interface UiTreeProps {
     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;
+export declare function UiTree({ id, stateKey, 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 }: {
+export declare function UiMarkupBlock({ id, stateKey, source, streaming }: {
     id: string;
+    stateKey?: string;
     source: string;
     streaming?: boolean;
 }): import("react").JSX.Element;
+export interface UiToolViewOptions {
+    /** The key for the widget's `persist` state, when the call's id differs between live and saved parts. See `UiTreeProps.stateKey`. */
+    stateKey?: (part: ToolCallPart) => string | undefined;
+}
 /**
  * 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): {
+export declare function uiMarkupToolView(read?: (input: unknown) => string | undefined, options?: UiToolViewOptions): {
     Block: ({ part }: {
         part: ToolCallPart;
     }) => import("react").JSX.Element | null;
@@ -72,7 +82,7 @@ export declare function readTreeInput(input: unknown): {
 export declare function uiTreeToolView(read?: (input: unknown) => {
     root?: unknown;
     state?: Record<string, unknown>;
-}): {
+}, options?: UiToolViewOptions): {
     Block: ({ part }: {
         part: ToolCallPart;
     }) => import("react").JSX.Element | null;

package/dist/types/react/src/hooks/use-chat.d.ts

@@ -47,6 +47,12 @@ export interface UseChatOptions {
      * `conversationId`. Safe in React StrictMode: the run is joined once and survives the double mount.
      */
     resume?: boolean;
+    /**
+     * Names of tools the user answers through a prompt (a tool view's `Prompt`, e.g. `ask_user`): a call to one
+     * that ends the run "awaiting" is listed in `prompts` instead of running. Tools registered with
+     * `useChatTool` whose view has a `Prompt` count too. Default `["ask_user"]`.
+     */
+    promptTools?: readonly string[];
 }
 export interface SendOptions {
     model?: string;
@@ -60,6 +66,11 @@ export interface PendingApproval {
     messageId: string;
     part: ToolCallPart;
 }
+/** A tool call waiting for the user to fill in its `Prompt` (a tool view's prompt over the composer). */
+export interface PendingPrompt {
+    messageId: string;
+    part: ToolCallPart;
+}
 export interface UseChat {
     messages: Message[];
     /** True while a reply streams or client tools run. False while waiting on an approval. */
@@ -67,6 +78,15 @@ export interface UseChat {
     /** Tool calls waiting on the user. Sending a new message declines them. */
     approvals: PendingApproval[];
     respond(partId: string, granted: boolean): void;
+    /**
+     * Tool calls waiting for the user's input through their tool view's `Prompt` (e.g. `ask_user`); the first
+     * shows above the composer. Sending a new message declines them.
+     */
+    prompts: PendingPrompt[];
+    /** Settles a prompted call with the user's answer as its result and continues the run once nothing else waits. */
+    answer(partId: string, result: unknown): void;
+    /** Settles a prompted call as declined (an error "Declined by the user" the model sees) and continues the run. */
+    decline(partId: string): void;
     send(text: string, options?: SendOptions): void;
     stop(): void;
     /** Drops the assistant reply and asks again from its user message. */
@@ -78,4 +98,4 @@ export declare function userMessage(text: string, parentId: string | null, attac
  * retries. With an `AgentProvider` it also runs the agent loop: client tools run in the page, approvals
  * wait for the user, then the reply continues; every finished tool call reaches its tool's `onResult`.
  */
-export declare function useChat({ transport, conversationId, initialMessages, onTitle, agent, maxSteps, resume }: UseChatOptions): UseChat;
+export declare function useChat({ transport, conversationId, initialMessages, onTitle, agent, maxSteps, resume, promptTools }: UseChatOptions): UseChat;

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

@@ -28,7 +28,7 @@ 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";
+export type { Transport, SendRequest, SendOptions, UseChat, UseChatOptions, PendingApproval, PendingPrompt } from "./hooks/use-chat";
 export { sseTransport, type SseTransportOptions, type SseRequestBody } from "./hooks/sse-transport";
 export { AgentProvider, AgentRegistry, useAgentRegistry, useAgentSnapshot, useAgentTool, useAgentContext } from "./hooks/agent";
 export type { AgentTool, ToolContext, ToolSpec, JsonSchema } from "./hooks/agent";
@@ -38,15 +38,20 @@ export type { SidebarState } from "./hooks/sidebar-state";
 export { UserMessage, AssistantMessage, formatRelativeTime, messageText } from "./components/messages";
 export type { UserMessageProps, AssistantMessageProps, Feedback, MessageActions } from "./components/messages";
 export { Markdown, MarkdownLinksProvider } from "./components/markdown";
-export type { LinkList, MarkdownProps, RenderLink, RenderLinkList } from "./components/markdown";
+export type { LinkList, MarkdownProps, RenderImage, RenderLink, RenderLinkList } from "./components/markdown";
 export { ActivityGroup } from "./components/activity-group";
 export type { ActivityGroupProps } from "./components/activity-group";
 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 type { ToolView, ToolViews, ToolPromptProps, SearchResult, ChatTool } from "./components/tools";
+export { AskUserPrompt, AskUserAnswers, askUserToolView } from "./components/ask-user";
+export { ToolPromptCard } from "./components/tool-prompt";
+export type { ToolPromptCardProps } from "./components/tool-prompt";
 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 type { UiComponent, UiStateStore, UiTreeProps, UiToolViewOptions } from "./components/ui-tree";
+export { uiComponents, uiComponentSet, uiRenders } from "./components/ui-components";
+export type { UiComponentSetOptions } from "./components/ui-components";
 export { ApprovalCard } from "./components/approval-card";
 export type { ApprovalCardProps } from "./components/approval-card";
 export { TokenCounter, useCountUp, formatTokens } from "./components/token-counter";
@@ -73,8 +78,8 @@ 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 { ChatList, ChatListRailButton } from "./components/chat-list";
+export type { ChatListRailButtonProps, 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";

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

@@ -29,6 +29,8 @@ export interface ChatThemeProps {
 /**
  * Applies a chat theme to part of a page. Menus, tooltips and dialogs opened inside render into this
  * 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`.
+ * `:root`) does not need it for colors, but still uses it for `codeThemes` and `motion`. The element is
+ * `height: 100%` of its parent by default (so `ChatView` has a height without Tailwind); a `className` such
+ * as `h-screen`, or a style rule of your own, replaces that.
  */
 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

@@ -55,6 +55,14 @@ export interface ChatIcons {
     warning: ReactNode;
     /** Tool approval card. */
     approval: ReactNode;
+    /** Previous question in the ask_user prompt's pager. */
+    askPrevious: ReactNode;
+    /** Next question in the ask_user prompt's pager. */
+    askPagerNext: ReactNode;
+    /** Continue / send answers button in the ask_user prompt. */
+    askNext: ReactNode;
+    /** Drag handle of a rank row in the ask_user prompt. */
+    dragHandle: ReactNode;
     /** Web link without a favicon, in search results. */
     web: ReactNode;
     /** Pin a chat. */
@@ -81,6 +89,8 @@ export interface ChatIcons {
     file: ReactNode;
     /** Remove an attachment. */
     remove: ReactNode;
+    /** The recent-chats button on the collapsed sidebar rail (`ChatListRailButton`). */
+    chatList: ReactNode;
     /**
      * Left of the thinking / tool-steps summary while the model works, e.g. your logo animating. None by
      * default.

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

@@ -91,6 +91,42 @@ export interface ChatLabels {
     replyPlaceholder: string;
     /** Composer placeholder while a tool waits for approval. */
     replyDirectly: string;
+    /** Accessible name of the question prompt over the composer. */
+    askUserPrompt: string;
+    /** Pager in the prompt: "1 of 3". */
+    askUserPager: (current: number, total: number) => string;
+    /** Pager button to the previous question. */
+    askUserPrevious: string;
+    /** Pager button to the next question. */
+    askUserNext: string;
+    /** Button that moves on to the next unanswered question. */
+    askUserContinue: string;
+    /** Button on the last question, which sends the answers. */
+    askUserSubmit: string;
+    /** Close button of the prompt; declines the questions like replying in the composer does. */
+    askUserClose: string;
+    /** The free-text row (and its input's name) under each choice question. */
+    askUserSomethingElse: string;
+    /** Skips the current question. */
+    askUserSkip: string;
+    /** Count under a multiple-choice question: "2 selected". */
+    askUserSelected: (count: number) => string;
+    /** Hint under a rank question. */
+    askUserRankHint: string;
+    /** Accessible name of a rank row's drag handle. */
+    askUserReorder: (option: string) => string;
+    /** Spoken description of the keyboard way to reorder a rank row. */
+    askUserReorderKeys: string;
+    /** Answers card: the options a user picked in a multiple-choice question. */
+    askUserPicked: (options: string[]) => string;
+    /** Answers card: a rank answer, e.g. "Ranked: 1. Fast 2. Cheap". */
+    askUserRanked: (options: string[]) => string;
+    /** Answers card: a question the user skipped. */
+    askUserSkipped: string;
+    /** Answers card: the user closed the prompt or replied instead. */
+    askUserDeclined: string;
+    /** Accessible name of the answers card. */
+    askUserAnswers: string;
     /** Accessible name of the composer text box. */
     message: string;
     /** Stop button. */

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

@@ -9,6 +9,8 @@ export interface PanelProps {
     children: ReactNode;
     /** "card": bordered and rounded, for grids and docks. "flush": no frame, for a pane that fills a column. */
     variant?: "card" | "flush";
+    /** Pads the body (0.75rem, like the header). Off by default so a `ChatView` or list can run edge to edge. */
+    padded?: boolean;
     "aria-label"?: string;
     className?: string;
 }
@@ -16,4 +18,4 @@ export interface PanelProps {
  * A titled region that fills its container and lets the body scroll: a dock panel, an agent pane in a
  * grid, a settings card. A `ChatView` placed in the body sizes itself to the panel.
  */
-export declare function Panel({ title, actions, footer, children, variant, className, ...props }: PanelProps): import("react").JSX.Element;
+export declare function Panel({ title, actions, footer, children, variant, padded, className, ...props }: PanelProps): import("react").JSX.Element;

package/dist/types/react/src/views/chat-view.d.ts

@@ -1,6 +1,6 @@
 import type { Message, Part } from "../../../core/src/index.js";
 import { type CSSProperties, type ReactNode } from "react";
-import type { PendingApproval } from "../hooks/use-chat";
+import type { PendingApproval, PendingPrompt } from "../hooks/use-chat";
 import { type ComposerProps } from "../components/composer";
 import type { Feedback, MessageActions } from "../components/messages";
 import { type WidgetHost } from "../components/widget-frame";
@@ -19,6 +19,16 @@ export interface ChatViewProps {
     /** Tool calls waiting on the user (`useChat().approvals`); the first shows above the composer. */
     approvals?: PendingApproval[];
     onApprove?: (partId: string, granted: boolean) => void;
+    /**
+     * Tool calls waiting for the user's input through their tool view's `Prompt` (`useChat().prompts`), e.g. the
+     * `ask_user` questions; the first shows above the composer, whose placeholder becomes "Or reply directly…".
+     * Needs `onAnswer`.
+     */
+    prompts?: PendingPrompt[];
+    /** The prompt's submitted answer, which becomes the tool call's result (`useChat().answer`). */
+    onAnswer?: (partId: string, result: unknown) => void;
+    /** The user closed the prompt (`useChat().decline`). Replying in the composer declines it too, through `onSend`. */
+    onDecline?: (partId: string) => void;
     onRetry?: (assistantId: string) => void;
     onEdit?: (userId: string) => void;
     onFeedback?: (assistantId: string, feedback: Feedback) => void;
@@ -62,7 +72,7 @@ export interface ChatViewProps {
     className?: string;
 }
 /** A whole chat: header, the conversation, the docked composer. An empty chat shows `emptyState`. */
-export declare function ChatView({ messages, busy, onSend, onStop, approvals, onApprove, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, renderComposer, density, contentWidth, contentPadding, className, }: ChatViewProps): import("react").JSX.Element;
+export declare function ChatView({ messages, busy, onSend, onStop, approvals, onApprove, prompts, onAnswer, onDecline, onRetry, onEdit, onFeedback, onReadAloud, messageActions, renderPart, widgets, header, composer, emptyState, disclaimer, renderComposer, density, contentWidth, contentPadding, className, }: ChatViewProps): import("react").JSX.Element;
 export interface EmptyStateProps {
     /** "Good evening, Alex". */
     greeting: ReactNode;

package/dist/types/react/src/views/sidebar.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { type PopoverProps } from "../primitives/menu";
 export interface SidebarProps {
     /** Name or logo at the top left; hidden when collapsed. */
     brand?: ReactNode;
@@ -61,6 +62,8 @@ export interface SidebarUserProps {
     avatarUrl?: string;
     /** Opens upward from the row, e.g. settings and log out. */
     menu?: ReactNode;
+    /** Passed to the menu's popover, e.g. `{ width: "trigger" }` to match the row's width, or a different `placement`. */
+    popoverProps?: Omit<PopoverProps, "children">;
 }
 /** The account row at the bottom: avatar, name, plan, and a menu. */
-export declare function SidebarUser({ name, detail, avatarUrl, menu }: SidebarUserProps): import("react").JSX.Element;
+export declare function SidebarUser({ name, detail, avatarUrl, menu, popoverProps }: SidebarUserProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ui-kit",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React UI kit for LLM chat and agentic apps: streaming messages, tool calls, approvals, themable with CSS variables.",
   "license": "MIT",
   "type": "module",