@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/components/AgentChat.js

@@ -1,22 +1,24 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as RefreshIcon, D as PencilIcon, k as PlusIcon } from "../icons-Ba9THQKz.js";
+import { F as PlusIcon, H as SteerIcon, I as QueueIcon, K as TrashIcon, L as RefreshIcon, N as PencilIcon } from "../icons-CpfUer49.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 { d as MessageContent, f as MessageResponse, i as MessageAttachment, n as MessageAction, r as MessageActions, t as Message } from "../Message-BkMdE3bS.js";
+import { AgentChatMessageEditor } from "./AgentChatMessageEditor.js";
 import { Marker, MarkerContent } from "./Marker.js";
-import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { Menu } from "./Menu.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, 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 { getToolDisplayName, isToolPartFailed, isToolPartWorking } from "./ThinkChatToolParts.js";
+import { t as CopyButton } from "../copy-button-Dejn5heL.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";
 import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think/react";
-import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+import { isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
 const EMPTY_PENDING_APPROVALS = [];
 const EMPTY_SKIPPED_APPROVAL_IDS = [];
@@ -24,12 +26,9 @@ function createApprovalSessionState(thinkStub) {
 	return {
 		thinkStub,
 		skippedApprovalIds: EMPTY_SKIPPED_APPROVAL_IDS,
-		permissionMode: "ask"
+		permissionMode: "bypass"
 	};
 }
-function isCurrentApprovalSession(state, thinkStub) {
-	return state.thinkStub === thinkStub;
-}
 function AgentChatAttachButton() {
 	const attachments = usePromptInputAttachments();
 	return /* @__PURE__ */ jsx(PromptInputButton, {
@@ -46,9 +45,22 @@ function AgentChatAddMenu({ children }) {
 		sideOffset: 12,
 		collisionPadding: 8,
 		className: "agent-chat__add-menu",
-		children: [/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}), children]
+		children: [/* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
+			className: "agent-chat__add-menu-group-label",
+			children: "Add"
+		}), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
 	})] });
 }
+function AgentChatSubmitAction({ status, onStop, allowSubmitWhileBusy, disabled, hasDraft }) {
+	const attachments = usePromptInputAttachments();
+	return /* @__PURE__ */ jsx(PromptInputSubmit, {
+		status,
+		onStop,
+		allowSubmitWhileBusy,
+		hasContent: hasDraft || attachments.files.length > 0,
+		disabled
+	});
+}
 /**
 * Per-message row-size compaction marker from `AIChatAgent` persistence.
 *
@@ -75,14 +87,6 @@ function getPartKey(part, partIndex) {
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
 	return `${part.type}-${partIndex}`;
 }
-function isToolPartWorking(part) {
-	const state = getToolPartState(part);
-	return state === "loading" || state === "streaming" || state === "waiting-approval";
-}
-function isToolPartFailed(part) {
-	const state = getToolPartState(part);
-	return state === "error" || state === "denied";
-}
 /**
 * AI SDK exports concrete source part types but no public source-part guard.
 * Keep these local guards as exact discriminant checks, matching
@@ -97,14 +101,6 @@ function isSourceDocumentPart(part) {
 	return part?.type === "source-document";
 }
 /**
-* AI SDK emits `step-start` as a native `StepStartUIPart`, but currently exports
-* only the type, not an `isStepStartUIPart` helper. Keep this as the exact
-* upstream discriminant so step separators do not become a local protocol.
-*/
-function isStepStartPart(part) {
-	return part.type === "step-start";
-}
-/**
 * Session compaction overlay marker from Agents Sessions.
 *
 * Agents exports `isCompactionMessage` from `agents/sessions`; it checks the canonical `compaction_`
@@ -150,93 +146,6 @@ function getEditableUserText(message) {
 	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;
@@ -265,7 +174,7 @@ function getSourceRun(parts, start) {
 	return sources;
 }
 function describeToolPart(part) {
-	const name = getToolName(part);
+	const name = getToolDisplayName(part);
 	const verb = isToolPartFailed(part) ? `${name} failed` : isToolPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
 	const detail = summarizeToolInput(getToolInput(part));
 	return detail ? `${verb} · ${detail}` : verb;
@@ -282,7 +191,7 @@ function renderToolActivity(part) {
 	return /* @__PURE__ */ jsxs(Activity, {
 		isStreaming: isToolPartWorking(part),
 		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
-			label: getToolName(part),
+			label: getToolDisplayName(part),
 			text: formatToolValue(getToolInput(part))
 		}), output ? /* @__PURE__ */ jsx(ActivityPanel, {
 			label: "output",
@@ -292,18 +201,20 @@ function renderToolActivity(part) {
 		}) : null] })]
 	});
 }
-function renderDefaultPart(part) {
+function renderDefaultPart(message, part, partIndex, isLastMessage, status) {
 	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
 	if (isFileUIPart(part)) return /* @__PURE__ */ jsx(MessageAttachment, { part });
-	if (isReasoningUIPart(part) && part.text) return /* @__PURE__ */ jsxs(Reasoning, {
-		isStreaming: part.state === "streaming",
-		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
-	});
+	if (isReasoningUIPart(part)) {
+		if (partIndex !== message.parts.findIndex(isReasoningUIPart)) return null;
+		const reasoningText = message.parts.filter(isReasoningUIPart).map((reasoningPart) => reasoningPart.text).join("\n\n");
+		if (!reasoningText) return null;
+		const lastPart = message.parts.at(-1);
+		return /* @__PURE__ */ jsxs(Reasoning, {
+			isStreaming: isLastMessage && status === "streaming" && lastPart !== void 0 && isReasoningUIPart(lastPart) && lastPart.state === "streaming",
+			children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: reasoningText })]
+		});
+	}
 	if (isToolUIPart(part)) return renderToolActivity(part);
-	if (isStepStartPart(part)) return /* @__PURE__ */ jsx(Marker, {
-		variant: "separator",
-		children: /* @__PURE__ */ jsx(MarkerContent, { children: "Next step" })
-	});
 	return null;
 }
 /**
@@ -311,8 +222,16 @@ 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, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMessage, onRemoveQueuedMessage, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, allowSubmitWhileBusy = false, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
+	const [composerDraft, setComposerDraft] = React.useState("");
+	const [composerReferences, setComposerReferences] = React.useState([]);
+	const addComposerReference = React.useCallback((reference) => {
+		setComposerReferences((current) => current.some((item) => item.id === reference.id && item.trigger === reference.trigger) ? current : [...current, reference]);
+	}, []);
+	const removeComposerReference = React.useCallback((reference) => {
+		setComposerReferences((current) => current.filter((item) => item.id !== reference.id || item.trigger !== reference.trigger));
+	}, []);
 	const copyAnnouncementTimer = React.useRef(null);
 	const announceCopyStatus = React.useCallback((message) => {
 		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
@@ -326,23 +245,62 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
 	}, []);
 	const handleSubmit = React.useCallback((message) => {
-		onSubmit?.(message);
-	}, [onSubmit]);
+		const submission = onSubmit?.({
+			...message,
+			...composerReferences.length ? { references: composerReferences } : {}
+		});
+		setComposerDraft("");
+		setComposerReferences([]);
+		return submission;
+	}, [composerReferences, onSubmit]);
+	const selectComposerCommand = React.useCallback((command, trigger) => {
+		const reference = {
+			id: command.id,
+			value: command.value,
+			label: command.label,
+			icon: command.icon,
+			trigger
+		};
+		const nextReferences = composerReferences.some((item) => item.id === reference.id && item.trigger === reference.trigger) ? composerReferences : [...composerReferences, reference];
+		addComposerReference(reference);
+		const catalog = trigger === "@" ? mentionCommands : slashCommands;
+		if (catalog?.onSelect) catalog.onSelect(command, {
+			value: composerDraft,
+			references: nextReferences,
+			setValue: setComposerDraft,
+			clear: () => setComposerDraft(""),
+			addReference: addComposerReference,
+			removeReference: removeComposerReference
+		});
+		else setComposerDraft("");
+	}, [
+		addComposerReference,
+		composerDraft,
+		composerReferences,
+		mentionCommands,
+		removeComposerReference,
+		slashCommands
+	]);
 	const [approvalSession, setApprovalSession] = React.useState(() => createApprovalSessionState(thinkStub));
-	const approvalSessionIsCurrent = isCurrentApprovalSession(approvalSession, thinkStub);
+	const approvalSessionIsCurrent = approvalSession.thinkStub === thinkStub;
 	const skippedApprovalIds = approvalSessionIsCurrent ? approvalSession.skippedApprovalIds : EMPTY_SKIPPED_APPROVAL_IDS;
-	const permissionMode = approvalSessionIsCurrent ? approvalSession.permissionMode : "ask";
+	const localPermissionMode = approvalSessionIsCurrent ? approvalSession.permissionMode : "bypass";
+	const permissionMode = permissionModeControl?.value ?? localPermissionMode;
 	const updateApprovalSession = React.useCallback((update) => {
-		setApprovalSession((previous) => update(isCurrentApprovalSession(previous, thinkStub) ? previous : createApprovalSessionState(thinkStub)));
+		setApprovalSession((previous) => update(previous.thinkStub === thinkStub ? previous : createApprovalSessionState(thinkStub)));
 	}, [thinkStub]);
 	const setPermissionMode = React.useCallback((next) => {
+		if (permissionModeControl) {
+			permissionModeControl.onChange(next);
+			return;
+		}
 		updateApprovalSession((current) => ({
 			...current,
 			permissionMode: next
 		}));
-	}, [updateApprovalSession]);
+	}, [permissionModeControl, updateApprovalSession]);
 	React.useLayoutEffect(() => {
-		setApprovalSession((previous) => isCurrentApprovalSession(previous, thinkStub) ? previous : createApprovalSessionState(thinkStub));
+		setApprovalSession((previous) => previous.thinkStub === thinkStub ? previous : createApprovalSessionState(thinkStub));
 	}, [thinkStub]);
 	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter(({ part }) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
@@ -355,14 +313,14 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		ids: /* @__PURE__ */ new Set()
 	});
 	React.useLayoutEffect(() => {
-		if (isCurrentApprovalSession(autoApprovedIds.current, thinkStub)) return;
+		if (autoApprovedIds.current.thinkStub === thinkStub) return;
 		autoApprovedIds.current = {
 			thinkStub,
 			ids: /* @__PURE__ */ new Set()
 		};
 	}, [thinkStub]);
 	React.useEffect(() => {
-		if (permissionMode !== "bypass") return;
+		if (permissionModeControl || 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;
@@ -378,22 +336,25 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		}
 	}, [
 		permissionMode,
+		permissionModeControl,
 		messages,
 		durableApprovals,
 		onApprovalResponse,
 		thinkStub,
 		onExecutionSettled
 	]);
-	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
+	const pendingApproval = !permissionModeControl && permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
-	const newestAssistantIndex = messages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage$1(message));
+	const queuedMessageIds = new Set(queuedMessages.map((message) => message.id));
+	const transcriptMessages = queuedMessageIds.size ? messages.filter((message) => !queuedMessageIds.has(message.id)) : messages;
+	const newestAssistantIndex = transcriptMessages.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 lastUserIndex = onEditAndResend && !disabled && status !== "streaming" && status !== "submitted" ? transcriptMessages.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) => {
+	const assistantResponseNumbers = transcriptMessages.map((message) => {
 		if (message.role !== "assistant" || isCompactionMessage$1(message)) return 0;
 		assistantResponseCount += 1;
 		return assistantResponseCount;
@@ -431,13 +392,13 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 					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, {
+						children: [transcriptMessages.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, {
+						}) : null, transcriptMessages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
 							messageId: message.id,
 							scrollAnchor: message.role === "user",
 							children: isCompactionMessage$1(message) ? /* @__PURE__ */ jsx(Marker, {
@@ -448,7 +409,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 								children: editingMessageId === message.id && onEditAndResend ? /* @__PURE__ */ jsx(AgentChatMessageEditor, {
 									message,
 									originalText: getEditableUserText(message) ?? "",
-									onEditAndResend,
+									onSubmit: onEditAndResend,
 									onCancel: () => {
 										restoreEditFocus.current = true;
 										setEditingMessageId(void 0);
@@ -459,7 +420,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 									}
 								}, message.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
 									message.parts.map((part, partIndex) => {
-										const defaultRender = () => renderDefaultPart(part);
+										const defaultRender = () => renderDefaultPart(message, part, partIndex, messageIndex === transcriptMessages.length - 1, status);
 										const custom = renderPart?.({
 											message,
 											part,
@@ -517,63 +478,126 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 			showComposer ? /* @__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,
-							voiceInput ? /* @__PURE__ */ jsx(PromptInputDictation, {
-								voice: voiceInput,
-								beforeStart: beforeVoiceStart,
-								disabled
-							}) : null
-						] }), /* @__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
-							})]
-						})] })
-					] })
-				})]
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "agent-chat__notice",
+						role: "status",
+						"aria-atomic": "true",
+						children: notice
+					}),
+					queuedMessages.length ? /* @__PURE__ */ jsx("section", {
+						className: "agent-chat__queued",
+						"aria-label": "Queued messages",
+						children: /* @__PURE__ */ jsx("ul", {
+							className: "agent-chat__queued-list",
+							children: queuedMessages.map((message) => {
+								const messageText = getMessageText(message) || "Queued message";
+								return /* @__PURE__ */ jsxs("li", {
+									className: "agent-chat__queued-message",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "agent-chat__queued-indicator",
+											"aria-hidden": "true",
+											children: /* @__PURE__ */ jsx(QueueIcon, {})
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "agent-chat__queued-text",
+											children: messageText
+										}),
+										onSteerQueuedMessage ? /* @__PURE__ */ jsxs("button", {
+											type: "button",
+											className: "agent-chat__queued-action",
+											"aria-label": `Steer queued message: ${messageText}`,
+											onClick: () => onSteerQueuedMessage(message),
+											children: [/* @__PURE__ */ jsx(SteerIcon, {}), "Steer"]
+										}) : null,
+										onRemoveQueuedMessage ? /* @__PURE__ */ jsx("button", {
+											type: "button",
+											className: "agent-chat__queued-action agent-chat__queued-remove",
+											"aria-label": `Remove queued message: ${messageText}`,
+											onClick: () => onRemoveQueuedMessage(message),
+											children: /* @__PURE__ */ jsx(TrashIcon, {})
+										}) : null
+									]
+								}, message.id);
+							})
+						})
+					}) : 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,
+							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__ */ jsxs(PromptInputBody, { children: [/* @__PURE__ */ jsx(PromptInputReferences, {
+								references: composerReferences,
+								onRemove: removeComposerReference
+							}), slashCommands || mentionCommands ? /* @__PURE__ */ jsx(PromptInputCommandComposer, {
+								"aria-label": "Message",
+								placeholder: composerReferences.length ? "" : placeholder,
+								disabled,
+								commands: slashCommands?.items ?? [],
+								mentionCommands: mentionCommands?.items,
+								value: composerDraft,
+								onValueChange: setComposerDraft,
+								onCommandSelect: selectComposerCommand
+							}) : /* @__PURE__ */ jsx(PromptInputTextarea, {
+								"aria-label": "Message",
+								placeholder,
+								disabled,
+								value: composerDraft,
+								onChange: (event) => setComposerDraft(event.currentTarget.value)
+							})] }),
+							/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
+								/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
+								contextSelector ? /* @__PURE__ */ jsx(PromptInputContextSelector, { ...contextSelector }) : null,
+								approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
+									value: permissionMode,
+									onValueChange: setPermissionMode
+								}) : null,
+								composerTools
+							] }), /* @__PURE__ */ jsxs("div", {
+								className: "prompt-input__footer-end",
+								children: [
+									composerEndTools,
+									voiceInput ? /* @__PURE__ */ jsx(PromptInputDictation, {
+										voice: voiceInput,
+										beforeStart: beforeVoiceStart,
+										disabled
+									}) : null,
+									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(AgentChatSubmitAction, {
+										status,
+										onStop,
+										allowSubmitWhileBusy: Boolean(allowSubmitWhileBusy),
+										disabled,
+										hasDraft: Boolean(composerDraft.trim() || composerReferences.length)
+									})
+								]
+							})] })
+						] })
+					})
+				]
 			}) : null
 		]
 	});

package/dist/components/AgentChatMessageEditor.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { UIMessage } from "ai";
+
+//#region src/components/AgentChatMessageEditor.d.ts
+interface AgentChatMessageEditorProps<MessageT extends UIMessage = UIMessage> {
+  /** Whole upstream message being edited, including app metadata and typed data parts. */
+  message: MessageT;
+  originalText: string;
+  onCancel: () => void;
+  onSubmit: (input: {
+    message: MessageT;
+    text: string;
+  }) => void | Promise<void>;
+  onSuccess?: () => void;
+}
+/**
+ * Edit-and-resend form for a chat message. It composes the shared Base UI
+ * Form/Field wrappers and Textarea recipe so validation, labels, focus, and
+ * disabled states stay owned by the design-system primitives.
+ */
+declare function AgentChatMessageEditor<MessageT extends UIMessage = UIMessage>({
+  message,
+  originalText,
+  onCancel,
+  onSubmit,
+  onSuccess
+}: AgentChatMessageEditorProps<MessageT>): React.JSX.Element;
+//#endregion
+export { AgentChatMessageEditor, AgentChatMessageEditorProps };