1  # NovaChat Web UI - System Documentation
   2  
   3  ## Technical Stack
   4  - **Frontend**: Bootstrap 5.3.0 + Custom CSS Variables
   5  - **Markdown Processing**: Marked.js
   6  - **Syntax Highlighting**: Highlight.js 11.2.0
   7  - **Animations**: Animate.css 4.1.1
   8  - **JS Runtime**: jQuery 3.6.0
   9  
  10  ## UI Components
  11  
  12  ### 1. Sidebar (`#sidebar`)
  13  - **Dimensions**: Fixed 340px width
  14  - **Color Scheme**:
  15    - Dark: `--sidebar-bg: #2d2d2d`
  16    - Light: `--sidebar-bg: #e9ecef`
  17  - **Core Elements**:
  18    - New Chat button (`.btn-newchat`)
  19    - Collapsible navigation menu
  20  
  21  ### 2. Message System
  22  - **User Messages**:
  23    - Class: `.user-msg`
  24    - Background: `--user-msg-bg: #15354f`
  25  - **Assistant Messages**:
  26    - Class: `.assistant-msg` 
  27    - Text Color: `--assistant-msg-color: #9ef1a0`
  28  
  29  ### 3. Code Display
  30  
  31  ### 4. Topbar (`#topbar`)
  32  - **Structure**:
  33    - App title container (`.title-container`)
  34    - Theme toggle button (`.btn-theme`)
  35    - User menu dropdown (`.user-menu`)
  36  - **Functionality**:
  37    - Persistent across navigation
  38    - Mobile-responsive collapse
  39  
  40  ### 5. Input Area (`#input-container`)
  41  - **Components**:
  42    - Multiline textarea (`.chat-input`)
  43    - Attachment button (`.btn-attach`)
  44    - Send button (`.btn-send`)
  45  - **Validation**:
  46    - Empty input prevention
  47    - File type filtering
  48  - **Wrapper**: `<pre>` with dark background (#1e1e1e)
  49  - **Copy Functionality**:
  50    - Auto-injected copy buttons
  51    - Visual feedback on copy success
  52  
  53  ## Preservation Boundaries
  54  - **Protected Endpoints**:
  55    - POST /chat
  56    - POST /clear 
  57  - **Immutable Elements**:
  58    - Theme toggle storage mechanism
  59    - Core message animation logic
  60  
  61  ## JS Functionality Details
  62  
  63  ### `updateChat(history)`
  64  - Renders messages with Markdown parsing
  65  - Maintains system message filtering
  66  - Preserves animation classes (`animate__fadeIn`)
  67  
  68  ### `addCopyButtons()`
  69  - Auto-injects 📋 Copy buttons on `<pre>` blocks
  70  - Uses navigator.clipboard API
  71  - Visual feedback with 1.5s timeout
  72  
  73  ## UI Color Variables
  74  
  75  ### Dark Mode
  76  - `--topbar-bg: #1a1a1a`
  77  - `--input-bg: #2b2b2b`
  78  - `--user-msg-bg: #15354f`
  79  - `--assistant-msg-color: #9ef1a0`
  80  - `--modal-overlay: rgba(0,0,0,0.7)`
  81  
  82  ### Light Mode
  83  - `--topbar-bg: #ffffff`
  84  - `--input-bg: #f8f9fa`
  85  - `--user-msg-bg: #cce5ff`
  86  - `--assistant-msg-color: #198754`
  87  - `--modal-overlay: rgba(255,255,255,0.9)`
  88  
  89  ## Tool Modals
  90  
  91  ### Settings Modal (`.settings-modal`)
  92  - **Triggers**: Gear icon (`.btn-settings`)
  93  - **Contains**:
  94    - Model selection dropdown
  95    - Temperature slider
  96    - Max tokens input
  97  
  98  ### File Preview Modal (`.file-preview-modal`)
  99  - **Features**:
 100    - Drag-and-drop upload
 101    - Thumbnail grid view
 102    - Metadata display
 103  
 104  ## Preservation Boundaries ✅
 105  - `/chat` POST endpoint payload structure
 106  - `localStorage` theme key handling
 107  - Core message animation timing (300ms)
 108  - Modal backdrop click handling