# 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

```tsx
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