@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/PromptInput.js

@@ -0,0 +1,737 @@
+import { C as SpinnerIcon, E as WarningIcon, _ as ImageIcon, b as PlusIcon, i as ArrowUpIcon, w as SquareIcon, y as MonitorIcon } from "../icons-BsWc8g4E.js";
+import { Select, SelectContent, SelectItem, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from "./Select.js";
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator } from "./Combobox.js";
+import { MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRoot, MenuTrigger } from "./Menu.js";
+import { Tab, TabPanel, TabsList } from "./Tabs.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PromptInput.tsx
+const PromptInputContext = React.createContext(null);
+const PromptInputController = React.createContext(null);
+const ProviderAttachmentsContext = React.createContext(null);
+const LocalAttachmentsContext = React.createContext(null);
+const LocalReferencedSourcesContext = React.createContext(null);
+function usePromptInputContext(component) {
+	const ctx = React.useContext(PromptInputContext);
+	if (!ctx) throw new Error(`${component} must be used inside a <PromptInput>.`);
+	return ctx;
+}
+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 ctx = React.useContext(ProviderAttachmentsContext);
+	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use useProviderAttachments().");
+	return ctx;
+}
+function useOptionalProviderAttachments() {
+	return React.useContext(ProviderAttachmentsContext);
+}
+function usePromptInputAttachments() {
+	const provider = useOptionalProviderAttachments();
+	const context = React.useContext(LocalAttachmentsContext) ?? provider;
+	if (!context) throw new Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider.");
+	return context;
+}
+function usePromptInputReferencedSources() {
+	const ctx = React.useContext(LocalReferencedSourcesContext);
+	if (!ctx) throw new Error("usePromptInputReferencedSources must be used within a PromptInput.");
+	return ctx;
+}
+function PromptInputProvider({ initialInput = "", children }) {
+	const [textInput, setTextInput] = React.useState(initialInput);
+	const [attachmentFiles, setAttachmentFiles] = React.useState([]);
+	const fileInputRef = React.useRef(null);
+	const openRef = React.useRef(() => {});
+	const attachmentsRef = React.useRef(attachmentFiles);
+	attachmentsRef.current = attachmentFiles;
+	React.useEffect(() => () => {
+		revokeFileUrls(attachmentsRef.current);
+	}, []);
+	const add = React.useCallback((files) => {
+		const incoming = Array.from(files);
+		setAttachmentFiles((prev) => [...prev, ...incoming.map(fileToPart)]);
+	}, []);
+	const remove = React.useCallback((id) => {
+		setAttachmentFiles((prev) => {
+			const found = prev.find((file) => file.id === id);
+			if (found?.url) URL.revokeObjectURL(found.url);
+			return prev.filter((file) => file.id !== id);
+		});
+	}, []);
+	const clear = React.useCallback(() => {
+		setAttachmentFiles((prev) => {
+			revokeFileUrls(prev);
+			return [];
+		});
+	}, []);
+	const attachments = React.useMemo(() => ({
+		add,
+		clear,
+		fileInputRef,
+		files: attachmentFiles,
+		openFileDialog: () => openRef.current(),
+		remove
+	}), [
+		add,
+		attachmentFiles,
+		clear,
+		remove
+	]);
+	const controller = React.useMemo(() => ({
+		__registerFileInput: (ref, open) => {
+			fileInputRef.current = ref.current;
+			openRef.current = open;
+		},
+		attachments,
+		textInput: {
+			value: textInput,
+			setInput: setTextInput,
+			clear: () => setTextInput("")
+		}
+	}), [attachments, textInput]);
+	return /* @__PURE__ */ jsx(PromptInputController.Provider, {
+		value: controller,
+		children: /* @__PURE__ */ jsx(ProviderAttachmentsContext.Provider, {
+			value: attachments,
+			children
+		})
+	});
+}
+/**
+* Chat-style composer form. Wraps a textarea and footer controls, with
+* Enter-to-submit semantics, auto-resizing behavior, and optional attachments.
+* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+*
+* Use for assistant/chat submit forms. Do not use it as a generic textarea or
+* non-chat form. Sigvelo changes: uses shared Menu, Select, Combobox, Tabs,
+* Button, and Tooltip components; maps styles to CSS tokens; adds local
+* attachment and referenced-source helpers.
+*
+* The form handles Enter-to-submit while multiline editing remains in the
+* textarea. Attachment controls need accessible labels through their buttons
+* and menus. Add new shared tools here when multiple apps need them.
+*
+* @example
+* ```tsx
+* <PromptInput onSubmit={({ text, files }) => sendMessage(text, files)}>
+*   <PromptInputBody>
+*     <PromptInputTextarea placeholder="Ask Sigvelo..." />
+*   </PromptInputBody>
+*   <PromptInputFooter>
+*     <PromptInputTools>
+*       <PromptInputActionAddAttachments />
+*     </PromptInputTools>
+*     <PromptInputSubmit status="ready" />
+*   </PromptInputFooter>
+* </PromptInput>
+* ```
+*
+* @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, id, ref, ...props }) {
+	const generatedId = React.useId();
+	const formId = id ?? generatedId;
+	const controller = useOptionalPromptInputController();
+	const usingProvider = Boolean(controller);
+	const formRef = React.useRef(null);
+	const inputRef = React.useRef(null);
+	const [localFiles, setLocalFiles] = React.useState([]);
+	const [referencedSources, setReferencedSources] = React.useState([]);
+	const files = controller?.attachments.files ?? localFiles;
+	const filesRef = React.useRef(files);
+	filesRef.current = files;
+	React.useImperativeHandle(ref, () => formRef.current, []);
+	React.useEffect(() => () => {
+		if (!usingProvider) revokeFileUrls(filesRef.current);
+	}, [usingProvider]);
+	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 setLocalFiles((prev) => [...prev, ...capped.map(fileToPart)]);
+	}, [
+		controller,
+		matchesAccept,
+		maxFileSize,
+		maxFiles,
+		onError
+	]);
+	const remove = React.useCallback((attachmentId) => {
+		if (controller) {
+			controller.attachments.remove(attachmentId);
+			return;
+		}
+		setLocalFiles((prev) => {
+			const found = prev.find((file) => file.id === attachmentId);
+			if (found?.url) URL.revokeObjectURL(found.url);
+			return prev.filter((file) => file.id !== attachmentId);
+		});
+	}, [controller]);
+	const clearAttachments = React.useCallback(() => {
+		if (controller) {
+			controller.attachments.clear();
+			return;
+		}
+		setLocalFiles((prev) => {
+			revokeFileUrls(prev);
+			return [];
+		});
+	}, [controller]);
+	const clearReferencedSources = React.useCallback(() => setReferencedSources([]), []);
+	const clear = React.useCallback(() => {
+		clearAttachments();
+		clearReferencedSources();
+	}, [clearAttachments, clearReferencedSources]);
+	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]);
+	React.useEffect(() => {
+		const target = globalDrop ? document : formRef.current;
+		if (!target) return;
+		const onDragOver = (event) => {
+			const dragEvent = event;
+			if (dragEvent.dataTransfer?.types.includes("Files")) dragEvent.preventDefault();
+		};
+		const onDrop = (event) => {
+			const dragEvent = event;
+			if (dragEvent.dataTransfer?.types.includes("Files")) dragEvent.preventDefault();
+			if (dragEvent.dataTransfer?.files?.length) add(dragEvent.dataTransfer.files);
+		};
+		target.addEventListener("dragover", onDragOver);
+		target.addEventListener("drop", onDrop);
+		return () => {
+			target.removeEventListener("dragover", onDragOver);
+			target.removeEventListener("drop", onDrop);
+		};
+	}, [add, globalDrop]);
+	const attachmentsCtx = React.useMemo(() => ({
+		add,
+		clear: clearAttachments,
+		fileInputRef: inputRef,
+		files,
+		openFileDialog,
+		remove
+	}), [
+		add,
+		clearAttachments,
+		files,
+		openFileDialog,
+		remove
+	]);
+	const referencedSourcesCtx = React.useMemo(() => ({
+		add: (incoming) => {
+			const array = Array.isArray(incoming) ? incoming : [incoming];
+			setReferencedSources((prev) => [...prev, ...array.map((source) => ({
+				...source,
+				id: source.id ?? createId()
+			}))]);
+		},
+		clear: clearReferencedSources,
+		remove: (sourceId) => setReferencedSources((prev) => prev.filter((source) => source.id !== sourceId)),
+		sources: referencedSources
+	}), [clearReferencedSources, referencedSources]);
+	const submit = React.useCallback(() => {
+		formRef.current?.requestSubmit();
+	}, []);
+	const ctx = React.useMemo(() => ({
+		formId,
+		submit
+	}), [formId, submit]);
+	const handleSubmit = React.useCallback(async (event) => {
+		event.preventDefault();
+		const textarea = event.currentTarget.querySelector("textarea[data-prompt-input-textarea=\"true\"]");
+		const text = controller?.textInput.value ?? textarea?.value.trim() ?? "";
+		const submittedFiles = await Promise.all(files.map(resolveSubmittedFile));
+		try {
+			await onSubmit?.({
+				text,
+				files: submittedFiles
+			}, event);
+			if (!controller && textarea) {
+				textarea.value = "";
+				textarea.dispatchEvent(new Event("input", { bubbles: true }));
+			}
+			controller?.textInput.clear();
+			clear();
+		} catch {}
+	}, [
+		clear,
+		controller,
+		files,
+		onSubmit
+	]);
+	return /* @__PURE__ */ jsx(PromptInputContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, {
+			value: attachmentsCtx,
+			children: /* @__PURE__ */ jsxs(LocalReferencedSourcesContext.Provider, {
+				value: referencedSourcesCtx,
+				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,
+					id: formId,
+					className: cx("prompt-input", className),
+					onSubmit: handleSubmit,
+					...props,
+					children
+				})]
+			})
+		})
+	});
+}
+function PromptInputHeader({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__header", className),
+		...props,
+		children
+	});
+}
+function PromptInputBody({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__body", className),
+		...props,
+		children
+	});
+}
+function PromptInputFooter({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__footer", className),
+		...props,
+		children
+	});
+}
+function PromptInputTools({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__tools", className),
+		...props,
+		children
+	});
+}
+const MIN_TEXTAREA_HEIGHT_PX = 48;
+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 { submit } = usePromptInputContext("PromptInputTextarea");
+	const controller = useOptionalPromptInputController();
+	const attachments = usePromptInputAttachments();
+	const innerRef = React.useRef(null);
+	const [isComposing, setIsComposing] = React.useState(false);
+	React.useImperativeHandle(ref, () => innerRef.current, []);
+	const resize = React.useCallback(() => {
+		const el = innerRef.current;
+		if (!el) return;
+		el.style.height = "auto";
+		const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+		el.style.height = `${next}px`;
+		el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden";
+	}, [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 };
+	return /* @__PURE__ */ jsx("textarea", {
+		ref: innerRef,
+		"data-prompt-input-textarea": "true",
+		className: cx("prompt-input__textarea", className),
+		name: "message",
+		placeholder,
+		rows,
+		onCompositionEnd: (event) => {
+			setIsComposing(false);
+			onCompositionEnd?.(event);
+		},
+		onCompositionStart: (event) => {
+			setIsComposing(true);
+			onCompositionStart?.(event);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.key === "Enter" && !event.shiftKey && !isComposing && !event.nativeEvent.isComposing) {
+				event.preventDefault();
+				submit();
+			}
+			if (event.key === "Backspace" && event.currentTarget.value === "" && attachments.files.length > 0) {
+				event.preventDefault();
+				const last = attachments.files.at(-1);
+				if (last) attachments.remove(last.id);
+			}
+		},
+		onInput: (event) => {
+			onInput?.(event);
+			resize();
+		},
+		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);
+			}
+		},
+		style: {
+			minHeight,
+			maxHeight,
+			...props.style
+		},
+		...props,
+		...controlledProps
+	});
+}
+function PromptInputButton({ className, tooltip, variant = "ghost", color = "neutral", size, children, "aria-label": ariaLabel, ref, ...props }) {
+	const resolvedSize = size ?? (React.Children.count(children) > 1 ? "sm" : "icon");
+	const tooltipConfig = typeof tooltip === "string" ? { content: tooltip } : tooltip;
+	const fallbackLabel = ariaLabel ?? (typeof tooltipConfig?.content === "string" ? tooltipConfig.content : void 0);
+	const button = /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		color,
+		size: resolvedSize,
+		className: cx("prompt-input__button", className),
+		"aria-label": fallbackLabel,
+		...props,
+		children
+	});
+	if (!tooltipConfig) return button;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+		side: tooltipConfig.side,
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsxs(TooltipPopup, { children: [/* @__PURE__ */ jsx("span", {
+			className: "prompt-input__tooltip-content",
+			children: tooltipConfig.content
+		}), tooltipConfig.shortcut ? /* @__PURE__ */ jsx("kbd", {
+			className: "prompt-input__tooltip-shortcut",
+			children: tooltipConfig.shortcut
+		}) : null] })
+	}) })] });
+}
+function PromptInputActionMenu(props) {
+	return /* @__PURE__ */ jsx(MenuRoot, { ...props });
+}
+function PromptInputActionMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(PromptInputButton, {
+		className,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	}) });
+}
+function PromptInputActionMenuContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsx(MenuPopup, {
+		className: cx("prompt-input__action-menu", className),
+		...props,
+		children
+	}) }) });
+}
+function PromptInputActionMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(MenuItem, {
+		className: cx("prompt-input__action-menu-item", className),
+		...props
+	});
+}
+function PromptInputActionAddAttachments({ label = "Add photos or files", onClick, children, ...props }) {
+	const attachments = usePromptInputAttachments();
+	return /* @__PURE__ */ jsx(PromptInputActionMenuItem, {
+		...props,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) attachments.openFileDialog();
+		},
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ImageIcon, { className: "prompt-input__action-menu-icon" }), label] })
+	});
+}
+function PromptInputActionAddScreenshot({ label = "Take screenshot", onClick, children, ...props }) {
+	const attachments = usePromptInputAttachments();
+	return /* @__PURE__ */ jsx(PromptInputActionMenuItem, {
+		...props,
+		onClick: async (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			try {
+				const screenshot = await captureScreenshot();
+				if (screenshot) attachments.add([screenshot]);
+			} catch (error) {
+				if (error instanceof DOMException && (error.name === "NotAllowedError" || error.name === "AbortError")) return;
+				throw error;
+			}
+		},
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MonitorIcon, { className: "prompt-input__action-menu-icon" }), label] })
+	});
+}
+function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon", onClick, children, label, ref, ...props }) {
+	const isStopping = status === "submitted" || status === "streaming";
+	const resolvedLabel = label ?? defaultSubmitLabel(status);
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: isStopping ? "button" : "submit",
+		variant,
+		color,
+		size,
+		className: cx("prompt-input__submit", className),
+		"data-status": status,
+		"aria-label": resolvedLabel,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			if (isStopping) {
+				event.preventDefault();
+				onStop?.();
+			}
+		},
+		...props,
+		children: children ?? defaultSubmitIcon(status)
+	});
+}
+const PromptInputSelect = Select;
+function PromptInputSelectTrigger(props) {
+	return /* @__PURE__ */ jsx(SelectTrigger, { ...props });
+}
+function PromptInputSelectContent(props) {
+	return /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsx(SelectContent, { ...props }) }) });
+}
+const PromptInputSelectItem = SelectItem;
+const PromptInputSelectValue = SelectValue;
+const PromptInputHoverCardContext = React.createContext(null);
+function PromptInputHoverCard({ openDelay = 0, closeDelay = 0, className, children, ref, ...props }) {
+	const [open, setOpen] = React.useState(false);
+	const timer = React.useRef(void 0);
+	const clearTimer = React.useCallback(() => window.clearTimeout(timer.current), []);
+	const openNow = React.useCallback(() => {
+		clearTimer();
+		timer.current = window.setTimeout(() => setOpen(true), openDelay);
+	}, [clearTimer, openDelay]);
+	const closeLater = React.useCallback(() => {
+		clearTimer();
+		timer.current = window.setTimeout(() => setOpen(false), closeDelay);
+	}, [clearTimer, closeDelay]);
+	React.useEffect(() => clearTimer, [clearTimer]);
+	const value = React.useMemo(() => ({
+		open,
+		openNow,
+		closeLater
+	}), [
+		closeLater,
+		open,
+		openNow
+	]);
+	return /* @__PURE__ */ jsx(PromptInputHoverCardContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cx("prompt-input__hover-card", className),
+			...props,
+			children
+		})
+	});
+}
+function PromptInputHoverCardTrigger({ className, ref, ...props }) {
+	const ctx = React.useContext(PromptInputHoverCardContext);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cx("prompt-input__hover-card-trigger", className),
+		onFocus: ctx?.openNow,
+		onBlur: ctx?.closeLater,
+		onMouseEnter: ctx?.openNow,
+		onMouseLeave: ctx?.closeLater,
+		...props
+	});
+}
+function PromptInputHoverCardContent({ className, ref, ...props }) {
+	const ctx = React.useContext(PromptInputHoverCardContext);
+	if (!ctx?.open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__hover-card-content", className),
+		onMouseEnter: ctx.openNow,
+		onMouseLeave: ctx.closeLater,
+		...props
+	});
+}
+const PromptInputTabsList = TabsList;
+const PromptInputTab = Tab;
+const PromptInputTabBody = TabPanel;
+function PromptInputTabLabel({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		ref,
+		className: cx("prompt-input__tab-label", className),
+		...props
+	});
+}
+function PromptInputTabItem({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__tab-item", className),
+		...props
+	});
+}
+const PromptInputCommand = Combobox;
+const PromptInputCommandInput = ComboboxInput;
+function PromptInputCommandList({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(ComboboxList, {
+		ref,
+		className: cx("prompt-input__command-list", className),
+		...props
+	});
+}
+const PromptInputCommandEmpty = ComboboxEmpty;
+const PromptInputCommandGroup = ComboboxGroup;
+const PromptInputCommandItem = ComboboxItem;
+const PromptInputCommandSeparator = ComboboxSeparator;
+function defaultSubmitIcon(status) {
+	switch (status) {
+		case "submitted": return /* @__PURE__ */ jsx(SpinnerIcon, { className: "prompt-input__submit-spinner" });
+		case "streaming": return /* @__PURE__ */ jsx(SquareIcon, {});
+		case "error": return /* @__PURE__ */ jsx(WarningIcon, {});
+		default: return /* @__PURE__ */ jsx(ArrowUpIcon, {});
+	}
+}
+function defaultSubmitLabel(status) {
+	switch (status) {
+		case "submitted": return "Sending";
+		case "streaming": return "Stop response";
+		case "error": return "Retry";
+		default: return "Send message";
+	}
+}
+function fileToPart(file) {
+	return {
+		id: createId(),
+		type: "file",
+		filename: file.name,
+		mediaType: file.type,
+		url: URL.createObjectURL(file)
+	};
+}
+function revokeFileUrls(files) {
+	for (const file of files) if (file.url?.startsWith("blob:")) URL.revokeObjectURL(file.url);
+}
+async function resolveSubmittedFile(file) {
+	const { id: _id, ...part } = file;
+	if (!part.url?.startsWith("blob:")) return part;
+	const dataUrl = await blobUrlToDataUrl(part.url);
+	return {
+		...part,
+		url: dataUrl ?? part.url
+	};
+}
+async function blobUrlToDataUrl(url) {
+	try {
+		const blob = await (await fetch(url)).blob();
+		return await new Promise((resolve) => {
+			const reader = new FileReader();
+			reader.onloadend = () => resolve(typeof reader.result === "string" ? reader.result : null);
+			reader.onerror = () => resolve(null);
+			reader.readAsDataURL(blob);
+		});
+	} catch {
+		return null;
+	}
+}
+async function captureScreenshot() {
+	if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) return null;
+	let stream = null;
+	const video = document.createElement("video");
+	video.muted = true;
+	video.playsInline = true;
+	try {
+		stream = await navigator.mediaDevices.getDisplayMedia({
+			audio: false,
+			video: true
+		});
+		video.srcObject = stream;
+		await new Promise((resolve, reject) => {
+			video.onloadedmetadata = () => resolve();
+			video.onerror = () => reject(/* @__PURE__ */ new Error("Failed to load screen stream"));
+		});
+		await video.play();
+		const canvas = document.createElement("canvas");
+		canvas.width = video.videoWidth;
+		canvas.height = video.videoHeight;
+		const context = canvas.getContext("2d");
+		if (!context || !canvas.width || !canvas.height) return null;
+		context.drawImage(video, 0, 0, canvas.width, canvas.height);
+		const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+		if (!blob) return null;
+		return new File([blob], `screenshot-${(/* @__PURE__ */ new Date()).toISOString().replaceAll(/[:.]/g, "-")}.png`, {
+			type: "image/png",
+			lastModified: Date.now()
+		});
+	} catch {
+		return null;
+	} finally {
+		for (const track of stream?.getTracks() ?? []) track.stop();
+		video.pause();
+		video.srcObject = null;
+	}
+}
+function createId() {
+	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
+}
+//#endregion
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };