cesarmendivil 63466271e8 initialize project structure with essential files and configurations

2026-02-14 12:13:56 -07:00

11 KiB

Raw Blame History

🎨 Arquitectura MCP - Nexus AI

Basado en ChatGPT UI Kit (Figma) + Lobe UI

Referencia Figma: https://www.figma.com/design/e0F6ZXsMuseZpKbc6IU3jR/ChatGPT-UI-Kit--AI-Chat--Community-?node-id=676-342

📐 Estructura MCP (Model-Context-Pattern)

Model (Datos y Lógica)

useChat.ts - Hook principal con lógica de negocio
- Gestión de mensajes
- Estado de conversaciones
- Socket.IO communication
- State management

Context (Tema y Configuración)

theme.ts - Tokens de diseño basados en Figma
- Colores ChatGPT UI Kit
- Gradientes Lobe UI
- Espaciado sistema
- Z-index layers

Pattern (Componentes y Estilos)

Layout Components - Estructura visual
UI Components - Elementos interactivos
Style Components - CSS-in-JS con antd-style

🏗️ Arquitectura de Componentes

App (ThemeProvider)
├── Layout
│   ├── Sidebar
│   │   ├── Header
│   │   │   ├── CloseButton (mobile)
│   │   │   └── NewChatButton
│   │   ├── Conversations
│   │   │   ├── SectionTitle
│   │   │   └── ConversationItem[]
│   │   └── Footer
│   │       └── UserProfile
│   │
│   └── MainContent
│       ├── ChatHeader (mobile)
│       │   ├── MenuButton
│       │   ├── Title
│       │   └── Actions
│       │
│       └── ChatArea
│           ├── MessagesContainer
│           │   ├── WelcomeScreen
│           │   └── ChatMessage[]
│           │       ├── Avatar
│           │       └── Content
│           │
│           └── InputArea
│               └── ChatInput
│                   ├── AttachButton
│                   ├── Textarea
│                   └── SendButton
│
└── Overlay (mobile)

🎨 Sistema de Diseño

Colores Base (Figma ChatGPT UI Kit)

// Backgrounds
colorBgBase: '#0a0a0a'        // Dark base
colorBgContainer: '#171717'   // Container
colorBgElevated: '#202020'    // Elevated

// Text
colorTextBase: '#ececf1'      // Primary text
colorTextSecondary: '#c5c5d2' // Secondary
colorTextTertiary: '#8e8ea0'  // Tertiary

// Borders
colorBorder: 'rgba(255, 255, 255, 0.06)'

Gradientes (Lobe UI Style)

// Primary - Purple
linear-gradient(135deg, #667eea 0%, #764ba2 100%)

// Accent - Cyan
linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)

// Success - Green
linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)

Glassmorphism

background: rgba(17, 17, 17, 0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);

📁 Estructura de Archivos

client/src/
├── App.tsx                    # App principal con layout MCP
├── App.css                    # Estilos globales mínimos
│
├── components/                # Componentes UI
│   ├── SidebarNew.tsx        # ✨ Sidebar rediseñado
│   ├── ChatHeader.tsx        # ✨ Header mobile
│   ├── ChatContainer.tsx     # Container de chat
│   ├── ChatMessage.tsx       # Mensaje individual
│   ├── ChatInput.tsx         # Input personalizado
│   └── WelcomeScreen.tsx     # Pantalla bienvenida
│
├── hooks/                     # Custom hooks
│   └── useChat.ts            # Hook principal de chat
│
├── styles/                    # ✨ Sistema de estilos
│   ├── theme.ts              # Tema ChatGPT + Lobe UI
│   └── appLayout.styles.ts   # Estilos de layout
│
└── types/                     # TypeScript types
    └── index.ts              # Tipos globales

🎯 Características Implementadas

Layout Principal

✅ Sidebar glassmorphism - Blur 20px + transparencia
✅ Layout responsive - Desktop + Mobile
✅ Overlay mobile - Backdrop blur al abrir sidebar
✅ Smooth transitions - 0.3s ease

Sidebar (Basado en Figma)

✅ Header con botón nuevo chat - Gradiente purple
✅ Lista de conversaciones - Con sección "Recientes"
✅ User profile - Avatar + info
✅ Scroll personalizado - 4px thin purple
✅ Hover effects - Transform translateX(4px)
✅ Active state - Purple tint + border

Chat Header (Mobile)

✅ Menu toggle - Abre/cierra sidebar
✅ Title - Nombre de la app
✅ Actions - Settings + Profile
✅ Glassmorphism - Blur 12px

Chat Container

✅ Messages area - Scroll infinito
✅ Welcome screen - Logo + sugerencias
✅ Typing indicator - 3 dots animados
✅ Custom input - Auto-resize + Enter send

🔧 Configuración del Tema

ThemeProvider Setup

import { ThemeProvider } from 'antd-style';
import { chatGPTTheme } from './styles/theme';

<ThemeProvider theme={chatGPTTheme}>
  <App />
</ThemeProvider>

Usando Tokens en Componentes

import { createStyles } from 'antd-style';

const useStyles = createStyles(({ css, token }) => ({
  container: css`
    background: ${token.colorBgContainer};
    color: ${token.colorTextBase};
    border-radius: ${token.borderRadius}px;
  `,
}));

Usando Colores Custom (Lobe UI)

import { lobeUIColors } from '../styles/theme';

const useStyles = createStyles(({ css }) => ({
  button: css`
    background: ${lobeUIColors.gradient.primary};
  `,
}));

📱 Responsive Design

Breakpoints

/* Desktop First */
@media (max-width: 768px) {
  /* Mobile styles */
}

Mobile Behavior

Sidebar

/* Desktop */
width: 260px;
position: relative;

/* Mobile */
position: fixed;
left: -260px;  /* Hidden by default */
z-index: 1000;

&.open {
  left: 0;  /* Slide in */
}

Header

/* Desktop */
display: none;

/* Mobile */
display: flex;
height: 48px;

🎨 Componentes Clave

1. Sidebar

Props:

interface SidebarProps {
  conversations: Conversation[];
  activeConversationId: string;
  onNewChat: () => void;
  onSelectConversation: (id: string) => void;
  onClose?: () => void;  // Para mobile
}

Características:

Header con botón gradiente
Lista scrollable con sección titles
User profile en footer
Close button para mobile

2. ChatHeader

Props:

interface ChatHeaderProps {
  onMenuClick?: () => void;
  onSettingsClick?: () => void;
  onProfileClick?: () => void;
  title?: string;
}

Características:

Solo visible en mobile
Menu toggle para sidebar
Actions buttons (settings, profile)
Glassmorphism style

3. ChatContainer

Props:

interface ChatContainerProps {
  messages: Message[];
  isTyping: boolean;
  onSendMessage: (content: string) => void;
}

Características:

Messages scrollable area
Welcome screen cuando vacío
Typing indicator
Custom input area

🎯 Patrón de Estado

useChat Hook (Model)

const {
  messages,              // Message[]
  conversations,         // Conversation[]
  activeConversationId,  // string
  isTyping,             // boolean
  sendMessage,          // (content: string) => void
  createNewConversation, // () => void
  selectConversation,   // (id: string) => void
} = useChat();

Flujo de Datos

Usuario → Acción
  ↓
useChat Hook
  ↓
Socket.IO → Backend
  ↓
Backend responde
  ↓
useChat actualiza estado
  ↓
Componentes re-renderizan

🚀 Cómo Usar

1. Iniciar Aplicación

npm run dev:all

2. Abrir en Navegador

http://localhost:3001

3. Probar Features

✅ Click "Nuevo chat" → Crea conversación
✅ Escribir mensaje → Enter envía
✅ Ver respuesta AI → Con typing indicator
✅ Mobile: Menu button → Abre sidebar
✅ Mobile: Overlay → Cierra sidebar

🎨 Estilos Destacados

Sidebar Container

background: rgba(13, 13, 13, 0.8);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(255, 255, 255, 0.06);

Nuevo Chat Button

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 
  0 4px 16px rgba(0, 0, 0, 0.4),
  0 0 20px rgba(102, 126, 234, 0.3);

&:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(102, 126, 234, 0.5);
}

Conversation Item (Active)

background: rgba(102, 126, 234, 0.1);
border-color: #667eea;
color: white;

svg {
  opacity: 1;
}

User Profile

border: 1px solid rgba(255, 255, 255, 0.08);
background: transparent;

&:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(102, 126, 234, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

📊 Comparación

Antes

App
└── Container
    ├── Sidebar (fijo)
    └── Chat

Ahora (MCP)

App (ThemeProvider)
├── Theme Config (chatGPTTheme)
├── Layout (appLayout.styles)
│   ├── Sidebar (glassmorphism)
│   ├── MainContent
│   │   ├── Header (mobile)
│   │   └── ChatArea
│   └── Overlay (mobile)
└── State (useChat hook)

Ventajas:

✅ Separación clara de responsabilidades
✅ Tema centralizado y reutilizable
✅ Estilos organizados por contexto
✅ Mobile-first responsive
✅ Más escalable y mantenible

🔮 Extensiones Futuras

Fácil de Agregar

1. Settings Panel

<SettingsPanel
  theme={theme}
  onThemeChange={setTheme}
/>

2. Search Conversations

<SearchBar
  onSearch={filterConversations}
/>

3. Conversation Actions

<ConversationActions
  onRename={handleRename}
  onDelete={handleDelete}
  onArchive={handleArchive}
/>

4. Themes Switcher

const themes = ['dark', 'light', 'auto'];

<ThemeProvider theme={themes[selected]}>
  <App />
</ThemeProvider>

✅ Checklist de Implementación

Estructura

Crear styles/theme.ts
Crear styles/appLayout.styles.ts
Crear components/SidebarNew.tsx
Crear components/ChatHeader.tsx
Actualizar App.tsx con layout MCP

Estilos

Colores Figma ChatGPT UI Kit
Gradientes Lobe UI
Glassmorphism effects
Responsive mobile
Animations y transitions

Funcionalidad

Sidebar toggle mobile
Overlay con backdrop blur
Scroll personalizado
Active states
Hover effects

📚 Referencias

Figma Design: ChatGPT UI Kit (node-id=676-342)
Lobe UI: https://ui.lobehub.com
antd-style: https://ant-design.github.io/antd-style
Pattern: MCP (Model-Context-Pattern)

Fecha de implementación: 14 de Febrero, 2026
Arquitectura: MCP (Model-Context-Pattern)
Design System: ChatGPT UI Kit + Lobe UI
Estado: ✅ Implementado y Funcional
Responsive: ✅ Desktop + Mobile

11 KiB Raw Blame History

🎨 Arquitectura MCP - Nexus AI

Basado en ChatGPT UI Kit (Figma) + Lobe UI

📐 Estructura MCP (Model-Context-Pattern)

Model (Datos y Lógica)

Context (Tema y Configuración)

Pattern (Componentes y Estilos)

🏗️ Arquitectura de Componentes

🎨 Sistema de Diseño

Colores Base (Figma ChatGPT UI Kit)

Gradientes (Lobe UI Style)

Glassmorphism

📁 Estructura de Archivos

🎯 Características Implementadas

Layout Principal

Sidebar (Basado en Figma)

Chat Header (Mobile)

Chat Container

🔧 Configuración del Tema

ThemeProvider Setup

Usando Tokens en Componentes

Usando Colores Custom (Lobe UI)

📱 Responsive Design

Breakpoints

Mobile Behavior

Sidebar

Header

🎨 Componentes Clave

1. Sidebar

2. ChatHeader

3. ChatContainer

🎯 Patrón de Estado

useChat Hook (Model)

Flujo de Datos

🚀 Cómo Usar

1. Iniciar Aplicación

2. Abrir en Navegador

3. Probar Features

🎨 Estilos Destacados

Sidebar Container

Nuevo Chat Button

Conversation Item (Active)

User Profile

📊 Comparación

Antes

Ahora (MCP)

🔮 Extensiones Futuras

Fácil de Agregar

1. Settings Panel

2. Search Conversations

3. Conversation Actions

4. Themes Switcher

✅ Checklist de Implementación

Estructura

Estilos

Funcionalidad

📚 Referencias

11 KiB

Raw Blame History