@mcp-b/react-components 0.48.0 → 0.49.0

package/dist/components/ai-sdk/Plan.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { _ as DotIcon, d as CheckIcon, i as ArrowRightIcon } from "../../icons-CeGfXO21.js";
+import { _ as DotIcon, d as CheckIcon, i as ArrowRightIcon } from "../../icons-cuEtsgj9.js";
 import { Popover } from "../foundations/Popover.js";
 import { t as ProgressRing } from "../../progress-ring-Cgii90dC.js";
 import * as React from "react";

package/dist/components/ai-sdk/PromptInput.d.ts

@@ -1,2 +1,2 @@
-import { $ as PromptInputSubmit, A as PromptInputContextItem, B as PromptInputHoverCard, C as PromptInputButtonProps, Ct as usePromptInputController, D as PromptInputCommandDefinition, E as PromptInputCommandComposerProps, F as PromptInputDictationProps, G as PromptInputHoverCardTriggerProps, H as PromptInputHoverCardContentProps, I as PromptInputFooter, J as PromptInputPermissionSelectorProps, K as PromptInputMessage, L as PromptInputFooterProps, M as PromptInputContextSelectorProps, N as PromptInputControllerProps, O as PromptInputCommandTrigger, P as PromptInputDictation, Q as PromptInputReference, R as PromptInputHeader, S as PromptInputButton, St as usePromptInputAttachments, T as PromptInputCommandComposer, U as PromptInputHoverCardProps, V as PromptInputHoverCardContent, W as PromptInputHoverCardTrigger, X as PromptInputProvider, Y as PromptInputProps, Z as PromptInputProviderProps, _ as PromptInputAttachmentProps, _t as PromptInputTrayProps, a as PromptInputActionAddAttachmentsProps, at as PromptInputTabItemProps, b as PromptInputBody, bt as TooltipSide, c as PromptInputActionMenu, ct as PromptInputTabProps, d as PromptInputActionMenuItem, dt as PromptInputTextarea, et as PromptInputSubmitProps, f as PromptInputActionMenuItemProps, ft as PromptInputTextareaProps, g as PromptInputAttachment, gt as PromptInputTray, h as PromptInputActionMenuTriggerProps, ht as PromptInputTooltipConfig, i as PromptInputActionAddAttachments, it as PromptInputTabItem, j as PromptInputContextSelector, k as PromptInputContextAction, l as PromptInputActionMenuContent, lt as PromptInputTabsList, m as PromptInputActionMenuTrigger, mt as PromptInputToolsProps, n as PermissionMode, nt as PromptInputTabBody, o as PromptInputActionAddScreenshot, ot as PromptInputTabLabel, p as PromptInputActionMenuProps, pt as PromptInputTools, q as PromptInputPermissionSelector, r as PromptInput, rt as PromptInputTabBodyProps, s as PromptInputActionAddScreenshotProps, st as PromptInputTabLabelProps, t as AttachmentsContext, tt as PromptInputTab, u as PromptInputActionMenuContentProps, ut as PromptInputTabsListProps, v as PromptInputAttachments, vt as PromptInputVoiceInput, w as PromptInputButtonTooltip, wt as useProviderAttachments, x as PromptInputBodyProps, xt as composerLinksToReferences, y as PromptInputAttachmentsProps, yt as TextInputContext, z as PromptInputHeaderProps } from "../../PromptInput-DtJHyp0S.js";
-export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, composerLinksToReferences, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+import { $ as PromptInputProviderProps, A as PromptInputContextItem, B as PromptInputHeader, C as PromptInputButtonProps, Ct as composerLinksToReferences, D as PromptInputCommandDefinition, E as PromptInputCommandComposerProps, F as PromptInputDictationProps, G as PromptInputHoverCardProps, H as PromptInputHoverCard, I as PromptInputFooter, J as PromptInputMessage, K as PromptInputHoverCardTrigger, L as PromptInputFooterEnd, M as PromptInputContextSelectorProps, N as PromptInputControllerProps, O as PromptInputCommandTrigger, P as PromptInputDictation, Q as PromptInputProvider, R as PromptInputFooterEndProps, S as PromptInputButton, St as TooltipSide, T as PromptInputCommandComposer, Tt as usePromptInputController, U as PromptInputHoverCardContent, V as PromptInputHeaderProps, W as PromptInputHoverCardContentProps, X as PromptInputPermissionSelectorProps, Y as PromptInputPermissionSelector, Z as PromptInputProps, _ as PromptInputAttachmentProps, _t as PromptInputTooltipConfig, a as PromptInputActionAddAttachmentsProps, at as PromptInputTabBodyProps, b as PromptInputBody, bt as PromptInputVoiceInput, c as PromptInputActionMenu, ct as PromptInputTabLabel, d as PromptInputActionMenuItem, dt as PromptInputTabsList, et as PromptInputReference, f as PromptInputActionMenuItemProps, ft as PromptInputTabsListProps, g as PromptInputAttachment, gt as PromptInputToolsProps, h as PromptInputActionMenuTriggerProps, ht as PromptInputTools, i as PromptInputActionAddAttachments, it as PromptInputTabBody, j as PromptInputContextSelector, k as PromptInputContextAction, l as PromptInputActionMenuContent, lt as PromptInputTabLabelProps, m as PromptInputActionMenuTrigger, mt as PromptInputTextareaProps, n as PermissionMode, nt as PromptInputSubmitProps, o as PromptInputActionAddScreenshot, ot as PromptInputTabItem, p as PromptInputActionMenuProps, pt as PromptInputTextarea, q as PromptInputHoverCardTriggerProps, r as PromptInput, rt as PromptInputTab, s as PromptInputActionAddScreenshotProps, st as PromptInputTabItemProps, t as AttachmentsContext, tt as PromptInputSubmit, u as PromptInputActionMenuContentProps, ut as PromptInputTabProps, v as PromptInputAttachments, vt as PromptInputTray, w as PromptInputButtonTooltip, wt as usePromptInputAttachments, x as PromptInputBodyProps, xt as TextInputContext, y as PromptInputAttachmentsProps, yt as PromptInputTrayProps, z as PromptInputFooterProps } from "../../PromptInput-C4Mofitz.js";
+export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterEnd, PromptInputFooterEndProps, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, composerLinksToReferences, usePromptInputAttachments, usePromptInputController };

package/dist/components/ai-sdk/PromptInput.js

@@ -1,102 +1,171 @@
 import { composerTriggerMatch, parseComposerLinks, replaceComposerTrigger } from "../../utils/composer-link.js";
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PlusIcon, C as FolderIcon, I as PaperclipIcon, J as StopIcon, K as SpinnerIcon, M as MicrophoneIcon, P as MonitorIcon, S as FileIcon, a as ArrowUpIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, nt as XIcon, q as SquareIcon, tt as WrenchIcon } from "../../icons-CeGfXO21.js";
+import { B as PlusIcon, C as FolderIcon, I as PaperclipIcon, J as StopIcon, K as SpinnerIcon, M as MicrophoneIcon, P as MonitorIcon, S as FileIcon, a as ArrowUpIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, nt as XIcon, q as SquareIcon, tt as WrenchIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
+import { a as formatErrorMessage, i as formatClock, n as clamp } from "../../format-COCyV98Z.js";
+import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
+import { ComposerLink } from "./ComposerLink.js";
 import { Autocomplete } from "../foundations/Autocomplete.js";
 import { Kbd } from "../foundations/Kbd.js";
 import { Menu } from "../foundations/Menu.js";
 import { PreviewCard } from "../foundations/PreviewCard.js";
 import { Tabs } from "../foundations/Tabs.js";
-import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
-import { a as formatErrorMessage, i as formatClock, n as clamp } from "../../format-COCyV98Z.js";
-import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
-import { ComposerLink } from "./ComposerLink.js";
-import { PromptInputComposerEditor, readComposerDom, writeComposerDom } from "./PromptInputComposerEditor.js";
+import { PromptInputComposerEditor } from "./PromptInputComposerEditor.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/PromptInput.tsx
 const PromptInputController = React.createContext(null);
-const LocalAttachmentsContext = React.createContext(null);
-function useAttachmentStore() {
+const PromptInputSubmissionContext = React.createContext(null);
+function usePromptInputController() {
+	const ctx = React.useContext(PromptInputController);
+	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
+	return ctx;
+}
+function usePromptInputAttachments() {
+	return usePromptInputController().attachments;
+}
+/**
+* Owns one draft and file picker across composer layouts. Keep this boundary
+* mounted when switching between a welcome view and a conversation, and compose
+* PromptInput forms, starters, attachments, and dictation beneath it.
+*/
+function PromptInputProvider({ initialInput = "", value, onValueChange, accept, multiple, maxFiles, maxFileSize, onError, children }) {
+	const [uncontrolledInput, setUncontrolledInput] = React.useState(initialInput);
 	const [files, setFiles] = React.useState([]);
 	const filesRef = React.useRef(files);
-	React.useEffect(() => {
-		filesRef.current = files;
-	}, [files]);
-	React.useEffect(() => () => {
-		revokeFileUrls(filesRef.current);
-	}, []);
+	const fileInputRef = React.useRef(null);
+	const text = value ?? uncontrolledInput;
+	const textRevision = React.useRef(0);
+	const serializing = React.useRef(false);
+	React.useLayoutEffect(() => {
+		textRevision.current += 1;
+	}, [text]);
+	const setInput = React.useCallback((next) => {
+		textRevision.current += 1;
+		if (value === void 0) setUncontrolledInput(next);
+		onValueChange?.(next);
+	}, [onValueChange, value]);
+	React.useEffect(() => () => revokeFileUrls(filesRef.current), []);
 	const add = React.useCallback((incomingFiles) => {
-		const incoming = Array.from(incomingFiles).map(fileToPart);
-		setFiles((current) => [...current, ...incoming]);
-	}, []);
+		const incoming = Array.from(incomingFiles);
+		const patterns = accept?.toLowerCase().split(",").map((part) => part.trim()).filter(Boolean);
+		const accepted = incoming.filter((file) => !patterns?.length || patterns.some((pattern) => pattern.startsWith(".") ? file.name.toLowerCase().endsWith(pattern) : pattern.endsWith("/*") ? file.type.toLowerCase().startsWith(pattern.slice(0, -1)) : file.type.toLowerCase() === pattern));
+		if (incoming.length && accepted.length === 0) {
+			onError?.({
+				code: "accept",
+				message: "No files match the accepted types."
+			});
+			return;
+		}
+		const sized = accepted.filter((file) => maxFileSize === void 0 || file.size <= maxFileSize);
+		if (accepted.length && sized.length === 0) {
+			onError?.({
+				code: "max_file_size",
+				message: "All files exceed the maximum size."
+			});
+			return;
+		}
+		const capacity = maxFiles === void 0 ? sized.length : Math.max(0, maxFiles - filesRef.current.length);
+		const capped = sized.slice(0, capacity);
+		if (sized.length > capacity) onError?.({
+			code: "max_files",
+			message: "Too many files. Some were not added."
+		});
+		if (!capped.length) return;
+		const next = [...filesRef.current, ...capped.map(fileToPart)];
+		filesRef.current = next;
+		setFiles(next);
+	}, [
+		accept,
+		maxFileSize,
+		maxFiles,
+		onError
+	]);
 	const remove = React.useCallback((id) => {
 		const found = filesRef.current.find((file) => file.id === id);
 		if (found) revokeFileObjectUrl(found);
-		setFiles((current) => current.filter((file) => file.id !== id));
+		const next = filesRef.current.filter((file) => file.id !== id);
+		filesRef.current = next;
+		setFiles(next);
 	}, []);
 	const clear = React.useCallback(() => {
 		revokeFileUrls(filesRef.current);
+		filesRef.current = [];
 		setFiles([]);
 	}, []);
-	return React.useMemo(() => ({
+	const submitDraft = React.useCallback(async (onSubmit, event) => {
+		if (serializing.current) return;
+		serializing.current = true;
+		const revision = textRevision.current;
+		const snapshot = filesRef.current;
+		let submission;
+		try {
+			const submittedFiles = await Promise.all(snapshot.map(resolveSubmittedFile));
+			submission = onSubmit?.({
+				text: text.trim(),
+				files: submittedFiles
+			}, event);
+			if (textRevision.current === revision) setInput("");
+			const submittedIds = new Set(snapshot.map((file) => file.id));
+			const remaining = filesRef.current.filter((file) => !submittedIds.has(file.id));
+			revokeFileUrls(filesRef.current.filter((file) => submittedIds.has(file.id)));
+			filesRef.current = remaining;
+			setFiles(remaining);
+		} catch {
+			return;
+		} finally {
+			serializing.current = false;
+		}
+		try {
+			await submission;
+		} catch {}
+	}, [text, setInput]);
+	const attachments = React.useMemo(() => ({
 		add,
+		remove,
 		clear,
 		files,
-		remove
+		fileInputRef,
+		openFileDialog: () => fileInputRef.current?.click()
 	}), [
 		add,
+		remove,
 		clear,
-		files,
-		remove
+		files
 	]);
-}
-function usePromptInputController() {
-	const ctx = React.useContext(PromptInputController);
-	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
-	return ctx;
-}
-function useOptionalPromptInputController() {
-	return React.useContext(PromptInputController);
-}
-function useProviderAttachments() {
-	const controller = useOptionalPromptInputController();
-	if (!controller) throw new Error("Wrap your component inside <PromptInputProvider> to use useProviderAttachments().");
-	return controller.attachments;
-}
-function usePromptInputAttachments() {
-	const controller = useOptionalPromptInputController();
-	const context = React.useContext(LocalAttachmentsContext) ?? controller?.attachments;
-	if (!context) throw new Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider.");
-	return context;
-}
-function PromptInputProvider({ initialInput = "", children }) {
-	const [textInput, setTextInput] = React.useState(initialInput);
-	const attachmentStore = useAttachmentStore();
-	const fileInputRef = React.useRef(null);
-	const openRef = React.useRef(() => {});
-	const attachments = React.useMemo(() => ({
-		...attachmentStore,
-		fileInputRef,
-		openFileDialog: () => openRef.current()
-	}), [attachmentStore]);
 	const controller = React.useMemo(() => ({
-		__registerFileInput: (ref, open) => {
-			fileInputRef.current = ref.current;
-			openRef.current = open;
-		},
 		attachments,
 		textInput: {
-			value: textInput,
-			setInput: setTextInput,
-			clear: () => setTextInput("")
+			value: text,
+			setInput,
+			clear: () => setInput("")
 		}
-	}), [attachments, textInput]);
+	}), [
+		attachments,
+		text,
+		setInput
+	]);
 	return /* @__PURE__ */ jsx(PromptInputController.Provider, {
 		value: controller,
-		children
+		children: /* @__PURE__ */ jsxs(PromptInputSubmissionContext.Provider, {
+			value: submitDraft,
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: fileInputRef,
+				accept,
+				"aria-label": "Upload files",
+				className: "prompt-input__file-input",
+				multiple,
+				onChange: (event) => {
+					if (event.currentTarget.files?.length) add(event.currentTarget.files);
+					event.currentTarget.value = "";
+				},
+				tabIndex: -1,
+				type: "file"
+			}), children]
+		})
 	});
 }
 /**
@@ -115,6 +184,7 @@ function PromptInputProvider({ initialInput = "", children }) {
 *
 * @example
 * ```tsx
+* <PromptInputProvider>
 * <PromptInput onSubmit={({ text, files }) => sendMessage({ text, files })}>
 *   <PromptInputBody>
 *     <PromptInputTextarea placeholder="Ask Sigvelo..." />
@@ -126,83 +196,17 @@ function PromptInputProvider({ initialInput = "", children }) {
 *     <PromptInputSubmit status="ready" />
 *   </PromptInputFooter>
 * </PromptInput>
+* </PromptInputProvider>
 * ```
 *
 * @see {@link https://elements.ai-sdk.dev/components/prompt-input | AI Elements Prompt Input}
 */
-function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ref, ...props }) {
-	const controller = useOptionalPromptInputController();
+function PromptInput({ className, globalDrop, onSubmit, children, ref, ...props }) {
+	const controller = usePromptInputController();
+	const submitDraft = React.useContext(PromptInputSubmissionContext);
+	if (!submitDraft) throw new Error("PromptInput requires PromptInputProvider.");
 	const formRef = React.useRef(null);
-	const inputRef = React.useRef(null);
-	const { add: addLocalFiles, clear: clearLocalFiles, files: localFiles, remove: removeLocalFile } = useAttachmentStore();
-	const files = controller?.attachments.files ?? localFiles;
-	const filesRef = React.useRef(files);
-	React.useEffect(() => {
-		filesRef.current = files;
-	}, [files]);
-	React.useImperativeHandle(ref, () => formRef.current, []);
-	const matchesAccept = React.useCallback((file) => {
-		if (!accept?.trim()) return true;
-		return accept.split(",").map((pattern) => pattern.trim()).filter(Boolean).some((pattern) => pattern.endsWith("/*") ? file.type.startsWith(pattern.slice(0, -1)) : file.type === pattern);
-	}, [accept]);
-	const add = React.useCallback((fileList) => {
-		const incoming = Array.from(fileList);
-		const accepted = incoming.filter(matchesAccept);
-		if (incoming.length && accepted.length === 0) {
-			onError?.({
-				code: "accept",
-				message: "No files match the accepted types."
-			});
-			return;
-		}
-		const sized = accepted.filter((file) => !maxFileSize || file.size <= maxFileSize);
-		if (accepted.length && sized.length === 0) {
-			onError?.({
-				code: "max_file_size",
-				message: "All files exceed the maximum size."
-			});
-			return;
-		}
-		const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - filesRef.current.length) : void 0;
-		const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
-		if (typeof capacity === "number" && sized.length > capacity) onError?.({
-			code: "max_files",
-			message: "Too many files. Some were not added."
-		});
-		if (!capped.length) return;
-		if (controller) controller.attachments.add(capped);
-		else addLocalFiles(capped);
-	}, [
-		addLocalFiles,
-		controller,
-		matchesAccept,
-		maxFileSize,
-		maxFiles,
-		onError
-	]);
-	const addDroppedFiles = React.useEffectEvent(add);
-	const remove = React.useCallback((attachmentId) => {
-		if (controller) {
-			controller.attachments.remove(attachmentId);
-			return;
-		}
-		removeLocalFile(attachmentId);
-	}, [controller, removeLocalFile]);
-	const clearAttachments = React.useCallback(() => {
-		if (controller) {
-			controller.attachments.clear();
-			return;
-		}
-		clearLocalFiles();
-	}, [clearLocalFiles, controller]);
-	const openFileDialog = React.useCallback(() => inputRef.current?.click(), []);
-	React.useEffect(() => {
-		if (!controller) return;
-		controller.__registerFileInput(inputRef, openFileDialog);
-	}, [controller, openFileDialog]);
-	React.useEffect(() => {
-		if (syncHiddenInput && inputRef.current && files.length === 0) inputRef.current.value = "";
-	}, [files.length, syncHiddenInput]);
+	const addDroppedFiles = React.useEffectEvent(controller.attachments.add);
 	React.useEffect(() => {
 		const target = globalDrop ? document : formRef.current;
 		if (!target) return;
@@ -222,69 +226,16 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 			target.removeEventListener("drop", onDrop);
 		};
 	}, [globalDrop]);
-	const attachmentsCtx = React.useMemo(() => ({
-		add,
-		clear: clearAttachments,
-		fileInputRef: inputRef,
-		files,
-		openFileDialog,
-		remove
-	}), [
-		add,
-		clearAttachments,
-		files,
-		openFileDialog,
-		remove
-	]);
-	const handleSubmit = React.useCallback(async (event) => {
+	const handleSubmit = React.useCallback((event) => {
 		event.preventDefault();
-		const field = event.currentTarget.querySelector("[data-prompt-input-textarea=\"true\"]");
-		const fieldText = field instanceof HTMLTextAreaElement ? field.value : field?.isContentEditable ? readComposerDom(field) : "";
-		const text = (controller?.textInput.value ?? fieldText).trim();
-		const submittedFiles = await Promise.all(files.map(resolveSubmittedFile));
-		try {
-			const submission = onSubmit?.({
-				text,
-				files: submittedFiles
-			}, event);
-			if (!controller && field instanceof HTMLTextAreaElement) {
-				field.value = "";
-				field.dispatchEvent(new Event("input", { bubbles: true }));
-			} else if (!controller && field?.isContentEditable) {
-				field.replaceChildren();
-				field.dispatchEvent(new Event("input", { bubbles: true }));
-			}
-			controller?.textInput.clear();
-			clearAttachments();
-			await submission;
-		} catch {}
-	}, [
-		clearAttachments,
-		controller,
-		files,
-		onSubmit
-	]);
-	return /* @__PURE__ */ jsxs(LocalAttachmentsContext.Provider, {
-		value: attachmentsCtx,
-		children: [/* @__PURE__ */ jsx("input", {
-			ref: inputRef,
-			accept,
-			"aria-label": "Upload files",
-			className: "prompt-input__file-input",
-			multiple,
-			onChange: (event) => {
-				if (event.currentTarget.files?.length) add(event.currentTarget.files);
-				event.currentTarget.value = "";
-			},
-			tabIndex: -1,
-			type: "file"
-		}), /* @__PURE__ */ jsx("form", {
-			ref: formRef,
-			className: cx("prompt-input", className),
-			onSubmit: handleSubmit,
-			...props,
-			children
-		})]
+		return submitDraft(onSubmit, event);
+	}, [submitDraft, onSubmit]);
+	return /* @__PURE__ */ jsx("form", {
+		ref: mergeRefs(formRef, ref),
+		className: cx("prompt-input", className),
+		onSubmit: handleSubmit,
+		...props,
+		children
 	});
 }
 function PromptInputHeader({ className, children, ref, ...props }) {
@@ -368,6 +319,14 @@ function PromptInputFooter({ className, children, ref, ...props }) {
 		children
 	});
 }
+/** Trailing composer controls; expands for dictation without displacing the input. */
+function PromptInputFooterEnd({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__footer-end", className),
+		...props
+	});
+}
 /** Supporting controls or queued work tucked behind a PromptInput edge. */
 function PromptInputTray({ side, className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -389,7 +348,7 @@ function PromptInputTools({ className, children, ref, ...props }) {
 const MIN_TEXTAREA_HEIGHT_PX = 24;
 const MAX_TEXTAREA_HEIGHT_PX = 240;
 function PromptInputTextarea({ className, placeholder = "How can I help?", rows = 1, minHeight = MIN_TEXTAREA_HEIGHT_PX, maxHeight = MAX_TEXTAREA_HEIGHT_PX, onChange, onCompositionEnd, onCompositionStart, onKeyDown, onInput, onPaste, ref, ...props }) {
-	const controller = useOptionalPromptInputController();
+	const controller = usePromptInputController();
 	const attachments = usePromptInputAttachments();
 	const innerRef = React.useRef(null);
 	const isComposingRef = React.useRef(false);
@@ -404,19 +363,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 	}, [maxHeight, minHeight]);
 	React.useLayoutEffect(() => {
 		resize();
-	}, [
-		resize,
-		props.value,
-		props.defaultValue,
-		controller?.textInput.value
-	]);
-	const controlledProps = controller ? {
-		value: controller.textInput.value,
-		onChange: (event) => {
-			controller.textInput.setInput(event.currentTarget.value);
-			onChange?.(event);
-		}
-	} : { onChange };
+	}, [resize, controller.textInput.value]);
 	return /* @__PURE__ */ jsx("textarea", {
 		ref: innerRef,
 		"data-prompt-input-textarea": "true",
@@ -453,11 +400,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 		onPaste: (event) => {
 			onPaste?.(event);
 			if (event.defaultPrevented) return;
-			const files = Array.from(event.clipboardData.items).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => Boolean(file));
-			if (files.length) {
-				event.preventDefault();
-				attachments.add(files);
-			}
+			if (event.clipboardData.files.length) attachments.add(event.clipboardData.files);
 		},
 		style: {
 			minHeight,
@@ -465,7 +408,11 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 			...props.style
 		},
 		...props,
-		...controlledProps
+		value: controller.textInput.value,
+		onChange: (event) => {
+			controller.textInput.setInput(event.currentTarget.value);
+			onChange?.(event);
+		}
 	});
 }
 function PromptInputButton({ className, tooltip, variant = "ghost", color = "neutral", size, iconOnly, children, "aria-label": ariaLabel, ref, ...props }) {
@@ -507,7 +454,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 */
 const DICTATION_METER_GAIN = 12;
 function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ...props }) {
-	const controller = useOptionalPromptInputController();
+	const controller = usePromptInputController();
 	const attachments = usePromptInputAttachments();
 	const buttonRef = React.useRef(null);
 	const committedTranscriptRef = React.useRef("");
@@ -527,16 +474,7 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 		const addition = transcript.startsWith(previous) ? transcript.slice(previous.length).trim() : transcript.trim();
 		committedTranscriptRef.current = transcript;
 		if (!addition) return;
-		if (controller) {
-			controller.textInput.setInput(appendDictationTranscript(controller.textInput.value, addition));
-			voice.clear();
-			return;
-		}
-		const field = buttonRef.current?.form?.querySelector("[data-prompt-input-textarea=\"true\"]");
-		if (!field) return;
-		if (field instanceof HTMLTextAreaElement) Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set?.call(field, appendDictationTranscript(field.value, addition));
-		else if (field.isContentEditable) writeComposerDom(field, appendDictationTranscript(readComposerDom(field), addition));
-		field.dispatchEvent(new Event("input", { bubbles: true }));
+		controller.textInput.setInput(appendDictationTranscript(controller.textInput.value, addition));
 		voice.clear();
 	}, [
 		controller,
@@ -701,7 +639,7 @@ function PromptInputRecordingWaveform({ active, level }) {
 			const barCount = Math.max(1, Math.floor(rect.width / step));
 			if (active && time - lastUpdate >= 50) {
 				smoothedLevel += (levelRef.current - smoothedLevel) * .45;
-				historyRef.current.push(Math.max(.08, Math.min(1, smoothedLevel)));
+				historyRef.current.push(clamp(smoothedLevel, .08, 1));
 				if (historyRef.current.length > barCount) historyRef.current.shift();
 				lastUpdate = time;
 			}
@@ -746,6 +684,7 @@ function PromptInputActionMenuTrigger({ className, children, ...props }) {
 		unstyled: true,
 		render: /* @__PURE__ */ jsx(PromptInputButton, {
 			className: cx("prompt-input__action-menu-trigger", className),
+			"aria-label": children == null ? "Add context" : void 0,
 			...props,
 			children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
 		})
@@ -820,7 +759,7 @@ const PERMISSION_MODES = [{
 /**
 * 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).
+* the application that owns the approvals. Shared chat parts never grant bypass.
 */
 function PromptInputPermissionSelector({ value, onValueChange, question = "How should agent actions be approved?" }) {
 	const selected = PERMISSION_MODES.find((mode) => mode.value === value) ?? PERMISSION_MODES[0];
@@ -1021,10 +960,12 @@ function composerLinksToReferences(text) {
 	}));
 }
 /**
-* Controlled composer field with slash-command and mention discovery.
+* Shared-draft composer field with slash-command and mention discovery.
 * Selection inserts a special href into the draft — not a chip button.
 */
-function PromptInputCommandComposer({ commands, mentionCommands, value, onValueChange, onCommandSelect, emptyMessage = "No commands found.", mentionEmptyMessage = "No MCP servers found.", onKeyDown, ref, placeholder, disabled, className, minHeight, maxHeight, "aria-label": ariaLabel }) {
+function PromptInputCommandComposer({ commands, mentionCommands, onCommandSelect, emptyMessage = "No commands found.", mentionEmptyMessage = "No MCP servers found.", onKeyDown, ref, placeholder, disabled, className, minHeight, maxHeight, "aria-label": ariaLabel }) {
+	const { attachments, textInput } = usePromptInputController();
+	const { value, setInput: onValueChange } = textInput;
 	const inputRef = React.useRef(null);
 	const highlightedCommandRef = React.useRef(void 0);
 	const [dismissedValue, setDismissedValue] = React.useState(null);
@@ -1090,6 +1031,9 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 				event.preventDefault();
 				selectCommand(command);
 			},
+			onPaste: (event) => {
+				if (event.clipboardData.files.length) attachments.add(event.clipboardData.files);
+			},
 			placeholder,
 			disabled,
 			className,
@@ -1309,4 +1253,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, PromptInputTray, composerLinksToReferences, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputFooterEnd, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, PromptInputTray, composerLinksToReferences, usePromptInputAttachments, usePromptInputController };

package/dist/components/ai-sdk/PromptInputComposerEditor.js

@@ -113,6 +113,22 @@ function placeCaretAtEnd(element) {
 	selection.removeAllRanges();
 	selection.addRange(range);
 }
+function insertPlainText(element, text) {
+	const selection = window.getSelection();
+	const range = selection?.rangeCount ? selection.getRangeAt(0) : void 0;
+	if (!selection || !range || !element.contains(range.commonAncestorContainer)) {
+		element.append(document.createTextNode(text));
+		placeCaretAtEnd(element);
+		return;
+	}
+	range.deleteContents();
+	const node = document.createTextNode(text);
+	range.insertNode(node);
+	range.setStartAfter(node);
+	range.collapse(true);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
 function PromptInputComposerEditor({ className, placeholder = "How can I help?", minHeight = MIN_COMPOSER_HEIGHT_PX, maxHeight = MAX_COMPOSER_HEIGHT_PX, draft, onDraftChange, onKeyDown, onPaste, disabled, ref, ...props }) {
 	const innerRef = React.useRef(null);
 	const lastWritten = React.useRef(null);
@@ -148,6 +164,14 @@ function PromptInputComposerEditor({ className, placeholder = "How can I help?",
 		if (document.activeElement === el) placeCaretAtEnd(el);
 		resize();
 	}, [resize, draft]);
+	const syncDraft = () => {
+		const el = innerRef.current;
+		if (!el) return;
+		const next = readComposerDom(el);
+		lastWritten.current = next;
+		onDraftChange(next);
+		resize();
+	};
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		ref: mergeRefs(innerRef, ref),
@@ -175,14 +199,7 @@ function PromptInputComposerEditor({ className, placeholder = "How can I help?",
 			isComposingRef.current = false;
 			props.onCompositionEnd?.(event);
 		},
-		onInput: () => {
-			const el = innerRef.current;
-			if (!el) return;
-			const next = readComposerDom(el);
-			lastWritten.current = next;
-			onDraftChange(next);
-			resize();
-		},
+		onInput: syncDraft,
 		onKeyDown: (event) => {
 			onKeyDown?.(event);
 			if (event.defaultPrevented) return;
@@ -191,7 +208,13 @@ function PromptInputComposerEditor({ className, placeholder = "How can I help?",
 				event.currentTarget.closest("form")?.requestSubmit();
 			}
 		},
-		onPaste
+		onPaste: (event) => {
+			onPaste?.(event);
+			if (event.defaultPrevented) return;
+			event.preventDefault();
+			insertPlainText(event.currentTarget, event.clipboardData.getData("text/plain"));
+			syncDraft();
+		}
 	});
 }
 //#endregion