README.md

@@ -1,379 +1,2 @@
-<div align="center">
+# riseup-squad20
 
-# 🏥 MEDIConnect
-
-### Plataforma de Gestão de Saúde Inteligente
-
-*Combatendo o absenteísmo em clínicas e hospitais através de tecnologia e inovação*
-
-[![Next.js](https://img.shields.io/badge/Next.js_15-000000?style=flat&logo=next.js&logoColor=white)](https://nextjs.org/)
-[![TypeScript](https://img.shields.io/badge/TypeScript-2B7FFF?style=flat&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
-[![React](https://img.shields.io/badge/React_19-2B7FFF?style=flat&logo=react&logoColor=white)](https://react.dev/)
-[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-2B7FFF?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
-[![Supabase](https://img.shields.io/badge/Supabase-2B7FFF?style=flat&logo=supabase&logoColor=white)](https://supabase.com/)
-
-</div>
-
----
-
-## 📋 Índice
-
-1. [Visão Geral](#-visão-geral)
-2. [Problema e Solução](#-problema-e-solução)
-3. [Funcionalidades](#-funcionalidades)
-4. [Tecnologias](#️-tecnologias)
-5. [Instalação](#-instalação)
-6. [Como Usar](#-como-usar)
-7. [Fluxos de Usuário](#-fluxos-de-usuário)
-8. [Componentes Principais](#-componentes-principais)
-9. [Contribuindo](#-contribuindo)
-10. [Licença](#-licença)
-11. [Contato](#-contato)
-
----
-
-## 🎯 Visão Geral
-
-**MEDIConnect** é uma plataforma web moderna e intuitiva desenvolvida para revolucionar a gestão de saúde em clínicas e hospitais. Com foco na redução do absenteísmo (faltas em consultas), a plataforma oferece uma experiência completa para pacientes, profissionais de saúde e administradores.
-
-### 🌟 Diferenciais
-
-- 🤖 **Zoe IA Assistant**: Assistente virtual inteligente para suporte aos usuários
-- 📱 **Interface Responsiva**: Design moderno e adaptável a qualquer dispositivo
-- 🔐 **Autenticação Segura**: Sistema robusto com perfis diferenciados
-- ⚡ **Performance**: Construído com Next.js 15 para máxima velocidade
-- 🎨 **UX/UI Premium**: Interface limpa e profissional voltada para área da saúde
-
----
-
-## 🩺 Problema e Solução
-
-### O Problema
-O **absenteísmo** (não comparecimento a consultas agendadas) é um problema crítico em clínicas e hospitais, causando:
-- ⏰ Desperdício de tempo dos profissionais
-- 💰 Perda de receita para estabelecimentos
-- 📉 Redução da eficiência operacional
-- 😔 Impacto negativo no atendimento de outros pacientes
-
-### Nossa Solução
-MEDIConnect oferece um sistema inteligente de gestão que:
-- ✅ Facilita o agendamento e reagendamento de consultas
-- ✅ Permite visualização clara da agenda para profissionais
-- ✅ Oferece assistência via IA para dúvidas e suporte
-
----
-
-## ✨ Funcionalidades
-
-### 👤 Para Pacientes
-- 🏠 **Dashboard Personalizado**: Visão geral de consultas e exames
-- 📅 **Agendamento**: Sistema fácil de marcar consultas
-- 📋 **Resultados de Exames**: Acesso seguro a laudos e resultados
-- 👨‍⚕️ **Busca de Profissionais**: Encontre médicos por especialidade
-- 💬 **Zoe IA Assistant**: Tire dúvidas 24/7 com nossa assistente virtual
-
-### 👨‍⚕️ Para Profissionais
-- 📊 **Dashboard Profissional**: Visão completa de atendimentos
-- ✍️ **Editor de Laudos**: Crie e edite laudos médicos de forma rápida
-- 👥 **Gestão de Pacientes**: Acesse informações dos pacientes
-- 📈 **Agenda**: Visualização clara de consultas
-
-### 🔧 Para Administradores
-- 📊 **Dashboard Administrativo**: Métricas e estatísticas em tempo real
-- 📈 **Relatórios Detalhados**: Análise de comparecimento e absenteísmo
-- 👥 **Gestão Completa**: Gerencie pacientes, profissionais e agendamentos
-- 🎯 **Painel de Controle**: Visão 360° da operação da clínica
-
----
-
-## 🛠️ Tecnologias
-
-### Frontend (Atual)
-- **[Next.js 15](https://nextjs.org/)** - Framework React com Server Components
-- **[React 19](https://react.dev/)** - Biblioteca JavaScript para interfaces
-- **[TypeScript](https://www.typescriptlang.org/)** - Tipagem estática para JavaScript
-- **[Tailwind CSS](https://tailwindcss.com/)** - Framework CSS utilitário
-- **[Shadcn/ui](https://ui.shadcn.com/)** - Componentes UI reutilizáveis
-- **[React Hook Form](https://react-hook-form.com/)** - Gerenciamento de formulários
-- **[Zod](https://zod.dev/)** - Validação de schemas
-- **[date-fns](https://date-fns.org/)** - Manipulação de datas
-
-### Backend (Integrado)
-- **[Supabase](https://supabase.com/)** - Backend as a Service (PostgreSQL)
-- **Authentication** - Sistema de autenticação completo
-- **Storage** - Armazenamento de arquivos e documentos
-- **REST API** - Endpoints integrados para todas as funcionalidades
-
-### Ferramentas de Desenvolvimento
-- **[ESLint](https://eslint.org/)** - Linter para código JavaScript/TypeScript
-- **[PostCSS](https://postcss.org/)** - Transformação de CSS
-- **[Autoprefixer](https://github.com/postcss/autoprefixer)** - Prefixos CSS automáticos
-
----
-
-## 🚀 Instalação
-
-### Pré-requisitos
-
-Certifique-se de ter instalado:
-
-- **Node.js** 18.17 ou superior
-- **npm**
-- **Git**
-
-### Passo a Passo
-
-1. **Clone o repositório**
-
-```bash
-git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
-cd susconecta
-```
-
-2. **Instale as dependências**
-
-```bash
-npm install
-```
-
-3. **Configuração de ambiente (desenvolvimento)**
-
-> Observação: o projeto possui valores _fallback_ em `susconecta/lib/env-config.ts`, mas o recomendado é criar um arquivo `.env.local` não versionado com suas credenciais locais.
-
-```env
-# Supabase
-NEXT_PUBLIC_SUPABASE_URL=https://seu-projeto.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=pk_... (anon key)
-
-# Aplicação
-NEXT_PUBLIC_APP_URL=http://localhost:3000
-NEXT_PUBLIC_API_URL=http://localhost:3000/api
-```
-
-**Boas práticas de segurança**
-- Nunca exponha a `service_role` key no frontend.
-- Proteja operações sensíveis com Row-Level Security (RLS) no Supabase ou mova-as para rotas/Edge Functions server-side.
-- Não commite `.env.local` no repositório (adicione ao `.gitignore`).
-
-4. **Inicie o servidor de desenvolvimento**
-
-```bash
-npm run dev
-```
-
-5. **Acesse a aplicação**
-
-Abra [http://localhost:3000](http://localhost:3000) no seu navegador.
-
----
-
-## 💻 Como Usar
-
-### Navegação Principal
-
-#### 🏠 Página Inicial
-Acesse `/home` para conhecer a plataforma e suas funcionalidades.
-
-#### 🔐 Autenticação
-O sistema possui três níveis de acesso:
-
-- **Pacientes**: `/login-paciente`
-- **Profissionais**: `/login-profissional`
-- **Administradores**: `/login-admin`
-
-#### 📱 Funcionalidades por Perfil
-
-**Como Paciente:**
-1. Faça login em `/login-paciente`
-2. Acesse seu dashboard em `/paciente`
-3. Agende consultas em `/consultas`
-4. Visualize resultados em `/paciente/resultados`
-5. Gerencie seu perfil em `/perfil`
-
-**Como Profissional:**
-1. Faça login em `/login-profissional`
-2. Acesse seu dashboard em `/profissional`
-3. Gerencie sua agenda em `/agenda`
-4. Crie laudos em `/laudos-editor`
-5. Visualize pacientes em `/pacientes`
-
-**Como Administrador:**
-1. Faça login em `/login-admin`
-2. Acesse o painel em `/dashboard`
-3. Visualize relatórios em `/dashboard/relatorios`
-4. Gerencie o sistema completo
-
----
-
-## 🎭 Fluxos de Usuário
-
-### Fluxo de Agendamento (Paciente)
-
-```mermaid
-graph LR
-A[Login Paciente] --> B[Dashboard]
-B --> C[Buscar Médico]
-C --> D[Selecionar Especialidade]
-D --> E[Escolher Horário]
-E --> F[Confirmar Agendamento]
-F --> G[Receber Confirmação]
-```
-
-### Fluxo de Atendimento (Profissional)
-
-```mermaid
-graph LR
-A[Login Profissional] --> B[Ver Agenda]
-B --> C[Realizar Consulta]
-C --> D[Criar Laudo]
-D --> E[Enviar para Paciente]
-E --> F[Atualizar Status]
-```
-
-### Fluxo Administrativo
-
-```mermaid
-graph LR
-A[Login Admin] --> B[Dashboard]
-B --> C[Visualizar Métricas]
-C --> D[Gerar Relatórios]
-D --> E[Analisar Absenteísmo]
-E --> F[Tomar Decisões]
-```
-
----
-
-## 🧩 Componentes Principais
-
-### 🤖 Zoe IA Assistant
-
-Assistente virtual inteligente que oferece:
-- Suporte 24/7 aos usuários
-- Respostas a dúvidas frequentes
-- Upload de arquivos para análise
-- Interação por voz
-
-**Arquivos:**
-- `components/ZoeIA/ai-assistant-interface.tsx`
-- `components/ZoeIA/voice-powered-orb.tsx`
-- `components/ZoeIA/demo.tsx`
-
-### 📅 Sistema de Agendamento
-
-Gerenciamento completo de consultas e exames:
-- Calendário interativo
-- Seleção de horários disponíveis
-- Confirmação automática
-- Lembretes e notificações
-
-**Arquivos:**
-- `components/features/agendamento/`
-- `components/features/Calendario/`
-- `app/(main-routes)/consultas/`
-
-### 📋 Editor de Laudos
-
-Ferramenta profissional para criação de laudos médicos:
-- Interface intuitiva
-- Frases pré-definidas
-- Exportação em PDF
-
-**Arquivos:**
-- `app/laudos-editor/`
-- `lib/laudo-exemplos.ts`
-- `lib/laudo-notification.ts`
-
-### 📊 Dashboard Analytics
-
-Painéis administrativos com:
-- Métricas em tempo real
-- Gráficos interativos
-- Relatórios de absenteísmo
-- Análise de desempenho
-
-**Arquivos:**
-- `components/features/dashboard/`
-- `app/(main-routes)/dashboard/`
-- `lib/reportService.ts`
-
----
-
-## 🤝 Contribuindo
-
-Contribuições são bem-vindas! Siga estes passos:
-
-### 1. Fork o projeto
-
-Clique no botão "Fork" no topo da página.
-
-### 2. Clone seu fork
-
-```bash
-git clone https://git.popcode.com.br/RiseUP/riseup-squad20.git
-cd susconecta
-```
-
-### 3. Crie uma branch
-
-```bash
-git checkout -b feature/nova-funcionalidade
-```
-
-### 4. Faça suas alterações
-
-Desenvolva sua funcionalidade seguindo os padrões do projeto.
-
-### 5. Commit suas mudanças
-
-```bash
-git add .
-git commit -m "feat: adiciona nova funcionalidade X"
-```
-
-**Padrão de commits:**
-- `feat:` Nova funcionalidade
-- `fix:` Correção de bug
-- `docs:` Documentação
-- `style:` Formatação
-- `refactor:` Refatoração
-- `test:` Testes
-- `chore:` Manutenção
-
-### 6. Push para seu fork
-
-```bash
-git push origin feature/nova-funcionalidade
-```
-
-### 7. Abra um Pull Request
-
-Descreva suas mudanças detalhadamente.
-
----
-
-## 📝 Licença
-
-Este projeto está sob a licença **MIT**. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
-
-## 📞 Contato
-
-**MEDIConnect Team**
-
-- 🌐 Website: [mediconnect.com](https://mediconecta-app-liart.vercel.app/)
-- 📧 Email dos Desenvolvedores:  
-    - 📧 [Jonas Francisco](mailto:jonastom478@gmail.com)
-    - 📧 [João Gustavo](mailto:jgcmendonca@gmail.com)
-    - 📧 [Maria Gabrielly](mailto:maria.gabrielly221106@gmail.com)
-    - 📧 [Pedro Gomes](mailto:pedrogomes5913@gmail.com)
-
----
-
-<div align="center">
-
-**Desenvolvido com ❤️ pelo squad 20**
-
-*Transformando a gestão de saúde através da tecnologia*
-
-[![Next.js](https://img.shields.io/badge/Powered%20by-Next.js-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
-
-</div>

susconecta/app/audio-teste/page.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
-import { useTheme } from "next-themes";
-import React from "react";
-
-export default function VozPage() {
-  const { theme } = useTheme();
-  const isDark = theme === "dark";
-
-  // Classes condicionais para manter coerência com o chat
-  const bgClass = isDark
-    ? "bg-gray-900 text-white"
-    : "bg-gray-50 text-gray-900";
-
-  return (
-    <div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
-      <AIVoiceFlow />
-    </div>
-  );
-}
-

susconecta/app/paciente/page.tsx

@@ -602,7 +602,7 @@ export default function PacientePage() {
 
         {/* Cards com Informações */}
         <div className="grid grid-cols-1 gap-3 sm:gap-4 md:gap-4 md:grid-cols-2">
-          <Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md">
+          <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
             <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
               <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                 <Calendar className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
@@ -616,7 +616,7 @@ export default function PacientePage() {
             </div>
           </Card>
 
-          <Card className="group rounded-2xl border border-border/60 bg-card p-4 sm:p-5 md:p-5 shadow-sm transition hover:shadow-md">
+          <Card className="group rounded-2xl border border-border/60 bg-card/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
             <div className="flex h-32 sm:h-36 md:h-40 w-full flex-col items-center justify-center gap-2 sm:gap-3">
               <div className="flex h-10 w-10 sm:h-11 sm:w-11 md:h-12 md:w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                 <FileText className="h-5 w-5 sm:h-5 sm:w-5 md:h-6 md:w-6" aria-hidden />
@@ -1698,6 +1698,7 @@ export default function PacientePage() {
                 </div>
                 <div className="flex gap-2 w-full md:w-auto flex-col sm:flex-row">
                   <Button variant="outline" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { router.push(`/laudos/${r.id}`); }}>{strings.visualizarLaudo}</Button>
+                  <Button variant="secondary" className="hover:bg-primary! hover:text-white! transition-colors text-xs sm:text-sm w-full md:w-auto" onClick={async () => { try { await navigator.clipboard.writeText(JSON.stringify(r)); setToast({ type: 'success', msg: 'Laudo copiado.' }) } catch { setToast({ type: 'error', msg: 'Falha ao copiar.' }) } }}>{strings.compartilhar}</Button>
                 </div>
               </div>
                   ))}
@@ -1959,8 +1960,8 @@ export default function PacientePage() {
         {/* Layout com sidebar e conteúdo */}
         <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] lg:grid-cols-[220px_1fr] gap-4 sm:gap-5 md:gap-6">
           {/* Sidebar vertical - sticky */}
-          <aside className="sticky top-24 h-fit md:top-24 z-40">
+          <aside className="sticky top-24 h-fit md:top-24">
-            <nav aria-label="Navegação do dashboard" className="relative isolate bg-card shadow-lg rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-50">
+            <nav aria-label="Navegação do dashboard" className="bg-card shadow-md rounded-lg border border-border p-1.5 sm:p-2 md:p-3 z-30">
               <div className="grid grid-cols-2 md:grid-cols-1 gap-1 sm:gap-1.5">
                 <Button
                   variant={tab==='dashboard'?'default':'ghost'}

susconecta/app/paciente/resultados/ResultadosClient.tsx

@@ -9,7 +9,7 @@ import { Card } from '@/components/ui/card'
 import { Toggle } from '@/components/ui/toggle'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Badge } from '@/components/ui/badge'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import {
@@ -31,7 +31,6 @@ import {
   buscarPacientes,
   listarDisponibilidades,
   listarExcecoes,
-  getAvatarPublicUrl,
   type Medico,
 } from '@/lib/api'
 
@@ -68,9 +67,6 @@ export default function ResultadosClient() {
   const [medicos, setMedicos] = useState<Medico[]>([])
   const [loadingMedicos, setLoadingMedicos] = useState(false)
 
-  // Avatares dos médicos
-  const [medicosAvatars, setMedicosAvatars] = useState<Record<string, string>>({})
-
   // agenda por médico e loading por médico
   const [agendaByDoctor, setAgendaByDoctor] = useState<Record<string, DayAgenda[]>>({})
   const [agendaLoading, setAgendaLoading] = useState<Record<string, boolean>>({})
@@ -254,22 +250,6 @@ export default function ResultadosClient() {
     return () => { mounted = false }
   }, [medicoFiltro, paramsSync])
 
-  // Carregar avatares dos médicos quando a lista mudar
-  useEffect(() => {
-    if (!medicos || medicos.length === 0) return
-    
-    const avatars: Record<string, string> = {}
-    
-    // Gerar URLs dos avatares sem fazer verificação (deixar o browser carregar)
-    for (const medico of medicos) {
-      if (!medico.id) continue
-      // Usar jpg como padrão (mais comum)
-      avatars[medico.id] = getAvatarPublicUrl(medico.id, 'jpg')
-    }
-    
-    setMedicosAvatars(avatars)
-  }, [medicos])
-
   // 3) Carregar horários disponíveis para um médico (próximos 7 dias) e agrupar por dia
   async function loadAgenda(doctorId: string): Promise<{ iso: string; label: string } | null> {
   if (!doctorId) return null
@@ -920,7 +900,7 @@ export default function ResultadosClient() {
             const cidade = medico.city || '—'
             const precoTipoConsulta = tipoConsulta === 'local' ? 'R$ —' : 'R$ —'
             
-            // Usar os próxios 3 horários já memoizados
+            // Usar os próximos 3 horários já memoizados
             const proximos3Horarios = proximosHorariosPorMedico[id] || []
 
             return (
@@ -931,7 +911,6 @@ export default function ResultadosClient() {
                 {/* Header com Avatar, Nome, Especialidade e Botão Ver Perfil */}
                 <div className="flex gap-4 items-start">
                   <Avatar className="h-20 w-20 border-2 border-primary/20 bg-primary/5 flex-shrink-0">
-                    {medicosAvatars[id] && <AvatarImage src={medicosAvatars[id]} alt={nome} />}
                     <AvatarFallback className="bg-primary/10 text-primary text-lg font-semibold">
                       {nome.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
                     </AvatarFallback>

susconecta/app/profissional/page.tsx

@@ -13,7 +13,6 @@ import { buscarPacientes, listarPacientes, buscarPacientePorId, buscarPacientesP
 import { ENV_CONFIG } from '@/lib/env-config';
 import { useReports } from "@/hooks/useReports";
 import { CreateReportData } from "@/types/report-types";
-import { createAndNotifyReport } from "@/lib/reportService";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -2589,9 +2588,6 @@ const ProfissionalPage = () => {
                         if (isNewLaudo) {
                           if (createNewReport) {
                             const created = await createNewReport(payload as any);
-                            console.log('[LaudoEditor] Report criado:', { created, patient_id: payload.patient_id });
-                            // ✅ Webhook agora é enviado automaticamente dentro de createNewReport() / criarRelatorio()
-                            
                             if (onSaved) onSaved(created);
                           }
                         } else {

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

@@ -46,8 +46,6 @@ 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?";
@@ -84,6 +82,17 @@ 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", {
@@ -93,19 +102,92 @@ 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((prev) => {
+        setInternalHistory((previous) => {
-          const index = prev.findIndex((s) => s.id === session.id);
+          const index = previous.findIndex((item) => item.id === session.id);
           if (index >= 0) {
-            const updated = [...prev];
+            const updated = [...previous];
             updated[index] = session;
             return updated;
           }
-          return [...prev, session];
+          return [...previous, session];
         });
       }
       setActiveSessionId(session.id);
@@ -120,6 +202,8 @@ 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",
@@ -127,12 +211,9 @@ export function AIAssistantInterface({
           createdAt,
         };
 
-        const latestSession =
-          historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
-
         const updatedSession: ChatSession = {
           ...latestSession,
-          updatedAt: createdAt,
+          updatedAt: assistantMessage.createdAt,
           messages: [...latestSession.messages, assistantMessage],
         };
 
@@ -140,50 +221,37 @@ export function AIAssistantInterface({
       };
 
       try {
-        let replyText = "";
+        const response = await fetch(API_ENDPOINT, {
-        let response: Response;
-
-        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 }),
         });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
         }
 
         const rawPayload = await response.text();
+        let replyText = "";
 
-        if (rawPayload.trim()) {
+        if (rawPayload.trim().length > 0) {
           try {
-            const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown };
+            const parsed = JSON.parse(rawPayload) as { reply?: unknown };
-            if (typeof parsed.reply === "string") {
+            replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
-              replyText = parsed.reply.trim();
+          } catch (parseError) {
-            } else if (typeof parsed.message === "string") {
+            console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
-              replyText = parsed.message.trim();
-            }
-          } catch (error) {
-            console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
           }
         }
 
         appendAssistantMessage(replyText || FALLBACK_RESPONSE);
       } catch (error) {
-        console.error("[ZoeIA] Erro ao buscar resposta da API", error);
+        console.error("[ZoeIA] Falha ao obter resposta da API", error);
         appendAssistantMessage(FALLBACK_RESPONSE);
       }
     },
-    [upsertSession, pdfFile]
+    [upsertSession]
   );
 
   const handleSendMessage = () => {
@@ -198,124 +266,420 @@ export function AIAssistantInterface({
       createdAt: now.toISOString(),
     };
 
-    const session = history.find((s) => s.id === activeSessionId);
+    const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
-    const sessionToUse: ChatSession = session
+
+    const sessionToPersist: ChatSession = existingSession
       ? {
-          ...session,
+          ...existingSession,
           updatedAt: userMessage.createdAt,
-          messages: [...session.messages, userMessage],
+          topic:
+            existingSession.messages.length === 0
+              ? buildSessionTopic(trimmed)
+              : existingSession.topic,
+          messages: [...existingSession.messages, userMessage],
         }
       : {
           id: `session-${now.getTime()}`,
           startedAt: now.toISOString(),
           updatedAt: userMessage.createdAt,
-          topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed,
+          topic: buildSessionTopic(trimmed),
           messages: [userMessage],
         };
 
-    upsertSession(sessionToUse);
+    upsertSession(sessionToPersist);
+    console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
     setQuestion("");
     setHistoryPanelOpen(false);
-    void sendMessageToAssistant(trimmed, sessionToUse);
+
+    void sendMessageToAssistant(trimmed, sessionToPersist);
   };
 
-  const handleSelectPdf = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const RealtimeTriggerButton = () => (
-    const file = e.target.files?.[0];
+    <button
-    if (file && file.type === "application/pdf") {
+      type="button"
-      setPdfFile(file);
+      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([]);
     }
-    // Permite re-selecionar o mesmo arquivo
+    setActiveSessionId(null);
-    e.target.value = "";
+    setManualSelection(false);
+    setQuestion("");
+    setHistoryPanelOpen(false);
   };
 
-  const removePdf = () => setPdfFile(null);
+  const handleSelectSession = useCallback((sessionId: string) => {
+    setManualSelection(true);
+    setActiveSessionId(sessionId);
+    setHistoryPanelOpen(false);
+  }, []);
+
+  const startNewConversation = useCallback(() => {
+    setManualSelection(true);
+    setActiveSessionId(null);
+    setQuestion("");
+    setHistoryPanelOpen(false);
+  }, []);
 
   return (
-    <div className="w-full max-w-3xl mx-auto p-4 space-y-4">
+    <div className="min-h-screen bg-background text-foreground">
-      {/* Área superior exibindo PDF selecionado */}
+      <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-12">
-      {pdfFile && (
+        <motion.section
-        <div className="flex items-center justify-between border rounded-lg p-3 bg-muted/50">
+          initial={{ opacity: 0, y: -14 }}
-          <div className="flex items-center gap-3 min-w-0">
+          animate={{ opacity: 1, y: 0 }}
-            <Upload className="w-5 h-5 text-primary" />
+          transition={{ duration: 0.6, ease: "easeOut" }}
-            <div className="min-w-0">
+          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"
-              <p className="text-sm font-medium truncate" title={pdfFile.name}>{pdfFile.name}</p>
+        >
-              <p className="text-xs text-muted-foreground">
+          <div className="flex flex-col gap-6">
-                PDF anexado • {(pdfFile.size / 1024).toFixed(1)} KB
+            <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>
-            </div>
+                  <motion.h1
-          </div>
+                    key={typedGreeting}
-          <Button variant="secondary" size="sm" onClick={removePdf}>
+                    className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl"
-            Remover
+                    initial={{ opacity: 0.6 }}
-          </Button>
+                    animate={{ opacity: 1 }}
-        </div>
+                    transition={{ duration: 0.3 }}
-      )}
-
-      {/* 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 && (
+                    {gradientGreeting && (
-          <p className="text-sm text-muted-foreground">Nenhuma mensagem ainda. Envie uma pergunta.</p>
+                      <span className="bg-gradient-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
+                        {gradientGreeting}
+                        {plainGreeting ? " " : ""}
+                      </span>
                     )}
-        {activeMessages.map((m) => (
+                    {plainGreeting && <span className="text-foreground">{plainGreeting}</span>}
-          <div
+                    <span
-            key={m.id}
+                      className={`ml-1 inline-block h-6 w-[0.12rem] align-middle ${
-            className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}
+                        isTypingGreeting ? "animate-pulse bg-primary" : "bg-transparent"
-          >
-            <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}
+                  </motion.h1>
-              <div className="mt-1 text-[10px] opacity-70">
-                {formatTime(m.createdAt)}
                 </div>
               </div>
-          </div>
+              <div className="flex flex-wrap items-center justify-end gap-2 sm:justify-end">
-        ))}
+                {history.length > 0 && (
-      </div>
-
-      {/* Input & ações */}
-      <div className="flex items-center gap-2">
-        <div className="flex gap-2">
                   <Button
                     type="button"
-            variant="secondary"
+                    variant="ghost"
-            size="sm"
+                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
-            onClick={() => pdfInputRef.current?.click()}
+                    onClick={() => setHistoryPanelOpen(true)}
                   >
-            PDF
+                    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"}
+              </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>
-          <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)}
+            onChange={(event) => setQuestion(event.target.value)}
-          onKeyDown={(e) => {
+            onKeyDown={(event) => {
-            if (e.key === "Enter" && !e.shiftKey) {
+              if (event.key === "Enter") {
-              e.preventDefault();
+                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"
           />
-        <Button onClick={handleSendMessage} disabled={!question.trim()}>
+          <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>
-      <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>
+
+      {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>
+      )}
     </div>
   );
 }

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

@@ -1,196 +0,0 @@
-"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/ZoeIA/demo-file-upload.tsx

@@ -1,5 +0,0 @@
-import Component from "@/components/ui/file-upload-and-chat";
-
-export default function FileUploadChat() {
-  return <Component />;
-}

susconecta/components/features/dashboard/header.tsx

@@ -33,32 +33,40 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
   }, [dropdownOpen]);
 
   return (
-    <header className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-3 sm:px-6 py-2 flex flex-wrap items-center gap-3">
+    <header className="h-16 border-b border-border bg-background px-6 flex items-center justify-between">
-      <div className="flex items-center gap-3 min-w-0">
+      <div className="flex flex-row items-center gap-4">
         <SidebarTrigger />
-        <div className="flex flex-col justify-center leading-tight min-w-0">
+        <div className="flex items-start flex-col justify-center py-2">
-          <h1 className="text-sm sm:text-lg font-semibold text-foreground truncate max-w-[55vw] sm:max-w-none">{title}</h1>
+          <h1 className="text-lg font-semibold text-foreground">{title}</h1>
-          {subtitle && (
+          <p className="text-muted-foreground">{subtitle}</p>
-            <p className="text-[11px] sm:text-xs text-muted-foreground truncate max-w-[55vw] sm:max-w-none">{subtitle}</p>
-          )}
         </div>
       </div>
-      <div className="flex items-center gap-2 ml-auto">
+
-        <Button variant="ghost" size="icon" className="hover-primary-blue hidden xs:flex">
+      <div className="flex items-center space-x-4">
+  <Button variant="ghost" size="icon" className="hover-primary-blue">
           <Bell className="h-4 w-4" />
         </Button>
+
         <SimpleThemeToggle />
+                    <Button
+                      variant="outline"
+                      className="text-blue-500 border-blue-500 bg-transparent shadow-sm shadow-blue-500/10 border hover-primary-blue"
+                      asChild
+                    ></Button>
+        {/* Avatar Dropdown Simples */}
         <div className="relative" ref={dropdownRef}>
           <Button 
             variant="ghost" 
-            className="relative h-8 w-8 rounded-full border border-border hover:border-primary"
+            className="relative h-8 w-8 rounded-full border-2 border-border hover:border-primary"
             onClick={() => setDropdownOpen(!dropdownOpen)}
-            aria-label="Abrir menu do perfil"
           >
+            {/* Mostrar foto do usuário quando disponível; senão, mostrar fallback com iniciais */}
             <Avatar className="h-8 w-8">
-              {(() => {
+              {
+                (() => {
                   const userPhoto = (user as any)?.profile?.foto_url || (user as any)?.profile?.fotoUrl || (user as any)?.profile?.avatar_url
                   const alt = user?.name || user?.email || 'Usuário'
+
                   const getInitials = (name?: string, email?: string) => {
                     if (name) {
                       const parts = name.trim().split(/\s+/)
@@ -69,32 +77,37 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
                     if (email) return email.charAt(0).toUpperCase()
                     return 'U'
                   }
+
                   return (
                     <>
                       <AvatarImage src={userPhoto || undefined} alt={alt} />
                       <AvatarFallback className="bg-primary text-primary-foreground font-semibold">{getInitials(user?.name, user?.email)}</AvatarFallback>
                     </>
                   )
-              })()}
+                })()
+              }
             </Avatar>
           </Button>
+
+          {/* Dropdown Content */}
           {dropdownOpen && (
-            <div className="absolute right-0 mt-2 w-64 sm:w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground animate-in fade-in slide-in-from-top-2">
+            <div className="absolute right-0 mt-2 w-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground">
-              <div className="p-3 sm:p-4 border-b border-border">
+              <div className="p-4 border-b border-border">
                 <div className="flex flex-col space-y-1">
-                  <p className="text-xs sm:text-sm font-semibold leading-none">
+                  <p className="text-sm font-semibold leading-none">
                     {user?.userType === 'administrador' ? 'Administrador da Clínica' : 'Usuário do Sistema'}
                   </p>
                   {user?.email ? (
-                    <p className="text-[10px] sm:text-xs leading-none text-muted-foreground truncate">{user.email}</p>
+                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                   ) : (
-                    <p className="text-[10px] sm:text-xs leading-none text-muted-foreground">Email não disponível</p>
+                    <p className="text-xs leading-none text-muted-foreground">Email não disponível</p>
                   )}
-                  <p className="text-[10px] sm:text-xs leading-none text-primary font-medium">
+                  <p className="text-xs leading-none text-primary font-medium">
                     Tipo: {user?.userType === 'administrador' ? 'Administrador' : user?.userType || 'Não definido'}
                   </p>
                 </div>
               </div>
+              
               <div className="py-1">
                 <button 
                   onClick={(e) => {
@@ -102,18 +115,21 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
                     setDropdownOpen(false);
                     router.push('/perfil');
                   }}
-                  className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm hover:bg-accent cursor-pointer"
+                  className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer"
                 >
                    Perfil
                 </button>
-                <div className="border-t border-border my-1" />
+                
+                <div className="border-t border-border my-1"></div>
                 <button 
                   onClick={(e) => {
                     e.preventDefault();
                     setDropdownOpen(false);
+                    
+                    // Usar sempre o logout do hook useAuth (ele já redireciona corretamente)
                     logout();
                   }}
-                  className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
+                  className="w-full text-left px-4 py-2 text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
                 >
                    Sair
                 </button>

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

@@ -1,19 +1,22 @@
+
+
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { useTheme } from "next-themes";
+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 {
-
+  AIAssistantInterface,
-// 👉 AQUI você importa o fluxo correto de voz (já testado e funcionando)
+  ChatSession,
-import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
+} from "@/components/ZoeIA/ai-assistant-interface";
+import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
 
 export function ChatWidget() {
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [realtimeOpen, setRealtimeOpen] = useState(false);
-  const { theme } = useTheme();
+  const [isRecording, setIsRecording] = useState(false);
-  const isDark = theme === "dark";
+  const [voiceDetected, setVoiceDetected] = useState(false);
+  const [history, setHistory] = useState<ChatSession[]>([]);
 
   useEffect(() => {
     if (!assistantOpen && !realtimeOpen) return;
@@ -30,7 +33,7 @@ export function ChatWidget() {
     () => (
       <span
         aria-hidden
-        className="absolute inset-0 rounded-full bg-linear-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
+        className="absolute inset-0 rounded-full bg-gradient-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
       />
     ),
     []
@@ -43,45 +46,87 @@ 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();
+  };
+
+  const handleUpsertHistory = (session: ChatSession) => {
+    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 = () => {
+    setHistory([]);
   };
 
   return (
     <>
-      {/* ----------------- ASSISTANT PANEL ----------------- */}
       {assistantOpen && (
         <div
           id="ai-assistant-overlay"
-          className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
+          className="fixed inset-0 z-[100] flex flex-col bg-background"
         >
-          <div className={`flex items-center justify-between border-b px-4 py-3 shadow-sm transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
             <Button
               type="button"
               variant="ghost"
-              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
+              className="flex items-center gap-2"
               onClick={closeAssistant}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
-              <span className="text-sm font-semibold">Voltar</span>
+              <span className="text-sm">Voltar</span>
             </Button>
           </div>
-
           <div className="flex-1 overflow-auto">
-            <FileUploadChat onOpenVoice={openRealtime} />
+            <AIAssistantInterface
+              onOpenDocuments={handleOpenDocuments}
+              onOpenChat={handleOpenChat}
+              history={history}
+              onAddHistory={handleUpsertHistory}
+              onClearHistory={handleClearHistory}
+            />
           </div>
         </div>
       )}
 
-      {/* ----------------- REALTIME VOICE PANEL ----------------- */}
       {realtimeOpen && (
         <div
           id="ai-realtime-overlay"
-          className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
+          className="fixed inset-0 z-[110] flex flex-col bg-background"
         >
-          <div className={`flex items-center justify-between border-b px-4 py-3 transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
             <Button
               type="button"
               variant="ghost"
-              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
+              className="flex items-center gap-2"
               onClick={closeRealtime}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
@@ -89,19 +134,57 @@ export function ChatWidget() {
             </Button>
           </div>
 
-          {/* 🔥 Aqui entra o AIVoiceFlow COMPLETO */}
+          <div className="flex-1 overflow-auto">
-          <div className="flex-1 overflow-auto flex items-center justify-center">
+            <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">
-            <AIVoiceFlow />
+              <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>
           </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,586 +0,0 @@
-"use client";
-
-import React, { useState, useRef, useCallback, useEffect } from "react";
-import { useTheme } from "next-themes";
-import {
-  Upload,
-  Paperclip,
-  Send,
-  Moon,
-  Sun,
-  X,
-  FileText,
-  ImageIcon,
-  Video,
-  Music,
-  Archive,
-  MessageCircle,
-  Bot,
-  User,
-  Info,
-  Lock,
-  Mic,
-  AudioLines,
-  Plus,
-} from "lucide-react";
-
-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 }) => {
-  // Usa tema global fornecido por next-themes
-  const { theme, setTheme } = useTheme();
-  const isDarkMode = theme === "dark";
-  const [messages, setMessages] = useState([
-    {
-      id: 1,
-      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.",
-      timestamp: new Date(),
-    },
-  ]);
-  const [inputValue, setInputValue] = useState("");
-  const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [isTyping, setIsTyping] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const chatEndRef = useRef<HTMLDivElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  // Placeholder responsivo (não quebra, adapta o texto)
-  const [responsivePlaceholder, setResponsivePlaceholder] = useState("Pergunte qualquer coisa para a Zoe");
-
-  const computePlaceholder = (w: number) => {
-    if (w < 340) return "Pergunte à Zoe"; // ultra pequeno
-    if (w < 400) return "Pergunte algo à Zoe"; // pequeno
-    if (w < 520) return "Pergunte algo para a Zoe"; // médio estreito
-    return "Pergunte qualquer coisa para a Zoe"; // normal
-  };
-
-  useEffect(() => {
-    const update = () => setResponsivePlaceholder(computePlaceholder(window.innerWidth));
-    update();
-    window.addEventListener("resize", update);
-    return () => window.removeEventListener("resize", update);
-  }, []);
-
-  useEffect(() => {
-    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-
-  useEffect(() => {
-    if (textareaRef.current) {
-      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" />;
-    return <FileText className="w-4 h-4" aria-hidden="true" />;
-  };
-
-  const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    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];
-  };
-
-  const handleFileSelect = (files: FileList | null) => {
-    if (!files) return;
-    const newFiles = Array.from(files).map((file) => ({
-      id: Date.now() + Math.random(),
-      name: file.name,
-      size: file.size,
-      type: file.type,
-      file: file,
-    }));
-    setUploadedFiles((prev) => [...prev, ...newFiles]);
-    // Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
-  };
-
-  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    const files = e.dataTransfer.files;
-    if (files.length > 0) {
-      handleFileSelect(files);
-    }
-  }, []);
-
-  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragOver(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragOver(false);
-  }, []);
-
-  const removeFile = (fileId: number) => {
-    setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
-  };
-
-
-  const generateAIResponse = useCallback(
-    async (userMessage: string, files: any[]) => {
-      try {
-        const pdfFile = files.find((file) => file.name.toLowerCase().endsWith(".pdf"));
-
-        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 }),
-          });
-        }
-
-        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",
-        content: inputValue.trim(),
-        files: [...uploadedFiles],
-        timestamp: new Date(),
-      };
-      setMessages((prev) => [...prev, newMessage]);
-
-      const messageContent = inputValue.trim();
-      const attachedFiles = [...uploadedFiles];
-
-      setInputValue("");
-      setUploadedFiles([]);
-      setIsTyping(true);
-
-      // Get AI response from API
-      const aiResponseContent = await generateAIResponse(
-        messageContent,
-        attachedFiles
-      );
-
-      const aiResponse = {
-        id: Date.now() + 1,
-        type: "ai",
-        content: aiResponseContent,
-        timestamp: new Date(),
-      };
-      setMessages((prev) => [...prev, aiResponse]);
-      setIsTyping(false);
-    }
-  }, [inputValue, uploadedFiles, generateAIResponse]);
-
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    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",
-  };
-
-  return (
-    <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="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">
-              <div className="flex items-center gap-2 sm:gap-4">
-                <span className="flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center rounded-2xl sm:rounded-3xl bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-sm sm:text-base font-semibold text-white shadow-lg">
-                  Zoe
-                </span>
-                <div className="space-y-1">
-                  <p className="text-xs font-semibold uppercase tracking-[0.18em] sm:tracking-[0.24em] text-primary/80">
-                    Assistente Clínica Zoe
-                  </p>
-                  <h1 className="text-lg sm:text-3xl font-semibold tracking-tight text-foreground">
-                    <span className="bg-linear-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
-                      Olá, eu sou Zoe.
-                    </span>
-                    <span className="text-foreground"> Como posso ajudar?</span>
-                  </h1>
-                </div>
-              </div>
-              <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
-                <button
-                  type="button"
-                  className={`rounded-full px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] whitespace-nowrap transition shadow-sm border ${isDarkMode ? "border-primary/40 text-primary hover:bg-primary/10" : "bg-primary border-primary text-white hover:bg-primary/90"}`}
-                >
-                  Novo atendimento
-                </button>
-                <button
-                  onClick={() => setTheme(isDarkMode ? "light" : "dark")}
-                  className={`p-1.5 sm:p-2 rounded-lg sm:rounded-lg border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
-                  aria-label="Alternar tema"
-                >
-                  <Moon className="w-4 h-4 sm:w-5 sm:h-5" />
-                </button>
-              </div>
-            </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>
-
-            {/* 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>
-            </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"
-                }`}
-              >
-                <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>
-              </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>
-              <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>
-
-            {/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
-          </div>
-        </div>
-
-        {/* Chat Area */}
-        <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="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>
-            </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" && (
-                  <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>
-                  )}
-                  {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"
-                        >
-                          {getFileIcon(file.name)}
-                          <span className="truncate text-xs">{file.name}</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",
-                    })}
-                  </p>
-                </div>
-
-                {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="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>
-                </div>
-              </div>
-            )}
-
-            <div ref={chatEndRef} />
-          </div>
-
-          {/* Chat Input */}
-          <div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
-            <div className="flex flex-col gap-2">
-              {/* Anexos selecionados (chips) */}
-              {uploadedFiles.length > 0 && (
-                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
-                  {uploadedFiles.map((file) => (
-                    <div
-                      key={file.id}
-                      className={`group flex items-center gap-2 px-3 py-2 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg} relative`}
-                    >
-                      {getFileIcon(file.name)}
-                      <div className="min-w-0 max-w-[160px]">
-                        <p className={`text-xs font-medium truncate ${themeClasses.text}`}>
-                          {file.name}
-                        </p>
-                        <p className={`text-[10px] leading-tight ${themeClasses.textSecondary}`}>
-                          {formatFileSize(file.size)}
-                        </p>
-                      </div>
-                      <button
-                        onClick={() => removeFile(file.id)}
-                        className={`p-1 rounded-full transition-colors ${themeClasses.textSecondary} hover:text-red-500 hover:bg-red-500/20`}
-                        aria-label="Remover arquivo"
-                      >
-                        <X className="w-3 h-3" />
-                      </button>
-                    </div>
-                  ))}
-                  <button
-                    onClick={() => setUploadedFiles([])}
-                    className={`ml-auto text-[11px] px-2 py-1 rounded-md ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
-                  >
-                    Limpar tudo
-                  </button>
-                </div>
-              )}
-
-              {/* Input unificado com ícones embutidos */}
-              <div className="flex w-full">
-                <div className={`flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} h-11 px-2 gap-2`}>
-                  <button
-                    onClick={() => fileInputRef.current?.click()}
-                    type="button"
-                    className={`flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
-                    aria-label="Anexar arquivos"
-                  >
-                    <Plus className="w-4 h-4" />
-                  </button>
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    multiple
-                    className="hidden"
-                    onChange={(e) => handleFileSelect(e.target.files)}
-                  />
-                  <textarea
-                    ref={textareaRef}
-                    value={inputValue}
-                    onChange={(e) => setInputValue(e.target.value)}
-                    onKeyPress={handleKeyPress}
-                    placeholder={responsivePlaceholder}
-                    rows={1}
-                    className={`flex-1 bg-transparent resize-none focus:outline-none leading-snug py-3 pr-2 ${themeClasses.text} placeholder-gray-400 text-[13px] sm:text-sm placeholder:text-[12px] sm:placeholder:text-sm whitespace-nowrap overflow-hidden text-ellipsis placeholder:overflow-hidden placeholder:text-ellipsis`}
-                    style={{ minHeight: 'auto', overflow: 'hidden' }}
-                  />
-                  <button
-                    onClick={() => onOpenVoice?.()}
-                    type="button"
-                    className={`flex items-center justify-center h-8 w-8 rounded-full border ${themeClasses.border} transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
-                    aria-label="Entrada de voz"
-                  >
-                    <AudioLines className="w-4 h-4" />
-                  </button>
-                  <button
-                    onClick={sendMessage}
-                    disabled={!inputValue.trim() && uploadedFiles.length === 0}
-                    type="button"
-                    className="flex items-center justify-center h-8 w-8 rounded-full bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-colors shadow-md flex-shrink-0"
-                    aria-label="Enviar mensagem"
-                  >
-                    <Send className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            {/* Quick Actions */}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FileUploadChat;

susconecta/lib/laudo-exemplos.ts

@@ -1,275 +0,0 @@
-/**
- * EXEMPLO DE USO: Automação n8n para Notificação de Laudos
- * 
- * Este arquivo demonstra como usar a função criarLaudo com integração n8n
- * para criar um laudo e notificar automaticamente o paciente.
- */
-
-import { criarLaudo, CriarLaudoData } from '@/lib/reports';
-
-/**
- * Exemplo 1: Uso básico - criar um laudo simples
- */
-export async function exemploBasico() {
-  try {
-    const laudoData: CriarLaudoData = {
-      pacienteId: 'patient-uuid-123', // ID do paciente (obrigatório)
-      textoLaudo: 'Paciente apresenta boa saúde geral. Sem achados relevantes.',
-    };
-
-    const novoLaudo = await criarLaudo(laudoData);
-    
-    console.log('✓ Laudo criado com sucesso!');
-    console.log('ID do laudo:', novoLaudo.id);
-    console.log('Mensagem:', novoLaudo.mensagem);
-    
-    return novoLaudo;
-  } catch (erro) {
-    console.error('✗ Erro ao criar laudo:', erro);
-    throw erro;
-  }
-}
-
-/**
- * Exemplo 2: Criar laudo com dados médicos completos
- */
-export async function exemploCompleto() {
-  try {
-    const laudoData: CriarLaudoData = {
-      pacienteId: 'patient-uuid-789',
-      medicoId: 'doctor-uuid-456',  // Opcional
-      textoLaudo: `
-        AVALIAÇÃO CLÍNICA COMPLETA
-        
-        Queixa Principal: Dor de cabeça persistente
-        
-        História Presente:
-        Paciente relata dor de cabeça tipo tensional há 2 semanas,
-        intensidade 5/10, sem irradiação.
-        
-        Exame Físico:
-        - PA: 120/80 mmHg
-        - FC: 72 bpm
-        - Sem alterações neurológicas
-        
-        Impressão Diagnóstica:
-        Cefaleia tensional
-        
-        Conduta:
-        - Repouso adequado
-        - Analgésicos conforme necessidade
-        - Retorno em 2 semanas se persistir
-      `,
-      exame: 'Consulta Neurologia',
-      diagnostico: 'Cefaleia tensional',
-      conclusao: 'Prescrição: Dipirona 500mg 6/6h conforme necessidade',
-      cidCode: 'G44.2', // CID da cefaleia tensional
-      status: 'concluido',
-    };
-
-    const novoLaudo = await criarLaudo(laudoData);
-    
-    console.log('✓ Laudo completo criado com sucesso!');
-    console.log('ID:', novoLaudo.id);
-    console.log('Status:', novoLaudo.status);
-    console.log('CID:', novoLaudo.cid_code);
-    
-    return novoLaudo;
-  } catch (erro) {
-    console.error('✗ Erro:', erro);
-    throw erro;
-  }
-}
-
-/**
- * Exemplo 3: Integração em um componente React
- * Este exemplo mostra como usar a função em um formulário
- * 
- * NOTA: Este código deve ser usado em um arquivo .tsx (não .ts)
- * e com o import de React importado corretamente
- */
-export async function exemploComponenteReact() {
-  // Este é apenas um exemplo de estrutura para o componente
-  // Copie o código abaixo para um arquivo .tsx:
-  /*
-  'use client';
-  
-  import React from 'react';
-  import { criarLaudo, CriarLaudoData } from '@/lib/reports';
-
-  export function ComponenteLaudoExemplo() {
-    const [carregando, setCarregando] = React.useState(false);
-    const [mensagem, setMensagem] = React.useState('');
-
-    const handleCriarLaudo = async (formData: any) => {
-      setCarregando(true);
-      setMensagem('');
-
-      try {
-        const laudoData: CriarLaudoData = {
-          pacienteId: formData.pacienteId,
-          medicoId: formData.medicoId,
-          textoLaudo: formData.texto,
-          exame: formData.exame,
-          diagnostico: formData.diagnostico,
-          conclusao: formData.conclusao,
-          cidCode: formData.cid,
-          status: 'concluido',
-        };
-
-        const resultado = await criarLaudo(laudoData);
-
-        setMensagem(`✓ ${resultado.mensagem}`);
-        console.log('Laudo criado:', resultado.id);
-        
-        // Você pode fazer mais algo aqui, como:
-        // - Redirecionar para página do laudo
-        // - Atualizar lista de laudos
-        // - Limpar formulário
-        
-      } catch (erro) {
-        setMensagem(`✗ Erro: ${erro instanceof Error ? erro.message : String(erro)}`);
-      } finally {
-        setCarregando(false);
-      }
-    };
-
-    return (
-      <div>
-        <form onSubmit={(e) => {
-          e.preventDefault();
-          const formData = new FormData(e.currentTarget);
-          handleCriarLaudo(Object.fromEntries(formData));
-        }}>
-          <textarea
-            name="texto"
-            placeholder="Texto do laudo"
-            required
-          />
-          <input
-            type="text"
-            name="pacienteId"
-            placeholder="ID do Paciente"
-            required
-          />
-          <input
-            type="text"
-            name="medicoId"
-            placeholder="ID do Médico"
-            required
-          />
-          <button type="submit" disabled={carregando}>
-            {carregando ? 'Criando...' : 'Criar Laudo'}
-          </button>
-        </form>
-        
-        {mensagem && <p>{mensagem}</p>}
-      </div>
-    );
-  }
-  */
-}
-
-/**
- * Exemplo 4: Tratamento de erros específicos
- */
-export async function exemploTratamentoErros() {
-  try {
-    const laudoData: CriarLaudoData = {
-      pacienteId: 'patient-id',
-      medicoId: 'doctor-id',
-      textoLaudo: 'Texto do laudo',
-    };
-
-    const resultado = await criarLaudo(laudoData);
-    console.log('Sucesso:', resultado);
-
-  } catch (erro) {
-    if (erro instanceof Error) {
-      // Trata diferentes tipos de erro
-      if (erro.message.includes('Paciente ID') || erro.message.includes('Médico ID')) {
-        console.error('Erro de validação: dados incompletos');
-      } else if (erro.message.includes('Supabase')) {
-        console.error('Erro de conexão com banco de dados');
-      } else if (erro.message.includes('n8n')) {
-        console.warn('Laudo criado, mas notificação falhou');
-      } else {
-        console.error('Erro desconhecido:', erro.message);
-      }
-    }
-  }
-}
-
-/**
- * DOCUMENTAÇÃO DO FLUXO N8N
- * 
- * A função criarLaudo executa o seguinte fluxo:
- * 
- * 1. CRIAÇÃO NO SUPABASE
- *    - Salva o report na tabela 'reports' do Supabase
- *    - Status padrão: 'concluido'
- *    - Retorna o report criado com seu ID
- * 
- * 2. NOTIFICAÇÃO N8N
- *    - Se o report foi criado com sucesso, faz um POST para:
- *      URL: https://joaogustavo.me/webhook/notificar-laudo
- *    - Envia payload com:
- *      - pacienteId: ID do paciente (patient_id)
- *      - reportId: ID do report criado
- * 
- * 3. NO N8N
- *    O webhook deve estar configurado para:
- *    - Receber o payload JSON POST
- *    - Extrair pacienteId e reportId
- *    - Buscar informações do paciente
- *    - Enviar notificação (email, SMS, push, etc.)
- *    - Registrar log da notificação
- * 
- * 4. COMPORTAMENTO EM CASO DE FALHA
- *    - Se a criação do report falhar: exceção é lançada
- *    - Se o envio para n8n falhar: report é mantido, erro é logado
- *      (não bloqueia a operação de criação)
- * 
- * EXEMPLO DE USO:
- * 
- * const novoReport = await criarLaudo({
- *   pacienteId: "3854866a-5476-48be-8313-77029ccdb70f",
- *   textoLaudo: "Texto do laudo aqui..."
- * });
- * 
- * // Depois disto, automaticamente:
- * // 1. Report é salvo no Supabase
- * // 2. n8n recebe: { pacienteId: "...", reportId: "..." }
- * // 3. Paciente é notificado
- */
-
-/**
- * EXEMPLO DE WEBHOOK N8N (Configuração)
- * 
- * No n8n, você deve:
- * 1. Criar um novo workflow
- * 2. Adicionar trigger: "Webhook"
- * 3. Configurar:
- *    - HTTP Method: POST
- *    - Path: /notificar-laudo
- *    - Authentication: None (ou Bearer token se desejar)
- * 4. Adicionar nós para:
- *    - Parse do payload JSON recebido
- *    - Query no banco de dados para buscar paciente
- *    - Enviar email/SMS/notificação push
- *    - Logging do resultado
- * 
- * Exemplo de nó JavaScript no n8n:
- * 
- * const { pacienteId, laudoId, pacienteName, pacienteEmail } = $input.first().json;
- * 
- * return {
- *   pacienteId,
- *   laudoId,
- *   pacienteName,
- *   pacienteEmail,
- *   notificationType: 'laudo_criado',
- *   timestamp: new Date().toISOString(),
- *   message: `Novo laudo ${laudoId} disponível para ${pacienteName}`
- * };
- */

susconecta/lib/laudo-notification.ts

@@ -1,193 +0,0 @@
-/**
- * Módulo de notificação de laudos via n8n
- * Integração com automação n8n para notificar pacientes quando laudos são criados
- */
-
-import { ENV_CONFIG } from '@/lib/env-config';
-
-/**
- * Configurações do webhook n8n
- */
-const N8N_WEBHOOK_CONFIG = {
-  // URL do webhook configurado no n8n
-  webhookUrl: 'https://joaogustavo.me/webhook/notificar-laudo',
-  // Timeout para a requisição (em ms)
-  timeout: 30000,
-  // Tentativas de retry em caso de falha
-  maxRetries: 3,
-};
-
-/**
- * Tipos de dados para notificação de laudo
- */
-export interface NotificacaoLaudoPayload {
-  pacienteId: string;
-  laudoId: string;
-  pacienteName?: string;
-  pacienteEmail?: string;
-  medicalDetails?: {
-    examType?: string;
-    medico?: string;
-    dataEmissao?: string;
-  };
-}
-
-/**
- * Resultado da notificação
- */
-export interface NotificacaoLaudoResult {
-  sucesso: boolean;
-  mensagem: string;
-  n8nResponse?: any;
-  erro?: string;
-}
-
-/**
- * Notifica o n8n sobre a criação de um novo laudo
- * @param payload Dados do laudo e paciente para notificação
- * @returns Resultado da notificação
- */
-export async function notificarLaudoCriadoN8n(
-  payload: NotificacaoLaudoPayload
-): Promise<NotificacaoLaudoResult> {
-  try {
-    // Validação básica dos dados
-    if (!payload.pacienteId || !payload.laudoId) {
-      return {
-        sucesso: false,
-        mensagem: 'Dados de paciente ou laudo inválidos',
-        erro: 'pacienteId e laudoId são obrigatórios',
-      };
-    }
-
-    // Constrói o payload para o webhook
-    const webhookPayload = {
-      pacienteId: payload.pacienteId,
-      laudoId: payload.laudoId,
-      pacienteName: payload.pacienteName || '',
-      pacienteEmail: payload.pacienteEmail || '',
-      // Adiciona dados médicos se disponíveis
-      ...(payload.medicalDetails && {
-        examType: payload.medicalDetails.examType,
-        medico: payload.medicalDetails.medico,
-        dataEmissao: payload.medicalDetails.dataEmissao,
-      }),
-      // Timestamp da notificação
-      notificadoEm: new Date().toISOString(),
-    };
-
-    console.log('[n8n] Enviando notificação de laudo criado:', {
-      pacienteId: payload.pacienteId,
-      laudoId: payload.laudoId,
-      webhookUrl: N8N_WEBHOOK_CONFIG.webhookUrl,
-    });
-
-    // Tenta enviar o webhook com retry
-    let ultimoErro: any = null;
-    
-    for (let tentativa = 1; tentativa <= N8N_WEBHOOK_CONFIG.maxRetries; tentativa++) {
-      try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(
-          () => controller.abort(),
-          N8N_WEBHOOK_CONFIG.timeout
-        );
-
-        const response = await fetch(N8N_WEBHOOK_CONFIG.webhookUrl, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Accept': 'application/json',
-          },
-          body: JSON.stringify(webhookPayload),
-          signal: controller.signal,
-        });
-
-        clearTimeout(timeoutId);
-
-        if (!response.ok) {
-          throw new Error(
-            `HTTP ${response.status}: ${response.statusText}`
-          );
-        }
-
-        const responseData = await response.json();
-
-        console.log('[n8n] Notificação enviada com sucesso:', {
-          status: response.status,
-          laudoId: payload.laudoId,
-        });
-
-        return {
-          sucesso: true,
-          mensagem: 'Paciente notificado com sucesso',
-          n8nResponse: responseData,
-        };
-      } catch (erro) {
-        ultimoErro = erro;
-        console.warn(
-          `[n8n] Tentativa ${tentativa}/${N8N_WEBHOOK_CONFIG.maxRetries} falhou:`,
-          erro instanceof Error ? erro.message : String(erro)
-        );
-
-        // Se não for a última tentativa, aguarda um pouco antes de tentar novamente
-        if (tentativa < N8N_WEBHOOK_CONFIG.maxRetries) {
-          await new Promise((resolve) =>
-            setTimeout(resolve, 1000 * tentativa) // Backoff exponencial
-          );
-        }
-      }
-    }
-
-    // Se chegou aqui, todas as tentativas falharam
-    console.error('[n8n] Todas as tentativas de notificação falharam:', ultimoErro);
-
-    return {
-      sucesso: false,
-      mensagem: 'Falha ao notificar paciente através do n8n',
-      erro: ultimoErro instanceof Error ? ultimoErro.message : String(ultimoErro),
-    };
-  } catch (erro) {
-    console.error('[notificarLaudoCriadoN8n] Erro inesperado:', erro);
-
-    return {
-      sucesso: false,
-      mensagem: 'Erro ao processar notificação de laudo',
-      erro: erro instanceof Error ? erro.message : String(erro),
-    };
-  }
-}
-
-/**
- * Versão assíncrona que não bloqueia - envia notificação em background
- * Útil para não aumentar o tempo de resposta da API
- * @param payload Dados do laudo e paciente
- */
-export function notificarLaudoAsyncBackground(
-  payload: NotificacaoLaudoPayload
-): void {
-  // Envia notificação em background sem aguardar
-  notificarLaudoCriadoN8n(payload)
-    .then((result) => {
-      if (!result.sucesso) {
-        console.warn('[n8n] Notificação de laudo falhou (background):', result.erro);
-      }
-    })
-    .catch((erro) => {
-      console.error('[n8n] Erro ao notificar laudo em background:', erro);
-    });
-}
-
-/**
- * Determina se as notificações n8n estão habilitadas
- * Pode ser controlado via variável de ambiente
- */
-export function notificacoesHabilitadas(): boolean {
-  if (typeof window === 'undefined') {
-    // Server-side: verificar variável de ambiente
-    return process.env.NEXT_PUBLIC_N8N_ENABLED !== 'false';
-  }
-  
-  // Client-side: sempre habilitado
-  return true;
-}

susconecta/lib/reportService.ts

@@ -1,148 +0,0 @@
-/**
- * serviço para criar relatórios e notificar pacientes via n8n
- * 
- * Este serviço encapsula a lógica de:
- * 1. Criar um novo report no Supabase
- * 2. Notificar o paciente via webhook n8n (que dispara SMS via Twilio)
- */
-
-interface CreateReportData {
-  patientId: string; // UUID do paciente
-  requestedBy: string; // UUID de quem solicitou (médico)
-  exam: string;
-  diagnosis: string;
-  conclusion: string;
-  contentHtml: string;
-}
-
-interface CreateReportResult {
-  success: boolean;
-  report?: any;
-  error?: string;
-}
-
-/**
- * Cria um novo report no Supabase e notifica o paciente via n8n
- * 
- * Fluxo:
- * 1. Insere um novo registro na tabela 'reports' com status 'draft'
- * 2. Envia webhook para n8n com pacienteId e reportId
- * 3. n8n recebe e dispara notificação SMS via Twilio
- * 4. Retorna o report criado (mesmo que a notificação falhe)
- * 
- * @param data Dados do report a ser criado
- * @returns { success: true, report } ou { success: false, error }
- */
-export const createAndNotifyReport = async (data: CreateReportData): Promise<CreateReportResult> => {
-  try {
-    // Validação básica
-    if (!data.patientId || !data.exam || !data.conclusion) {
-      throw new Error('Faltam campos obrigatórios: patientId, exam, conclusion');
-    }
-
-    console.log('[reportService] Criando novo report para paciente:', data.patientId);
-
-    // 1. Criar report no Supabase
-    const BASE_API = 'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports';
-    
-    let token: string | undefined = undefined;
-    if (typeof window !== 'undefined') {
-      token =
-        localStorage.getItem('auth_token') ||
-        localStorage.getItem('token') ||
-        sessionStorage.getItem('auth_token') ||
-        sessionStorage.getItem('token') ||
-        undefined;
-    }
-
-    const headers: HeadersInit = {
-      'Content-Type': 'application/json',
-      'Accept': 'application/json',
-      'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ',
-      'Prefer': 'return=representation',
-    };
-    
-    if (token) {
-      headers['Authorization'] = `Bearer ${token}`;
-    }
-
-    const reportPayload = {
-      patient_id: data.patientId,
-      status: 'draft',
-      requested_by: data.requestedBy,
-      exam: data.exam,
-      diagnosis: data.diagnosis,
-      conclusion: data.conclusion,
-      content_html: data.contentHtml,
-      created_at: new Date().toISOString(),
-    };
-
-    const responseSupabase = await fetch(BASE_API, {
-      method: 'POST',
-      headers,
-      body: JSON.stringify(reportPayload),
-    });
-
-    if (!responseSupabase.ok) {
-      const errorText = await responseSupabase.text();
-      console.error('[reportService] Erro ao criar report no Supabase:', errorText);
-      throw new Error(`Supabase error: ${responseSupabase.statusText}`);
-    }
-
-    const newReport = await responseSupabase.json();
-    
-    // Supabase retorna array
-    const report = Array.isArray(newReport) ? newReport[0] : newReport;
-    
-    if (!report || !report.id) {
-      throw new Error('Report criado mas sem ID retornado');
-    }
-
-    console.log('[reportService] Report criado com sucesso. ID:', report.id);
-
-    // 2. Notificar paciente via n8n → Twilio
-    try {
-      console.log('[reportService] Enviando notificação para n8n...');
-      
-      const notificationResponse = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          pacienteId: report.patient_id, // UUID do paciente
-          reportId: report.id,            // UUID do report
-        }),
-      });
-
-      if (!notificationResponse.ok) {
-        console.warn(
-          '[reportService] Erro ao enviar notificação SMS. Status:',
-          notificationResponse.status
-        );
-        // Não falha a criação do report se SMS falhar
-      } else {
-        console.log('[reportService] Notificação enviada com sucesso ao n8n');
-      }
-    } catch (erroNotificacao) {
-      console.warn('[reportService] Erro ao enviar notificação para n8n:', erroNotificacao);
-      // Não falha a criação do report se a notificação falhar
-    }
-
-    return { 
-      success: true, 
-      report,
-    };
-  } catch (error) {
-    console.error('[reportService] Erro ao criar report:', error);
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : String(error),
-    };
-  }
-};
-
-/**
- * Interface exportada para uso em componentes
- */
-export type { CreateReportData, CreateReportResult };

susconecta/lib/reports.ts

@@ -47,7 +47,6 @@ import {
   ReportsResponse, 
   ReportResponse
 } from '@/types/report-types';
-import { buscarPacientePorId } from '@/lib/api';
 
 // Definição local para ApiError
 type ApiError = {
@@ -215,52 +214,7 @@ export async function criarRelatorio(dadosRelatorio: CreateReportData, token?: s
   const resultado = await resposta.json();
   // Supabase retorna array
   if (Array.isArray(resultado) && resultado.length > 0) {
-    const novoRelatorio = resultado[0];
+    return resultado[0];
-    
-    // ✅ ENVIAR NOTIFICAÇÃO PARA N8N APÓS CRIAR RELATÓRIO
-    if (novoRelatorio && novoRelatorio.id && dadosRelatorio.patient_id) {
-      try {
-        console.log('[criarRelatorio] Enviando notificação para n8n webhook...');
-        
-        // Buscar dados do paciente para incluir nome e telefone
-        const pacienteData = await buscarPacientePorId(dadosRelatorio.patient_id).catch(e => {
-          console.warn('[criarRelatorio] Erro ao buscar paciente:', e);
-          return null;
-        });
-        
-        const pacienteNome = pacienteData?.full_name || '';
-        const pacienteCelular = pacienteData?.phone_mobile || '';
-        
-        const payloadWebhook = {
-          pacienteId: dadosRelatorio.patient_id,
-          reportId: novoRelatorio.id,
-          pacienteNome: pacienteNome,
-          pacienteCelular: pacienteCelular
-        };
-        
-        console.log('[criarRelatorio] Payload do webhook:', payloadWebhook);
-        
-        const resNotificacao = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payloadWebhook)
-        }).catch(e => {
-          console.warn('[criarRelatorio] Erro de rede ao enviar webhook:', e);
-          return null;
-        });
-
-        if (resNotificacao?.ok) {
-          console.log('[criarRelatorio] ✅ Notificação enviada com sucesso ao n8n');
-        } else if (resNotificacao) {
-          console.warn('[criarRelatorio] ⚠️ Notificação ao n8n retornou status:', resNotificacao.status);
-        }
-      } catch (erroNotificacao) {
-        console.warn('[criarRelatorio] ❌ Erro ao enviar notificação para n8n:', erroNotificacao);
-        // Não falha a criação do relatório se a notificação falhar
-      }
-    }
-    
-    return novoRelatorio;
   }
   throw new Error('Resposta inesperada da API Supabase');
 }
@@ -431,133 +385,3 @@ export async function listarRelatoriosParaMedicoAtribuido(userId?: string): Prom
     throw err;
   }
 }
-
-/**
- * Interface para dados necessários ao criar um laudo
- */
-export interface CriarLaudoData {
-  pacienteId: string;           // ID do paciente (obrigatório)
-  textoLaudo: string;           // Texto do laudo (obrigatório)
-  medicoId?: string;            // ID do médico que criou (opcional)
-  exame?: string;               // Tipo de exame (opcional)
-  diagnostico?: string;         // Diagnóstico (opcional)
-  conclusao?: string;           // Conclusão (opcional)
-  cidCode?: string;             // Código CID (opcional)
-  status?: 'rascunho' | 'concluido' | 'enviado';  // Status (opcional, padrão: 'concluido')
-  contentHtml?: string;         // Conteúdo HTML (opcional)
-  contentJson?: any;            // Conteúdo JSON (opcional)
-}
-
-/**
- * Cria um novo laudo no Supabase e notifica o paciente via n8n
- * 
- * Fluxo:
- * 1. Salva o laudo no Supabase (tabela 'reports')
- * 2. Envia notificação ao n8n com pacienteId e laudoId
- * 3. Retorna o laudo criado
- * 
- * @param laudoData Dados do laudo a criar
- * @returns Laudo criado com ID
- * @throws Erro se falhar ao criar o laudo
- */
-export async function criarLaudo(laudoData: CriarLaudoData): Promise<any> {
-  try {
-    // 1. Validação dos dados obrigatórios
-    if (!laudoData.pacienteId || !laudoData.textoLaudo) {
-      throw new Error('Paciente ID e Texto do Laudo são obrigatórios');
-    }
-
-    console.log('[criarLaudo] Criando laudo para paciente:', laudoData.pacienteId);
-
-    // 2. Monta o payload para Supabase
-    const payloadSupabase = {
-      patient_id: laudoData.pacienteId,
-      ...(laudoData.medicoId && { requested_by: laudoData.medicoId }),
-      ...(laudoData.exame && { exam: laudoData.exame }),
-      ...(laudoData.diagnostico && { diagnosis: laudoData.diagnostico }),
-      ...(laudoData.conclusao && { conclusion: laudoData.conclusao }),
-      ...(laudoData.cidCode && { cid_code: laudoData.cidCode }),
-      ...(laudoData.contentHtml && { content_html: laudoData.contentHtml }),
-      ...(laudoData.contentJson && { content_json: laudoData.contentJson }),
-      status: laudoData.status || 'concluido',
-    };
-
-    // 3. Salva o laudo no Supabase
-    const urlSupabase = 'https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports';
-    
-    let tokenAuth: string | undefined = undefined;
-    if (typeof window !== 'undefined') {
-      tokenAuth =
-        localStorage.getItem('auth_token') ||
-        localStorage.getItem('token') ||
-        sessionStorage.getItem('auth_token') ||
-        sessionStorage.getItem('token') ||
-        undefined;
-    }
-
-    const headersSupabase: HeadersInit = {
-      'Content-Type': 'application/json',
-      'Accept': 'application/json',
-      'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ',
-      'Prefer': 'return=representation',
-    };
-    
-    if (tokenAuth) {
-      headersSupabase['Authorization'] = `Bearer ${tokenAuth}`;
-    }
-
-    const resSupabase = await fetch(urlSupabase, {
-      method: 'POST',
-      headers: headersSupabase,
-      body: JSON.stringify(payloadSupabase),
-    });
-
-    if (!resSupabase.ok) {
-      const errorText = await resSupabase.text();
-      console.error('[criarLaudo] Erro ao salvar laudo no Supabase:', errorText);
-      throw new Error(`Falha ao salvar laudo: ${resSupabase.statusText}`);
-    }
-
-    const novoLaudo = await resSupabase.json();
-    const laudoId = novoLaudo?.id;
-
-    if (!laudoId) {
-      throw new Error('Laudo criado mas sem ID retornado');
-    }
-
-    console.log('[criarLaudo] Laudo salvo com sucesso. ID:', laudoId);
-
-    // 4. CHAMAR O N8N para notificar o paciente
-    // Padrão simples: apenas pacienteId e reportId
-    try {
-      console.log('[criarLaudo] Enviando notificação para n8n...');
-      
-      const resNotificacao = await fetch('https://joaogustavo.me/webhook/notificar-laudo', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          pacienteId: laudoData.pacienteId,  // ← ID do paciente
-          reportId: laudoId                   // ← ID do report criado
-        })
-      });
-
-      if (resNotificacao.ok) {
-        console.log('[criarLaudo] Notificação enviada com sucesso ao n8n');
-      } else {
-        console.warn('[criarLaudo] Notificação ao n8n retornou status:', resNotificacao.status);
-      }
-    } catch (erroNotificacao) {
-      // Não falha a criação do laudo se a notificação falhar
-      console.warn('[criarLaudo] Erro ao enviar notificação para n8n:', erroNotificacao);
-    }
-
-    // 5. Retorna o laudo criado
-    return {
-      ...novoLaudo,
-      mensagem: 'Laudo criado e paciente notificado com sucesso!',
-    };
-  } catch (erro) {
-    console.error('[criarLaudo] Erro ao criar laudo:', erro);
-    throw erro;
-  }
-}

susconecta/types/lamejs.d.ts

@@ -1,14 +0,0 @@
-// 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;
-}