Merge pull request 'feature/ajust-interface-Chat' (#81) from feature/ajust-interface-Chat into develop
Reviewed-on: #81
This commit is contained in:
commit
73530ab1bc
379
README.md
379
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*
|
||||
|
||||
[](https://nextjs.org/)
|
||||
[](https://www.typescriptlang.org/)
|
||||
[](https://react.dev/)
|
||||
[](https://tailwindcss.com/)
|
||||
[](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*
|
||||
|
||||
[](https://nextjs.org/)
|
||||
|
||||
</div>
|
||||
@ -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>
|
||||
|
||||
22
susconecta/app/audio-teste/page.tsx
Normal file
22
susconecta/app/audio-teste/page.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";
|
||||
import { useTheme } from "next-themes";
|
||||
import React from "react";
|
||||
|
||||
export default function VozPage() {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
// Classes condicionais para manter coerência com o chat
|
||||
const bgClass = isDark
|
||||
? "bg-gray-900 text-white"
|
||||
: "bg-gray-50 text-gray-900";
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen flex items-center justify-center p-10 transition-colors ${bgClass}`}>
|
||||
<AIVoiceFlow />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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 />
|
||||
@ -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>
|
||||
))}
|
||||
@ -1960,8 +1959,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'}
|
||||
|
||||
@ -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
|
||||
@ -900,7 +920,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 (
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -46,6 +46,8 @@ export function AIAssistantInterface({
|
||||
const [manualSelection, setManualSelection] = useState(false);
|
||||
const [historyPanelOpen, setHistoryPanelOpen] = useState(false);
|
||||
const messageListRef = useRef<HTMLDivElement | null>(null);
|
||||
const pdfInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const [pdfFile, setPdfFile] = useState<File | null>(null); // arquivo PDF selecionado
|
||||
const history = internalHistory;
|
||||
const historyRef = useRef<ChatSession[]>(history);
|
||||
const baseGreeting = "Olá, eu sou Zoe. Como posso ajudar hoje?";
|
||||
@ -82,17 +84,6 @@ export function AIAssistantInterface({
|
||||
|
||||
const activeMessages = activeSession?.messages ?? [];
|
||||
|
||||
const formatDateTime = useCallback(
|
||||
(value: string) =>
|
||||
new Date(value).toLocaleString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const formatTime = useCallback(
|
||||
(value: string) =>
|
||||
new Date(value).toLocaleTimeString("pt-BR", {
|
||||
@ -102,92 +93,19 @@ export function AIAssistantInterface({
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (history.length === 0) {
|
||||
setActiveSessionId(null);
|
||||
setManualSelection(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!activeSessionId && !manualSelection) {
|
||||
setActiveSessionId(history[history.length - 1].id);
|
||||
return;
|
||||
}
|
||||
|
||||
const exists = history.some((session) => session.id === activeSessionId);
|
||||
if (!exists && !manualSelection) {
|
||||
setActiveSessionId(history[history.length - 1].id);
|
||||
}
|
||||
}, [history, activeSessionId, manualSelection]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!messageListRef.current) return;
|
||||
messageListRef.current.scrollTo({
|
||||
top: messageListRef.current.scrollHeight,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, [activeMessages.length]);
|
||||
|
||||
useEffect(() => {
|
||||
setTypedGreeting("");
|
||||
setTypedIndex(0);
|
||||
setIsTypingGreeting(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isTypingGreeting) return;
|
||||
if (typedIndex >= greetingWords.length) {
|
||||
setIsTypingGreeting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const timeout = window.setTimeout(() => {
|
||||
setTypedGreeting((previous) =>
|
||||
previous
|
||||
? `${previous} ${greetingWords[typedIndex]}`
|
||||
: greetingWords[typedIndex]
|
||||
);
|
||||
setTypedIndex((previous) => previous + 1);
|
||||
}, 260);
|
||||
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [greetingWords, isTypingGreeting, typedIndex]);
|
||||
|
||||
const handleDocuments = () => {
|
||||
if (onOpenDocuments) {
|
||||
onOpenDocuments();
|
||||
return;
|
||||
}
|
||||
console.log("[ZoeIA] Abrir fluxo de documentos");
|
||||
};
|
||||
|
||||
const handleOpenRealtimeChat = () => {
|
||||
if (onOpenChat) {
|
||||
onOpenChat();
|
||||
return;
|
||||
}
|
||||
console.log("[ZoeIA] Abrir chat em tempo real");
|
||||
};
|
||||
|
||||
const buildSessionTopic = useCallback((content: string) => {
|
||||
const normalized = content.trim();
|
||||
if (!normalized) return "Atendimento";
|
||||
return normalized.length > 60 ? `${normalized.slice(0, 57)}…` : normalized;
|
||||
}, []);
|
||||
|
||||
const upsertSession = useCallback(
|
||||
(session: ChatSession) => {
|
||||
if (onAddHistory) {
|
||||
onAddHistory(session);
|
||||
} else {
|
||||
setInternalHistory((previous) => {
|
||||
const index = previous.findIndex((item) => item.id === session.id);
|
||||
setInternalHistory((prev) => {
|
||||
const index = prev.findIndex((s) => s.id === session.id);
|
||||
if (index >= 0) {
|
||||
const updated = [...previous];
|
||||
const updated = [...prev];
|
||||
updated[index] = session;
|
||||
return updated;
|
||||
}
|
||||
return [...previous, session];
|
||||
return [...prev, session];
|
||||
});
|
||||
}
|
||||
setActiveSessionId(session.id);
|
||||
@ -202,8 +120,6 @@ export function AIAssistantInterface({
|
||||
|
||||
const appendAssistantMessage = (content: string) => {
|
||||
const createdAt = new Date().toISOString();
|
||||
const latestSession =
|
||||
historyRef.current.find((session) => session.id === sessionId) ?? baseSession;
|
||||
const assistantMessage: ChatMessage = {
|
||||
id: `msg-assistant-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
sender: "assistant",
|
||||
@ -211,9 +127,12 @@ export function AIAssistantInterface({
|
||||
createdAt,
|
||||
};
|
||||
|
||||
const latestSession =
|
||||
historyRef.current.find((s) => s.id === sessionId) ?? baseSession;
|
||||
|
||||
const updatedSession: ChatSession = {
|
||||
...latestSession,
|
||||
updatedAt: assistantMessage.createdAt,
|
||||
updatedAt: createdAt,
|
||||
messages: [...latestSession.messages, assistantMessage],
|
||||
};
|
||||
|
||||
@ -221,37 +140,50 @@ export function AIAssistantInterface({
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(API_ENDPOINT, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ message: prompt }),
|
||||
});
|
||||
let replyText = "";
|
||||
let response: Response;
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
if (pdfFile) {
|
||||
// Monta FormData conforme especificação: campos 'pdf' e 'message'
|
||||
const formData = new FormData();
|
||||
formData.append("pdf", pdfFile);
|
||||
formData.append("message", prompt);
|
||||
response = await fetch(API_ENDPOINT, {
|
||||
method: "POST",
|
||||
body: formData, // multipart/form-data gerenciado pelo browser
|
||||
});
|
||||
} else {
|
||||
response = await fetch(API_ENDPOINT, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ message: prompt }),
|
||||
});
|
||||
}
|
||||
|
||||
const rawPayload = await response.text();
|
||||
let replyText = "";
|
||||
|
||||
if (rawPayload.trim().length > 0) {
|
||||
if (rawPayload.trim()) {
|
||||
try {
|
||||
const parsed = JSON.parse(rawPayload) as { reply?: unknown };
|
||||
replyText = typeof parsed.reply === "string" ? parsed.reply.trim() : "";
|
||||
} catch (parseError) {
|
||||
console.error("[ZoeIA] Resposta JSON inválida", parseError, rawPayload);
|
||||
const parsed = JSON.parse(rawPayload) as { message?: unknown; reply?: unknown };
|
||||
if (typeof parsed.reply === "string") {
|
||||
replyText = parsed.reply.trim();
|
||||
} else if (typeof parsed.message === "string") {
|
||||
replyText = parsed.message.trim();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("[ZoeIA] Resposta JSON inválida", error, rawPayload);
|
||||
}
|
||||
}
|
||||
|
||||
appendAssistantMessage(replyText || FALLBACK_RESPONSE);
|
||||
} catch (error) {
|
||||
console.error("[ZoeIA] Falha ao obter resposta da API", error);
|
||||
console.error("[ZoeIA] Erro ao buscar resposta da API", error);
|
||||
appendAssistantMessage(FALLBACK_RESPONSE);
|
||||
}
|
||||
},
|
||||
[upsertSession]
|
||||
[upsertSession, pdfFile]
|
||||
);
|
||||
|
||||
const handleSendMessage = () => {
|
||||
@ -266,420 +198,124 @@ export function AIAssistantInterface({
|
||||
createdAt: now.toISOString(),
|
||||
};
|
||||
|
||||
const existingSession = history.find((session) => session.id === activeSessionId) ?? null;
|
||||
|
||||
const sessionToPersist: ChatSession = existingSession
|
||||
const session = history.find((s) => s.id === activeSessionId);
|
||||
const sessionToUse: ChatSession = session
|
||||
? {
|
||||
...existingSession,
|
||||
...session,
|
||||
updatedAt: userMessage.createdAt,
|
||||
topic:
|
||||
existingSession.messages.length === 0
|
||||
? buildSessionTopic(trimmed)
|
||||
: existingSession.topic,
|
||||
messages: [...existingSession.messages, userMessage],
|
||||
messages: [...session.messages, userMessage],
|
||||
}
|
||||
: {
|
||||
id: `session-${now.getTime()}`,
|
||||
startedAt: now.toISOString(),
|
||||
updatedAt: userMessage.createdAt,
|
||||
topic: buildSessionTopic(trimmed),
|
||||
topic: trimmed.length > 60 ? `${trimmed.slice(0, 57)}…` : trimmed,
|
||||
messages: [userMessage],
|
||||
};
|
||||
|
||||
upsertSession(sessionToPersist);
|
||||
console.log("[ZoeIA] Mensagem registrada na Zoe", trimmed);
|
||||
upsertSession(sessionToUse);
|
||||
setQuestion("");
|
||||
setHistoryPanelOpen(false);
|
||||
|
||||
void sendMessageToAssistant(trimmed, sessionToPersist);
|
||||
void sendMessageToAssistant(trimmed, sessionToUse);
|
||||
};
|
||||
|
||||
const RealtimeTriggerButton = () => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleOpenRealtimeChat}
|
||||
className="flex h-12 w-12 items-center justify-center rounded-full bg-white text-foreground shadow-sm transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:bg-zinc-900 dark:text-white"
|
||||
aria-label="Abrir chat Zoe em tempo real"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5"
|
||||
fill="currentColor"
|
||||
aria-hidden
|
||||
>
|
||||
<rect x="4" y="7" width="2" height="10" rx="1" />
|
||||
<rect x="8" y="5" width="2" height="14" rx="1" />
|
||||
<rect x="12" y="7" width="2" height="10" rx="1" />
|
||||
<rect x="16" y="9" width="2" height="6" rx="1" />
|
||||
<rect x="20" y="8" width="2" height="8" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
|
||||
const handleClearHistory = () => {
|
||||
if (onClearHistory) {
|
||||
onClearHistory();
|
||||
} else {
|
||||
setInternalHistory([]);
|
||||
const handleSelectPdf = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file && file.type === "application/pdf") {
|
||||
setPdfFile(file);
|
||||
}
|
||||
setActiveSessionId(null);
|
||||
setManualSelection(false);
|
||||
setQuestion("");
|
||||
setHistoryPanelOpen(false);
|
||||
// Permite re-selecionar o mesmo arquivo
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
const handleSelectSession = useCallback((sessionId: string) => {
|
||||
setManualSelection(true);
|
||||
setActiveSessionId(sessionId);
|
||||
setHistoryPanelOpen(false);
|
||||
}, []);
|
||||
|
||||
const startNewConversation = useCallback(() => {
|
||||
setManualSelection(true);
|
||||
setActiveSessionId(null);
|
||||
setQuestion("");
|
||||
setHistoryPanelOpen(false);
|
||||
}, []);
|
||||
const removePdf = () => setPdfFile(null);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="mx-auto flex w-full max-w-3xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-12">
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: -14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
className="rounded-3xl border border-primary/10 bg-gradient-to-br from-primary/15 via-background to-background/95 p-6 shadow-xl backdrop-blur-sm"
|
||||
>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-3xl bg-gradient-to-br from-primary via-indigo-500 to-sky-500 text-base font-semibold text-white shadow-lg">
|
||||
Zoe
|
||||
</span>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
|
||||
Assistente Clínica Zoe
|
||||
</p>
|
||||
<motion.h1
|
||||
key={typedGreeting}
|
||||
className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl"
|
||||
initial={{ opacity: 0.6 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{gradientGreeting && (
|
||||
<span className="bg-gradient-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
|
||||
{gradientGreeting}
|
||||
{plainGreeting ? " " : ""}
|
||||
</span>
|
||||
)}
|
||||
{plainGreeting && <span className="text-foreground">{plainGreeting}</span>}
|
||||
<span
|
||||
className={`ml-1 inline-block h-6 w-[0.12rem] align-middle ${
|
||||
isTypingGreeting ? "animate-pulse bg-primary" : "bg-transparent"
|
||||
}`}
|
||||
/>
|
||||
</motion.h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-end gap-2 sm:justify-end">
|
||||
{history.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary transition hover:bg-primary/10"
|
||||
onClick={() => setHistoryPanelOpen(true)}
|
||||
>
|
||||
Ver históricos
|
||||
</Button>
|
||||
)}
|
||||
{history.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground transition hover:text-destructive"
|
||||
onClick={handleClearHistory}
|
||||
>
|
||||
Limpar histórico
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="rounded-full border-primary/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary shadow-sm transition hover:bg-primary/10"
|
||||
onClick={startNewConversation}
|
||||
>
|
||||
Novo atendimento
|
||||
</Button>
|
||||
<SimpleThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
<motion.p
|
||||
className="max-w-2xl text-sm text-muted-foreground"
|
||||
initial={{ opacity: 0, y: -6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3, duration: 0.4 }}
|
||||
>
|
||||
Organizamos exames, orientações e tarefas assistenciais em um painel único para acelerar decisões clínicas. Utilize a Zoe para revisar resultados, registrar percepções e alinhar próximos passos com a equipe de saúde.
|
||||
</motion.p>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.15, duration: 0.4 }}
|
||||
className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-2 text-xs text-primary shadow-sm"
|
||||
>
|
||||
<Lock className="h-4 w-4" />
|
||||
<span>Suas informações permanecem criptografadas e seguras com a equipe Zoe.</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.section
|
||||
className="space-y-6 rounded-3xl border border-primary/15 bg-card/70 p-6 shadow-lg backdrop-blur"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.5 }}
|
||||
>
|
||||
<motion.div
|
||||
className="rounded-3xl border border-primary/25 bg-gradient-to-br from-primary/10 via-background/50 to-background p-6 text-sm leading-relaxed text-muted-foreground"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.25, duration: 0.4 }}
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-3 text-primary">
|
||||
<Info className="h-5 w-5" />
|
||||
<span className="text-base font-semibold">Informativo importante</span>
|
||||
</div>
|
||||
<p>
|
||||
A Zoe acompanha toda a jornada clínica, consolida exames e registra orientações para que você tenha clareza em cada etapa do cuidado.
|
||||
As respostas são informativas e complementam a avaliação de um profissional de saúde qualificado.
|
||||
</p>
|
||||
<p className="mt-4 font-medium text-foreground">
|
||||
Em situações de urgência, entre em contato com a equipe médica presencial ou acione os serviços de emergência da sua região.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Button
|
||||
onClick={handleDocuments}
|
||||
size="lg"
|
||||
className="justify-start gap-3 rounded-2xl bg-primary text-primary-foreground shadow-md transition hover:shadow-xl"
|
||||
>
|
||||
<Upload className="h-5 w-5" />
|
||||
Enviar documentos clínicos
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleOpenRealtimeChat}
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="justify-start gap-3 rounded-2xl border-primary/40 bg-background shadow-md transition hover:border-primary hover:text-primary"
|
||||
>
|
||||
<MessageCircle className="h-5 w-5" />
|
||||
Conversar com a equipe Zoe
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-border bg-background/80 p-4 shadow-inner">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Estamos reunindo o histórico da sua jornada. Enquanto isso, você pode anexar exames, enviar dúvidas ou solicitar contato com a equipe Zoe.
|
||||
</p>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<motion.section
|
||||
className="flex flex-col gap-5 rounded-3xl border border-primary/10 bg-card/70 p-6 shadow-lg backdrop-blur"
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.25, duration: 0.45 }}
|
||||
>
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{activeSession ? "Atendimento em andamento" : "Inicie uma conversa"}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-foreground sm:text-base">
|
||||
{activeSession?.topic ?? "O primeiro contato orienta nossas recomendações clínicas"}
|
||||
<div className="w-full max-w-3xl mx-auto p-4 space-y-4">
|
||||
{/* Área superior exibindo PDF selecionado */}
|
||||
{pdfFile && (
|
||||
<div className="flex items-center justify-between border rounded-lg p-3 bg-muted/50">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<Upload className="w-5 h-5 text-primary" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate" title={pdfFile.name}>{pdfFile.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
PDF anexado • {(pdfFile.size / 1024).toFixed(1)} KB
|
||||
</p>
|
||||
</div>
|
||||
{activeSession && (
|
||||
<span className="mt-1 inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary shadow-inner sm:mt-0">
|
||||
Atualizado às {formatTime(activeSession.updatedAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={messageListRef}
|
||||
className="flex max-h-[45vh] min-h-[220px] flex-col gap-3 overflow-y-auto rounded-2xl border border-border/40 bg-background/70 p-4"
|
||||
>
|
||||
{activeMessages.length > 0 ? (
|
||||
activeMessages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm ${
|
||||
message.sender === "user"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "border border-border/60 bg-background text-foreground"
|
||||
}`}
|
||||
>
|
||||
<p className="whitespace-pre-wrap text-sm leading-relaxed">{message.content}</p>
|
||||
<span
|
||||
className={`mt-2 block text-[0.68rem] uppercase tracking-[0.18em] ${
|
||||
message.sender === "user"
|
||||
? "text-primary-foreground/75"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{formatTime(message.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-1 flex-col items-center justify-center rounded-2xl border border-dashed border-primary/25 bg-background/80 px-6 py-12 text-center text-sm text-muted-foreground">
|
||||
<p className="text-sm font-medium text-foreground">Envie sua primeira mensagem</p>
|
||||
<p className="mt-2 max-w-md text-sm text-muted-foreground">
|
||||
Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<div className="flex flex-col gap-3 rounded-3xl border border-border bg-card/70 px-4 py-3 shadow-xl sm:flex-row sm:items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full border border-border/40 bg-background/60 text-muted-foreground transition hover:text-primary"
|
||||
onClick={handleDocuments}
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<Input
|
||||
value={question}
|
||||
onChange={(event) => setQuestion(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
handleSendMessage();
|
||||
}
|
||||
}}
|
||||
placeholder="Pergunte qualquer coisa para a Zoe"
|
||||
className="w-full flex-1 border-none bg-transparent text-sm shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
className="rounded-full bg-primary px-5 text-primary-foreground shadow-md transition hover:bg-primary/90"
|
||||
onClick={handleSendMessage}
|
||||
>
|
||||
Enviar
|
||||
</Button>
|
||||
<RealtimeTriggerButton />
|
||||
</div>
|
||||
<Button variant="secondary" size="sm" onClick={removePdf}>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lista de mensagens */}
|
||||
<div
|
||||
ref={messageListRef}
|
||||
className="border rounded-lg p-4 h-96 overflow-y-auto space-y-3 bg-background"
|
||||
>
|
||||
{activeMessages.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">Nenhuma mensagem ainda. Envie uma pergunta.</p>
|
||||
)}
|
||||
{activeMessages.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}
|
||||
>
|
||||
<div
|
||||
className={`px-3 py-2 rounded-lg max-w-xs text-sm whitespace-pre-wrap ${
|
||||
m.sender === "user" ? "bg-primary text-primary-foreground" : "bg-muted"
|
||||
}`}
|
||||
>
|
||||
{m.content}
|
||||
<div className="mt-1 text-[10px] opacity-70">
|
||||
{formatTime(m.createdAt)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{historyPanelOpen && (
|
||||
<aside className="fixed inset-y-0 right-0 z-[160] w-[min(22rem,80vw)] border-l border-border bg-card shadow-2xl">
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b border-border px-4 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-gradient-to-br from-primary via-sky-500 to-emerald-400 text-sm font-semibold text-white shadow-md">
|
||||
Zoe
|
||||
</span>
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-foreground">Históricos de atendimento</h2>
|
||||
<p className="text-xs text-muted-foreground">{history.length} registro{history.length === 1 ? "" : "s"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full"
|
||||
onClick={() => setHistoryPanelOpen(false)}
|
||||
>
|
||||
<span aria-hidden>×</span>
|
||||
<span className="sr-only">Fechar históricos</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="border-b border-border px-4 py-3">
|
||||
<Button
|
||||
type="button"
|
||||
className="w-full justify-start gap-2 rounded-xl bg-primary text-primary-foreground shadow-md transition hover:shadow-lg"
|
||||
onClick={startNewConversation}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Novo atendimento
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
{history.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Nenhum atendimento registrado ainda. Envie uma mensagem para começar um acompanhamento.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="flex flex-col gap-3 text-sm">
|
||||
{[...history].reverse().map((session) => {
|
||||
const lastMessage = session.messages[session.messages.length - 1];
|
||||
const isActive = session.id === activeSessionId;
|
||||
return (
|
||||
<li key={session.id}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectSession(session.id)}
|
||||
className={`flex w-full flex-col gap-2 rounded-xl border px-3 py-3 text-left shadow-sm transition hover:border-primary hover:shadow-md ${
|
||||
isActive ? "border-primary/60 bg-primary/10" : "border-border/60 bg-background/90"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="font-semibold text-foreground line-clamp-2">{session.topic}</p>
|
||||
<span className="text-xs text-muted-foreground">{formatDateTime(session.updatedAt)}</span>
|
||||
</div>
|
||||
{lastMessage && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">
|
||||
{lastMessage.sender === "assistant" ? "Zoe: " : "Você: "}
|
||||
{lastMessage.content}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-[0.68rem] uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>
|
||||
{session.messages.length} mensagem{session.messages.length === 1 ? "" : "s"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{history.length > 0 && (
|
||||
<div className="border-t border-border px-4 py-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="w-full justify-center text-xs font-medium text-muted-foreground transition hover:text-destructive"
|
||||
onClick={handleClearHistory}
|
||||
>
|
||||
Limpar todo o histórico
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
{/* Input & ações */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => pdfInputRef.current?.click()}
|
||||
>
|
||||
PDF
|
||||
</Button>
|
||||
<input
|
||||
ref={pdfInputRef}
|
||||
type="file"
|
||||
accept="application/pdf"
|
||||
className="hidden"
|
||||
onChange={handleSelectPdf}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
placeholder="Digite sua pergunta"
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSendMessage();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button onClick={handleSendMessage} disabled={!question.trim()}>
|
||||
Enviar
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{pdfFile
|
||||
? "A próxima mensagem será enviada junto ao PDF como multipart/form-data."
|
||||
: "Selecione um PDF para anexar ao próximo envio."}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
196
susconecta/components/ZoeIA/ai-voice-flow.tsx
Normal file
196
susconecta/components/ZoeIA/ai-voice-flow.tsx
Normal file
@ -0,0 +1,196 @@
|
||||
"use client";
|
||||
|
||||
import React, { useRef, useState } from "react";
|
||||
import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Mic, MicOff } from "lucide-react";
|
||||
|
||||
|
||||
// ⚠ Coloque aqui o webhook real do seu n8n
|
||||
const N8N_WEBHOOK_URL = "https://n8n.jonasbomfim.store/webhook/zoe2";
|
||||
|
||||
const AIVoiceFlow: React.FC = () => {
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
|
||||
const [voiceDetected, setVoiceDetected] = useState(false);
|
||||
const [status, setStatus] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [replyAudioUrl, setReplyAudioUrl] = useState<string | null>(null); // URL do áudio retornado
|
||||
const [replyAudio, setReplyAudio] = useState<HTMLAudioElement | null>(null); // elemento de áudio reproduzido
|
||||
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
const chunksRef = useRef<BlobPart[]>([]);
|
||||
|
||||
// 🚀 Inicia gravação
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
setStatus("Iniciando microfone...");
|
||||
|
||||
// Se estava reproduzindo áudio da IA → parar imediatamente
|
||||
if (replyAudio) {
|
||||
replyAudio.pause();
|
||||
replyAudio.currentTime = 0;
|
||||
}
|
||||
setReplyAudio(null);
|
||||
setReplyAudioUrl(null);
|
||||
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
streamRef.current = stream;
|
||||
|
||||
const recorder = new MediaRecorder(stream);
|
||||
mediaRecorderRef.current = recorder;
|
||||
chunksRef.current = [];
|
||||
|
||||
recorder.ondataavailable = (e) => {
|
||||
if (e.data.size > 0) chunksRef.current.push(e.data);
|
||||
};
|
||||
|
||||
recorder.onstop = async () => {
|
||||
setStatus("Processando áudio...");
|
||||
const blob = new Blob(chunksRef.current, { type: "audio/webm" });
|
||||
await sendToN8N(blob);
|
||||
chunksRef.current = [];
|
||||
};
|
||||
|
||||
recorder.start();
|
||||
setIsRecording(true);
|
||||
setStatus("Gravando... fale algo.");
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("Erro ao acessar microfone.");
|
||||
}
|
||||
};
|
||||
|
||||
// ⏹ Finaliza gravação
|
||||
const stopRecording = () => {
|
||||
try {
|
||||
setIsRecording(false);
|
||||
setStatus("Finalizando gravação...");
|
||||
|
||||
if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
|
||||
mediaRecorderRef.current.stop();
|
||||
}
|
||||
|
||||
if (streamRef.current) {
|
||||
streamRef.current.getTracks().forEach((t) => t.stop());
|
||||
streamRef.current = null;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("Erro ao parar gravação.");
|
||||
}
|
||||
};
|
||||
|
||||
// 📤 Envia áudio ao N8N e recebe o MP3
|
||||
const sendToN8N = async (audioBlob: Blob) => {
|
||||
try {
|
||||
setIsSending(true);
|
||||
setStatus("Enviando áudio para IA...");
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("audio", audioBlob, "voz.webm");
|
||||
|
||||
const resp = await fetch(N8N_WEBHOOK_URL, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
throw new Error("N8N retornou erro");
|
||||
}
|
||||
|
||||
const replyBlob = await resp.blob();
|
||||
|
||||
// gera url local
|
||||
const url = URL.createObjectURL(replyBlob);
|
||||
setReplyAudioUrl(url);
|
||||
|
||||
const audio = new Audio(url);
|
||||
setReplyAudio(audio);
|
||||
|
||||
setStatus("Reproduzindo resposta...");
|
||||
audio.play().catch(() => {});
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError("Erro ao enviar/receber áudio.");
|
||||
} finally {
|
||||
setIsSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleRecording = () => {
|
||||
if (isRecording) stopRecording();
|
||||
else startRecording();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-6 p-6">
|
||||
|
||||
{/* ORB — agora com comportamento inteligente */}
|
||||
<div className="w-72 h-72 relative">
|
||||
<VoicePoweredOrb
|
||||
className="w-full h-full"
|
||||
|
||||
/* 🔥 LÓGICA DO ORB:
|
||||
- Gravando? → usa microfone
|
||||
- Não gravando, mas tem MP3? → usa áudio da IA
|
||||
- Caso contrário → parado (none)
|
||||
*/
|
||||
{...({ sourceMode:
|
||||
isRecording
|
||||
? "microphone"
|
||||
: replyAudio
|
||||
? "playback"
|
||||
: "none"
|
||||
} as any)}
|
||||
|
||||
audioElement={replyAudio}
|
||||
onVoiceDetected={setVoiceDetected}
|
||||
/>
|
||||
|
||||
{isRecording && (
|
||||
<span className="absolute bottom-4 right-4 rounded-full bg-black/70 px-3 py-1 text-xs font-medium text-white shadow-lg">
|
||||
{voiceDetected ? "Ouvindo…" : "Aguardando voz…"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 🟣 Botão de gravação */}
|
||||
<Button
|
||||
onClick={toggleRecording}
|
||||
variant={isRecording ? "destructive" : "default"}
|
||||
size="lg"
|
||||
disabled={isSending}
|
||||
>
|
||||
{isRecording ? (
|
||||
<>
|
||||
<MicOff className="w-5 h-5 mr-2" /> Parar gravação
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Mic className="w-5 h-5 mr-2" /> Começar gravação
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* STATUS */}
|
||||
{status && <p className="text-sm text-muted-foreground">{status}</p>}
|
||||
{error && <p className="text-sm text-red-500">{error}</p>}
|
||||
|
||||
{/* PLAYER MANUAL DA RESPOSTA */}
|
||||
{replyAudioUrl && (
|
||||
<div className="w-full max-w-md mt-2 flex flex-col items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Última resposta da IA:</span>
|
||||
<audio controls src={replyAudioUrl} className="w-full" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AIVoiceFlow;
|
||||
5
susconecta/components/ZoeIA/demo-file-upload.tsx
Normal file
5
susconecta/components/ZoeIA/demo-file-upload.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import Component from "@/components/ui/file-upload-and-chat";
|
||||
|
||||
export default function FileUploadChat() {
|
||||
return <Component />;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1,22 +1,19 @@
|
||||
|
||||
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { ArrowLeft, Mic, MicOff, Sparkles } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { ArrowLeft, Sparkles } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AIAssistantInterface,
|
||||
ChatSession,
|
||||
} from "@/components/ZoeIA/ai-assistant-interface";
|
||||
import { VoicePoweredOrb } from "@/components/ZoeIA/voice-powered-orb";
|
||||
import FileUploadChat from "@/components/ui/file-upload-and-chat";
|
||||
|
||||
// 👉 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);
|
||||
const [history, setHistory] = useState<ChatSession[]>([]);
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
|
||||
useEffect(() => {
|
||||
if (!assistantOpen && !realtimeOpen) return;
|
||||
@ -33,7 +30,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"
|
||||
/>
|
||||
),
|
||||
[]
|
||||
@ -46,87 +43,45 @@ export function ChatWidget() {
|
||||
const closeRealtime = () => {
|
||||
setRealtimeOpen(false);
|
||||
setAssistantOpen(true);
|
||||
setIsRecording(false);
|
||||
setVoiceDetected(false);
|
||||
};
|
||||
|
||||
const toggleRecording = () => {
|
||||
setIsRecording((prev) => {
|
||||
const next = !prev;
|
||||
if (!next) {
|
||||
setVoiceDetected(false);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleOpenDocuments = () => {
|
||||
console.log("[ChatWidget] Abrindo fluxo de documentos");
|
||||
closeAssistant();
|
||||
};
|
||||
|
||||
const handleOpenChat = () => {
|
||||
console.log("[ChatWidget] Encaminhando para chat em tempo real");
|
||||
setAssistantOpen(false);
|
||||
openRealtime();
|
||||
};
|
||||
|
||||
const handleUpsertHistory = (session: ChatSession) => {
|
||||
setHistory((previous) => {
|
||||
const index = previous.findIndex((item) => item.id === session.id);
|
||||
if (index >= 0) {
|
||||
const updated = [...previous];
|
||||
updated[index] = session;
|
||||
return updated;
|
||||
}
|
||||
return [...previous, session];
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearHistory = () => {
|
||||
setHistory([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ----------------- ASSISTANT PANEL ----------------- */}
|
||||
{assistantOpen && (
|
||||
<div
|
||||
id="ai-assistant-overlay"
|
||||
className="fixed inset-0 z-[100] flex flex-col bg-background"
|
||||
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 border-border px-4 py-3">
|
||||
<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"
|
||||
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 />
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* ----------------- REALTIME VOICE PANEL ----------------- */}
|
||||
{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 />
|
||||
@ -134,57 +89,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">
|
||||
|
||||
586
susconecta/components/ui/file-upload-and-chat.tsx
Normal file
586
susconecta/components/ui/file-upload-and-chat.tsx
Normal file
@ -0,0 +1,586 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useCallback, useEffect } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import {
|
||||
Upload,
|
||||
Paperclip,
|
||||
Send,
|
||||
Moon,
|
||||
Sun,
|
||||
X,
|
||||
FileText,
|
||||
ImageIcon,
|
||||
Video,
|
||||
Music,
|
||||
Archive,
|
||||
MessageCircle,
|
||||
Bot,
|
||||
User,
|
||||
Info,
|
||||
Lock,
|
||||
Mic,
|
||||
AudioLines,
|
||||
Plus,
|
||||
} from "lucide-react";
|
||||
|
||||
const API_ENDPOINT = "https://n8n.jonasbomfim.store/webhook/zoe2";
|
||||
const FALLBACK_RESPONSE =
|
||||
"Tive um problema para responder agora. Tente novamente em alguns instantes.";
|
||||
|
||||
const FileUploadChat = ({ onOpenVoice }: { onOpenVoice?: () => void }) => {
|
||||
// Usa tema global fornecido por next-themes
|
||||
const { theme, setTheme } = useTheme();
|
||||
const isDarkMode = theme === "dark";
|
||||
const [messages, setMessages] = useState([
|
||||
{
|
||||
id: 1,
|
||||
type: "ai",
|
||||
content:
|
||||
"Compartilhe uma dúvida, exame ou orientação que deseja revisar. A Zoe registra o pedido e te retorna com um resumo organizado para a equipe de saúde.",
|
||||
timestamp: new Date(),
|
||||
},
|
||||
]);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [uploadedFiles, setUploadedFiles] = useState<any[]>([]);
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
const [isTyping, setIsTyping] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const chatEndRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Placeholder responsivo (não quebra, adapta o texto)
|
||||
const [responsivePlaceholder, setResponsivePlaceholder] = useState("Pergunte qualquer coisa para a Zoe");
|
||||
|
||||
const computePlaceholder = (w: number) => {
|
||||
if (w < 340) return "Pergunte à Zoe"; // ultra pequeno
|
||||
if (w < 400) return "Pergunte algo à Zoe"; // pequeno
|
||||
if (w < 520) return "Pergunte algo para a Zoe"; // médio estreito
|
||||
return "Pergunte qualquer coisa para a Zoe"; // normal
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const update = () => setResponsivePlaceholder(computePlaceholder(window.innerWidth));
|
||||
update();
|
||||
window.addEventListener("resize", update);
|
||||
return () => window.removeEventListener("resize", update);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
textareaRef.current.style.height = "auto";
|
||||
textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
|
||||
}
|
||||
}, [inputValue]);
|
||||
|
||||
const getFileIcon = (fileName: string) => {
|
||||
const ext = fileName.split(".").pop()?.toLowerCase();
|
||||
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || ""))
|
||||
return <ImageIcon className="w-4 h-4" aria-hidden="true" />;
|
||||
if (["mp4", "avi", "mkv", "mov", "webm"].includes(ext || ""))
|
||||
return <Video className="w-4 h-4" aria-hidden="true" />;
|
||||
if (["mp3", "wav", "flac", "ogg", "aac"].includes(ext || ""))
|
||||
return <Music className="w-4 h-4" aria-hidden="true" />;
|
||||
if (["zip", "rar", "7z", "tar", "gz"].includes(ext || ""))
|
||||
return <Archive className="w-4 h-4" aria-hidden="true" />;
|
||||
return <FileText className="w-4 h-4" aria-hidden="true" />;
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes === 0) return "0 Bytes";
|
||||
const k = 1024;
|
||||
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
};
|
||||
|
||||
const handleFileSelect = (files: FileList | null) => {
|
||||
if (!files) return;
|
||||
const newFiles = Array.from(files).map((file) => ({
|
||||
id: Date.now() + Math.random(),
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
file: file,
|
||||
}));
|
||||
setUploadedFiles((prev) => [...prev, ...newFiles]);
|
||||
// Removido: mensagem de sistema de arquivos adicionados (não desejada na UI)
|
||||
};
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragOver(false);
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
handleFileSelect(files);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragOver(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragOver(false);
|
||||
}, []);
|
||||
|
||||
const removeFile = (fileId: number) => {
|
||||
setUploadedFiles((prev) => prev.filter((file) => file.id !== fileId));
|
||||
};
|
||||
|
||||
|
||||
const generateAIResponse = useCallback(
|
||||
async (userMessage: string, files: any[]) => {
|
||||
try {
|
||||
const pdfFile = files.find((file) => file.name.toLowerCase().endsWith(".pdf"));
|
||||
|
||||
let response: Response;
|
||||
if (pdfFile) {
|
||||
const formData = new FormData();
|
||||
formData.append("pdf", pdfFile.file); // campo 'pdf'
|
||||
formData.append("message", userMessage); // campo 'message'
|
||||
response = await fetch(API_ENDPOINT, {
|
||||
method: "POST",
|
||||
body: formData, // multipart/form-data automático
|
||||
});
|
||||
} else {
|
||||
response = await fetch(API_ENDPOINT, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: userMessage }),
|
||||
});
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
let replyText = "";
|
||||
|
||||
try {
|
||||
const parsed = await response.json(); // ← já trata como JSON direto
|
||||
if (typeof parsed.message === "string") {
|
||||
replyText = parsed.message.trim();
|
||||
} else if (typeof parsed.reply === "string") {
|
||||
replyText = parsed.reply.trim();
|
||||
} else {
|
||||
console.warn(
|
||||
"[Zoe] Nenhum campo 'message' ou 'reply' na resposta:",
|
||||
parsed
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Zoe] Erro ao processar resposta JSON:", err);
|
||||
}
|
||||
|
||||
return replyText || FALLBACK_RESPONSE;
|
||||
} catch (error) {
|
||||
console.error("[FileUploadChat] Failed to get API response", error);
|
||||
return FALLBACK_RESPONSE;
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const sendMessage = useCallback(async () => {
|
||||
if (inputValue.trim() || uploadedFiles.length > 0) {
|
||||
const newMessage = {
|
||||
id: Date.now(),
|
||||
type: "user",
|
||||
content: inputValue.trim(),
|
||||
files: [...uploadedFiles],
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, newMessage]);
|
||||
|
||||
const messageContent = inputValue.trim();
|
||||
const attachedFiles = [...uploadedFiles];
|
||||
|
||||
setInputValue("");
|
||||
setUploadedFiles([]);
|
||||
setIsTyping(true);
|
||||
|
||||
// Get AI response from API
|
||||
const aiResponseContent = await generateAIResponse(
|
||||
messageContent,
|
||||
attachedFiles
|
||||
);
|
||||
|
||||
const aiResponse = {
|
||||
id: Date.now() + 1,
|
||||
type: "ai",
|
||||
content: aiResponseContent,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, aiResponse]);
|
||||
setIsTyping(false);
|
||||
}
|
||||
}, [inputValue, uploadedFiles, generateAIResponse]);
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
};
|
||||
|
||||
const themeClasses = {
|
||||
background: isDarkMode ? "bg-gray-900" : "bg-gray-50",
|
||||
cardBg: isDarkMode ? "bg-gray-800" : "bg-white",
|
||||
text: isDarkMode ? "text-white" : "text-gray-900",
|
||||
textSecondary: isDarkMode ? "text-gray-300" : "text-gray-600",
|
||||
border: isDarkMode ? "border-gray-700" : "border-gray-200",
|
||||
inputBg: isDarkMode ? "bg-gray-700" : "bg-gray-100",
|
||||
uploadArea: isDragOver
|
||||
? isDarkMode
|
||||
? "bg-blue-900/50 border-blue-500"
|
||||
: "bg-blue-50 border-blue-400"
|
||||
: isDarkMode
|
||||
? "bg-gray-700 border-gray-600"
|
||||
: "bg-gray-50 border-gray-300",
|
||||
userMessage: isDarkMode ? "bg-blue-600" : "bg-blue-500",
|
||||
aiMessage: isDarkMode ? "bg-gray-700" : "bg-gray-200",
|
||||
systemMessage: isDarkMode
|
||||
? "bg-yellow-900/30 text-yellow-200"
|
||||
: "bg-yellow-100 text-yellow-800",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-full min-h-screen transition-colors duration-300 ${themeClasses.background}`}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto p-3 sm:p-6">
|
||||
{/* Main Card - Zoe Assistant Section */}
|
||||
<div
|
||||
className={`rounded-2xl sm:rounded-3xl shadow-xl border bg-linear-to-br ${
|
||||
isDarkMode
|
||||
? "from-primary/15 via-gray-800 to-gray-900"
|
||||
: "from-blue-50 via-white to-indigo-50"
|
||||
} p-4 sm:p-8 ${
|
||||
isDarkMode ? "border-gray-700" : "border-blue-200"
|
||||
} mb-4 sm:mb-6 backdrop-blur-sm`}
|
||||
>
|
||||
<div className="flex flex-col gap-4 sm:gap-8">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col gap-3 sm:gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
<span className="flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center rounded-2xl sm:rounded-3xl bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-sm sm:text-base font-semibold text-white shadow-lg">
|
||||
Zoe
|
||||
</span>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] sm:tracking-[0.24em] text-primary/80">
|
||||
Assistente Clínica Zoe
|
||||
</p>
|
||||
<h1 className="text-lg sm:text-3xl font-semibold tracking-tight text-foreground">
|
||||
<span className="bg-linear-to-r from-sky-400 via-primary to-indigo-500 bg-clip-text text-transparent">
|
||||
Olá, eu sou Zoe.
|
||||
</span>
|
||||
<span className="text-foreground"> Como posso ajudar?</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`rounded-full px-2 sm:px-4 py-1 sm:py-2 text-xs font-semibold uppercase tracking-[0.12em] sm:tracking-[0.18em] whitespace-nowrap transition shadow-sm border ${isDarkMode ? "border-primary/40 text-primary hover:bg-primary/10" : "bg-primary border-primary text-white hover:bg-primary/90"}`}
|
||||
>
|
||||
Novo atendimento
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTheme(isDarkMode ? "light" : "dark")}
|
||||
className={`p-1.5 sm:p-2 rounded-lg sm:rounded-lg border transition-all duration-200 hover:scale-105 hover:shadow-lg ${themeClasses.border} ${themeClasses.inputBg} ${themeClasses.text}`}
|
||||
aria-label="Alternar tema"
|
||||
>
|
||||
<Moon className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p
|
||||
className={`max-w-3xl text-xs sm:text-sm leading-relaxed ${
|
||||
isDarkMode ? "text-muted-foreground" : "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
Organizamos exames, orientações e tarefas assistenciais em um
|
||||
painel único para acelerar decisões clínicas. Utilize a Zoe para
|
||||
revisar resultados, registrar percepções e alinhar próximos passos
|
||||
com a equipe de saúde.
|
||||
</p>
|
||||
|
||||
{/* Security Info */}
|
||||
<div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 sm:px-4 py-1 sm:py-2 text-xs text-primary shadow-sm">
|
||||
<Lock className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
|
||||
<span className="text-xs sm:text-sm">
|
||||
Suas informações permanecem criptografadas e seguras com a
|
||||
equipe Zoe.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Info Section */}
|
||||
<div
|
||||
className={`rounded-2xl sm:rounded-3xl border bg-linear-to-br ${
|
||||
isDarkMode
|
||||
? "border-primary/25 from-primary/10 via-background/50 to-background text-muted-foreground"
|
||||
: "border-blue-200 from-blue-50 via-white to-indigo-50 text-gray-700"
|
||||
} p-4 sm:p-6 text-xs sm:text-sm leading-relaxed`}
|
||||
>
|
||||
<div
|
||||
className={`mb-3 sm:mb-4 flex items-center gap-2 sm:gap-3 ${
|
||||
isDarkMode ? "text-primary" : "text-blue-600"
|
||||
}`}
|
||||
>
|
||||
<Info className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
|
||||
<span className="text-sm sm:text-base font-semibold">
|
||||
Informativo importante
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
className={`mb-3 sm:mb-4 text-xs sm:text-sm ${
|
||||
isDarkMode ? "text-muted-foreground" : "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
A Zoe acompanha toda a jornada clínica, consolida exames e
|
||||
registra orientações para que você tenha clareza em cada etapa
|
||||
do cuidado. As respostas são informativas e complementam a
|
||||
avaliação de um profissional de saúde qualificado.
|
||||
</p>
|
||||
<p
|
||||
className={`font-medium text-xs sm:text-sm ${
|
||||
isDarkMode ? "text-foreground" : "text-gray-900"
|
||||
}`}
|
||||
>
|
||||
Em situações de urgência, entre em contato com a equipe médica
|
||||
presencial ou acione os serviços de emergência da sua região.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* (Removido) Lista de arquivos antiga – agora exibida sobre o input */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chat Area */}
|
||||
<div
|
||||
className={`rounded-2xl shadow-xl border ${themeClasses.cardBg} ${themeClasses.border}`}
|
||||
>
|
||||
{/* Chat Header */}
|
||||
<div
|
||||
className={`px-4 sm:px-6 py-3 sm:py-4 border-b ${themeClasses.border}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full animate-pulse"></div>
|
||||
<h3
|
||||
className={`font-semibold text-sm sm:text-base ${themeClasses.text}`}
|
||||
>
|
||||
Chat with AI Assistant
|
||||
</h3>
|
||||
<span
|
||||
className={`text-xs sm:text-sm ${themeClasses.textSecondary}`}
|
||||
>
|
||||
Online
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chat Messages */}
|
||||
<div className="h-64 sm:h-96 overflow-y-auto p-4 sm:p-6 space-y-3 sm:space-y-4">
|
||||
{messages.map((message: any) => (
|
||||
<div
|
||||
key={message.id}
|
||||
className={`flex ${
|
||||
message.type === "user"
|
||||
? "justify-end"
|
||||
: message.type === "system"
|
||||
? "justify-center"
|
||||
: "justify-start"
|
||||
}`}
|
||||
>
|
||||
{message.type !== "system" && message.type === "ai" && (
|
||||
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
|
||||
Z
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`max-w-xs sm:max-w-sm lg:max-w-md ${
|
||||
message.type === "user"
|
||||
? `${themeClasses.userMessage} text-white ml-3`
|
||||
: message.type === "ai"
|
||||
? `${themeClasses.aiMessage} ${themeClasses.text}`
|
||||
: `${themeClasses.systemMessage} text-xs`
|
||||
} px-4 py-3 rounded-2xl ${
|
||||
message.type === "user"
|
||||
? "rounded-br-md"
|
||||
: message.type === "ai"
|
||||
? "rounded-bl-md"
|
||||
: "rounded-lg"
|
||||
}`}
|
||||
>
|
||||
{message.content && (
|
||||
<p className="wrap-break-word text-xs sm:text-sm">
|
||||
{message.content}
|
||||
</p>
|
||||
)}
|
||||
{message.files && message.files.length > 0 && (
|
||||
<div className="mt-1 sm:mt-2 space-y-1">
|
||||
{message.files.map((file: any) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex items-center gap-1 sm:gap-2 text-xs opacity-90 bg-black/10 rounded px-2 py-1"
|
||||
>
|
||||
{getFileIcon(file.name)}
|
||||
<span className="truncate text-xs">{file.name}</span>
|
||||
<span className="text-xs">
|
||||
({formatFileSize(file.size)})
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs opacity-70 mt-1 sm:mt-2">
|
||||
{message.timestamp.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{message.type === "user" && (
|
||||
<div
|
||||
className={`w-8 h-8 rounded-full ml-3 flex items-center justify-center ${themeClasses.userMessage}`}
|
||||
>
|
||||
<User className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Typing Indicator */}
|
||||
{isTyping && (
|
||||
<div className="flex justify-start">
|
||||
<span className="flex h-7 w-7 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary via-indigo-500 to-sky-500 text-xs font-semibold text-white shadow-lg mr-2 sm:mr-3">
|
||||
Z
|
||||
</span>
|
||||
<div
|
||||
className={`px-4 py-3 rounded-2xl rounded-bl-md ${themeClasses.aiMessage}`}
|
||||
>
|
||||
<div className="flex space-x-1">
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
|
||||
<div
|
||||
className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
|
||||
style={{ animationDelay: "0.1s" }}
|
||||
></div>
|
||||
<div
|
||||
className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
|
||||
style={{ animationDelay: "0.2s" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={chatEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Chat Input */}
|
||||
<div className={`border-t p-3 sm:p-4 ${themeClasses.border}`}>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Anexos selecionados (chips) */}
|
||||
{uploadedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto pb-1">
|
||||
{uploadedFiles.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className={`group flex items-center gap-2 px-3 py-2 rounded-lg border ${themeClasses.border} ${themeClasses.inputBg} relative`}
|
||||
>
|
||||
{getFileIcon(file.name)}
|
||||
<div className="min-w-0 max-w-[160px]">
|
||||
<p className={`text-xs font-medium truncate ${themeClasses.text}`}>
|
||||
{file.name}
|
||||
</p>
|
||||
<p className={`text-[10px] leading-tight ${themeClasses.textSecondary}`}>
|
||||
{formatFileSize(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => removeFile(file.id)}
|
||||
className={`p-1 rounded-full transition-colors ${themeClasses.textSecondary} hover:text-red-500 hover:bg-red-500/20`}
|
||||
aria-label="Remover arquivo"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={() => setUploadedFiles([])}
|
||||
className={`ml-auto text-[11px] px-2 py-1 rounded-md ${themeClasses.textSecondary} hover:text-red-500 transition-colors`}
|
||||
>
|
||||
Limpar tudo
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input unificado com ícones embutidos */}
|
||||
<div className="flex w-full">
|
||||
<div className={`flex items-center w-full rounded-full border ${themeClasses.border} ${themeClasses.inputBg} h-11 px-2 gap-2`}>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
type="button"
|
||||
className={`flex items-center justify-center h-7 w-7 rounded-full transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
|
||||
aria-label="Anexar arquivos"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => handleFileSelect(e.target.files)}
|
||||
/>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder={responsivePlaceholder}
|
||||
rows={1}
|
||||
className={`flex-1 bg-transparent resize-none focus:outline-none leading-snug py-3 pr-2 ${themeClasses.text} placeholder-gray-400 text-[13px] sm:text-sm placeholder:text-[12px] sm:placeholder:text-sm whitespace-nowrap overflow-hidden text-ellipsis placeholder:overflow-hidden placeholder:text-ellipsis`}
|
||||
style={{ minHeight: 'auto', overflow: 'hidden' }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => onOpenVoice?.()}
|
||||
type="button"
|
||||
className={`flex items-center justify-center h-8 w-8 rounded-full border ${themeClasses.border} transition-colors hover:bg-primary/20 flex-shrink-0 ${themeClasses.text}`}
|
||||
aria-label="Entrada de voz"
|
||||
>
|
||||
<AudioLines className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={sendMessage}
|
||||
disabled={!inputValue.trim() && uploadedFiles.length === 0}
|
||||
type="button"
|
||||
className="flex items-center justify-center h-8 w-8 rounded-full bg-linear-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed transition-colors shadow-md flex-shrink-0"
|
||||
aria-label="Enviar mensagem"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileUploadChat;
|
||||
275
susconecta/lib/laudo-exemplos.ts
Normal file
275
susconecta/lib/laudo-exemplos.ts
Normal file
@ -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}`
|
||||
* };
|
||||
*/
|
||||
193
susconecta/lib/laudo-notification.ts
Normal file
193
susconecta/lib/laudo-notification.ts
Normal file
@ -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;
|
||||
}
|
||||
148
susconecta/lib/reportService.ts
Normal file
148
susconecta/lib/reportService.ts
Normal file
@ -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 };
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
14
susconecta/types/lamejs.d.ts
vendored
Normal file
14
susconecta/types/lamejs.d.ts
vendored
Normal file
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user