Update index.html

index.html

@@ -2242,6 +2242,68 @@
             animation: spin 1s linear infinite;
         }
 
+        /* Drag and Drop Overlay */
+        .drag-drop-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(16, 163, 127, 0.15);
+            backdrop-filter: blur(8px);
+            border: 2px dashed var(--accent-blue);
+            z-index: 500;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 20px;
+            pointer-events: none;
+            transition: all 0.3s ease;
+        }
+
+        .drag-drop-overlay.active {
+            display: flex;
+            animation: fadeIn 0.3s ease;
+        }
+
+        .drag-drop-icon {
+            width: 80px;
+            height: 80px;
+            background: rgba(16, 163, 127, 0.1);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--accent-blue);
+            animation: pulse-glow 2s infinite;
+        }
+
+        @keyframes pulse-glow {
+            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 163, 127, 0.4); }
+            50% { transform: scale(1.1); box-shadow: 0 0 20px 10px rgba(16, 163, 127, 0); }
+        }
+
+        .drag-drop-text {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .llm-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--border-color);
+            padding: 4px 10px;
+            border-radius: 8px;
+            font-size: 11px;
+            color: var(--text-secondary);
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
         @keyframes bounce {
 
             0%,
@@ -4674,7 +4736,13 @@
         </aside>
 
         <!-- Main Area -->
-        <main class="main-area hero-mode">
+        <main class="main-area hero-mode" id="mainArea">
+            <div class="drag-drop-overlay" id="dragDropOverlay">
+                <div class="drag-drop-icon">
+                    <i data-lucide="upload-cloud" style="width: 40px; height: 40px;"></i>
+                </div>
+                <div class="drag-drop-text">Drop files to upload to Nexa AI</div>
+            </div>
             <div class="main-background-lighting">
         <div class="ambient-glow glow-1"></div>
         <div class="ambient-glow glow-2"></div>
@@ -5435,7 +5503,18 @@
                     activateFeature('video');
                     break;
                 case 'upload':
-                    triggerUpload('Document');
+                    // Trigger hidden file input
+                    let fileInput = document.getElementById('hiddenFileInput');
+                    if (!fileInput) {
+                        fileInput = document.createElement('input');
+                        fileInput.type = 'file';
+                        fileInput.id = 'hiddenFileInput';
+                        fileInput.multiple = true;
+                        fileInput.style.display = 'none';
+                        fileInput.onchange = (e) => handleFiles(e.target.files);
+                        document.body.appendChild(fileInput);
+                    }
+                    fileInput.click();
                     return;
                 case 'voice':
                     toggleVoiceMode();
@@ -5881,6 +5960,83 @@
             });
         }
 
+        function setupDragAndDrop() {
+            const mainArea = document.getElementById('mainArea');
+            const overlay = document.getElementById('dragDropOverlay');
+            
+            if (!mainArea || !overlay) return;
+
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                mainArea.addEventListener(eventName, (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, false);
+            });
+
+            ['dragenter', 'dragover'].forEach(eventName => {
+                mainArea.addEventListener(eventName, () => {
+                    overlay.classList.add('active');
+                }, false);
+            });
+
+            ['dragleave', 'drop'].forEach(eventName => {
+                mainArea.addEventListener(eventName, () => {
+                    overlay.classList.remove('active');
+                }, false);
+            });
+
+            mainArea.addEventListener('drop', (e) => {
+                const dt = e.dataTransfer;
+                const files = dt.files;
+                if (files && files.length > 0) {
+                    handleFiles(files);
+                }
+            }, false);
+        }
+
+        function handleFiles(files) {
+            const container = document.getElementById('attachmentsContainer');
+            if (!container) return;
+            
+            container.style.display = 'flex';
+            
+            Array.from(files).forEach(file => {
+                const card = document.createElement('div');
+                card.className = 'file-attachment-card';
+                card.setAttribute('data-filename', file.name);
+                
+                const fileExt = file.name.split('.').pop().toUpperCase();
+                let iconColor = '#3182ce'; // Default blue
+                let iconName = 'file-text';
+
+                if (['JPG', 'JPEG', 'PNG', 'GIF', 'WEBP'].includes(fileExt)) {
+                    iconColor = '#10a37f';
+                    iconName = 'image';
+                } else if (fileExt === 'PDF') {
+                    iconColor = '#e53e3e';
+                    iconName = 'file-text';
+                }
+
+                card.innerHTML = `
+                    <div class="file-attachment-icon" style="background: ${iconColor}">
+                        <i data-lucide="${iconName}" style="width: 18px; height: 18px;"></i>
+                    </div>
+                    <div class="file-attachment-info">
+                        <span class="file-attachment-name">${file.name}</span>
+                        <span class="file-attachment-type">${fileExt} File</span>
+                    </div>
+                    <div class="file-attachment-remove" onclick="this.parentElement.remove(); if(document.getElementById('attachmentsContainer').children.length === 0) document.getElementById('attachmentsContainer').style.display='none';">
+                        <i data-lucide="x"></i>
+                    </div>
+                `;
+                container.appendChild(card);
+                if (window.lucide) lucide.createIcons();
+                
+                // Automatically start analysis if backend supports it
+                handleFileAnalysis(file, card);
+            });
+        }
+
         function setupEventListeners() {
             // FIXED: Restructured with early returns to prevent fall-through bugs
             document.addEventListener('click', (e) => {
@@ -6250,11 +6406,11 @@
              container.appendChild(textContainer);
              container.appendChild(cursor);
 
-             // Process in chunks (roughly 2-3 words at a time) for a smoother "line-by-line" feel
-             for (let i = 0; i < words.length; i += 2) {
+             // Optimized for maximum speed: Process in larger chunks with minimal delay
+             for (let i = 0; i < words.length; i += 8) {
                  if (!isTyping) break;
                  
-                 const chunk = words.slice(i, i + 2).join(' ');
+                 const chunk = words.slice(i, i + 8).join(' ');
                  const span = document.createElement('span');
                  span.className = 'streaming-text';
                  span.innerHTML = (i === 0 ? '' : ' ') + chunk;
@@ -6264,9 +6420,8 @@
                  
                  smoothScrollToBottom();
                  
-                 // Faster, more natural delay
-                 const delay = Math.floor(Math.random() * (40 - 15 + 1)) + 15;
-                 await new Promise(resolve => setTimeout(resolve, delay));
+                 // Minimum possible delay for ultra-fast "writing" effect
+                 await new Promise(resolve => setTimeout(resolve, 5));
              }
              
              cursor.remove();
@@ -6311,8 +6466,14 @@
             ];
             let statusIdx = 0;
 
+            const modelLabel = currentAiModel || 'Qwen 2.5';
+
             messageContent.innerHTML = `
                 <div style="display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding: 10px 0;">
+                    <div class="llm-badge">
+                        <i data-lucide="cpu" style="width:12px;"></i>
+                        <span>Using ${modelLabel}</span>
+                    </div>
                     <div class="ai-processing-ring">
                         <div class="blinking-emoji" style="width:24px; height:24px;">
                             <div class="eye" style="width:3px; height:5px;"></div>
@@ -6803,10 +6964,13 @@
                 const data = await response.json();
                 
                 if (data.results && data.results.length > 0) {
+                    const count = data.results.length;
+                    addMessage(`🔍 I found **${count} search results** related to your question. Let me visit the most relevant sources to gather accurate information.`, 'ai');
+                    
                     messageContent.innerHTML = `
                         <div class="tool-output-header">
                             <i data-lucide="search"></i>
-                            <span>Sources Discovered</span>
+                            <span>Intelligence Sources Discovered</span>
                         </div>
                         <div class="search-results">
                             ${data.results.map(res => `
@@ -6818,7 +6982,7 @@
                         </div>
                         <div class="compiling-loader" id="compilingLoader">
                             <i data-lucide="loader-2"></i>
-                            <span>Compiling synthesized research report...</span>
+                            <span>Synthesizing verified research report...</span>
                         </div>
                     `;
                     if (window.lucide) lucide.createIcons();
@@ -7685,6 +7849,8 @@
             }
 
             refreshIcons();
+            setupEventListeners();
+            setupDragAndDrop();
         }
 
         // --- SPA Routing Logic ---