# NovaChat Web UI - System Documentation

## Technical Stack
- **Frontend**: Bootstrap 5.3.0 + Custom CSS Variables
- **Markdown Processing**: Marked.js
- **Syntax Highlighting**: Highlight.js 11.2.0
- **Animations**: Animate.css 4.1.1
- **JS Runtime**: jQuery 3.6.0

## UI Components

### 1. Sidebar (`#sidebar`)
- **Dimensions**: Fixed 340px width
- **Color Scheme**:
  - Dark: `--sidebar-bg: #2d2d2d`
  - Light: `--sidebar-bg: #e9ecef`
- **Core Elements**:
  - New Chat button (`.btn-newchat`)
  - Collapsible navigation menu

### 2. Message System
- **User Messages**:
  - Class: `.user-msg`
  - Background: `--user-msg-bg: #15354f`
- **Assistant Messages**:
  - Class: `.assistant-msg` 
  - Text Color: `--assistant-msg-color: #9ef1a0`

### 3. Code Display

### 4. Topbar (`#topbar`)
- **Structure**:
  - App title container (`.title-container`)
  - Theme toggle button (`.btn-theme`)
  - User menu dropdown (`.user-menu`)
- **Functionality**:
  - Persistent across navigation
  - Mobile-responsive collapse

### 5. Input Area (`#input-container`)
- **Components**:
  - Multiline textarea (`.chat-input`)
  - Attachment button (`.btn-attach`)
  - Send button (`.btn-send`)
- **Validation**:
  - Empty input prevention
  - File type filtering
- **Wrapper**: `<pre>` with dark background (#1e1e1e)
- **Copy Functionality**:
  - Auto-injected copy buttons
  - Visual feedback on copy success

## Preservation Boundaries
- **Protected Endpoints**:
  - POST /chat
  - POST /clear 
- **Immutable Elements**:
  - Theme toggle storage mechanism
  - Core message animation logic

## JS Functionality Details

### `updateChat(history)`
- Renders messages with Markdown parsing
- Maintains system message filtering
- Preserves animation classes (`animate__fadeIn`)

### `addCopyButtons()`
- Auto-injects 📋 Copy buttons on `<pre>` blocks
- Uses navigator.clipboard API
- Visual feedback with 1.5s timeout

## UI Color Variables

### Dark Mode
- `--topbar-bg: #1a1a1a`
- `--input-bg: #2b2b2b`
- `--user-msg-bg: #15354f`
- `--assistant-msg-color: #9ef1a0`
- `--modal-overlay: rgba(0,0,0,0.7)`

### Light Mode
- `--topbar-bg: #ffffff`
- `--input-bg: #f8f9fa`
- `--user-msg-bg: #cce5ff`
- `--assistant-msg-color: #198754`
- `--modal-overlay: rgba(255,255,255,0.9)`

## Tool Modals

### Settings Modal (`.settings-modal`)
- **Triggers**: Gear icon (`.btn-settings`)
- **Contains**:
  - Model selection dropdown
  - Temperature slider
  - Max tokens input

### File Preview Modal (`.file-preview-modal`)
- **Features**:
  - Drag-and-drop upload
  - Thumbnail grid view
  - Metadata display

## Preservation Boundaries ✅
- `/chat` POST endpoint payload structure
- `localStorage` theme key handling
- Core message animation timing (300ms)
- Modal backdrop click handling