@gugacoder/agentic-chat 0.2.0

package/src/components/LazyRender.tsx

@@ -0,0 +1,42 @@
+import { useRef, useState, useEffect, type ReactNode } from "react";
+
+interface LazyRenderProps {
+  children: ReactNode;
+  minHeight?: number;
+  rootMargin?: string;
+}
+
+export function LazyRender({ children, minHeight = 120, rootMargin = "200px" }: LazyRenderProps) {
+  const ref = useRef<HTMLDivElement>(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 <>{children}</>;
+
+  return (
+    <div
+      ref={ref}
+      className="flex items-center justify-center text-muted-foreground text-xs rounded-md bg-muted/20 animate-pulse"
+      style={{ minHeight }}
+    >
+      Carregando...
+    </div>
+  );
+}

package/src/components/Markdown.tsx

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

package/src/components/MessageBubble.tsx

@@ -0,0 +1,102 @@
+import { memo, useState, useCallback } from "react";
+import type { Message } from "@ai-sdk/react";
+import { cn } from "../lib/utils.js";
+import { Markdown } from "./Markdown.js";
+import { StreamingIndicator } from "./StreamingIndicator.js";
+import { PartRenderer } from "../parts/PartRenderer.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+import { Copy, Check } from "lucide-react";
+
+export interface MessageBubbleProps {
+  message: Message;
+  isStreaming?: boolean;
+  displayRenderers?: DisplayRendererMap;
+  attachmentUrl?: (ref: string) => string;
+  className?: string;
+}
+
+function extractText(message: Message): string {
+  if (message.content) return message.content;
+  if (!Array.isArray(message.parts)) return "";
+  return message.parts
+    .filter((p): p is { type: "text"; text: string } => (p as { type: string }).type === "text")
+    .map((p) => p.text)
+    .join("\n");
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [text]);
+
+  return (
+    <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"}
+    >
+      {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+    </button>
+  );
+}
+
+export const MessageBubble = memo(function MessageBubble({ message, isStreaming, displayRenderers, attachmentUrl, className }: MessageBubbleProps) {
+  const isUser = message.role === "user";
+  const hasParts = Array.isArray(message.parts) && message.parts.length > 0;
+
+  return (
+    <div className={cn("group/bubble", isUser ? "flex flex-col items-end" : "flex flex-col items-start")}>
+      {/* Bubble */}
+      <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
+        )}
+      >
+        {hasParts
+          ? <div className="flex flex-col gap-3">
+              {(message.parts as { type: string }[]).map((part, i) => (
+                <PartRenderer
+                  key={i}
+                  part={part as Parameters<typeof PartRenderer>[0]["part"]}
+                  isStreaming={isStreaming}
+                  displayRenderers={displayRenderers}
+                  attachmentUrl={attachmentUrl}
+                />
+              ))}
+            </div>
+          : <Markdown>{message.content}</Markdown>
+        }
+        {isStreaming && !isUser && <StreamingIndicator />}
+      </div>
+
+      {/* Action bar — outside bubble, below */}
+      {!isStreaming && (
+        <div className={cn(
+          "flex items-center gap-0.5 mt-0.5",
+          isUser ? "justify-end" : "justify-start"
+        )}>
+          <CopyButton text={extractText(message)} />
+        </div>
+      )}
+    </div>
+  );
+}, (prev, next) =>
+  prev.message === next.message
+  && prev.isStreaming === next.isStreaming
+  && prev.displayRenderers === next.displayRenderers
+  && prev.attachmentUrl === next.attachmentUrl
+  && prev.className === next.className
+);

package/src/components/MessageInput.tsx

@@ -0,0 +1,421 @@
+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";
+
+// ── Types ──
+
+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;
+}
+
+// ── 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: (file: File) => void) {
+  const [isRecording, setIsRecording] = useState(false);
+  const [elapsed, setElapsed] = useState(0);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const timerRef = useRef<ReturnType<typeof setInterval>>();
+
+  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: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+// ── Attachment Preview ──
+
+function AttachmentPreview({ attachment, onRemove }: { attachment: Attachment; onRemove: () => void }) {
+  return (
+    <div className="relative group shrink-0">
+      {attachment.type === "image" && attachment.preview ? (
+        <div className="relative h-16 w-16 rounded-lg overflow-hidden border border-border/50">
+          <img src={attachment.preview} alt={attachment.file.name} className="h-full w-full object-cover" />
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 rounded-lg border border-border/50 bg-background/50 px-3 py-2">
+          <Paperclip className="h-4 w-4 text-muted-foreground shrink-0" />
+          <span className="text-xs text-muted-foreground truncate max-w-[120px]">{attachment.file.name}</span>
+        </div>
+      )}
+      <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"
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+// ── Plus Menu ──
+
+function PlusMenu({ onFile, onCamera, onGallery, onClose }: {
+  onFile: () => void; onCamera: () => void; onGallery: () => void; onClose: () => void;
+}) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [onClose]);
+
+  return (
+    <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">
+      {[
+        { icon: Paperclip, label: "Arquivo", onClick: onFile },
+        { icon: Camera, label: "Camera", onClick: onCamera },
+        { icon: ImageIcon, label: "Galeria", onClick: onGallery },
+      ].map((item) => (
+        <button
+          key={item.label}
+          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"
+        >
+          <item.icon className="h-4 w-4 text-muted-foreground" />
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ── Main Component ──
+
+export function MessageInput({
+  input,
+  setInput,
+  handleSubmit,
+  isLoading,
+  isUploading = false,
+  stop,
+  placeholder = "Caixa de mensagem...",
+  className,
+  enableAttachments = true,
+  enableVoice = true,
+}: MessageInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [showMenu, setShowMenu] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isMultiline, setIsMultiline] = useState(false);
+  const historyRef = useRef<string[]>([]);
+  const historyPosRef = useRef(-1);
+  const savedInputRef = useRef("");
+
+  const onRecordingComplete = useCallback((file: File) => {
+    const att: Attachment = { 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: FileList | File[]) => {
+    const newAttachments: Attachment[] = Array.from(files).map((file) => {
+      const isImage = file.type.startsWith("image/");
+      const att: Attachment = { 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 as string } : a)));
+        };
+        reader.readAsDataURL(file);
+      }
+      return att;
+    });
+    setAttachments((prev) => [...prev, ...newAttachments]);
+  }, []);
+
+  const removeAttachment = useCallback((id: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  // ── Drag & Drop ──
+
+  const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    if (containerRef.current && !containerRef.current.contains(e.relatedTarget as Node)) setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault(); setIsDragging(false);
+    if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files);
+  }, [addFiles]);
+
+  // ── Clipboard Paste ──
+
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const files: File[] = [];
+    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: React.FormEvent) {
+    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: React.KeyboardEvent<HTMLTextAreaElement>) {
+    // 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 as unknown as React.FormEvent);
+    }
+  }
+
+  // ── Render ──
+
+  return (
+    <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,
+      )}
+    >
+      {/* ── Drag overlay ── */}
+      {isDragging && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] bg-primary/5 border-2 border-dashed border-primary/30">
+          <span className="text-sm text-primary font-medium">Solte aqui</span>
+        </div>
+      )}
+
+      {/* ── Recording overlay ── */}
+      {isRecording && (
+        <div className="flex items-center gap-3 px-3 py-2">
+          <Button type="button" variant="ghost" size="icon" onClick={cancelRecording} className="h-8 w-8 rounded-full shrink-0 text-muted-foreground" aria-label="Cancelar">
+            <X className="h-4 w-4" />
+          </Button>
+          <div className="flex items-center gap-2 flex-1">
+            <span className="h-2 w-2 rounded-full bg-red-500 animate-pulse" />
+            <span className="text-sm font-medium tabular-nums">{formatTime(elapsed)}</span>
+            <div className="flex-1 flex items-center gap-0.5 px-2">
+              {Array.from({ length: 20 }, (_, i) => (
+                <span key={i} className="w-1 bg-foreground/30 rounded-full" style={{ height: `${4 + Math.random() * 12}px` }} />
+              ))}
+            </div>
+          </div>
+          <Button type="button" size="icon" onClick={stopRecording} className="h-8 w-8 rounded-full shrink-0" aria-label="Parar">
+            <CircleStop className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* ── Main content (hidden when recording) ── */}
+      <div className={cn(isRecording && "hidden")}>
+        {/* Attachment previews */}
+        {(attachments.length > 0 || isUploading) && (
+          <div className="flex flex-wrap gap-2 px-4 pt-3 pb-1">
+            {attachments.map((att) => (
+              <AttachmentPreview key={att.id} attachment={att} onRemove={() => removeAttachment(att.id)} />
+            ))}
+            {isUploading && (
+              <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">
+                <Loader2 className="h-4 w-4 animate-spin shrink-0" />
+                <span>Enviando arquivos...</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ── Single unified input row ── */}
+        <div className={cn("flex gap-1 p-1.5", isMultiline ? "items-end" : "items-center")}>
+          {/* Left: Plus button */}
+          {enableAttachments && (
+            <div className="relative shrink-0">
+              <Button type="button" variant="ghost" size="icon" className="h-8 w-8 rounded-full" onClick={() => setShowMenu(!showMenu)} aria-label="Adicionar">
+                <Plus className="h-4 w-4" />
+              </Button>
+              {showMenu && (
+                <PlusMenu
+                  onFile={() => fileInputRef.current?.click()}
+                  onCamera={() => imageInputRef.current?.click()}
+                  onGallery={() => imageInputRef.current?.click()}
+                  onClose={() => setShowMenu(false)}
+                />
+              )}
+            </div>
+          )}
+
+          {/* Center: Textarea */}
+          <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"
+          />
+
+          {/* Right: Action buttons */}
+          <div className="flex items-center gap-0.5 shrink-0">
+            {enableVoice && !hasContent && (
+              <Button type="button" variant="ghost" size="icon" className="h-8 w-8 rounded-full text-muted-foreground" onClick={startRecording} aria-label="Gravar audio">
+                <Mic className="h-4 w-4" />
+              </Button>
+            )}
+            {isLoading && stop ? (
+              <Button type="button" variant="ghost" size="icon" onClick={stop} className="h-8 w-8 rounded-full" aria-label="Parar geração">
+                <Square className="h-4 w-4" />
+              </Button>
+            ) : (
+              <Button type="button" size="icon" onClick={onSubmit} disabled={!hasContent || !!isLoading} className="h-8 w-8 rounded-full" aria-label="Enviar mensagem">
+                <Send className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Hidden file inputs */}
+      <input ref={fileInputRef} type="file" multiple className="hidden" onChange={(e) => { if (e.target.files) addFiles(e.target.files); e.target.value = ""; }} />
+      <input ref={imageInputRef} type="file" accept="image/*" multiple className="hidden" onChange={(e) => { if (e.target.files) addFiles(e.target.files); e.target.value = ""; }} />
+    </div>
+  );
+}