@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/AgentChat.js

@@ -1,15 +1,17 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as PlusIcon, k as RefreshIcon } from "../icons-D2Q5n5C1.js";
+import { A as RefreshIcon, D as PencilIcon, k as PlusIcon } from "../icons-Ba9THQKz.js";
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
+import { Button } from "./Button.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import { ConversationEmptyState } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { Marker, MarkerContent } from "./Marker.js";
-import { MenuGroup, MenuGroupLabel } from "./Menu.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
+import { t as CopyButton } from "../copy-button-DUMLYdsk.js";
+import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isCompactionMessage } from "agents/experimental/memory/utils";
@@ -17,6 +19,17 @@ import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think
 import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
 const EMPTY_PENDING_APPROVALS = [];
+const EMPTY_SKIPPED_APPROVAL_IDS = [];
+function createApprovalSessionState(thinkStub) {
+	return {
+		thinkStub,
+		skippedApprovalIds: EMPTY_SKIPPED_APPROVAL_IDS,
+		permissionMode: "ask"
+	};
+}
+function isCurrentApprovalSession(state, thinkStub) {
+	return state.thinkStub === thinkStub;
+}
 function AgentChatAttachButton() {
 	const attachments = usePromptInputAttachments();
 	return /* @__PURE__ */ jsx(PromptInputButton, {
@@ -33,7 +46,7 @@ function AgentChatAddMenu({ children }) {
 		sideOffset: 12,
 		collisionPadding: 8,
 		className: "agent-chat__add-menu",
-		children: [/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: "Files" }), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
+		children: [/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}), children]
 	})] });
 }
 /**
@@ -62,14 +75,6 @@ function getPartKey(part, partIndex) {
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
 	return `${part.type}-${partIndex}`;
 }
-function summarizeToolInput(input) {
-	if (!input || typeof input !== "object") return null;
-	for (const value of Object.values(input)) if (typeof value === "string" && value.trim()) {
-		const line = value.trim().split("\n", 1)[0] ?? "";
-		return line.length > 64 ? `${line.slice(0, 64)}…` : line;
-	}
-	return null;
-}
 function isToolPartWorking(part) {
 	const state = getToolPartState(part);
 	return state === "loading" || state === "streaming" || state === "waiting-approval";
@@ -114,6 +119,123 @@ function isCompactionMessage$1(message) {
 function getMessageText(message) {
 	return message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("");
 }
+function getCopyableResponseText(message) {
+	return message.parts.filter(isTextUIPart).map((part) => part.text).join("\n\n").trim() || void 0;
+}
+function AgentChatAssistantActions({ message, responseNumber, showCopy, showRetry, onRegenerate, onCopyStatus }) {
+	const copyText = getCopyableResponseText(message);
+	if ((!showCopy || !copyText) && !showRetry) return null;
+	return /* @__PURE__ */ jsxs(MessageActions, {
+		"aria-label": `Actions for response ${responseNumber}`,
+		children: [showCopy && copyText ? /* @__PURE__ */ jsx(CopyButton, {
+			className: "message__action",
+			label: `Copy response ${responseNumber}`,
+			tooltip: "Copy response",
+			text: copyText,
+			size: "icon-lg",
+			onCopy: () => onCopyStatus(`Response ${responseNumber} copied.`),
+			onError: () => onCopyStatus(`Could not copy response ${responseNumber}. Try again.`)
+		}) : null, showRetry && onRegenerate ? /* @__PURE__ */ jsx(MessageAction, {
+			label: "Retry",
+			tooltip: "Regenerate response",
+			size: "icon-lg",
+			onClick: () => onRegenerate(message.id),
+			children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+		}) : null]
+	});
+}
+function getEditableUserText(message) {
+	if (message.role !== "user" || message.parts.length !== 1) return void 0;
+	const part = message.parts[0];
+	return isTextUIPart(part) && part.text.trim() ? part.text : void 0;
+}
+function AgentChatMessageEditor({ message, originalText, onCancel, onEditAndResend, onSuccess }) {
+	const [draft, setDraft] = React.useState(originalText);
+	const [isSubmitting, setIsSubmitting] = React.useState(false);
+	const [error, setError] = React.useState();
+	const textareaRef = React.useRef(null);
+	const labelId = React.useId();
+	const errorId = React.useId();
+	const trimmedDraft = draft.trim();
+	const canSubmit = !isSubmitting && Boolean(trimmedDraft) && trimmedDraft !== originalText.trim();
+	React.useLayoutEffect(() => {
+		textareaRef.current?.focus();
+		const end = textareaRef.current?.value.length ?? 0;
+		textareaRef.current?.setSelectionRange(end, end);
+	}, []);
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		if (!canSubmit) return;
+		setError(void 0);
+		setIsSubmitting(true);
+		try {
+			await onEditAndResend({
+				message,
+				text: trimmedDraft
+			});
+			onSuccess();
+		} catch {
+			setError("Message wasn’t resent. Try again.");
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "message__edit-form",
+		"aria-busy": isSubmitting,
+		onSubmit: (event) => void handleSubmit(event),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				id: labelId,
+				className: "message__edit-label",
+				htmlFor: `${labelId}-textarea`,
+				children: "Edit message"
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref: textareaRef,
+				id: `${labelId}-textarea`,
+				className: "message__edit-textarea",
+				value: draft,
+				"aria-describedby": error ? errorId : void 0,
+				"aria-invalid": error ? true : void 0,
+				disabled: isSubmitting,
+				rows: 3,
+				onChange: (event) => {
+					setDraft(event.currentTarget.value);
+					if (error) setError(void 0);
+				},
+				onKeyDown: (event) => {
+					if (event.key !== "Escape" || isSubmitting) return;
+					event.preventDefault();
+					onCancel();
+				}
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: "message__edit-error",
+				role: "alert",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "message__edit-actions",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					color: "neutral",
+					size: "lg",
+					disabled: isSubmitting,
+					onClick: onCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					color: "primary",
+					size: "lg",
+					disabled: !canSubmit,
+					children: isSubmitting ? "Resending…" : "Send"
+				})]
+			})
+		]
+	});
+}
 function formatSourceTitle(part) {
 	if (part.title) return part.title;
 	if (part.type === "source-document") return part.filename ?? part.mediaType;
@@ -188,42 +310,98 @@ function renderDefaultPart(part) {
 * transport. Product code that talks to a Cloudflare Think agent should render
 * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
+	const copyAnnouncementTimer = React.useRef(null);
+	const announceCopyStatus = React.useCallback((message) => {
+		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
+		setCopyAnnouncement("");
+		copyAnnouncementTimer.current = window.setTimeout(() => {
+			setCopyAnnouncement(message);
+			copyAnnouncementTimer.current = null;
+		}, 50);
+	}, []);
+	React.useEffect(() => () => {
+		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
+	}, []);
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
-	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
-	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
+	const [approvalSession, setApprovalSession] = React.useState(() => createApprovalSessionState(thinkStub));
+	const approvalSessionIsCurrent = isCurrentApprovalSession(approvalSession, thinkStub);
+	const skippedApprovalIds = approvalSessionIsCurrent ? approvalSession.skippedApprovalIds : EMPTY_SKIPPED_APPROVAL_IDS;
+	const permissionMode = approvalSessionIsCurrent ? approvalSession.permissionMode : "ask";
+	const updateApprovalSession = React.useCallback((update) => {
+		setApprovalSession((previous) => update(isCurrentApprovalSession(previous, thinkStub) ? previous : createApprovalSessionState(thinkStub)));
+	}, [thinkStub]);
+	const setPermissionMode = React.useCallback((next) => {
+		updateApprovalSession((current) => ({
+			...current,
+			permissionMode: next
+		}));
+	}, [updateApprovalSession]);
+	React.useLayoutEffect(() => {
+		setApprovalSession((previous) => isCurrentApprovalSession(previous, thinkStub) ? previous : createApprovalSessionState(thinkStub));
+	}, [thinkStub]);
+	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter(({ part }) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
 		const id = getApprovalStateKey(part);
 		return Boolean(id) && !skippedApprovalIds.includes(id);
-	}).map((approval) => ({ part: approval.part })), ...executionApprovals ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
-	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
-	const [permissionMode, setPermissionMode] = React.useState("ask");
-	const autoApprovedIds = React.useRef(/* @__PURE__ */ new Set());
+	}).map((approval) => ({ part: approval.part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
+	const approvalsWired = Boolean(onApprovalResponse || thinkStub);
+	const autoApprovedIds = React.useRef({
+		thinkStub,
+		ids: /* @__PURE__ */ new Set()
+	});
+	React.useLayoutEffect(() => {
+		if (isCurrentApprovalSession(autoApprovedIds.current, thinkStub)) return;
+		autoApprovedIds.current = {
+			thinkStub,
+			ids: /* @__PURE__ */ new Set()
+		};
+	}, [thinkStub]);
 	React.useEffect(() => {
 		if (permissionMode !== "bypass") return;
 		for (const item of pendingApprovalItems) {
 			const id = "part" in item ? getApprovalRequestId(item.part) : item.approval.executionId;
 			const key = "part" in item ? getApprovalStateKey(item.part) : item.approval.executionId;
-			if (!id || !key || autoApprovedIds.current.has(key)) continue;
-			autoApprovedIds.current.add(key);
+			if (!id || !key || autoApprovedIds.current.ids.has(key)) continue;
+			autoApprovedIds.current.ids.add(key);
 			if ("part" in item && item.part.state === "approval-requested") onApprovalResponse?.({
 				id,
 				approved: true
 			});
-			else executionApprovals?.approve(id);
+			else if (thinkStub) thinkStub.approveExecution(id).finally(() => {
+				onExecutionSettled?.();
+			});
 		}
 	}, [
 		permissionMode,
 		messages,
 		durableApprovals,
 		onApprovalResponse,
-		executionApprovals
+		thinkStub,
+		onExecutionSettled
 	]);
 	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
-	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "assistant") : -1;
+	const newestAssistantIndex = messages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage$1(message));
+	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? newestAssistantIndex : -1;
+	const lastUserIndex = onEditAndResend && !disabled && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "user") : -1;
+	const [editingMessageId, setEditingMessageId] = React.useState();
+	const restoreEditFocus = React.useRef(false);
+	const editButtonRef = React.useRef(null);
+	let assistantResponseCount = 0;
+	const assistantResponseNumbers = messages.map((message) => {
+		if (message.role !== "assistant" || isCompactionMessage$1(message)) return 0;
+		assistantResponseCount += 1;
+		return assistantResponseCount;
+	});
+	React.useLayoutEffect(() => {
+		if (editingMessageId || !restoreEditFocus.current) return;
+		editButtonRef.current?.focus();
+		restoreEditFocus.current = false;
+	}, [editingMessageId]);
 	const composerRef = (el) => {
 		if (!el || typeof ResizeObserver === "undefined") return;
 		const root = el.parentElement;
@@ -236,117 +414,161 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("agent-chat", className),
-		children: [/* @__PURE__ */ jsx(MessageScrollerProvider, {
-			autoScroll: true,
-			defaultScrollPosition: "last-anchor",
-			children: /* @__PURE__ */ jsxs(MessageScroller, {
-				className: "agent-chat__conversation",
-				children: [/* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
-					"aria-busy": status === "streaming" || status === "submitted",
-					className: "agent-chat__transcript-content",
-					children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
-						className: "agent-chat__empty-row",
-						children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
-							title: "Start a conversation",
-							description: "Ask the agent to inspect, plan, or build."
-						})
-					}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
-						messageId: message.id,
-						scrollAnchor: message.role === "user",
-						children: isCompactionMessage$1(message) ? /* @__PURE__ */ jsx(Marker, {
-							variant: "separator",
-							children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
-						}) : /* @__PURE__ */ jsxs(Message, {
-							from: message.role,
-							children: [
-								message.parts.map((part, partIndex) => {
-									const defaultRender = () => renderDefaultPart(part);
-									const custom = renderPart?.({
-										message,
-										part,
-										partIndex,
-										defaultRender
-									});
-									if (isSourceUrlPart(part) || isSourceDocumentPart(part)) {
-										if (custom !== void 0) return custom ? /* @__PURE__ */ jsx(MessageContent, { children: custom }, getPartKey(part, partIndex)) : null;
-										const previous = message.parts[partIndex - 1];
-										if (isSourceUrlPart(previous) || isSourceDocumentPart(previous)) return null;
-										return /* @__PURE__ */ jsx(MessageContent, { children: renderSources(getSourceRun(message.parts, partIndex)) }, getPartKey(part, partIndex));
-									}
-									const rendered = custom === void 0 ? defaultRender() : custom;
-									return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
-										className: "message__compacted",
-										children: "Output truncated for storage"
-									}) : null] }, getPartKey(part, partIndex)) : null;
-								}),
-								renderMessageAfter?.({
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "message__copy-status",
+				role: "status",
+				"aria-atomic": "true",
+				children: copyAnnouncement
+			}),
+			/* @__PURE__ */ jsx(MessageScrollerProvider, {
+				autoScroll: true,
+				defaultScrollPosition: "last-anchor",
+				children: /* @__PURE__ */ jsxs(MessageScroller, {
+					className: "agent-chat__conversation",
+					children: [/* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+						"aria-busy": status === "streaming" || status === "submitted",
+						className: "agent-chat__transcript-content",
+						children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
+							className: "agent-chat__empty-row",
+							children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
+								title: "Start a conversation",
+								description: "Ask the agent to inspect, plan, or build."
+							})
+						}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
+							messageId: message.id,
+							scrollAnchor: message.role === "user",
+							children: isCompactionMessage$1(message) ? /* @__PURE__ */ jsx(Marker, {
+								variant: "separator",
+								children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
+							}) : /* @__PURE__ */ jsx(Message, {
+								from: message.role,
+								children: editingMessageId === message.id && onEditAndResend ? /* @__PURE__ */ jsx(AgentChatMessageEditor, {
 									message,
-									messageIndex
-								}),
-								onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
-									label: "Retry",
-									tooltip: "Regenerate response",
-									onClick: () => onRegenerate(message.id),
-									children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
-								}) }) : null
-							]
-						})
-					}, message.id ?? messageIndex))]
-				}) }), /* @__PURE__ */ jsx(MessageScrollerButton, {
-					"aria-label": "Scroll to latest",
-					className: "agent-chat__scroll-button",
-					size: "icon"
+									originalText: getEditableUserText(message) ?? "",
+									onEditAndResend,
+									onCancel: () => {
+										restoreEditFocus.current = true;
+										setEditingMessageId(void 0);
+									},
+									onSuccess: () => {
+										restoreEditFocus.current = false;
+										setEditingMessageId(void 0);
+									}
+								}, message.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
+									message.parts.map((part, partIndex) => {
+										const defaultRender = () => renderDefaultPart(part);
+										const custom = renderPart?.({
+											message,
+											part,
+											partIndex,
+											defaultRender
+										});
+										if (isSourceUrlPart(part) || isSourceDocumentPart(part)) {
+											if (custom !== void 0) return custom ? /* @__PURE__ */ jsx(MessageContent, { children: custom }, getPartKey(part, partIndex)) : null;
+											const previous = message.parts[partIndex - 1];
+											if (isSourceUrlPart(previous) || isSourceDocumentPart(previous)) return null;
+											return /* @__PURE__ */ jsx(MessageContent, { children: renderSources(getSourceRun(message.parts, partIndex)) }, getPartKey(part, partIndex));
+										}
+										const rendered = custom === void 0 ? defaultRender() : custom;
+										return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
+											className: "message__compacted",
+											children: "Output truncated for storage"
+										}) : null] }, getPartKey(part, partIndex)) : null;
+									}),
+									renderMessageAfter?.({
+										message,
+										messageIndex
+									}),
+									onEditAndResend && messageIndex === lastUserIndex && getEditableUserText(message) !== void 0 ? /* @__PURE__ */ jsx(MessageActions, {
+										"aria-label": "Message actions",
+										children: /* @__PURE__ */ jsx(MessageAction, {
+											ref: editButtonRef,
+											label: "Edit message",
+											tooltip: "Edit and resend",
+											size: "icon-lg",
+											onClick: () => {
+												restoreEditFocus.current = false;
+												setEditingMessageId(message.id);
+											},
+											children: /* @__PURE__ */ jsx(PencilIcon, {})
+										})
+									}) : null,
+									message.role === "assistant" ? /* @__PURE__ */ jsx(AgentChatAssistantActions, {
+										message,
+										responseNumber: assistantResponseNumbers[messageIndex],
+										showCopy: messageIndex !== newestAssistantIndex || status !== "streaming" && status !== "submitted",
+										showRetry: messageIndex === lastAssistantIndex,
+										onRegenerate,
+										onCopyStatus: announceCopyStatus
+									}) : null
+								] })
+							})
+						}, message.id ?? messageIndex))]
+					}) }), /* @__PURE__ */ jsx(MessageScrollerButton, {
+						"aria-label": "Scroll to latest",
+						className: "agent-chat__scroll-button",
+						size: "icon"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: composerRef,
+				className: "agent-chat__composer",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "agent-chat__notice",
+					role: "status",
+					"aria-atomic": "true",
+					children: notice
+				}), /* @__PURE__ */ jsx(PromptInput, {
+					multiple: true,
+					onSubmit: handleSubmit,
+					children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
+						part: "part" in pendingApproval ? pendingApproval.part : void 0,
+						approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
+						count: pendingApprovalItems.length,
+						onRespond: onApprovalResponse,
+						thinkStub,
+						onExecutionSettled,
+						onSkip: () => {
+							const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
+							if (id) updateApprovalSession((current) => ({
+								...current,
+								skippedApprovalIds: [...current.skippedApprovalIds, id]
+							}));
+						}
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+						composerHeader ? /* @__PURE__ */ jsx(PromptInputHeader, { children: composerHeader }) : null,
+						/* @__PURE__ */ jsx(PromptInputAttachments, {}),
+						/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
+							"aria-label": "Message",
+							placeholder,
+							disabled
+						}) }),
+						/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
+							/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
+							approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
+								value: permissionMode,
+								onValueChange: setPermissionMode
+							}) : null,
+							composerTools
+						] }), /* @__PURE__ */ jsxs("div", {
+							className: "prompt-input__footer-end",
+							children: [contextWindow ? /* @__PURE__ */ jsxs(Context, {
+								usedTokens: getContextUsedTokens(contextUsage),
+								maxTokens: contextWindow.maxTokens,
+								usage: contextUsage,
+								modelId: contextWindow.modelId,
+								children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsxs(ContextContent, { children: [/* @__PURE__ */ jsx(ContextContentHeader, {}), /* @__PURE__ */ jsx(ContextContentBody, {})] })]
+							}) : null, /* @__PURE__ */ jsx(PromptInputSubmit, {
+								status,
+								onStop
+							})]
+						})] })
+					] })
 				})]
 			})
-		}), /* @__PURE__ */ jsxs("div", {
-			ref: composerRef,
-			className: "agent-chat__composer",
-			children: [notice ? /* @__PURE__ */ jsx("div", {
-				className: "agent-chat__notice",
-				children: notice
-			}) : null, /* @__PURE__ */ jsx(PromptInput, {
-				multiple: true,
-				onSubmit: handleSubmit,
-				children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
-					part: "part" in pendingApproval ? pendingApproval.part : void 0,
-					approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
-					count: pendingApprovalItems.length,
-					onRespond: onApprovalResponse,
-					executionApprovals,
-					onSkip: () => {
-						const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
-						if (id) setSkippedApprovalIds((previous) => [...previous, id]);
-					}
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(PromptInputAttachments, {}),
-					/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
-						"aria-label": "Message",
-						placeholder,
-						disabled
-					}) }),
-					/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
-						/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
-						approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
-							value: permissionMode,
-							onValueChange: setPermissionMode
-						}) : null,
-						composerTools
-					] }), /* @__PURE__ */ jsxs("div", {
-						className: "prompt-input__footer-end",
-						children: [contextWindow ? /* @__PURE__ */ jsxs(Context, {
-							usedTokens: getContextUsedTokens(contextUsage),
-							maxTokens: contextWindow.maxTokens,
-							usage: contextUsage,
-							modelId: contextWindow.modelId,
-							children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsxs(ContextContent, { children: [/* @__PURE__ */ jsx(ContextContentHeader, {}), /* @__PURE__ */ jsx(ContextContentBody, {})] })]
-						}) : null, /* @__PURE__ */ jsx(PromptInputSubmit, {
-							status,
-							onStop
-						})]
-					})] })
-				] })
-			})]
-		})]
+		]
 	});
 }
 //#endregion

package/dist/components/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon } from "../icons-D2Q5n5C1.js";
+import { b as LinkIcon } from "../icons-Ba9THQKz.js";
 import { Popover } from "./Popover.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-XNQOupQ3.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-BUFXG8HW.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";
 import * as React from "react";
@@ -178,12 +178,8 @@ function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defau
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, {
-					htmlFor: "mcpName",
-					children: "MCP name"
-				}),
+				/* @__PURE__ */ jsx(Field.Label, { children: "MCP name" }),
 				/* @__PURE__ */ jsx(Field.Control, {
-					id: "mcpName",
 					name: "name",
 					pattern: namePattern,
 					required: true,
@@ -200,12 +196,8 @@ function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defau
 				})
 			] }),
 			/* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, {
-					htmlFor: "mcpUrl",
-					children: "MCP URL"
-				}),
+				/* @__PURE__ */ jsx(Field.Label, { children: "MCP URL" }),
 				/* @__PURE__ */ jsx(Field.Control, {
-					id: "mcpUrl",
 					name: "url",
 					placeholder: "http://127.0.0.1:8787/mcp",
 					required: true,
@@ -221,24 +213,16 @@ function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defau
 					children: "MCP URL must use http or https."
 				})
 			] }),
-			redirectUrlField ? /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, {
-				htmlFor: "mcpRedirectUrl",
-				children: redirectUrlField.label
-			}), /* @__PURE__ */ jsx(Field.Control, {
-				id: "mcpRedirectUrl",
+			redirectUrlField ? /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, { children: redirectUrlField.label }), /* @__PURE__ */ jsx(Field.Control, {
 				name: "redirectUrl",
 				readOnly: true,
 				type: "url",
 				value: redirectUrl
 			})] }) : null,
 			credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, {
-					htmlFor: `mcp-${authField.name}`,
-					children: authField.label
-				}),
+				/* @__PURE__ */ jsx(Field.Label, { children: authField.label }),
 				/* @__PURE__ */ jsx(Field.Control, {
 					autoComplete: "off",
-					id: `mcp-${authField.name}`,
 					name: authField.name,
 					placeholder: authField.placeholder,
 					required: authField.required,