neoris/Nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Nexus/LOBEHUB-UI-INTEGRATION.md

8.5 KiB
Raw Permalink Blame History

🚀 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:

<Avatar
  size={36}
  background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
>
  <User size={20} />
</Avatar>

2. ChatInput

Input de chat profesional con glassmorphism:

<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:

<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:

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

npm run dev

3. Solo Frontend

npm run dev:client

4. Build de Producción

npm run build
npm start

🌐 URLs de Desarrollo

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

🎨 Componentes Creados

1. Sidebar

<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

<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

<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:

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:

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

  • Sidebar con @lobehub/ui Avatar
  • ChatInput de @lobehub/ui
  • ActionIcon para botones
  • Glassmorphism en todos los containers
  • Gradientes vibrantes (purple/cyan)

✅ Funcionalidad

  • Enviar/recibir mensajes
  • Múltiples conversaciones
  • Indicador de escritura
  • Formateo Markdown
  • Socket.IO en tiempo real

✅ UX

  • Animaciones fluidas
  • Glassmorphism effects
  • Hover states
  • Responsive design
  • Welcome screen con sugerencias

🔧 Configuración

vite.config.ts

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

ThemeProvider

<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:

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:

npm run dev:all

Luego abre: http://localhost:3001 🚀

Documentación: