507 lines
13 KiB
Markdown
507 lines
13 KiB
Markdown
# 🚀 Nueva Arquitectura Multi-Vista - NexusChat
|
|
|
|
## Sistema de Navegación con RAG y Agentes
|
|
|
|
He implementado un sistema completo de navegación con 3 vistas principales para gestionar Chats, Base de Conocimientos (RAG) y Agentes IA.
|
|
|
|
---
|
|
|
|
## 📐 Nueva Estructura
|
|
|
|
```
|
|
┌────┬─────────────┬──────────────────────────────┬─────────────┐
|
|
│ │ │ │ │
|
|
│ 🤖 │ SIDEBAR │ CONTENT AREA │ TOPICS │
|
|
│ 💬 │ (320px) │ (FLEX 1) │ (320px) │
|
|
│ 📚 │ │ │ │
|
|
│ 🤖 │ Chats │ Vista dinámica según │ Panel │
|
|
│ │ Knowledge │ sección seleccionada │ derecho │
|
|
│ ⚙️ │ Agents │ │ │
|
|
│ │ │ │ │
|
|
└────┴─────────────┴──────────────────────────────┴─────────────┘
|
|
64px 320px Flexible 320px
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Componentes Nuevos
|
|
|
|
### 1. **NavigationSidebar** (64px)
|
|
|
|
Barra de navegación vertical ultracompacta con iconos.
|
|
|
|
**Ubicación**: Extremo izquierdo
|
|
|
|
**Elementos**:
|
|
```
|
|
┌────┐
|
|
│ 🤖 │ ← Logo (NexusChat)
|
|
├────┤
|
|
│ 💬 │ ← Chats
|
|
│ │
|
|
│ 📚 │ ← Base de Conocimientos
|
|
│ │
|
|
│ 🤖 │ ← Agentes
|
|
├────┤
|
|
│ ⚙️ │ ← Configuración
|
|
│ │
|
|
│ ❓ │ ← Ayuda
|
|
└────┘
|
|
```
|
|
|
|
**Características**:
|
|
- ✅ Width: `64px`
|
|
- ✅ Logo con gradiente
|
|
- ✅ 3 navegación principal
|
|
- ✅ Active state con barra purple lateral
|
|
- ✅ Hover effects
|
|
- ✅ Icons + Labels pequeños
|
|
|
|
**Estados**:
|
|
```css
|
|
/* Normal */
|
|
background: transparent;
|
|
color: #71717a;
|
|
|
|
/* Hover */
|
|
background: #27272a;
|
|
color: #a1a1aa;
|
|
|
|
/* Active */
|
|
background: #2a2a2a;
|
|
color: white;
|
|
/* + barra lateral purple */
|
|
```
|
|
|
|
---
|
|
|
|
### 2. **KnowledgeBase** (Vista completa)
|
|
|
|
Gestión de archivos para RAG (Retrieval-Augmented Generation).
|
|
|
|
**Secciones**:
|
|
|
|
#### Header
|
|
```
|
|
Base de Conocimientos [+ Subir Archivos]
|
|
```
|
|
|
|
#### Search Bar
|
|
```
|
|
🔍 Buscar en la base de conocimientos...
|
|
```
|
|
|
|
#### Stats Cards
|
|
```
|
|
┌──────────────┬──────────────┬──────────────┐
|
|
│ 📄 Archivos │ 🗃️ Chunks │ 📁 Tamaño │
|
|
│ 12 │ 1,248 │ 18.5 MB │
|
|
└──────────────┴──────────────┴──────────────┘
|
|
```
|
|
|
|
#### Upload Area
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ ⬆️ Upload Icon │
|
|
│ │
|
|
│ Arrastra archivos aquí o haz clic │
|
|
│ Los archivos se procesarán para RAG │
|
|
│ │
|
|
│ PDF, DOC, DOCX, TXT, MD, CSV │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
#### File Grid
|
|
```
|
|
┌──────────────┬──────────────┬──────────────┐
|
|
│ 📄 Product │ 📄 API Ref │ 📄 Manual │
|
|
│ Doc.pdf │ .md │ .docx │
|
|
│ 2.4 MB │ 856 KB │ 1.8 MB │
|
|
│ ● 145 chunks │ ● 89 chunks │ ● 112 chunks │
|
|
│ 2 hours ago │ 1 day ago │ 3 days ago │
|
|
└──────────────┴──────────────┴──────────────┘
|
|
```
|
|
|
|
**Funcionalidades**:
|
|
- ✅ Upload drag & drop
|
|
- ✅ Estadísticas de archivos
|
|
- ✅ Grid responsive de archivos
|
|
- ✅ Información de chunks procesados
|
|
- ✅ Búsqueda en archivos
|
|
- ✅ Actions por archivo (editar, eliminar)
|
|
|
|
---
|
|
|
|
### 3. **AgentsView** (Vista completa)
|
|
|
|
Creación y gestión de agentes IA con MCP y RAG.
|
|
|
|
**Header**:
|
|
```
|
|
Agentes IA [+ Crear Agente]
|
|
```
|
|
|
|
**Agent Cards Grid**:
|
|
```
|
|
┌────────────────────────────────────────┐
|
|
│ 💻 Asistente de Código [⚙️] [⋮] │
|
|
│ Desarrollo │
|
|
│ │
|
|
│ Especializado en revisión de código, │
|
|
│ debugging y sugerencias... │
|
|
│ │
|
|
│ Capacidades: │
|
|
│ ⚡ GitHub Integration │
|
|
│ 📚 Code Documentation │
|
|
│ │
|
|
│ 245 Interacciones | 2 hours ago │
|
|
│ │
|
|
│ ● Activo [⚙️ Configurar] │
|
|
└────────────────────────────────────────┘
|
|
```
|
|
|
|
**Elementos de cada Agent Card**:
|
|
|
|
1. **Header**
|
|
- Avatar con emoji
|
|
- Nombre del agente
|
|
- Rol
|
|
- Botones de acción (Settings, More)
|
|
|
|
2. **Descripción**
|
|
- Texto descriptivo del agente
|
|
|
|
3. **Capacidades**
|
|
- Tags de MCP (⚡ azul)
|
|
- Tags de RAG (📚 purple)
|
|
|
|
4. **Estadísticas**
|
|
- Número de interacciones
|
|
- Último uso
|
|
|
|
5. **Footer**
|
|
- Status badge (Activo/Inactivo)
|
|
- Botón configurar
|
|
|
|
**Tipos de Capacidades**:
|
|
```typescript
|
|
// MCP (Model Context Protocol)
|
|
⚡ GitHub Integration
|
|
⚡ Database Access
|
|
⚡ API Connections
|
|
|
|
// RAG (Base de Conocimientos)
|
|
📚 Code Documentation
|
|
📚 Product Knowledge
|
|
📚 FAQ Database
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Sistema de Navegación
|
|
|
|
### Estado del Layout por Vista
|
|
|
|
#### Vista: Chats (Default)
|
|
```
|
|
┌────┬─────────────┬──────────────────┬─────────────┐
|
|
│ 🤖 │ │ │ │
|
|
│[💬]│ Sidebar │ Chat Area │ Topics │
|
|
│ 📚 │ Convs │ Messages │ List │
|
|
│ 🤖 │ │ Input │ │
|
|
└────┴─────────────┴──────────────────┴─────────────┘
|
|
```
|
|
|
|
#### Vista: Base de Conocimientos
|
|
```
|
|
┌────┬─────────────────────────────────────────────┐
|
|
│ 🤖 │ │
|
|
│ 💬 │ Knowledge Base (Full Width) │
|
|
│[📚]│ Stats + Upload + Files │
|
|
│ 🤖 │ │
|
|
└────┴─────────────────────────────────────────────┘
|
|
```
|
|
|
|
#### Vista: Agentes
|
|
```
|
|
┌────┬─────────────────────────────────────────────┐
|
|
│ 🤖 │ │
|
|
│ 💬 │ Agents Grid (Full Width) │
|
|
│ 📚 │ Agent Cards con Configs │
|
|
│[🤖]│ │
|
|
└────┴─────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 💻 Código Implementado
|
|
|
|
### App.tsx - Sistema de Vistas
|
|
|
|
```typescript
|
|
const [activeView, setActiveView] = useState<NavigationView>('chats');
|
|
|
|
const renderView = () => {
|
|
switch (activeView) {
|
|
case 'chats':
|
|
return (
|
|
<>
|
|
<LobeChatSidebar />
|
|
<LobeChatArea />
|
|
<TopicPanel />
|
|
</>
|
|
);
|
|
|
|
case 'knowledge':
|
|
return <KnowledgeBase />;
|
|
|
|
case 'agents':
|
|
return <AgentsView />;
|
|
}
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 📦 Archivos Creados
|
|
|
|
### Componentes ✨
|
|
```
|
|
client/src/components/
|
|
├── NavigationSidebar.tsx (190 líneas) ⭐ NUEVO
|
|
├── KnowledgeBase.tsx (420 líneas) ⭐ NUEVO
|
|
└── AgentsView.tsx (380 líneas) ⭐ NUEVO
|
|
```
|
|
|
|
### Modificados
|
|
```
|
|
client/src/
|
|
└── App.tsx (Integración de vistas)
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Flujo de Uso
|
|
|
|
### Para el Usuario
|
|
|
|
#### 1. Navegar a Base de Conocimientos
|
|
```
|
|
1. Click en 📚 (navegación izquierda)
|
|
2. Ver archivos existentes
|
|
3. Click en "Subir Archivos"
|
|
4. Drag & drop de archivos
|
|
5. Sistema procesa automáticamente en chunks
|
|
6. Archivos listos para usar en RAG
|
|
```
|
|
|
|
#### 2. Crear un Agente
|
|
```
|
|
1. Click en 🤖 (navegación izquierda)
|
|
2. Click en "+ Crear Agente"
|
|
3. Configurar:
|
|
- Nombre y emoji
|
|
- Rol/Especialidad
|
|
- Descripción
|
|
- Capacidades MCP
|
|
- Base de conocimientos RAG
|
|
4. Guardar agente
|
|
5. Agente listo para usar
|
|
```
|
|
|
|
#### 3. Usar Agente en Chat
|
|
```
|
|
1. Click en 💬 (volver a chats)
|
|
2. Seleccionar agente desde sidebar
|
|
3. El agente usa:
|
|
- MCP para integraciones
|
|
- RAG para contexto de archivos
|
|
4. Respuestas mejoradas con contexto
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 Configuración de Agentes
|
|
|
|
### Ejemplo: Agente de Código
|
|
|
|
**Configuración**:
|
|
```json
|
|
{
|
|
"name": "Asistente de Código",
|
|
"role": "Desarrollo",
|
|
"emoji": "💻",
|
|
"description": "Especializado en revisión de código...",
|
|
"capabilities": {
|
|
"mcp": [
|
|
"GitHub Integration",
|
|
"Terminal Access",
|
|
"File System"
|
|
],
|
|
"rag": [
|
|
"Code Documentation",
|
|
"Best Practices Docs",
|
|
"API Reference"
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
**Cómo Funciona**:
|
|
1. Usuario hace pregunta sobre código
|
|
2. Agente usa MCP para acceder a GitHub
|
|
3. Agente consulta RAG con documentación
|
|
4. Genera respuesta combinando:
|
|
- Contexto del repositorio (MCP)
|
|
- Documentación relevante (RAG)
|
|
- Modelo LLM base
|
|
|
|
---
|
|
|
|
## 📊 Características por Vista
|
|
|
|
### Chats (Default)
|
|
- ✅ Conversaciones normales
|
|
- ✅ Historial de chats
|
|
- ✅ Búsqueda en conversaciones
|
|
- ✅ Topics panel
|
|
- ✅ Multi-línea input
|
|
|
|
### Base de Conocimientos
|
|
- ✅ Upload de archivos
|
|
- ✅ Procesamiento automático RAG
|
|
- ✅ Estadísticas de chunks
|
|
- ✅ Búsqueda en archivos
|
|
- ✅ Gestión de documentos
|
|
- ✅ Preview de archivos
|
|
|
|
### Agentes
|
|
- ✅ Crear/Editar agentes
|
|
- ✅ Configurar MCP
|
|
- ✅ Asignar RAG
|
|
- ✅ Ver estadísticas
|
|
- ✅ Activar/Desactivar
|
|
- ✅ Clonar agentes
|
|
|
|
---
|
|
|
|
## 🎨 Estilos Consistentes
|
|
|
|
### Navigation Sidebar
|
|
```css
|
|
Background: #0f0f10 (Más oscuro que #18181b)
|
|
Width: 64px
|
|
Icons: 20px
|
|
Active Bar: 3px purple gradient
|
|
```
|
|
|
|
### Knowledge Base
|
|
```css
|
|
Background: #000000 (Pure black)
|
|
Max Width: 1200px
|
|
Grid: 280px columns
|
|
Cards: 12px border-radius
|
|
```
|
|
|
|
### Agents View
|
|
```css
|
|
Background: #000000 (Pure black)
|
|
Max Width: 1400px
|
|
Grid: 350px columns
|
|
Cards: 16px border-radius
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Checklist de Implementación
|
|
|
|
### Navegación
|
|
- [x] NavigationSidebar con 3 vistas
|
|
- [x] Active states
|
|
- [x] Hover effects
|
|
- [x] Barra lateral de indicador
|
|
|
|
### Base de Conocimientos
|
|
- [x] Header con acciones
|
|
- [x] Stats cards
|
|
- [x] Upload area drag & drop
|
|
- [x] File grid responsive
|
|
- [x] File cards con info
|
|
- [x] Search bar
|
|
|
|
### Agentes
|
|
- [x] Header con crear
|
|
- [x] Agent cards grid
|
|
- [x] Avatar + Info
|
|
- [x] Capabilities (MCP + RAG)
|
|
- [x] Stats display
|
|
- [x] Status badge
|
|
- [x] Actions buttons
|
|
|
|
### Integración
|
|
- [x] App.tsx con switch de vistas
|
|
- [x] Estado global de navegación
|
|
- [x] Transiciones suaves
|
|
|
|
---
|
|
|
|
## 🚀 Próximos Pasos (Futuro)
|
|
|
|
### Base de Conocimientos
|
|
- [ ] Upload real de archivos
|
|
- [ ] Procesamiento backend RAG
|
|
- [ ] Preview de documentos
|
|
- [ ] Edición de metadata
|
|
- [ ] Organización en carpetas
|
|
|
|
### Agentes
|
|
- [ ] Modal de creación
|
|
- [ ] Configuración detallada MCP
|
|
- [ ] Selector de knowledge base
|
|
- [ ] Testing de agentes
|
|
- [ ] Logs de actividad
|
|
- [ ] Performance metrics
|
|
|
|
### Integraciones
|
|
- [ ] MCP protocol implementation
|
|
- [ ] RAG vector database
|
|
- [ ] Agent orchestration
|
|
- [ ] Multi-agent conversations
|
|
|
|
---
|
|
|
|
## 🎉 Resultado
|
|
|
|
Has conseguido un sistema completo de navegación con:
|
|
|
|
- ✅ **3 vistas principales** (Chats, Knowledge, Agents)
|
|
- ✅ **NavigationSidebar** ultracompacto (64px)
|
|
- ✅ **Base de Conocimientos** para RAG
|
|
- ✅ **Gestión de Agentes** con MCP/RAG
|
|
- ✅ **Diseño consistente** con LobeChat
|
|
- ✅ **Responsive** y escalable
|
|
- ✅ **Ready para backend** integration
|
|
|
|
---
|
|
|
|
**Comando para probar**:
|
|
```bash
|
|
npm run dev:all
|
|
```
|
|
|
|
**URL**: http://localhost:3001
|
|
|
|
**Navegación**:
|
|
1. Click en 💬 → Ver chats
|
|
2. Click en 📚 → Ver base de conocimientos
|
|
3. Click en 🤖 → Ver agentes
|
|
|
|
---
|
|
|
|
**Implementado**: 14 de Febrero, 2026
|
|
**Componentes nuevos**: 3
|
|
**Líneas de código**: ~1,000
|
|
**Arquitectura**: Multi-vista con RAG + MCP
|
|
**Estado**: ✅ **COMPLETADO**
|
|
|