@flowtomic/ui 0.1.0 → 0.1.2

package/dist/components/organisms/prompt-input/prompt-input.js

@@ -0,0 +1,526 @@
+/**
+ * PromptInput Component - Flowtomic UI
+ *
+ * Componente complexo para input de prompt com suporte a attachments, speech, etc.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CornerDownLeftIcon, ImageIcon, Loader2Icon, MicIcon, PaperclipIcon, PlusIcon, SquareIcon, XIcon, } from "lucide-react";
+import { nanoid } from "nanoid";
+import { Children, createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea, } from "@/components/molecules/forms/input-group";
+import { cn } from "@/lib/utils";
+import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, HoverCard, HoverCardContent, HoverCardTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../atoms";
+const PromptInputController = createContext(null);
+const ProviderAttachmentsContext = createContext(null);
+export const usePromptInputController = () => {
+    const ctx = useContext(PromptInputController);
+    if (!ctx) {
+        throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
+    }
+    return ctx;
+};
+const useOptionalPromptInputController = () => useContext(PromptInputController);
+export 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);
+export function PromptInputProvider({ initialInput: initialTextInput = "", children, }) {
+    const [textInput, setTextInput] = useState(initialTextInput);
+    const clearInput = useCallback(() => setTextInput(""), []);
+    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 }) }));
+}
+const LocalAttachmentsContext = createContext(null);
+export const 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;
+};
+export function PromptInputAttachment({ data, className, ...props }) {
+    const attachments = usePromptInputAttachments();
+    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(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: "flex size-5 items-center justify-center text-muted-foreground", children: _jsx(PaperclipIcon, { className: "size-3" }) })) }), _jsxs(Button, { "aria-label": "Remove attachment", 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: "ghost", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Remove" })] })] }), _jsx("span", { className: "flex-1 truncate", children: attachmentLabel })] }, data.id) }), _jsx(PromptInputHoverCardContent, { className: "w-auto p-2", children: _jsxs("div", { className: "w-auto space-y-3", 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-1 px-0.5", children: [_jsx("h4", { className: "truncate font-semibold text-sm leading-none", children: filename || (isImage ? "Image" : "Attachment") }), data.mediaType && (_jsx("p", { className: "truncate font-mono text-muted-foreground text-xs", children: data.mediaType }))] }) })] }) })] }));
+}
+export function PromptInputAttachments({ children, className, ...props }) {
+    const attachments = usePromptInputAttachments();
+    if (!attachments.files.length) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("flex flex-wrap items-center gap-2 p-3", className), ...props, children: attachments.files.map((file) => (_jsx(Fragment, { children: children(file) }, file.id))) }));
+}
+export const PromptInputActionAddAttachments = ({ label = "Add photos or files", ...props }) => {
+    const attachments = usePromptInputAttachments();
+    return (_jsxs(DropdownMenuItem, { ...props, onSelect: (e) => {
+            e.preventDefault();
+            attachments.openFileDialog();
+        }, children: [_jsx(ImageIcon, { className: "mr-2 size-4" }), " ", label] }));
+};
+export const PromptInput = ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ...props }) => {
+    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;
+        }
+    }, []);
+    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) : 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;
+    useEffect(() => {
+        if (!usingProvider)
+            return;
+        controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+    }, [usingProvider, controller]);
+    useEffect(() => {
+        if (syncHiddenInput && inputRef.current && files.length === 0) {
+            inputRef.current.value = "";
+        }
+    }, [files, syncHiddenInput]);
+    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") || "";
+            })();
+        if (!usingProvider) {
+            form.reset();
+        }
+        Promise.all(files.map(async ({ id, ...item }) => {
+            if (item.url?.startsWith("blob:")) {
+                return {
+                    ...item,
+                    url: await convertBlobUrlToDataUrl(item.url),
+                };
+            }
+            return item;
+        })).then((convertedFiles) => {
+            try {
+                const result = onSubmit({ text, files: convertedFiles }, event);
+                if (result instanceof Promise) {
+                    result
+                        .then(() => {
+                        clear();
+                        if (usingProvider) {
+                            controller.textInput.clear();
+                        }
+                    })
+                        .catch(() => {
+                        // Don't clear on error
+                    });
+                }
+                else {
+                    clear();
+                    if (usingProvider) {
+                        controller.textInput.clear();
+                    }
+                }
+            }
+            catch (_error) {
+                // Don't clear on error
+            }
+        });
+    };
+    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "hidden", ref: anchorRef }), _jsx("input", { accept: accept, "aria-label": "Upload files", className: "hidden", multiple: multiple, onChange: handleChange, ref: inputRef, title: "Upload files", type: "file" }), _jsx("form", { className: cn("w-full", className), onSubmit: handleSubmit, ...props, children: _jsx(InputGroup, { children: children }) })] }));
+    return usingProvider ? (inner) : (_jsx(LocalAttachmentsContext.Provider, { value: ctx, children: inner }));
+};
+export const PromptInputBody = ({ className, ...props }) => (_jsx("div", { className: cn("contents", className), ...props }));
+export const 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();
+            const form = e.currentTarget.form;
+            const submitButton = form?.querySelector('button[type="submit"]');
+            if (submitButton?.disabled) {
+                return;
+            }
+            form?.requestSubmit();
+        }
+        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 }));
+};
+export const PromptInputHeader = ({ className, ...props }) => (_jsx(InputGroupAddon, { align: "block-end", className: cn("order-first flex-wrap gap-1", className), ...props }));
+export const PromptInputFooter = ({ className, ...props }) => (_jsx(InputGroupAddon, { align: "block-end", className: cn("justify-between gap-1", className), ...props }));
+export const PromptInputTools = ({ className, ...props }) => (_jsx("div", { className: cn("flex items-center gap-1", className), ...props }));
+export const 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 }));
+};
+export const PromptInputActionMenu = (props) => (_jsx(DropdownMenu, { ...props }));
+export const PromptInputActionMenuTrigger = ({ className, children, ...props }) => (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(PromptInputButton, { className: className, ...props, children: children ?? _jsx(PlusIcon, { className: "size-4" }) }) }));
+export const PromptInputActionMenuContent = ({ className, ...props }) => (_jsx(DropdownMenuContent, { align: "start", className: cn(className), ...props }));
+export const PromptInputActionMenuItem = ({ className, ...props }) => _jsx(DropdownMenuItem, { className: cn(className), ...props });
+export const PromptInputSubmit = ({ className, variant = "default", size = "icon-sm", status, children, ...props }) => {
+    let Icon = _jsx(CornerDownLeftIcon, { className: "size-4" });
+    if (status === "submitted") {
+        Icon = _jsx(Loader2Icon, { className: "size-4 animate-spin" });
+    }
+    else if (status === "streaming") {
+        Icon = _jsx(SquareIcon, { className: "size-4" });
+    }
+    else if (status === "error") {
+        Icon = _jsx(XIcon, { className: "size-4" });
+    }
+    return (_jsx(InputGroupButton, { "aria-label": "Submit", className: cn(className), size: size, type: "submit", variant: variant, ...props, children: children ?? Icon }));
+};
+export const PromptInputSpeechButton = ({ className, textareaRef, onTranscriptionChange, ...props }) => {
+    const [isListening, setIsListening] = useState(false);
+    const [recognition, setRecognition] = useState(null);
+    const recognitionRef = useRef(null);
+    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 = "";
+                const results = Array.from(event.results);
+                for (const result of results) {
+                    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(PromptInputButton, { className: cn("relative transition-all duration-200", isListening && "animate-pulse bg-accent text-accent-foreground", className), disabled: !recognition, onClick: toggleListening, ...props, children: _jsx(MicIcon, { className: "size-4" }) }));
+};
+export const PromptInputSelect = (props) => _jsx(Select, { ...props });
+export const PromptInputSelectTrigger = ({ className, ...props }) => (_jsx(SelectTrigger, { className: cn("border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors", "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground", className), ...props }));
+export const PromptInputSelectContent = ({ className, ...props }) => _jsx(SelectContent, { className: cn(className), ...props });
+export const PromptInputSelectItem = ({ className, ...props }) => (_jsx(SelectItem, { className: cn(className), ...props }));
+export const PromptInputSelectValue = ({ className, ...props }) => (_jsx(SelectValue, { className: cn(className), ...props }));
+export const PromptInputHoverCard = ({ openDelay = 0, closeDelay = 0, ...props }) => (_jsx(HoverCard, { closeDelay: closeDelay, openDelay: openDelay, ...props }));
+export const PromptInputHoverCardTrigger = (props) => (_jsx(HoverCardTrigger, { ...props }));
+export const PromptInputHoverCardContent = ({ align = "start", ...props }) => _jsx(HoverCardContent, { align: align, ...props });
+export const PromptInputTabsList = ({ className, ...props }) => (_jsx("div", { className: cn(className), ...props }));
+export const PromptInputTab = ({ className, ...props }) => (_jsx("div", { className: cn(className), ...props }));
+export const PromptInputTabLabel = ({ className, ...props }) => (_jsx("h3", { className: cn("mb-2 px-3 font-medium text-muted-foreground text-xs", className), ...props }));
+export const PromptInputTabBody = ({ className, ...props }) => (_jsx("div", { className: cn("space-y-1", className), ...props }));
+export const PromptInputTabItem = ({ className, ...props }) => (_jsx("div", { className: cn("flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent", className), ...props }));
+export const PromptInputCommand = ({ className, ...props }) => (_jsx(Command, { className: cn(className), ...props }));
+export const PromptInputCommandInput = ({ className, ...props }) => (_jsx(CommandInput, { className: cn(className), ...props }));
+export const PromptInputCommandList = ({ className, ...props }) => (_jsx(CommandList, { className: cn(className), ...props }));
+export const PromptInputCommandEmpty = ({ className, ...props }) => (_jsx(CommandEmpty, { className: cn(className), ...props }));
+export const PromptInputCommandGroup = ({ className, ...props }) => (_jsx(CommandGroup, { className: cn(className), ...props }));
+export const PromptInputCommandItem = ({ className, ...props }) => (_jsx(CommandItem, { className: cn(className), ...props }));
+export const PromptInputCommandSeparator = ({ className, ...props }) => _jsx(CommandSeparator, { className: cn(className), ...props });

package/dist/components/organisms/queue/index.d.ts

@@ -0,0 +1,2 @@
+export { Queue, QueueItem, QueueItemAction, type QueueItemActionProps, QueueItemActions, type QueueItemActionsProps, QueueItemAttachment, type QueueItemAttachmentProps, QueueItemContent, type QueueItemContentProps, QueueItemDescription, type QueueItemDescriptionProps, QueueItemFile, type QueueItemFileProps, QueueItemImage, type QueueItemImageProps, QueueItemIndicator, type QueueItemIndicatorProps, type QueueItemProps, QueueList, type QueueListProps, type QueueMessage, type QueueMessagePart, type QueueProps, QueueSection, QueueSectionContent, type QueueSectionContentProps, QueueSectionLabel, type QueueSectionLabelProps, type QueueSectionProps, QueueSectionTrigger, type QueueSectionTriggerProps, type QueueTodo, } from "./queue";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/queue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/queue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,eAAe,EACf,KAAK,oBAAoB,EACzB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,aAAa,EACb,KAAK,kBAAkB,EACvB,cAAc,EACd,KAAK,mBAAmB,EACxB,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,cAAc,EACnB,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,YAAY,EACZ,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,SAAS,GACf,MAAM,SAAS,CAAC"}

package/dist/components/organisms/queue/index.js

@@ -0,0 +1 @@
+export { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemAttachment, QueueItemContent, QueueItemDescription, QueueItemFile, QueueItemImage, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger, } from "./queue";

package/dist/components/organisms/queue/queue.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Queue Component - Flowtomic UI
+ *
+ * Componente de fila para exibir mensagens e tarefas
+ */
+import type { ComponentProps } from "react";
+import { Button, Collapsible, CollapsibleContent, ScrollArea } from "../../atoms";
+export type QueueMessagePart = {
+    type: string;
+    text?: string;
+    url?: string;
+    filename?: string;
+    mediaType?: string;
+};
+export type QueueMessage = {
+    id: string;
+    parts: QueueMessagePart[];
+};
+export type QueueTodo = {
+    id: string;
+    title: string;
+    description?: string;
+    status?: "pending" | "completed";
+};
+export type QueueItemProps = ComponentProps<"li">;
+export declare const QueueItem: ({ className, ...props }: QueueItemProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemIndicatorProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+export declare const QueueItemIndicator: ({ completed, className, ...props }: QueueItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemContentProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+export declare const QueueItemContent: ({ completed, className, ...props }: QueueItemContentProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemDescriptionProps = ComponentProps<"div"> & {
+    completed?: boolean;
+};
+export declare const QueueItemDescription: ({ completed, className, ...props }: QueueItemDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemActionsProps = ComponentProps<"div">;
+export declare const QueueItemActions: ({ className, ...props }: QueueItemActionsProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemActionProps = Omit<ComponentProps<typeof Button>, "variant" | "size">;
+export declare const QueueItemAction: ({ className, ...props }: QueueItemActionProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemAttachmentProps = ComponentProps<"div">;
+export declare const QueueItemAttachment: ({ className, ...props }: QueueItemAttachmentProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemImageProps = ComponentProps<"img">;
+export declare const QueueItemImage: ({ className, ...props }: QueueItemImageProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueItemFileProps = ComponentProps<"span">;
+export declare const QueueItemFile: ({ children, className, ...props }: QueueItemFileProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueListProps = ComponentProps<typeof ScrollArea>;
+export declare const QueueList: ({ children, className, ...props }: QueueListProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueSectionProps = ComponentProps<typeof Collapsible>;
+export declare const QueueSection: ({ className, defaultOpen, ...props }: QueueSectionProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueSectionTriggerProps = ComponentProps<"button">;
+export declare const QueueSectionTrigger: ({ children, className, ...props }: QueueSectionTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
+    count?: number;
+    label: string;
+    icon?: React.ReactNode;
+};
+export declare const QueueSectionLabel: ({ count, label, icon, className, ...props }: QueueSectionLabelProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const QueueSectionContent: ({ className, ...props }: QueueSectionContentProps) => import("react/jsx-runtime").JSX.Element;
+export type QueueProps = ComponentProps<"div">;
+export declare const Queue: ({ className, ...props }: QueueProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=queue.d.ts.map

package/dist/components/organisms/queue/queue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/queue/queue.tsx"],"names":[],"mappings":"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"}

package/dist/components/organisms/queue/queue.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Queue Component - Flowtomic UI
+ *
+ * Componente de fila para exibir mensagens e tarefas
+ */
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, ScrollArea, } from "../../atoms";
+export const QueueItem = ({ className, ...props }) => (_jsx("li", { className: cn("group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted", className), ...props }));
+export const QueueItemIndicator = ({ completed = false, className, ...props }) => (_jsx("span", { className: cn("mt-0.5 inline-block size-2.5 rounded-full border", completed
+        ? "border-muted-foreground/20 bg-muted-foreground/10"
+        : "border-muted-foreground/50", className), ...props }));
+export const QueueItemContent = ({ completed = false, className, ...props }) => (_jsx("span", { className: cn("line-clamp-1 grow break-words", completed ? "text-muted-foreground/50 line-through" : "text-muted-foreground", className), ...props }));
+export const QueueItemDescription = ({ completed = false, className, ...props }) => (_jsx("div", { className: cn("ml-6 text-xs", completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground", className), ...props }));
+export const QueueItemActions = ({ className, ...props }) => (_jsx("div", { className: cn("flex gap-1", className), ...props }));
+export const QueueItemAction = ({ className, ...props }) => (_jsx(Button, { className: cn("size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100", className), size: "icon", type: "button", variant: "ghost", ...props }));
+export const QueueItemAttachment = ({ className, ...props }) => (_jsx("div", { className: cn("mt-1 flex flex-wrap gap-2", className), ...props }));
+export const QueueItemImage = ({ className, ...props }) => (_jsx("img", { alt: "", className: cn("h-8 w-8 rounded border object-cover", className), height: 32, width: 32, ...props }));
+export const QueueItemFile = ({ children, className, ...props }) => (_jsxs("span", { className: cn("flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs", className), ...props, children: [_jsx(PaperclipIcon, { size: 12 }), _jsx("span", { className: "max-w-[100px] truncate", children: children })] }));
+export const QueueList = ({ children, className, ...props }) => (_jsx(ScrollArea, { className: cn("-mb-1 mt-2", className), ...props, children: _jsx("div", { className: "max-h-40 pr-4", children: _jsx("ul", { children: children }) }) }));
+export const QueueSection = ({ className, defaultOpen = true, ...props }) => (_jsx(Collapsible, { className: cn(className), defaultOpen: defaultOpen, ...props }));
+export const QueueSectionTrigger = ({ children, className, ...props }) => (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { className: cn("group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted", className), type: "button", ...props, children: children }) }));
+export const QueueSectionLabel = ({ count, label, icon, className, ...props }) => (_jsxs("span", { className: cn("flex items-center gap-2", className), ...props, children: [_jsx(ChevronDownIcon, { className: "group-data-[state=closed]:-rotate-90 size-4 transition-transform" }), icon, _jsxs("span", { children: [count, " ", label] })] }));
+export const QueueSectionContent = ({ className, ...props }) => (_jsx(CollapsibleContent, { className: cn(className), ...props }));
+export const Queue = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs", className), ...props }));

package/dist/components/organisms/reasoning/index.d.ts

@@ -0,0 +1,2 @@
+export { Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, } from "./reasoning";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/reasoning/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/reasoning/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,aAAa,CAAC"}

package/dist/components/organisms/reasoning/index.js

@@ -0,0 +1 @@
+export { Reasoning, ReasoningContent, ReasoningTrigger, } from "./reasoning";