@codrstudio/openclaude-chat 0.1.0

package/dist/components/Chat.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { DisplayRendererMap } from "../display/registry.js";
+import type { Message } from "../types.js";
+export interface ChatProps {
+    /** Base URL do servico openclaude (ex: http://localhost:9500/api/v1/ai). */
+    endpoint: string;
+    token?: string;
+    /** Sessao live existente. Se omitida, o hook cria uma via POST /sessions. */
+    sessionId?: string;
+    initialMessages?: Message[];
+    sessionOptions?: Record<string, unknown>;
+    turnOptions?: Record<string, unknown>;
+    displayRenderers?: DisplayRendererMap;
+    placeholder?: string;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+    enableAttachments?: boolean;
+    enableVoice?: boolean;
+    fetcher?: typeof fetch;
+    emptyState?: React.ReactNode;
+}
+export declare function Chat({ endpoint, token, sessionId, initialMessages, sessionOptions, turnOptions, displayRenderers, placeholder, header, footer, className, enableAttachments, enableVoice, fetcher, emptyState, }: ChatProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { ChatProvider, useChatContext } from "../hooks/ChatProvider.js";
+import { MessageList } from "./MessageList.js";
+import { MessageInput } from "./MessageInput.js";
+function ChatContent({ displayRenderers, placeholder, enableAttachments = true, enableVoice = true, emptyState }) {
+    const { messages, input, setInput, handleSubmit, isLoading, stop, error, reload } = useChatContext();
+    return (_jsxs(_Fragment, { children: [_jsx(MessageList, { messages: messages, isLoading: isLoading, displayRenderers: displayRenderers, error: error ?? undefined, onRetry: reload, emptyState: emptyState }), _jsx("div", { className: "px-4 pb-4", children: _jsx(MessageInput, { input: input, setInput: setInput, handleSubmit: handleSubmit, isLoading: isLoading, stop: stop, placeholder: placeholder, enableAttachments: enableAttachments, enableVoice: enableVoice }) })] }));
+}
+export function Chat({ endpoint, token, sessionId, initialMessages, sessionOptions, turnOptions, displayRenderers, placeholder, header, footer, className, enableAttachments, enableVoice, fetcher, emptyState, }) {
+    return (_jsx(ChatProvider, { endpoint: endpoint, token: token, sessionId: sessionId, initialMessages: initialMessages, sessionOptions: sessionOptions, turnOptions: turnOptions, fetcher: fetcher, 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, emptyState: emptyState }), footer] }) }, sessionId));
+}

package/dist/components/ErrorNote.d.ts

@@ -0,0 +1,6 @@
+export interface ErrorNoteProps {
+    message?: string;
+    onRetry?: () => void;
+    className?: string;
+}
+export declare function ErrorNote({ message, 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({ message, onRetry, className }) {
+    return (_jsxs("div", { role: "alert", className: cn("flex items-start 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 mt-0.5" }), _jsx("span", { className: "flex-1 min-w-0 break-words", children: message ?? "Falha ao processar mensagem" }), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: "shrink-0 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,9 @@
+import type { Message } from "../types.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+export interface MessageBubbleProps {
+    message: Message;
+    isStreaming?: boolean;
+    displayRenderers?: DisplayRendererMap;
+    className?: string;
+}
+export declare const MessageBubble: import("react").NamedExoticComponent<MessageBubbleProps>;

package/dist/components/MessageBubble.js

@@ -0,0 +1,45 @@
+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 { PartErrorBoundary } from "../parts/PartErrorBoundary.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, className }) {
+    const isUser = message.role === "user";
+    const hasParts = Array.isArray(message.parts) && message.parts.length > 0;
+    const hasText = typeof message.content === "string" && message.content.length > 0;
+    const isEmptyAssistant = !isUser && !hasParts && !hasText && !isStreaming;
+    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(PartErrorBoundary, { label: `part:${part.type}`, children: _jsx(PartRenderer, { part: part, isStreaming: isStreaming, displayRenderers: displayRenderers }) }, i))) })
+                        : hasText
+                            ? _jsx(Markdown, { children: message.content })
+                            : isEmptyAssistant
+                                ? _jsx("span", { className: "text-xs italic text-muted-foreground", children: "(resposta vazia)" })
+                                : null, 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.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(undefined);
+    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-destructive 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,13 @@
+import { type ReactNode } from "react";
+import type { Message } from "../types.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+export interface MessageListProps {
+    messages: Message[];
+    isLoading?: boolean;
+    displayRenderers?: DisplayRendererMap;
+    className?: string;
+    error?: Error;
+    onRetry?: () => void;
+    emptyState?: ReactNode;
+}
+export declare function MessageList({ messages, isLoading, displayRenderers, className, error, onRetry, emptyState }: MessageListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MessageList.js

@@ -0,0 +1,72 @@
+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 { Sparkles } from "lucide-react";
+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";
+function DefaultWelcome() {
+    return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4 px-6 py-16 text-center", children: [_jsx("div", { className: "flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/20", children: _jsx(Sparkles, { className: "size-7" }) }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("h2", { className: "text-xl font-semibold tracking-tight", children: "Como posso ajudar?" }), _jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: "Envie uma mensagem para comecar a conversa. Voce pode pedir respostas, acionar ferramentas ou colar conteudo para analise." })] })] }));
+}
+export function MessageList({ messages, isLoading, displayRenderers, className, error, onRetry, emptyState }) {
+    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: emptyState ?? _jsx(DefaultWelcome, {}) }), _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 }) }, message.id ?? virtualRow.index));
+                            }) }) }), isLoading && messages[messages.length - 1]?.role !== "assistant" && (_jsx("div", { className: "px-4 pb-3", children: _jsx(StreamingIndicator, {}) })), !isLoading && error && (_jsx("div", { className: "px-4 pb-3", children: _jsx(ErrorNote, { message: error.message, 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/display/AlertRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayAlert } from "./sdk-types.js";
+export declare function AlertRenderer({ variant, title, message }: DisplayAlert): import("react/jsx-runtime").JSX.Element;

package/dist/display/AlertRenderer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
+const VARIANT_ICON = {
+    info: Info,
+    warning: AlertTriangle,
+    error: AlertCircle,
+    success: CheckCircle,
+};
+export function AlertRenderer({ variant = "info", title, message }) {
+    const Icon = VARIANT_ICON[variant] ?? Info;
+    return (_jsxs(Alert, { variant: variant === "error" ? "destructive" : "default", children: [_jsx(Icon, {}), title && _jsx(AlertTitle, { children: title }), _jsx(AlertDescription, { children: message })] }));
+}

package/dist/display/CarouselRenderer.d.ts

@@ -0,0 +1,2 @@
+import type { DisplayCarousel } from "./sdk-types.js";
+export declare function CarouselRenderer({ title, items }: DisplayCarousel): import("react/jsx-runtime").JSX.Element;

package/dist/display/CarouselRenderer.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Card, CardContent } from "../ui/card";
+import { cn } from "../lib/utils";
+function formatPrice(value, currency) {
+    return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+export function CarouselRenderer({ title, items }) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false, dragFree: false });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const onSelect = useCallback(() => {
+        if (!emblaApi)
+            return;
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+        setCanScrollPrev(emblaApi.canScrollPrev());
+        setCanScrollNext(emblaApi.canScrollNext());
+    }, [emblaApi]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect();
+        emblaApi.on("select", onSelect);
+        emblaApi.on("reInit", onSelect);
+        return () => {
+            emblaApi.off("select", onSelect);
+            emblaApi.off("reInit", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+    const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [title && _jsx("p", { className: "text-sm font-medium text-foreground", children: title }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "icon", className: "rounded-full shrink-0", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": "Anterior", type: "button", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsx("div", { className: "overflow-hidden flex-1", ref: emblaRef, children: _jsx("div", { className: "flex", children: items.map((item, index) => (_jsx("div", { className: "flex-[0_0_80%] min-w-0 pl-3 first:pl-0", children: item.url ? (_jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", className: "block", children: _jsx(CarouselCard, { item: item }) })) : (_jsx(CarouselCard, { item: item })) }, index))) }) }), _jsx(Button, { variant: "outline", size: "icon", className: "rounded-full shrink-0", onClick: scrollNext, disabled: !canScrollNext, "aria-label": "Pr\u00F3ximo", type: "button", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] }), items.length > 1 && (_jsx("div", { className: "flex items-center justify-center gap-1.5", role: "tablist", "aria-label": "Slides", children: items.map((_, index) => (_jsx("button", { className: cn("w-2 h-2 rounded-full transition-colors", index === selectedIndex ? "bg-primary" : "bg-muted"), onClick: () => emblaApi?.scrollTo(index), role: "tab", "aria-selected": index === selectedIndex, "aria-label": `Slide ${index + 1}`, type: "button" }, index))) }))] }));
+}
+function CarouselCard({ item }) {
+    return (_jsxs(Card, { className: "overflow-hidden", children: [item.image && (_jsx("div", { className: "aspect-video overflow-hidden", children: _jsx("img", { src: item.image, alt: item.title, loading: "lazy", className: "w-full h-full object-cover" }) })), _jsxs(CardContent, { className: "p-3 space-y-1", children: [_jsx("p", { className: "font-medium text-sm text-foreground", children: item.title }), item.subtitle && (_jsx("p", { className: "text-xs text-muted-foreground", children: item.subtitle })), item.price && (_jsx("p", { className: "text-sm font-bold text-foreground", children: formatPrice(item.price.value, item.price.currency) })), item.badges && item.badges.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1 pt-1", children: item.badges.map((badge, i) => (_jsx(Badge, { variant: badge.variant === "destructive" ? "destructive" : badge.variant === "secondary" ? "secondary" : "default", children: badge.label }, i))) }))] })] }));
+}