@mcp-b/react-components 0.2.1 → 0.3.0

package/dist/PromptInput-Dzn-fOPc.d.ts

@@ -0,0 +1,444 @@
+import { A as SelectTriggerProps, M as SelectValueProps, S as SelectProps, f as SelectOption, j as SelectValue, r as SelectContentProps, s as SelectItemProps, t as Select } from "./Select-CRsKCJ9x.js";
+import { c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxTrigger, h as ComboboxSeparator, l as ComboboxInput, m as ComboboxPositioner, p as ComboboxPopup, s as ComboboxEmpty, t as Combobox, u as ComboboxItem } from "./Combobox-D9anamNr.js";
+import { h as MenuItemProps, w as MenuProps, y as MenuPopupProps } from "./Menu-B5vDqZe_.js";
+import { c as TabsList, n as TabPanel, t as Tab } from "./Tabs-D9EAq09D.js";
+import { r as ButtonProps } from "./Button-Ct5I6aTu.js";
+import * as React from "react";
+import { ChatAddToolApproveResponseFunction, ChatStatus, DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
+
+//#region src/components/PromptInput.d.ts
+interface PromptInputFilePart {
+  type: "file";
+  id?: string;
+  filename?: string;
+  mediaType?: string;
+  url?: string;
+}
+interface PromptInputReferencedSource {
+  id?: string;
+  title?: string;
+  url?: string;
+  [key: string]: unknown;
+}
+/** The payload produced when the prompt input is submitted. */
+interface PromptInputMessage {
+  text: string;
+  files: PromptInputFilePart[];
+}
+/** Lifecycle status of an in-flight model request — the AI SDK's `ChatStatus`. */
+type PromptInputStatus = ChatStatus;
+interface AttachmentsContext {
+  files: Array<PromptInputFilePart & {
+    id: string;
+  }>;
+  add: (files: File[] | FileList) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+  openFileDialog: () => void;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+}
+interface TextInputContext {
+  value: string;
+  setInput: (value: string) => void;
+  clear: () => void;
+}
+interface PromptInputControllerProps {
+  textInput: TextInputContext;
+  attachments: AttachmentsContext;
+  __registerFileInput: (ref: React.RefObject<HTMLInputElement | null>, open: () => void) => void;
+}
+interface ReferencedSourcesContext {
+  sources: Array<PromptInputReferencedSource & {
+    id: string;
+  }>;
+  add: (sources: PromptInputReferencedSource[] | PromptInputReferencedSource) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+}
+declare function usePromptInputController(): PromptInputControllerProps;
+declare function useProviderAttachments(): AttachmentsContext;
+declare function usePromptInputAttachments(): AttachmentsContext;
+declare function usePromptInputReferencedSources(): ReferencedSourcesContext;
+interface PromptInputProviderProps extends React.PropsWithChildren {
+  initialInput?: string;
+}
+declare function PromptInputProvider({
+  initialInput,
+  children
+}: PromptInputProviderProps): React.JSX.Element;
+interface PromptInputProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onError"> {
+  /** Accepted file MIME types/extensions, passed to the hidden file input. */
+  accept?: string;
+  /** Allows multiple files in a single file picker/drop action. */
+  multiple?: boolean;
+  /** Listen for file drops on the whole document instead of only the form. */
+  globalDrop?: boolean;
+  /** Clears the hidden file input when attachments are cleared. */
+  syncHiddenInput?: boolean;
+  /** Maximum number of attached files. */
+  maxFiles?: number;
+  /** Maximum accepted file size in bytes. */
+  maxFileSize?: number;
+  /** Called when file validation rejects an attachment. */
+  onError?: (error: {
+    code: "max_files" | "max_file_size" | "accept";
+    message: string;
+  }) => void;
+  /** Called with the trimmed message text and files when the form is submitted. */
+  onSubmit?: (message: PromptInputMessage, event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
+/**
+ * Chat-style composer form. Wraps a textarea and footer controls, with
+ * Enter-to-submit semantics, auto-resizing behavior, and optional attachments.
+ * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ *
+ * Use for assistant/chat submit forms. Do not use it as a generic textarea or
+ * non-chat form. Sigvelo changes: uses shared Menu, Select, Combobox, Tabs,
+ * Button, and Tooltip components; maps styles to CSS tokens; adds local
+ * attachment and referenced-source helpers.
+ *
+ * The form handles Enter-to-submit while multiline editing remains in the
+ * textarea. Attachment controls need accessible labels through their buttons
+ * and menus. Add new shared tools here when multiple apps need them.
+ *
+ * @example
+ * ```tsx
+ * <PromptInput onSubmit={({ text, files }) => sendMessage(text, files)}>
+ *   <PromptInputBody>
+ *     <PromptInputTextarea placeholder="Ask Sigvelo..." />
+ *   </PromptInputBody>
+ *   <PromptInputFooter>
+ *     <PromptInputTools>
+ *       <PromptInputActionAddAttachments />
+ *     </PromptInputTools>
+ *     <PromptInputSubmit status="ready" />
+ *   </PromptInputFooter>
+ * </PromptInput>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/prompt-input | AI Elements Prompt Input}
+ */
+declare function PromptInput({
+  className,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  children,
+  id,
+  ref,
+  ...props
+}: PromptInputProps & {
+  ref?: React.Ref<HTMLFormElement>;
+}): React.JSX.Element;
+interface PromptInputHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PromptInputHeader({
+  className,
+  children,
+  ref,
+  ...props
+}: PromptInputHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PromptInputBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PromptInputBody({
+  className,
+  children,
+  ref,
+  ...props
+}: PromptInputBodyProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PromptInputFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PromptInputFooter({
+  className,
+  children,
+  ref,
+  ...props
+}: PromptInputFooterProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PromptInputToolsProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PromptInputTools({
+  className,
+  children,
+  ref,
+  ...props
+}: PromptInputToolsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PromptInputTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  minHeight?: number;
+  maxHeight?: number;
+}
+declare function PromptInputTextarea({
+  className,
+  placeholder,
+  rows,
+  minHeight,
+  maxHeight,
+  onChange,
+  onCompositionEnd,
+  onCompositionStart,
+  onKeyDown,
+  onInput,
+  onPaste,
+  ref,
+  ...props
+}: PromptInputTextareaProps & {
+  ref?: React.Ref<HTMLTextAreaElement>;
+}): React.JSX.Element;
+type TooltipSide = "top" | "right" | "bottom" | "left";
+type PromptInputButtonTooltip = string | {
+  content: React.ReactNode;
+  shortcut?: string;
+  side?: TooltipSide;
+};
+type PromptInputTooltipConfig = Exclude<PromptInputButtonTooltip, string>;
+interface PromptInputButtonProps extends Omit<ButtonProps, "children" | "className"> {
+  className?: string;
+  tooltip?: PromptInputButtonTooltip;
+  children?: React.ReactNode;
+}
+declare function PromptInputButton({
+  className,
+  tooltip,
+  variant,
+  color,
+  size,
+  children,
+  "aria-label": ariaLabel,
+  ref,
+  ...props
+}: PromptInputButtonProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+type PromptInputActionMenuProps = MenuProps;
+declare function PromptInputActionMenu(props: PromptInputActionMenuProps): React.JSX.Element;
+type PromptInputActionMenuTriggerProps = PromptInputButtonProps;
+declare function PromptInputActionMenuTrigger({
+  className,
+  children,
+  ...props
+}: PromptInputActionMenuTriggerProps): React.JSX.Element;
+type PromptInputActionMenuContentProps = MenuPopupProps;
+declare function PromptInputActionMenuContent({
+  className,
+  children,
+  ...props
+}: PromptInputActionMenuContentProps): React.JSX.Element;
+type PromptInputActionMenuItemProps = MenuItemProps;
+declare function PromptInputActionMenuItem({
+  className,
+  ...props
+}: PromptInputActionMenuItemProps): React.JSX.Element;
+interface PromptInputActionAddAttachmentsProps extends PromptInputActionMenuItemProps {
+  label?: string;
+}
+declare function PromptInputActionAddAttachments({
+  label,
+  onClick,
+  children,
+  ...props
+}: PromptInputActionAddAttachmentsProps): React.JSX.Element;
+interface PromptInputActionAddScreenshotProps extends PromptInputActionMenuItemProps {
+  label?: string;
+}
+declare function PromptInputActionAddScreenshot({
+  label,
+  onClick,
+  children,
+  ...props
+}: PromptInputActionAddScreenshotProps): React.JSX.Element;
+interface PromptInputSubmitProps extends Omit<ButtonProps, "children" | "className" | "type"> {
+  className?: string;
+  status?: PromptInputStatus;
+  onStop?: () => void;
+  children?: React.ReactNode;
+  label?: string;
+}
+declare function PromptInputSubmit({
+  className,
+  status,
+  onStop,
+  variant,
+  color,
+  size,
+  onClick,
+  children,
+  label,
+  ref,
+  ...props
+}: PromptInputSubmitProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/** A tool part that may carry a pending approval request. Upstream AI SDK types, taken whole. */
+type ApprovalToolPart = ToolUIPart | DynamicToolUIPart;
+interface PendingToolApproval<MessageT extends UIMessage = UIMessage> {
+  message: MessageT;
+  messageIndex: number;
+  part: ApprovalToolPart;
+  partIndex: number;
+}
+/** Derives pending tool approvals straight from the messages — no app-owned shapes. */
+declare function getPendingToolApprovals<MessageT extends UIMessage>(messages: readonly MessageT[]): Array<PendingToolApproval<MessageT>>;
+interface PromptInputApprovalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "part"> {
+  /** The `approval-requested` tool part, passed whole. Renders nothing for other states. */
+  part: ApprovalToolPart;
+  /** Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly. */
+  onRespond: ChatAddToolApproveResponseFunction;
+  /**
+   * Renders a Skip action that dismisses the confirmation without responding —
+   * the approval stays pending upstream.
+   */
+  onSkip?: () => void;
+  /** Overrides the default "Do you want to allow…" question. */
+  question?: React.ReactNode;
+  /** Total pending approvals, for the "1 of N" hint. */
+  count?: number;
+}
+/**
+ * The composer's approval state: when a tool call awaits human approval the
+ * prompt input area becomes the confirmation. "Yes" approves on click; typing
+ * in the "No, and tell the agent what to do differently" row selects deny and
+ * sends the text as the native approval `reason`. Submit (or Enter) sends the
+ * current selection — approve by default.
+ */
+declare function PromptInputApproval({
+  part,
+  onRespond,
+  onSkip,
+  question,
+  count,
+  className,
+  ref,
+  ...props
+}: PromptInputApprovalProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+type PromptInputSelectProps = SelectProps;
+declare const PromptInputSelect: typeof Select;
+type PromptInputSelectTriggerProps = SelectTriggerProps;
+declare function PromptInputSelectTrigger(props: PromptInputSelectTriggerProps): React.JSX.Element;
+type PromptInputSelectContentProps = SelectContentProps;
+declare function PromptInputSelectContent(props: PromptInputSelectContentProps): React.JSX.Element;
+type PromptInputSelectItemProps = SelectItemProps;
+declare const PromptInputSelectItem: typeof SelectOption;
+type PromptInputSelectValueProps = SelectValueProps;
+declare const PromptInputSelectValue: typeof SelectValue;
+interface PromptInputHoverCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  openDelay?: number;
+  closeDelay?: number;
+}
+declare function PromptInputHoverCard({
+  openDelay,
+  closeDelay,
+  className,
+  children,
+  ref,
+  ...props
+}: PromptInputHoverCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PromptInputHoverCardTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {}
+declare function PromptInputHoverCardTrigger({
+  className,
+  ref,
+  ...props
+}: PromptInputHoverCardTriggerProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+interface PromptInputHoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PromptInputHoverCardContent({
+  className,
+  ref,
+  ...props
+}: PromptInputHoverCardContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+type PromptInputTabsListProps = React.ComponentPropsWithoutRef<typeof TabsList>;
+declare const PromptInputTabsList: typeof TabsList;
+type PromptInputTabProps = React.ComponentPropsWithoutRef<typeof Tab>;
+declare const PromptInputTab: typeof Tab;
+type PromptInputTabBodyProps = React.ComponentPropsWithoutRef<typeof TabPanel>;
+declare const PromptInputTabBody: typeof TabPanel;
+interface PromptInputTabLabelProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+declare function PromptInputTabLabel({
+  className,
+  ref,
+  ...props
+}: PromptInputTabLabelProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+interface PromptInputTabItemProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PromptInputTabItem({
+  className,
+  ref,
+  ...props
+}: PromptInputTabItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type PromptInputCommandProps = React.ComponentPropsWithoutRef<typeof Combobox>;
+declare const PromptInputCommand: typeof import("@base-ui/react").ComboboxRoot & {
+  Root: typeof import("@base-ui/react").ComboboxRoot;
+  Input: typeof ComboboxInput;
+  Trigger: typeof ComboboxTrigger;
+  Clear: ({
+    className,
+    ref,
+    ...props
+  }: Omit<React.ComponentPropsWithRef<typeof import("@base-ui/react").ComboboxClear>, "className"> & {
+    className?: string;
+  } & {
+    ref?: React.Ref<HTMLButtonElement>;
+  }) => React.JSX.Element;
+  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Positioner: typeof ComboboxPositioner;
+  Popup: typeof ComboboxPopup;
+  Content: typeof ComboboxPopup;
+  List: typeof ComboboxList;
+  Item: typeof ComboboxItem;
+  ItemIndicator: ({
+    className,
+    ref,
+    ...props
+  }: Omit<React.ComponentPropsWithRef<typeof import("@base-ui/react").ComboboxItemIndicator>, "className"> & {
+    className?: string;
+  } & {
+    ref?: React.Ref<HTMLSpanElement>;
+  }) => React.JSX.Element;
+  Empty: typeof ComboboxEmpty;
+  Group: typeof ComboboxGroup;
+  GroupLabel: typeof ComboboxLabel;
+  Label: typeof ComboboxLabel;
+  Value: typeof import("@base-ui/react").ComboboxValue;
+  Chips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Chip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  ChipsInput: typeof ComboboxInput;
+  Collection: typeof import("@base-ui/react").ComboboxCollection;
+  Separator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+type PromptInputCommandInputProps = React.ComponentPropsWithoutRef<typeof ComboboxInput>;
+declare const PromptInputCommandInput: typeof ComboboxInput;
+interface PromptInputCommandListProps extends React.HTMLAttributes<HTMLDivElement> {}
+declare function PromptInputCommandList({
+  className,
+  ref,
+  ...props
+}: PromptInputCommandListProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type PromptInputCommandEmptyProps = React.ComponentPropsWithoutRef<typeof ComboboxEmpty>;
+declare const PromptInputCommandEmpty: typeof ComboboxEmpty;
+type PromptInputCommandGroupProps = React.ComponentPropsWithoutRef<typeof ComboboxGroup>;
+declare const PromptInputCommandGroup: typeof ComboboxGroup;
+type PromptInputCommandItemProps = React.ComponentPropsWithoutRef<typeof ComboboxItem>;
+declare const PromptInputCommandItem: typeof ComboboxItem;
+type PromptInputCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof ComboboxSeparator>;
+declare const PromptInputCommandSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PromptInputProviderProps as $, PromptInputCommandInputProps as A, TextInputContext as At, PromptInputFooter as B, PromptInputButtonTooltip as C, PromptInputTabsListProps as Ct, PromptInputCommandGroup as D, PromptInputToolsProps as Dt, PromptInputCommandEmptyProps as E, PromptInputTools as Et, PromptInputCommandProps as F, usePromptInputReferencedSources as Ft, PromptInputHoverCardContent as G, PromptInputHeader as H, PromptInputCommandSeparator as I, useProviderAttachments as It, PromptInputHoverCardTrigger as J, PromptInputHoverCardContentProps as K, PromptInputCommandSeparatorProps as L, PromptInputCommandItemProps as M, getPendingToolApprovals as Mt, PromptInputCommandList as N, usePromptInputAttachments as Nt, PromptInputCommandGroupProps as O, PromptInputTooltipConfig as Ot, PromptInputCommandListProps as P, usePromptInputController as Pt, PromptInputProvider as Q, PromptInputControllerProps as R, PromptInputButtonProps as S, PromptInputTabsList as St, PromptInputCommandEmpty as T, PromptInputTextareaProps as Tt, PromptInputHeaderProps as U, PromptInputFooterProps as V, PromptInputHoverCard as W, PromptInputMessage as X, PromptInputHoverCardTriggerProps as Y, PromptInputProps as Z, PromptInputApproval as _, PromptInputTabItem as _t, PromptInputActionAddAttachments as a, PromptInputSelectItemProps as at, PromptInputBodyProps as b, PromptInputTabLabelProps as bt, PromptInputActionAddScreenshotProps as c, PromptInputSelectTriggerProps as ct, PromptInputActionMenuContentProps as d, PromptInputStatus as dt, PromptInputReferencedSource as et, PromptInputActionMenuItem as f, PromptInputSubmit as ft, PromptInputActionMenuTriggerProps as g, PromptInputTabBodyProps as gt, PromptInputActionMenuTrigger as h, PromptInputTabBody as ht, PromptInput as i, PromptInputSelectItem as it, PromptInputCommandItem as j, TooltipSide as jt, PromptInputCommandInput as k, ReferencedSourcesContext as kt, PromptInputActionMenu as l, PromptInputSelectValue as lt, PromptInputActionMenuProps as m, PromptInputTab as mt, AttachmentsContext as n, PromptInputSelectContent as nt, PromptInputActionAddAttachmentsProps as o, PromptInputSelectProps as ot, PromptInputActionMenuItemProps as p, PromptInputSubmitProps as pt, PromptInputHoverCardProps as q, PendingToolApproval as r, PromptInputSelectContentProps as rt, PromptInputActionAddScreenshot as s, PromptInputSelectTrigger as st, ApprovalToolPart as t, PromptInputSelect as tt, PromptInputActionMenuContent as u, PromptInputSelectValueProps as ut, PromptInputApprovalProps as v, PromptInputTabItemProps as vt, PromptInputCommand as w, PromptInputTextarea as wt, PromptInputButton as x, PromptInputTabProps as xt, PromptInputBody as y, PromptInputTabLabel as yt, PromptInputFilePart as z };

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { l as ChevronRightIcon } from "../icons-Bf7JMKk-.js";
+import { l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx

package/dist/components/AgentChat.d.ts

@@ -1,21 +1,20 @@
-import { PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
+import { X as PromptInputMessage, dt as PromptInputStatus } from "../PromptInput-Dzn-fOPc.js";
 import * as React from "react";
-import { UIDataTypes, UIMessage, UITools } from "ai";
+import { ChatAddToolApproveResponseFunction, UIMessage } from "ai";
 
 //#region src/components/AgentChat.d.ts
-type AgentChatMessage<Metadata = unknown, DataParts extends UIDataTypes = UIDataTypes, Tools extends UITools = UITools> = UIMessage<Metadata, DataParts, Tools>;
-type AgentChatPart<MessageT extends AgentChatMessage = AgentChatMessage> = MessageT["parts"][number];
-interface AgentChatRenderPartContext<MessageT extends AgentChatMessage = AgentChatMessage> {
+type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
+interface AgentChatRenderPartContext<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   part: AgentChatPart<MessageT>;
   partIndex: number;
   defaultRender: () => React.ReactNode;
 }
-interface AgentChatRenderMessageContext<MessageT extends AgentChatMessage = AgentChatMessage> {
+interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   messageIndex: number;
 }
-interface AgentChatProps<MessageT extends AgentChatMessage = AgentChatMessage> {
+interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   className?: string;
   /** AI SDK `UIMessage`s to render, oldest first. */
   messages: readonly MessageT[];
@@ -31,6 +30,12 @@ interface AgentChatProps<MessageT extends AgentChatMessage = AgentChatMessage> {
   emptyState?: React.ReactNode;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
+  /**
+   * Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly.
+   * When set and a tool call awaits approval, the composer becomes the
+   * confirmation.
+   */
+  onApprovalResponse?: ChatAddToolApproveResponseFunction;
   /** Override rendering per part; return `undefined` to fall back to the default part UI. */
   renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
   /** Rendered after each message's parts — for actions, citations, and the like. */
@@ -40,8 +45,12 @@ interface AgentChatProps<MessageT extends AgentChatMessage = AgentChatMessage> {
  * A complete agent chat surface: auto-scrolling conversation of AI SDK
  * `UIMessage`s (text, reasoning, and tool parts rendered by default) plus a
  * prompt composer. Customize per-part rendering with `renderPart`.
+ *
+ * This is the presentational layer under `ThinkChat` — props in, no
+ * transport. Use it directly with plain AI SDK `useChat` or a read-only
+ * transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
  */
-declare function AgentChat<MessageT extends AgentChatMessage = AgentChatMessage>({
+declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   className,
   messages,
   status,
@@ -51,6 +60,7 @@ declare function AgentChat<MessageT extends AgentChatMessage = AgentChatMessage>
   disabled,
   emptyState,
   composerTools,
+  onApprovalResponse,
   renderPart,
   renderMessageAfter,
   ref
@@ -58,4 +68,4 @@ declare function AgentChat<MessageT extends AgentChatMessage = AgentChatMessage>
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { AgentChat, AgentChatMessage, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };
+export { AgentChat, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext };

package/dist/components/AgentChat.js

@@ -1,15 +1,15 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
 import { Message, MessageContent, MessageResponse } from "./Message.js";
-import { PromptInput, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, PromptInputTools } from "./PromptInput.js";
+import { PromptInput, PromptInputApproval, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getPendingToolApprovals } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "./Tool.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { getToolName, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isReasoningUIPart, isTextUIPart, isToolOrDynamicToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
 function getPartKey(part, partIndex) {
-	if (isToolUIPart(part)) return part.toolCallId;
+	if (isToolOrDynamicToolUIPart(part)) return part.toolCallId;
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
 	return `${part.type}-${partIndex}`;
 }
@@ -19,33 +19,28 @@ function renderDefaultPart(part) {
 		isStreaming: part.state === "streaming",
 		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
 	});
-	if (isToolUIPart(part)) {
-		const output = "output" in part ? part.output : void 0;
-		const errorText = "errorText" in part ? part.errorText : void 0;
-		const toolType = part.type === "dynamic-tool" ? "dynamic-tool" : "function";
-		return /* @__PURE__ */ jsxs(Tool, {
-			state: part.state,
-			children: [/* @__PURE__ */ jsx(ToolHeader, {
-				type: toolType,
-				toolName: getToolName(part),
-				title: part.title
-			}), /* @__PURE__ */ jsxs(ToolContent, { children: [part.input !== void 0 ? /* @__PURE__ */ jsx(ToolInput, { input: part.input }) : null, /* @__PURE__ */ jsx(ToolOutput, {
-				output,
-				errorText
-			})] })]
-		});
-	}
+	if (isToolOrDynamicToolUIPart(part)) return /* @__PURE__ */ jsxs(Tool, {
+		part,
+		children: [/* @__PURE__ */ jsx(ToolHeader, {}), /* @__PURE__ */ jsxs(ToolContent, { children: [/* @__PURE__ */ jsx(ToolInput, {}), /* @__PURE__ */ jsx(ToolOutput, {})] })]
+	});
 	return null;
 }
 /**
 * A complete agent chat surface: auto-scrolling conversation of AI SDK
 * `UIMessage`s (text, reasoning, and tool parts rendered by default) plus a
 * prompt composer. Customize per-part rendering with `renderPart`.
+*
+* This is the presentational layer under `ThinkChat` — props in, no
+* transport. Use it directly with plain AI SDK `useChat` or a read-only
+* transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, onApprovalResponse, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
+	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
+	const pendingApprovals = (onApprovalResponse ? getPendingToolApprovals(messages) : []).filter(({ part }) => part.state !== "approval-requested" || !skippedApprovalIds.includes(part.approval.id));
+	const pendingApproval = pendingApprovals[0];
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("agent-chat", className),
@@ -73,16 +68,24 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 			}, message.id ?? messageIndex))] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "agent-chat__composer",
-			children: /* @__PURE__ */ jsxs(PromptInput, {
+			children: /* @__PURE__ */ jsx(PromptInput, {
 				onSubmit: handleSubmit,
-				children: [/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
+				children: pendingApproval && onApprovalResponse ? /* @__PURE__ */ jsx(PromptInputApproval, {
+					part: pendingApproval.part,
+					count: pendingApprovals.length,
+					onRespond: onApprovalResponse,
+					onSkip: () => {
+						const { part } = pendingApproval;
+						if (part.state === "approval-requested") setSkippedApprovalIds((previous) => [...previous, part.approval.id]);
+					}
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
 					"aria-label": "Message",
 					placeholder,
 					disabled
 				}) }), /* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsx(PromptInputTools, { children: composerTools }), /* @__PURE__ */ jsx(PromptInputSubmit, {
 					status,
 					onStop
-				})] })]
+				})] })] })
 			})
 		})]
 	});

package/dist/components/AgentConnection.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon } from "../icons-Bf7JMKk-.js";
+import { b as LinkIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BrCoypnc.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
 import { Popover } from "./Popover.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { P as XIcon } from "../icons-Bf7JMKk-.js";
+import { F as XIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import "react";