ani67/docs/CHAT_MEDICAL_ALERT_BANNER.md

Chat Medical Alert Banner - Implementation

Objetivo

Mostrar banner persistente cuando chatbot detecta RECOMENDADO o URGENTE, permitiendo agendar cita con reporte generado automáticamente.

Flujo Nuevo

Mensaje con RECOMENDADO/URGENTE
→ Banner sticky top: "⚠️ Consulta [recomendada/urgente]"
→ [Agendar Cita Ahora] [Continuar Conversación]
→ Si Agendar: genera reporte + abre modal + asocia reportId
→ Si Continuar: banner permanece visible
→ Al mensaje 3 o agendar: fin + reporte

Tasks

✅ Completadas

1. Nuevo Componente: MedicalAlertBanner.tsx

• ✅ Crear /src/components/chatbot/MedicalAlertBanner.tsx
• ✅ Props: alert, onSchedule, onDismiss, isScheduling
• ✅ Sticky top, colores según alert type
• ✅ Botones: "Agendar Cita Ahora" + "X" (dismiss)

2. Modificar useChat.ts

• ✅ State: medicalAlertDetected: MedicalAlert | null
• ✅ State: showMedicalAlertBanner: boolean
• ✅ State: isSchedulingFromAlert: boolean
• ✅ Logic: detectar cuando response.medicalAlert !== "NO_AGENDAR"
• ✅ Función: handleScheduleFromAlert(callback) → genera reporte + callback con reportId
• ✅ Función: dismissMedicalAlertBanner()
• ✅ Reset states al limpiar chat

3. Modificar ChatInterface.tsx

• ✅ Import MedicalAlertBanner
• ✅ State: appointmentReportId
• ✅ Renderizar banner después de ChatHeader
• ✅ Handler: handleScheduleFromAlertClick() → genera reporte y abre modal
• ✅ Pasar reportId al AppointmentModalFromChat

4. Modificar ChatMessage.tsx

• ✅ Remover import de MedicalAlert
• ✅ Quitar render de <MedicalAlert /> individual
• ✅ Solo mostrar texto de respuesta

5. Modificar AppointmentModalFromChat.tsx

• ✅ Prop: reportId?: string
• ✅ Incluir reportId en payload al crear cita

6. API: /api/appointments/route.ts

• ✅ Agregar campo reportId opcional en body
• ✅ Asociar en Prisma create con spread operator

7. Schema Prisma

• ✅ Agregar campo reportId String? a Appointment
• ✅ Migration ejecutada: 20251013144104_add_report_id_to_appointments

8. Testing

• ✅ Dev server corriendo sin errores
• 🔄 Pendiente testing manual del flujo completo

🔄 En Progreso

Ninguna

📋 Pendientes Testing Manual

• Enviar mensaje que genere alerta RECOMENDADO
• Verificar que banner aparezca sticky top
• Click en "Agendar Cita Ahora"
• Verificar que se genera reporte
• Verificar que modal se abre con reportId
• Crear cita y verificar que reportId se guarda en DB
• Probar dismiss del banner
• Probar con alerta URGENTE
• Verificar que banner persiste entre mensajes

Archivos a Modificar

NEW: src/components/chatbot/MedicalAlertBanner.tsx
MOD: src/hooks/useChat.ts
MOD: src/components/chatbot/ChatInterface.tsx
MOD: src/components/chatbot/ChatMessage.tsx
MOD: src/components/chatbot/AppointmentModalFromChat.tsx
MOD: src/app/api/appointments/route.ts
CHK: prisma/schema.prisma

Notas de Implementación

• Banner NO usa toast, es componente persistente
• Dismiss temporal: solo oculta UI, state se mantiene
• Al agendar desde banner: misma lógica que reset con reporte
• ReportId se pasa al modal, no se crea nueva cita sin contexto

Decisiones de Diseño

• Banner sticky top (no dentro de mensajes)
• Colores: amarillo (RECOMENDADO), rojo (URGENTE)
• Solo aparece una vez por sesión de chat
• Al generar reporte, se asocia automáticamente a cita