# 🚀 Nexus AI - Integración con @lobehub/ui

## ✨ Nueva Arquitectura

Hemos migrado la interfaz de usuario a **React + TypeScript** utilizando los componentes oficiales de **@lobehub/ui** para crear una experiencia moderna y profesional.

---

## 📦 Stack Tecnológico

### Frontend
- **React 19** - Framework UI moderno
- **TypeScript** - Tipado estático
- **@lobehub/ui** - Biblioteca de componentes Lobe UI
- **antd-style** - Sistema de estilos de Lobe UI
- **Vite** - Build tool ultra-rápido
- **Socket.IO Client** - Comunicación en tiempo real

### Backend (sin cambios)
- **Express** - Servidor web
- **Socket.IO** - WebSockets
- **TypeScript** - Backend tipado

---

## 🎨 Componentes de @lobehub/ui Utilizados

### 1. **Avatar**
Avatares con gradientes vibrantes para usuario e IA:
```tsx
<Avatar
  size={36}
  background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
>
  <User size={20} />
</Avatar>
```

### 2. **ChatInput**
Input de chat profesional con glassmorphism:
```tsx
<ChatInput
  placeholder="Envía un mensaje..."
  onSend={handleSend}
  style={{
    background: 'rgba(255, 255, 255, 0.05)',
    backdropFilter: 'blur(8px)',
  }}
/>
```

### 3. **ActionIcon**
Botones de acción con efectos hover:
```tsx
<ActionIcon
  icon={Plus}
  onClick={onNewChat}
/>
```

---

## 📁 Estructura del Proyecto

```
Nexus/
├── client/                    # ⭐ Nuevo: Cliente React
│   ├── index.html            # HTML principal
│   └── src/
│       ├── main.tsx          # Punto de entrada React
│       ├── App.tsx           # Componente principal
│       ├── App.css           # Estilos globales
│       ├── index.css         # Reset CSS
│       ├── components/       # Componentes React
│       │   ├── Sidebar.tsx   # Sidebar con @lobehub/ui
│       │   ├── ChatContainer.tsx
│       │   ├── ChatMessage.tsx
│       │   └── WelcomeScreen.tsx
│       ├── hooks/            # Custom hooks
│       │   └── useChat.ts    # Hook para manejar chat
│       ├── types/            # Tipos TypeScript
│       │   └── index.ts
│       └── utils/            # Utilidades
├── src/                       # Backend (sin cambios)
│   ├── server/
│   ├── services/
│   └── ...
├── vite.config.ts            # ⭐ Configuración Vite
└── package.json              # Scripts actualizados
```

---

## 🚀 Cómo Usar

### 1. Desarrollo - Ambos Servidores
Ejecuta backend (3000) y frontend (3001) simultáneamente:

```bash
npm run dev:all
```

Este comando ejecuta:
- `npm run dev` → Backend en puerto 3000
- `npm run dev:client` → Vite dev server en puerto 3001

### 2. Solo Backend
```bash
npm run dev
```

### 3. Solo Frontend
```bash
npm run dev:client
```

### 4. Build de Producción
```bash
npm run build
npm start
```

---

## 🌐 URLs de Desarrollo

- **Frontend (React)**: http://localhost:3001
- **Backend (Express)**: http://localhost:3000
- **WebSocket**: ws://localhost:3000

El frontend en 3001 hace proxy automático a 3000 para Socket.IO.

---

## 🎨 Componentes Creados

### 1. **Sidebar**
```tsx
<Sidebar
  conversations={conversations}
  activeConversationId={activeConversationId}
  onNewChat={onNewChat}
  onSelectConversation={onSelectConversation}
/>
```

**Características**:
- Botón "Nuevo chat" con gradiente purple
- Lista de conversaciones con hover effects
- Perfil de usuario con Avatar de @lobehub/ui
- Glassmorphism completo

### 2. **ChatContainer**
```tsx
<ChatContainer
  messages={messages}
  isTyping={isTyping}
  onSendMessage={onSendMessage}
/>
```

**Características**:
- Área de mensajes con scroll personalizado
- ChatInput de @lobehub/ui
- WelcomeScreen cuando no hay mensajes
- Indicador de escritura

### 3. **ChatMessage**
```tsx
<ChatMessage
  message={message}
  isTyping={false}
/>
```

**Características**:
- Avatar con gradiente (user=purple, AI=cyan)
- Formateo de Markdown
- Syntax highlighting para código
- Animación fadeIn

### 4. **WelcomeScreen**
**Características**:
- Logo animado con pulse
- Título con text gradient
- 4 tarjetas de sugerencias con glassmorphism
- Iconos de lucide-react

---

## 🔌 Socket.IO Integration

### Hook useChat
El hook personalizado `useChat` maneja toda la lógica:

```tsx
const {
  messages,
  conversations,
  activeConversationId,
  isTyping,
  sendMessage,
  createNewConversation,
  selectConversation,
} = useChat();
```

**Eventos Socket.IO**:
- `connect` - Conexión establecida
- `user_message` - Enviar mensaje al servidor
- `ai_response` - Recibir respuesta de IA
- `error` - Manejo de errores

---

## 🎨 Sistema de Estilos

### antd-style
Usamos `antd-style` de Lobe UI para estilos con CSS-in-JS:

```tsx
const useStyles = createStyles(({ css, token }) => ({
  container: css`
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  `,
}));

const { styles } = useStyles();
return <div className={styles.container}>...</div>;
```

**Ventajas**:
- ✅ Tipo-safe (TypeScript)
- ✅ Scoped styles (sin colisiones)
- ✅ Temas dinámicos
- ✅ Performance optimizado

---

## 🎯 Características Implementadas

### ✅ UI Components
- [x] Sidebar con @lobehub/ui Avatar
- [x] ChatInput de @lobehub/ui
- [x] ActionIcon para botones
- [x] Glassmorphism en todos los containers
- [x] Gradientes vibrantes (purple/cyan)

### ✅ Funcionalidad
- [x] Enviar/recibir mensajes
- [x] Múltiples conversaciones
- [x] Indicador de escritura
- [x] Formateo Markdown
- [x] Socket.IO en tiempo real

### ✅ UX
- [x] Animaciones fluidas
- [x] Glassmorphism effects
- [x] Hover states
- [x] Responsive design
- [x] Welcome screen con sugerencias

---

## 🔧 Configuración

### vite.config.ts
```ts
export default defineConfig({
  plugins: [react()],
  root: 'client',
  server: {
    port: 3001,
    proxy: {
      '/socket.io': {
        target: 'http://localhost:3000',
        ws: true,
      },
    },
  },
});
```

### ThemeProvider
```tsx
<ThemeProvider
  theme={{
    token: {
      colorBgBase: '#0a0a0a',
      colorTextBase: '#ffffff',
    },
  }}
>
  <App />
</ThemeProvider>
```

---

## 📊 Comparación

### Antes (Vanilla JS)
```
❌ HTML estático con jQuery-like
❌ CSS manual
❌ No componentes reutilizables
❌ Difícil de mantener
```

### Ahora (React + @lobehub/ui)
```
✅ Componentes React tipados
✅ @lobehub/ui components
✅ antd-style CSS-in-JS
✅ Totalmente type-safe
✅ Fácil de extender
✅ Professional UI components
```

---

## 🎨 Componentes de @lobehub/ui Disponibles

Además de los que usamos, puedes agregar:

- **DraggablePanel** - Paneles draggables
- **ActionIconGroup** - Grupos de iconos
- **ChatList** - Lista de chats
- **ChatItem** - Items individuales
- **ChatHeader** - Cabecera del chat
- **MessageInput** - Input avanzado
- **MarkdownRenderer** - Renderizado MD
- **Avatar** ✅ (usado)
- **ChatInput** ✅ (usado)
- **ActionIcon** ✅ (usado)

---

## 🚀 Próximos Pasos

### Fase 1 - Mejorar UI
- [ ] Agregar DraggablePanel para sidebar
- [ ] Usar ChatList de @lobehub/ui
- [ ] Agregar ChatHeader
- [ ] Implementar MessageInput avanzado
- [ ] Agregar MarkdownRenderer oficial

### Fase 2 - Funcionalidad
- [ ] Persistencia en base de datos
- [ ] Autenticación de usuarios
- [ ] Subida de archivos
- [ ] Búsqueda en conversaciones
- [ ] Exportar chats

### Fase 3 - IA
- [ ] Integrar OpenAI/Claude
- [ ] Streaming de respuestas
- [ ] Código con syntax highlighting
- [ ] Soporte multi-modal

---

## 📝 Notas de Desarrollo

### Hot Module Replacement (HMR)
Vite proporciona HMR ultra-rápido:
- Cambios en React → Actualización instantánea
- Cambios en CSS → Actualización sin reload
- Cambios en TypeScript → Compilación rápida

### Type Safety
Todo está tipado con TypeScript:
```tsx
interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}
```

### CSS-in-JS Benefits
- Estilos scoped automáticamente
- No más class name conflicts
- Temas dinámicos con tokens
- Type-safe styles

---

## 🎉 Resultado

Has conseguido una aplicación de chat moderna con:

- ✅ **@lobehub/ui components** oficiales
- ✅ **React 19** + TypeScript
- ✅ **Vite** ultra-rápido
- ✅ **Glassmorphism** premium
- ✅ **antd-style** CSS-in-JS
- ✅ **Socket.IO** real-time
- ✅ **Production-ready**

---

**Comando principal**:
```bash
npm run dev:all
```

Luego abre: **http://localhost:3001** 🚀

---

**Documentación**:
- [Lobe UI Docs](https://ui.lobehub.com)
- [antd-style](https://github.com/ant-design/antd-style)
- [Vite](https://vitejs.dev)