ani67/guides/CHATBOT.md

Componentes del Chatbot

Esta carpeta contiene todos los componentes relacionados con la interfaz del chatbot médico, organizados de manera modular para facilitar el mantenimiento y la escalabilidad.

Estructura de Archivos

Componentes Principales

• ChatInterface.tsx - Componente principal que orquesta todos los demás componentes
• types.ts - Definiciones de tipos TypeScript para el chatbot

Componentes de UI

• ChatHeader.tsx - Header con información de estado y controles
• WelcomeMessage.tsx - Mensaje de bienvenida inicial
• SuggestedPrompts.tsx - Sugerencias de prompts rápidos
• ChatMessages.tsx - Contenedor de mensajes con scroll automático
• ChatMessage.tsx - Componente individual para cada mensaje
• ChatInput.tsx - Área de entrada de mensajes
• CompletedState.tsx - Estado cuando la consulta está completada
• ResetButton.tsx - Botón para reiniciar la consulta

Modales

• ReportModal.tsx - Modal para mostrar el reporte generado
• ResetConfirmationModal.tsx - Modal de confirmación para reset

Utilidades

• MessageRenderer.tsx - Funciones para renderizar contenido con markdown básico

Hooks Relacionados

Los hooks se encuentran en src/hooks/:

• useChat.ts - Hook principal que maneja toda la lógica del chat
• useChatEffects.ts - Hook para efectos secundarios como toasts

Uso

import { ChatInterface } from "@/components/chatbot";

export default function MyPage() {
  return <ChatInterface />;
}

Características

• ✅ Componentes modulares y reutilizables
• ✅ Separación clara de responsabilidades
• ✅ Hooks personalizados para la lógica de negocio
• ✅ Tipos TypeScript bien definidos
• ✅ Fácil mantenimiento y escalabilidad
• ✅ Renderizado de markdown básico
• ✅ Streaming de mensajes
• ✅ Gestión de estado con localStorage
• ✅ Generación automática de reportes

Mejoras Implementadas

1. Modularización: El componente original de 868 líneas se dividió en múltiples componentes más pequeños
2. Hooks Personalizados: La lógica de negocio se extrajo a hooks reutilizables
3. Tipos TypeScript: Definiciones claras de tipos para mejor desarrollo
4. Separación de Responsabilidades: Cada componente tiene una responsabilidad específica
5. Mejor Mantenibilidad: Código más fácil de entender y modificar
6. Escalabilidad: Fácil agregar nuevas características sin afectar otros componentes