@wildo-ai/presets-components 1.0.1

package/dist/esm/components/ai-elements/chat/prompt-input.js

@@ -0,0 +1,622 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, HoverCard, HoverCardContent, HoverCardTrigger, InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, SelectRoot, SelectContent, SelectItem, SelectTrigger, SelectValue, cn, useIconRegistry, StandardIconReference, useI18n, useUI, createCompoundPreset, } from "@wildo-ai/saas-frontend-lib";
+import { ButtonVariants_Variant } from "@wildo-ai/saas-frontend-lib";
+import { FrontendComponentType, UIBehavior, TypographyVariant } from "@wildo-ai/presets-components-models";
+import { HorizontalAlign } from "@wildo-ai/zod-decorators";
+import { nanoid } from "nanoid";
+import { Children, createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+const PromptInputController = createContext(null);
+const ProviderAttachmentsContext = createContext(null);
+const usePromptInputController = () => {
+    const ctx = useContext(PromptInputController);
+    if (!ctx) {
+        throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
+    }
+    return ctx;
+};
+// Optional variants (do NOT throw). Useful for dual-mode components.
+const useOptionalPromptInputController = () => useContext(PromptInputController);
+const useProviderAttachments = () => {
+    const ctx = useContext(ProviderAttachmentsContext);
+    if (!ctx) {
+        throw new Error("Wrap your component inside <PromptInputProvider> to use useProviderAttachments().");
+    }
+    return ctx;
+};
+const useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext);
+/**
+ * Optional global provider that lifts PromptInput state outside of PromptInput.
+ * If you don't use it, PromptInput stays fully self-managed.
+ */
+function AI_PromptInputProvider({ initialInput: initialTextInput = "", children, }) {
+    // ----- textInput state
+    const [textInput, setTextInput] = useState(initialTextInput);
+    const clearInput = useCallback(() => setTextInput(""), []);
+    // ----- attachments state (global when wrapped)
+    const [attachements, setAttachements] = useState([]);
+    const fileInputRef = useRef(null);
+    const openRef = useRef(() => { });
+    const add = useCallback((files) => {
+        const incoming = Array.from(files);
+        if (incoming.length === 0) {
+            return;
+        }
+        setAttachements((prev) => prev.concat(incoming.map((file) => ({
+            id: nanoid(),
+            type: "file",
+            url: URL.createObjectURL(file),
+            mediaType: file.type,
+            filename: file.name,
+        }))));
+    }, []);
+    const remove = useCallback((id) => {
+        setAttachements((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(() => {
+        setAttachements((prev) => {
+            for (const f of prev) {
+                if (f.url) {
+                    URL.revokeObjectURL(f.url);
+                }
+            }
+            return [];
+        });
+    }, []);
+    const openFileDialog = useCallback(() => {
+        openRef.current?.();
+    }, []);
+    const attachments = useMemo(() => ({
+        files: attachements,
+        add,
+        remove,
+        clear,
+        openFileDialog,
+        fileInputRef,
+    }), [attachements, 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 (_jsx(PromptInputController.Provider, { value: controller, children: _jsx(ProviderAttachmentsContext.Provider, { value: attachments, children: children }) }));
+}
+// ============================================================================
+// Component Context & Hooks
+// ============================================================================
+const LocalAttachmentsContext = createContext(null);
+const usePromptInputAttachments = () => {
+    // Dual-mode: prefer provider if present, otherwise use local
+    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;
+};
+function AI_PromptInputAttachment({ data, className, ...props }) {
+    const attachments = usePromptInputAttachments();
+    const { renderIcon } = useIconRegistry();
+    const { tComponent, isReady } = useI18n({
+        component: FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT,
+    });
+    const { getRecipe } = useUI();
+    const descRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);
+    const filename = data.filename || "";
+    const mediaType = data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+    const isImage = mediaType === "image";
+    const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+    return (_jsxs(AI_PromptInputHoverCard, { children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsxs("div", { className: cn("group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 font-medium text-sm transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", className), ...props, children: [_jsxs("div", { className: "relative size-5 shrink-0", children: [_jsx("div", { className: "absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0", children: isImage ? (_jsx("img", { alt: filename || "attachment", className: "size-5 object-cover", height: 20, src: data.url, width: 20 })) : (_jsx("div", { className: cn(descRecipe.base, "flex size-5 items-center justify-center"), children: renderIcon(StandardIconReference.PAPERCLIP, { className: "size-3" }) })) }), _jsx(Button, { "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT, 'remove'), className: "absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5", onClick: (e) => {
+                                        e.stopPropagation();
+                                        attachments.remove(data.id);
+                                    }, type: "button", variant: ButtonVariants_Variant.GHOST, children: renderIcon(StandardIconReference.CLOSE, { className: "size-2.5" }) })] }), _jsx("span", { className: "flex-1 truncate", children: attachmentLabel })] }, data.id) }), _jsx(AI_PromptInputHoverCardContent, { className: "w-auto p-card-sm", children: _jsxs("div", { className: "w-auto space-y-group", children: [isImage && (_jsx("div", { className: "flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border", children: _jsx("img", { alt: filename || "attachment preview", className: "max-h-full max-w-full object-contain", height: 384, src: data.url, width: 448 }) })), _jsx("div", { className: "flex items-center gap-2.5", children: _jsxs("div", { className: "min-w-0 flex-1 space-y-item-xs px-0.5", children: [_jsx("h4", { className: "truncate font-semibold text-sm leading-none", children: filename || (isImage ? "Image" : "Attachment") }), data.mediaType && (_jsx("p", { className: cn(descRecipe.base, "truncate font-mono text-xs"), children: data.mediaType }))] }) })] }) })] }));
+}
+function AI_PromptInputAttachments({ children, className, ...props }) {
+    const attachments = usePromptInputAttachments();
+    if (!attachments.files.length) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("flex flex-wrap items-center gap-element p-card-sm", className), ...props, children: attachments.files.map((file) => (_jsx(Fragment, { children: children(file) }, file.id))) }));
+}
+const AI_PromptInputActionAddAttachments = ({ label, ...props }) => {
+    const attachments = usePromptInputAttachments();
+    const { renderIcon } = useIconRegistry();
+    const { tComponent, isReady } = useI18n({
+        component: FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT,
+    });
+    const labelText = label ?? tComponent(FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT, 'uploadFiles');
+    return (_jsxs(DropdownMenuItem, { ...props, onSelect: (e) => {
+            e.preventDefault();
+            attachments.openFileDialog();
+        }, children: [renderIcon(StandardIconReference.IMAGE, { className: "me-2 size-4" }), " ", labelText] }));
+};
+const AI_PromptInputRoot = ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ...props }) => {
+    // Try to use a provider controller if present
+    const controller = useOptionalPromptInputController();
+    const usingProvider = !!controller;
+    const { tComponent, isReady } = useI18n({
+        component: FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT,
+    });
+    // Refs
+    const inputRef = useRef(null);
+    const anchorRef = useRef(null);
+    const formRef = useRef(null);
+    // Find nearest form to scope drag & drop
+    useEffect(() => {
+        const root = anchorRef.current?.closest("form");
+        if (root instanceof HTMLFormElement) {
+            formRef.current = root;
+        }
+    }, []);
+    // ----- Local attachments (only used when no provider)
+    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/");
+        }
+        // NOTE: keep simple; expand as needed
+        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)
+                : undefined;
+            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 = [];
+            for (const file of capped) {
+                next.push({
+                    id: nanoid(),
+                    type: "file",
+                    url: URL.createObjectURL(file),
+                    mediaType: file.type,
+                    filename: file.name,
+                });
+            }
+            return prev.concat(next);
+        });
+    }, [matchesAccept, maxFiles, maxFileSize, onError]);
+    const add = usingProvider
+        ? (files) => controller.attachments.add(files)
+        : addLocal;
+    const remove = usingProvider
+        ? (id) => controller.attachments.remove(id)
+        : (id) => setItems((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 = usingProvider
+        ? () => controller.attachments.clear()
+        : () => setItems((prev) => {
+            for (const file of prev) {
+                if (file.url) {
+                    URL.revokeObjectURL(file.url);
+                }
+            }
+            return [];
+        });
+    const openFileDialog = usingProvider
+        ? () => controller.attachments.openFileDialog()
+        : openFileDialogLocal;
+    // Let provider know about our hidden file input so external menus can call openFileDialog()
+    useEffect(() => {
+        if (!usingProvider)
+            return;
+        controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+    }, [usingProvider, controller]);
+    // Note: File input cannot be programmatically set for security reasons
+    // The syncHiddenInput prop is no longer functional
+    useEffect(() => {
+        if (syncHiddenInput && inputRef.current && files.length === 0) {
+            inputRef.current.value = "";
+        }
+    }, [files, syncHiddenInput]);
+    // Attach drop handlers on nearest form and document (opt-in)
+    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(() => () => {
+        if (!usingProvider) {
+            for (const f of files) {
+                if (f.url)
+                    URL.revokeObjectURL(f.url);
+            }
+        }
+    }, [usingProvider, files]);
+    const handleChange = (event) => {
+        if (event.currentTarget.files) {
+            add(event.currentTarget.files);
+        }
+    };
+    const convertBlobUrlToDataUrl = async (url) => {
+        const response = await fetch(url);
+        const blob = await response.blob();
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+        });
+    };
+    const ctx = useMemo(() => ({
+        files: files.map((item) => ({ ...item, id: item.id })),
+        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
+            : (() => {
+                const formData = new FormData(form);
+                return formData.get("message") || "";
+            })();
+        // Reset form immediately after capturing text to avoid race condition
+        // where user input during async blob conversion would be lost
+        if (!usingProvider) {
+            form.reset();
+        }
+        // Convert blob URLs to data URLs asynchronously
+        Promise.all(files.map(async ({ id, ...item }) => {
+            if (item.url && item.url.startsWith("blob:")) {
+                return {
+                    ...item,
+                    url: await convertBlobUrlToDataUrl(item.url),
+                };
+            }
+            return item;
+        })).then((convertedFiles) => {
+            try {
+                const result = onSubmit({ text, files: convertedFiles }, event);
+                // Handle both sync and async onSubmit
+                if (result instanceof Promise) {
+                    result
+                        .then(() => {
+                        clear();
+                        if (usingProvider) {
+                            controller.textInput.clear();
+                        }
+                    })
+                        .catch(() => {
+                        // Don't clear on error - user may want to retry
+                    });
+                }
+                else {
+                    // Sync function completed without throwing, clear attachments
+                    clear();
+                    if (usingProvider) {
+                        controller.textInput.clear();
+                    }
+                }
+            }
+            catch (error) {
+                // Don't clear on error - user may want to retry
+            }
+        });
+    };
+    // Render with or without local provider
+    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "hidden", ref: anchorRef }), _jsx("input", { accept: accept, "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT, 'uploadFiles'), className: "hidden", multiple: multiple, onChange: handleChange, ref: inputRef, title: tComponent(FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT, 'uploadFiles'), type: "file" }), _jsx("form", { className: cn("w-full", className), onSubmit: handleSubmit, ...props, children: _jsx(InputGroup, { className: "overflow-hidden", children: children }) })] }));
+    return usingProvider ? (inner) : (_jsx(LocalAttachmentsContext.Provider, { value: ctx, children: inner }));
+};
+const AI_PromptInputBody = ({ className, ...props }) => (_jsx("div", { className: cn("contents", className), ...props }));
+const AI_PromptInputTextarea = ({ onChange, className, placeholder = "What would you like to know?", ...props }) => {
+    const controller = useOptionalPromptInputController();
+    const attachments = usePromptInputAttachments();
+    const [isComposing, setIsComposing] = useState(false);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            if (isComposing || e.nativeEvent.isComposing) {
+                return;
+            }
+            if (e.shiftKey) {
+                return;
+            }
+            e.preventDefault();
+            // Check if the submit button is disabled before submitting
+            const form = e.currentTarget.form;
+            const submitButton = form?.querySelector('button[type="submit"]');
+            if (submitButton?.disabled) {
+                return;
+            }
+            form?.requestSubmit();
+        }
+        // Remove last attachment when Backspace is pressed and textarea is empty
+        if (e.key === "Backspace" &&
+            e.currentTarget.value === "" &&
+            attachments.files.length > 0) {
+            e.preventDefault();
+            const lastAttachment = attachments.files.at(-1);
+            if (lastAttachment) {
+                attachments.remove(lastAttachment.id);
+            }
+        }
+    };
+    const handlePaste = (event) => {
+        const items = event.clipboardData?.items;
+        if (!items) {
+            return;
+        }
+        const files = [];
+        for (const item of items) {
+            if (item.kind === "file") {
+                const file = item.getAsFile();
+                if (file) {
+                    files.push(file);
+                }
+            }
+        }
+        if (files.length > 0) {
+            event.preventDefault();
+            attachments.add(files);
+        }
+    };
+    const controlledProps = controller
+        ? {
+            value: controller.textInput.value,
+            onChange: (e) => {
+                controller.textInput.setInput(e.currentTarget.value);
+                onChange?.(e);
+            },
+        }
+        : {
+            onChange,
+        };
+    return (_jsx(InputGroupTextarea, { className: cn("field-sizing-content max-h-48 min-h-16", className), name: "message", onCompositionEnd: () => setIsComposing(false), onCompositionStart: () => setIsComposing(true), onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, ...props, ...controlledProps }));
+};
+const AI_PromptInputHeader = ({ className, ...props }) => (_jsx(InputGroupAddon, { align: "block-end", className: cn("order-first flex-wrap gap-item-xs", className), ...props }));
+const AI_PromptInputFooter = ({ className, ...props }) => (_jsx(InputGroupAddon, { align: "block-end", className: cn("justify-between gap-item-xs", className), ...props }));
+const AI_PromptInputTools = ({ className, ...props }) => (_jsx("div", { className: cn("flex items-center gap-item-xs", className), ...props }));
+const AI_PromptInputButton = ({ variant = "ghost", className, size, ...props }) => {
+    const newSize = size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+    return (_jsx(InputGroupButton, { className: cn(className), size: newSize, type: "button", variant: variant, ...props }));
+};
+const AI_PromptInputActionMenu = (props) => (_jsx(DropdownMenu, { ...props }));
+const AI_PromptInputActionMenuTrigger = ({ className, children, ...props }) => {
+    const { renderIcon } = useIconRegistry();
+    return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(AI_PromptInputButton, { className: className, ...props, children: children ?? renderIcon(StandardIconReference.PLUS, { className: "size-4" }) }) }));
+};
+const AI_PromptInputActionMenuContent = ({ className, ...props }) => (_jsx(DropdownMenuContent, { align: HorizontalAlign.START, className: cn(className), ...props }));
+const AI_PromptInputActionMenuItem = ({ className, ...props }) => (_jsx(DropdownMenuItem, { className: cn(className), ...props }));
+const AI_PromptInputSubmit = ({ className, variant = "default", size = "icon-sm", status, children, ...props }) => {
+    const { renderIcon } = useIconRegistry();
+    const { tComponent, isReady } = useI18n({
+        component: FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT,
+    });
+    let Icon = renderIcon(StandardIconReference.CORNER_DOWN_LEFT, { className: "size-4" });
+    if (status === "submitted") {
+        Icon = renderIcon(StandardIconReference.LOADER_2, { className: "size-4 animate-spin" });
+    }
+    else if (status === "streaming") {
+        Icon = renderIcon(StandardIconReference.SQUARE, { className: "size-4" });
+    }
+    else if (status === "error") {
+        Icon = renderIcon(StandardIconReference.CLOSE, { className: "size-4" });
+    }
+    return (_jsx(InputGroupButton, { "aria-label": tComponent(FrontendComponentType.LOW_LEVEL_AI_PROMPT_INPUT, 'submit'), className: cn(className), size: size, type: "submit", variant: variant, ...props, children: children ?? Icon }));
+};
+const AI_PromptInputSpeechButton = ({ className, textareaRef, onTranscriptionChange, ...props }) => {
+    const [isListening, setIsListening] = useState(false);
+    const [recognition, setRecognition] = useState(null);
+    const recognitionRef = useRef(null);
+    const { renderIcon } = useIconRegistry();
+    useEffect(() => {
+        if (typeof window !== "undefined" &&
+            ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)) {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            const speechRecognition = new SpeechRecognition();
+            speechRecognition.continuous = true;
+            speechRecognition.interimResults = true;
+            speechRecognition.lang = "en-US";
+            speechRecognition.onstart = () => {
+                setIsListening(true);
+            };
+            speechRecognition.onend = () => {
+                setIsListening(false);
+            };
+            speechRecognition.onresult = (event) => {
+                let finalTranscript = "";
+                for (let i = event.resultIndex; i < event.results.length; i++) {
+                    const result = event.results[i];
+                    if (result.isFinal) {
+                        finalTranscript += result[0]?.transcript ?? "";
+                    }
+                }
+                if (finalTranscript && textareaRef?.current) {
+                    const textarea = textareaRef.current;
+                    const currentValue = textarea.value;
+                    const newValue = currentValue + (currentValue ? " " : "") + finalTranscript;
+                    textarea.value = newValue;
+                    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+                    onTranscriptionChange?.(newValue);
+                }
+            };
+            speechRecognition.onerror = (event) => {
+                console.error("Speech recognition error:", event.error);
+                setIsListening(false);
+            };
+            recognitionRef.current = speechRecognition;
+            setRecognition(speechRecognition);
+        }
+        return () => {
+            if (recognitionRef.current) {
+                recognitionRef.current.stop();
+            }
+        };
+    }, [textareaRef, onTranscriptionChange]);
+    const toggleListening = useCallback(() => {
+        if (!recognition) {
+            return;
+        }
+        if (isListening) {
+            recognition.stop();
+        }
+        else {
+            recognition.start();
+        }
+    }, [recognition, isListening]);
+    return (_jsx(AI_PromptInputButton, { className: cn("relative transition-all duration-[var(--motion-duration-fast)]", isListening && "animate-pulse bg-accent text-accent-foreground", className), disabled: !recognition, onClick: toggleListening, ...props, children: renderIcon(StandardIconReference.MIC, { className: "size-4" }) }));
+};
+const AI_PromptInputSelect = (props) => (_jsx(SelectRoot, { ...props }));
+const AI_PromptInputSelectTrigger = ({ className, ...props }) => {
+    const { getRecipe } = useUI();
+    const descRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);
+    return (_jsx(SelectTrigger, { className: cn(descRecipe.base, "border-none bg-transparent font-medium shadow-none transition-colors", "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground", className), ...props }));
+};
+const AI_PromptInputSelectContent = ({ className, ...props }) => (_jsx(SelectContent, { className: cn(className), ...props }));
+const AI_PromptInputSelectItem = ({ className, ...props }) => (_jsx(SelectItem, { className: cn(className), ...props }));
+const AI_PromptInputSelectValue = ({ className, ...props }) => (_jsx(SelectValue, { className: cn(className), ...props }));
+const AI_PromptInputHoverCard = ({ openDelay = 0, closeDelay = 0, ...props }) => (_jsx(HoverCard, { closeDelay: closeDelay, openDelay: openDelay, ...props }));
+const AI_PromptInputHoverCardTrigger = (props) => _jsx(HoverCardTrigger, { ...props });
+const AI_PromptInputHoverCardContent = ({ align = HorizontalAlign.START, ...props }) => (_jsx(HoverCardContent, { align: align, ...props }));
+const AI_PromptInputTabsList = ({ className, ...props }) => _jsx("div", { className: cn(className), ...props });
+const AI_PromptInputTab = ({ className, ...props }) => _jsx("div", { className: cn(className), ...props });
+const AI_PromptInputTabLabel = ({ className, ...props }) => {
+    const { getRecipe } = useUI();
+    const descRecipe = getRecipe(UIBehavior.TYPOGRAPHY, TypographyVariant.DESCRIPTION);
+    return (_jsx("h3", { className: cn(descRecipe.base, "mb-element px-card-sm font-medium text-xs", className), ...props }));
+};
+const AI_PromptInputTabBody = ({ className, ...props }) => (_jsx("div", { className: cn("space-y-item-xs", className), ...props }));
+const AI_PromptInputTabItem = ({ className, ...props }) => (_jsx("div", { className: cn("flex items-center gap-element px-card-sm py-card-sm text-xs hover:bg-accent", className), ...props }));
+const AI_PromptInputCommand = ({ className, ...props }) => _jsx(Command, { className: cn(className), ...props });
+const AI_PromptInputCommandInput = ({ className, ...props }) => (_jsx(CommandInput, { className: cn(className), ...props }));
+const AI_PromptInputCommandList = ({ className, ...props }) => (_jsx(CommandList, { className: cn(className), ...props }));
+const AI_PromptInputCommandEmpty = ({ className, ...props }) => (_jsx(CommandEmpty, { className: cn(className), ...props }));
+const AI_PromptInputCommandGroup = ({ className, ...props }) => (_jsx(CommandGroup, { className: cn(className), ...props }));
+const AI_PromptInputCommandItem = ({ className, ...props }) => (_jsx(CommandItem, { className: cn(className), ...props }));
+const AI_PromptInputCommandSeparator = ({ className, ...props }) => (_jsx(CommandSeparator, { className: cn(className), ...props }));
+export const AI_PromptInput = createCompoundPreset(AI_PromptInputRoot, {
+    Provider: AI_PromptInputProvider,
+    Attachment: AI_PromptInputAttachment,
+    Attachments: AI_PromptInputAttachments,
+    Body: AI_PromptInputBody,
+    Textarea: AI_PromptInputTextarea,
+    Header: AI_PromptInputHeader,
+    Footer: AI_PromptInputFooter,
+    Tools: AI_PromptInputTools,
+    Button: AI_PromptInputButton,
+    Submit: AI_PromptInputSubmit,
+    ActionMenu: AI_PromptInputActionMenu,
+    ActionMenuTrigger: AI_PromptInputActionMenuTrigger,
+    ActionMenuContent: AI_PromptInputActionMenuContent,
+    ActionMenuItem: AI_PromptInputActionMenuItem,
+    ActionAddAttachments: AI_PromptInputActionAddAttachments,
+    SpeechButton: AI_PromptInputSpeechButton,
+    Select: AI_PromptInputSelect,
+    SelectTrigger: AI_PromptInputSelectTrigger,
+    SelectContent: AI_PromptInputSelectContent,
+    SelectItem: AI_PromptInputSelectItem,
+    SelectValue: AI_PromptInputSelectValue,
+    Command: AI_PromptInputCommand,
+    CommandInput: AI_PromptInputCommandInput,
+    CommandList: AI_PromptInputCommandList,
+    CommandEmpty: AI_PromptInputCommandEmpty,
+    CommandGroup: AI_PromptInputCommandGroup,
+    CommandItem: AI_PromptInputCommandItem,
+    CommandSeparator: AI_PromptInputCommandSeparator,
+    HoverCard: AI_PromptInputHoverCard,
+    HoverCardTrigger: AI_PromptInputHoverCardTrigger,
+    HoverCardContent: AI_PromptInputHoverCardContent,
+    TabsList: AI_PromptInputTabsList,
+    Tab: AI_PromptInputTab,
+    TabLabel: AI_PromptInputTabLabel,
+    TabBody: AI_PromptInputTabBody,
+    TabItem: AI_PromptInputTabItem,
+});
+//# sourceMappingURL=prompt-input.js.map