feat: integrar Zoe com captura de áudio e resposta em voz

susconecta/app/audio-teste/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
+
+export default function VozPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center p-10">
+      <AIVoiceFlow />
+    </div>
+  );
+}
+

susconecta/components/ZoeIA/ai-assistant-interface.tsx

@@ -46,6 +46,8 @@ export function AIAssistantInterface({
   const [manualSelection, setManualSelection] = useState(false);
   const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
   const messageListRef = useRef<HTMLDivElement | null>(null);
+  const pdfInputRef = useRef<HTMLInputElement | null>(null);
+  const [pdfFile, setPdfFile] = useState<File | null>(null); // arquivo PDF selecionado
   const history = internalHistory;
   const historyRef = useRef<ChatSession[]>(history);
   const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
@@ -82,17 +84,6 @@ export function AIAssistantInterface({
 
   const activeMessages = activeSession?.messages ?? [];
 
-  const formatDateTime = useCallback(
-    (value: string) =>
-      new Date(value).toLocaleString("pt-BR", {
-        day: "2-digit",
-        month: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-      }),
-    []
-  );
-
   const formatTime = useCallback(
     (value: string) =>
       new Date(value).toLocaleTimeString("pt-BR", {
@@ -102,92 +93,19 @@ export function AIAssistantInterface({
     []
   );
 
-  useEffect(() => {
-    if (history.length === 0) {
-      setActiveSessionId(null);
-      setManualSelection(false);
-      return;
-    }
-
-    if (!activeSessionId && !manualSelection) {
-      setActiveSessionId(history[history.length - 1].id);
-      return;
-    }
-
-    const exists = history.some((session) => session.id === activeSessionId);
-    if (!exists && !manualSelection) {
-      setActiveSessionId(history[history.length - 1].id);
-    }
-  }, [history, activeSessionId, manualSelection]);
-
-  useEffect(() => {
-    if (!messageListRef.current) return;
-    messageListRef.current.scrollTo({
-      top: messageListRef.current.scrollHeight,
-      behavior: "smooth",
-    });
-  }, [activeMessages.length]);
-
-  useEffect(() => {
-    setTypedGreeting("");
-    setTypedIndex(0);
-    setIsTypingGreeting(true);
-  }, []);
-
-  useEffect(() => {
-    if (!isTypingGreeting) return;
-    if (typedIndex >= greetingWords.length) {
-      setIsTypingGreeting(false);
-      return;
-    }
-
-    const timeout = window.setTimeout(() => {
-      setTypedGreeting((previous) =>
-        previous
-          ? `${previous} ${greetingWords[typedIndex]}`
-          : greetingWords[typedIndex]
-      );
-      setTypedIndex((previous) => previous + 1);
-    }, 260);
-
-    return () => window.clearTimeout(timeout);
-  }, [greetingWords, isTypingGreeting, typedIndex]);
-
-  const handleDocuments = () => {
-    if (onOpenDocuments) {
-      onOpenDocuments();
-      return;
-    }
-    console.log("[ZoeIA] Abrir fluxo de documentos");
-  };
-
-  const handleOpenRealtimeChat = () => {
-    if (onOpenChat) {
-      onOpenChat();
-      return;
-    }
-    console.log("[ZoeIA] Abrir chat em tempo real");
-  };
-
-  const buildSessionTopic = useCallback((content: string) => {
-    const normalized = content.trim();
-    if (!normalized) return "Atendimento";
-    return normalized.length > 60 ? `${normalized.slice(0, 57)}…` : normalized;
-  }, []);
-
   const upsertSession = useCallback(
     (session: ChatSession) => {
       if (onAddHistory) {
         onAddHistory(session);
       } else {
-        setInternalHistory((previous) => {
-          const index = previous.findIndex((item) => item.id === session.id);
+        setInternalHistory((prev) => {
+          const index = prev.findIndex((s) => s.id === session.id);
           if (index >= 0) {
-            const updated = [...previous];
+            const updated = [...prev];
             updated[index] = session;
             return updated;
           }
-          return [...previous, session];
+          return [...prev, session];
         });
       }
       setActiveSessionId(session.id);
@@ -202,8 +120,6 @@ export function AIAssistantInterface({
 
       const appendAssistantMessage = (content: string) => {
         const createdAt = new Date().toISOString();
-        const latestSession =
-          historyRef.current.find((session) => session.id === sessionId) ?? baseSession;
         const assistantMessage: ChatMessage = {
           id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
           sender: "assistant",
@@ -211,9 +127,12 @@ export function AIAssistantInterface({
           createdAt,
         };
 
+        const latestSession =
+          historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
+
         const updatedSession: ChatSession = {
           ...latestSession,
-          updatedAt: assistantMessage.createdAt,
+          updatedAt: createdAt,
           messages: [...latestSession.messages, assistantMessage],
         };
 
@@ -221,37 +140,50 @@ export function AIAssistantInterface({
       };
 
       try {
-        const response = await fetch(API_ENDPOINT, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ message: prompt }),
-        });
+        let replyText = "";
+        let response: Response;
 
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
+        if (pdfFile) {
+          // Monta FormData conforme especificação: campos 'pdf' e 'message'
+          const formData = new FormData();
+            formData.append("pdf", pdfFile);
+            formData.append("message", prompt);
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            body: formData, // multipart/form-data gerenciado pelo browser
+          });
+        } else {
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ message: prompt }),
+          });
         }
 
         const rawPayload = await response.text();
-        let replyText = "";
 
-        if (rawPayload.trim().length > 0) {
+        if (rawPayload.trim()) {
           try {
-            const parsed = JSON.parse(rawPayload) as { reply?: unknown };
-            replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
-          } catch (parseError) {
-            console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
+            const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown };
+            if (typeof parsed.reply === "string") {
+              replyText = parsed.reply.trim();
+            } else if (typeof parsed.message === "string") {
+              replyText = parsed.message.trim();
+            }
+          } catch (error) {
+            console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
           }
         }
 
         appendAssistantMessage(replyText || FALLBACK_RESPONSE);
       } catch (error) {
-        console.error("[ZoeIA] Falha ao obter resposta da API", error);
+        console.error("[ZoeIA] Erro ao buscar resposta da API", error);
         appendAssistantMessage(FALLBACK_RESPONSE);
       }
     },
-    [upsertSession]
+    [upsertSession, pdfFile]
   );
 
   const handleSendMessage = () => {
@@ -266,420 +198,124 @@ export function AIAssistantInterface({
       createdAt: now.toISOString(),
     };
 
-    const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
-
-    const sessionToPersist: ChatSession = existingSession
+    const session = history.find((s) => s.id === activeSessionId);
+    const sessionToUse: ChatSession = session
       ? {
-          ...existingSession,
+          ...session,
           updatedAt: userMessage.createdAt,
-          topic:
-            existingSession.messages.length === 0
-              ? buildSessionTopic(trimmed)
-              : existingSession.topic,
-          messages: [...existingSession.messages, userMessage],
+          messages: [...session.messages, userMessage],
         }
       : {
           id: `session-${now.getTime()}`,
           startedAt: now.toISOString(),
           updatedAt: userMessage.createdAt,
-          topic: buildSessionTopic(trimmed),
+          topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed,
           messages: [userMessage],
         };
 
-    upsertSession(sessionToPersist);
-    console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
+    upsertSession(sessionToUse);
     setQuestion("");
     setHistoryPanelOpen(false);
-
-    void sendMessageToAssistant(trimmed, sessionToPersist);
+    void sendMessageToAssistant(trimmed, sessionToUse);
   };
 
-  const RealtimeTriggerButton = () => (
-    <button
-      type="button"
-      onClick={handleOpenRealtimeChat}
-      className="flex h-12 w-12 items-center justify-center rounded-full bg-white text-foreground shadow-sm transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-zinc-900 dark:text-white"
-      aria-label="Abrir chat Zoe em tempo real"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        className="h-5 w-5"
-        fill="currentColor"
-        aria-hidden
-      >
-        <rect x="4" y="7" width="2" height="10" rx="1" />
-        <rect x="8" y="5" width="2" height="14" rx="1" />
-        <rect x="12" y="7" width="2" height="10" rx="1" />
-        <rect x="16" y="9" width="2" height="6" rx="1" />
-        <rect x="20" y="8" width="2" height="8" rx="1" />
-      </svg>
-    </button>
-  );
-
-  const handleClearHistory = () => {
-    if (onClearHistory) {
-      onClearHistory();
-    } else {
-      setInternalHistory([]);
+  const handleSelectPdf = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && file.type === "application/pdf") {
+      setPdfFile(file);
     }
-    setActiveSessionId(null);
-    setManualSelection(false);
-    setQuestion("");
-    setHistoryPanelOpen(false);
+    // Permite re-selecionar o mesmo arquivo
+    e.target.value = "";
   };
 
-  const handleSelectSession = useCallback((sessionId: string) => {
-    setManualSelection(true);
-    setActiveSessionId(sessionId);
-    setHistoryPanelOpen(false);
-  }, []);
-
-  const startNewConversation = useCallback(() => {
-    setManualSelection(true);
-    setActiveSessionId(null);
-    setQuestion("");
-    setHistoryPanelOpen(false);
-  }, []);
+  const removePdf = () => setPdfFile(null);
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-12">
-        <motion.section
-          initial={{ opacity: 0, y: -14 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, ease: "easeOut" }}
-          className="rounded-3xl border border-primary/10 bg-gradient-to-br from-primary/15 via-background to-background/95 p-6 shadow-xl backdrop-blur-sm"
-        >
-          <div className="flex flex-col gap-6">
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex items-center gap-4">
-                <span className="flex h-12 w-12 items-center justify-center rounded-3xl bg-gradient-to-br from-primary via-indigo-500 to-sky-500 text-base font-semibold text-white shadow-lg">
-                  Zoe
-                </span>
-                <div className="space-y-1">
-                  <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
-                    Assistente Clínica Zoe
-                  </p>
-                  <motion.h1
-                    key={typedGreeting}
-                    className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl"
-                    initial={{ opacity: 0.6 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3 }}
-                  >
-                    {gradientGreeting && (
-                      <span className="bg-gradient-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
-                        {gradientGreeting}
-                        {plainGreeting ? " " : ""}
-                      </span>
-                    )}
-                    {plainGreeting && <span className="text-foreground">{plainGreeting}</span>}
-                    <span
-                      className={`ml-1 inline-block h-6 w-[0.12rem] align-middle ${
-                        isTypingGreeting ? "animate-pulse bg-primary" : "bg-transparent"
-                      }`}
-                    />
-                  </motion.h1>
-                </div>
-              </div>
-              <div className="flex flex-wrap items-center justify-end gap-2 sm:justify-end">
-                {history.length > 0 && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
-                    onClick={() => setHistoryPanelOpen(true)}
-                  >
-                    Ver históricos
-                  </Button>
-                )}
-                {history.length > 0 && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground transition hover:text-destructive"
-                    onClick={handleClearHistory}
-                  >
-                    Limpar histórico
-                  </Button>
-                )}
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="rounded-full border-primary/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10"
-                  onClick={startNewConversation}
-                >
-                  Novo atendimento
-                </Button>
-                <SimpleThemeToggle />
-              </div>
-            </div>
-            <motion.p
-              className="max-w-2xl text-sm text-muted-foreground"
-              initial={{ opacity: 0, y: -6 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.3, duration: 0.4 }}
-            >
-              Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
-            </motion.p>
-          </div>
-        </motion.section>
-
-        <motion.div
-          initial={{ opacity: 0, y: -8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.15, duration: 0.4 }}
-          className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-xs text-primary shadow-sm"
-        >
-          <Lock className="h-4 w-4" />
-          <span>Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
-        </motion.div>
-
-        <motion.section
-          className="space-y-6 rounded-3xl border border-primary/15 bg-card/70 p-6 shadow-lg backdrop-blur"
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2, duration: 0.5 }}
-        >
-          <motion.div
-            className="rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-background/50 to-background p-6 text-sm leading-relaxed text-muted-foreground"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.25, duration: 0.4 }}
-          >
-            <div className="mb-4 flex items-center gap-3 text-primary">
-              <Info className="h-5 w-5" />
-              <span className="text-base font-semibold">Informativo importante</span>
-            </div>
-            <p>
-              A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado.
-              As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
-            </p>
-            <p className="mt-4 font-medium text-foreground">
-              Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
-            </p>
-          </motion.div>
-
-          <div className="grid gap-3 sm:grid-cols-2">
-            <Button
-              onClick={handleDocuments}
-              size="lg"
-              className="justify-start gap-3 rounded-2xl bg-primary text-primary-foreground shadow-md transition hover:shadow-xl"
-            >
-              <Upload className="h-5 w-5" />
-              Enviar documentos clínicos
-            </Button>
-            <Button
-              onClick={handleOpenRealtimeChat}
-              size="lg"
-              variant="outline"
-              className="justify-start gap-3 rounded-2xl border-primary/40 bg-background shadow-md transition hover:border-primary hover:text-primary"
-            >
-              <MessageCircle className="h-5 w-5" />
-              Conversar com a equipe Zoe
-            </Button>
-          </div>
-
-          <div className="rounded-2xl border border-border bg-background/80 p-4 shadow-inner">
-            <p className="text-sm text-muted-foreground">
-              Estamos reunindo o histórico da sua jornada. Enquanto isso, você pode anexar exames, enviar dúvidas ou solicitar contato com a equipe Zoe.
-            </p>
-          </div>
-        </motion.section>
-
-        <motion.section
-          className="flex flex-col gap-5 rounded-3xl border border-primary/10 bg-card/70 p-6 shadow-lg backdrop-blur"
-          initial={{ opacity: 0, y: 14 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.25, duration: 0.45 }}
-        >
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-                {activeSession ? "Atendimento em andamento" : "Inicie uma conversa"}
-              </p>
-              <p className="text-sm font-semibold text-foreground sm:text-base">
-                {activeSession?.topic ?? "O primeiro contato orienta nossas recomendações clínicas"}
+    <div className="w-full max-w-3xl mx-auto p-4 space-y-4">
+      {/* Área superior exibindo PDF selecionado */}
+      {pdfFile && (
+        <div className="flex items-center justify-between border rounded-lg p-3 bg-muted/50">
+          <div className="flex items-center gap-3 min-w-0">
+            <Upload className="w-5 h-5 text-primary" />
+            <div className="min-w-0">
+              <p className="text-sm font-medium truncate" title={pdfFile.name}>{pdfFile.name}</p>
+              <p className="text-xs text-muted-foreground">
+                PDF anexado • {(pdfFile.size / 1024).toFixed(1)} KB
               </p>
             </div>
-            {activeSession && (
-              <span className="mt-1 inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary shadow-inner sm:mt-0">
-                Atualizado às {formatTime(activeSession.updatedAt)}
-              </span>
-            )}
-          </div>
-
-          <div
-            ref={messageListRef}
-            className="flex max-h-[45vh] min-h-[220px] flex-col gap-3 overflow-y-auto rounded-2xl border border-border/40 bg-background/70 p-4"
-          >
-            {activeMessages.length > 0 ? (
-              activeMessages.map((message) => (
-                <div
-                  key={message.id}
-                  className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
-                >
-                  <div
-                    className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm ${
-                      message.sender === "user"
-                        ? "bg-primary text-primary-foreground"
-                        : "border border-border/60 bg-background text-foreground"
-                    }`}
-                  >
-                    <p className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</p>
-                    <span
-                      className={`mt-2 block text-[0.68rem] uppercase tracking-[0.18em] ${
-                        message.sender === "user"
-                          ? "text-primary-foreground/75"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      {formatTime(message.createdAt)}
-                    </span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="flex flex-1 flex-col items-center justify-center rounded-2xl border border-dashed border-primary/25 bg-background/80 px-6 py-12 text-center text-sm text-muted-foreground">
-                <p className="text-sm font-medium text-foreground">Envie sua primeira mensagem</p>
-                <p className="mt-2 max-w-md text-sm text-muted-foreground">
-                  Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.
-                </p>
-              </div>
-            )}
-          </div>
-        </motion.section>
-
-        <div className="flex flex-col gap-3 rounded-3xl border border-border bg-card/70 px-4 py-3 shadow-xl sm:flex-row sm:items-center">
-          <div className="flex items-center gap-2">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="rounded-full border border-border/40 bg-background/60 text-muted-foreground transition hover:text-primary"
-              onClick={handleDocuments}
-            >
-              <Plus className="h-5 w-5" />
-            </Button>
-          </div>
-          <Input
-            value={question}
-            onChange={(event) => setQuestion(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                handleSendMessage();
-              }
-            }}
-            placeholder="Pergunte qualquer coisa para a Zoe"
-            className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
-          />
-          <div className="flex items-center justify-end gap-2">
-            <Button
-              type="button"
-              className="rounded-full bg-primary px-5 text-primary-foreground shadow-md transition hover:bg-primary/90"
-              onClick={handleSendMessage}
-            >
-              Enviar
-            </Button>
-            <RealtimeTriggerButton />
           </div>
+          <Button variant="secondary" size="sm" onClick={removePdf}>
+            Remover
+          </Button>
         </div>
+      )}
 
+      {/* Lista de mensagens */}
+      <div
+        ref={messageListRef}
+        className="border rounded-lg p-4 h-96 overflow-y-auto space-y-3 bg-background"
+      >
+        {activeMessages.length === 0 && (
+          <p className="text-sm text-muted-foreground">Nenhuma mensagem ainda. Envie uma pergunta.</p>
+        )}
+        {activeMessages.map((m) => (
+          <div
+            key={m.id}
+            className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}
+          >
+            <div
+              className={`px-3 py-2 rounded-lg max-w-xs text-sm whitespace-pre-wrap ${
+                m.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
+              }`}
+            >
+              {m.content}
+              <div className="mt-1 text-[10px] opacity-70">
+                {formatTime(m.createdAt)}
+              </div>
+            </div>
+          </div>
+        ))}
       </div>
 
-      {historyPanelOpen && (
-        <aside className="fixed inset-y-0 right-0 z-[160] w-[min(22rem,80vw)] border-l border-border bg-card shadow-2xl">
-          <div className="flex h-full flex-col">
-            <div className="flex items-center justify-between border-b border-border px-4 py-4">
-              <div className="flex items-center gap-3">
-                <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-sm font-semibold text-white shadow-md">
-                  Zoe
-                </span>
-                <div>
-                  <h2 className="text-sm font-semibold text-foreground">Históricos de atendimento</h2>
-                  <p className="text-xs text-muted-foreground">{history.length} registro{history.length === 1 ? "" : "s"}</p>
-                </div>
-              </div>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="rounded-full"
-                onClick={() => setHistoryPanelOpen(false)}
-              >
-                <span aria-hidden>×</span>
-                <span className="sr-only">Fechar históricos</span>
-              </Button>
-            </div>
-            <div className="border-b border-border px-4 py-3">
-              <Button
-                type="button"
-                className="w-full justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
-                onClick={startNewConversation}
-              >
-                <Plus className="h-4 w-4" />
-                Novo atendimento
-              </Button>
-            </div>
-            <div className="flex-1 overflow-y-auto px-4 py-4">
-              {history.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  Nenhum atendimento registrado ainda. Envie uma mensagem para começar um acompanhamento.
-                </p>
-              ) : (
-                <ul className="flex flex-col gap-3 text-sm">
-                  {[...history].reverse().map((session) => {
-                    const lastMessage = session.messages[session.messages.length - 1];
-                    const isActive = session.id === activeSessionId;
-                    return (
-                      <li key={session.id}>
-                        <button
-                          type="button"
-                          onClick={() => handleSelectSession(session.id)}
-                          className={`flex w-full flex-col gap-2 rounded-xl border px-3 py-3 text-left shadow-sm transition hover:border-primary hover:shadow-md ${
-                            isActive ? "border-primary/60 bg-primary/10" : "border-border/60 bg-background/90"
-                          }`}
-                        >
-                          <div className="flex items-center justify-between gap-3">
-                            <p className="font-semibold text-foreground line-clamp-2">{session.topic}</p>
-                            <span className="text-xs text-muted-foreground">{formatDateTime(session.updatedAt)}</span>
-                          </div>
-                          {lastMessage && (
-                            <p className="text-xs text-muted-foreground line-clamp-2">
-                              {lastMessage.sender === "assistant" ? "Zoe: " : "Você: "}
-                              {lastMessage.content}
-                            </p>
-                          )}
-                          <div className="flex items-center gap-2 text-[0.68rem] uppercase tracking-[0.18em] text-muted-foreground">
-                            <Clock className="h-4 w-4" />
-                            <span>
-                              {session.messages.length} mensagem{session.messages.length === 1 ? "" : "s"}
-                            </span>
-                          </div>
-                        </button>
-                      </li>
-                    );
-                  })}
-                </ul>
-              )}
-            </div>
-            {history.length > 0 && (
-              <div className="border-t border-border px-4 py-3">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className="w-full justify-center text-xs font-medium text-muted-foreground transition hover:text-destructive"
-                  onClick={handleClearHistory}
-                >
-                  Limpar todo o histórico
-                </Button>
-              </div>
-            )}
-          </div>
-        </aside>
-      )}
+      {/* Input & ações */}
+      <div className="flex items-center gap-2">
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => pdfInputRef.current?.click()}
+          >
+            PDF
+          </Button>
+          <input
+            ref={pdfInputRef}
+            type="file"
+            accept="application/pdf"
+            className="hidden"
+            onChange={handleSelectPdf}
+          />
+        </div>
+        <Input
+          placeholder="Digite sua pergunta"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSendMessage();
+            }
+          }}
+        />
+        <Button onClick={handleSendMessage} disabled={!question.trim()}>
+          Enviar
+        </Button>
+      </div>
+      <div className="text-xs text-muted-foreground">
+        {pdfFile
+          ? "A próxima mensagem será enviada junto ao PDF como multipart/form-data."
+          : "Selecione um PDF para anexar ao próximo envio."}
+      </div>
     </div>
   );
 }

susconecta/components/ZoeIA/ai-voice-flow.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
+import { Button } from "@/components/ui/button";
+import { Mic, MicOff } from "lucide-react";
+
+
+// ⚠ Coloque aqui o webhook real do seu n8n
+const N8N_WEBHOOK_URL = "https://n8n.jonasbomfim.store/webhook/zoe2";
+
+const AIVoiceFlow: React.FC = () => {
+  const [isRecording, setIsRecording] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+
+  const [voiceDetected, setVoiceDetected] = useState(false);
+  const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const [replyAudioUrl, setReplyAudioUrl] = useState<string | null>(null); // URL do áudio retornado
+  const [replyAudio, setReplyAudio] = useState<HTMLAudioElement | null>(null); // elemento de áudio reproduzido
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+
+  // 🚀 Inicia gravação
+  const startRecording = async () => {
+    try {
+      setError(null);
+      setStatus("Iniciando microfone...");
+      
+      // Se estava reproduzindo áudio da IA → parar imediatamente
+      if (replyAudio) {
+        replyAudio.pause();
+        replyAudio.currentTime = 0;
+      }
+      setReplyAudio(null);
+      setReplyAudioUrl(null);
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+
+      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 = async () => {
+        setStatus("Processando áudio...");
+        const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+        await sendToN8N(blob);
+        chunksRef.current = [];
+      };
+
+      recorder.start();
+      setIsRecording(true);
+      setStatus("Gravando... fale algo.");
+    } catch (err) {
+      console.error(err);
+      setError("Erro ao acessar microfone.");
+    }
+  };
+
+  // ⏹ Finaliza gravação
+  const stopRecording = () => {
+    try {
+      setIsRecording(false);
+      setStatus("Finalizando gravação...");
+
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+        mediaRecorderRef.current.stop();
+      }
+
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
+      }
+    } catch (err) {
+      console.error(err);
+      setError("Erro ao parar gravação.");
+    }
+  };
+
+  // 📤 Envia áudio ao N8N e recebe o MP3
+  const sendToN8N = async (audioBlob: Blob) => {
+    try {
+      setIsSending(true);
+      setStatus("Enviando áudio para IA...");
+
+      const formData = new FormData();
+      formData.append("audio", audioBlob, "voz.webm");
+
+      const resp = await fetch(N8N_WEBHOOK_URL, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!resp.ok) {
+        throw new Error("N8N retornou erro");
+      }
+
+      const replyBlob = await resp.blob();
+
+      // gera url local
+      const url = URL.createObjectURL(replyBlob);
+      setReplyAudioUrl(url);
+
+      const audio = new Audio(url);
+      setReplyAudio(audio);
+
+      setStatus("Reproduzindo resposta...");
+      audio.play().catch(() => {});
+
+    } catch (err) {
+      console.error(err);
+      setError("Erro ao enviar/receber áudio.");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const toggleRecording = () => {
+    if (isRecording) stopRecording();
+    else startRecording();
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-6 p-6">
+
+      {/* ORB — agora com comportamento inteligente */}
+      <div className="w-72 h-72 relative">
+        <VoicePoweredOrb
+          className="w-full h-full"
+
+          /* 🔥 LÓGICA DO ORB: 
+             - Gravando?       → usa microfone
+             - Não gravando, mas tem MP3? → usa áudio da IA
+             - Caso contrário → parado (none)
+          */
+          {...({ sourceMode:
+            isRecording
+              ? "microphone"
+              : replyAudio
+                ? "playback"
+                : "none"
+          } as any)}
+
+          audioElement={replyAudio}
+          onVoiceDetected={setVoiceDetected}
+        />
+
+        {isRecording && (
+          <span className="absolute bottom-4 right-4 rounded-full bg-black/70 px-3 py-1 text-xs font-medium text-white shadow-lg">
+            {voiceDetected ? "Ouvindo…" : "Aguardando voz…"}
+          </span>
+        )}
+      </div>
+
+      {/* 🟣 Botão de gravação */}
+      <Button
+        onClick={toggleRecording}
+        variant={isRecording ? "destructive" : "default"}
+        size="lg"
+        disabled={isSending}
+      >
+        {isRecording ? (
+          <>
+            <MicOff className="w-5 h-5 mr-2" /> Parar gravação
+          </>
+        ) : (
+          <>
+            <Mic className="w-5 h-5 mr-2" /> Começar gravação
+          </>
+        )}
+      </Button>
+
+      {/* STATUS */}
+      {status && <p className="text-sm text-muted-foreground">{status}</p>}
+      {error && <p className="text-sm text-red-500">{error}</p>}
+
+      {/* PLAYER MANUAL DA RESPOSTA */}
+      {replyAudioUrl && (
+        <div className="w-full max-w-md mt-2 flex flex-col items-center gap-2">
+          <span className="text-xs text-muted-foreground">Última resposta da IA:</span>
+          <audio controls src={replyAudioUrl} className="w-full" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AIVoiceFlow;

susconecta/components/features/pacientes/chat-widget.tsx

@@ -1,18 +1,16 @@
-
-
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
+import { ArrowLeft, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import FileUploadChat from "@/components/ui/file-upload-and-chat";
-import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
+
+// 👉 AQUI você importa o fluxo correto de voz (já testado e funcionando)
+import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
 
 export function ChatWidget() {
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [realtimeOpen, setRealtimeOpen] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
-  const [voiceDetected, setVoiceDetected] = useState(false);
 
   useEffect(() => {
     if (!assistantOpen && !realtimeOpen) return;
@@ -42,33 +40,11 @@ export function ChatWidget() {
   const closeRealtime = () => {
     setRealtimeOpen(false);
     setAssistantOpen(true);
-    setIsRecording(false);
-    setVoiceDetected(false);
-  };
-
-  const toggleRecording = () => {
-    setIsRecording((prev) => {
-      const next = !prev;
-      if (!next) {
-        setVoiceDetected(false);
-      }
-      return next;
-    });
-  };
-
-  const handleOpenDocuments = () => {
-    console.log("[ChatWidget] Abrindo fluxo de documentos");
-    closeAssistant();
-  };
-
-  const handleOpenChat = () => {
-    console.log("[ChatWidget] Encaminhando para chat em tempo real");
-    setAssistantOpen(false);
-    openRealtime();
   };
 
   return (
     <>
+      {/* ----------------- ASSISTANT PANEL ----------------- */}
       {assistantOpen && (
         <div
           id="ai-assistant-overlay"
@@ -85,12 +61,14 @@ export function ChatWidget() {
               <span className="text-sm font-semibold">Voltar</span>
             </Button>
           </div>
+
           <div className="flex-1 overflow-auto">
             <FileUploadChat onOpenVoice={openRealtime} />
           </div>
         </div>
       )}
 
+      {/* ----------------- REALTIME VOICE PANEL ----------------- */}
       {realtimeOpen && (
         <div
           id="ai-realtime-overlay"
@@ -108,57 +86,19 @@ export function ChatWidget() {
             </Button>
           </div>
 
-          <div className="flex-1 overflow-auto">
-            <div className="mx-auto flex h-full w-full max-w-4xl flex-col items-center justify-center gap-8 px-6 py-10 text-center">
-              <div className="relative w-full max-w-md aspect-square">
-                <VoicePoweredOrb
-                  enableVoiceControl={isRecording}
-                  className="h-full w-full rounded-3xl shadow-2xl"
-                  onVoiceDetected={setVoiceDetected}
-                />
-                {voiceDetected && (
-                  <span className="absolute bottom-6 right-6 rounded-full bg-primary/90 px-3 py-1 text-xs font-semibold text-primary-foreground shadow-lg">
-                    Ouvindo…
-                  </span>
-                )}
-              </div>
-
-              <div className="flex flex-col items-center gap-4">
-                <Button
-                  onClick={toggleRecording}
-                  size="lg"
-                  className="px-8 py-3"
-                  variant={isRecording ? "destructive" : "default"}
-                >
-                  {isRecording ? (
-                    <>
-                      <MicOff className="mr-2 h-5 w-5" aria-hidden />
-                      Parar captura de voz
-                    </>
-                  ) : (
-                    <>
-                      <Mic className="mr-2 h-5 w-5" aria-hidden />
-                      Iniciar captura de voz
-                    </>
-                  )}
-                </Button>
-                <p className="max-w-md text-sm text-muted-foreground">
-                  Ative a captura para falar com a equipe em tempo real. Assim que sua voz for detectada, a Zoe sinaliza visualmente e encaminha o atendimento.
-                </p>
-              </div>
-            </div>
+          {/* 🔥 Aqui entra o AIVoiceFlow COMPLETO */}
+          <div className="flex-1 overflow-auto flex items-center justify-center">
+            <AIVoiceFlow />
           </div>
         </div>
       )}
 
+      {/* ----------------- FLOATING BUTTON ----------------- */}
       <div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8">
         <button
           type="button"
           onClick={openAssistant}
           className="group relative flex h-16 w-16 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
-          aria-haspopup="dialog"
-          aria-expanded={assistantOpen}
-          aria-controls="ai-assistant-overlay"
         >
           {gradientRing}
           <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-background text-primary shadow-[0_12px_30px_rgba(37,99,235,0.25)] ring-1 ring-primary/10 transition group-hover:scale-[1.03] group-active:scale-95">

susconecta/components/ui/file-upload-and-chat.tsx

@@ -1,23 +1,42 @@
 "use client";
 
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { Upload, Paperclip, Send, Moon, Sun, X, FileText, ImageIcon, Video, Music, Archive, MessageCircle, Bot, User, Info, Lock, Mic } from 'lucide-react';
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import {
+  Upload,
+  Paperclip,
+  Send,
+  Moon,
+  Sun,
+  X,
+  FileText,
+  ImageIcon,
+  Video,
+  Music,
+  Archive,
+  MessageCircle,
+  Bot,
+  User,
+  Info,
+  Lock,
+  Mic,
+} from "lucide-react";
 
-const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/cd7d10e6-bcfc-4f3a-b649-351d12b714f1";
-const FALLBACK_RESPONSE = "Tive um problema para responder agora. Tente novamente em alguns instantes.";
+const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
+const FALLBACK_RESPONSE =
+  "Tive um problema para responder agora. Tente novamente em alguns instantes.";
 
 const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
   const [isDarkMode, setIsDarkMode] = useState(true);
   const [messages, setMessages] = useState([
     {
       id: 1,
-      type: 'ai',
+      type: "ai",
       content:
-        'Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.',
+        "Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.",
       timestamp: new Date(),
     },
   ]);
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
   const [isDragOver, setIsDragOver] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
@@ -27,54 +46,59 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
 
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
-    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
   // Auto-resize textarea
   useEffect(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height =
+        textareaRef.current.scrollHeight + "px";
     }
   }, [inputValue]);
 
   const getFileIcon = (fileName: string) => {
-    const ext = fileName.split('.').pop()?.toLowerCase();
-    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext || '')) return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
-    if (['mp4', 'avi', 'mkv', 'mov', 'webm'].includes(ext || '')) return <Video className="w-4 h-4" aria-hidden="true" />;
-    if (['mp3', 'wav', 'flac', 'ogg', 'aac'].includes(ext || '')) return <Music className="w-4 h-4" aria-hidden="true" />;
-    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext || '')) return <Archive className="w-4 h-4" aria-hidden="true" />;
+    const ext = fileName.split(".").pop()?.toLowerCase();
+    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || ""))
+      return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
+    if (["mp4", "avi", "mkv", "mov", "webm"].includes(ext || ""))
+      return <Video className="w-4 h-4" aria-hidden="true" />;
+    if (["mp3", "wav", "flac", "ogg", "aac"].includes(ext || ""))
+      return <Music className="w-4 h-4" aria-hidden="true" />;
+    if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
+      return <Archive className="w-4 h-4" aria-hidden="true" />;
     return <FileText className="w-4 h-4" aria-hidden="true" />;
   };
 
   const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes';
+    if (bytes === 0) return "0 Bytes";
     const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   };
 
   const handleFileSelect = (files: FileList | null) => {
     if (!files) return;
-    const newFiles = Array.from(files).map(file => ({
+    const newFiles = Array.from(files).map((file) => ({
       id: Date.now() + Math.random(),
       name: file.name,
       size: file.size,
       type: file.type,
-      file: file
+      file: file,
     }));
-    setUploadedFiles(prev => [...prev, ...newFiles]);
-    
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
+
     // Add system message about file upload
-    const fileNames = newFiles.map(f => f.name).join(', ');
+    const fileNames = newFiles.map((f) => f.name).join(", ");
     const systemMessage = {
       id: Date.now(),
-      type: 'system',
+      type: "system",
       content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
-      timestamp: new Date()
+      timestamp: new Date(),
     };
-    setMessages(prev => [...prev, systemMessage]);
+    setMessages((prev) => [...prev, systemMessage]);
   };
 
   const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
@@ -97,101 +121,141 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
   }, []);
 
   const removeFile = (fileId: number) => {
-    setUploadedFiles(prev => prev.filter(file => file.id !== fileId));
+    setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
   };
 
-  const generateAIResponse = useCallback(async (userMessage: string, files: any[]) => {
-    try {
-      const response = await fetch(API_ENDPOINT, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ message: userMessage }),
-      });
 
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
-      }
+  const generateAIResponse = useCallback(
+    async (userMessage: string, files: any[]) => {
+      try {
+        const pdfFile = files.find((file) => file.name.toLowerCase().endsWith(".pdf"));
 
-      const rawPayload = await response.text();
-      let replyText = "";
-
-      if (rawPayload.trim().length > 0) {
-        try {
-          const parsed = JSON.parse(rawPayload) as { reply?: unknown };
-          replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
-        } catch (parseError) {
-          console.error("[FileUploadChat] Invalid JSON response", parseError, rawPayload);
+        let response: Response;
+        if (pdfFile) {
+          const formData = new FormData();
+          formData.append("pdf", pdfFile.file); // campo 'pdf'
+          formData.append("message", userMessage); // campo 'message'
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            body: formData, // multipart/form-data automático
+          });
+        } else {
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ message: userMessage }),
+          });
         }
-      }
 
-      return replyText || FALLBACK_RESPONSE;
-    } catch (error) {
-      console.error("[FileUploadChat] Failed to get API response", error);
-      return FALLBACK_RESPONSE;
-    }
-  }, []);
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+
+        let replyText = "";
+
+        try {
+          const parsed = await response.json(); // ← já trata como JSON direto
+          if (typeof parsed.message === "string") {
+            replyText = parsed.message.trim();
+          } else if (typeof parsed.reply === "string") {
+            replyText = parsed.reply.trim();
+          } else {
+            console.warn(
+              "[Zoe] Nenhum campo 'message' ou 'reply' na resposta:",
+              parsed
+            );
+          }
+        } catch (err) {
+          console.error("[Zoe] Erro ao processar resposta JSON:", err);
+        }
+
+        return replyText || FALLBACK_RESPONSE;
+      } catch (error) {
+        console.error("[FileUploadChat] Failed to get API response", error);
+        return FALLBACK_RESPONSE;
+      }
+    },
+    []
+  );
 
   const sendMessage = useCallback(async () => {
     if (inputValue.trim() || uploadedFiles.length > 0) {
       const newMessage = {
         id: Date.now(),
-        type: 'user',
+        type: "user",
         content: inputValue.trim(),
         files: [...uploadedFiles],
-        timestamp: new Date()
+        timestamp: new Date(),
       };
-      setMessages(prev => [...prev, newMessage]);
-      
+      setMessages((prev) => [...prev, newMessage]);
+
       const messageContent = inputValue.trim();
       const attachedFiles = [...uploadedFiles];
-      
-      setInputValue('');
+
+      setInputValue("");
       setUploadedFiles([]);
       setIsTyping(true);
-      
+
       // Get AI response from API
-      const aiResponseContent = await generateAIResponse(messageContent, attachedFiles);
-      
+      const aiResponseContent = await generateAIResponse(
+        messageContent,
+        attachedFiles
+      );
+
       const aiResponse = {
         id: Date.now() + 1,
-        type: 'ai',
+        type: "ai",
         content: aiResponseContent,
-        timestamp: new Date()
+        timestamp: new Date(),
       };
-      setMessages(prev => [...prev, aiResponse]);
+      setMessages((prev) => [...prev, aiResponse]);
       setIsTyping(false);
     }
   }, [inputValue, uploadedFiles, generateAIResponse]);
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       sendMessage();
     }
   };
 
   const themeClasses = {
-    background: isDarkMode ? 'bg-gray-900' : 'bg-gray-50',
-    cardBg: isDarkMode ? 'bg-gray-800' : 'bg-white',
-    text: isDarkMode ? 'text-white' : 'text-gray-900',
-    textSecondary: isDarkMode ? 'text-gray-300' : 'text-gray-600',
-    border: isDarkMode ? 'border-gray-700' : 'border-gray-200',
-    inputBg: isDarkMode ? 'bg-gray-700' : 'bg-gray-100',
-    uploadArea: isDragOver 
-      ? (isDarkMode ? 'bg-blue-900/50 border-blue-500' : 'bg-blue-50 border-blue-400')
-      : (isDarkMode ? 'bg-gray-700 border-gray-600' : 'bg-gray-50 border-gray-300'),
-    userMessage: isDarkMode ? 'bg-blue-600' : 'bg-blue-500',
-    aiMessage: isDarkMode ? 'bg-gray-700' : 'bg-gray-200',
-    systemMessage: isDarkMode ? 'bg-yellow-900/30 text-yellow-200' : 'bg-yellow-100 text-yellow-800'
+    background: isDarkMode ? "bg-gray-900" : "bg-gray-50",
+    cardBg: isDarkMode ? "bg-gray-800" : "bg-white",
+    text: isDarkMode ? "text-white" : "text-gray-900",
+    textSecondary: isDarkMode ? "text-gray-300" : "text-gray-600",
+    border: isDarkMode ? "border-gray-700" : "border-gray-200",
+    inputBg: isDarkMode ? "bg-gray-700" : "bg-gray-100",
+    uploadArea: isDragOver
+      ? isDarkMode
+        ? "bg-blue-900/50 border-blue-500"
+        : "bg-blue-50 border-blue-400"
+      : isDarkMode
+      ? "bg-gray-700 border-gray-600"
+      : "bg-gray-50 border-gray-300",
+    userMessage: isDarkMode ? "bg-blue-600" : "bg-blue-500",
+    aiMessage: isDarkMode ? "bg-gray-700" : "bg-gray-200",
+    systemMessage: isDarkMode
+      ? "bg-yellow-900/30 text-yellow-200"
+      : "bg-yellow-100 text-yellow-800",
   };
 
   return (
-    <div className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}>
+    <div
+      className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}
+    >
       <div className="max-w-6xl mx-auto p-3 sm:p-6">
         {/* Main Card - Zoe Assistant Section */}
-        <div className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${isDarkMode ? 'from-primary/15 via-gray-800 to-gray-900' : 'from-blue-50 via-white to-indigo-50'} p-4 sm:p-8 ${isDarkMode ? 'border-gray-700' : 'border-blue-200'} mb-4 sm:mb-6 backdrop-blur-sm`}>
+        <div
+          className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${
+            isDarkMode
+              ? "from-primary/15 via-gray-800 to-gray-900"
+              : "from-blue-50 via-white to-indigo-50"
+          } p-4 sm:p-8 ${
+            isDarkMode ? "border-gray-700" : "border-blue-200"
+          } mb-4 sm:mb-6 backdrop-blur-sm`}
+        >
           <div className="flex flex-col gap-4 sm:gap-8">
             {/* Header */}
             <div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
@@ -228,27 +292,61 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
             </div>
 
             {/* Description */}
-            <p className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${isDarkMode ? 'text-muted-foreground' : 'text-gray-700'}`}>
-              Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
+            <p
+              className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${
+                isDarkMode ? "text-muted-foreground" : "text-gray-700"
+              }`}
+            >
+              Organizamos exames, orientações e tarefas assistenciais em um
+              painel único para acelerar decisões clínicas. Utilize a Zoe para
+              revisar resultados, registrar percepções e alinhar próximos passos
+              com a equipe de saúde.
             </p>
 
             {/* Security Info */}
             <div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
               <Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
-              <span className="text-xs sm:text-sm">Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
+              <span className="text-xs sm:text-sm">
+                Suas informações permanecem criptografadas e seguras com a
+                equipe Zoe.
+              </span>
             </div>
 
             {/* Info Section */}
-            <div className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${isDarkMode ? 'border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground' : 'border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700'} p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}>
-              <div className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${isDarkMode ? 'text-primary' : 'text-blue-600'}`}>
+            <div
+              className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${
+                isDarkMode
+                  ? "border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground"
+                  : "border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700"
+              } p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}
+            >
+              <div
+                className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${
+                  isDarkMode ? "text-primary" : "text-blue-600"
+                }`}
+              >
                 <Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
-                <span className="text-sm sm:text-base font-semibold">Informativo importante</span>
+                <span className="text-sm sm:text-base font-semibold">
+                  Informativo importante
+                </span>
               </div>
-              <p className={`mb-3 sm:mb-4 text-xs sm:text-sm ${isDarkMode ? 'text-muted-foreground' : 'text-gray-700'}`}>
-                A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado. As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
+              <p
+                className={`mb-3 sm:mb-4 text-xs sm:text-sm ${
+                  isDarkMode ? "text-muted-foreground" : "text-gray-700"
+                }`}
+              >
+                A Zoe acompanha toda a jornada clínica, consolida exames e
+                registra orientações para que você tenha clareza em cada etapa
+                do cuidado. As respostas são informativas e complementam a
+                avaliação de um profissional de saúde qualificado.
               </p>
-              <p className={`font-medium text-xs sm:text-sm ${isDarkMode ? 'text-foreground' : 'text-gray-900'}`}>
-                Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
+              <p
+                className={`font-medium text-xs sm:text-sm ${
+                  isDarkMode ? "text-foreground" : "text-gray-900"
+                }`}
+              >
+                Em situações de urgência, entre em contato com a equipe médica
+                presencial ou acione os serviços de emergência da sua região.
               </p>
             </div>
 
@@ -256,7 +354,9 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
             {uploadedFiles.length > 0 && (
               <div>
                 <div className="flex items-center justify-between mb-2 sm:mb-3">
-                  <h4 className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}>
+                  <h4
+                    className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}
+                  >
                     Files ready to send ({uploadedFiles.length})
                   </h4>
                   <button
@@ -267,12 +367,21 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
                   </button>
                 </div>
                 <div className="grid grid-cols-1 gap-2">
-                  {uploadedFiles.map(file => (
-                    <div key={file.id} className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}>
+                  {uploadedFiles.map((file) => (
+                    <div
+                      key={file.id}
+                      className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}
+                    >
                       {getFileIcon(file.name)}
                       <div className="flex-1 min-w-0">
-                        <p className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}>{file.name}</p>
-                        <p className={`text-xs ${themeClasses.textSecondary}`}>{formatFileSize(file.size)}</p>
+                        <p
+                          className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}
+                        >
+                          {file.name}
+                        </p>
+                        <p className={`text-xs ${themeClasses.textSecondary}`}>
+                          {formatFileSize(file.size)}
+                        </p>
                       </div>
                       <button
                         onClick={() => removeFile(file.id)}
@@ -289,72 +398,125 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
         </div>
 
         {/* Chat Area */}
-        <div className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}>
+        <div
+          className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}
+        >
           {/* Chat Header */}
-          <div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}>
+          <div
+            className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}
+          >
             <div className="flex items-center gap-2 sm:gap-3">
               <div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
-              <h3 className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}>Chat with AI Assistant</h3>
-              <span className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}>Online</span>
+              <h3
+                className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}
+              >
+                Chat with AI Assistant
+              </h3>
+              <span
+                className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}
+              >
+                Online
+              </span>
             </div>
           </div>
 
           {/* Chat Messages */}
           <div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
             {messages.map((message: any) => (
-              <div key={message.id} className={`flex ${message.type === 'user' ? 'justify-end' : message.type === 'system' ? 'justify-center' : 'justify-start'}`}>
-                {message.type !== 'system' && message.type === 'ai' && (
+              <div
+                key={message.id}
+                className={`flex ${
+                  message.type === "user"
+                    ? "justify-end"
+                    : message.type === "system"
+                    ? "justify-center"
+                    : "justify-start"
+                }`}
+              >
+                {message.type !== "system" && message.type === "ai" && (
                   <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
                     Z
                   </span>
                 )}
-                
-                <div className={`max-w-xs sm:max-w-sm lg:max-w-md ${
-                  message.type === 'user' ? `${themeClasses.userMessage} text-white ml-3` :
-                  message.type === 'ai' ? `${themeClasses.aiMessage} ${themeClasses.text}` :
-                  `${themeClasses.systemMessage} text-xs`
-                } px-4 py-3 rounded-2xl ${message.type === 'user' ? 'rounded-br-md' : message.type === 'ai' ? 'rounded-bl-md' : 'rounded-lg'}`}>
-                  {message.content && <p className="wrap-break-word text-xs sm:text-sm">{message.content}</p>}
+
+                <div
+                  className={`max-w-xs sm:max-w-sm lg:max-w-md ${
+                    message.type === "user"
+                      ? `${themeClasses.userMessage} text-white ml-3`
+                      : message.type === "ai"
+                      ? `${themeClasses.aiMessage} ${themeClasses.text}`
+                      : `${themeClasses.systemMessage} text-xs`
+                  } px-4 py-3 rounded-2xl ${
+                    message.type === "user"
+                      ? "rounded-br-md"
+                      : message.type === "ai"
+                      ? "rounded-bl-md"
+                      : "rounded-lg"
+                  }`}
+                >
+                  {message.content && (
+                    <p className="wrap-break-word text-xs sm:text-sm">
+                      {message.content}
+                    </p>
+                  )}
                   {message.files && message.files.length > 0 && (
                     <div className="mt-1 sm:mt-2 space-y-1">
                       {message.files.map((file: any) => (
-                        <div key={file.id} className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1">
+                        <div
+                          key={file.id}
+                          className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1"
+                        >
                           {getFileIcon(file.name)}
                           <span className="truncate text-xs">{file.name}</span>
-                          <span className="text-xs">({formatFileSize(file.size)})</span>
+                          <span className="text-xs">
+                            ({formatFileSize(file.size)})
+                          </span>
                         </div>
                       ))}
                     </div>
                   )}
                   <p className="text-xs opacity-70 mt-1 sm:mt-2">
-                    {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                    {message.timestamp.toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
                   </p>
                 </div>
 
-                {message.type === 'user' && (
-                  <div className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}>
+                {message.type === "user" && (
+                  <div
+                    className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}
+                  >
                     <User className="w-5 h-5 text-white" />
                   </div>
                 )}
               </div>
             ))}
-            
+
             {/* Typing Indicator */}
             {isTyping && (
               <div className="flex justify-start">
                 <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
                   Z
                 </span>
-                <div className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}>
+                <div
+                  className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}
+                >
                   <div className="flex space-x-1">
                     <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                    <div
+                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                      style={{ animationDelay: "0.1s" }}
+                    ></div>
+                    <div
+                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                      style={{ animationDelay: "0.2s" }}
+                    ></div>
                   </div>
                 </div>
               </div>
             )}
-            
+
             <div ref={chatEndRef} />
           </div>
 
@@ -368,7 +530,14 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               >
                 <Paperclip className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
-              
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={(e) => handleFileSelect(e.target.files)}
+              />
+
               <div className="flex-1 relative">
                 <textarea
                   ref={textareaRef}
@@ -378,17 +547,19 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
                   placeholder="Pergunte qualquer coisa para a Zoe"
                   rows={1}
                   className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
-                  style={{ minHeight: '40px' }}
+                  style={{ minHeight: "40px" }}
                 />
-                
+
                 {/* Character count */}
                 {inputValue.length > 0 && (
-                  <div className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}>
+                  <div
+                    className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}
+                  >
                     {inputValue.length}
                   </div>
                 )}
               </div>
-              
+
               <button
                 onClick={sendMessage}
                 disabled={!inputValue.trim() && uploadedFiles.length === 0}
@@ -406,7 +577,7 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
                 <Mic className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
             </div>
-            
+
             {/* Quick Actions */}
           </div>
         </div>

susconecta/types/lamejs.d.ts

@@ -0,0 +1,14 @@
+// Minimal type declarations for lamejs used in demo-voice-orb
+// Extend if more APIs are required.
+
+declare module 'lamejs' {
+  class Mp3Encoder {
+    constructor(channels: number, sampleRate: number, kbps: number);
+    encodeBuffer(buffer: Int16Array): Uint8Array;
+    flush(): Uint8Array;
+  }
+  export { Mp3Encoder };
+  // Default export pattern support
+  const _default: { Mp3Encoder: typeof Mp3Encoder };
+  export default _default;
+}