@gugacoder/agentic-chat 0.2.0

package/dist/components/Chat.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import type { DisplayRendererMap } from "../display/registry.js";
+export interface ChatProps {
+    endpoint: string;
+    token: string;
+    sessionId: string;
+    initialMessages?: Array<{
+        id?: string;
+        role: "user" | "assistant";
+        content: string;
+        parts?: unknown[];
+    }>;
+    displayRenderers?: DisplayRendererMap;
+    placeholder?: string;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    enableAttachments?: boolean;
+    enableVoice?: boolean;
+}
+export declare function Chat({ endpoint, token, sessionId, initialMessages, displayRenderers, placeholder, header, footer, className, enableAttachments, enableVoice, }: ChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { ChatProvider } from "../hooks/ChatProvider.js";
+import { useChatContext } from "../hooks/ChatProvider.js";
+import { MessageList } from "./MessageList.js";
+import { MessageInput } from "./MessageInput.js";
+function ChatContent({ displayRenderers, placeholder, enableAttachments = true, enableVoice = true }) {
+    const { messages, input, setInput, handleSubmit, isLoading, isUploading, stop, error, reload, buildAttachmentUrl } = useChatContext();
+    return (_jsxs(_Fragment, { children: [_jsx(MessageList, { messages: messages, isLoading: isLoading, displayRenderers: displayRenderers, attachmentUrl: buildAttachmentUrl, error: error ?? undefined, onRetry: reload }), _jsx("div", { className: "px-4 pb-4", children: _jsx(MessageInput, { input: input, setInput: setInput, handleSubmit: handleSubmit, isLoading: isLoading, isUploading: isUploading, stop: stop, placeholder: placeholder, enableAttachments: enableAttachments, enableVoice: enableVoice }) })] }));
+}
+export function Chat({ endpoint, token, sessionId, initialMessages, displayRenderers, placeholder, header, footer, className, enableAttachments, enableVoice, }) {
+    return (_jsx(ChatProvider, { endpoint: endpoint, token: token, sessionId: sessionId, initialMessages: initialMessages, children: _jsxs("div", { className: cn("flex flex-col h-full bg-background text-foreground", className), children: [header, _jsx(ChatContent, { displayRenderers: displayRenderers, placeholder: placeholder, enableAttachments: enableAttachments, enableVoice: enableVoice }), footer] }) }, sessionId));
+}

package/dist/components/ErrorNote.d.ts

@@ -0,0 +1,5 @@
+export interface ErrorNoteProps {
+    onRetry?: () => void;
+    className?: string;
+}
+export declare function ErrorNote({ onRetry, className }: ErrorNoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ErrorNote.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, RotateCcw } from "lucide-react";
+import { cn } from "../lib/utils.js";
+export function ErrorNote({ onRetry, className }) {
+    return (_jsxs("div", { role: "alert", className: cn("flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive", className), children: [_jsx(AlertTriangle, { className: "size-4 shrink-0" }), _jsx("span", { className: "flex-1", children: "Falha ao processar mensagem" }), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 transition-colors", children: [_jsx(RotateCcw, { className: "size-3.5" }), "Tentar novamente"] }))] }));
+}

package/dist/components/LazyRender.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+interface LazyRenderProps {
+    children: ReactNode;
+    minHeight?: number;
+    rootMargin?: string;
+}
+export declare function LazyRender({ children, minHeight, rootMargin }: LazyRenderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LazyRender.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+export function LazyRender({ children, minHeight = 120, rootMargin = "200px" }) {
+    const ref = useRef(null);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setVisible(true);
+                observer.disconnect();
+            }
+        }, { rootMargin });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [rootMargin]);
+    if (visible)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx("div", { ref: ref, className: "flex items-center justify-center text-muted-foreground text-xs rounded-md bg-muted/20 animate-pulse", style: { minHeight }, children: "Carregando..." }));
+}

package/dist/components/Markdown.d.ts

@@ -0,0 +1,5 @@
+interface MarkdownProps {
+    children: string;
+}
+export declare const Markdown: import("react").NamedExoticComponent<MarkdownProps>;
+export {};

package/dist/components/Markdown.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import { cn } from "../lib/utils.js";
+const REMARK_PLUGINS = [remarkGfm];
+const REHYPE_PLUGINS = [rehypeHighlight];
+const components = {
+    h1({ children }) {
+        return _jsx("h1", { className: "text-xl font-semibold", style: { marginTop: "20px", marginBottom: "8px" }, children: children });
+    },
+    h2({ children }) {
+        return _jsx("h2", { className: "text-lg font-semibold", style: { marginTop: "20px", marginBottom: "8px" }, children: children });
+    },
+    h3({ children }) {
+        return _jsx("h3", { className: "text-base font-semibold", style: { marginTop: "20px", marginBottom: "8px" }, children: children });
+    },
+    h4({ children }) {
+        return _jsx("h4", { className: "font-semibold", style: { marginTop: "20px", marginBottom: "8px" }, children: children });
+    },
+    p({ children }) {
+        return _jsx("p", { className: "mb-4 last:mb-0", children: children });
+    },
+    ul({ children }) {
+        return _jsx("ul", { style: { paddingLeft: "24px", marginTop: "8px", marginBottom: "8px", listStyleType: "disc" }, children: children });
+    },
+    ol({ children }) {
+        return _jsx("ol", { style: { paddingLeft: "24px", marginTop: "8px", marginBottom: "8px", listStyleType: "decimal" }, children: children });
+    },
+    li({ children }) {
+        return _jsx("li", { style: { marginTop: "4px", marginBottom: "4px" }, children: children });
+    },
+    hr() {
+        return _jsx("hr", { className: "border-border", style: { marginTop: "16px", marginBottom: "16px" } });
+    },
+    pre({ children }) {
+        return (_jsx("pre", { className: "bg-muted border border-border rounded-md overflow-hidden", style: { marginTop: "12px", marginBottom: "12px" }, children: children }));
+    },
+    code({ className, children }) {
+        const isBlock = className?.startsWith("language-");
+        if (isBlock) {
+            return (_jsx("code", { className: cn("block p-4 overflow-x-auto font-mono text-sm", className), children: children }));
+        }
+        return (_jsx("code", { className: "bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-sm", children: children }));
+    },
+    a({ href, children }) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-2 hover:opacity-80", children: children }));
+    },
+    blockquote({ children }) {
+        return (_jsx("blockquote", { className: "border-l-[3px] border-border py-1 px-3 text-muted-foreground", style: { marginTop: "12px", marginBottom: "12px" }, children: children }));
+    },
+    table({ children }) {
+        return (_jsx("div", { className: "overflow-x-auto", children: _jsx("table", { className: "w-full border-collapse text-sm", children: children }) }));
+    },
+    th({ children }) {
+        return (_jsx("th", { className: "border border-border px-3 py-1.5 text-left font-semibold bg-muted", children: children }));
+    },
+    td({ children }) {
+        return (_jsx("td", { className: "border border-border px-3 py-1.5 text-left", children: children }));
+    },
+};
+export const Markdown = memo(function Markdown({ children }) {
+    return (_jsx("div", { className: "text-foreground text-sm", style: { lineHeight: "1.625em" }, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: REHYPE_PLUGINS, components: components, children: children }) }));
+});

package/dist/components/MessageBubble.d.ts

@@ -0,0 +1,10 @@
+import type { Message } from "@ai-sdk/react";
+import type { DisplayRendererMap } from "../display/registry.js";
+export interface MessageBubbleProps {
+    message: Message;
+    isStreaming?: boolean;
+    displayRenderers?: DisplayRendererMap;
+    attachmentUrl?: (ref: string) => string;
+    className?: string;
+}
+export declare const MessageBubble: import("react").NamedExoticComponent<MessageBubbleProps>;

package/dist/components/MessageBubble.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState, useCallback } from "react";
+import { cn } from "../lib/utils.js";
+import { Markdown } from "./Markdown.js";
+import { StreamingIndicator } from "./StreamingIndicator.js";
+import { PartRenderer } from "../parts/PartRenderer.js";
+import { Copy, Check } from "lucide-react";
+function extractText(message) {
+    if (message.content)
+        return message.content;
+    if (!Array.isArray(message.parts))
+        return "";
+    return message.parts
+        .filter((p) => p.type === "text")
+        .map((p) => p.text)
+        .join("\n");
+}
+function CopyButton({ text }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = useCallback(async () => {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [text]);
+    return (_jsx("button", { type: "button", onClick: handleCopy, className: cn("h-7 w-7 flex items-center justify-center rounded-lg transition-all", "text-muted-foreground/50 opacity-0 group-hover/bubble:opacity-100", "hover:bg-muted/50 hover:text-muted-foreground"), "aria-label": copied ? "Copiado" : "Copiar mensagem", children: copied ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(Copy, { className: "h-3.5 w-3.5" }) }));
+}
+export const MessageBubble = memo(function MessageBubble({ message, isStreaming, displayRenderers, attachmentUrl, className }) {
+    const isUser = message.role === "user";
+    const hasParts = Array.isArray(message.parts) && message.parts.length > 0;
+    return (_jsxs("div", { className: cn("group/bubble", isUser ? "flex flex-col items-end" : "flex flex-col items-start"), children: [_jsxs("div", { className: cn("min-w-0 overflow-hidden", isUser
+                    ? "max-w-[80%] rounded-lg rounded-br-sm bg-muted text-foreground px-4 py-2.5"
+                    : "w-full text-foreground py-1", className), children: [hasParts
+                        ? _jsx("div", { className: "flex flex-col gap-3", children: message.parts.map((part, i) => (_jsx(PartRenderer, { part: part, isStreaming: isStreaming, displayRenderers: displayRenderers, attachmentUrl: attachmentUrl }, i))) })
+                        : _jsx(Markdown, { children: message.content }), isStreaming && !isUser && _jsx(StreamingIndicator, {})] }), !isStreaming && (_jsx("div", { className: cn("flex items-center gap-0.5 mt-0.5", isUser ? "justify-end" : "justify-start"), children: _jsx(CopyButton, { text: extractText(message) }) }))] }));
+}, (prev, next) => prev.message === next.message
+    && prev.isStreaming === next.isStreaming
+    && prev.displayRenderers === next.displayRenderers
+    && prev.attachmentUrl === next.attachmentUrl
+    && prev.className === next.className);

package/dist/components/MessageInput.d.ts

@@ -0,0 +1,19 @@
+export interface Attachment {
+    id: string;
+    file: File;
+    preview?: string;
+    type: "image" | "file" | "audio";
+}
+export interface MessageInputProps {
+    input: string;
+    setInput: (value: string) => void;
+    handleSubmit: (e: React.FormEvent, attachments?: Attachment[]) => void;
+    isLoading?: boolean;
+    isUploading?: boolean;
+    stop?: () => void;
+    placeholder?: string;
+    className?: string;
+    enableAttachments?: boolean;
+    enableVoice?: boolean;
+}
+export declare function MessageInput({ input, setInput, handleSubmit, isLoading, isUploading, stop, placeholder, className, enableAttachments, enableVoice, }: MessageInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MessageInput.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from "react";
+import { Send, Square, Plus, Mic, X, Camera, Paperclip, Image as ImageIcon, CircleStop, Loader2 } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+// ── Constants ──
+const LINE_HEIGHT_PX = 24;
+const MAX_ROWS = 10;
+const MULTILINE_THRESHOLD_PX = LINE_HEIGHT_PX * 1.5; // 36px — above this = multiline
+// ── Recording Hook ──
+function useAudioRecording(onComplete) {
+    const [isRecording, setIsRecording] = useState(false);
+    const [elapsed, setElapsed] = useState(0);
+    const mediaRecorderRef = useRef(null);
+    const chunksRef = useRef([]);
+    const timerRef = useRef();
+    const start = useCallback(async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            const recorder = new MediaRecorder(stream);
+            mediaRecorderRef.current = recorder;
+            chunksRef.current = [];
+            recorder.ondataavailable = (e) => { if (e.data.size > 0)
+                chunksRef.current.push(e.data); };
+            recorder.onstop = () => {
+                const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+                const file = new File([blob], `audio-${Date.now()}.webm`, { type: "audio/webm" });
+                stream.getTracks().forEach((t) => t.stop());
+                onComplete(file);
+            };
+            recorder.start();
+            setIsRecording(true);
+            setElapsed(0);
+            timerRef.current = setInterval(() => setElapsed((s) => s + 1), 1000);
+        }
+        catch { /* permission denied */ }
+    }, [onComplete]);
+    const stop = useCallback(() => {
+        mediaRecorderRef.current?.stop();
+        setIsRecording(false);
+        clearInterval(timerRef.current);
+    }, []);
+    const cancel = useCallback(() => {
+        if (mediaRecorderRef.current) {
+            mediaRecorderRef.current.onstop = null;
+            mediaRecorderRef.current.stop();
+            mediaRecorderRef.current.stream.getTracks().forEach((t) => t.stop());
+        }
+        setIsRecording(false);
+        setElapsed(0);
+        clearInterval(timerRef.current);
+    }, []);
+    useEffect(() => () => clearInterval(timerRef.current), []);
+    return { isRecording, elapsed, start, stop, cancel };
+}
+function formatTime(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, "0")}`;
+}
+// ── Attachment Preview ──
+function AttachmentPreview({ attachment, onRemove }) {
+    return (_jsxs("div", { className: "relative group shrink-0", children: [attachment.type === "image" && attachment.preview ? (_jsx("div", { className: "relative h-16 w-16 rounded-lg overflow-hidden border border-border/50", children: _jsx("img", { src: attachment.preview, alt: attachment.file.name, className: "h-full w-full object-cover" }) })) : (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border/50 bg-background/50 px-3 py-2", children: [_jsx(Paperclip, { className: "h-4 w-4 text-muted-foreground shrink-0" }), _jsx("span", { className: "text-xs text-muted-foreground truncate max-w-[120px]", children: attachment.file.name })] })), _jsx("button", { type: "button", onClick: onRemove, className: "absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-foreground text-background flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity", "aria-label": "Remover", children: _jsx(X, { className: "h-3 w-3" }) })] }));
+}
+// ── Plus Menu ──
+function PlusMenu({ onFile, onCamera, onGallery, onClose }) {
+    const menuRef = useRef(null);
+    useEffect(() => {
+        function handleClick(e) {
+            if (menuRef.current && !menuRef.current.contains(e.target))
+                onClose();
+        }
+        document.addEventListener("mousedown", handleClick);
+        return () => document.removeEventListener("mousedown", handleClick);
+    }, [onClose]);
+    return (_jsx("div", { ref: menuRef, className: "absolute bottom-full left-0 mb-2 rounded-xl border border-border bg-popover text-popover-foreground shadow-lg py-1 min-w-[160px] z-10", children: [
+            { icon: Paperclip, label: "Arquivo", onClick: onFile },
+            { icon: Camera, label: "Camera", onClick: onCamera },
+            { icon: ImageIcon, label: "Galeria", onClick: onGallery },
+        ].map((item) => (_jsxs("button", { type: "button", onClick: () => { item.onClick(); onClose(); }, className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm hover:bg-muted/50 transition-colors", children: [_jsx(item.icon, { className: "h-4 w-4 text-muted-foreground" }), item.label] }, item.label))) }));
+}
+// ── Main Component ──
+export function MessageInput({ input, setInput, handleSubmit, isLoading, isUploading = false, stop, placeholder = "Caixa de mensagem...", className, enableAttachments = true, enableVoice = true, }) {
+    const textareaRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const imageInputRef = useRef(null);
+    const containerRef = useRef(null);
+    const [attachments, setAttachments] = useState([]);
+    const [showMenu, setShowMenu] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isMultiline, setIsMultiline] = useState(false);
+    const historyRef = useRef([]);
+    const historyPosRef = useRef(-1);
+    const savedInputRef = useRef("");
+    const onRecordingComplete = useCallback((file) => {
+        const att = { id: crypto.randomUUID(), file, type: "audio" };
+        setAttachments((prev) => [...prev, att]);
+    }, []);
+    const { isRecording, elapsed, start: startRecording, stop: stopRecording, cancel: cancelRecording } = useAudioRecording(onRecordingComplete);
+    const hasContent = input.trim().length > 0 || attachments.length > 0;
+    // Auto-focus
+    useEffect(() => { textareaRef.current?.focus(); }, []);
+    // Auto-expand — stable measurement with height:auto
+    useEffect(() => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        const scrollH = el.scrollHeight;
+        const maxH = MAX_ROWS * LINE_HEIGHT_PX;
+        const clampedH = Math.min(scrollH, maxH);
+        el.style.height = `${clampedH}px`;
+        setIsMultiline(scrollH > MULTILINE_THRESHOLD_PX);
+    }, [input]);
+    // ── Attachments ──
+    const addFiles = useCallback((files) => {
+        const newAttachments = Array.from(files).map((file) => {
+            const isImage = file.type.startsWith("image/");
+            const att = { id: crypto.randomUUID(), file, type: isImage ? "image" : "file" };
+            if (isImage) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    setAttachments((prev) => prev.map((a) => (a.id === att.id ? { ...a, preview: e.target?.result } : a)));
+                };
+                reader.readAsDataURL(file);
+            }
+            return att;
+        });
+        setAttachments((prev) => [...prev, ...newAttachments]);
+    }, []);
+    const removeAttachment = useCallback((id) => {
+        setAttachments((prev) => prev.filter((a) => a.id !== id));
+    }, []);
+    // ── Drag & Drop ──
+    const handleDragOver = useCallback((e) => { e.preventDefault(); setIsDragging(true); }, []);
+    const handleDragLeave = useCallback((e) => {
+        if (containerRef.current && !containerRef.current.contains(e.relatedTarget))
+            setIsDragging(false);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (e.dataTransfer.files.length)
+            addFiles(e.dataTransfer.files);
+    }, [addFiles]);
+    // ── Clipboard Paste ──
+    const handlePaste = useCallback((e) => {
+        const files = [];
+        for (let i = 0; i < e.clipboardData.items.length; i++) {
+            if (e.clipboardData.items[i].kind === "file") {
+                const file = e.clipboardData.items[i].getAsFile();
+                if (file)
+                    files.push(file);
+            }
+        }
+        if (files.length) {
+            e.preventDefault();
+            addFiles(files);
+        }
+    }, [addFiles]);
+    // ── Submit ──
+    function onSubmit(e) {
+        e.preventDefault();
+        if (!hasContent || isLoading)
+            return;
+        if (input.trim()) {
+            historyRef.current.unshift(input);
+            if (historyRef.current.length > 50)
+                historyRef.current.length = 50;
+        }
+        historyPosRef.current = -1;
+        savedInputRef.current = "";
+        handleSubmit(e, attachments.length > 0 ? attachments : undefined);
+        setAttachments([]);
+    }
+    function handleKeyDown(e) {
+        // History navigation — only when cursor is at start/end and not multiline content
+        const el = textareaRef.current;
+        if (e.key === "ArrowUp" && historyRef.current.length > 0 && el) {
+            const atTop = el.selectionStart === 0 && el.selectionEnd === 0;
+            const isEmpty = input === "";
+            if (atTop || isEmpty) {
+                e.preventDefault();
+                if (historyPosRef.current === -1)
+                    savedInputRef.current = input;
+                const nextPos = Math.min(historyPosRef.current + 1, historyRef.current.length - 1);
+                if (nextPos !== historyPosRef.current) {
+                    historyPosRef.current = nextPos;
+                    setInput(historyRef.current[nextPos]);
+                }
+                return;
+            }
+        }
+        if (e.key === "ArrowDown" && historyPosRef.current >= 0 && el) {
+            const atBottom = el.selectionStart === input.length;
+            if (atBottom) {
+                e.preventDefault();
+                const nextPos = historyPosRef.current - 1;
+                historyPosRef.current = nextPos;
+                setInput(nextPos < 0 ? savedInputRef.current : historyRef.current[nextPos]);
+                return;
+            }
+        }
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            if (hasContent && !isLoading)
+                onSubmit(e);
+        }
+    }
+    // ── Render ──
+    return (_jsxs("div", { ref: containerRef, onDragOver: enableAttachments ? handleDragOver : undefined, onDragLeave: enableAttachments ? handleDragLeave : undefined, onDrop: enableAttachments ? handleDrop : undefined, className: cn("relative border border-border/50 bg-muted transition-[border-radius] duration-200", isMultiline || attachments.length > 0 ? "rounded-2xl" : "rounded-full", isDragging && "ring-2 ring-primary/50", className), children: [isDragging && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] bg-primary/5 border-2 border-dashed border-primary/30", children: _jsx("span", { className: "text-sm text-primary font-medium", children: "Solte aqui" }) })), isRecording && (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: cancelRecording, className: "h-8 w-8 rounded-full shrink-0 text-muted-foreground", "aria-label": "Cancelar", children: _jsx(X, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-red-500 animate-pulse" }), _jsx("span", { className: "text-sm font-medium tabular-nums", children: formatTime(elapsed) }), _jsx("div", { className: "flex-1 flex items-center gap-0.5 px-2", children: Array.from({ length: 20 }, (_, i) => (_jsx("span", { className: "w-1 bg-foreground/30 rounded-full", style: { height: `${4 + Math.random() * 12}px` } }, i))) })] }), _jsx(Button, { type: "button", size: "icon", onClick: stopRecording, className: "h-8 w-8 rounded-full shrink-0", "aria-label": "Parar", children: _jsx(CircleStop, { className: "h-4 w-4" }) })] })), _jsxs("div", { className: cn(isRecording && "hidden"), children: [(attachments.length > 0 || isUploading) && (_jsxs("div", { className: "flex flex-wrap gap-2 px-4 pt-3 pb-1", children: [attachments.map((att) => (_jsx(AttachmentPreview, { attachment: att, onRemove: () => removeAttachment(att.id) }, att.id))), isUploading && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border/50 bg-background/50 px-3 py-2 text-xs text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin shrink-0" }), _jsx("span", { children: "Enviando arquivos..." })] }))] })), _jsxs("div", { className: cn("flex gap-1 p-1.5", isMultiline ? "items-end" : "items-center"), children: [enableAttachments && (_jsxs("div", { className: "relative shrink-0", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full", onClick: () => setShowMenu(!showMenu), "aria-label": "Adicionar", children: _jsx(Plus, { className: "h-4 w-4" }) }), showMenu && (_jsx(PlusMenu, { onFile: () => fileInputRef.current?.click(), onCamera: () => imageInputRef.current?.click(), onGallery: () => imageInputRef.current?.click(), onClose: () => setShowMenu(false) }))] })), _jsx("textarea", { ref: textareaRef, value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleKeyDown, onPaste: enableAttachments ? handlePaste : undefined, placeholder: placeholder, rows: 1, disabled: isLoading, "aria-label": "Mensagem", className: "flex-1 min-w-0 bg-transparent text-foreground text-sm resize-none outline-none placeholder:text-muted-foreground leading-6 py-1 px-2" }), _jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [enableVoice && !hasContent && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 rounded-full text-muted-foreground", onClick: startRecording, "aria-label": "Gravar audio", children: _jsx(Mic, { className: "h-4 w-4" }) })), isLoading && stop ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: stop, className: "h-8 w-8 rounded-full", "aria-label": "Parar gera\u00E7\u00E3o", children: _jsx(Square, { className: "h-4 w-4" }) })) : (_jsx(Button, { type: "button", size: "icon", onClick: onSubmit, disabled: !hasContent || !!isLoading, className: "h-8 w-8 rounded-full", "aria-label": "Enviar mensagem", children: _jsx(Send, { className: "h-4 w-4" }) }))] })] })] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (e) => { if (e.target.files)
+                    addFiles(e.target.files); e.target.value = ""; } }), _jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: (e) => { if (e.target.files)
+                    addFiles(e.target.files); e.target.value = ""; } })] }));
+}

package/dist/components/MessageList.d.ts

@@ -0,0 +1,12 @@
+import type { Message } from "@ai-sdk/react";
+import type { DisplayRendererMap } from "../display/registry.js";
+export interface MessageListProps {
+    messages: Message[];
+    isLoading?: boolean;
+    displayRenderers?: DisplayRendererMap;
+    attachmentUrl?: (ref: string) => string;
+    className?: string;
+    error?: Error;
+    onRetry?: () => void;
+}
+export declare function MessageList({ messages, isLoading, displayRenderers, attachmentUrl, className, error, onRetry }: MessageListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MessageList.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { useRef, useEffect, useMemo, useCallback } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { MessageBubble } from "./MessageBubble.js";
+import { StreamingIndicator } from "./StreamingIndicator.js";
+import { ErrorNote } from "./ErrorNote.js";
+import { ScrollBar } from "../ui/scroll-area.js";
+import { cn } from "../lib/utils.js";
+export function MessageList({ messages, isLoading, displayRenderers, attachmentUrl, className, error, onRetry }) {
+    const viewportRef = useRef(null);
+    const isFollowingRef = useRef(true);
+    const lastAssistantIndex = useMemo(() => messages.reduceRight((found, msg, i) => {
+        if (found !== -1)
+            return found;
+        return msg.role === "assistant" ? i : -1;
+    }, -1), [messages]);
+    const virtualizer = useVirtualizer({
+        count: messages.length,
+        getScrollElement: () => viewportRef.current,
+        estimateSize: () => 80,
+        overscan: 5,
+        paddingStart: 16,
+    });
+    // Track scroll position to detect if user is following
+    const handleScroll = useCallback(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const distanceFromBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+        isFollowingRef.current = distanceFromBottom <= 100;
+    }, []);
+    useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        viewport.addEventListener("scroll", handleScroll, { passive: true });
+        return () => viewport.removeEventListener("scroll", handleScroll);
+    }, [handleScroll]);
+    // Auto-scroll to bottom when following
+    useEffect(() => {
+        if (messages.length > 0 && isFollowingRef.current) {
+            virtualizer.scrollToIndex(messages.length - 1, { align: "end" });
+        }
+    }, [messages, virtualizer]);
+    // Auto-scroll when error appears
+    useEffect(() => {
+        if (error && isFollowingRef.current) {
+            const viewport = viewportRef.current;
+            if (viewport)
+                viewport.scrollTop = viewport.scrollHeight;
+        }
+    }, [error]);
+    const virtualItems = virtualizer.getVirtualItems();
+    if (messages.length === 0) {
+        return (_jsxs(ScrollAreaPrimitive.Root, { className: cn("flex-1 relative overflow-hidden", className), children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: viewportRef, className: "h-full w-full rounded-[inherit]", children: _jsx("div", { className: "flex items-center justify-center text-muted-foreground text-sm py-8", children: "Envie uma mensagem para comecar" }) }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+    }
+    return (_jsxs(ScrollAreaPrimitive.Root, { className: cn("flex-1 relative overflow-hidden", className), children: [_jsxs(ScrollAreaPrimitive.Viewport, { ref: viewportRef, className: "h-full w-full rounded-[inherit]", children: [_jsx("div", { className: "relative w-full", style: { height: virtualizer.getTotalSize() + 16 }, children: _jsx("div", { children: virtualItems.map((virtualRow) => {
+                                const message = messages[virtualRow.index];
+                                return (_jsx("div", { "data-index": virtualRow.index, ref: virtualizer.measureElement, className: "pb-3 px-4", style: {
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        right: 0,
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, children: _jsx(MessageBubble, { message: message, isStreaming: virtualRow.index === lastAssistantIndex && isLoading && messages[messages.length - 1]?.role === "assistant", displayRenderers: displayRenderers, attachmentUrl: attachmentUrl }) }, message.id ?? virtualRow.index));
+                            }) }) }), isLoading && messages[messages.length - 1]?.role !== "assistant" && (_jsx("div", { className: "px-4 pb-3", children: _jsx(StreamingIndicator, {}) })), !isLoading && error && messages.length > 0 && messages[messages.length - 1]?.role !== "assistant" && (_jsx("div", { className: "px-4 pb-3", children: _jsx(ErrorNote, { onRetry: onRetry }) }))] }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}

package/dist/components/StreamingIndicator.d.ts

@@ -0,0 +1 @@
+export declare function StreamingIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/components/StreamingIndicator.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function StreamingIndicator() {
+    return (_jsxs("span", { className: "inline-flex items-end gap-1.5 py-1 mt-4", "aria-label": "Gerando resposta...", role: "status", children: [_jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_0ms]" }), _jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_150ms]" }), _jsx("span", { className: "size-1 rounded-full bg-primary animate-[streaming-bounce_1.2s_ease-in-out_infinite_300ms]" }), _jsx("style", { children: `
+        @keyframes streaming-bounce {
+          0%, 60%, 100% { transform: translateY(0); }
+          30% { transform: translateY(-4px); }
+        }
+      ` })] }));
+}

package/dist/conversations/CollapsibleGroup.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface CollapsibleGroupProps {
+    label: string;
+    icon?: React.ReactNode;
+    open: boolean;
+    onToggle: () => void;
+    children: React.ReactNode;
+}
+declare function CollapsibleGroup({ label, icon, open, onToggle, children }: CollapsibleGroupProps): import("react/jsx-runtime").JSX.Element;
+export { CollapsibleGroup };
+export type { CollapsibleGroupProps };

package/dist/conversations/CollapsibleGroup.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { cn } from "../lib/utils.js";
+function CollapsibleGroup({ label, icon, open, onToggle, children }) {
+    return (_jsxs(Collapsible, { open: open, onOpenChange: onToggle, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { className: "flex w-full items-center gap-1 px-2 py-1 hover:bg-accent rounded-md", "aria-expanded": open, children: [_jsx(ChevronRight, { className: cn("size-3 shrink-0 text-muted-foreground transition-transform duration-200", open && "rotate-90") }), icon && _jsx("span", { className: "shrink-0", children: icon }), _jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label })] }) }), _jsx(CollapsibleContent, { children: children })] }));
+}
+export { CollapsibleGroup };

package/dist/conversations/ConversationBar.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+interface ConversationBarProps {
+    title?: string;
+    agentLabel?: string;
+    isLoading?: boolean;
+    onRename?: (title: string) => void;
+    onExport?: () => void;
+    onDelete?: () => void;
+    onBack?: () => void;
+    renameOpen?: boolean;
+    onRenameOpenChange?: (open: boolean) => void;
+    deleteOpen?: boolean;
+    onDeleteOpenChange?: (open: boolean) => void;
+    isPendingRename?: boolean;
+    isPendingDelete?: boolean;
+    renameLabel?: string;
+    exportLabel?: string;
+    deleteLabel?: string;
+    untitledLabel?: string;
+    actionsExtra?: React.ReactNode;
+    menuItemsExtra?: React.ReactNode;
+    afterBar?: React.ReactNode;
+    className?: string;
+}
+declare function ConversationBar({ title, agentLabel, isLoading, onRename, onExport, onDelete, onBack, renameOpen: renameOpenProp, onRenameOpenChange, deleteOpen: deleteOpenProp, onDeleteOpenChange, isPendingRename, isPendingDelete, renameLabel, exportLabel, deleteLabel, untitledLabel, actionsExtra, menuItemsExtra, afterBar, className, }: ConversationBarProps): import("react/jsx-runtime").JSX.Element;
+export { ConversationBar };
+export type { ConversationBarProps };