Update static/index.html

static/index.html

@@ -244,10 +244,89 @@
         .assistant-answer strong {
             color: #8b5cf6;
         }
-        /* Image Grids */
+        
+        /* Text Sources - Now displayed FIRST */
+        .sources-section {
+            margin-top: 1rem;
+        }
+        
+        .sources-header {
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 0.75rem;
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        .source-card {
+            background: rgba(30, 41, 59, 0.4);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 1.25rem;
+            margin-bottom: 0.75rem;
+            transition: all 0.2s;
+            cursor: pointer;
+        }
+        .source-card:hover {
+            background: rgba(30, 41, 59, 0.8);
+            border-color: var(--primary);
+            transform: translateX(5px);
+        }
+        .source-title {
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 0.5rem;
+            font-size: 0.95rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .source-title svg {
+            flex-shrink: 0;
+        }
+        .source-excerpt {
+            font-style: italic;
+            color: #cbd5e1;
+            font-size: 0.9rem;
+            background: rgba(0, 0, 0, 0.2);
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+            border-left: 3px solid var(--primary);
+            word-wrap: break-word;
+            line-height: 1.6;
+        }
+        .source-meta {
+            margin-top: 0.75rem;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .view-source-link {
+            color: var(--primary);
+            text-decoration: none;
+            font-weight: 500;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.25rem;
+            transition: all 0.2s;
+        }
+        .view-source-link:hover {
+            color: #60a5fa;
+            text-decoration: underline;
+        }
+        
+        /* Image Grids - Now displayed SECOND */
+        .images-section {
+            margin-top: 1.5rem;
+        }
+        
         .images-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
             gap: 1.5rem;
             margin-top: 1rem;
         }
@@ -266,7 +345,7 @@
         .image-card a {
             display: block;
             overflow: hidden;
-            height: 180px;
+            height: 200px;
         }
         .image-card img {
             width: 100%;
@@ -284,46 +363,86 @@
         .image-filename {
             font-weight: 600;
             color: #f1f5f9;
-            font-size: 0.95rem;
+            font-size: 0.9rem;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            margin-bottom: 0.25rem;
         }
-        /* Text Sources */
-        .source-card {
-            background: rgba(30, 41, 59, 0.4);
+        .image-source {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+        
+        /* Follow-up Question Box */
+        .followup-container {
+            max-width: 800px;
+            margin: 1.5rem auto 0;
+            padding: 1.5rem;
+            background: rgba(30, 41, 59, 0.5);
+            border-radius: 1rem;
+            border: 1px dashed var(--border-color);
+        }
+        
+        .followup-label {
+            font-size: 0.9rem;
+            color: var(--text-muted);
+            margin-bottom: 0.75rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        .followup-input-group {
+            display: flex;
+            gap: 0.75rem;
+        }
+        
+        .followup-input-group input {
+            flex: 1;
+            background: rgba(15, 23, 42, 0.6);
             border: 1px solid var(--border-color);
-            border-radius: 0.75rem;
-            padding: 1.25rem;
-            margin-top: 0.75rem;
-            transition: background 0.2s;
+            padding: 0.75rem 1rem;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            color: white;
+            font-family: 'Outfit', sans-serif;
+            transition: all 0.2s;
         }
-        .source-card:hover {
-            background: rgba(30, 41, 59, 0.8);
-            border-color: #475569;
+        
+        .followup-input-group input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
         }
-        .source-title {
+        
+        .followup-input-group input::placeholder {
+            color: #64748b;
+        }
+        
+        .followup-btn {
+            background: rgba(59, 130, 246, 0.2);
+            color: #93c5fd;
+            border: 1px solid var(--primary);
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
             font-weight: 600;
-            color: var(--primary);
-            margin-bottom: 0.5rem;
             font-size: 0.95rem;
+            cursor: pointer;
+            transition: all 0.2s;
+            white-space: nowrap;
         }
-        .source-excerpt {
-            font-style: italic;
-            color: #cbd5e1;
-            font-size: 0.9rem;
-            background: rgba(0, 0, 0, 0.2);
-            padding: 0.75rem;
-            border-radius: 0.5rem;
-            border-left: 3px solid var(--primary);
-            word-wrap: break-word;
+        
+        .followup-btn:hover:not(:disabled) {
+            background: rgba(59, 130, 246, 0.3);
+            border-color: #60a5fa;
         }
-        .source-meta {
-            margin-top: 0.75rem;
-            font-size: 0.8rem;
-            color: var(--text-muted);
-            text-align: right;
+        
+        .followup-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
+        
         /* Animations */
         @keyframes fadeInDown {
             from {
@@ -436,8 +555,9 @@
             return div.innerHTML;
         }
         
-        async function askQuestion() {
-            const question = input.value.trim();
+        async function askQuestion(questionText = null) {
+            // Get question from parameter or main input
+            const question = questionText || input.value.trim();
             if (!question) return;
             
             // UI State updates
@@ -487,11 +607,86 @@
                 assistantAnswer.innerHTML = `<strong>Assistant:</strong><br>${escapeHtml(data.answer).replace(/\n/g, '<br>')}`;
                 messageBlock.appendChild(assistantAnswer);
                 
-                // Display Images
+                // ========================================
+                // CHANGE 2: Display TEXT SOURCES FIRST
+                // ========================================
+                if (data.texts && data.texts.length > 0) {
+                    const sourcesSection = document.createElement('div');
+                    sourcesSection.className = 'sources-section';
+                    
+                    const sourcesHeader = document.createElement('div');
+                    sourcesHeader.className = 'sources-header';
+                    sourcesHeader.innerHTML = `
+                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                        </svg>
+                        Referenced Sources
+                    `;
+                    sourcesSection.appendChild(sourcesHeader);
+                    
+                    const topTexts = data.texts.slice(0, 3);
+                    
+                    topTexts.forEach((txt, index) => {
+                        const div = document.createElement('div');
+                        div.className = 'source-card';
+                        const truncatedText = txt.text.length > 250 ? txt.text.substring(0, 250) + '...' : txt.text;
+                        
+                        // ========================================
+                        // CHANGE 1: Add clickable link to source
+                        // ========================================
+                        const sourceLink = txt.link ? `<a href="${escapeHtml(txt.link)}" target="_blank" class="view-source-link" onclick="event.stopPropagation()">
+                            View in document →
+                        </a>` : '';
+                        
+                        div.innerHTML = `
+                            <div class="source-title">
+                                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                                </svg>
+                                ${escapeHtml(txt.file || 'Document')}
+                            </div>
+                            <div class="source-excerpt">"${escapeHtml(truncatedText)}"</div>
+                            <div class="source-meta">
+                                <span>Page ${escapeHtml(String(txt.page || 'N/A'))} • ${Math.round((txt.score || 0) * 100)}% match</span>
+                                ${sourceLink}
+                            </div>
+                        `;
+                        
+                        // Make entire card clickable
+                        if (txt.link) {
+                            div.style.cursor = 'pointer';
+                            div.onclick = () => window.open(txt.link, '_blank');
+                        }
+                        
+                        sourcesSection.appendChild(div);
+                    });
+                    
+                    messageBlock.appendChild(sourcesSection);
+                }
+                
+                // ========================================
+                // CHANGE 2: Display IMAGES SECOND (and limit to 1-2)
+                // ========================================
                 if (data.images && data.images.length > 0) {
-                    const relevantImages = data.images.filter(img => (img.score || 0) >= 0.3).slice(0, 3);
+                    const relevantImages = data.images.filter(img => (img.score || 0) >= 0.3).slice(0, 2); // Max 2 images
                     
                     if (relevantImages.length > 0) {
+                        const imagesSection = document.createElement('div');
+                        imagesSection.className = 'images-section';
+                        
+                        const imagesHeader = document.createElement('div');
+                        imagesHeader.className = 'sources-header';
+                        imagesHeader.innerHTML = `
+                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                            </svg>
+                            Referenced Figures
+                        `;
+                        imagesSection.appendChild(imagesHeader);
+                        
                         const imagesWrapper = document.createElement('div');
                         imagesWrapper.className = 'images-grid';
                     
@@ -504,33 +699,50 @@
                                 </a>
                                 <div class="image-meta">
                                     <div class="image-filename">${escapeHtml(img.filename || 'Unknown')}</div>
+                                    <div class="image-source">
+                                        ${escapeHtml(img.file || 'Unknown')} • Page ${escapeHtml(String(img.page || 'N/A'))}
+                                    </div>
                                 </div>
                             `;
                             imagesWrapper.appendChild(div);
                         });
-                    
-                        messageBlock.appendChild(imagesWrapper);
+                        
+                        imagesSection.appendChild(imagesWrapper);
+                        messageBlock.appendChild(imagesSection);
                     }
                 }
                 
-                // Display Texts
-                if (data.texts && data.texts.length > 0) {
-                    const topTexts = data.texts.slice(0, 3);
-                    
-                    topTexts.forEach(txt => {
-                        const div = document.createElement('div');
-                        div.className = 'source-card';
-                        const truncatedText = txt.text.length > 200 ? txt.text.substring(0, 200) + '...' : txt.text;
-                        div.innerHTML = `
-                            <div class="source-title">${escapeHtml(txt.file || 'Document')}</div>
-                            <div class="source-excerpt">"${escapeHtml(truncatedText)}"</div>
-                            <div class="source-meta">
-                                Page ${escapeHtml(String(txt.page || 'N/A'))} • ${Math.round((txt.score || 0) * 100)}% match
-                            </div>
-                        `;
-                        messageBlock.appendChild(div);
-                    });
-                }
+                // ========================================
+                // CHANGE 3: Add follow-up question box
+                // ========================================
+                const followupContainer = document.createElement('div');
+                followupContainer.className = 'followup-container';
+                followupContainer.innerHTML = `
+                    <div class="followup-label">
+                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+                        </svg>
+                        Ask a follow-up question
+                    </div>
+                    <div class="followup-input-group">
+                        <input type="text" placeholder="e.g., Can you explain that in more detail?" class="followup-input">
+                        <button class="followup-btn" onclick="askFollowup(this)">
+                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display: inline; vertical-align: middle;">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                            </svg>
+                        </button>
+                    </div>
+                `;
+                messageBlock.appendChild(followupContainer);
+                
+                // Add enter key support for follow-up input
+                const followupInput = followupContainer.querySelector('.followup-input');
+                followupInput.addEventListener('keypress', function(e) {
+                    if (e.key === 'Enter') {
+                        askFollowup(followupContainer.querySelector('.followup-btn'));
+                    }
+                });
                 
                 chatHistoryContainer.appendChild(messageBlock);
                 
@@ -557,6 +769,26 @@
             }
         }
         
+        // New function to handle follow-up questions
+        function askFollowup(button) {
+            const container = button.closest('.followup-container');
+            const followupInput = container.querySelector('.followup-input');
+            const followupQuestion = followupInput.value.trim();
+            
+            if (!followupQuestion) return;
+            
+            // Disable the follow-up input and button
+            followupInput.disabled = true;
+            button.disabled = true;
+            button.innerHTML = '...';
+            
+            // Ask the question
+            askQuestion(followupQuestion);
+            
+            // Clear the follow-up input
+            followupInput.value = '';
+        }
+        
         async function downloadPDFReport() {
             if (conversationData.length === 0) {
                 alert('No conversation to download');