Enhance settings modal and chat functionality with new appearance and behavior options

- Added appearance settings for compact density, timestamp visibility, and reduced motion preferences in `settings-modal.html` and `settings-modal.js`.
- Implemented behavior settings for auto-scrolling during streaming and default expansion of thinking details.
- Updated `style.css` with new styles for the appearance settings and improved UI elements.
- Introduced inline help for first-time users in `chat.html`, enhancing user experience.
- Added lightweight virtualization for chat history to manage message display efficiently.

Author: TMHSDigital

src/deepseek_wrapper/static/settings-modal.js

@@ -168,11 +168,25 @@ window.saveSettingsModal = async function() {
     const extractAnswerOnlyCheckbox = document.getElementById('extract-answer-only');
     const extractAnswerOnly = extractAnswerOnlyCheckbox ? extractAnswerOnlyCheckbox.checked : false;
 
+    // Appearance
+    const compact = document.getElementById('appearance-compact-density')?.checked || false;
+    const timestamps = document.getElementById('appearance-show-timestamps')?.checked || false;
+    const reducedMotion = document.getElementById('appearance-reduced-motion')?.checked || false;
+
+    // Behavior
+    const autoScroll = document.getElementById('behavior-auto-scroll')?.checked || false;
+    const detailsDefault = document.getElementById('behavior-details-default')?.checked || false;
+
     // Store in localStorage
     localStorage.setItem('ds_username', username);
     localStorage.setItem('ds_avatar', avatar);
     localStorage.setItem('ds_system_prompt', systemPrompt);
     localStorage.setItem('ds_extract_answer_only', extractAnswerOnly);
+    localStorage.setItem('ds_compact_density', compact);
+    localStorage.setItem('ds_show_timestamps', timestamps);
+    localStorage.setItem('ds_reduced_motion', reducedMotion);
+    localStorage.setItem('ds_auto_scroll', autoScroll);
+    localStorage.setItem('ds_details_default', detailsDefault);
 
     // Save extract_answer_only setting to config
     try {
@@ -210,6 +224,20 @@ function updateUIWithSettings() {
         el.textContent = localStorage.getItem('ds_avatar') || 'U';
     });
 
+    // Apply appearance prefs
+    const compact = localStorage.getItem('ds_compact_density') === 'true';
+    document.documentElement.toggleAttribute('data-density-compact', compact);
+
+    const showTimestamps = localStorage.getItem('ds_show_timestamps') === 'true';
+    document.documentElement.toggleAttribute('data-show-timestamps', showTimestamps);
+
+    const reducedMotion = localStorage.getItem('ds_reduced_motion') === 'true';
+    document.documentElement.toggleAttribute('data-reduced-motion', reducedMotion);
+
+    // Behavior defaults
+    const detailsDefault = localStorage.getItem('ds_details_default') === 'true';
+    if (detailsDefault) sessionStorage.setItem('ds_thinking_expanded','true');
+
     // Update hidden form fields if they exist
     const usernameHidden = document.getElementById('user_name_hidden');
     const avatarHidden = document.getElementById('user_avatar_hidden');
@@ -238,6 +266,24 @@ function loadSettings() {
     if (extractAnswerOnlyCheckbox) {
         extractAnswerOnlyCheckbox.checked = extractAnswerOnly;
     }
+
+    // Appearance + Behavior fields
+    const compact = localStorage.getItem('ds_compact_density') === 'true';
+    const timestamps = localStorage.getItem('ds_show_timestamps') === 'true';
+    const reducedMotion = localStorage.getItem('ds_reduced_motion') === 'true';
+    const autoScroll = localStorage.getItem('ds_auto_scroll') === 'true';
+    const detailsDefault = localStorage.getItem('ds_details_default') === 'true';
+
+    const compactEl = document.getElementById('appearance-compact-density');
+    const tsEl = document.getElementById('appearance-show-timestamps');
+    const rmEl = document.getElementById('appearance-reduced-motion');
+    const asEl = document.getElementById('behavior-auto-scroll');
+    const ddEl = document.getElementById('behavior-details-default');
+    if (compactEl) compactEl.checked = compact;
+    if (tsEl) tsEl.checked = timestamps;
+    if (rmEl) rmEl.checked = reducedMotion;
+    if (asEl) asEl.checked = autoScroll;
+    if (ddEl) ddEl.checked = detailsDefault;
 
     // Load API key status
     fetch('/api/key-status')

src/deepseek_wrapper/static/style.css

@@ -18,6 +18,10 @@
     --border-color: #DEE2E6; /* Light gray border */
     --border-input-focus: var(--primary-light);
     --shadow-color: rgba(0, 0, 0, 0.05); /* Softer shadow */
+    /* Role-based tokens */
+    --bg-subtle: #F3F4F6;
+    --bg-hover: #ECEFF3;
+    --text-muted: #6B7280;
 
     --bubble-user-bg: var(--primary);
     --bubble-user-text: var(--text-on-primary);
@@ -37,6 +41,12 @@
     --max-width-content: 800px;
 
     --primary-rgb: 0, 122, 255;
+
+    /* Spacing tokens */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
 }
 
 /* Dark Theme */
@@ -59,6 +69,9 @@
     --border-color: #38383A; 
     --border-input-focus: var(--primary);
     --shadow-color: rgba(0, 0, 0, 0.2); 
+    --bg-subtle: #2A2A2C;
+    --bg-hover: #333336;
+    --text-muted: #9CA3AF;
 
     --bubble-user-bg: var(--primary);
     --bubble-user-text: var(--text-on-primary);
@@ -156,18 +169,18 @@ header.top-bar {
     display: flex;
     align-items: center;
     font-size: 0.85rem;
-    background-color: color-mix(in srgb, var(--primary) 6%, transparent);
+    background-color: var(--bg-subtle);
     border-radius: 20px;
     padding: 0.3rem 0.8rem;
-    color: var(--text-secondary);
+    color: var(--text-muted);
     margin-left: auto;
     margin-right: 1rem;
     transition: all 0.2s ease;
     position: relative;
 }
 
 .model-indicator:hover {
-    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+    background-color: var(--bg-hover);
     cursor: pointer;
 }
 
@@ -228,6 +241,23 @@ header.top-bar {
     gap: 1em;
 }
 
+/* Virtualized history controls */
+.load-older {
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+    background: var(--bg-subtle);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    padding: 6px 12px;
+    cursor: pointer;
+}
+.load-older:hover { background: var(--bg-hover); }
+.load-older svg { opacity: 0.7; }
+
 /* Date separators */
 .date-separator {
     align-self: center;
@@ -407,6 +437,35 @@ button#send-btn:disabled {
     transform: none;
 }
 
+/* First-run help */
+.first-run-help {
+    max-width: var(--max-width-content);
+    width: 100%;
+    margin: 0 auto;
+    padding: 0.5rem 1rem 0;
+}
+.first-run-help .tips {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    background: var(--bg-subtle);
+    border: 1px dashed var(--border-color);
+    border-radius: 10px;
+    padding: 8px 12px;
+}
+.first-run-help .help-dismiss {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    width: 28px; height: 28px; border-radius: 6px;
+}
+.first-run-help .help-dismiss:hover {
+    background: rgba(0,0,0,0.05);
+}
+
 /* File Upload Label - Enhanced */
 label[for="file-input"] {
     padding: 10px 16px;
@@ -602,6 +661,17 @@ label[for="file-input"]:active {
     backdrop-filter: blur(8px);
 }
 
+/* Compact density */
+[data-density-compact="true"] .bubble {
+    padding: 0.625rem 0.75rem;
+}
+[data-density-compact="true"] form#chat-form {
+    padding: 0.75rem;
+}
+[data-density-compact="true"] #user_message {
+    min-height: 38px;
+}
+
 .bubble:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.06);
@@ -615,9 +685,9 @@ label[for="file-input"]:active {
 }
 
 .assistant-msg {
-    background: rgba(var(--primary-rgb), 0.06);
+    background: rgba(var(--primary-rgb), 0.05);
     color: var(--bubble-assistant-text);
-    border: 1px solid rgba(var(--primary-rgb), 0.12);
+    border: 1px solid rgba(var(--primary-rgb), 0.10);
     border-bottom-left-radius: 6px;
     margin-left: 0.5rem;
     backdrop-filter: blur(8px);
@@ -674,6 +744,11 @@ label[for="file-input"]:active {
     opacity: 0.7;
 }
 
+/* Hide timestamps unless preference enabled */
+:root:not([data-show-timestamps="true"]) .timestamp {
+    display: none;
+}
+
 .bubble:hover .timestamp {
     opacity: 1;
     background-color: rgba(0,0,0,0.05);
@@ -1135,6 +1210,18 @@ label:focus {
     }
 }
 
+/* Reduced motion override via preference */
+[data-reduced-motion="true"] *,
+[data-reduced-motion="true"] *::before,
+[data-reduced-motion="true"] *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+}
+[data-reduced-motion="true"] .thinking-bar .progress { animation: none !important; }
+[data-reduced-motion="true"] .bubble:hover { transform: none !important; }
+[data-reduced-motion="true"] .action-btn:hover { transform: none !important; }
+
 /* High contrast support */
 @media (prefers-contrast: high) {
     :root {