420 lines
8.5 KiB
Markdown
420 lines
8.5 KiB
Markdown
# 🚀 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)
|
|
|