From dd0a5abb0439eff10f3152eb1bb5d6f553e38201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?=
 <166467972+JoaoGustavo-dev@users.noreply.github.com>
Date: Sat, 15 Nov 2025 22:04:25 -0300
Subject: [PATCH 01/14] add-report-notification

---
 susconecta/app/profissional/page.tsx |   4 +
 susconecta/lib/laudo-exemplos.ts     | 275 +++++++++++++++++++++++++++
 susconecta/lib/laudo-notification.ts | 193 +++++++++++++++++++
 susconecta/lib/reportService.ts      | 148 ++++++++++++++
 susconecta/lib/reports.ts            | 178 ++++++++++++++++-
 5 files changed, 797 insertions(+), 1 deletion(-)
 create mode 100644 susconecta/lib/laudo-exemplos.ts
 create mode 100644 susconecta/lib/laudo-notification.ts
 create mode 100644 susconecta/lib/reportService.ts

diff --git a/susconecta/app/profissional/page.tsx b/susconecta/app/profissional/page.tsx
index e800161..85e6a64 100644
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
@@ -13,6 +13,7 @@ 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";
@@ -2588,6 +2589,9 @@ 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 {
diff --git a/susconecta/lib/laudo-exemplos.ts b/susconecta/lib/laudo-exemplos.ts
new file mode 100644
index 0000000..14f6b02
--- /dev/null
+++ b/susconecta/lib/laudo-exemplos.ts
@@ -0,0 +1,275 @@
+/**
+ * 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}`
+ * };
+ */
diff --git a/susconecta/lib/laudo-notification.ts b/susconecta/lib/laudo-notification.ts
new file mode 100644
index 0000000..03737e3
--- /dev/null
+++ b/susconecta/lib/laudo-notification.ts
@@ -0,0 +1,193 @@
+/**
+ * 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;
+}
diff --git a/susconecta/lib/reportService.ts b/susconecta/lib/reportService.ts
new file mode 100644
index 0000000..c0ddcc6
--- /dev/null
+++ b/susconecta/lib/reportService.ts
@@ -0,0 +1,148 @@
+/**
+ * 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 };
diff --git a/susconecta/lib/reports.ts b/susconecta/lib/reports.ts
index a54c0e0..0f7475d 100644
--- a/susconecta/lib/reports.ts
+++ b/susconecta/lib/reports.ts
@@ -47,6 +47,7 @@ import {
   ReportsResponse, 
   ReportResponse
 } from '@/types/report-types';
+import { buscarPacientePorId } from '@/lib/api';
 
 // Definição local para ApiError
 type ApiError = {
@@ -214,7 +215,52 @@ export async function criarRelatorio(dadosRelatorio: CreateReportData, token?: s
   const resultado = await resposta.json();
   // Supabase retorna array
   if (Array.isArray(resultado) && resultado.length > 0) {
-    return resultado[0];
+    const novoRelatorio = 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');
 }
@@ -384,4 +430,134 @@ export async function listarRelatoriosParaMedicoAtribuido(userId?: string): Prom
     console.error('[listarRelatoriosParaMedicoAtribuido] erro:', err);
     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;
+  }
 }
\ No newline at end of file

From 56b87aae0a6b6bb3e9cc28f1a7a8aa38c351fb3b Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Tue, 18 Nov 2025 03:27:47 -0300
Subject: [PATCH 02/14] feat(ai): replace ZoeIA with FileUploadChat; add voice
 overlay hook; UI polish & mobile

---
 .../app/(main-routes)/pacientes/page.tsx      |   2 +-
 .../components/ZoeIA/demo-file-upload.tsx     |   5 +
 .../features/pacientes/chat-widget.tsx        |  42 +-
 .../components/ui/file-upload-and-chat.tsx    | 418 ++++++++++++++++++
 4 files changed, 432 insertions(+), 35 deletions(-)
 create mode 100644 susconecta/components/ZoeIA/demo-file-upload.tsx
 create mode 100644 susconecta/components/ui/file-upload-and-chat.tsx

diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx
index f983e68..aa149a4 100644
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@@ -297,7 +297,7 @@ export default function PacientesPage() {
             aria-label="Ordenar por"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as any)}
-            className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
+                className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
           >
             <option value="name_asc">A–Z</option>
             <option value="name_desc">Z–A</option>
diff --git a/susconecta/components/ZoeIA/demo-file-upload.tsx b/susconecta/components/ZoeIA/demo-file-upload.tsx
new file mode 100644
index 0000000..ab6a240
--- /dev/null
+++ b/susconecta/components/ZoeIA/demo-file-upload.tsx
@@ -0,0 +1,5 @@
+import Component from "@/components/ui/file-upload-and-chat";
+
+export default function FileUploadChat() {
+  return <Component />;
+}
diff --git a/susconecta/components/features/pacientes/chat-widget.tsx b/susconecta/components/features/pacientes/chat-widget.tsx
index f038ea2..f389724 100644
--- a/susconecta/components/features/pacientes/chat-widget.tsx
+++ b/susconecta/components/features/pacientes/chat-widget.tsx
@@ -5,10 +5,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-  AIAssistantInterface,
-  ChatSession,
-} from "@/components/ZoeIA/ai-assistant-interface";
+import FileUploadChat from "@/components/ui/file-upload-and-chat";
 import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
 
 export function ChatWidget() {
@@ -16,7 +13,6 @@ export function ChatWidget() {
   const [realtimeOpen, setRealtimeOpen] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
   const [voiceDetected, setVoiceDetected] = useState(false);
-  const [history, setHistory] = useState<ChatSession[]>([]);
 
   useEffect(() => {
     if (!assistantOpen && !realtimeOpen) return;
@@ -33,7 +29,7 @@ export function ChatWidget() {
     () => (
       <span
         aria-hidden
-        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"
+        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"
       />
     ),
     []
@@ -71,48 +67,26 @@ export function ChatWidget() {
     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 (
     <>
       {assistantOpen && (
         <div
           id="ai-assistant-overlay"
-          className="fixed inset-0 z-[100] flex flex-col bg-background"
+          className="fixed inset-0 z-100 flex flex-col bg-gray-50 dark:bg-slate-950 border-b border-border"
         >
-          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <div className="flex items-center justify-between border-b px-4 py-3 bg-slate-100 dark:bg-slate-900 border-gray-300 dark:border-slate-700 shadow-sm">
             <Button
               type="button"
               variant="ghost"
-              className="flex items-center gap-2"
+              className="flex items-center gap-2 text-slate-900 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800"
               onClick={closeAssistant}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
-              <span className="text-sm">Voltar</span>
+              <span className="text-sm font-semibold">Voltar</span>
             </Button>
           </div>
           <div className="flex-1 overflow-auto">
-            <AIAssistantInterface
-              onOpenDocuments={handleOpenDocuments}
-              onOpenChat={handleOpenChat}
-              history={history}
-              onAddHistory={handleUpsertHistory}
-              onClearHistory={handleClearHistory}
-            />
+            <FileUploadChat onOpenVoice={openRealtime} />
           </div>
         </div>
       )}
@@ -120,7 +94,7 @@ export function ChatWidget() {
       {realtimeOpen && (
         <div
           id="ai-realtime-overlay"
-          className="fixed inset-0 z-[110] flex flex-col bg-background"
+          className="fixed inset-0 z-110 flex flex-col bg-background"
         >
           <div className="flex items-center justify-between border-b border-border px-4 py-3">
             <Button
diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
new file mode 100644
index 0000000..007886a
--- /dev/null
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -0,0 +1,418 @@
+"use client";
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { Upload, Paperclip, Send, Moon, Sun, X, FileText, ImageIcon, Video, Music, Archive, MessageCircle, Bot, User, Info, Lock, Mic } from 'lucide-react';
+
+const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/cd7d10e6-bcfc-4f3a-b649-351d12b714f1";
+const FALLBACK_RESPONSE = "Tive um problema para responder agora. Tente novamente em alguns instantes.";
+
+const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
+  const [isDarkMode, setIsDarkMode] = useState(true);
+  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);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  }, [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]);
+    
+    // Add system message about file upload
+    const fileNames = newFiles.map(f => f.name).join(', ');
+    const systemMessage = {
+      id: Date.now(),
+      type: 'system',
+      content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
+      timestamp: new Date()
+    };
+    setMessages(prev => [...prev, systemMessage]);
+  };
+
+  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 response = await fetch(API_ENDPOINT, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ message: userMessage }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const rawPayload = await response.text();
+      let replyText = "";
+
+      if (rawPayload.trim().length > 0) {
+        try {
+          const parsed = JSON.parse(rawPayload) as { reply?: unknown };
+          replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
+        } catch (parseError) {
+          console.error("[FileUploadChat] Invalid JSON response", parseError, rawPayload);
+        }
+      }
+
+      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 border-primary/40 px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10 border whitespace-nowrap`}
+                >
+                  Novo atendimento
+                </button>
+                <button
+                  onClick={() => setIsDarkMode(!isDarkMode)}
+                  className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
+                >
+                  <Moon className="w-5 h-5 sm:w-6 sm:h-6" />
+                </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>
+
+            {/* Files Ready to Send */}
+            {uploadedFiles.length > 0 && (
+              <div>
+                <div className="flex items-center justify-between mb-2 sm:mb-3">
+                  <h4 className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}>
+                    Files ready to send ({uploadedFiles.length})
+                  </h4>
+                  <button
+                    onClick={() => setUploadedFiles([])}
+                    className={`text-xs px-2 sm:px-3 py-1 rounded-full ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <div className="grid grid-cols-1 gap-2">
+                  {uploadedFiles.map(file => (
+                    <div key={file.id} className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}>
+                      {getFileIcon(file.name)}
+                      <div className="flex-1 min-w-0">
+                        <p className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}>{file.name}</p>
+                        <p className={`text-xs ${themeClasses.textSecondary}`}>{formatFileSize(file.size)}</p>
+                      </div>
+                      <button
+                        onClick={() => removeFile(file.id)}
+                        className={`p-1 rounded-full hover:bg-red-500/20 ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
+                      >
+                        <X className="w-3 h-3 sm:w-4 sm:h-4" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </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 gap-2 sm:gap-3 items-end">
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
+                title="Attach files"
+              >
+                <Paperclip className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+              
+              <div className="flex-1 relative">
+                <textarea
+                  ref={textareaRef}
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                  placeholder="Pergunte qualquer coisa para a Zoe"
+                  rows={1}
+                  className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
+                  style={{ minHeight: '40px' }}
+                />
+                
+                {/* Character count */}
+                {inputValue.length > 0 && (
+                  <div className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}>
+                    {inputValue.length}
+                  </div>
+                )}
+              </div>
+              
+              <button
+                onClick={sendMessage}
+                disabled={!inputValue.trim() && uploadedFiles.length === 0}
+                className="p-2 sm:p-3 bg-linear-to-r from-blue-500 to-purple-600 text-white rounded-lg sm:rounded-xl hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-all duration-200 hover:scale-105 disabled:hover:scale-100 shadow-lg"
+                title="Send message"
+              >
+                <Send className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+
+              <button
+                onClick={() => onOpenVoice?.()}
+                className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
+                title="Voice capture"
+              >
+                <Mic className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+            </div>
+            
+            {/* Quick Actions */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadChat;

From f12be498301e18255852314f0dccb6ffe0209202 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 21 Nov 2025 21:35:51 -0300
Subject: [PATCH 03/14] =?UTF-8?q?fix(chat)=20corre=C3=A7=C3=A3o=20na=20api?=
 =?UTF-8?q?=20do=20n8n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ui/file-upload-and-chat.tsx    | 38 +++++++++++++++----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index 007886a..373db8a 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -3,7 +3,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { Upload, Paperclip, Send, Moon, Sun, X, FileText, ImageIcon, Video, Music, Archive, MessageCircle, Bot, User, Info, Lock, Mic } from 'lucide-react';
 
-const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/cd7d10e6-bcfc-4f3a-b649-351d12b714f1";
+const 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 }) => {
@@ -100,14 +100,35 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
     setUploadedFiles(prev => prev.filter(file => file.id !== fileId));
   };
 
-  const generateAIResponse = useCallback(async (userMessage: string, files: any[]) => {
+const generateAIResponse = useCallback(
+  async (userMessage: string, files: any[]) => {
     try {
+      const hasAudio = files.some((file) => file.name.toLowerCase().endsWith('.mp3'));
+      const hasPdf = files.some((file) => file.name.toLowerCase().endsWith('.pdf'));
+
+      const formData = new FormData();
+
+      // Adiciona mensagem
+      formData.append("message", userMessage);
+
+      // Adiciona arquivos corretamente
+      files.forEach((file) => {
+        const ext = file.name.toLowerCase().split('.').pop();
+        if (ext === 'mp3') {
+          formData.append("audio", file.file); // nome do campo deve ser 'audio'
+        } else if (ext === 'pdf') {
+          formData.append("pdf", file.file); // nome do campo deve ser 'pdf'
+        }
+      });
+
       const response = await fetch(API_ENDPOINT, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ message: userMessage }),
+        body: hasAudio || hasPdf ? formData : JSON.stringify({ message: userMessage }),
+        headers: hasAudio || hasPdf
+          ? undefined // Quando usar FormData, NÃO definir Content-Type, o navegador define com boundary correto
+          : {
+              "Content-Type": "application/json",
+            },
       });
 
       if (!response.ok) {
@@ -131,7 +152,10 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
       console.error("[FileUploadChat] Failed to get API response", error);
       return FALLBACK_RESPONSE;
     }
-  }, []);
+  },
+  []
+);
+
 
   const sendMessage = useCallback(async () => {
     if (inputValue.trim() || uploadedFiles.length > 0) {

From a8d9b1f8962394f802b6e5fd970d310fe5b038a5 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 21 Nov 2025 22:19:58 -0300
Subject: [PATCH 04/14] =?UTF-8?q?feat(ia)=20adicionei=20a=20integra=C3=A7?=
 =?UTF-8?q?=C3=A3o=20a=20api=20do=20n8n=20e=20fiz=20uns=20testes=20inicias?=
 =?UTF-8?q?=20paraa=20validar=20a=20funcionalidade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ZoeIA/ai-assistant-interface.tsx          | 529 +-----------------
 .../components/ui/file-upload-and-chat.tsx    | 444 ++++++++++-----
 2 files changed, 326 insertions(+), 647 deletions(-)

diff --git a/susconecta/components/ZoeIA/ai-assistant-interface.tsx b/susconecta/components/ZoeIA/ai-assistant-interface.tsx
index 9a064ed..6aa58c2 100644
--- a/susconecta/components/ZoeIA/ai-assistant-interface.tsx
+++ b/susconecta/components/ZoeIA/ai-assistant-interface.tsx
@@ -82,17 +82,6 @@ export function AIAssistantInterface({
 
   const activeMessages = activeSession?.messages ?? [];
 
-  const formatDateTime = useCallback(
-    (value: string) =>
-      new Date(value).toLocaleString("pt-BR", {
-        day: "2-digit",
-        month: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-      }),
-    []
-  );
-
   const formatTime = useCallback(
     (value: string) =>
       new Date(value).toLocaleTimeString("pt-BR", {
@@ -102,92 +91,19 @@ export function AIAssistantInterface({
     []
   );
 
-  useEffect(() => {
-    if (history.length === 0) {
-      setActiveSessionId(null);
-      setManualSelection(false);
-      return;
-    }
-
-    if (!activeSessionId && !manualSelection) {
-      setActiveSessionId(history[history.length - 1].id);
-      return;
-    }
-
-    const exists = history.some((session) => session.id === activeSessionId);
-    if (!exists && !manualSelection) {
-      setActiveSessionId(history[history.length - 1].id);
-    }
-  }, [history, activeSessionId, manualSelection]);
-
-  useEffect(() => {
-    if (!messageListRef.current) return;
-    messageListRef.current.scrollTo({
-      top: messageListRef.current.scrollHeight,
-      behavior: "smooth",
-    });
-  }, [activeMessages.length]);
-
-  useEffect(() => {
-    setTypedGreeting("");
-    setTypedIndex(0);
-    setIsTypingGreeting(true);
-  }, []);
-
-  useEffect(() => {
-    if (!isTypingGreeting) return;
-    if (typedIndex >= greetingWords.length) {
-      setIsTypingGreeting(false);
-      return;
-    }
-
-    const timeout = window.setTimeout(() => {
-      setTypedGreeting((previous) =>
-        previous
-          ? `${previous} ${greetingWords[typedIndex]}`
-          : greetingWords[typedIndex]
-      );
-      setTypedIndex((previous) => previous + 1);
-    }, 260);
-
-    return () => window.clearTimeout(timeout);
-  }, [greetingWords, isTypingGreeting, typedIndex]);
-
-  const handleDocuments = () => {
-    if (onOpenDocuments) {
-      onOpenDocuments();
-      return;
-    }
-    console.log("[ZoeIA] Abrir fluxo de documentos");
-  };
-
-  const handleOpenRealtimeChat = () => {
-    if (onOpenChat) {
-      onOpenChat();
-      return;
-    }
-    console.log("[ZoeIA] Abrir chat em tempo real");
-  };
-
-  const buildSessionTopic = useCallback((content: string) => {
-    const normalized = content.trim();
-    if (!normalized) return "Atendimento";
-    return normalized.length > 60 ? `${normalized.slice(0, 57)}…` : normalized;
-  }, []);
-
   const upsertSession = useCallback(
     (session: ChatSession) => {
       if (onAddHistory) {
         onAddHistory(session);
       } else {
-        setInternalHistory((previous) => {
-          const index = previous.findIndex((item) => item.id === session.id);
+        setInternalHistory((prev) => {
+          const index = prev.findIndex((s) => s.id === session.id);
           if (index >= 0) {
-            const updated = [...previous];
+            const updated = [...prev];
             updated[index] = session;
             return updated;
           }
-          return [...previous, session];
+          return [...prev, session];
         });
       }
       setActiveSessionId(session.id);
@@ -202,8 +118,6 @@ export function AIAssistantInterface({
 
       const appendAssistantMessage = (content: string) => {
         const createdAt = new Date().toISOString();
-        const latestSession =
-          historyRef.current.find((session) => session.id === sessionId) ?? baseSession;
         const assistantMessage: ChatMessage = {
           id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
           sender: "assistant",
@@ -211,9 +125,12 @@ export function AIAssistantInterface({
           createdAt,
         };
 
+        const latestSession =
+          historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
+
         const updatedSession: ChatSession = {
           ...latestSession,
-          updatedAt: assistantMessage.createdAt,
+          updatedAt: createdAt,
           messages: [...latestSession.messages, assistantMessage],
         };
 
@@ -229,25 +146,25 @@ export function AIAssistantInterface({
           body: JSON.stringify({ message: prompt }),
         });
 
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`);
-        }
-
         const rawPayload = await response.text();
         let replyText = "";
 
-        if (rawPayload.trim().length > 0) {
+        if (rawPayload.trim()) {
           try {
-            const parsed = JSON.parse(rawPayload) as { reply?: unknown };
-            replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
-          } catch (parseError) {
-            console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
+            const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown };
+            if (typeof parsed.reply === "string") {
+              replyText = parsed.reply.trim();
+            } else if (typeof parsed.message === "string") {
+              replyText = parsed.message.trim();
+            }
+          } catch (error) {
+            console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
           }
         }
 
         appendAssistantMessage(replyText || FALLBACK_RESPONSE);
       } catch (error) {
-        console.error("[ZoeIA] Falha ao obter resposta da API", error);
+        console.error("[ZoeIA] Erro ao buscar resposta da API", error);
         appendAssistantMessage(FALLBACK_RESPONSE);
       }
     },
@@ -266,420 +183,26 @@ export function AIAssistantInterface({
       createdAt: now.toISOString(),
     };
 
-    const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
-
-    const sessionToPersist: ChatSession = existingSession
+    const session = history.find((s) => s.id === activeSessionId);
+    const sessionToUse: ChatSession = session
       ? {
-          ...existingSession,
+          ...session,
           updatedAt: userMessage.createdAt,
-          topic:
-            existingSession.messages.length === 0
-              ? buildSessionTopic(trimmed)
-              : existingSession.topic,
-          messages: [...existingSession.messages, userMessage],
+          messages: [...session.messages, userMessage],
         }
       : {
           id: `session-${now.getTime()}`,
           startedAt: now.toISOString(),
           updatedAt: userMessage.createdAt,
-          topic: buildSessionTopic(trimmed),
+          topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed,
           messages: [userMessage],
         };
 
-    upsertSession(sessionToPersist);
-    console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
+    upsertSession(sessionToUse);
     setQuestion("");
     setHistoryPanelOpen(false);
-
-    void sendMessageToAssistant(trimmed, sessionToPersist);
+    void sendMessageToAssistant(trimmed, sessionToUse);
   };
 
-  const RealtimeTriggerButton = () => (
-    <button
-      type="button"
-      onClick={handleOpenRealtimeChat}
-      className="flex h-12 w-12 items-center justify-center rounded-full bg-white text-foreground shadow-sm transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-zinc-900 dark:text-white"
-      aria-label="Abrir chat Zoe em tempo real"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        className="h-5 w-5"
-        fill="currentColor"
-        aria-hidden
-      >
-        <rect x="4" y="7" width="2" height="10" rx="1" />
-        <rect x="8" y="5" width="2" height="14" rx="1" />
-        <rect x="12" y="7" width="2" height="10" rx="1" />
-        <rect x="16" y="9" width="2" height="6" rx="1" />
-        <rect x="20" y="8" width="2" height="8" rx="1" />
-      </svg>
-    </button>
-  );
-
-  const handleClearHistory = () => {
-    if (onClearHistory) {
-      onClearHistory();
-    } else {
-      setInternalHistory([]);
-    }
-    setActiveSessionId(null);
-    setManualSelection(false);
-    setQuestion("");
-    setHistoryPanelOpen(false);
-  };
-
-  const handleSelectSession = useCallback((sessionId: string) => {
-    setManualSelection(true);
-    setActiveSessionId(sessionId);
-    setHistoryPanelOpen(false);
-  }, []);
-
-  const startNewConversation = useCallback(() => {
-    setManualSelection(true);
-    setActiveSessionId(null);
-    setQuestion("");
-    setHistoryPanelOpen(false);
-  }, []);
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-12">
-        <motion.section
-          initial={{ opacity: 0, y: -14 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, ease: "easeOut" }}
-          className="rounded-3xl border border-primary/10 bg-gradient-to-br from-primary/15 via-background to-background/95 p-6 shadow-xl backdrop-blur-sm"
-        >
-          <div className="flex flex-col gap-6">
-            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-              <div className="flex items-center gap-4">
-                <span className="flex h-12 w-12 items-center justify-center rounded-3xl bg-gradient-to-br from-primary via-indigo-500 to-sky-500 text-base font-semibold text-white shadow-lg">
-                  Zoe
-                </span>
-                <div className="space-y-1">
-                  <p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
-                    Assistente Clínica Zoe
-                  </p>
-                  <motion.h1
-                    key={typedGreeting}
-                    className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl"
-                    initial={{ opacity: 0.6 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.3 }}
-                  >
-                    {gradientGreeting && (
-                      <span className="bg-gradient-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
-                        {gradientGreeting}
-                        {plainGreeting ? " " : ""}
-                      </span>
-                    )}
-                    {plainGreeting && <span className="text-foreground">{plainGreeting}</span>}
-                    <span
-                      className={`ml-1 inline-block h-6 w-[0.12rem] align-middle ${
-                        isTypingGreeting ? "animate-pulse bg-primary" : "bg-transparent"
-                      }`}
-                    />
-                  </motion.h1>
-                </div>
-              </div>
-              <div className="flex flex-wrap items-center justify-end gap-2 sm:justify-end">
-                {history.length > 0 && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
-                    onClick={() => setHistoryPanelOpen(true)}
-                  >
-                    Ver históricos
-                  </Button>
-                )}
-                {history.length > 0 && (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground transition hover:text-destructive"
-                    onClick={handleClearHistory}
-                  >
-                    Limpar histórico
-                  </Button>
-                )}
-                <Button
-                  type="button"
-                  variant="outline"
-                  className="rounded-full border-primary/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10"
-                  onClick={startNewConversation}
-                >
-                  Novo atendimento
-                </Button>
-                <SimpleThemeToggle />
-              </div>
-            </div>
-            <motion.p
-              className="max-w-2xl text-sm text-muted-foreground"
-              initial={{ opacity: 0, y: -6 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.3, duration: 0.4 }}
-            >
-              Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
-            </motion.p>
-          </div>
-        </motion.section>
-
-        <motion.div
-          initial={{ opacity: 0, y: -8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.15, duration: 0.4 }}
-          className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-xs text-primary shadow-sm"
-        >
-          <Lock className="h-4 w-4" />
-          <span>Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
-        </motion.div>
-
-        <motion.section
-          className="space-y-6 rounded-3xl border border-primary/15 bg-card/70 p-6 shadow-lg backdrop-blur"
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2, duration: 0.5 }}
-        >
-          <motion.div
-            className="rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-background/50 to-background p-6 text-sm leading-relaxed text-muted-foreground"
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.25, duration: 0.4 }}
-          >
-            <div className="mb-4 flex items-center gap-3 text-primary">
-              <Info className="h-5 w-5" />
-              <span className="text-base font-semibold">Informativo importante</span>
-            </div>
-            <p>
-              A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado.
-              As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
-            </p>
-            <p className="mt-4 font-medium text-foreground">
-              Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
-            </p>
-          </motion.div>
-
-          <div className="grid gap-3 sm:grid-cols-2">
-            <Button
-              onClick={handleDocuments}
-              size="lg"
-              className="justify-start gap-3 rounded-2xl bg-primary text-primary-foreground shadow-md transition hover:shadow-xl"
-            >
-              <Upload className="h-5 w-5" />
-              Enviar documentos clínicos
-            </Button>
-            <Button
-              onClick={handleOpenRealtimeChat}
-              size="lg"
-              variant="outline"
-              className="justify-start gap-3 rounded-2xl border-primary/40 bg-background shadow-md transition hover:border-primary hover:text-primary"
-            >
-              <MessageCircle className="h-5 w-5" />
-              Conversar com a equipe Zoe
-            </Button>
-          </div>
-
-          <div className="rounded-2xl border border-border bg-background/80 p-4 shadow-inner">
-            <p className="text-sm text-muted-foreground">
-              Estamos reunindo o histórico da sua jornada. Enquanto isso, você pode anexar exames, enviar dúvidas ou solicitar contato com a equipe Zoe.
-            </p>
-          </div>
-        </motion.section>
-
-        <motion.section
-          className="flex flex-col gap-5 rounded-3xl border border-primary/10 bg-card/70 p-6 shadow-lg backdrop-blur"
-          initial={{ opacity: 0, y: 14 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.25, duration: 0.45 }}
-        >
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-                {activeSession ? "Atendimento em andamento" : "Inicie uma conversa"}
-              </p>
-              <p className="text-sm font-semibold text-foreground sm:text-base">
-                {activeSession?.topic ?? "O primeiro contato orienta nossas recomendações clínicas"}
-              </p>
-            </div>
-            {activeSession && (
-              <span className="mt-1 inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary shadow-inner sm:mt-0">
-                Atualizado às {formatTime(activeSession.updatedAt)}
-              </span>
-            )}
-          </div>
-
-          <div
-            ref={messageListRef}
-            className="flex max-h-[45vh] min-h-[220px] flex-col gap-3 overflow-y-auto rounded-2xl border border-border/40 bg-background/70 p-4"
-          >
-            {activeMessages.length > 0 ? (
-              activeMessages.map((message) => (
-                <div
-                  key={message.id}
-                  className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
-                >
-                  <div
-                    className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm ${
-                      message.sender === "user"
-                        ? "bg-primary text-primary-foreground"
-                        : "border border-border/60 bg-background text-foreground"
-                    }`}
-                  >
-                    <p className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</p>
-                    <span
-                      className={`mt-2 block text-[0.68rem] uppercase tracking-[0.18em] ${
-                        message.sender === "user"
-                          ? "text-primary-foreground/75"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      {formatTime(message.createdAt)}
-                    </span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="flex flex-1 flex-col items-center justify-center rounded-2xl border border-dashed border-primary/25 bg-background/80 px-6 py-12 text-center text-sm text-muted-foreground">
-                <p className="text-sm font-medium text-foreground">Envie sua primeira mensagem</p>
-                <p className="mt-2 max-w-md text-sm text-muted-foreground">
-                  Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.
-                </p>
-              </div>
-            )}
-          </div>
-        </motion.section>
-
-        <div className="flex flex-col gap-3 rounded-3xl border border-border bg-card/70 px-4 py-3 shadow-xl sm:flex-row sm:items-center">
-          <div className="flex items-center gap-2">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="rounded-full border border-border/40 bg-background/60 text-muted-foreground transition hover:text-primary"
-              onClick={handleDocuments}
-            >
-              <Plus className="h-5 w-5" />
-            </Button>
-          </div>
-          <Input
-            value={question}
-            onChange={(event) => setQuestion(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
-                handleSendMessage();
-              }
-            }}
-            placeholder="Pergunte qualquer coisa para a Zoe"
-            className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
-          />
-          <div className="flex items-center justify-end gap-2">
-            <Button
-              type="button"
-              className="rounded-full bg-primary px-5 text-primary-foreground shadow-md transition hover:bg-primary/90"
-              onClick={handleSendMessage}
-            >
-              Enviar
-            </Button>
-            <RealtimeTriggerButton />
-          </div>
-        </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>
-  );
+  return <div>/* restante da interface (UI) omitida para focar na lógica */</div>;
 }
diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index 373db8a..c372c5c 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -1,23 +1,42 @@
 "use client";
 
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { Upload, Paperclip, Send, Moon, Sun, X, FileText, ImageIcon, Video, Music, Archive, MessageCircle, Bot, User, Info, Lock, Mic } from 'lucide-react';
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import {
+  Upload,
+  Paperclip,
+  Send,
+  Moon,
+  Sun,
+  X,
+  FileText,
+  ImageIcon,
+  Video,
+  Music,
+  Archive,
+  MessageCircle,
+  Bot,
+  User,
+  Info,
+  Lock,
+  Mic,
+} from "lucide-react";
 
 const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
-const FALLBACK_RESPONSE = "Tive um problema para responder agora. Tente novamente em alguns instantes.";
+const FALLBACK_RESPONSE =
+  "Tive um problema para responder agora. Tente novamente em alguns instantes.";
 
 const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
   const [isDarkMode, setIsDarkMode] = useState(true);
   const [messages, setMessages] = useState([
     {
       id: 1,
-      type: 'ai',
+      type: "ai",
       content:
-        'Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.',
+        "Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.",
       timestamp: new Date(),
     },
   ]);
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
   const [isDragOver, setIsDragOver] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
@@ -27,54 +46,59 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
 
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
-    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
   // Auto-resize textarea
   useEffect(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height =
+        textareaRef.current.scrollHeight + "px";
     }
   }, [inputValue]);
 
   const getFileIcon = (fileName: string) => {
-    const ext = fileName.split('.').pop()?.toLowerCase();
-    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext || '')) return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
-    if (['mp4', 'avi', 'mkv', 'mov', 'webm'].includes(ext || '')) return <Video className="w-4 h-4" aria-hidden="true" />;
-    if (['mp3', 'wav', 'flac', 'ogg', 'aac'].includes(ext || '')) return <Music className="w-4 h-4" aria-hidden="true" />;
-    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext || '')) return <Archive className="w-4 h-4" aria-hidden="true" />;
+    const ext = fileName.split(".").pop()?.toLowerCase();
+    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || ""))
+      return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
+    if (["mp4", "avi", "mkv", "mov", "webm"].includes(ext || ""))
+      return <Video className="w-4 h-4" aria-hidden="true" />;
+    if (["mp3", "wav", "flac", "ogg", "aac"].includes(ext || ""))
+      return <Music className="w-4 h-4" aria-hidden="true" />;
+    if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
+      return <Archive className="w-4 h-4" aria-hidden="true" />;
     return <FileText className="w-4 h-4" aria-hidden="true" />;
   };
 
   const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 Bytes';
+    if (bytes === 0) return "0 Bytes";
     const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   };
 
   const handleFileSelect = (files: FileList | null) => {
     if (!files) return;
-    const newFiles = Array.from(files).map(file => ({
+    const newFiles = Array.from(files).map((file) => ({
       id: Date.now() + Math.random(),
       name: file.name,
       size: file.size,
       type: file.type,
-      file: file
+      file: file,
     }));
-    setUploadedFiles(prev => [...prev, ...newFiles]);
-    
+    setUploadedFiles((prev) => [...prev, ...newFiles]);
+
     // Add system message about file upload
-    const fileNames = newFiles.map(f => f.name).join(', ');
+    const fileNames = newFiles.map((f) => f.name).join(", ");
     const systemMessage = {
       id: Date.now(),
-      type: 'system',
+      type: "system",
       content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
-      timestamp: new Date()
+      timestamp: new Date(),
     };
-    setMessages(prev => [...prev, systemMessage]);
+    setMessages((prev) => [...prev, systemMessage]);
   };
 
   const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
@@ -97,125 +121,157 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
   }, []);
 
   const removeFile = (fileId: number) => {
-    setUploadedFiles(prev => prev.filter(file => file.id !== fileId));
+    setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
   };
 
-const generateAIResponse = useCallback(
-  async (userMessage: string, files: any[]) => {
-    try {
-      const hasAudio = files.some((file) => file.name.toLowerCase().endsWith('.mp3'));
-      const hasPdf = files.some((file) => file.name.toLowerCase().endsWith('.pdf'));
+  const generateAIResponse = useCallback(
+    async (userMessage: string, files: any[]) => {
+      try {
+        const hasAudio = files.some((file) =>
+          file.name.toLowerCase().endsWith(".mp3")
+        );
+        const hasPdf = files.some((file) =>
+          file.name.toLowerCase().endsWith(".pdf")
+        );
 
-      const formData = new FormData();
+        const formData = new FormData();
 
-      // Adiciona mensagem
-      formData.append("message", userMessage);
+        // Adiciona mensagem
+        formData.append("message", userMessage);
 
-      // Adiciona arquivos corretamente
-      files.forEach((file) => {
-        const ext = file.name.toLowerCase().split('.').pop();
-        if (ext === 'mp3') {
-          formData.append("audio", file.file); // nome do campo deve ser 'audio'
-        } else if (ext === 'pdf') {
-          formData.append("pdf", file.file); // nome do campo deve ser 'pdf'
+        // Adiciona arquivos corretamente
+        files.forEach((file) => {
+          const ext = file.name.toLowerCase().split(".").pop();
+          if (ext === "mp3") {
+            formData.append("audio", file.file); // nome do campo deve ser 'audio'
+          } else if (ext === "pdf") {
+            formData.append("pdf", file.file); // nome do campo deve ser 'pdf'
+          }
+        });
+
+        const response = await fetch(API_ENDPOINT, {
+          method: "POST",
+          body:
+            hasAudio || hasPdf
+              ? formData
+              : JSON.stringify({ message: userMessage }),
+          headers:
+            hasAudio || hasPdf
+              ? undefined // Quando usar FormData, NÃO definir Content-Type, o navegador define com boundary correto
+              : {
+                  "Content-Type": "application/json",
+                },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
         }
-      });
 
-      const response = await fetch(API_ENDPOINT, {
-        method: "POST",
-        body: hasAudio || hasPdf ? formData : JSON.stringify({ message: userMessage }),
-        headers: hasAudio || hasPdf
-          ? undefined // Quando usar FormData, NÃO definir Content-Type, o navegador define com boundary correto
-          : {
-              "Content-Type": "application/json",
-            },
-      });
+        let replyText = "";
 
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
-      }
-
-      const rawPayload = await response.text();
-      let replyText = "";
-
-      if (rawPayload.trim().length > 0) {
         try {
-          const parsed = JSON.parse(rawPayload) as { reply?: unknown };
-          replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
-        } catch (parseError) {
-          console.error("[FileUploadChat] Invalid JSON response", parseError, rawPayload);
+          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;
       }
-
-      return replyText || FALLBACK_RESPONSE;
-    } catch (error) {
-      console.error("[FileUploadChat] Failed to get API response", error);
-      return FALLBACK_RESPONSE;
-    }
-  },
-  []
-);
-
+    },
+    []
+  );
 
   const sendMessage = useCallback(async () => {
     if (inputValue.trim() || uploadedFiles.length > 0) {
       const newMessage = {
         id: Date.now(),
-        type: 'user',
+        type: "user",
         content: inputValue.trim(),
         files: [...uploadedFiles],
-        timestamp: new Date()
+        timestamp: new Date(),
       };
-      setMessages(prev => [...prev, newMessage]);
-      
+      setMessages((prev) => [...prev, newMessage]);
+
       const messageContent = inputValue.trim();
       const attachedFiles = [...uploadedFiles];
-      
-      setInputValue('');
+
+      setInputValue("");
       setUploadedFiles([]);
       setIsTyping(true);
-      
+
       // Get AI response from API
-      const aiResponseContent = await generateAIResponse(messageContent, attachedFiles);
-      
+      const aiResponseContent = await generateAIResponse(
+        messageContent,
+        attachedFiles
+      );
+
       const aiResponse = {
         id: Date.now() + 1,
-        type: 'ai',
+        type: "ai",
         content: aiResponseContent,
-        timestamp: new Date()
+        timestamp: new Date(),
       };
-      setMessages(prev => [...prev, aiResponse]);
+      setMessages((prev) => [...prev, aiResponse]);
       setIsTyping(false);
     }
   }, [inputValue, uploadedFiles, generateAIResponse]);
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       sendMessage();
     }
   };
 
   const themeClasses = {
-    background: isDarkMode ? 'bg-gray-900' : 'bg-gray-50',
-    cardBg: isDarkMode ? 'bg-gray-800' : 'bg-white',
-    text: isDarkMode ? 'text-white' : 'text-gray-900',
-    textSecondary: isDarkMode ? 'text-gray-300' : 'text-gray-600',
-    border: isDarkMode ? 'border-gray-700' : 'border-gray-200',
-    inputBg: isDarkMode ? 'bg-gray-700' : 'bg-gray-100',
-    uploadArea: isDragOver 
-      ? (isDarkMode ? 'bg-blue-900/50 border-blue-500' : 'bg-blue-50 border-blue-400')
-      : (isDarkMode ? 'bg-gray-700 border-gray-600' : 'bg-gray-50 border-gray-300'),
-    userMessage: isDarkMode ? 'bg-blue-600' : 'bg-blue-500',
-    aiMessage: isDarkMode ? 'bg-gray-700' : 'bg-gray-200',
-    systemMessage: isDarkMode ? 'bg-yellow-900/30 text-yellow-200' : 'bg-yellow-100 text-yellow-800'
+    background: isDarkMode ? "bg-gray-900" : "bg-gray-50",
+    cardBg: isDarkMode ? "bg-gray-800" : "bg-white",
+    text: isDarkMode ? "text-white" : "text-gray-900",
+    textSecondary: isDarkMode ? "text-gray-300" : "text-gray-600",
+    border: isDarkMode ? "border-gray-700" : "border-gray-200",
+    inputBg: isDarkMode ? "bg-gray-700" : "bg-gray-100",
+    uploadArea: isDragOver
+      ? isDarkMode
+        ? "bg-blue-900/50 border-blue-500"
+        : "bg-blue-50 border-blue-400"
+      : isDarkMode
+      ? "bg-gray-700 border-gray-600"
+      : "bg-gray-50 border-gray-300",
+    userMessage: isDarkMode ? "bg-blue-600" : "bg-blue-500",
+    aiMessage: isDarkMode ? "bg-gray-700" : "bg-gray-200",
+    systemMessage: isDarkMode
+      ? "bg-yellow-900/30 text-yellow-200"
+      : "bg-yellow-100 text-yellow-800",
   };
 
   return (
-    <div className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}>
+    <div
+      className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}
+    >
       <div className="max-w-6xl mx-auto p-3 sm:p-6">
         {/* Main Card - Zoe Assistant Section */}
-        <div className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${isDarkMode ? 'from-primary/15 via-gray-800 to-gray-900' : 'from-blue-50 via-white to-indigo-50'} p-4 sm:p-8 ${isDarkMode ? 'border-gray-700' : 'border-blue-200'} mb-4 sm:mb-6 backdrop-blur-sm`}>
+        <div
+          className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${
+            isDarkMode
+              ? "from-primary/15 via-gray-800 to-gray-900"
+              : "from-blue-50 via-white to-indigo-50"
+          } p-4 sm:p-8 ${
+            isDarkMode ? "border-gray-700" : "border-blue-200"
+          } mb-4 sm:mb-6 backdrop-blur-sm`}
+        >
           <div className="flex flex-col gap-4 sm:gap-8">
             {/* Header */}
             <div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
@@ -252,27 +308,61 @@ const generateAIResponse = useCallback(
             </div>
 
             {/* Description */}
-            <p className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${isDarkMode ? 'text-muted-foreground' : 'text-gray-700'}`}>
-              Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
+            <p
+              className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${
+                isDarkMode ? "text-muted-foreground" : "text-gray-700"
+              }`}
+            >
+              Organizamos exames, orientações e tarefas assistenciais em um
+              painel único para acelerar decisões clínicas. Utilize a Zoe para
+              revisar resultados, registrar percepções e alinhar próximos passos
+              com a equipe de saúde.
             </p>
 
             {/* Security Info */}
             <div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
               <Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
-              <span className="text-xs sm:text-sm">Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
+              <span className="text-xs sm:text-sm">
+                Suas informações permanecem criptografadas e seguras com a
+                equipe Zoe.
+              </span>
             </div>
 
             {/* Info Section */}
-            <div className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${isDarkMode ? 'border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground' : 'border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700'} p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}>
-              <div className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${isDarkMode ? 'text-primary' : 'text-blue-600'}`}>
+            <div
+              className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${
+                isDarkMode
+                  ? "border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground"
+                  : "border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700"
+              } p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}
+            >
+              <div
+                className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${
+                  isDarkMode ? "text-primary" : "text-blue-600"
+                }`}
+              >
                 <Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
-                <span className="text-sm sm:text-base font-semibold">Informativo importante</span>
+                <span className="text-sm sm:text-base font-semibold">
+                  Informativo importante
+                </span>
               </div>
-              <p className={`mb-3 sm:mb-4 text-xs sm:text-sm ${isDarkMode ? 'text-muted-foreground' : 'text-gray-700'}`}>
-                A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado. As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
+              <p
+                className={`mb-3 sm:mb-4 text-xs sm:text-sm ${
+                  isDarkMode ? "text-muted-foreground" : "text-gray-700"
+                }`}
+              >
+                A Zoe acompanha toda a jornada clínica, consolida exames e
+                registra orientações para que você tenha clareza em cada etapa
+                do cuidado. As respostas são informativas e complementam a
+                avaliação de um profissional de saúde qualificado.
               </p>
-              <p className={`font-medium text-xs sm:text-sm ${isDarkMode ? 'text-foreground' : 'text-gray-900'}`}>
-                Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
+              <p
+                className={`font-medium text-xs sm:text-sm ${
+                  isDarkMode ? "text-foreground" : "text-gray-900"
+                }`}
+              >
+                Em situações de urgência, entre em contato com a equipe médica
+                presencial ou acione os serviços de emergência da sua região.
               </p>
             </div>
 
@@ -280,7 +370,9 @@ const generateAIResponse = useCallback(
             {uploadedFiles.length > 0 && (
               <div>
                 <div className="flex items-center justify-between mb-2 sm:mb-3">
-                  <h4 className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}>
+                  <h4
+                    className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}
+                  >
                     Files ready to send ({uploadedFiles.length})
                   </h4>
                   <button
@@ -291,12 +383,21 @@ const generateAIResponse = useCallback(
                   </button>
                 </div>
                 <div className="grid grid-cols-1 gap-2">
-                  {uploadedFiles.map(file => (
-                    <div key={file.id} className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}>
+                  {uploadedFiles.map((file) => (
+                    <div
+                      key={file.id}
+                      className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}
+                    >
                       {getFileIcon(file.name)}
                       <div className="flex-1 min-w-0">
-                        <p className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}>{file.name}</p>
-                        <p className={`text-xs ${themeClasses.textSecondary}`}>{formatFileSize(file.size)}</p>
+                        <p
+                          className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}
+                        >
+                          {file.name}
+                        </p>
+                        <p className={`text-xs ${themeClasses.textSecondary}`}>
+                          {formatFileSize(file.size)}
+                        </p>
                       </div>
                       <button
                         onClick={() => removeFile(file.id)}
@@ -313,72 +414,125 @@ const generateAIResponse = useCallback(
         </div>
 
         {/* Chat Area */}
-        <div className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}>
+        <div
+          className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}
+        >
           {/* Chat Header */}
-          <div className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}>
+          <div
+            className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}
+          >
             <div className="flex items-center gap-2 sm:gap-3">
               <div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
-              <h3 className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}>Chat with AI Assistant</h3>
-              <span className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}>Online</span>
+              <h3
+                className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}
+              >
+                Chat with AI Assistant
+              </h3>
+              <span
+                className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}
+              >
+                Online
+              </span>
             </div>
           </div>
 
           {/* Chat Messages */}
           <div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
             {messages.map((message: any) => (
-              <div key={message.id} className={`flex ${message.type === 'user' ? 'justify-end' : message.type === 'system' ? 'justify-center' : 'justify-start'}`}>
-                {message.type !== 'system' && message.type === 'ai' && (
+              <div
+                key={message.id}
+                className={`flex ${
+                  message.type === "user"
+                    ? "justify-end"
+                    : message.type === "system"
+                    ? "justify-center"
+                    : "justify-start"
+                }`}
+              >
+                {message.type !== "system" && message.type === "ai" && (
                   <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
                     Z
                   </span>
                 )}
-                
-                <div className={`max-w-xs sm:max-w-sm lg:max-w-md ${
-                  message.type === 'user' ? `${themeClasses.userMessage} text-white ml-3` :
-                  message.type === 'ai' ? `${themeClasses.aiMessage} ${themeClasses.text}` :
-                  `${themeClasses.systemMessage} text-xs`
-                } px-4 py-3 rounded-2xl ${message.type === 'user' ? 'rounded-br-md' : message.type === 'ai' ? 'rounded-bl-md' : 'rounded-lg'}`}>
-                  {message.content && <p className="wrap-break-word text-xs sm:text-sm">{message.content}</p>}
+
+                <div
+                  className={`max-w-xs sm:max-w-sm lg:max-w-md ${
+                    message.type === "user"
+                      ? `${themeClasses.userMessage} text-white ml-3`
+                      : message.type === "ai"
+                      ? `${themeClasses.aiMessage} ${themeClasses.text}`
+                      : `${themeClasses.systemMessage} text-xs`
+                  } px-4 py-3 rounded-2xl ${
+                    message.type === "user"
+                      ? "rounded-br-md"
+                      : message.type === "ai"
+                      ? "rounded-bl-md"
+                      : "rounded-lg"
+                  }`}
+                >
+                  {message.content && (
+                    <p className="wrap-break-word text-xs sm:text-sm">
+                      {message.content}
+                    </p>
+                  )}
                   {message.files && message.files.length > 0 && (
                     <div className="mt-1 sm:mt-2 space-y-1">
                       {message.files.map((file: any) => (
-                        <div key={file.id} className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1">
+                        <div
+                          key={file.id}
+                          className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1"
+                        >
                           {getFileIcon(file.name)}
                           <span className="truncate text-xs">{file.name}</span>
-                          <span className="text-xs">({formatFileSize(file.size)})</span>
+                          <span className="text-xs">
+                            ({formatFileSize(file.size)})
+                          </span>
                         </div>
                       ))}
                     </div>
                   )}
                   <p className="text-xs opacity-70 mt-1 sm:mt-2">
-                    {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                    {message.timestamp.toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
                   </p>
                 </div>
 
-                {message.type === 'user' && (
-                  <div className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}>
+                {message.type === "user" && (
+                  <div
+                    className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}
+                  >
                     <User className="w-5 h-5 text-white" />
                   </div>
                 )}
               </div>
             ))}
-            
+
             {/* Typing Indicator */}
             {isTyping && (
               <div className="flex justify-start">
                 <span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
                   Z
                 </span>
-                <div className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}>
+                <div
+                  className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}
+                >
                   <div className="flex space-x-1">
                     <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                    <div
+                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                      style={{ animationDelay: "0.1s" }}
+                    ></div>
+                    <div
+                      className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                      style={{ animationDelay: "0.2s" }}
+                    ></div>
                   </div>
                 </div>
               </div>
             )}
-            
+
             <div ref={chatEndRef} />
           </div>
 
@@ -392,7 +546,7 @@ const generateAIResponse = useCallback(
               >
                 <Paperclip className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
-              
+
               <div className="flex-1 relative">
                 <textarea
                   ref={textareaRef}
@@ -402,17 +556,19 @@ const generateAIResponse = useCallback(
                   placeholder="Pergunte qualquer coisa para a Zoe"
                   rows={1}
                   className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
-                  style={{ minHeight: '40px' }}
+                  style={{ minHeight: "40px" }}
                 />
-                
+
                 {/* Character count */}
                 {inputValue.length > 0 && (
-                  <div className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}>
+                  <div
+                    className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}
+                  >
                     {inputValue.length}
                   </div>
                 )}
               </div>
-              
+
               <button
                 onClick={sendMessage}
                 disabled={!inputValue.trim() && uploadedFiles.length === 0}
@@ -430,7 +586,7 @@ const generateAIResponse = useCallback(
                 <Mic className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
             </div>
-            
+
             {/* Quick Actions */}
           </div>
         </div>

From 964e25bd7e4749485999c3aaad07d9ff30ff0186 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 21 Nov 2025 23:12:29 -0300
Subject: [PATCH 05/14] =?UTF-8?q?fix(ia)=20ajuste=20na=20integra=C3=A7?=
 =?UTF-8?q?=C3=A3o=20da=20IA=20para=20suportar=20pdf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ZoeIA/ai-assistant-interface.tsx          | 133 ++++++++++++++++--
 .../components/ui/file-upload-and-chat.tsx    |  59 ++++----
 2 files changed, 148 insertions(+), 44 deletions(-)

diff --git a/susconecta/components/ZoeIA/ai-assistant-interface.tsx b/susconecta/components/ZoeIA/ai-assistant-interface.tsx
index 6aa58c2..b63b85d 100644
--- a/susconecta/components/ZoeIA/ai-assistant-interface.tsx
+++ b/susconecta/components/ZoeIA/ai-assistant-interface.tsx
@@ -46,6 +46,8 @@ export function AIAssistantInterface({
   const [manualSelection, setManualSelection] = useState(false);
   const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
   const messageListRef = useRef<HTMLDivElement | null>(null);
+  const pdfInputRef = useRef<HTMLInputElement | null>(null);
+  const [pdfFile, setPdfFile] = useState<File | null>(null); // arquivo PDF selecionado
   const history = internalHistory;
   const historyRef = useRef<ChatSession[]>(history);
   const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
@@ -138,16 +140,29 @@ export function AIAssistantInterface({
       };
 
       try {
-        const response = await fetch(API_ENDPOINT, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ message: prompt }),
-        });
+        let replyText = "";
+        let response: Response;
+
+        if (pdfFile) {
+          // Monta FormData conforme especificação: campos 'pdf' e 'message'
+          const formData = new FormData();
+            formData.append("pdf", pdfFile);
+            formData.append("message", prompt);
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            body: formData, // multipart/form-data gerenciado pelo browser
+          });
+        } else {
+          response = await fetch(API_ENDPOINT, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ message: prompt }),
+          });
+        }
 
         const rawPayload = await response.text();
-        let replyText = "";
 
         if (rawPayload.trim()) {
           try {
@@ -168,7 +183,7 @@ export function AIAssistantInterface({
         appendAssistantMessage(FALLBACK_RESPONSE);
       }
     },
-    [upsertSession]
+    [upsertSession, pdfFile]
   );
 
   const handleSendMessage = () => {
@@ -204,5 +219,103 @@ export function AIAssistantInterface({
     void sendMessageToAssistant(trimmed, sessionToUse);
   };
 
-  return <div>/* restante da interface (UI) omitida para focar na lógica */</div>;
+  const handleSelectPdf = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && file.type === "application/pdf") {
+      setPdfFile(file);
+    }
+    // Permite re-selecionar o mesmo arquivo
+    e.target.value = "";
+  };
+
+  const removePdf = () => setPdfFile(null);
+
+  return (
+    <div className="w-full max-w-3xl mx-auto p-4 space-y-4">
+      {/* Área superior exibindo PDF selecionado */}
+      {pdfFile && (
+        <div className="flex items-center justify-between border rounded-lg p-3 bg-muted/50">
+          <div className="flex items-center gap-3 min-w-0">
+            <Upload className="w-5 h-5 text-primary" />
+            <div className="min-w-0">
+              <p className="text-sm font-medium truncate" title={pdfFile.name}>{pdfFile.name}</p>
+              <p className="text-xs text-muted-foreground">
+                PDF anexado • {(pdfFile.size / 1024).toFixed(1)} KB
+              </p>
+            </div>
+          </div>
+          <Button variant="secondary" size="sm" onClick={removePdf}>
+            Remover
+          </Button>
+        </div>
+      )}
+
+      {/* Lista de mensagens */}
+      <div
+        ref={messageListRef}
+        className="border rounded-lg p-4 h-96 overflow-y-auto space-y-3 bg-background"
+      >
+        {activeMessages.length === 0 && (
+          <p className="text-sm text-muted-foreground">Nenhuma mensagem ainda. Envie uma pergunta.</p>
+        )}
+        {activeMessages.map((m) => (
+          <div
+            key={m.id}
+            className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}
+          >
+            <div
+              className={`px-3 py-2 rounded-lg max-w-xs text-sm whitespace-pre-wrap ${
+                m.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
+              }`}
+            >
+              {m.content}
+              <div className="mt-1 text-[10px] opacity-70">
+                {formatTime(m.createdAt)}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Input & ações */}
+      <div className="flex items-center gap-2">
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => pdfInputRef.current?.click()}
+          >
+            PDF
+          </Button>
+          <input
+            ref={pdfInputRef}
+            type="file"
+            accept="application/pdf"
+            className="hidden"
+            onChange={handleSelectPdf}
+          />
+        </div>
+        <Input
+          placeholder="Digite sua pergunta"
+          value={question}
+          onChange={(e) => setQuestion(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSendMessage();
+            }
+          }}
+        />
+        <Button onClick={handleSendMessage} disabled={!question.trim()}>
+          Enviar
+        </Button>
+      </div>
+      <div className="text-xs text-muted-foreground">
+        {pdfFile
+          ? "A próxima mensagem será enviada junto ao PDF como multipart/form-data."
+          : "Selecione um PDF para anexar ao próximo envio."}
+      </div>
+    </div>
+  );
 }
diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index c372c5c..f39b467 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -124,44 +124,28 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
     setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
   };
 
+
   const generateAIResponse = useCallback(
     async (userMessage: string, files: any[]) => {
       try {
-        const hasAudio = files.some((file) =>
-          file.name.toLowerCase().endsWith(".mp3")
-        );
-        const hasPdf = files.some((file) =>
-          file.name.toLowerCase().endsWith(".pdf")
-        );
+        const pdfFile = files.find((file) => file.name.toLowerCase().endsWith(".pdf"));
 
-        const formData = new FormData();
-
-        // Adiciona mensagem
-        formData.append("message", userMessage);
-
-        // Adiciona arquivos corretamente
-        files.forEach((file) => {
-          const ext = file.name.toLowerCase().split(".").pop();
-          if (ext === "mp3") {
-            formData.append("audio", file.file); // nome do campo deve ser 'audio'
-          } else if (ext === "pdf") {
-            formData.append("pdf", file.file); // nome do campo deve ser 'pdf'
-          }
-        });
-
-        const response = await fetch(API_ENDPOINT, {
-          method: "POST",
-          body:
-            hasAudio || hasPdf
-              ? formData
-              : JSON.stringify({ message: userMessage }),
-          headers:
-            hasAudio || hasPdf
-              ? undefined // Quando usar FormData, NÃO definir Content-Type, o navegador define com boundary correto
-              : {
-                  "Content-Type": "application/json",
-                },
-        });
+        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}`);
@@ -546,6 +530,13 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               >
                 <Paperclip className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={(e) => handleFileSelect(e.target.files)}
+              />
 
               <div className="flex-1 relative">
                 <textarea

From 82942ebe145bc9866ff5042b0a2046fb3895f2dc Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Sat, 22 Nov 2025 18:12:18 -0300
Subject: [PATCH 06/14] =?UTF-8?q?fix(voice)=20adiocionei=20a=20fun=C3=A7?=
 =?UTF-8?q?=C3=A3o=20de=20audio=20no=20chat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 susconecta/app/audio-teste/page.tsx           |  12 ++
 susconecta/components/ZoeIA/ai-voice-flow.tsx | 195 ++++++++++++++++++
 susconecta/types/lamejs.d.ts                  |  14 ++
 3 files changed, 221 insertions(+)
 create mode 100644 susconecta/app/audio-teste/page.tsx
 create mode 100644 susconecta/components/ZoeIA/ai-voice-flow.tsx
 create mode 100644 susconecta/types/lamejs.d.ts

diff --git a/susconecta/app/audio-teste/page.tsx b/susconecta/app/audio-teste/page.tsx
new file mode 100644
index 0000000..513bfc9
--- /dev/null
+++ b/susconecta/app/audio-teste/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
+
+export default function VozPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center p-10">
+      <AIVoiceFlow />
+    </div>
+  );
+}
+
diff --git a/susconecta/components/ZoeIA/ai-voice-flow.tsx b/susconecta/components/ZoeIA/ai-voice-flow.tsx
new file mode 100644
index 0000000..2f7cd05
--- /dev/null
+++ b/susconecta/components/ZoeIA/ai-voice-flow.tsx
@@ -0,0 +1,195 @@
+"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;
diff --git a/susconecta/types/lamejs.d.ts b/susconecta/types/lamejs.d.ts
new file mode 100644
index 0000000..f1cfb4f
--- /dev/null
+++ b/susconecta/types/lamejs.d.ts
@@ -0,0 +1,14 @@
+// Minimal type declarations for lamejs used in demo-voice-orb
+// Extend if more APIs are required.
+
+declare module 'lamejs' {
+  class Mp3Encoder {
+    constructor(channels: number, sampleRate: number, kbps: number);
+    encodeBuffer(buffer: Int16Array): Uint8Array;
+    flush(): Uint8Array;
+  }
+  export { Mp3Encoder };
+  // Default export pattern support
+  const _default: { Mp3Encoder: typeof Mp3Encoder };
+  export default _default;
+}

From f05df3efe34c522f3170e0027453dba6eecdf8b6 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Sat, 22 Nov 2025 22:04:54 -0300
Subject: [PATCH 07/14] =?UTF-8?q?feat:=20integrar=20Zoe=20com=20captura=20?=
 =?UTF-8?q?de=20=C3=A1udio=20e=20resposta=20em=20voz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 susconecta/components/ZoeIA/ai-voice-flow.tsx |  1 +
 .../features/pacientes/chat-widget.tsx        | 82 +++----------------
 2 files changed, 12 insertions(+), 71 deletions(-)

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

From 66758614ebbb482d711f600024ccc8efc5e579c0 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Sun, 23 Nov 2025 23:43:07 -0300
Subject: [PATCH 08/14] style(chat) ajuste visual na interface do chat

---
 .../components/ui/file-upload-and-chat.tsx    | 96 ++++++++-----------
 1 file changed, 41 insertions(+), 55 deletions(-)

diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index f39b467..f56d7c3 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -89,16 +89,7 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
       file: file,
     }));
     setUploadedFiles((prev) => [...prev, ...newFiles]);
-
-    // Add system message about file upload
-    const fileNames = newFiles.map((f) => f.name).join(", ");
-    const systemMessage = {
-      id: Date.now(),
-      type: "system",
-      content: `📎 Added ${newFiles.length} file(s): ${fileNames}`,
-      timestamp: new Date(),
-    };
-    setMessages((prev) => [...prev, systemMessage]);
+    // Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
   };
 
   const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
@@ -350,50 +341,7 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               </p>
             </div>
 
-            {/* Files Ready to Send */}
-            {uploadedFiles.length > 0 && (
-              <div>
-                <div className="flex items-center justify-between mb-2 sm:mb-3">
-                  <h4
-                    className={`text-xs sm:text-sm font-medium ${themeClasses.text}`}
-                  >
-                    Files ready to send ({uploadedFiles.length})
-                  </h4>
-                  <button
-                    onClick={() => setUploadedFiles([])}
-                    className={`text-xs px-2 sm:px-3 py-1 rounded-full ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
-                  >
-                    Clear all
-                  </button>
-                </div>
-                <div className="grid grid-cols-1 gap-2">
-                  {uploadedFiles.map((file) => (
-                    <div
-                      key={file.id}
-                      className={`flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg}`}
-                    >
-                      {getFileIcon(file.name)}
-                      <div className="flex-1 min-w-0">
-                        <p
-                          className={`text-xs sm:text-sm font-medium truncate ${themeClasses.text}`}
-                        >
-                          {file.name}
-                        </p>
-                        <p className={`text-xs ${themeClasses.textSecondary}`}>
-                          {formatFileSize(file.size)}
-                        </p>
-                      </div>
-                      <button
-                        onClick={() => removeFile(file.id)}
-                        className={`p-1 rounded-full hover:bg-red-500/20 ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
-                      >
-                        <X className="w-3 h-3 sm:w-4 sm:h-4" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+            {/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
           </div>
         </div>
 
@@ -522,7 +470,44 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
 
           {/* Chat Input */}
           <div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
-            <div className="flex gap-2 sm:gap-3 items-end">
+            <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>
+              )}
+
+              {/* Linha com botões e textarea */}
+              <div className="flex gap-2 sm:gap-3 items-end">
               <button
                 onClick={() => fileInputRef.current?.click()}
                 className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
@@ -576,6 +561,7 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               >
                 <Mic className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
+              </div>
             </div>
 
             {/* Quick Actions */}

From 06b7f0d49780eacecbe51b351884f7d01b55f9a0 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Mon, 24 Nov 2025 00:00:41 -0300
Subject: [PATCH 09/14] style(chat) ajuste no modo escuro na interface do chat

---
 susconecta/app/audio-teste/page.tsx               | 12 +++++++++++-
 .../components/features/pacientes/chat-widget.tsx | 15 +++++++++------
 susconecta/components/ui/file-upload-and-chat.tsx | 14 +++++++++-----
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/susconecta/app/audio-teste/page.tsx b/susconecta/app/audio-teste/page.tsx
index 513bfc9..84add01 100644
--- a/susconecta/app/audio-teste/page.tsx
+++ b/susconecta/app/audio-teste/page.tsx
@@ -1,10 +1,20 @@
 "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">
+    <div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
       <AIVoiceFlow />
     </div>
   );
diff --git a/susconecta/components/features/pacientes/chat-widget.tsx b/susconecta/components/features/pacientes/chat-widget.tsx
index 74381a4..c706c21 100644
--- a/susconecta/components/features/pacientes/chat-widget.tsx
+++ b/susconecta/components/features/pacientes/chat-widget.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
+import { useTheme } from "next-themes";
 import { ArrowLeft, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import FileUploadChat from "@/components/ui/file-upload-and-chat";
@@ -11,6 +12,8 @@ import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
 export function ChatWidget() {
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [realtimeOpen, setRealtimeOpen] = useState(false);
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
 
   useEffect(() => {
     if (!assistantOpen && !realtimeOpen) return;
@@ -48,13 +51,13 @@ export function ChatWidget() {
       {assistantOpen && (
         <div
           id="ai-assistant-overlay"
-          className="fixed inset-0 z-100 flex flex-col bg-gray-50 dark:bg-slate-950 border-b border-border"
+          className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
         >
-          <div className="flex items-center justify-between border-b px-4 py-3 bg-slate-100 dark:bg-slate-900 border-gray-300 dark:border-slate-700 shadow-sm">
+          <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"}`}>
             <Button
               type="button"
               variant="ghost"
-              className="flex items-center gap-2 text-slate-900 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800"
+              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
               onClick={closeAssistant}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
@@ -72,13 +75,13 @@ export function ChatWidget() {
       {realtimeOpen && (
         <div
           id="ai-realtime-overlay"
-          className="fixed inset-0 z-110 flex flex-col bg-background"
+          className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
         >
-          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <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"}`}>
             <Button
               type="button"
               variant="ghost"
-              className="flex items-center gap-2"
+              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
               onClick={closeRealtime}
             >
               <ArrowLeft className="h-4 w-4" aria-hidden />
diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index f56d7c3..f5ea671 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useRef, useCallback, useEffect } from "react";
+import { useTheme } from "next-themes";
 import {
   Upload,
   Paperclip,
@@ -19,6 +20,7 @@ import {
   Info,
   Lock,
   Mic,
+  AudioLines,
 } from "lucide-react";
 
 const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
@@ -26,7 +28,9 @@ const FALLBACK_RESPONSE =
   "Tive um problema para responder agora. Tente novamente em alguns instantes.";
 
 const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
-  const [isDarkMode, setIsDarkMode] = useState(true);
+  // Usa tema global fornecido por next-themes
+  const { theme, setTheme } = useTheme();
+  const isDarkMode = theme === "dark";
   const [messages, setMessages] = useState([
     {
       id: 1,
@@ -269,12 +273,12 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               <div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
                 <button
                   type="button"
-                  className={`rounded-full border-primary/40 px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10 border whitespace-nowrap`}
+                  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={() => setIsDarkMode(!isDarkMode)}
+                  onClick={() => setTheme(isDarkMode ? "light" : "dark")}
                   className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
                 >
                   <Moon className="w-5 h-5 sm:w-6 sm:h-6" />
@@ -557,9 +561,9 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
               <button
                 onClick={() => onOpenVoice?.()}
                 className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
-                title="Voice capture"
+                title="Captura de voz"
               >
-                <Mic className="w-4 h-4 sm:w-5 sm:h-5" />
+                <AudioLines className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
               </div>
             </div>

From 77b7fdd5999d580f24d3e4d551d509a432989ab0 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Mon, 24 Nov 2025 00:14:00 -0300
Subject: [PATCH 10/14] style(chat) ajuste na interface do chat

---
 .../components/ui/file-upload-and-chat.tsx    | 117 +++++++++---------
 1 file changed, 58 insertions(+), 59 deletions(-)

diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index f5ea671..8cd4430 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -21,6 +21,7 @@ import {
   Lock,
   Mic,
   AudioLines,
+  Plus,
 } from "lucide-react";
 
 const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
@@ -48,17 +49,14 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
   const chatEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
-  // Auto-resize textarea
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height =
-        textareaRef.current.scrollHeight + "px";
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
     }
   }, [inputValue]);
 
@@ -279,9 +277,10 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
                 </button>
                 <button
                   onClick={() => setTheme(isDarkMode ? "light" : "dark")}
-                  className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
+                  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-5 h-5 sm:w-6 sm:h-6" />
+                  <Moon className="w-4 h-4 sm:w-5 sm:h-5" />
                 </button>
               </div>
             </div>
@@ -510,61 +509,61 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
                 </div>
               )}
 
-              {/* Linha com botões e textarea */}
-              <div className="flex gap-2 sm:gap-3 items-end">
-              <button
-                onClick={() => fileInputRef.current?.click()}
-                className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
-                title="Attach files"
-              >
-                <Paperclip className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                className="hidden"
-                onChange={(e) => handleFileSelect(e.target.files)}
-              />
-
-              <div className="flex-1 relative">
-                <textarea
-                  ref={textareaRef}
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  placeholder="Pergunte qualquer coisa para a Zoe"
-                  rows={1}
-                  className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-lg sm:rounded-xl border resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 max-h-32 text-sm ${themeClasses.inputBg} ${themeClasses.border} ${themeClasses.text} placeholder-gray-400`}
-                  style={{ minHeight: "40px" }}
-                />
-
-                {/* Character count */}
-                {inputValue.length > 0 && (
-                  <div
-                    className={`absolute bottom-1 right-2 text-xs ${themeClasses.textSecondary}`}
+              {/* Input unificado com ícones embutidos */}
+              <div className="flex w-full">
+                <div className={`relative flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} overflow-hidden h-11`}>
+                  {/* Botão anexar (esquerda) */}
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    type="button"
+                    className={`absolute left-2 flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 ${themeClasses.text}`}
+                    aria-label="Anexar arquivos"
                   >
-                    {inputValue.length}
+                    <Plus className="w-4 h-4" />
+                  </button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    className="hidden"
+                    onChange={(e) => handleFileSelect(e.target.files)}
+                  />
+                  {/* Textarea */}
+                  <textarea
+                    ref={textareaRef}
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                    placeholder="Pergunte qualquer coisa para a Zoe"
+                    rows={1}
+                    className={`pl-11 pr-24 w-full h-full bg-transparent resize-none focus:outline-none text-sm leading-snug py-3 ${themeClasses.text} placeholder-gray-400`}
+                    style={{ minHeight: 'auto', overflow: 'hidden' }}
+                  />
+                  {/* Ícones à direita */}
+                  <div className="absolute right-2 flex items-center gap-2">
+                    <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 ${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"
+                      aria-label="Enviar mensagem"
+                    >
+                      <Send className="w-4 h-4" />
+                    </button>
                   </div>
-                )}
-              </div>
-
-              <button
-                onClick={sendMessage}
-                disabled={!inputValue.trim() && uploadedFiles.length === 0}
-                className="p-2 sm:p-3 bg-linear-to-r from-blue-500 to-purple-600 text-white rounded-lg sm:rounded-xl hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-all duration-200 hover:scale-105 disabled:hover:scale-100 shadow-lg"
-                title="Send message"
-              >
-                <Send className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
-
-              <button
-                onClick={() => onOpenVoice?.()}
-                className={`p-2 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
-                title="Captura de voz"
-              >
-                <AudioLines className="w-4 h-4 sm:w-5 sm:h-5" />
-              </button>
+                  {/* Contador de caracteres */}
+                  {inputValue.length > 0 && (
+                    <span className={`absolute bottom-1 right-24 text-[10px] ${themeClasses.textSecondary}`}>{inputValue.length}</span>
+                  )}
+                </div>
               </div>
             </div>
 

From 07c053322488b601bb8932a36d9d4887d68fb997 Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Mon, 24 Nov 2025 21:51:05 -0300
Subject: [PATCH 11/14] style(dashboard) ajuste na responsividade

---
 susconecta/app/paciente/page.tsx              |   8 +-
 .../components/features/dashboard/header.tsx  | 106 ++++++++----------
 .../components/ui/file-upload-and-chat.tsx    |  68 ++++++-----
 3 files changed, 87 insertions(+), 95 deletions(-)

diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index 35a1f9d..b369a50 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/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/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
+          <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">
             <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/70 p-4 sm:p-5 md:p-5 backdrop-blur-sm shadow-sm transition hover:shadow-md">
+          <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">
             <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 />
@@ -1960,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">
-            <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">
+          <aside className="sticky top-24 h-fit md:top-24 z-40">
+            <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">
               <div className="grid grid-cols-2 md:grid-cols-1 gap-1 sm:gap-1.5">
                 <Button
                   variant={tab==='dashboard'?'default':'ghost'}
diff --git a/susconecta/components/features/dashboard/header.tsx b/susconecta/components/features/dashboard/header.tsx
index 160de92..8112742 100644
--- a/susconecta/components/features/dashboard/header.tsx
+++ b/susconecta/components/features/dashboard/header.tsx
@@ -33,105 +33,89 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
   }, [dropdownOpen]);
 
   return (
-    <header className="h-16 border-b border-border bg-background px-6 flex items-center justify-between">
-      <div className="flex flex-row items-center gap-4">
+    <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">
+      <div className="flex items-center gap-3 min-w-0">
         <SidebarTrigger />
-        <div className="flex items-start flex-col justify-center py-2">
-          <h1 className="text-lg font-semibold text-foreground">{title}</h1>
-          <p className="text-muted-foreground">{subtitle}</p>
+        <div className="flex flex-col justify-center leading-tight min-w-0">
+          <h1 className="text-sm sm:text-lg font-semibold text-foreground truncate max-w-[55vw] sm:max-w-none">{title}</h1>
+          {subtitle && (
+            <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 space-x-4">
-  <Button variant="ghost" size="icon" className="hover-primary-blue">
+      <div className="flex items-center gap-2 ml-auto">
+        <Button variant="ghost" size="icon" className="hover-primary-blue hidden xs:flex">
           <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-2 border-border hover:border-primary"
+          <Button
+            variant="ghost"
+            className="relative h-8 w-8 rounded-full border 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+/)
-                      const first = parts[0]?.charAt(0) ?? ''
-                      const second = parts[1]?.charAt(0) ?? ''
-                      return (first + second).toUpperCase() || (email?.charAt(0) ?? 'U').toUpperCase()
-                    }
-                    if (email) return email.charAt(0).toUpperCase()
-                    return 'U'
+              {(() => {
+                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+/)
+                    const first = parts[0]?.charAt(0) ?? ''
+                    const second = parts[1]?.charAt(0) ?? ''
+                    return (first + second).toUpperCase() || (email?.charAt(0) ?? 'U').toUpperCase()
                   }
-
-                  return (
-                    <>
-                      <AvatarImage src={userPhoto || undefined} alt={alt} />
-                      <AvatarFallback className="bg-primary text-primary-foreground font-semibold">{getInitials(user?.name, user?.email)}</AvatarFallback>
-                    </>
-                  )
-                })()
-              }
+                  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-80 bg-popover border border-border rounded-md shadow-lg z-50 text-popover-foreground">
-              <div className="p-4 border-b border-border">
+            <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="p-3 sm:p-4 border-b border-border">
                 <div className="flex flex-col space-y-1">
-                  <p className="text-sm font-semibold leading-none">
+                  <p className="text-xs sm:text-sm font-semibold leading-none">
                     {user?.userType === 'administrador' ? 'Administrador da Clínica' : 'Usuário do Sistema'}
                   </p>
                   {user?.email ? (
-                    <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
+                    <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">Email não disponível</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-primary font-medium">
+                  <p className="text-[10px] sm: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 
+                <button
                   onClick={(e) => {
                     e.preventDefault();
                     setDropdownOpen(false);
                     router.push('/perfil');
                   }}
-                  className="w-full text-left px-4 py-2 text-sm hover:bg-accent cursor-pointer"
+                  className="w-full text-left px-3 sm:px-4 py-2 text-xs sm:text-sm hover:bg-accent cursor-pointer"
                 >
-                   Perfil
+                  Perfil
                 </button>
-                
-                <div className="border-t border-border my-1"></div>
-                <button 
+                <div className="border-t border-border my-1" />
+                <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-4 py-2 text-sm text-destructive hover:bg-destructive/10 cursor-pointer"
+                  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"
                 >
-                   Sair
+                  Sair
                 </button>
               </div>
             </div>
diff --git a/susconecta/components/ui/file-upload-and-chat.tsx b/susconecta/components/ui/file-upload-and-chat.tsx
index 8cd4430..5a7b891 100644
--- a/susconecta/components/ui/file-upload-and-chat.tsx
+++ b/susconecta/components/ui/file-upload-and-chat.tsx
@@ -49,6 +49,23 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
   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]);
@@ -511,12 +528,11 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
 
               {/* Input unificado com ícones embutidos */}
               <div className="flex w-full">
-                <div className={`relative flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} overflow-hidden h-11`}>
-                  {/* Botão anexar (esquerda) */}
+                <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={`absolute left-2 flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 ${themeClasses.text}`}
+                    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" />
@@ -528,41 +544,33 @@ const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
                     className="hidden"
                     onChange={(e) => handleFileSelect(e.target.files)}
                   />
-                  {/* Textarea */}
                   <textarea
                     ref={textareaRef}
                     value={inputValue}
                     onChange={(e) => setInputValue(e.target.value)}
                     onKeyPress={handleKeyPress}
-                    placeholder="Pergunte qualquer coisa para a Zoe"
+                    placeholder={responsivePlaceholder}
                     rows={1}
-                    className={`pl-11 pr-24 w-full h-full bg-transparent resize-none focus:outline-none text-sm leading-snug py-3 ${themeClasses.text} placeholder-gray-400`}
+                    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' }}
                   />
-                  {/* Ícones à direita */}
-                  <div className="absolute right-2 flex items-center gap-2">
-                    <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 ${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"
-                      aria-label="Enviar mensagem"
-                    >
-                      <Send className="w-4 h-4" />
-                    </button>
-                  </div>
-                  {/* Contador de caracteres */}
-                  {inputValue.length > 0 && (
-                    <span className={`absolute bottom-1 right-24 text-[10px] ${themeClasses.textSecondary}`}>{inputValue.length}</span>
-                  )}
+                  <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>

From 70262448fb72fc15e2f791e87e1cda01ee49cbef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?= <jgcmendonca@gmail.com>
Date: Mon, 24 Nov 2025 22:01:14 -0300
Subject: [PATCH 12/14] ajustes

---
 susconecta/app/paciente/resultados/ResultadosClient.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/susconecta/app/paciente/resultados/ResultadosClient.tsx b/susconecta/app/paciente/resultados/ResultadosClient.tsx
index d90f6c1..f03e619 100644
--- a/susconecta/app/paciente/resultados/ResultadosClient.tsx
+++ b/susconecta/app/paciente/resultados/ResultadosClient.tsx
@@ -900,7 +900,7 @@ export default function ResultadosClient() {
             const cidade = medico.city || '—'
             const precoTipoConsulta = tipoConsulta === 'local' ? 'R$ —' : 'R$ —'
             
-            // Usar os próximos 3 horários já memoizados
+            // Usar os próxios 3 horários já memoizados
             const proximos3Horarios = proximosHorariosPorMedico[id] || []
 
             return (

From d966e40608e08cf9c5238ec2c9d891e0efd632f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Gustavo?= <jgcmendonca@gmail.com>
Date: Mon, 24 Nov 2025 22:10:03 -0300
Subject: [PATCH 13/14] ajustes na interface do paciente

---
 susconecta/app/paciente/page.tsx              |  1 -
 .../paciente/resultados/ResultadosClient.tsx  | 23 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/susconecta/app/paciente/page.tsx b/susconecta/app/paciente/page.tsx
index b369a50..22ff30e 100644
--- a/susconecta/app/paciente/page.tsx
+++ b/susconecta/app/paciente/page.tsx
@@ -1698,7 +1698,6 @@ 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>
                   ))}
diff --git a/susconecta/app/paciente/resultados/ResultadosClient.tsx b/susconecta/app/paciente/resultados/ResultadosClient.tsx
index f03e619..d327823 100644
--- a/susconecta/app/paciente/resultados/ResultadosClient.tsx
+++ b/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 } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import {
@@ -31,6 +31,7 @@ import {
   buscarPacientes,
   listarDisponibilidades,
   listarExcecoes,
+  getAvatarPublicUrl,
   type Medico,
 } from '@/lib/api'
 
@@ -66,6 +67,9 @@ export default function ResultadosClient() {
   const [patientId, setPatientId] = useState<string | null>(null)
   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[]>>({})
@@ -250,6 +254,22 @@ 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
@@ -911,6 +931,7 @@ 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>

From 68a03c0bea8b45189147373a33e4e8672a9f1ced Mon Sep 17 00:00:00 2001
From: M-Gabrielly <maria.gabrielly221106@gmail.com>
Date: Tue, 25 Nov 2025 00:22:39 -0300
Subject: [PATCH 14/14] feat(readme): add readme

---
 README.md | 379 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 378 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3aa1915..4beccf8 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,379 @@
-# riseup-squad20
+<div align="center">
 
+# 🏥 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>
\ No newline at end of file