@signalflare-ai/ui 0.5.0

package/dist/ai-prompt-input-Bo1YuJly.js

@@ -0,0 +1,769 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { t as Button } from "./button-De0267YU.js";
+import { t as InputGroup } from "./input-Cn25I4o5.js";
+import { Fragment, createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, CaretDownIcon, FileIcon, FileTextIcon, ImageIcon, MicrophoneIcon, PaperclipIcon, PlusIcon, SpinnerGapIcon, SquareIcon, XIcon } from "@phosphor-icons/react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/ai-prompt-input/ai-prompt-input.tsx
+var SF_AI_PROMPT_INPUT_VARIANTS = { status: {
+	idle: {
+		classes: "",
+		description: "Ready to accept input"
+	},
+	submitted: {
+		classes: "",
+		description: "Waiting for response (shows spinner)"
+	},
+	streaming: {
+		classes: "",
+		description: "Streaming response (shows stop)"
+	},
+	error: {
+		classes: "",
+		description: "Error state (shows X)"
+	}
+} };
+var SF_AI_PROMPT_INPUT_DEFAULT_VARIANTS = { status: "idle" };
+var PromptInputContext = createContext(null);
+var ProviderAttachmentsContext = createContext(null);
+var usePromptInputController = () => {
+	const ctx = useContext(PromptInputContext);
+	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
+	return ctx;
+};
+var useOptionalPromptInputController = () => useContext(PromptInputContext);
+var useProviderAttachments = () => {
+	const ctx = useContext(ProviderAttachmentsContext);
+	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use useProviderAttachments().");
+	return ctx;
+};
+var useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext);
+/**
+* Optional global provider that lifts PromptInput state outside of PromptInput.
+* If you don't use it, PromptInput stays fully self-managed.
+*
+* @example
+* ```tsx
+* <PromptInputProvider>
+*   <PromptInput onSubmit={handleSubmit}>...</PromptInput>
+* </PromptInputProvider>
+* ```
+*/
+function PromptInputProvider({ initialInput = "", children }) {
+	const [textInput, setTextInput] = useState(initialInput);
+	const clearInput = useCallback(() => setTextInput(""), []);
+	const [attachmentItems, setAttachmentItems] = useState([]);
+	const fileInputRef = useRef(null);
+	const openRef = useRef(() => {});
+	const add = useCallback((files) => {
+		const incoming = Array.from(files);
+		if (incoming.length === 0) return;
+		setAttachmentItems((prev) => prev.concat(incoming.map((file) => ({
+			id: `${Date.now()}-${Math.random()}`,
+			url: URL.createObjectURL(file),
+			mediaType: file.type,
+			filename: file.name
+		}))));
+	}, []);
+	const remove = useCallback((id) => {
+		setAttachmentItems((prev) => {
+			const found = prev.find((f) => f.id === id);
+			if (found?.url) URL.revokeObjectURL(found.url);
+			return prev.filter((f) => f.id !== id);
+		});
+	}, []);
+	const clear = useCallback(() => {
+		setAttachmentItems((prev) => {
+			for (const f of prev) if (f.url) URL.revokeObjectURL(f.url);
+			return [];
+		});
+	}, []);
+	const openFileDialog = useCallback(() => {
+		openRef.current?.();
+	}, []);
+	const attachments = useMemo(() => ({
+		files: attachmentItems,
+		add,
+		remove,
+		clear,
+		openFileDialog,
+		fileInputRef
+	}), [
+		attachmentItems,
+		add,
+		remove,
+		clear,
+		openFileDialog
+	]);
+	const __registerFileInput = useCallback((ref, open) => {
+		fileInputRef.current = ref.current;
+		openRef.current = open;
+	}, []);
+	const controller = useMemo(() => ({
+		textInput: {
+			value: textInput,
+			setInput: setTextInput,
+			clear: clearInput
+		},
+		attachments,
+		__registerFileInput
+	}), [
+		textInput,
+		clearInput,
+		attachments,
+		__registerFileInput
+	]);
+	return /* @__PURE__ */ jsx(PromptInputContext.Provider, {
+		value: controller,
+		children: /* @__PURE__ */ jsx(ProviderAttachmentsContext.Provider, {
+			value: attachments,
+			children
+		})
+	});
+}
+var LocalAttachmentsContext = createContext(null);
+var usePromptInputAttachments = () => {
+	const provider = useOptionalProviderAttachments();
+	const local = useContext(LocalAttachmentsContext);
+	const context = provider ?? local;
+	if (!context) throw new Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider");
+	return context;
+};
+/** Convert a blob URL to a base64 data URL for serialization. */
+async function convertBlobToDataUrl(url) {
+	const blob = await (await fetch(url)).blob();
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.addEventListener("loadend", () => resolve(reader.result));
+		reader.addEventListener("error", () => reject(/* @__PURE__ */ new Error("FileReader error")));
+		reader.readAsDataURL(blob);
+	});
+}
+function makeAttachmentId() {
+	return `${Date.now()}-${Math.random()}`;
+}
+/**
+* Prompt input form. Can be self-managed or controlled via `PromptInputProvider`.
+*
+* @example
+* ```tsx
+* <PromptInput onSubmit={({ text, files }) => send(text, files)}>
+*   <PromptInputAttachments>{(f) => <PromptInputAttachment data={f} />}</PromptInputAttachments>
+*   <PromptInputTextarea placeholder="Ask anything…" />
+*   <PromptInputToolbar>
+*     <PromptInputTools>
+*       <PromptInputAttachButton />
+*     </PromptInputTools>
+*     <PromptInputSubmit />
+*   </PromptInputToolbar>
+* </PromptInput>
+* ```
+*/
+var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileSize, onError, onSubmit, children, backLayer, backLayerTitle = "Context", backLayerOpen, onBackLayerOpenChange, autoOpenBackLayerWhen, ...props }) => {
+	const hasBackLayer = backLayer !== void 0;
+	const controller = useOptionalPromptInputController();
+	const usingProvider = !!controller;
+	const inputRef = useRef(null);
+	const anchorRef = useRef(null);
+	const formRef = useRef(null);
+	useEffect(() => {
+		const root = anchorRef.current?.closest("form");
+		if (root instanceof HTMLFormElement) formRef.current = root;
+	}, []);
+	useEffect(() => {
+		if (autoOpenBackLayerWhen) onBackLayerOpenChange?.(true);
+	}, [autoOpenBackLayerWhen, onBackLayerOpenChange]);
+	const [items, setItems] = useState([]);
+	const files = usingProvider ? controller.attachments.files : items;
+	const openFileDialogLocal = useCallback(() => {
+		inputRef.current?.click();
+	}, []);
+	const matchesAccept = useCallback((f) => {
+		if (!accept || accept.trim() === "") return true;
+		if (accept.includes("image/*")) return f.type.startsWith("image/");
+		return true;
+	}, [accept]);
+	const addLocal = useCallback((fileList) => {
+		const incoming = Array.from(fileList);
+		const accepted = incoming.filter((f) => matchesAccept(f));
+		if (incoming.length && accepted.length === 0) {
+			onError?.({
+				code: "accept",
+				message: "No files match the accepted types."
+			});
+			return;
+		}
+		const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+		const sized = accepted.filter(withinSize);
+		if (accepted.length > 0 && sized.length === 0) {
+			onError?.({
+				code: "max_file_size",
+				message: "All files exceed the maximum size."
+			});
+			return;
+		}
+		setItems((prev) => {
+			const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.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."
+			});
+			const next = capped.map((file) => ({
+				id: makeAttachmentId(),
+				url: URL.createObjectURL(file),
+				mediaType: file.type,
+				filename: file.name
+			}));
+			return prev.concat(next);
+		});
+	}, [
+		matchesAccept,
+		maxFiles,
+		maxFileSize,
+		onError
+	]);
+	const add = usingProvider ? (f) => controller.attachments.add(f) : addLocal;
+	const remove = usingProvider ? (id) => controller.attachments.remove(id) : (id) => setItems((prev) => {
+		const found = prev.find((f) => f.id === id);
+		if (found?.url) URL.revokeObjectURL(found.url);
+		return prev.filter((f) => f.id !== id);
+	});
+	const clear = usingProvider ? () => controller.attachments.clear() : () => setItems((prev) => {
+		for (const f of prev) if (f.url) URL.revokeObjectURL(f.url);
+		return [];
+	});
+	const openFileDialog = usingProvider ? () => controller.attachments.openFileDialog() : openFileDialogLocal;
+	useEffect(() => {
+		if (!usingProvider) return;
+		controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+	}, [usingProvider, controller]);
+	useEffect(() => {
+		const form = formRef.current;
+		if (!form) return;
+		const onDragOver = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+		};
+		const onDrop = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+			if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+		};
+		form.addEventListener("dragover", onDragOver);
+		form.addEventListener("drop", onDrop);
+		return () => {
+			form.removeEventListener("dragover", onDragOver);
+			form.removeEventListener("drop", onDrop);
+		};
+	}, [add]);
+	useEffect(() => {
+		if (!globalDrop) return;
+		const onDragOver = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+		};
+		const onDrop = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+			if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+		};
+		document.addEventListener("dragover", onDragOver);
+		document.addEventListener("drop", onDrop);
+		return () => {
+			document.removeEventListener("dragover", onDragOver);
+			document.removeEventListener("drop", onDrop);
+		};
+	}, [add, globalDrop]);
+	useEffect(() => {
+		return () => {
+			if (!usingProvider) {
+				for (const f of files) if (f.url) URL.revokeObjectURL(f.url);
+			}
+		};
+	}, [usingProvider, files]);
+	const handleFileInputChange = (event) => {
+		if (event.currentTarget.files) add(event.currentTarget.files);
+	};
+	const ctx = useMemo(() => ({
+		files,
+		add,
+		remove,
+		clear,
+		openFileDialog,
+		fileInputRef: inputRef
+	}), [
+		files,
+		add,
+		remove,
+		clear,
+		openFileDialog
+	]);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		const form = event.currentTarget;
+		const text = usingProvider ? controller.textInput.value : new FormData(form).get("message") || "";
+		if (!usingProvider) form.reset();
+		const doSubmit = async () => {
+			const convertedFiles = await Promise.all(files.map(async (item) => {
+				if (item.url.startsWith("blob:")) return {
+					...item,
+					url: await convertBlobToDataUrl(item.url)
+				};
+				return item;
+			}));
+			try {
+				await onSubmit({
+					text,
+					files: convertedFiles
+				}, event);
+				clear();
+				if (usingProvider) controller.textInput.clear();
+			} catch {}
+		};
+		doSubmit().catch(() => {});
+	};
+	const isBackLayerOpen = backLayerOpen ?? false;
+	const inputShell = hasBackLayer ? /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col overflow-hidden rounded-xl bg-sf-elevated ring ring-sf-line/50",
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				"aria-expanded": isBackLayerOpen,
+				"aria-label": isBackLayerOpen ? "Collapse context" : "Expand context",
+				className: "flex w-full items-center justify-between gap-2 px-3 py-2 text-left",
+				onClick: () => onBackLayerOpenChange?.(!isBackLayerOpen),
+				type: "button",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-sf-subtle uppercase tracking-wide select-none",
+					children: backLayerTitle
+				}), /* @__PURE__ */ jsx(CaretDownIcon, { className: cn("size-3.5 text-sf-subtle transition-transform duration-200", isBackLayerOpen && "rotate-180") })]
+			}),
+			/* @__PURE__ */ jsx(PromptInputBackLayerPanel, {
+				open: isBackLayerOpen,
+				children: backLayer
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col overflow-hidden rounded-xl bg-sf-base ring ring-sf-line/50 focus-within:ring-sf-ring",
+				children
+			})
+		]
+	}) : /* @__PURE__ */ jsx(InputGroup, { children });
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "hidden",
+			ref: anchorRef
+		}),
+		/* @__PURE__ */ jsx("input", {
+			accept,
+			"aria-label": "Upload files",
+			className: "hidden",
+			multiple,
+			onChange: handleFileInputChange,
+			ref: inputRef,
+			type: "file"
+		}),
+		/* @__PURE__ */ jsx("form", {
+			className: cn("w-full", className),
+			onSubmit: handleSubmit,
+			...props,
+			children: inputShell
+		})
+	] });
+	return usingProvider ? inner : /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, {
+		value: ctx,
+		children: inner
+	});
+};
+var PromptInputBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("contents", className),
+	...props
+});
+function PromptInputBackLayerPanel({ open, children }) {
+	const isOpen = open ?? false;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": !isOpen,
+		className: "grid",
+		style: {
+			gridTemplateRows: isOpen ? "1fr" : "0fr",
+			opacity: isOpen ? 1 : 0,
+			transition: "grid-template-rows 200ms ease-out, opacity 200ms ease-out"
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 overflow-hidden",
+			children
+		})
+	});
+}
+/**
+* Container for back-layer content (HITL approvals, task lists, agent status,
+* etc.). Pass instances of this as the `backLayer` prop on `PromptInput`.
+*
+* @example
+* ```tsx
+* <PromptInput
+*   onSubmit={handleSubmit}
+*   backLayer={<PromptInputBackLayer>...</PromptInputBackLayer>}
+*   backLayerOpen={open}
+*   onBackLayerOpenChange={setOpen}
+* >
+*   <PromptInputTextarea />
+*   <PromptInputToolbar>
+*     <PromptInputTools />
+*     <PromptInputSubmit />
+*   </PromptInputToolbar>
+* </PromptInput>
+* ```
+*/
+function PromptInputBackLayer({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2 px-3 py-2.5 text-sm text-sf-default", className),
+		children
+	});
+}
+var handleTextareaKeyDown = (e) => {
+	if (e.key === "Enter") {
+		if (e.nativeEvent.isComposing) return;
+		if (e.shiftKey) return;
+		e.preventDefault();
+		e.currentTarget.form?.requestSubmit();
+	}
+};
+/**
+* Auto-resizing textarea for the prompt. Submits on Enter (Shift+Enter for newline).
+* Pastes files into attachments.
+*/
+var PromptInputTextarea = ({ onChange, className, placeholder = "What would you like to know?", ...props }) => {
+	const controller = useOptionalPromptInputController();
+	const attachments = usePromptInputAttachments();
+	const handlePaste = (event) => {
+		const items = event.clipboardData?.items;
+		if (!items) return;
+		const pastedFiles = [];
+		for (const item of items) if (item.kind === "file") {
+			const file = item.getAsFile();
+			if (file) pastedFiles.push(file);
+		}
+		if (pastedFiles.length > 0) {
+			event.preventDefault();
+			attachments.add(pastedFiles);
+		}
+	};
+	const controlledProps = controller ? {
+		value: controller.textInput.value,
+		onChange: (e) => {
+			controller.textInput.setInput(e.currentTarget.value);
+			onChange?.(e);
+		}
+	} : { onChange };
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cn("field-sizing-content max-h-48 min-h-16 w-full resize-none border-0 bg-transparent px-3 py-2 text-sm text-sf-default outline-none placeholder:text-sf-inactive", className),
+		name: "message",
+		onKeyDown: handleTextareaKeyDown,
+		onPaste: handlePaste,
+		placeholder,
+		rows: 1,
+		...props,
+		...controlledProps
+	});
+};
+var PromptInputToolbar = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center justify-between gap-1 px-2 py-1.5", className),
+	...props
+});
+var PromptInputTools = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center gap-1", className),
+	...props
+});
+var PromptInputButton = ({ variant = "ghost", size = "sm", className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	className: cn("text-sf-subtle hover:text-sf-default", className),
+	size,
+	type: "button",
+	variant,
+	...props
+});
+/**
+* Submit button. Icon changes based on `status`:
+* - `idle` → send arrow
+* - `submitted` → spinner
+* - `streaming` → stop square
+* - `error` → X
+*/
+var PromptInputSubmit = ({ className, variant = "primary", size = "sm", status = "idle", children, ...props }) => {
+	let Icon;
+	if (status === "submitted") Icon = /* @__PURE__ */ jsx(SpinnerGapIcon, { className: "size-4 animate-spin" });
+	else if (status === "streaming") Icon = /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" });
+	else if (status === "error") Icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4" });
+	else Icon = /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4" });
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Submit",
+		className: cn(className),
+		size,
+		type: "submit",
+		variant,
+		...props,
+		children: children ?? Icon
+	});
+};
+var DropdownMenu = Menu;
+var PromptInputActionMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu.Root, { ...props });
+var PromptInputActionMenuTrigger = ({ className, children, "aria-label": ariaLabel = "More actions", ...props }) => /* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+	"aria-label": ariaLabel,
+	className: cn("text-sf-subtle hover:text-sf-default", className),
+	size: "sm",
+	type: "button",
+	variant: "ghost",
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+}) });
+var PromptInputActionMenuContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(DropdownMenu.Positioner, {
+	className: "z-50",
+	side: "top",
+	align: "start",
+	...props,
+	children: /* @__PURE__ */ jsx(DropdownMenu.Popup, {
+		className: cn("min-w-[160px] rounded-lg bg-sf-elevated p-1 shadow-md", "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity duration-100", className),
+		children
+	})
+});
+var PromptInputActionMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx(DropdownMenu.Item, {
+	className: cn("flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm text-sf-default outline-none", "data-highlighted:bg-sf-tint", className),
+	...props
+});
+var PromptInputActionAddAttachments = ({ label = "Add photos or files", ...props }) => {
+	const attachments = usePromptInputAttachments();
+	const handleSelect = useCallback(() => {
+		attachments.openFileDialog();
+	}, [attachments]);
+	return /* @__PURE__ */ jsxs(PromptInputActionMenuItem, {
+		...props,
+		onSelect: handleSelect,
+		children: [/* @__PURE__ */ jsx(ImageIcon, { className: "size-4" }), label]
+	});
+};
+var PromptInputModeSelector = ({ modes, value, onChange }) => {
+	if (modes.length === 0) return null;
+	const displayName = modes.find((m) => m.modeId === value)?.modeName ?? value ?? modes[0]?.modeName;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-0.5 rounded-md bg-sf-tint p-0.5"),
+		role: "group",
+		"aria-label": "Select mode",
+		children: modes.map((mode) => {
+			const isSelected = mode.modeId === value || mode.modeName === displayName;
+			return /* @__PURE__ */ jsx("button", {
+				"aria-pressed": isSelected,
+				className: cn("cursor-pointer rounded-[4px] px-2 py-0.5 text-[11px] font-medium transition-colors", isSelected ? "bg-sf-elevated text-sf-default shadow-sm" : "text-sf-subtle hover:text-sf-default"),
+				onClick: () => onChange?.(mode.modeId),
+				type: "button",
+				children: mode.modeName
+			}, mode.modeId);
+		})
+	});
+};
+var IMAGE_EXTS = new Set([
+	"jpg",
+	"jpeg",
+	"png",
+	"gif",
+	"webp",
+	"svg"
+]);
+function getFileIcon(filename) {
+	const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+	if (IMAGE_EXTS.has(ext)) return /* @__PURE__ */ jsx(ImageIcon, { className: "size-3.5" });
+	if ([
+		"pdf",
+		"doc",
+		"docx",
+		"txt",
+		"md"
+	].includes(ext)) return /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" });
+	return /* @__PURE__ */ jsx(FileIcon, { className: "size-3.5" });
+}
+/**
+* Single attachment chip for images or files. Includes a remove button.
+*/
+function PromptInputAttachment({ data, className, ...props }) {
+	const attachments = usePromptInputAttachments();
+	const isImage = data.mediaType?.startsWith("image/") && data.url;
+	const handleRemove = useCallback(() => {
+		attachments.remove(data.id);
+	}, [attachments, data.id]);
+	if (isImage) return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative size-14 overflow-hidden rounded-md", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("img", {
+			alt: data.filename || "attachment",
+			className: "size-full object-cover",
+			src: data.url
+		}), /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Remove attachment",
+			className: "absolute top-1 right-1 size-5 rounded-full bg-sf-overlay/80 p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100",
+			onClick: handleRemove,
+			size: "sm",
+			type: "button",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+		})]
+	});
+	const ext = data.filename.split(".").pop()?.toUpperCase() ?? "FILE";
+	const name = data.filename.replace(/\.[^/.]+$/, "");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative inline-flex h-8 items-center gap-2 rounded-md bg-sf-tint/50 px-2 text-sm", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex size-5 shrink-0 items-center justify-center text-sf-subtle",
+				children: getFileIcon(data.filename)
+			}),
+			/* @__PURE__ */ jsx(Tooltip, {
+				content: data.filename,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "max-w-[160px] truncate font-medium text-sf-default",
+					children: name || "File"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "rounded bg-sf-tint px-1 py-0.5 font-semibold text-sf-subtle text-[10px] uppercase",
+				children: ext
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Remove attachment",
+				className: "ml-0.5 size-4 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100",
+				onClick: handleRemove,
+				size: "sm",
+				type: "button",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+			})
+		]
+	});
+}
+/**
+* Renders all attachments using a render prop. Hidden when no files.
+* Animates height as files are added/removed.
+*/
+function PromptInputAttachments({ className, children, ...props }) {
+	const attachments = usePromptInputAttachments();
+	const [height, setHeight] = useState(0);
+	const contentRef = useRef(null);
+	useLayoutEffect(() => {
+		const el = contentRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver(() => {
+			setHeight(el.getBoundingClientRect().height);
+		});
+		ro.observe(el);
+		setHeight(el.getBoundingClientRect().height);
+		return () => ro.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		const el = contentRef.current;
+		if (el) setHeight(el.getBoundingClientRect().height);
+	}, [attachments.files.length]);
+	if (attachments.files.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": "polite",
+		className: cn("overflow-hidden px-2 transition-[height] duration-200 ease-out", className),
+		style: { height: attachments.files.length ? height : 0 },
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-2 py-1",
+			ref: contentRef,
+			children: attachments.files.map((file) => /* @__PURE__ */ jsx(Fragment, { children: children(file) }, file.id))
+		})
+	});
+}
+/**
+* Voice input button. Uses the Web Speech API (Chrome/Edge). Hidden on unsupported browsers.
+* Pulses while listening.
+*/
+var PromptInputSpeechButton = ({ className, textareaRef, onTranscriptionChange, "aria-label": ariaLabel = "Voice input", ...props }) => {
+	const [isListening, setIsListening] = useState(false);
+	const [recognition, setRecognition] = useState(null);
+	const recognitionRef = useRef(null);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const SR = window.SpeechRecognition ?? window.webkitSpeechRecognition;
+		if (!SR) return;
+		const sr = new SR();
+		sr.continuous = true;
+		sr.interimResults = true;
+		sr.lang = "en-US";
+		const handleStart = () => setIsListening(true);
+		const handleEnd = () => setIsListening(false);
+		const handleResult = (event) => {
+			const e = event;
+			let final = "";
+			for (const result of Array.from({ length: e.results.length }, (_, i) => e.results[i])) if (result?.isFinal && result[0]?.transcript) final += result[0].transcript;
+			if (final && textareaRef?.current) {
+				const ta = textareaRef.current;
+				const next = ta.value + (ta.value ? " " : "") + final;
+				ta.value = next;
+				ta.dispatchEvent(new Event("input", { bubbles: true }));
+				onTranscriptionChange?.(next);
+			}
+		};
+		const handleError = (_event) => setIsListening(false);
+		sr.addEventListener("start", handleStart);
+		sr.addEventListener("end", handleEnd);
+		sr.addEventListener("result", handleResult);
+		sr.addEventListener("error", handleError);
+		recognitionRef.current = sr;
+		setRecognition(sr);
+		return () => {
+			sr.removeEventListener("start", handleStart);
+			sr.removeEventListener("end", handleEnd);
+			sr.removeEventListener("result", handleResult);
+			sr.removeEventListener("error", handleError);
+			recognitionRef.current?.stop();
+		};
+	}, [textareaRef, onTranscriptionChange]);
+	const handleToggleListening = useCallback(() => {
+		if (!recognition) return;
+		const sr = recognition;
+		if (isListening) sr.stop();
+		else sr.start();
+	}, [recognition, isListening]);
+	const button = /* @__PURE__ */ jsx(Button, {
+		"aria-label": ariaLabel,
+		className: cn("text-sf-subtle hover:text-sf-default transition-all", isListening && "animate-pulse text-sf-brand", className),
+		disabled: !recognition,
+		onClick: handleToggleListening,
+		size: "sm",
+		type: "button",
+		variant: "ghost",
+		...props,
+		children: /* @__PURE__ */ jsx(MicrophoneIcon, { className: "size-4" })
+	});
+	if (!recognition) return null;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: isListening ? "Stop listening" : "Voice input",
+		children: button
+	});
+};
+/**
+* Convenience button that opens the file dialog directly (no dropdown needed).
+*/
+var PromptInputAttachButton = ({ "aria-label": ariaLabel = "Attach file", className, ...props }) => {
+	const attachments = usePromptInputAttachments();
+	const handleClick = useCallback(() => {
+		attachments.openFileDialog();
+	}, [attachments]);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: ariaLabel,
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": ariaLabel,
+			className: cn("text-sf-subtle hover:text-sf-default", className),
+			onClick: handleClick,
+			size: "sm",
+			type: "button",
+			variant: "ghost",
+			...props,
+			children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" })
+		})
+	});
+};
+//#endregion
+export { usePromptInputController as C, usePromptInputAttachments as S, PromptInputTextarea as _, PromptInputActionMenuItem as a, SF_AI_PROMPT_INPUT_DEFAULT_VARIANTS as b, PromptInputAttachment as c, PromptInputBody as d, PromptInputButton as f, PromptInputSubmit as g, PromptInputSpeechButton as h, PromptInputActionMenuContent as i, PromptInputAttachments as l, PromptInputProvider as m, PromptInputActionAddAttachments as n, PromptInputActionMenuTrigger as o, PromptInputModeSelector as p, PromptInputActionMenu as r, PromptInputAttachButton as s, PromptInput as t, PromptInputBackLayer as u, PromptInputToolbar as v, useProviderAttachments as w, SF_AI_PROMPT_INPUT_VARIANTS as x, PromptInputTools as y };
+
+//# sourceMappingURL=ai-prompt-input-Bo1YuJly.js.map