@mcp-b/react-components 0.2.2 → 0.4.0

package/dist/components/Message.js

@@ -1,7 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-Bf7JMKk-.js";
+import { h as FileIcon, n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cjk } from "@streamdown/cjk";
@@ -66,6 +67,39 @@ const MessageResponse = React.memo(function MessageResponse({ className, ...prop
 	});
 });
 /**
+* A `file` part inside a message: images render inline (click to zoom),
+* anything else becomes a download chip. Covers both directions — files the
+* user attached and files the agent emitted.
+*/
+function MessageAttachment({ part, className, ...props }) {
+	const name = part.filename ?? (part.mediaType || "attachment");
+	if (part.mediaType.startsWith("image/")) return /* @__PURE__ */ jsx(AttachmentPreview, {
+		url: part.url,
+		filename: part.filename,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cx("message__attachment-zoom", className),
+			"aria-label": `Preview ${name}`,
+			...props,
+			children: /* @__PURE__ */ jsx("img", {
+				className: "message__attachment-image",
+				src: part.url,
+				alt: part.filename ?? "Attached image"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsxs("a", {
+		className: cx("message__attachment", className),
+		href: part.url,
+		download: part.filename,
+		...props,
+		children: [/* @__PURE__ */ jsx(FileIcon, { className: "message__attachment-icon" }), /* @__PURE__ */ jsx("span", {
+			className: "message__attachment-name",
+			children: name
+		})]
+	});
+}
+/**
 * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
 * alongside or beneath a message.
 */
@@ -242,4 +276,4 @@ function MessageBranchPage({ className, format, ref, ...props }) {
 	});
 }
 //#endregion
-export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };
+export { Message, MessageAction, MessageActions, MessageAttachment, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/ModelSelector.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as SearchIcon, s as ChevronDownIcon } from "../icons-Bf7JMKk-.js";
+import { k as SearchIcon, s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./Dialog.js";
 import * as React from "react";

package/dist/components/NavigationMenu.js

@@ -1,4 +1,4 @@
-import { s as ChevronDownIcon } from "../icons-Bf7JMKk-.js";
+import { s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/components/PricingPage.js

@@ -1,15 +1,15 @@
 import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./Accordion.js";
+import { Separator } from "./Separator.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";
 import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle } from "./AlertDialog.js";
+import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import { Card } from "./Card.js";
 import { Checkbox } from "./Checkbox.js";
-import { Separator } from "./Separator.js";
 import { Switch, SwitchThumb } from "./Switch.js";
 import { Label } from "./Label.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
-import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import { Progress, ProgressIndicator, ProgressTrack } from "./Progress.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/PromptInput.d.ts

@@ -4,15 +4,15 @@ import { h as MenuItemProps, w as MenuProps, y as MenuPopupProps } from "../Menu
 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, FileUIPart, ToolUIPart, UIMessage } from "ai";
 
 //#region src/components/PromptInput.d.ts
-interface PromptInputFilePart {
-  type: "file";
-  id?: string;
-  filename?: string;
-  mediaType?: string;
-  url?: string;
-}
+/**
+ * The AI SDK's `FileUIPart`, taken whole — an attachment IS the `file` part
+ * that ends up on the sent message, so submitted files feed straight into
+ * `sendMessage({ text, files })`.
+ */
+type PromptInputFilePart = FileUIPart;
 interface PromptInputReferencedSource {
   id?: string;
   title?: string;
@@ -24,8 +24,8 @@ interface PromptInputMessage {
   text: string;
   files: PromptInputFilePart[];
 }
-/** Lifecycle status of an in-flight model request. */
-type PromptInputStatus = "ready" | "submitted" | "streaming" | "error";
+/** Lifecycle status of an in-flight model request — the AI SDK's `ChatStatus`. */
+type PromptInputStatus = ChatStatus;
 interface AttachmentsContext {
   files: Array<PromptInputFilePart & {
     id: string;
@@ -143,6 +143,43 @@ declare function PromptInputHeader({
 }: PromptInputHeaderProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+interface PromptInputAttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The pending attachment — the AI SDK `file` part plus the local list id. */
+  file: PromptInputFilePart & {
+    id: string;
+  };
+}
+/**
+ * One pending attachment chip: image files show a thumbnail, everything else
+ * a file icon and name. The corner button removes it from the pending list.
+ */
+declare function PromptInputAttachment({
+  file,
+  className,
+  ref,
+  ...props
+}: PromptInputAttachmentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface PromptInputAttachmentsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Override chip rendering per attachment. */
+  children?: (file: PromptInputFilePart & {
+    id: string;
+  }) => React.ReactNode;
+}
+/**
+ * The pending-attachment chip row. Renders nothing while the list is empty,
+ * so it can sit in the composer unconditionally — files added via the file
+ * dialog, paste, or drop appear here until submit sends and clears them.
+ */
+declare function PromptInputAttachments({
+  className,
+  children,
+  ref,
+  ...props
+}: PromptInputAttachmentsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
 interface PromptInputBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
 declare function PromptInputBody({
   className,
@@ -253,6 +290,25 @@ declare function PromptInputActionAddScreenshot({
   children,
   ...props
 }: PromptInputActionAddScreenshotProps): React.JSX.Element;
+/** How the agent's approval requests are handled. */
+type PermissionMode = "ask" | "bypass";
+interface PromptInputPermissionSelectorProps {
+  /** Current mode. `"ask"` surfaces approvals in the composer; `"bypass"` auto-approves. */
+  value: PermissionMode;
+  onValueChange: (mode: PermissionMode) => void;
+  /** Overrides the menu's header question. */
+  question?: string;
+}
+/**
+ * Footer control for choosing how approval requests are handled — ask each
+ * time, or bypass. Purely a picker: the auto-approve behavior lives with
+ * whoever owns the approvals (`AgentChat` wires both ends).
+ */
+declare function PromptInputPermissionSelector({
+  value,
+  onValueChange,
+  question
+}: PromptInputPermissionSelectorProps): React.JSX.Element;
 interface PromptInputSubmitProps extends Omit<ButtonProps, "children" | "className" | "type"> {
   className?: string;
   status?: PromptInputStatus;
@@ -275,6 +331,83 @@ declare function PromptInputSubmit({
 }: 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;
+/**
+ * Resolve paused codemode executions (`execute` / `browser_execute`) in the
+ * same composer approval UI as AI SDK tool approvals. Wire to the Think
+ * agent's client-callable RPCs — they ride the `useAgent` stub, not the chat
+ * socket, which is why this package can't reach them itself:
+ *
+ * ```tsx
+ * executionApprovals={{
+ *   approve: (id) => agent.stub.approveExecution(id),
+ *   reject: (id, reason) => agent.stub.rejectExecution(id, reason),
+ * }}
+ * ```
+ *
+ * On approve, upstream resumes the run, replaces the paused tool output in the
+ * transcript, and auto-continues the chat — no client bookkeeping needed.
+ * Both RPCs are idempotent, so a stale click resolves to "already handled".
+ */
+interface ExecutionApprovals {
+  approve: (executionId: string) => unknown;
+  reject: (executionId: string, reason?: string) => unknown;
+}
+/** The id a response must carry: the approval id, or the paused run's executionId. */
+declare function getApprovalRequestId(part: ApprovalToolPart): string | undefined;
+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[], {
+  pausedExecutions
+}?: {
+  pausedExecutions?: boolean;
+}): Array<PendingToolApproval<MessageT>>;
+interface PromptInputApprovalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "part"> {
+  /**
+   * The `approval-requested` tool part — or a paused codemode execution —
+   * passed whole. Renders nothing for other states.
+   */
+  part: ApprovalToolPart;
+  /** Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly. */
+  onRespond?: ChatAddToolApproveResponseFunction;
+  /** Resolves paused executions instead of `onRespond`. See {@link ExecutionApprovals}. */
+  executionApprovals?: ExecutionApprovals;
+  /**
+   * 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,
+  executionApprovals,
+  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;
@@ -396,4 +529,4 @@ 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 { AttachmentsContext, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputFilePart, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReferencedSource, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputStatus, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, ReferencedSourcesContext, TextInputContext, TooltipSide, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };
+export { ApprovalToolPart, AttachmentsContext, ExecutionApprovals, PendingToolApproval, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputApproval, PromptInputApprovalProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputControllerProps, PromptInputFilePart, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReferencedSource, PromptInputSelect, PromptInputSelectContent, PromptInputSelectContentProps, PromptInputSelectItem, PromptInputSelectItemProps, PromptInputSelectProps, PromptInputSelectTrigger, PromptInputSelectTriggerProps, PromptInputSelectValue, PromptInputSelectValueProps, PromptInputStatus, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, ReferencedSourcesContext, TextInputContext, TooltipSide, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };

package/dist/components/PromptInput.js

@@ -1,13 +1,15 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SquareIcon, C as MonitorIcon, E as PlusIcon, M as WarningIcon, i as ArrowUpIcon, k as SpinnerIcon, v as ImageIcon } from "../icons-Bf7JMKk-.js";
+import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, F as XIcon, N as WarningIcon, T as PencilIcon, h as FileIcon, i as ArrowUpIcon, j as SquareIcon, s as ChevronDownIcon, v as ImageIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";
 import { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator } from "./Combobox.js";
-import { MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRoot, MenuTrigger } from "./Menu.js";
+import { MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuTrigger } from "./Menu.js";
 import { Select, SelectContent, SelectItem, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from "./Select.js";
 import { Tab, TabPanel, TabsList } from "./Tabs.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getToolName, isToolOrDynamicToolUIPart } from "ai";
 //#region src/components/PromptInput.tsx
 const PromptInputContext = React.createContext(null);
 const PromptInputController = React.createContext(null);
@@ -338,6 +340,59 @@ function PromptInputHeader({ className, children, ref, ...props }) {
 		children
 	});
 }
+/**
+* One pending attachment chip: image files show a thumbnail, everything else
+* a file icon and name. The corner button removes it from the pending list.
+*/
+function PromptInputAttachment({ file, className, ref, ...props }) {
+	const attachments = usePromptInputAttachments();
+	const isImage = file.mediaType.startsWith("image/");
+	const name = file.filename ?? "attachment";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("prompt-input__attachment", className),
+		"data-image": isImage || void 0,
+		...props,
+		children: [isImage ? /* @__PURE__ */ jsx(AttachmentPreview, {
+			url: file.url,
+			filename: file.filename,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "prompt-input__attachment-zoom",
+				"aria-label": `Preview ${name}`,
+				children: /* @__PURE__ */ jsx("img", {
+					className: "prompt-input__attachment-thumb",
+					src: file.url,
+					alt: ""
+				})
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileIcon, { className: "prompt-input__attachment-icon" }), /* @__PURE__ */ jsx("span", {
+			className: "prompt-input__attachment-name",
+			children: name
+		})] }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "prompt-input__attachment-remove",
+			"aria-label": `Remove ${name}`,
+			onClick: () => attachments.remove(file.id),
+			children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
+		})]
+	});
+}
+/**
+* The pending-attachment chip row. Renders nothing while the list is empty,
+* so it can sit in the composer unconditionally — files added via the file
+* dialog, paste, or drop appear here until submit sends and clears them.
+*/
+function PromptInputAttachments({ className, children, ref, ...props }) {
+	const attachments = usePromptInputAttachments();
+	if (attachments.files.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__attachments", className),
+		...props,
+		children: attachments.files.map((file) => /* @__PURE__ */ jsx(React.Fragment, { children: children ? children(file) : /* @__PURE__ */ jsx(PromptInputAttachment, { file }) }, file.id))
+	});
+}
 function PromptInputBody({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -524,6 +579,60 @@ function PromptInputActionAddScreenshot({ label = "Take screenshot", onClick, ch
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MonitorIcon, { className: "prompt-input__action-menu-icon" }), label] })
 	});
 }
+const PERMISSION_MODES = [{
+	value: "ask",
+	label: "Ask for approval",
+	description: "Pause and ask before sensitive actions run"
+}, {
+	value: "bypass",
+	label: "Bypass permissions",
+	description: "Approve every request automatically"
+}];
+/**
+* Footer control for choosing how approval requests are handled — ask each
+* time, or bypass. Purely a picker: the auto-approve behavior lives with
+* whoever owns the approvals (`AgentChat` wires both ends).
+*/
+function PromptInputPermissionSelector({ value, onValueChange, question = "How should agent actions be approved?" }) {
+	return /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsxs(PromptInputButton, {
+		size: "sm",
+		className: "prompt-input__permissions-trigger",
+		"data-mode": value,
+		"aria-label": (PERMISSION_MODES.find((mode) => mode.value === value) ?? PERMISSION_MODES[0]).label,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "prompt-input__permissions-current",
+			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs("span", {
+				className: "prompt-input__permissions-current-option",
+				"data-active": mode.value === value || void 0,
+				children: [mode.value === "bypass" ? /* @__PURE__ */ jsx(WarningIcon, { size: 14 }) : null, mode.label]
+			}, mode.value))
+		}), /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 })]
+	}) }), /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsxs(MenuPopup, {
+		className: "prompt-input__permissions-menu",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "prompt-input__permissions-question",
+			children: question
+		}), /* @__PURE__ */ jsx(MenuRadioGroup, {
+			value,
+			onValueChange: (mode) => onValueChange(mode),
+			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+				value: mode.value,
+				closeOnClick: true,
+				className: "prompt-input__permissions-option",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "prompt-input__permissions-option-text",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "prompt-input__permissions-option-label",
+						children: mode.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "prompt-input__permissions-option-description",
+						children: mode.description
+					})]
+				}), /* @__PURE__ */ jsx(MenuRadioItemIndicator, { className: "prompt-input__permissions-check" })]
+			}, mode.value))
+		})]
+	}) }) })] });
+}
 function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon", onClick, children, label, ref, ...props }) {
 	const isStopping = status === "submitted" || status === "streaming";
 	const resolvedLabel = label ?? defaultSubmitLabel(status);
@@ -548,6 +657,210 @@ function PromptInputSubmit({ className, status = "ready", onStop, variant = "nor
 		children: children ?? defaultSubmitIcon(status)
 	});
 }
+function getPausedExecution(part) {
+	if (part.state !== "output-available") return void 0;
+	const output = part.output;
+	return output?.status === "paused" && typeof output.executionId === "string" ? output : void 0;
+}
+/** The id a response must carry: the approval id, or the paused run's executionId. */
+function getApprovalRequestId(part) {
+	if (part.state === "approval-requested") return part.approval.id;
+	return getPausedExecution(part)?.executionId;
+}
+/** Derives pending tool approvals straight from the messages — no app-owned shapes. */
+function getPendingToolApprovals(messages, { pausedExecutions = false } = {}) {
+	const pending = [];
+	messages.forEach((message, messageIndex) => {
+		message.parts.forEach((part, partIndex) => {
+			if (isToolOrDynamicToolUIPart(part) && (part.state === "approval-requested" || pausedExecutions && getPausedExecution(part))) pending.push({
+				message,
+				messageIndex,
+				part,
+				partIndex
+			});
+		});
+	});
+	return pending;
+}
+function formatApprovalValue(value) {
+	if (typeof value === "string") return value;
+	return JSON.stringify(value);
+}
+/**
+* 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.
+*/
+function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, question, count, className, ref, ...props }) {
+	const [selected, setSelected] = React.useState("approve");
+	const [reason, setReason] = React.useState("");
+	const [busy, setBusy] = React.useState(false);
+	const yesRef = React.useRef(null);
+	const reasonRef = React.useRef(null);
+	const approval = part.state === "approval-requested" ? part.approval : void 0;
+	const paused = getPausedExecution(part);
+	const approvalId = approval?.id ?? paused?.executionId;
+	React.useEffect(() => {
+		setSelected("approve");
+		setReason("");
+		setBusy(false);
+	}, [approvalId]);
+	if (approval ? !onRespond : !(paused && executionApprovals)) return null;
+	const toolName = getToolName(part);
+	const respond = (approved) => {
+		if (busy) return;
+		setBusy(true);
+		const trimmed = reason.trim();
+		const denyReason = !approved && trimmed ? trimmed : void 0;
+		if (approval) onRespond?.({
+			id: approval.id,
+			approved,
+			reason: denyReason
+		});
+		else if (paused) approved ? executionApprovals?.approve(paused.executionId) : executionApprovals?.reject(paused.executionId, denyReason);
+	};
+	const submit = () => respond(selected === "approve");
+	const input = "input" in part ? part.input : void 0;
+	const inputEntries = input && typeof input === "object" && !Array.isArray(input) ? Object.entries(input) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": `Approve ${toolName}`,
+		className: cx("prompt-input__approval", className),
+		onKeyDown: (event) => {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				(selected === "approve" ? reasonRef : yesRef).current?.focus();
+			} else if (event.key === "1" && event.target !== reasonRef.current) yesRef.current?.focus();
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "prompt-input__approval-question",
+				children: [/* @__PURE__ */ jsx("span", { children: question ?? (paused ? /* @__PURE__ */ jsx(Fragment, { children: "The agent's code is paused on these calls. Allow it to continue?" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					"Do you want to allow the agent to run ",
+					/* @__PURE__ */ jsx("code", { children: toolName }),
+					"?"
+				] })) }), count && count > 1 ? /* @__PURE__ */ jsxs("span", {
+					className: "prompt-input__approval-count",
+					children: ["1 of ", count]
+				}) : null]
+			}),
+			paused ? /* @__PURE__ */ jsx("div", {
+				className: "prompt-input__approval-preview",
+				children: paused.pending.map((action) => /* @__PURE__ */ jsxs("div", {
+					className: "prompt-input__approval-preview-row",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "prompt-input__approval-preview-key",
+							children: [
+								action.connector,
+								".",
+								action.method
+							]
+						}),
+						" ",
+						action.args === void 0 ? null : formatApprovalValue(action.args)
+					]
+				}, action.seq))
+			}) : input !== void 0 ? /* @__PURE__ */ jsx("div", {
+				className: "prompt-input__approval-preview",
+				children: inputEntries ? inputEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+					className: "prompt-input__approval-preview-row",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "prompt-input__approval-preview-key",
+							children: key
+						}),
+						" ",
+						formatApprovalValue(value)
+					]
+				}, key)) : /* @__PURE__ */ jsx("div", {
+					className: "prompt-input__approval-preview-row",
+					children: formatApprovalValue(input)
+				})
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "prompt-input__approval-options",
+				children: [/* @__PURE__ */ jsxs("button", {
+					ref: yesRef,
+					type: "button",
+					className: "prompt-input__approval-option",
+					"data-selected": selected === "approve" || void 0,
+					disabled: busy,
+					onClick: () => respond(true),
+					onFocus: () => setSelected("approve"),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "prompt-input__approval-key",
+							children: "1"
+						}),
+						"Yes",
+						/* @__PURE__ */ jsx("span", {
+							className: "prompt-input__approval-arrows",
+							"aria-hidden": "true",
+							children: "↑↓"
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "prompt-input__approval-option prompt-input__approval-deny",
+					"data-selected": selected === "deny" || void 0,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "prompt-input__approval-key",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(PencilIcon, { size: 11 })
+						}),
+						/* @__PURE__ */ jsx("input", {
+							ref: reasonRef,
+							type: "text",
+							className: "prompt-input__approval-reason",
+							"aria-label": `Deny ${toolName} and tell the agent what to do differently`,
+							placeholder: "No, and tell the agent what to do differently",
+							value: reason,
+							disabled: busy,
+							onFocus: () => setSelected("deny"),
+							onChange: (event) => {
+								setSelected("deny");
+								setReason(event.currentTarget.value);
+							},
+							onKeyDown: (event) => {
+								if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+									event.preventDefault();
+									respond(false);
+								}
+							}
+						}),
+						onSkip ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							variant: "ghost",
+							color: "neutral",
+							className: "prompt-input__approval-skip",
+							disabled: busy,
+							onClick: onSkip,
+							children: "Skip"
+						}) : null,
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							size: "sm",
+							color: "primary",
+							className: "prompt-input__approval-submit",
+							disabled: busy,
+							onClick: submit,
+							children: [selected === "approve" ? "Approve" : "Submit", /* @__PURE__ */ jsx("kbd", {
+								className: "prompt-input__approval-kbd",
+								children: "⏎"
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
 const PromptInputSelect = Select;
 function PromptInputSelectTrigger(props) {
 	return /* @__PURE__ */ jsx(SelectTrigger, { ...props });
@@ -669,11 +982,11 @@ function fileToPart(file) {
 	};
 }
 function revokeFileUrls(files) {
-	for (const file of files) if (file.url?.startsWith("blob:")) URL.revokeObjectURL(file.url);
+	for (const file of files) if (file.url.startsWith("blob:")) URL.revokeObjectURL(file.url);
 }
 async function resolveSubmittedFile(file) {
 	const { id: _id, ...part } = file;
-	if (!part.url?.startsWith("blob:")) return part;
+	if (!part.url.startsWith("blob:")) return part;
 	const dataUrl = await blobUrlToDataUrl(part.url);
 	return {
 		...part,
@@ -734,4 +1047,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };

package/dist/components/Queue.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { d as DotIcon, h as FileIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { d as DotIcon, h as FileIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";