@signalflare-ai/ui 1.0.0 → 1.1.0

package/dist/{ai-prompt-input-Dy1LfxPk.js → ai-prompt-input-CuluUzpf.js}

@@ -2,7 +2,6 @@
 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-DddtBN-g.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, ArrowsClockwiseIcon, CaretDownIcon, CheckIcon, FileIcon, FileTextIcon, ImageIcon, MicrophoneIcon, PaperclipIcon, PlusIcon, SpinnerGapIcon, SquareIcon, XIcon } from "@phosphor-icons/react";
@@ -442,7 +441,8 @@ var useStore = (source, selector = (s) => s, compare) => useSelector(source, sel
 */
 var DEFAULT_REQUEST = {
 	text: "",
-	files: []
+	files: [],
+	tags: []
 };
 var DEFAULT_DISPLAY = { sendStatus: "idle" };
 function createPromptInputRequestController(options = {}) {
@@ -494,13 +494,60 @@ function createPromptInputRequestController(options = {}) {
 				};
 			});
 		},
+		addTags(tags) {
+			request.setState((prev) => {
+				const existing = prev.tags ?? [];
+				const incoming = tags.filter((tag) => !existing.some((item) => item.id === tag.id));
+				return {
+					...prev,
+					tags: [...existing, ...incoming]
+				};
+			});
+		},
+		insertTag(tag, range) {
+			request.setState((prev) => {
+				const mention = tag.mention ?? `@${tag.label.replace(/\s+/g, "-").toLowerCase()}`;
+				const text = prev.text ?? "";
+				const start = range?.start ?? text.length;
+				const end = range?.end ?? text.length;
+				const prefix = text.slice(0, start);
+				const suffix = text.slice(end);
+				const needsPrefixSpace = prefix.length > 0 && !/\s$/.test(prefix);
+				const needsSuffixSpace = suffix.length > 0 && !/^\s/.test(suffix);
+				const nextText = `${prefix}${needsPrefixSpace ? " " : ""}${mention}${needsSuffixSpace ? " " : ""}${suffix}`;
+				const nextTag = {
+					...tag,
+					mention
+				};
+				const existing = prev.tags ?? [];
+				const nextTags = existing.some((item) => item.id === tag.id) ? existing.map((item) => item.id === tag.id ? nextTag : item) : [...existing, nextTag];
+				return {
+					...prev,
+					text: nextText,
+					tags: nextTags
+				};
+			});
+		},
+		removeTag(id) {
+			request.setState((prev) => ({
+				...prev,
+				tags: (prev.tags ?? []).filter((tag) => tag.id !== id)
+			}));
+		},
+		clearTags() {
+			request.setState((prev) => ({
+				...prev,
+				tags: []
+			}));
+		},
 		resetRequest() {
 			request.setState((prev) => {
 				for (const f of prev.files) if (f.url.startsWith("blob:")) URL.revokeObjectURL(f.url);
 				return {
 					...prev,
 					text: "",
-					files: []
+					files: [],
+					tags: []
 				};
 			});
 		},
@@ -698,9 +745,10 @@ function makeAttachmentId() {
 * </PromptInput>
 * ```
 */
-var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileSize, onError, onSubmit, children, backLayer, backLayerTitle = "Context", backLayerOpen, onBackLayerOpenChange, autoOpenBackLayerWhen, ...props }) => {
+function 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 requestCtrl = useOptionalPromptInputRequestController();
 	const usingProvider = !!controller;
 	const inputRef = useRef(null);
 	const anchorRef = useRef(null);
@@ -714,6 +762,7 @@ var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileS
 	}, [autoOpenBackLayerWhen, onBackLayerOpenChange]);
 	const [items, setItems] = useState([]);
 	const files = usingProvider ? controller.attachments.files : items;
+	const tags = useStore(requestCtrl?.request ?? FALLBACK_REQUEST_STORE, (state) => state.tags ?? []);
 	const openFileDialogLocal = useCallback(() => {
 		inputRef.current?.click();
 	}, []);
@@ -837,7 +886,7 @@ var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileS
 	const handleSubmit = (event) => {
 		event.preventDefault();
 		const form = event.currentTarget;
-		const text = usingProvider ? controller.textInput.value : new FormData(form).get("message") || "";
+		const text = requestCtrl ? requestCtrl.request.state.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) => {
@@ -850,10 +899,14 @@ var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileS
 			try {
 				await onSubmit({
 					text,
-					files: convertedFiles
+					files: convertedFiles,
+					tags
 				}, event);
-				clear();
-				if (usingProvider) controller.textInput.clear();
+				if (requestCtrl) requestCtrl.resetRequest();
+				else {
+					clear();
+					if (usingProvider) controller.textInput.clear();
+				}
 			} catch {}
 		};
 		doSubmit().catch(() => {});
@@ -878,11 +931,14 @@ var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileS
 				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",
+				className: "flex flex-col overflow-visible rounded-xl bg-sf-base ring ring-sf-line/50 focus-within:ring-sf-ring",
 				children
 			})
 		]
-	}) : /* @__PURE__ */ jsx(InputGroup, { children });
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "flex w-full flex-col items-stretch overflow-visible rounded-xl border-0 bg-sf-base shadow-xs ring ring-sf-line focus-within:ring-sf-ring",
+		children
+	});
 	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
@@ -909,7 +965,7 @@ var PromptInput = ({ className, accept, multiple, globalDrop, maxFiles, maxFileS
 		value: ctx,
 		children: inner
 	});
-};
+}
 var PromptInputBody = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("contents", className),
 	...props
@@ -970,6 +1026,8 @@ var handleTextareaKeyDown = (e) => {
 */
 var PromptInputTextarea = ({ onChange, className, placeholder = "What would you like to know?", ...props }) => {
 	const controller = useOptionalPromptInputController();
+	const requestCtrl = useOptionalPromptInputRequestController();
+	const requestText = useStore(requestCtrl?.request ?? FALLBACK_REQUEST_STORE, (state) => typeof state.text === "string" ? state.text : "");
 	const attachments = usePromptInputAttachments();
 	const handlePaste = (event) => {
 		const items = event.clipboardData?.items;
@@ -984,7 +1042,13 @@ var PromptInputTextarea = ({ onChange, className, placeholder = "What would you
 			attachments.add(pastedFiles);
 		}
 	};
-	const controlledProps = controller ? {
+	const controlledProps = requestCtrl ? {
+		value: requestText,
+		onChange: (e) => {
+			requestCtrl.setRequestField("text", e.currentTarget.value);
+			onChange?.(e);
+		}
+	} : controller ? {
 		value: controller.textInput.value,
 		onChange: (e) => {
 			controller.textInput.setInput(e.currentTarget.value);
@@ -992,7 +1056,7 @@ var PromptInputTextarea = ({ onChange, className, placeholder = "What would you
 		}
 	} : { 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),
+		className: cn("field-sizing-content max-h-48 min-h-16 w-full resize-none border-0 bg-transparent px-3 pt-3 pb-1 text-sm text-sf-default outline-none placeholder:text-sf-inactive", className),
 		name: "message",
 		onKeyDown: handleTextareaKeyDown,
 		onPaste: handlePaste,
@@ -1002,12 +1066,300 @@ var PromptInputTextarea = ({ onChange, className, placeholder = "What would you
 		...controlledProps
 	});
 };
+var getTagMention = (tag) => tag.mention ?? `@${tag.label.replace(/\s+/g, "-").toLowerCase()}`;
+var findMentionAtCursor = (text, cursor) => {
+	const beforeCursor = text.slice(0, cursor);
+	const match = /(^|\s)@([\w-]*)$/.exec(beforeCursor);
+	if (!match) return null;
+	return {
+		start: cursor - match[0].trimStart().length,
+		end: cursor,
+		query: match[2] ?? ""
+	};
+};
+var renderInlineReferenceText = (text, tags) => {
+	if (text.length === 0) return null;
+	const mentions = tags.map((tag) => ({
+		tag,
+		mention: getTagMention(tag)
+	})).filter((item) => item.mention.length > 0).sort((a, b) => b.mention.length - a.mention.length);
+	const parts = [];
+	let index = 0;
+	while (index < text.length) {
+		let match;
+		for (const mention of mentions) if (text.startsWith(mention.mention, index)) {
+			match = mention;
+			break;
+		}
+		if (match) {
+			parts.push(/* @__PURE__ */ jsx("span", {
+				className: "rounded-md bg-sf-tint font-medium text-sf-strong ring-1 ring-sf-line",
+				children: match.mention
+			}, `${match.tag.id}-${index}`));
+			index += match.mention.length;
+			continue;
+		}
+		parts.push(text[index]);
+		index += 1;
+	}
+	return parts;
+};
+var getTextareaCursorPosition = (textarea, wrapper) => {
+	if (!wrapper) return {
+		left: 12,
+		top: 0
+	};
+	const computed = window.getComputedStyle(textarea);
+	const mirror = document.createElement("div");
+	const marker = document.createElement("span");
+	const wrapperRect = wrapper.getBoundingClientRect();
+	for (const property of [
+		"borderBottomWidth",
+		"borderLeftWidth",
+		"borderRightWidth",
+		"borderTopWidth",
+		"boxSizing",
+		"fontFamily",
+		"fontSize",
+		"fontStyle",
+		"fontWeight",
+		"letterSpacing",
+		"lineHeight",
+		"paddingBottom",
+		"paddingLeft",
+		"paddingRight",
+		"paddingTop",
+		"textTransform",
+		"width",
+		"wordSpacing"
+	]) mirror.style[property] = computed[property];
+	mirror.style.position = "absolute";
+	mirror.style.visibility = "hidden";
+	mirror.style.whiteSpace = "pre-wrap";
+	mirror.style.overflowWrap = "break-word";
+	mirror.textContent = textarea.value.slice(0, textarea.selectionStart);
+	marker.textContent = "​";
+	mirror.append(marker);
+	document.body.append(mirror);
+	const markerRect = marker.getBoundingClientRect();
+	const top = markerRect.top - mirror.getBoundingClientRect().top + textarea.offsetTop - 6;
+	const left = Math.min(Math.max(markerRect.left - mirror.getBoundingClientRect().left + textarea.offsetLeft, 12), Math.max(wrapperRect.width - 300, 12));
+	mirror.remove();
+	return {
+		left,
+		top
+	};
+};
+var PromptInputReferencePicker = ({ activeIndex, onSelect, options, style }) => /* @__PURE__ */ jsxs("div", {
+	className: "absolute z-50 w-72 -translate-y-full overflow-hidden rounded-lg bg-sf-elevated p-1 shadow-lg ring ring-sf-line",
+	style,
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "px-2 py-1.5 text-xs font-medium text-sf-subtle",
+		children: "References"
+	}), /* @__PURE__ */ jsx("div", {
+		className: "max-h-56 overflow-y-auto",
+		children: options.map((tag, index) => /* @__PURE__ */ jsxs("button", {
+			"aria-selected": index === activeIndex,
+			className: cn("flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm text-sf-default hover:bg-sf-tint aria-selected:bg-sf-tint", index === activeIndex && "bg-sf-tint"),
+			onMouseDown: (event) => {
+				event.preventDefault();
+				onSelect(tag);
+			},
+			role: "option",
+			type: "button",
+			children: [
+				tag.icon && /* @__PURE__ */ jsx("span", {
+					className: "mt-0.5 shrink-0",
+					children: tag.icon
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "block truncate font-medium",
+						children: tag.label
+					}), tag.description && /* @__PURE__ */ jsx("span", {
+						className: "block truncate text-xs text-sf-subtle",
+						children: tag.description
+					})]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-xs text-sf-subtle",
+					children: getTagMention(tag)
+				})
+			]
+		}, tag.id))
+	})]
+});
+var PromptInputEditor = ({ className, placeholder = "What would you like to know?", onReferenceSearch, references, onChange, onKeyDown, style, ...props }) => {
+	const controller = useOptionalPromptInputController();
+	const requestCtrl = useOptionalPromptInputRequestController();
+	const textareaRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const [mention, setMention] = useState(null);
+	const [options, setOptions] = useState([]);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [pickerPosition, setPickerPosition] = useState({
+		left: 12,
+		top: 0
+	});
+	const requestText = useStore(requestCtrl?.request ?? FALLBACK_REQUEST_STORE, (state) => typeof state.text === "string" ? state.text : "");
+	const tags = useStore(requestCtrl?.request ?? FALLBACK_REQUEST_STORE, (state) => Array.isArray(state.tags) ? state.tags : []);
+	const attachments = usePromptInputAttachments();
+	const value = requestCtrl ? requestText : controller?.textInput.value ?? "";
+	const updateMention = useCallback((textarea) => {
+		const nextMention = findMentionAtCursor(textarea.value, textarea.selectionStart);
+		if (nextMention) setPickerPosition(getTextareaCursorPosition(textarea, wrapperRef.current));
+		setMention((current) => {
+			if (!(current || nextMention)) return current;
+			if (current && nextMention && current.start === nextMention.start && current.end === nextMention.end && current.query === nextMention.query) return current;
+			return nextMention;
+		});
+	}, []);
+	useEffect(() => {
+		let cancelled = false;
+		if (!mention) {
+			setOptions([]);
+			return;
+		}
+		const load = async () => {
+			const result = onReferenceSearch ? await onReferenceSearch({
+				trigger: "@",
+				query: mention.query
+			}) : (references ?? []).filter((tag) => tag.label.toLowerCase().includes(mention.query.toLowerCase()));
+			if (!cancelled) {
+				setOptions(result);
+				setActiveIndex((index) => index < result.length ? index : 0);
+			}
+		};
+		load().catch(() => {
+			if (!cancelled) setOptions([]);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		mention,
+		onReferenceSearch,
+		references
+	]);
+	const insertReference = useCallback((tag) => {
+		if (!(requestCtrl && mention)) return;
+		const mentionText = getTagMention(tag);
+		requestCtrl.insertTag({
+			...tag,
+			mention: mentionText
+		}, mention);
+		setMention(null);
+		setOptions([]);
+		requestAnimationFrame(() => {
+			const textarea = textareaRef.current;
+			if (!textarea) return;
+			const cursor = mention.start + mentionText.length + 1;
+			textarea.focus();
+			textarea.setSelectionRange(cursor, cursor);
+		});
+	}, [mention, requestCtrl]);
+	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 handleKeyDown = (event) => {
+		if (mention && options.length > 0) {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setActiveIndex((index) => (index + 1) % options.length);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setActiveIndex((index) => (index - 1 + options.length) % options.length);
+				return;
+			}
+			if (event.key === "Enter" || event.key === "Tab") {
+				event.preventDefault();
+				insertReference(options[activeIndex]);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setMention(null);
+				setOptions([]);
+				return;
+			}
+		}
+		handleTextareaKeyDown(event);
+		onKeyDown?.(event);
+	};
+	const handleChange = (event) => {
+		if (requestCtrl) requestCtrl.setRequestField("text", event.currentTarget.value);
+		else if (controller) controller.textInput.setInput(event.currentTarget.value);
+		updateMention(event.currentTarget);
+		onChange?.(event);
+	};
+	const showPicker = mention && options.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		ref: wrapperRef,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: cn("pointer-events-none field-sizing-content max-h-48 min-h-16 w-full overflow-hidden whitespace-pre-wrap break-words px-3 pt-3 pb-1 text-sm text-sf-default", value.length === 0 && "text-transparent"),
+				children: renderInlineReferenceText(value, tags)
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				className: cn("absolute inset-0 field-sizing-content max-h-48 min-h-16 w-full resize-none border-0 bg-transparent px-3 pt-3 pb-1 text-sm text-transparent outline-none placeholder:text-sf-inactive", className),
+				name: "message",
+				onChange: handleChange,
+				onClick: (event) => updateMention(event.currentTarget),
+				onKeyDown: handleKeyDown,
+				onKeyUp: (event) => {
+					if ([
+						"ArrowDown",
+						"ArrowUp",
+						"Enter",
+						"Tab",
+						"Escape"
+					].includes(event.key)) return;
+					updateMention(event.currentTarget);
+				},
+				onPaste: handlePaste,
+				placeholder,
+				ref: textareaRef,
+				rows: 1,
+				style: {
+					caretColor: "var(--text-color-sf-default)",
+					...style
+				},
+				value,
+				...props
+			}),
+			showPicker && /* @__PURE__ */ jsx(PromptInputReferencePicker, {
+				activeIndex,
+				onSelect: insertReference,
+				options,
+				style: {
+					left: pickerPosition.left,
+					top: pickerPosition.top
+				}
+			})
+		]
+	});
+};
 var PromptInputToolbar = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex min-w-0 items-center justify-between gap-1 px-2 py-1.5", className),
+	className: cn("grid grid-cols-[minmax(0,1fr)_auto] items-end gap-2 px-2.5 pt-1 pb-2", className),
 	...props
 });
 var PromptInputTools = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex min-w-0 items-center gap-1", className),
+	className: cn("flex min-w-0 flex-wrap items-center gap-1", className),
 	...props
 });
 var PromptInputButton = ({ variant = "ghost", size = "sm", className, ...props }) => /* @__PURE__ */ jsx(Button, {
@@ -1032,7 +1384,7 @@ var PromptInputSubmit = ({ className, variant = "primary", size = "sm", status =
 	else Icon = /* @__PURE__ */ jsx(ArrowUpIcon, { className: "size-4" });
 	return /* @__PURE__ */ jsx(Button, {
 		"aria-label": "Submit",
-		className: cn(className),
+		className: cn("size-8 shrink-0 justify-center rounded-lg p-0", className),
 		size,
 		type: "submit",
 		variant,
@@ -1435,17 +1787,107 @@ function PromptInputAttachments({ className, children, ...props }) {
 	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),
+		className: cn("overflow-hidden px-2.5 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",
+			className: "flex flex-wrap gap-2 pt-2 pb-1",
 			ref: contentRef,
 			children: attachments.files.map((file) => /* @__PURE__ */ jsx(Fragment, { children: children(file) }, file.id))
 		})
 	});
 }
 /**
+* Single reference chip for prompt tags. Includes a remove button when mounted
+* inside a PromptInputRequestControllerProvider.
+*/
+function PromptInputTag({ data, className, ...props }) {
+	const requestCtrl = useOptionalPromptInputRequestController();
+	const handleRemove = useCallback(() => {
+		requestCtrl?.removeTag(data.id);
+	}, [requestCtrl, data.id]);
+	const chip = /* @__PURE__ */ jsxs("div", {
+		className: cn("group inline-flex h-8 items-center gap-2 rounded-md border border-sf-info/30 bg-sf-info-tint px-2 text-sm text-sf-default", className),
+		...props,
+		children: [
+			data.icon && /* @__PURE__ */ jsx("div", {
+				className: "flex size-4 shrink-0 items-center justify-center",
+				children: data.icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "max-w-[180px] truncate font-medium",
+				children: data.label
+			}),
+			requestCtrl && /* @__PURE__ */ jsx(Button, {
+				"aria-label": "Remove tag",
+				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" })
+			})
+		]
+	});
+	if (!data.description) return chip;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: data.description,
+		children: chip
+	});
+}
+/**
+* Renders all prompt tags using a render prop. Hidden when no tags.
+* Animates height as tags are added/removed.
+*/
+function PromptInputTags({ className, children, ...props }) {
+	const tags = useStore(useOptionalPromptInputRequestController()?.request ?? FALLBACK_REQUEST_STORE, (state) => state.tags ?? []);
+	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);
+	}, [tags.length]);
+	if (tags.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": "polite",
+		className: cn("overflow-hidden px-2.5 transition-[height] duration-200 ease-out", className),
+		style: { height: tags.length ? height : 0 },
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-2 pt-2 pb-1",
+			ref: contentRef,
+			children: tags.map((tag) => /* @__PURE__ */ jsx(Fragment, { children: children(tag) }, tag.id))
+		})
+	});
+}
+/**
+* Toolbar trigger for opening a consumer-owned tag picker.
+*/
+function PromptInputAddTagButton({ children, onClick, onOpenPicker, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Add tag",
+		onClick: (event) => {
+			onOpenPicker?.();
+			onClick?.(event);
+		},
+		size: "sm",
+		type: "button",
+		variant: "ghost",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+	});
+}
+/**
 * Voice input button. Uses the Web Speech API (Chrome/Edge). Hidden on unsupported browsers.
 * Pulses while listening.
 */
@@ -1535,7 +1977,20 @@ var PromptInputAttachButton = ({ "aria-label": ariaLabel = "Attach file", classN
 		})
 	});
 };
+PromptInput.BackLayer = PromptInputBackLayer;
+PromptInput.Textarea = PromptInputTextarea;
+PromptInput.Editor = PromptInputEditor;
+PromptInput.Toolbar = PromptInputToolbar;
+PromptInput.Tools = PromptInputTools;
+PromptInput.Submit = PromptInputSubmit;
+PromptInput.ModeSelector = PromptInputModeSelector;
+PromptInput.AddTagButton = PromptInputAddTagButton;
+PromptInput.Tags = PromptInputTags;
+PromptInput.Tag = PromptInputTag;
+PromptInput.AttachButton = PromptInputAttachButton;
+PromptInput.Attachments = PromptInputAttachments;
+PromptInput.Attachment = PromptInputAttachment;
 //#endregion
-export { useProviderAttachments as A, PromptInputTextarea as C, SF_AI_PROMPT_INPUT_VARIANTS as D, SF_AI_PROMPT_INPUT_DEFAULT_VARIANTS as E, usePromptInputRequestController as F, useRequestField as I, useSetRequestField as L, createPromptInputRequestController as M, useDisplayField as N, usePromptInputAttachments as O, useOptionalPromptInputRequestController as P, PromptInputSubmit as S, PromptInputTools as T, PromptInputModeSelector as _, PromptInputActionMenuItem as a, PromptInputProvider as b, PromptInputAttachment as c, PromptInputBody as d, PromptInputButton as f, PromptInputModeSelect as g, PromptInputModeCycle as h, PromptInputActionMenuContent as i, PromptInputRequestControllerProvider as j, usePromptInputController as k, PromptInputAttachments as l, PromptInputCompactSelect as m, PromptInputActionAddAttachments as n, PromptInputActionMenuTrigger as o, PromptInputCompactCycle as p, PromptInputActionMenu as r, PromptInputAttachButton as s, PromptInput as t, PromptInputBackLayer as u, PromptInputModelCycle as v, PromptInputToolbar as w, PromptInputSpeechButton as x, PromptInputModelSelect as y };
+export { SF_AI_PROMPT_INPUT_DEFAULT_VARIANTS as A, useRequestField as B, PromptInputSpeechButton as C, PromptInputTextarea as D, PromptInputTags as E, PromptInputRequestControllerProvider as F, createPromptInputRequestController as I, useDisplayField as L, usePromptInputAttachments as M, usePromptInputController as N, PromptInputToolbar as O, useProviderAttachments as P, useOptionalPromptInputRequestController as R, PromptInputProvider as S, PromptInputTag as T, useSetRequestField as V, PromptInputModeCycle as _, PromptInputActionMenuItem as a, PromptInputModelCycle as b, PromptInputAttachButton as c, PromptInputBackLayer as d, PromptInputBody as f, PromptInputEditor as g, PromptInputCompactSelect as h, PromptInputActionMenuContent as i, SF_AI_PROMPT_INPUT_VARIANTS as j, PromptInputTools as k, PromptInputAttachment as l, PromptInputCompactCycle as m, PromptInputActionAddAttachments as n, PromptInputActionMenuTrigger as o, PromptInputButton as p, PromptInputActionMenu as r, PromptInputAddTagButton as s, PromptInput as t, PromptInputAttachments as u, PromptInputModeSelect as v, PromptInputSubmit as w, PromptInputModelSelect as x, PromptInputModeSelector as y, usePromptInputRequestController as z };
 
-//# sourceMappingURL=ai-prompt-input-Dy1LfxPk.js.map
+//# sourceMappingURL=ai-prompt-input-CuluUzpf.js.map