@mcp-b/react-components 0.6.3 → 0.6.4

package/dist/components/AgentChat.js

@@ -5,7 +5,7 @@ import { Context, ContextContent, ContextContentBody, ContextContentHeader, Cont
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { MenuGroup, MenuGroupLabel } from "./Menu.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -107,7 +107,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
 	const pendingApprovals = getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
-		const id = getApprovalRequestId(part);
+		const id = getApprovalStateKey(part);
 		return Boolean(id) && !skippedApprovalIds.includes(id);
 	});
 	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
@@ -117,8 +117,9 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 		if (permissionMode !== "bypass") return;
 		for (const { part } of pendingApprovals) {
 			const id = getApprovalRequestId(part);
-			if (!id || autoApprovedIds.current.has(id)) continue;
-			autoApprovedIds.current.add(id);
+			const key = getApprovalStateKey(part);
+			if (!id || !key || autoApprovedIds.current.has(key)) continue;
+			autoApprovedIds.current.add(key);
 			if (part.state === "approval-requested") onApprovalResponse?.({
 				id,
 				approved: true
@@ -195,7 +196,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 					onRespond: onApprovalResponse,
 					executionApprovals,
 					onSkip: () => {
-						const id = getApprovalRequestId(pendingApproval.part);
+						const id = getApprovalStateKey(pendingApproval.part);
 						if (id) setSkippedApprovalIds((previous) => [...previous, id]);
 					}
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/PromptInput.d.ts

@@ -356,6 +356,8 @@ interface ExecutionApprovals {
 }
 /** The id a response must carry: the approval id, or the paused run's executionId. */
 declare function getApprovalRequestId(part: ApprovalToolPart): string | undefined;
+/** Component-local identity: paused executions can ask for multiple approvals. */
+declare function getApprovalStateKey(part: ApprovalToolPart): string | undefined;
 interface PendingToolApproval<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   messageIndex: number;
@@ -529,4 +531,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 { 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 };
+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, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };

package/dist/components/PromptInput.js

@@ -667,6 +667,14 @@ function getApprovalRequestId(part) {
 	if (part.state === "approval-requested") return part.approval.id;
 	return getPausedExecution(part)?.executionId;
 }
+/** Component-local identity: paused executions can ask for multiple approvals. */
+function getApprovalStateKey(part) {
+	if (part.state === "approval-requested") return part.approval.id;
+	const paused = getPausedExecution(part);
+	if (!paused) return void 0;
+	const seq = paused.pending[0]?.seq;
+	return seq === void 0 ? paused.executionId : `${paused.executionId}:${seq}`;
+}
 /** Derives pending tool approvals straight from the messages — no app-owned shapes. */
 function getPendingToolApprovals(messages, { pausedExecutions = false } = {}) {
 	const pending = [];
@@ -701,7 +709,7 @@ function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, ques
 	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;
+	const approvalId = getApprovalStateKey(part);
 	React.useEffect(() => {
 		setSelected("approve");
 		setReason("");
@@ -709,19 +717,23 @@ function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, ques
 	}, [approvalId]);
 	if (approval ? !onRespond : !(paused && executionApprovals)) return null;
 	const toolName = getToolName(part);
-	const respond = (approved) => {
+	const respond = async (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);
+		try {
+			if (approval) await onRespond?.({
+				id: approval.id,
+				approved,
+				reason: denyReason
+			});
+			else if (paused) await (approved ? executionApprovals?.approve(paused.executionId) : executionApprovals?.reject(paused.executionId, denyReason));
+		} finally {
+			setBusy(false);
+		}
 	};
-	const submit = () => respond(selected === "approve");
+	const submit = () => void 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", {
@@ -790,7 +802,7 @@ function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, ques
 					className: "prompt-input__approval-option",
 					"data-selected": selected === "approve" || void 0,
 					disabled: busy,
-					onClick: () => respond(true),
+					onClick: () => void respond(true),
 					onFocus: () => setSelected("approve"),
 					children: [
 						/* @__PURE__ */ jsx("span", {
@@ -1047,4 +1059,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-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 };
+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, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -49,7 +49,7 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.6.3"
+    "@mcp-b/design-tokens": "0.6.4"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",