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

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

CHATBOT.md 2.5 KB تاريخچه خام