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

@@ -1,29 +1,35 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { SimpleThemeToggle } from "@/components/ui/simple-theme-toggle";
-import {
+import { Clock, Info, Lock, MessageCircle, Plus, Upload } from "lucide-react";
-  Clock,
-  Info,
-  Lock,
-  MessageCircle,
-  Plus,
-  Upload,
-} from "lucide-react";
 
-interface HistoryEntry {
+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.";
+
+export interface ChatMessage {
   id: string;
-  text: string;
+  sender: "user" | "assistant";
+  content: string;
   createdAt: string;
 }
 
+export interface ChatSession {
+  id: string;
+  startedAt: string;
+  updatedAt: string;
+  topic: string;
+  messages: ChatMessage[];
+}
+
 interface AIAssistantInterfaceProps {
   onOpenDocuments?: () => void;
   onOpenChat?: () => void;
-  history?: HistoryEntry[];
+  history?: ChatSession[];
-  onAddHistory?: (entry: HistoryEntry) => void;
+  onAddHistory?: (session: ChatSession) => void;
   onClearHistory?: () => void;
 }
 
@@ -35,11 +41,117 @@ export function AIAssistantInterface({
   onClearHistory,
 }: AIAssistantInterfaceProps) {
   const [question, setQuestion] = useState("");
-  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [internalHistory, setInternalHistory] = useState<ChatSession[]>(externalHistory ?? []);
-  const [internalHistory, setInternalHistory] = useState<HistoryEntry[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
-  const history = externalHistory ?? internalHistory;
+  const [manualSelection, setManualSelection] = useState(false);
+  const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
+  const messageListRef = useRef<HTMLDivElement | null>(null);
+  const history = internalHistory;
+  const historyRef = useRef<ChatSession[]>(history);
+  const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
+  const greetingWords = useMemo(() => baseGreeting.split(" "), [baseGreeting]);
+  const [typedGreeting, setTypedGreeting] = useState("");
+  const [typedIndex, setTypedIndex] = useState(0);
+  const [isTypingGreeting, setIsTypingGreeting] = useState(true);
 
-  const showHistoryBadge = useMemo(() => history.length > 0, [history.length]);
+  const [gradientGreeting, plainGreeting] = useMemo(() => {
+    if (!typedGreeting) return ["", ""] as const;
+    const separatorIndex = typedGreeting.indexOf("Como");
+    if (separatorIndex === -1) {
+      return [typedGreeting, ""] as const;
+    }
+    const gradientPart = typedGreeting.slice(0, separatorIndex).trimEnd();
+    const plainPart = typedGreeting.slice(separatorIndex).trimStart();
+    return [gradientPart, plainPart] as const;
+  }, [typedGreeting]);
+
+  useEffect(() => {
+    if (externalHistory) {
+      setInternalHistory(externalHistory);
+    }
+  }, [externalHistory]);
+
+  useEffect(() => {
+    historyRef.current = history;
+  }, [history]);
+
+  const activeSession = useMemo(
+    () => history.find((session) => session.id === activeSessionId) ?? null,
+    [history, activeSessionId]
+  );
+
+  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", {
+        hour: "2-digit",
+        minute: "2-digit",
+      }),
+    []
+  );
+
+  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) {
@@ -57,13 +169,129 @@ export function AIAssistantInterface({
     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);
+          if (index >= 0) {
+            const updated = [...previous];
+            updated[index] = session;
+            return updated;
+          }
+          return [...previous, session];
+        });
+      }
+      setActiveSessionId(session.id);
+      setManualSelection(false);
+    },
+    [onAddHistory]
+  );
+
+  const sendMessageToAssistant = useCallback(
+    async (prompt: string, baseSession: ChatSession) => {
+      const sessionId = baseSession.id;
+
+      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",
+          content,
+          createdAt,
+        };
+
+        const updatedSession: ChatSession = {
+          ...latestSession,
+          updatedAt: assistantMessage.createdAt,
+          messages: [...latestSession.messages, assistantMessage],
+        };
+
+        upsertSession(updatedSession);
+      };
+
+      try {
+        const response = await fetch(API_ENDPOINT, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ message: prompt }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+
+        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("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
+          }
+        }
+
+        appendAssistantMessage(replyText || FALLBACK_RESPONSE);
+      } catch (error) {
+        console.error("[ZoeIA] Falha ao obter resposta da API", error);
+        appendAssistantMessage(FALLBACK_RESPONSE);
+      }
+    },
+    [upsertSession]
+  );
+
   const handleSendMessage = () => {
     const trimmed = question.trim();
     if (!trimmed) return;
 
-    handlePersistHistory(trimmed);
+    const now = new Date();
-    console.log("[ZoeIA] Mensagem enviada para Zoe", trimmed);
+    const userMessage: ChatMessage = {
+      id: `msg-user-${now.getTime()}`,
+      sender: "user",
+      content: trimmed,
+      createdAt: now.toISOString(),
+    };
+
+    const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
+
+    const sessionToPersist: ChatSession = existingSession
+      ? {
+          ...existingSession,
+          updatedAt: userMessage.createdAt,
+          topic:
+            existingSession.messages.length === 0
+              ? buildSessionTopic(trimmed)
+              : existingSession.topic,
+          messages: [...existingSession.messages, userMessage],
+        }
+      : {
+          id: `session-${now.getTime()}`,
+          startedAt: now.toISOString(),
+          updatedAt: userMessage.createdAt,
+          topic: buildSessionTopic(trimmed),
+          messages: [userMessage],
+        };
+
+    upsertSession(sessionToPersist);
+    console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
     setQuestion("");
+    setHistoryPanelOpen(false);
+
+    void sendMessageToAssistant(trimmed, sessionToPersist);
   };
 
   const RealtimeTriggerButton = () => (
@@ -89,91 +317,149 @@ export function AIAssistantInterface({
     </button>
   );
 
-  const handlePersistHistory = (text: string) => {
-    const entry: HistoryEntry = {
-      id: `hist-${Date.now()}`,
-      text,
-      createdAt: new Date().toISOString(),
-    };
-
-    if (onAddHistory) {
-      onAddHistory(entry);
-    } else {
-      setInternalHistory((prev) => [...prev, entry]);
-    }
-    setDrawerOpen(true);
-  };
-
   const handleClearHistory = () => {
     if (onClearHistory) {
       onClearHistory();
     } else {
       setInternalHistory([]);
     }
+    setActiveSessionId(null);
+    setManualSelection(false);
+    setQuestion("");
+    setHistoryPanelOpen(false);
   };
 
-  const HistoryGlyph = () => (
+  const handleSelectSession = useCallback((sessionId: string) => {
-    <svg
+    setManualSelection(true);
-      xmlns="http://www.w3.org/2000/svg"
+    setActiveSessionId(sessionId);
-      viewBox="0 0 24 24"
+    setHistoryPanelOpen(false);
-      className="h-5 w-5"
+  }, []);
-      fill="none"
+
-    >
+  const startNewConversation = useCallback(() => {
-      <circle cx="16" cy="8" r="3" className="stroke-current" strokeWidth="1.6" />
+    setManualSelection(true);
-      <line x1="5" y1="8" x2="12" y2="8" className="stroke-current" strokeWidth="1.6" strokeLinecap="round" />
+    setActiveSessionId(null);
-      <line x1="5" y1="16" x2="19" y2="16" className="stroke-current" strokeWidth="1.6" strokeLinecap="round" />
+    setQuestion("");
-      <circle cx="9" cy="16" r="1" className="fill-current" />
+    setHistoryPanelOpen(false);
-    </svg>
+  }, []);
-  );
 
   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">
-        <header className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+        <motion.section
-          <div className="flex items-center gap-3">
+          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"
-              size="icon"
+                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
-              onClick={() => setDrawerOpen(true)}
+                    onClick={() => setHistoryPanelOpen(true)}
-              className="relative rounded-2xl border border-border/60 bg-card text-muted-foreground shadow-sm transition hover:text-primary"
                   >
-              <HistoryGlyph />
+                    Ver históricos
-              <span className="sr-only">Abrir histórico de interações</span>
+                  </Button>
-              {showHistoryBadge && (
+                )}
-                <span className="absolute -top-1 -right-1 h-2.5 w-2.5 rounded-full bg-primary" />
+                {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>
-            <span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-base font-semibold text-white shadow-lg">
-              Zoe
-            </span>
-            <div>
-              <p className="text-sm font-semibold text-primary">Assistente Clínica Zoe</p>
-              <h1 className="text-2xl font-bold tracking-tight">Olá, eu sou Zoe. Como posso ajudar hoje?</h1>
-            </div>
-          </div>
                 <SimpleThemeToggle />
-        </header>
+              </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>
 
-        <div className="flex items-center gap-2 rounded-full border border-border px-4 py-2 text-xs text-muted-foreground shadow-sm">
+        <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>
-        </div>
+        </motion.div>
 
-        <section className="space-y-6 rounded-3xl border border-primary/15 bg-card/60 p-6 shadow-lg backdrop-blur">
+        <motion.section
-          <div className="rounded-3xl border border-primary/20 bg-primary/5 p-6 text-sm leading-relaxed text-muted-foreground">
+          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="font-semibold">Informativo importante</span>
+              <span className="text-base font-semibold">Informativo importante</span>
             </div>
             <p>
-              A Zoe é a assistente virtual da Clínica Zoe. Ela reúne informações sobre seus cuidados e orienta os próximos passos.
+              A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado.
-              O atendimento é informativo e não substitui a avaliação de um profissional de saúde qualificado.
+              As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
             </p>
-            <p className="mt-4">
+            <p className="mt-4 font-medium text-foreground">
-              Em situações de urgência, procure imediatamente o suporte médico presencial ou ligue para os serviços de emergência.
+              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>
+          </motion.div>
 
           <div className="grid gap-3 sm:grid-cols-2">
             <Button
@@ -200,9 +486,73 @@ export function AIAssistantInterface({
               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>
-        </section>
+        </motion.section>
 
-        <div className="flex items-center gap-3 rounded-full border border-border bg-card/70 px-3 py-2 shadow-xl">
+        <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"}
+              </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"
@@ -212,6 +562,7 @@ export function AIAssistantInterface({
             >
               <Plus className="h-5 w-5" />
             </Button>
+          </div>
           <Input
             value={question}
             onChange={(event) => setQuestion(event.target.value)}
@@ -222,9 +573,9 @@ export function AIAssistantInterface({
               }
             }}
             placeholder="Pergunte qualquer coisa para a Zoe"
-            className="border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
+            className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
           />
-          <div className="flex items-center gap-2">
+          <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"
@@ -236,8 +587,10 @@ export function AIAssistantInterface({
           </div>
         </div>
 
-        {drawerOpen && (
+      </div>
-          <aside className="fixed inset-y-0 left-0 z-[120] w-[min(22rem,80vw)] bg-card shadow-2xl">
+
+      {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">
@@ -245,7 +598,7 @@ export function AIAssistantInterface({
                   Zoe
                 </span>
                 <div>
-                    <h2 className="text-sm font-semibold text-foreground">Histórico da Zoe</h2>
+                  <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>
@@ -253,65 +606,80 @@ export function AIAssistantInterface({
                 type="button"
                 variant="ghost"
                 size="icon"
-                  onClick={() => setDrawerOpen(false)}
                 className="rounded-full"
+                onClick={() => setHistoryPanelOpen(false)}
               >
-                  <span className="sr-only">Fechar histórico</span>
+                <span aria-hidden>×</span>
-                  ×
+                <span className="sr-only">Fechar históricos</span>
               </Button>
             </div>
-
+            <div className="border-b border-border px-4 py-3">
-              <div className="flex items-center gap-2 border-b border-border px-4 py-3">
               <Button
                 type="button"
-                  className="flex-1 justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
+                className="w-full justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
-                  onClick={() => {
+                onClick={startNewConversation}
-                    handleClearHistory();
-                    setDrawerOpen(false);
-                  }}
               >
                 <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">
-                    Nenhuma conversa registrada ainda. Envie uma mensagem para começar um novo acompanhamento com a Zoe.
+                  Nenhum atendimento registrado ainda. Envie uma mensagem para começar um acompanhamento.
                 </p>
               ) : (
                 <ul className="flex flex-col gap-3 text-sm">
-                    {[...history]
+                  {[...history].reverse().map((session) => {
-                      .reverse()
+                    const lastMessage = session.messages[session.messages.length - 1];
-                      .map((entry) => (
+                    const isActive = session.id === activeSessionId;
-                        <li
+                    return (
-                          key={entry.id}
+                      <li key={session.id}>
-                          className="flex items-start gap-3 rounded-xl border border-border/60 bg-background/90 p-3 shadow-sm"
+                        <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"
+                          }`}
                         >
-                          <span className="mt-0.5 text-primary">
+                          <div className="flex items-center justify-between gap-3">
-                            <Clock className="h-4 w-4" />
+                            <p className="font-semibold text-foreground line-clamp-2">{session.topic}</p>
-                          </span>
+                            <span className="text-xs text-muted-foreground">{formatDateTime(session.updatedAt)}</span>
-                          <div className="flex-1">
-                            <p className="font-medium text-foreground line-clamp-2">{entry.text}</p>
-                            <p className="text-xs text-muted-foreground">
-                              {new Date(entry.createdAt).toLocaleString("pt-BR", {
-                                day: "2-digit",
-                                month: "2-digit",
-                                hour: "2-digit",
-                                minute: "2-digit",
-                              })}
-                            </p>
                           </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>
       )}
     </div>
-    </div>
   );
 }

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

@@ -5,21 +5,18 @@
 import { useEffect, useMemo, useState } from "react";
 import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { AIAssistantInterface } from "@/components/ZoeIA/ai-assistant-interface";
+import {
+  AIAssistantInterface,
+  ChatSession,
+} from "@/components/ZoeIA/ai-assistant-interface";
 import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
 
-interface HistoryEntry {
-  id: string;
-  text: string;
-  createdAt: string;
-}
-
 export function ChatWidget() {
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [realtimeOpen, setRealtimeOpen] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
   const [voiceDetected, setVoiceDetected] = useState(false);
-  const [history, setHistory] = useState<HistoryEntry[]>([]);
+  const [history, setHistory] = useState<ChatSession[]>([]);
 
   useEffect(() => {
     if (!assistantOpen && !realtimeOpen) return;
@@ -74,8 +71,16 @@ export function ChatWidget() {
     openRealtime();
   };
 
-  const handleAddHistory = (entry: HistoryEntry) => {
+  const handleUpsertHistory = (session: ChatSession) => {
-    setHistory((prev) => [...prev, entry]);
+    setHistory((previous) => {
+      const index = previous.findIndex((item) => item.id === session.id);
+      if (index >= 0) {
+        const updated = [...previous];
+        updated[index] = session;
+        return updated;
+      }
+      return [...previous, session];
+    });
   };
 
   const handleClearHistory = () => {
@@ -105,7 +110,7 @@ export function ChatWidget() {
               onOpenDocuments={handleOpenDocuments}
               onOpenChat={handleOpenChat}
               history={history}
-              onAddHistory={handleAddHistory}
+              onAddHistory={handleUpsertHistory}
               onClearHistory={handleClearHistory}
             />
           </div>