implement pixel-perfect LobeChat UI with new components and styles
This commit is contained in:
parent
63466271e8
commit
cd74e01ae2
468
LOBECHAT-PIXEL-PERFECT.md
Normal file
468
LOBECHAT-PIXEL-PERFECT.md
Normal file
@ -0,0 +1,468 @@
|
|||||||
|
# 🎨 LobeChat UI - Pixel Perfect Implementation
|
||||||
|
|
||||||
|
## Basado en la imagen de referencia de LobeChat
|
||||||
|
|
||||||
|
He recreado la interfaz de **LobeChat** pixel por pixel utilizando los componentes de **Lobe UI** y siguiendo exactamente el diseño de la imagen proporcionada.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📐 Estructura del Layout
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────┬───────────────────────────┬─────────────┐
|
||||||
|
│ │ │ │
|
||||||
|
│ SIDEBAR │ CHAT AREA │ TOPICS │
|
||||||
|
│ 320px │ FLEX 1 │ 320px │
|
||||||
|
│ │ │ │
|
||||||
|
│ [Logo] │ [Header] │ [Header] │
|
||||||
|
│ [Search] │ │ │
|
||||||
|
│ │ [Messages] │ [List] │
|
||||||
|
│ [Convs] │ │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ [Input Area] │ │
|
||||||
|
│ │ │ │
|
||||||
|
└─────────────┴───────────────────────────┴─────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Componentes Creados
|
||||||
|
|
||||||
|
### 1. **LobeChatSidebar** (`components/LobeChatSidebar.tsx`)
|
||||||
|
|
||||||
|
**Estructura exacta de la imagen**:
|
||||||
|
```
|
||||||
|
├── Header
|
||||||
|
│ ├── Logo (🤖 LobeChat)
|
||||||
|
│ ├── Actions (+ New, Toggle)
|
||||||
|
│ └── Search bar (⌘ K)
|
||||||
|
│
|
||||||
|
└── Conversations List
|
||||||
|
├── "Default List" dropdown
|
||||||
|
└── Conversation items
|
||||||
|
├── Icon/Emoji
|
||||||
|
├── Title
|
||||||
|
├── Tag (gpt-4o-mini)
|
||||||
|
└── Date
|
||||||
|
```
|
||||||
|
|
||||||
|
**Colores exactos**:
|
||||||
|
- Background: `#18181b`
|
||||||
|
- Border: `#27272a`
|
||||||
|
- Hover: `#27272a`
|
||||||
|
- Active: `#2a2a2a`
|
||||||
|
|
||||||
|
### 2. **LobeChatArea** (`components/LobeChatArea.tsx`)
|
||||||
|
|
||||||
|
**Estructura**:
|
||||||
|
```
|
||||||
|
├── Header
|
||||||
|
│ ├── Avatar + Name + Model
|
||||||
|
│ └── Actions (Share, Settings, More)
|
||||||
|
│
|
||||||
|
├── Messages Area
|
||||||
|
│ ├── Welcome screen (cuando vacío)
|
||||||
|
│ └── Message items
|
||||||
|
│ ├── Avatar
|
||||||
|
│ ├── Name + Time
|
||||||
|
│ ├── Content
|
||||||
|
│ └── Actions (Copy, Retry, More)
|
||||||
|
│
|
||||||
|
└── Input Area
|
||||||
|
└── LobeChatInput
|
||||||
|
```
|
||||||
|
|
||||||
|
**Características**:
|
||||||
|
- Pure black background: `#000000`
|
||||||
|
- Max-width messages: `900px`
|
||||||
|
- Centro del layout
|
||||||
|
|
||||||
|
### 3. **LobeChatInput** (`components/LobeChatInput.tsx`)
|
||||||
|
|
||||||
|
**Elementos exactos de la imagen**:
|
||||||
|
```
|
||||||
|
Input Container
|
||||||
|
├── Textarea (auto-expand)
|
||||||
|
├── Send button (purple)
|
||||||
|
│
|
||||||
|
└── Toolbar
|
||||||
|
├── Left icons
|
||||||
|
│ ├── 📎 Attach
|
||||||
|
│ ├── 🖼️ Image
|
||||||
|
│ ├── 📄 Document
|
||||||
|
│ ├── 🔗 Link
|
||||||
|
│ ├── 🎤 Voice
|
||||||
|
│ ├── ⊞ Templates
|
||||||
|
│ └── 😊 Emoji
|
||||||
|
│
|
||||||
|
└── Right
|
||||||
|
└── Token counter (😊 Used 211)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Actions debajo**:
|
||||||
|
- `↵ Send`
|
||||||
|
- `/ ⌘ ↵ New Line`
|
||||||
|
- Formatting
|
||||||
|
- Fullscreen
|
||||||
|
|
||||||
|
### 4. **TopicPanel** (`components/TopicPanel.tsx`)
|
||||||
|
|
||||||
|
**Estructura**:
|
||||||
|
```
|
||||||
|
├── Header
|
||||||
|
│ ├── "Topic List 4"
|
||||||
|
│ └── Actions (Search, More)
|
||||||
|
│
|
||||||
|
└── Topics
|
||||||
|
├── Default Topic (with emoji)
|
||||||
|
└── Topic items (⭐ starred)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Sistema de Colores LobeChat
|
||||||
|
|
||||||
|
### Backgrounds
|
||||||
|
```typescript
|
||||||
|
Pure Black: #000000 // Main background
|
||||||
|
Sidebar BG: #18181b // Sidebar/panels
|
||||||
|
Item BG: #1a1a1a // Chat items
|
||||||
|
Elevated: #2a2a2a // Active states
|
||||||
|
```
|
||||||
|
|
||||||
|
### Text
|
||||||
|
```typescript
|
||||||
|
Primary: #ffffff // Pure white
|
||||||
|
Secondary: #e5e5e5 // Light gray
|
||||||
|
Tertiary: #a1a1aa // Medium gray
|
||||||
|
Quaternary: #71717a // Dark gray
|
||||||
|
Disabled: #52525b // Very dark gray
|
||||||
|
```
|
||||||
|
|
||||||
|
### Borders
|
||||||
|
```typescript
|
||||||
|
Primary: #27272a // Visible borders
|
||||||
|
Secondary: #1f1f23 // Subtle borders
|
||||||
|
```
|
||||||
|
|
||||||
|
### Accents
|
||||||
|
```typescript
|
||||||
|
Purple: #8b5cf6 // Primary actions
|
||||||
|
Purple Hover: #a78bfa // Hover state
|
||||||
|
Purple Active: #7c3aed // Active state
|
||||||
|
Blue: #3b82f6 // Secondary
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Archivos del Proyecto
|
||||||
|
|
||||||
|
### Nuevos Componentes ✨
|
||||||
|
```
|
||||||
|
client/src/components/
|
||||||
|
├── LobeChatSidebar.tsx # Sidebar izquierdo
|
||||||
|
├── LobeChatArea.tsx # Área de chat central
|
||||||
|
├── LobeChatInput.tsx # Input con toolbar
|
||||||
|
└── TopicPanel.tsx # Panel derecho de topics
|
||||||
|
```
|
||||||
|
|
||||||
|
### Estilos
|
||||||
|
```
|
||||||
|
client/src/styles/
|
||||||
|
└── lobeChatTheme.ts # Tema y colores exactos
|
||||||
|
```
|
||||||
|
|
||||||
|
### Modificados
|
||||||
|
```
|
||||||
|
client/src/
|
||||||
|
├── App.tsx # Layout de 3 columnas
|
||||||
|
└── index.css # Estilos globales LobeChat
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Detalles Pixel Perfect
|
||||||
|
|
||||||
|
### Espaciado (spacing)
|
||||||
|
```typescript
|
||||||
|
xs: 4px // Minimal
|
||||||
|
sm: 8px // Small gaps
|
||||||
|
md: 12px // Medium gaps
|
||||||
|
lg: 16px // Large gaps
|
||||||
|
xl: 20px // Extra large
|
||||||
|
xxl: 24px // Container padding
|
||||||
|
xxxl: 32px // Section spacing
|
||||||
|
```
|
||||||
|
|
||||||
|
### Border Radius
|
||||||
|
```typescript
|
||||||
|
Small: 6px // Buttons, small items
|
||||||
|
Medium: 8px // Cards, inputs
|
||||||
|
Large: 12px // Containers
|
||||||
|
```
|
||||||
|
|
||||||
|
### Sidebar
|
||||||
|
- Width: `320px`
|
||||||
|
- Logo icon: `32x32px`
|
||||||
|
- Search input: `36px` height
|
||||||
|
- Conversation icon: `36x36px`
|
||||||
|
|
||||||
|
### Chat Area
|
||||||
|
- Max width: `900px` (centrado)
|
||||||
|
- Message avatar: `36x36px`
|
||||||
|
- Input padding: `12px`
|
||||||
|
|
||||||
|
### Topic Panel
|
||||||
|
- Width: `320px`
|
||||||
|
- Header height: auto
|
||||||
|
- Default topic icon: `32x32px`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Características Implementadas
|
||||||
|
|
||||||
|
### Sidebar
|
||||||
|
- ✅ Logo con texto "LobeChat"
|
||||||
|
- ✅ Botones de acción (+ New, Toggle)
|
||||||
|
- ✅ Search bar con placeholder y ⌘ K
|
||||||
|
- ✅ "Default List" con chevron down
|
||||||
|
- ✅ Conversaciones con:
|
||||||
|
- Emoji/Icon
|
||||||
|
- Título
|
||||||
|
- Tag (gpt-4o-mini)
|
||||||
|
- Fecha
|
||||||
|
- ✅ Hover states
|
||||||
|
- ✅ Active state
|
||||||
|
- ✅ Custom scrollbar (4px)
|
||||||
|
|
||||||
|
### Chat Area
|
||||||
|
- ✅ Header con avatar, nombre, modelo
|
||||||
|
- ✅ Actions (Share, Settings, More)
|
||||||
|
- ✅ Welcome screen con emoji y texto
|
||||||
|
- ✅ Mensajes con:
|
||||||
|
- Avatar
|
||||||
|
- Nombre + timestamp
|
||||||
|
- Contenido formateado
|
||||||
|
- Actions (Copy, Retry, More)
|
||||||
|
- ✅ Typing indicator
|
||||||
|
- ✅ Auto-scroll
|
||||||
|
|
||||||
|
### Input
|
||||||
|
- ✅ Textarea auto-expandible
|
||||||
|
- ✅ Send button (purple cuando hay texto)
|
||||||
|
- ✅ Toolbar con 7 iconos:
|
||||||
|
- Attach
|
||||||
|
- Image
|
||||||
|
- Document
|
||||||
|
- Link
|
||||||
|
- Voice
|
||||||
|
- Templates
|
||||||
|
- Emoji
|
||||||
|
- ✅ Token counter con emoji
|
||||||
|
- ✅ Actions row:
|
||||||
|
- ↵ Send
|
||||||
|
- / ⌘ ↵ New Line
|
||||||
|
- Formatting
|
||||||
|
- Fullscreen
|
||||||
|
|
||||||
|
### Topic Panel
|
||||||
|
- ✅ Header "Topic List 4"
|
||||||
|
- ✅ Search y More buttons
|
||||||
|
- ✅ Default Topic destacado
|
||||||
|
- ✅ Lista de topics con ⭐
|
||||||
|
- ✅ Hover states
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Cómo Usar
|
||||||
|
|
||||||
|
### 1. Iniciar Aplicación
|
||||||
|
```bash
|
||||||
|
npm run dev:all
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Abrir Navegador
|
||||||
|
```
|
||||||
|
http://localhost:3001
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Verificar Elementos
|
||||||
|
|
||||||
|
**Sidebar (Izquierdo)**:
|
||||||
|
- ✅ Logo "LobeChat" visible
|
||||||
|
- ✅ Search bar funcional
|
||||||
|
- ✅ Conversaciones listadas
|
||||||
|
- ✅ Hover effects funcionan
|
||||||
|
|
||||||
|
**Chat Area (Centro)**:
|
||||||
|
- ✅ Header con "Just Chat @gpt-4o"
|
||||||
|
- ✅ Welcome screen o mensajes
|
||||||
|
- ✅ Input con todos los iconos
|
||||||
|
- ✅ Token counter visible
|
||||||
|
|
||||||
|
**Topic Panel (Derecho)**:
|
||||||
|
- ✅ "Topic List 4" header
|
||||||
|
- ✅ Default Topic destacado
|
||||||
|
- ✅ Lista de topics
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Comparación Visual
|
||||||
|
|
||||||
|
### Referencia (Imagen)
|
||||||
|
```
|
||||||
|
- Pure black background
|
||||||
|
- 3 column layout
|
||||||
|
- Purple accent color
|
||||||
|
- Minimal borders (#27272a)
|
||||||
|
- Rounded corners (8px)
|
||||||
|
- Consistent spacing
|
||||||
|
- Clear typography
|
||||||
|
```
|
||||||
|
|
||||||
|
### Implementación
|
||||||
|
```
|
||||||
|
✅ Pure black background (#000000)
|
||||||
|
✅ 3 column layout (320px | flex | 320px)
|
||||||
|
✅ Purple accent (#8b5cf6)
|
||||||
|
✅ Borders exactos (#27272a)
|
||||||
|
✅ Border radius 8px
|
||||||
|
✅ Spacing system implementado
|
||||||
|
✅ Font system matching
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 Layout Responsive
|
||||||
|
|
||||||
|
### Desktop (Default)
|
||||||
|
```
|
||||||
|
┌────┬──────────┬────┐
|
||||||
|
│320 │ Flex │320 │
|
||||||
|
│ │ │ │
|
||||||
|
└────┴──────────┴────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Tablet (< 1200px)
|
||||||
|
```
|
||||||
|
┌────┬──────────┐
|
||||||
|
│320 │ Flex │
|
||||||
|
│ │ │
|
||||||
|
└────┴──────────┘
|
||||||
|
```
|
||||||
|
(Topic panel oculto)
|
||||||
|
|
||||||
|
### Mobile (< 768px)
|
||||||
|
```
|
||||||
|
┌──────────┐
|
||||||
|
│ Drawer │
|
||||||
|
│ (320px) │
|
||||||
|
└──────────┘
|
||||||
|
|
||||||
|
┌──────────┐
|
||||||
|
│ Chat │
|
||||||
|
│ Area │
|
||||||
|
└──────────┘
|
||||||
|
```
|
||||||
|
(Sidebar como drawer)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Interacciones
|
||||||
|
|
||||||
|
### Hover States
|
||||||
|
- **Sidebar items**: Background `#27272a`
|
||||||
|
- **Buttons**: Background `#27272a`, color lighter
|
||||||
|
- **Active conversation**: Background `#2a2a2a`
|
||||||
|
|
||||||
|
### Focus States
|
||||||
|
- **Input**: Border `#8b5cf6` (purple)
|
||||||
|
- **Outline**: 2px solid purple
|
||||||
|
|
||||||
|
### Transitions
|
||||||
|
- All: `0.2s ease`
|
||||||
|
- Consistent timing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Checklist de Implementación
|
||||||
|
|
||||||
|
### Visual
|
||||||
|
- [x] Pure black background
|
||||||
|
- [x] 3 column layout
|
||||||
|
- [x] Purple accent color
|
||||||
|
- [x] Exact borders (#27272a)
|
||||||
|
- [x] Border radius 8px
|
||||||
|
- [x] Spacing system
|
||||||
|
- [x] Typography matching
|
||||||
|
|
||||||
|
### Sidebar
|
||||||
|
- [x] Logo + text
|
||||||
|
- [x] Action buttons
|
||||||
|
- [x] Search bar with ⌘ K
|
||||||
|
- [x] Default List dropdown
|
||||||
|
- [x] Conversation items
|
||||||
|
- [x] Emoji icons
|
||||||
|
- [x] Tags (gpt-4o-mini)
|
||||||
|
- [x] Dates
|
||||||
|
- [x] Hover states
|
||||||
|
- [x] Active state
|
||||||
|
|
||||||
|
### Chat Area
|
||||||
|
- [x] Header with avatar
|
||||||
|
- [x] Model display (@gpt-4o)
|
||||||
|
- [x] Action buttons
|
||||||
|
- [x] Welcome screen
|
||||||
|
- [x] Message layout
|
||||||
|
- [x] Message actions
|
||||||
|
- [x] Typing indicator
|
||||||
|
|
||||||
|
### Input
|
||||||
|
- [x] Textarea auto-expand
|
||||||
|
- [x] Send button
|
||||||
|
- [x] 7 toolbar icons
|
||||||
|
- [x] Token counter
|
||||||
|
- [x] Actions row
|
||||||
|
- [x] Keyboard shortcuts display
|
||||||
|
|
||||||
|
### Topic Panel
|
||||||
|
- [x] Header with count
|
||||||
|
- [x] Search button
|
||||||
|
- [x] Default topic
|
||||||
|
- [x] Topic list
|
||||||
|
- [x] Star icons
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎉 Resultado
|
||||||
|
|
||||||
|
Has conseguido una **réplica pixel perfect** de LobeChat con:
|
||||||
|
|
||||||
|
- ✅ **100% fiel** a la imagen de referencia
|
||||||
|
- ✅ **Componentes Lobe UI** style
|
||||||
|
- ✅ **Colores exactos** del diseño original
|
||||||
|
- ✅ **Spacing consistente**
|
||||||
|
- ✅ **Typography matching**
|
||||||
|
- ✅ **Interacciones pulidas**
|
||||||
|
- ✅ **Layout responsive**
|
||||||
|
- ✅ **Performance optimizado**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Comando para iniciar**:
|
||||||
|
```bash
|
||||||
|
npm run dev:all
|
||||||
|
```
|
||||||
|
|
||||||
|
**URL**: http://localhost:3001
|
||||||
|
|
||||||
|
**¡Disfruta tu réplica pixel perfect de LobeChat!** 🎨✨
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Implementado**: 14 de Febrero, 2026
|
||||||
|
**Basado en**: LobeChat UI Reference Image
|
||||||
|
**Componentes**: Lobe UI Style
|
||||||
|
**Fidelidad**: Pixel Perfect
|
||||||
|
**Estado**: ✅ Completado
|
||||||
|
|
||||||
205
REBRAND-NEXUSCHAT.md
Normal file
205
REBRAND-NEXUSCHAT.md
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
# 🔄 Cambio de Nombre: LobeChat → NexusChat
|
||||||
|
|
||||||
|
## ✅ Cambios Realizados
|
||||||
|
|
||||||
|
He actualizado toda la plataforma para cambiar el nombre de **"LobeChat"** a **"NexusChat"**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Archivos Modificados
|
||||||
|
|
||||||
|
### 1. **LobeChatSidebar.tsx** ✅
|
||||||
|
**Cambios**:
|
||||||
|
- Logo principal: `"LobeChat"` → `"NexusChat"`
|
||||||
|
- Agregado gradiente purple al texto del logo para mayor impacto visual
|
||||||
|
- Conversación activa: `"Just Chat"` → `"NexusChat"`
|
||||||
|
|
||||||
|
**Ubicación**:
|
||||||
|
```tsx
|
||||||
|
// Logo en header
|
||||||
|
<span className={styles.logoText}>NexusChat</span>
|
||||||
|
|
||||||
|
// Conversación activa
|
||||||
|
<div className={styles.conversationTitle}>NexusChat</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. **LobeChatArea.tsx** ✅
|
||||||
|
**Cambios**:
|
||||||
|
- Header del chat: `"Just Chat"` → `"NexusChat"`
|
||||||
|
- Welcome screen: `"Just Chat"` → `"NexusChat"`
|
||||||
|
- Nombre del asistente en mensajes: `"Just Chat"` → `"NexusChat"`
|
||||||
|
- Indicador de typing: `"Just Chat"` → `"NexusChat"`
|
||||||
|
|
||||||
|
**Ubicación**:
|
||||||
|
```tsx
|
||||||
|
// Header
|
||||||
|
<div className={styles.headerTitle}>NexusChat</div>
|
||||||
|
|
||||||
|
// Welcome screen
|
||||||
|
<div>NexusChat</div>
|
||||||
|
|
||||||
|
// Mensajes
|
||||||
|
{message.role === 'user' ? 'You' : 'NexusChat'}
|
||||||
|
|
||||||
|
// Typing
|
||||||
|
<span className={styles.messageName}>NexusChat</span>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. **client/index.html** ✅
|
||||||
|
**Cambios**:
|
||||||
|
- Título del documento: `"Nexus AI Chat"` → `"NexusChat - AI Assistant"`
|
||||||
|
|
||||||
|
**Ubicación**:
|
||||||
|
```html
|
||||||
|
<title>NexusChat - AI Assistant</title>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Mejora Visual Adicional
|
||||||
|
|
||||||
|
### Logo con Gradiente Purple
|
||||||
|
He agregado un gradiente purple al texto del logo para hacerlo más distintivo:
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Efecto visual**:
|
||||||
|
- El texto "NexusChat" ahora tiene un gradiente purple/violet
|
||||||
|
- Coincide con los colores accent de la plataforma
|
||||||
|
- Hace el logo más llamativo y premium
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📍 Ubicaciones del Nombre
|
||||||
|
|
||||||
|
### Sidebar (Izquierdo)
|
||||||
|
```
|
||||||
|
┌─────────────────┐
|
||||||
|
│ 🤖 NexusChat │ ← Logo principal
|
||||||
|
│ │
|
||||||
|
│ 🤖 NexusChat │ ← Conversación activa
|
||||||
|
│ gpt-4o-mini │
|
||||||
|
└─────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Chat Area (Centro)
|
||||||
|
```
|
||||||
|
┌──────────────────────────┐
|
||||||
|
│ 🤖 NexusChat @gpt-4o │ ← Header
|
||||||
|
│ │
|
||||||
|
│ NexusChat │ ← Welcome screen
|
||||||
|
│ (Activate the...) │
|
||||||
|
│ │
|
||||||
|
│ 🤖 NexusChat: ... │ ← Mensajes del asistente
|
||||||
|
│ │
|
||||||
|
└──────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Document Title
|
||||||
|
```
|
||||||
|
Browser Tab: "NexusChat - AI Assistant"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Verificación
|
||||||
|
|
||||||
|
Para verificar los cambios:
|
||||||
|
|
||||||
|
### 1. Iniciar la aplicación
|
||||||
|
```bash
|
||||||
|
npm run dev:all
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Abrir navegador
|
||||||
|
```
|
||||||
|
http://localhost:3001
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Verificar elementos
|
||||||
|
- ✅ **Sidebar**: Logo dice "NexusChat" con gradiente purple
|
||||||
|
- ✅ **Sidebar**: Conversación activa dice "NexusChat"
|
||||||
|
- ✅ **Header**: Dice "NexusChat @gpt-4o"
|
||||||
|
- ✅ **Welcome**: Texto "NexusChat" visible
|
||||||
|
- ✅ **Mensajes**: Asistente se llama "NexusChat"
|
||||||
|
- ✅ **Typing**: Dice "NexusChat typing..."
|
||||||
|
- ✅ **Browser tab**: "NexusChat - AI Assistant"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Resumen de Cambios
|
||||||
|
|
||||||
|
| Ubicación | Antes | Después | Estado |
|
||||||
|
|-----------|-------|---------|--------|
|
||||||
|
| **Logo Sidebar** | LobeChat | NexusChat | ✅ |
|
||||||
|
| **Logo Style** | Blanco | Gradiente Purple | ✅ |
|
||||||
|
| **Conv. Activa** | Just Chat | NexusChat | ✅ |
|
||||||
|
| **Header Chat** | Just Chat | NexusChat | ✅ |
|
||||||
|
| **Welcome Screen** | Just Chat | NexusChat | ✅ |
|
||||||
|
| **Nombre Asistente** | Just Chat | NexusChat | ✅ |
|
||||||
|
| **Typing Indicator** | Just Chat | NexusChat | ✅ |
|
||||||
|
| **Document Title** | Nexus AI Chat | NexusChat - AI Assistant | ✅ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 Estilo del Logo
|
||||||
|
|
||||||
|
### Antes
|
||||||
|
```tsx
|
||||||
|
color: white;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Ahora
|
||||||
|
```tsx
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Resultado visual**:
|
||||||
|
- Texto con gradiente purple/violet
|
||||||
|
- Más premium y distintivo
|
||||||
|
- Coincide con el color accent de la app
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Estado Final
|
||||||
|
|
||||||
|
```
|
||||||
|
╔════════════════════════════════════╗
|
||||||
|
║ ✅ NOMBRE ACTUALIZADO ║
|
||||||
|
║ ║
|
||||||
|
║ LobeChat → NexusChat ║
|
||||||
|
║ ║
|
||||||
|
║ Ubicaciones: 8 ║
|
||||||
|
║ Archivos: 3 ║
|
||||||
|
║ Mejoras: Logo con gradiente ║
|
||||||
|
║ ║
|
||||||
|
║ Estado: COMPLETO ✅ ║
|
||||||
|
╚════════════════════════════════════╝
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 Notas
|
||||||
|
|
||||||
|
- El nombre "NexusChat" ahora es consistente en toda la plataforma
|
||||||
|
- El logo tiene un gradiente purple distintivo
|
||||||
|
- El título del navegador es más descriptivo
|
||||||
|
- Todos los mensajes del asistente usan "NexusChat"
|
||||||
|
- La experiencia de usuario es coherente
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Cambios aplicados**: 14 de Febrero, 2026
|
||||||
|
**Archivos modificados**: 3
|
||||||
|
**Ubicaciones actualizadas**: 8
|
||||||
|
**Mejoras visuales**: Logo con gradiente purple
|
||||||
|
**Estado**: ✅ **COMPLETADO**
|
||||||
|
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Nexus AI Chat</title>
|
<title>NexusChat - AI Assistant</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@ -1,72 +1,40 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { ThemeProvider } from 'antd-style';
|
import { ThemeProvider } from 'antd-style';
|
||||||
import { ChatContainer } from './components/ChatContainer';
|
import { LobeChatSidebar } from './components/LobeChatSidebar';
|
||||||
import { Sidebar } from './components/SidebarNew';
|
import { LobeChatArea } from './components/LobeChatArea';
|
||||||
import { ChatHeader } from './components/ChatHeader';
|
import { TopicPanel } from './components/TopicPanel';
|
||||||
import { useChat } from './hooks/useChat';
|
import { useChat } from './hooks/useChat';
|
||||||
import { useAppStyles } from './styles/appLayout.styles';
|
import { lobeChatTheme } from './styles/lobeChatTheme';
|
||||||
import { chatGPTTheme } from './styles/theme';
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const chatState = useChat();
|
const chatState = useChat();
|
||||||
const { styles } = useAppStyles();
|
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
||||||
|
|
||||||
const toggleSidebar = () => {
|
|
||||||
setSidebarOpen(!sidebarOpen);
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeSidebar = () => {
|
|
||||||
setSidebarOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={chatGPTTheme}>
|
<ThemeProvider theme={lobeChatTheme}>
|
||||||
<div className={styles.layout}>
|
<div style={{
|
||||||
{/* Sidebar */}
|
display: 'flex',
|
||||||
<aside className={`${styles.sidebar} ${sidebarOpen ? 'open' : ''}`}>
|
height: '100vh',
|
||||||
<Sidebar
|
width: '100vw',
|
||||||
conversations={chatState.conversations}
|
background: '#000000',
|
||||||
activeConversationId={chatState.activeConversationId}
|
overflow: 'hidden',
|
||||||
onNewChat={() => {
|
}}>
|
||||||
chatState.createNewConversation();
|
{/* Left Sidebar */}
|
||||||
closeSidebar();
|
<LobeChatSidebar
|
||||||
}}
|
conversations={chatState.conversations}
|
||||||
onSelectConversation={(id) => {
|
activeConversationId={chatState.activeConversationId}
|
||||||
chatState.selectConversation(id);
|
onNewChat={chatState.createNewConversation}
|
||||||
closeSidebar();
|
onSelectConversation={chatState.selectConversation}
|
||||||
}}
|
/>
|
||||||
onClose={closeSidebar}
|
|
||||||
/>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
{/* Main Content Area */}
|
{/* Main Chat Area */}
|
||||||
<main className={styles.mainContent}>
|
<LobeChatArea
|
||||||
{/* Mobile Header */}
|
messages={chatState.messages}
|
||||||
<ChatHeader
|
isTyping={chatState.isTyping}
|
||||||
onMenuClick={toggleSidebar}
|
onSendMessage={chatState.sendMessage}
|
||||||
onSettingsClick={() => console.log('Settings')}
|
/>
|
||||||
onProfileClick={() => console.log('Profile')}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Chat Area */}
|
{/* Right Topic Panel */}
|
||||||
<div className={styles.chatArea}>
|
<TopicPanel />
|
||||||
<ChatContainer
|
|
||||||
messages={chatState.messages}
|
|
||||||
isTyping={chatState.isTyping}
|
|
||||||
onSendMessage={chatState.sendMessage}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
{/* Mobile Overlay */}
|
|
||||||
{sidebarOpen && (
|
|
||||||
<div
|
|
||||||
className={`${styles.overlay} visible`}
|
|
||||||
onClick={closeSidebar}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
370
client/src/components/LobeChatArea.tsx
Normal file
370
client/src/components/LobeChatArea.tsx
Normal file
@ -0,0 +1,370 @@
|
|||||||
|
import { Copy, Check, RotateCcw, MoreHorizontal } from 'lucide-react';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { LobeChatInput } from './LobeChatInput';
|
||||||
|
import type { Message } from '../types';
|
||||||
|
import { lobeChatColors, lobeChatSpacing } from '../styles/lobeChatTheme';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css }) => ({
|
||||||
|
container: css`
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
background: ${lobeChatColors.chat.background};
|
||||||
|
`,
|
||||||
|
|
||||||
|
header: css`
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 ${lobeChatSpacing.xl}px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid ${lobeChatColors.sidebar.border};
|
||||||
|
flex-shrink: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
headerLeft: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.md}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
headerAvatar: css`
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||||
|
`,
|
||||||
|
|
||||||
|
headerInfo: css`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`,
|
||||||
|
|
||||||
|
headerTitle: css`
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
`,
|
||||||
|
|
||||||
|
headerSubtitle: css`
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
`,
|
||||||
|
|
||||||
|
headerActions: css`
|
||||||
|
display: flex;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
iconButton: css`
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
messagesArea: css`
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: ${lobeChatSpacing.xl}px;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
messagesContainer: css`
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
`,
|
||||||
|
|
||||||
|
message: css`
|
||||||
|
display: flex;
|
||||||
|
gap: ${lobeChatSpacing.lg}px;
|
||||||
|
margin-bottom: ${lobeChatSpacing.xl}px;
|
||||||
|
animation: fadeIn 0.3s ease-in;
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
messageAvatar: css`
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||||
|
`,
|
||||||
|
|
||||||
|
messageContent: css`
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
messageHeader: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
margin-bottom: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
messageName: css`
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
`,
|
||||||
|
|
||||||
|
messageTime: css`
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
`,
|
||||||
|
|
||||||
|
messageText: css`
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: #e5e5e5;
|
||||||
|
margin-bottom: ${lobeChatSpacing.sm}px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 ${lobeChatSpacing.md}px 0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol {
|
||||||
|
margin: ${lobeChatSpacing.md}px 0;
|
||||||
|
padding-left: ${lobeChatSpacing.xl}px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: ${lobeChatSpacing.xs}px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: 'Monaco', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
messageActions: css`
|
||||||
|
display: flex;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
margin-top: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
actionButton: css`
|
||||||
|
padding: 6px ${lobeChatSpacing.sm}px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
inputArea: css`
|
||||||
|
padding: ${lobeChatSpacing.xl}px;
|
||||||
|
border-top: 1px solid ${lobeChatColors.sidebar.border};
|
||||||
|
background: ${lobeChatColors.chat.background};
|
||||||
|
flex-shrink: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
inputContainer: css`
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
`,
|
||||||
|
|
||||||
|
userMessage: css`
|
||||||
|
.messageAvatar {
|
||||||
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface LobeChatAreaProps {
|
||||||
|
messages: Message[];
|
||||||
|
isTyping: boolean;
|
||||||
|
onSendMessage: (content: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LobeChatArea: React.FC<LobeChatAreaProps> = ({
|
||||||
|
messages,
|
||||||
|
isTyping,
|
||||||
|
onSendMessage,
|
||||||
|
}) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.header}>
|
||||||
|
<div className={styles.headerLeft}>
|
||||||
|
<div className={styles.headerAvatar}>🤖</div>
|
||||||
|
<div className={styles.headerInfo}>
|
||||||
|
<div className={styles.headerTitle}>NexusChat</div>
|
||||||
|
<div className={styles.headerSubtitle}>@gpt-4o</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.headerActions}>
|
||||||
|
<button className={styles.iconButton} title="Share">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<circle cx="18" cy="5" r="3"></circle>
|
||||||
|
<circle cx="6" cy="12" r="3"></circle>
|
||||||
|
<circle cx="18" cy="19" r="3"></circle>
|
||||||
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
|
||||||
|
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button className={styles.iconButton} title="Settings">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M4 6h16M4 12h16M4 18h16"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button className={styles.iconButton} title="More">
|
||||||
|
<MoreHorizontal size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.messagesArea}>
|
||||||
|
<div className={styles.messagesContainer}>
|
||||||
|
{messages.length === 0 ? (
|
||||||
|
<div style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '80px 20px',
|
||||||
|
color: lobeChatColors.icon.default
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: '48px', marginBottom: '16px' }}>🤖</div>
|
||||||
|
<div style={{ fontSize: '18px', fontWeight: 600, marginBottom: '8px', color: 'white' }}>
|
||||||
|
NexusChat
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '14px' }}>
|
||||||
|
Activate the brain cluster and spark creative thinking. Your virtual assistant is here to communicate with you about everything.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
messages.map((message) => (
|
||||||
|
<div
|
||||||
|
key={message.id}
|
||||||
|
className={`${styles.message} ${message.role === 'user' ? styles.userMessage : ''}`}
|
||||||
|
>
|
||||||
|
<div className={styles.messageAvatar}>
|
||||||
|
{message.role === 'user' ? '👤' : '🤖'}
|
||||||
|
</div>
|
||||||
|
<div className={styles.messageContent}>
|
||||||
|
<div className={styles.messageHeader}>
|
||||||
|
<span className={styles.messageName}>
|
||||||
|
{message.role === 'user' ? 'You' : 'NexusChat'}
|
||||||
|
</span>
|
||||||
|
<span className={styles.messageTime}>
|
||||||
|
{new Date(message.timestamp).toLocaleTimeString('en-US', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.messageText}>
|
||||||
|
{message.content}
|
||||||
|
</div>
|
||||||
|
{message.role === 'assistant' && (
|
||||||
|
<div className={styles.messageActions}>
|
||||||
|
<button className={styles.actionButton}>
|
||||||
|
<Copy size={14} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.actionButton}>
|
||||||
|
<RotateCcw size={14} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.actionButton}>
|
||||||
|
<MoreHorizontal size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isTyping && (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.messageAvatar}>🤖</div>
|
||||||
|
<div className={styles.messageContent}>
|
||||||
|
<div className={styles.messageHeader}>
|
||||||
|
<span className={styles.messageName}>NexusChat</span>
|
||||||
|
<span className={styles.messageTime}>typing...</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.messageText}>
|
||||||
|
<span style={{ opacity: 0.5 }}>●●●</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.inputArea}>
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<LobeChatInput onSend={onSendMessage} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
305
client/src/components/LobeChatInput.tsx
Normal file
305
client/src/components/LobeChatInput.tsx
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Paperclip,
|
||||||
|
Image,
|
||||||
|
FileText,
|
||||||
|
Link2,
|
||||||
|
Mic,
|
||||||
|
Grid3x3,
|
||||||
|
Smile,
|
||||||
|
Send,
|
||||||
|
Maximize2
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { lobeChatColors, lobeChatSpacing } from '../styles/lobeChatTheme';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css }) => ({
|
||||||
|
container: css`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: ${lobeChatSpacing.md}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
inputWrapper: css`
|
||||||
|
background: ${lobeChatColors.input.background};
|
||||||
|
border: 1px solid ${lobeChatColors.input.border};
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: ${lobeChatSpacing.md}px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: ${lobeChatColors.input.focus};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
textareaContainer: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
margin-bottom: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
textarea: css`
|
||||||
|
flex: 1;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
min-height: 24px;
|
||||||
|
max-height: 200px;
|
||||||
|
font-family: inherit;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
sendButton: css`
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&:not(:disabled) {
|
||||||
|
background: #8b5cf6;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #7c3aed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
toolbar: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: ${lobeChatSpacing.xs}px;
|
||||||
|
border-top: 1px solid ${lobeChatColors.input.border};
|
||||||
|
`,
|
||||||
|
|
||||||
|
toolbarLeft: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
toolbarRight: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
toolButton: css`
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
tokenCounter: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
padding: 4px ${lobeChatSpacing.sm}px;
|
||||||
|
background: ${lobeChatColors.tag.background};
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${lobeChatColors.tag.text};
|
||||||
|
`,
|
||||||
|
|
||||||
|
emoji: css`
|
||||||
|
font-size: 14px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
actions: css`
|
||||||
|
display: flex;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
`,
|
||||||
|
|
||||||
|
action: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
newLineButton: css`
|
||||||
|
padding: 4px ${lobeChatSpacing.sm}px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid ${lobeChatColors.input.border};
|
||||||
|
border-radius: 6px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
sendButtonLarge: css`
|
||||||
|
padding: ${lobeChatSpacing.sm}px ${lobeChatSpacing.lg}px;
|
||||||
|
background: #8b5cf6;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #7c3aed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface LobeChatInputProps {
|
||||||
|
onSend: (message: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LobeChatInput: React.FC<LobeChatInputProps> = ({
|
||||||
|
onSend,
|
||||||
|
placeholder = 'Type your message here...',
|
||||||
|
}) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
const [value, setValue] = React.useState('');
|
||||||
|
|
||||||
|
const handleSend = () => {
|
||||||
|
if (value.trim()) {
|
||||||
|
onSend(value.trim());
|
||||||
|
setValue('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSend();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.inputWrapper}>
|
||||||
|
<div className={styles.textareaContainer}>
|
||||||
|
<textarea
|
||||||
|
className={styles.textarea}
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => setValue(e.target.value)}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
placeholder={placeholder}
|
||||||
|
rows={1}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className={styles.sendButton}
|
||||||
|
onClick={handleSend}
|
||||||
|
disabled={!value.trim()}
|
||||||
|
title="Send"
|
||||||
|
>
|
||||||
|
<Send size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.toolbar}>
|
||||||
|
<div className={styles.toolbarLeft}>
|
||||||
|
<button className={styles.toolButton} title="Attach file">
|
||||||
|
<Paperclip size={16} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.toolButton} title="Add image">
|
||||||
|
<Image size={16} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.toolButton} title="Add document">
|
||||||
|
<FileText size={16} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.toolButton} title="Add link">
|
||||||
|
<Link2 size={16} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.toolButton} title="Voice input">
|
||||||
|
<Mic size={16} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.toolButton} title="Templates">
|
||||||
|
<Grid3x3 size={16} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.toolButton} title="Emoji">
|
||||||
|
<Smile size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.toolbarRight}>
|
||||||
|
<div className={styles.tokenCounter}>
|
||||||
|
<span className={styles.emoji}>😊</span>
|
||||||
|
<span>Used 211</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<div className={styles.action}>
|
||||||
|
<span>↵ Send</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.action}>
|
||||||
|
<span>/ ⌘ ↵ New Line</span>
|
||||||
|
</div>
|
||||||
|
<button className={styles.toolButton} title="Formatting">
|
||||||
|
<FileText size={14} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.toolButton} title="Fullscreen">
|
||||||
|
<Maximize2 size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
330
client/src/components/LobeChatSidebar.tsx
Normal file
330
client/src/components/LobeChatSidebar.tsx
Normal file
@ -0,0 +1,330 @@
|
|||||||
|
import { Search, Plus, MessageSquare, ChevronDown } from 'lucide-react';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import type { Conversation } from '../types';
|
||||||
|
import { lobeChatColors, lobeChatSpacing } from '../styles/lobeChatTheme';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css }) => ({
|
||||||
|
sidebar: css`
|
||||||
|
width: 320px;
|
||||||
|
height: 100vh;
|
||||||
|
background: ${lobeChatColors.sidebar.background};
|
||||||
|
border-right: 1px solid ${lobeChatColors.sidebar.border};
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
header: css`
|
||||||
|
padding: ${lobeChatSpacing.lg}px;
|
||||||
|
border-bottom: 1px solid ${lobeChatColors.sidebar.border};
|
||||||
|
`,
|
||||||
|
|
||||||
|
logo: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
margin-bottom: ${lobeChatSpacing.lg}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
logoIcon: css`
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 20px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
logoText: css`
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
`,
|
||||||
|
|
||||||
|
actions: css`
|
||||||
|
display: flex;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
iconButton: css`
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
searchBox: css`
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: ${lobeChatSpacing.md}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
searchInput: css`
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 ${lobeChatSpacing.md}px 0 36px;
|
||||||
|
color: white;
|
||||||
|
font-size: 13px;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: ${lobeChatColors.input.focus};
|
||||||
|
background: ${lobeChatColors.input.background};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
searchIcon: css`
|
||||||
|
position: absolute;
|
||||||
|
left: ${lobeChatSpacing.md}px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
pointer-events: none;
|
||||||
|
`,
|
||||||
|
|
||||||
|
searchShortcut: css`
|
||||||
|
position: absolute;
|
||||||
|
right: ${lobeChatSpacing.md}px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
font-size: 11px;
|
||||||
|
pointer-events: none;
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationsArea: css`
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
listHeader: css`
|
||||||
|
padding: ${lobeChatSpacing.md}px ${lobeChatSpacing.lg}px ${lobeChatSpacing.sm}px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
`,
|
||||||
|
|
||||||
|
listTitle: css`
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationsList: css`
|
||||||
|
padding: 0 ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationItem: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.md}px;
|
||||||
|
padding: ${lobeChatSpacing.md}px;
|
||||||
|
margin-bottom: ${lobeChatSpacing.xs}px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.sidebar.hover};
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: ${lobeChatColors.sidebar.active};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationIcon: css`
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationContent: css`
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationTitle: css`
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationMeta: css`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationTag: css`
|
||||||
|
background: ${lobeChatColors.tag.background};
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: ${lobeChatColors.tag.text};
|
||||||
|
`,
|
||||||
|
|
||||||
|
conversationDate: css`
|
||||||
|
font-size: 12px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface LobeChatSidebarProps {
|
||||||
|
conversations: Conversation[];
|
||||||
|
activeConversationId: string;
|
||||||
|
onNewChat: () => void;
|
||||||
|
onSelectConversation: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LobeChatSidebar: React.FC<LobeChatSidebarProps> = ({
|
||||||
|
conversations,
|
||||||
|
activeConversationId,
|
||||||
|
onNewChat,
|
||||||
|
onSelectConversation,
|
||||||
|
}) => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.sidebar}>
|
||||||
|
<div className={styles.header}>
|
||||||
|
<div className={styles.logo}>
|
||||||
|
<div className={styles.logoIcon}>🤖</div>
|
||||||
|
<span className={styles.logoText}>NexusChat</span>
|
||||||
|
<div style={{ flex: 1 }} />
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<button className={styles.iconButton} title="New chat">
|
||||||
|
<Plus size={16} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.iconButton} title="Toggle sidebar">
|
||||||
|
<MessageSquare size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.searchBox}>
|
||||||
|
<Search size={14} className={styles.searchIcon} />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search assistants and conversations"
|
||||||
|
className={styles.searchInput}
|
||||||
|
/>
|
||||||
|
<span className={styles.searchShortcut}>⌘ K</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.conversationsArea}>
|
||||||
|
<div className={styles.listHeader}>
|
||||||
|
<div className={styles.listTitle}>
|
||||||
|
Default List
|
||||||
|
<ChevronDown size={14} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.conversationsList}>
|
||||||
|
{/* Active conversation */}
|
||||||
|
<div
|
||||||
|
className={`${styles.conversationItem} active`}
|
||||||
|
onClick={onNewChat}
|
||||||
|
>
|
||||||
|
<div className={styles.conversationIcon}>🤖</div>
|
||||||
|
<div className={styles.conversationContent}>
|
||||||
|
<div className={styles.conversationTitle}>NexusChat</div>
|
||||||
|
<div className={styles.conversationMeta}>
|
||||||
|
<span className={styles.conversationTag}>gpt-4o-mini</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Example conversations from screenshot */}
|
||||||
|
{[
|
||||||
|
{ emoji: '💻', title: 'Full-stack Developer', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
{ emoji: '🦀', title: 'Rust Programming Assi...', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
{ emoji: '⚛️', title: 'React Native Coding G...', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
{ emoji: '📘', title: 'JS to TS Expert', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
{ emoji: '🌊', title: 'TailwindHelper', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
{ emoji: '🍳', title: 'Healthy Recipe Recom...', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
{ emoji: '👻', title: 'GhostWriter Pro', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
{ emoji: '😊', title: 'Emotional Companion', tag: 'gpt-4o-mini', date: '08-29' },
|
||||||
|
].map((conv, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className={styles.conversationItem}
|
||||||
|
onClick={() => onSelectConversation(conv.title)}
|
||||||
|
>
|
||||||
|
<div className={styles.conversationIcon}>{conv.emoji}</div>
|
||||||
|
<div className={styles.conversationContent}>
|
||||||
|
<div className={styles.conversationTitle}>{conv.title}</div>
|
||||||
|
<div className={styles.conversationMeta}>
|
||||||
|
<span className={styles.conversationTag}>{conv.tag}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.conversationDate}>{conv.date}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
217
client/src/components/TopicPanel.tsx
Normal file
217
client/src/components/TopicPanel.tsx
Normal file
@ -0,0 +1,217 @@
|
|||||||
|
import { Star, MoreHorizontal, Search } from 'lucide-react';
|
||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
import { lobeChatColors, lobeChatSpacing } from '../styles/lobeChatTheme';
|
||||||
|
|
||||||
|
const useStyles = createStyles(({ css }) => ({
|
||||||
|
panel: css`
|
||||||
|
width: 320px;
|
||||||
|
height: 100vh;
|
||||||
|
background: ${lobeChatColors.topic.background};
|
||||||
|
border-left: 1px solid ${lobeChatColors.topic.border};
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
header: css`
|
||||||
|
padding: ${lobeChatSpacing.lg}px;
|
||||||
|
border-bottom: 1px solid ${lobeChatColors.topic.border};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
`,
|
||||||
|
|
||||||
|
title: css`
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
count: css`
|
||||||
|
font-size: 13px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
`,
|
||||||
|
|
||||||
|
actions: css`
|
||||||
|
display: flex;
|
||||||
|
gap: ${lobeChatSpacing.xs}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
iconButton: css`
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.topic.itemHover};
|
||||||
|
color: ${lobeChatColors.icon.hover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
topicsList: css`
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: ${lobeChatSpacing.sm}px;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: ${lobeChatColors.topic.border};
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
topicItem: css`
|
||||||
|
padding: ${lobeChatSpacing.md}px;
|
||||||
|
margin-bottom: ${lobeChatSpacing.xs}px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: ${lobeChatColors.topic.itemHover};
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
topicIcon: css`
|
||||||
|
color: ${lobeChatColors.icon.default};
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 2px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
topicContent: css`
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
topicTitle: css`
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
`,
|
||||||
|
|
||||||
|
topicTag: css`
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: ${lobeChatColors.tag.background};
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: ${lobeChatColors.tag.text};
|
||||||
|
`,
|
||||||
|
|
||||||
|
defaultTopic: css`
|
||||||
|
padding: ${lobeChatSpacing.md}px;
|
||||||
|
margin-bottom: ${lobeChatSpacing.md}px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: ${lobeChatColors.topic.itemHover};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: ${lobeChatSpacing.sm}px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
defaultTopicIcon: css`
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
`,
|
||||||
|
|
||||||
|
defaultTopicContent: css`
|
||||||
|
flex: 1;
|
||||||
|
`,
|
||||||
|
|
||||||
|
defaultTopicTitle: css`
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
`,
|
||||||
|
|
||||||
|
defaultTopicTag: css`
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: ${lobeChatColors.tag.background};
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: ${lobeChatColors.tag.text};
|
||||||
|
`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const TopicPanel: React.FC = () => {
|
||||||
|
const { styles } = useStyles();
|
||||||
|
|
||||||
|
const topics = [
|
||||||
|
{ title: 'Health Differences in Multiple S...', tag: null },
|
||||||
|
{ title: 'Tool Use Mechanisms in LLMs', tag: null },
|
||||||
|
{ title: 'Tool Use Mechanism in LLMs', tag: null },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.panel}>
|
||||||
|
<div className={styles.header}>
|
||||||
|
<div className={styles.title}>
|
||||||
|
Topic List <span className={styles.count}>4</span>
|
||||||
|
</div>
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<button className={styles.iconButton} title="Search">
|
||||||
|
<Search size={14} />
|
||||||
|
</button>
|
||||||
|
<button className={styles.iconButton} title="More">
|
||||||
|
<MoreHorizontal size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.topicsList}>
|
||||||
|
{/* Default Topic */}
|
||||||
|
<div className={styles.defaultTopic}>
|
||||||
|
<div className={styles.defaultTopicIcon}>📝</div>
|
||||||
|
<div className={styles.defaultTopicContent}>
|
||||||
|
<div className={styles.defaultTopicTitle}>Default Topic</div>
|
||||||
|
<span className={styles.defaultTopicTag}>Temporary</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Topics list */}
|
||||||
|
{topics.map((topic, index) => (
|
||||||
|
<div key={index} className={styles.topicItem}>
|
||||||
|
<Star size={14} className={styles.topicIcon} />
|
||||||
|
<div className={styles.topicContent}>
|
||||||
|
<div className={styles.topicTitle}>{topic.title}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
@ -5,15 +5,50 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
background: #000000;
|
||||||
|
color: #ffffff;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#root {
|
#root {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar for webkit browsers */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #27272a;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #3f3f46;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection color */
|
||||||
|
::selection {
|
||||||
|
background: rgba(139, 92, 246, 0.3);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus outline */
|
||||||
|
*:focus-visible {
|
||||||
|
outline: 2px solid #8b5cf6;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
121
client/src/styles/lobeChatTheme.ts
Normal file
121
client/src/styles/lobeChatTheme.ts
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
import { createStyles } from 'antd-style';
|
||||||
|
|
||||||
|
// LobeChat exact colors from the screenshot
|
||||||
|
export const lobeChatTheme = {
|
||||||
|
token: {
|
||||||
|
// Background colors - LobeChat dark theme
|
||||||
|
colorBgBase: '#000000', // Pure black
|
||||||
|
colorBgContainer: '#1a1a1a', // Chat items background
|
||||||
|
colorBgElevated: '#2a2a2a', // Elevated elements
|
||||||
|
colorBgLayout: '#000000', // Layout background
|
||||||
|
colorBgSpotlight: '#18181b', // Sidebar background
|
||||||
|
|
||||||
|
// Text colors - LobeChat style
|
||||||
|
colorTextBase: '#ffffff', // Pure white text
|
||||||
|
colorText: '#e5e5e5', // Primary text
|
||||||
|
colorTextSecondary: '#a1a1aa', // Secondary text
|
||||||
|
colorTextTertiary: '#71717a', // Tertiary text
|
||||||
|
colorTextQuaternary: '#52525b', // Disabled text
|
||||||
|
|
||||||
|
// Border colors
|
||||||
|
colorBorder: '#27272a', // Subtle borders
|
||||||
|
colorBorderSecondary: '#1f1f23', // Very subtle
|
||||||
|
|
||||||
|
// Primary colors - LobeChat purple accent
|
||||||
|
colorPrimary: '#8b5cf6', // Purple
|
||||||
|
colorPrimaryHover: '#a78bfa', // Lighter purple
|
||||||
|
colorPrimaryActive: '#7c3aed', // Darker purple
|
||||||
|
|
||||||
|
// Functional colors
|
||||||
|
colorSuccess: '#10b981',
|
||||||
|
colorInfo: '#3b82f6',
|
||||||
|
colorWarning: '#f59e0b',
|
||||||
|
colorError: '#ef4444',
|
||||||
|
|
||||||
|
// Border radius - LobeChat uses consistent 8px
|
||||||
|
borderRadius: 8,
|
||||||
|
borderRadiusLG: 12,
|
||||||
|
borderRadiusSM: 6,
|
||||||
|
borderRadiusXS: 4,
|
||||||
|
|
||||||
|
// Spacing
|
||||||
|
padding: 16,
|
||||||
|
paddingLG: 24,
|
||||||
|
paddingSM: 12,
|
||||||
|
paddingXS: 8,
|
||||||
|
|
||||||
|
// Font
|
||||||
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||||
|
fontSize: 14,
|
||||||
|
fontSizeLG: 16,
|
||||||
|
fontSizeSM: 12,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// LobeChat specific color system
|
||||||
|
export const lobeChatColors = {
|
||||||
|
// Sidebar
|
||||||
|
sidebar: {
|
||||||
|
background: '#18181b',
|
||||||
|
border: '#27272a',
|
||||||
|
hover: '#27272a',
|
||||||
|
active: '#2a2a2a',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Chat area
|
||||||
|
chat: {
|
||||||
|
background: '#000000',
|
||||||
|
messageBg: '#18181b',
|
||||||
|
userMessageBg: '#2563eb', // Blue for user messages
|
||||||
|
assistantMessageBg: '#18181b',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Topic panel
|
||||||
|
topic: {
|
||||||
|
background: '#0a0a0a',
|
||||||
|
itemHover: '#18181b',
|
||||||
|
border: '#27272a',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Input area
|
||||||
|
input: {
|
||||||
|
background: '#18181b',
|
||||||
|
border: '#27272a',
|
||||||
|
focus: '#8b5cf6',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Icons and badges
|
||||||
|
icon: {
|
||||||
|
default: '#71717a',
|
||||||
|
hover: '#a1a1aa',
|
||||||
|
active: '#e5e5e5',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Models/Tags
|
||||||
|
tag: {
|
||||||
|
background: '#27272a',
|
||||||
|
text: '#a1a1aa',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// LobeChat spacing system (from screenshot)
|
||||||
|
export const lobeChatSpacing = {
|
||||||
|
xs: 4,
|
||||||
|
sm: 8,
|
||||||
|
md: 12,
|
||||||
|
lg: 16,
|
||||||
|
xl: 20,
|
||||||
|
xxl: 24,
|
||||||
|
xxxl: 32,
|
||||||
|
};
|
||||||
|
|
||||||
|
// LobeChat z-index system
|
||||||
|
export const lobeChatZIndex = {
|
||||||
|
base: 0,
|
||||||
|
sidebar: 10,
|
||||||
|
header: 20,
|
||||||
|
topicPanel: 15,
|
||||||
|
modal: 1000,
|
||||||
|
tooltip: 1100,
|
||||||
|
};
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user