Update frontend/script.js

frontend/script.js

@@ -3,9 +3,7 @@ const API_BASE_URL = window.location.origin;
 
 // Session Management
 let currentSessionId = null;
-let currentAnswer = null;
-let currentSources = null;
-let currentQuery = null;
+let conversationHistory = []; // Store all Q&A pairs
 let queryHistory = [];
 
 // DOM Elements
@@ -149,25 +147,26 @@ async function handleSubmit() {
     setLoading(true);
     hideError();
     
-    // DON'T hide the current response - just show loading indicator
-    // Users can still see their previous answer while waiting
+    // Show loading indicator
     if (loadingState) loadingState.style.display = 'flex';
     
-    // Keep response section visible if it exists (for follow-up questions)
-    // Only hide initial state on first query
-    if (initialState && !responseSection.style.display) {
+    // Hide initial state on first query
+    if (initialState && conversationHistory.length === 0) {
         initialState.style.display = 'none';
     }
     
+    // Show response section
+    if (responseSection) responseSection.style.display = 'block';
+    
     try {
-        // Extract ticker from query if mentioned (e.g., "What is AAPL's revenue?")
+        // Extract ticker from query if mentioned
         const tickerMatch = query.match(/\b([A-Z]{1,5})\b/);
         const detectedTicker = tickerMatch ? tickerMatch[1] : null;
         
         const requestData = {
             query,
-            ticker: detectedTicker,  // Auto-detect ticker or null for all companies
-            doc_types: null,  // No filter
+            ticker: detectedTicker,
+            doc_types: null,
             top_k: 10,
             session_id: currentSessionId
         };
@@ -191,67 +190,237 @@ async function handleSubmit() {
             throw new Error('Empty response from server');
         }
         
-        // Store current data for export
-        currentQuery = query;
-        currentAnswer = data.answer;
-        currentSources = data.sources;
+        // Add to conversation history
+        conversationHistory.push({
+            query,
+            answer: data.answer,
+            sources: data.sources,
+            expanded_queries: data.expanded_queries,
+            timestamp: new Date()
+        });
         
         // Save to history
         saveToHistory(query, data.answer || '');
         
-        // Display results
-        displayResults(data);
+        // Display all conversation history
+        displayConversationHistory();
         
         // Clear input
         queryInput.value = '';
         
+        // Scroll to latest answer
+        setTimeout(() => {
+            const rightPanel = document.querySelector('.right-panel');
+            if (rightPanel) {
+                rightPanel.scrollTop = rightPanel.scrollHeight;
+            }
+        }, 100);
+        
     } catch (error) {
         console.error('Error:', error);
         showError(error.message || 'Failed to process query');
         
-        // Show initial state again
-        if (loadingState) loadingState.style.display = 'none';
-        if (initialState) initialState.style.display = 'flex';
+        // Show initial state again if no history
+        if (conversationHistory.length === 0) {
+            if (loadingState) loadingState.style.display = 'none';
+            if (initialState) initialState.style.display = 'flex';
+        }
         
     } finally {
         setLoading(false);
+        if (loadingState) loadingState.style.display = 'none';
     }
 }
 
-// Display results
-function displayResults(data) {
-    if (!data) return;
-    
-    // Hide loading, show response
-    if (loadingState) loadingState.style.display = 'none';
-    if (responseSection) responseSection.style.display = 'block';
-    
-    // Display answer
-    if (answerDiv) {
-        answerDiv.innerHTML = formatAnswer(data.answer || 'No answer available');
-    }
-    
-    // Display expanded queries
-    if (expandedQueriesDiv && queriesList) {
-        if (data.expanded_queries && data.expanded_queries.length > 1) {
-            expandedQueriesDiv.style.display = 'block';
-            queriesList.innerHTML = data.expanded_queries
-                .map(q => `<li>${escapeHtml(q)}</li>`)
-                .join('');
-        } else {
-            expandedQueriesDiv.style.display = 'none';
+// Display entire conversation history
+function displayConversationHistory() {
+    if (!answerDiv || !sourcesDiv) return;
+    
+    // Clear existing content
+    answerDiv.innerHTML = '';
+    sourcesDiv.innerHTML = '';
+    
+    // Render each Q&A pair
+    conversationHistory.forEach((item, index) => {
+        // Create conversation item container
+        const conversationItem = document.createElement('div');
+        conversationItem.className = 'conversation-item';
+        conversationItem.style.cssText = `
+            margin-bottom: 2rem;
+            padding-bottom: 2rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        `;
+        
+        // Add question
+        const questionDiv = document.createElement('div');
+        questionDiv.className = 'question-block';
+        questionDiv.style.cssText = `
+            background: rgba(59, 130, 246, 0.1);
+            border-left: 3px solid #3b82f6;
+            padding: 1rem 1.5rem;
+            border-radius: 0.5rem;
+            margin-bottom: 1.5rem;
+        `;
+        questionDiv.innerHTML = `
+            <div style="color: #60a5fa; font-size: 0.875rem; margin-bottom: 0.5rem;">Question ${index + 1}</div>
+            <div style="color: #e5e7eb; font-size: 1rem;">${escapeHtml(item.query)}</div>
+        `;
+        conversationItem.appendChild(questionDiv);
+        
+        // Add answer
+        const answerBlock = document.createElement('div');
+        answerBlock.className = 'answer-block';
+        answerBlock.style.cssText = `
+            background: rgba(16, 185, 129, 0.05);
+            border-left: 3px solid #10b981;
+            padding: 1rem 1.5rem;
+            border-radius: 0.5rem;
+            margin-bottom: 1.5rem;
+        `;
+        answerBlock.innerHTML = `
+            <div style="color: #34d399; font-size: 0.875rem; margin-bottom: 0.5rem;">Answer</div>
+            <div style="color: #e5e7eb; line-height: 1.7;">${formatAnswer(item.answer || 'No answer available')}</div>
+        `;
+        conversationItem.appendChild(answerBlock);
+        
+        // Add expanded queries if available
+        if (item.expanded_queries && item.expanded_queries.length > 1) {
+            const expandedDiv = document.createElement('div');
+            expandedDiv.className = 'expanded-queries-block';
+            expandedDiv.style.cssText = `
+                background: rgba(139, 92, 246, 0.05);
+                border-left: 3px solid #8b5cf6;
+                padding: 1rem 1.5rem;
+                border-radius: 0.5rem;
+                margin-bottom: 1.5rem;
+            `;
+            expandedDiv.innerHTML = `
+                <div style="color: #a78bfa; font-size: 0.875rem; margin-bottom: 0.5rem;">Expanded Queries</div>
+                <ul style="margin: 0; padding-left: 1.5rem; color: #d1d5db;">
+                    ${item.expanded_queries.map(q => `<li style="margin-bottom: 0.5rem;">${escapeHtml(q)}</li>`).join('')}
+                </ul>
+            `;
+            conversationItem.appendChild(expandedDiv);
         }
-    }
+        
+        // Add sources
+        if (item.sources && item.sources.length > 0) {
+            const sourcesHeader = document.createElement('div');
+            sourcesHeader.style.cssText = `
+                color: #f59e0b;
+                font-size: 0.875rem;
+                margin-bottom: 1rem;
+                font-weight: 600;
+            `;
+            sourcesHeader.textContent = `Sources (${item.sources.length})`;
+            conversationItem.appendChild(sourcesHeader);
+            
+            const sourcesContainer = document.createElement('div');
+            sourcesContainer.innerHTML = item.sources.map((source, sourceIndex) => {
+                if (!source) return '';
+                
+                const docTypeLabel = source.doc_type === '10k' ? '10-K Report' : 
+                                    source.doc_type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
+                
+                return `
+                    <div class="source-card" id="source-${index}-${sourceIndex}" style="
+                        background: rgba(31, 41, 55, 0.5);
+                        border: 1px solid rgba(75, 85, 99, 0.5);
+                        border-radius: 0.5rem;
+                        margin-bottom: 0.75rem;
+                        overflow: hidden;
+                        transition: all 0.3s ease;
+                    ">
+                        <div class="source-header" onclick="toggleSource(${index}, ${sourceIndex})" style="
+                            padding: 0.75rem 1rem;
+                            cursor: pointer;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            background: rgba(17, 24, 39, 0.5);
+                        ">
+                            <div class="source-title" style="display: flex; align-items: center; gap: 0.5rem;">
+                                <span class="source-badge" style="
+                                    background: rgba(59, 130, 246, 0.2);
+                                    color: #60a5fa;
+                                    padding: 0.25rem 0.5rem;
+                                    border-radius: 0.25rem;
+                                    font-size: 0.75rem;
+                                    font-weight: 600;
+                                ">${docTypeLabel}</span>
+                                <span style="color: #e5e7eb; font-size: 0.875rem;">${escapeHtml(source.filename || 'Unknown')}</span>
+                            </div>
+                            <div class="source-similarity" style="color: #9ca3af; font-size: 0.875rem;">
+                                Score: <strong style="color: #10b981;">${source.similarity_score ? (source.similarity_score * 100).toFixed(0) + '%' : 'N/A'}</strong>
+                            </div>
+                        </div>
+                        <div class="source-content" style="
+                            max-height: 0;
+                            overflow: hidden;
+                            transition: max-height 0.3s ease;
+                            padding: 0 1rem;
+                        ">
+                            <div class="source-details" style="
+                                padding: 0.75rem 0;
+                                display: flex;
+                                gap: 1rem;
+                                flex-wrap: wrap;
+                                border-bottom: 1px solid rgba(75, 85, 99, 0.3);
+                            ">
+                                ${source.ticker ? `<span style="color: #9ca3af; font-size: 0.875rem;"><strong style="color: #e5e7eb;">Ticker:</strong> ${escapeHtml(source.ticker)}</span>` : ''}
+                                ${source.chunk_id ? `<span style="color: #9ca3af; font-size: 0.875rem;"><strong style="color: #e5e7eb;">Chunk:</strong> ${escapeHtml(source.chunk_id)}</span>` : ''}
+                            </div>
+                            <div class="source-preview" style="
+                                padding: 1rem 0;
+                                color: #d1d5db;
+                                font-size: 0.875rem;
+                                line-height: 1.6;
+                                font-style: italic;
+                            ">
+                                "${escapeHtml(source.text_preview || 'No preview available')}"
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }).filter(Boolean).join('');
+            
+            conversationItem.appendChild(sourcesContainer);
+        }
+        
+        // Add timestamp
+        const timestamp = document.createElement('div');
+        timestamp.style.cssText = `
+            color: #6b7280;
+            font-size: 0.75rem;
+            text-align: right;
+            margin-top: 1rem;
+        `;
+        timestamp.textContent = item.timestamp.toLocaleTimeString();
+        conversationItem.appendChild(timestamp);
+        
+        answerDiv.appendChild(conversationItem);
+    });
     
-    // Display sources
-    if (sourcesDiv) {
-        displaySources(data.sources || []);
+    // Show export button if there's content
+    if (exportBtn && conversationHistory.length > 0) {
+        exportBtn.style.display = 'flex';
     }
-    
-    // Scroll to top of right panel
-    const rightPanel = document.querySelector('.right-panel');
-    if (rightPanel) {
-        rightPanel.scrollTop = 0;
+}
+
+// Toggle source expansion
+function toggleSource(conversationIndex, sourceIndex) {
+    const card = document.getElementById(`source-${conversationIndex}-${sourceIndex}`);
+    if (!card) return;
+    
+    const content = card.querySelector('.source-content');
+    if (!content) return;
+    
+    if (content.style.maxHeight && content.style.maxHeight !== '0px') {
+        content.style.maxHeight = '0px';
+        content.style.padding = '0 1rem';
+    } else {
+        content.style.maxHeight = content.scrollHeight + 'px';
+        content.style.padding = '0 1rem';
     }
 }
 
@@ -266,85 +435,32 @@ function formatAnswer(answer) {
     
     // Citations
     formatted = formatted.replace(/\[Source (\d+)\]/g, 
-        '<span class="citation">[Source $1]</span>');
+        '<span class="citation" style="background: rgba(59, 130, 246, 0.2); color: #60a5fa; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 600;">[Source $1]</span>');
     
     // Highlight numbers (currency, percentages, ratios)
     formatted = formatted.replace(/\$[\d,]+\.?\d*[BM]?/g, 
-        match => `<span class="highlight-number">${match}</span>`);
+        match => `<span style="color: #10b981; font-weight: 600;">${match}</span>`);
     formatted = formatted.replace(/\d+\.?\d*%/g, 
-        match => `<span class="highlight-number">${match}</span>`);
+        match => `<span style="color: #10b981; font-weight: 600;">${match}</span>`);
     
     // Color-code metrics
     formatted = formatted.replace(/(\d+\.?\d+)(x|:1)/g, 
-        '<span class="metric-green">$1$2</span>');
+        '<span style="color: #34d399; font-weight: 600;">$1$2</span>');
     
     // Bold headers (lines ending with:)
-    formatted = formatted.replace(/^(.+:)$/gm, '<strong>$1</strong>');
-    
-    // Create calculation boxes for formulas
-    formatted = formatted.replace(/Formula: ([^\n]+)/g, 
-        '<div class="calculation-box"><h4>Formula</h4><div class="calculation-step">$1</div></div>');
+    formatted = formatted.replace(/^(.+:)$/gm, '<strong style="color: #f3f4f6;">$1</strong>');
     
     return formatted;
 }
 
-// Display sources with collapsible cards
-function displaySources(sources) {
-    if (!sourcesDiv) return;
-    
-    if (!sources || sources.length === 0) {
-        sourcesDiv.innerHTML = '<p style="color: var(--text-muted);">No sources available</p>';
-        return;
-    }
-    
-    sourcesDiv.innerHTML = sources.map((source, index) => {
-        if (!source) return '';
-        
-        const docTypeLabel = source.doc_type === '10k' ? '10-K Report' : 
-                            source.doc_type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
-        
-        return `
-            <div class="source-card" id="source-${index}">
-                <div class="source-header" onclick="toggleSource(${index})">
-                    <div class="source-title">
-                        <span class="source-badge">${docTypeLabel}</span>
-                        ${escapeHtml(source.filename || 'Unknown')}
-                    </div>
-                    <div class="source-similarity">
-                        Similarity Score: <strong>${source.similarity_score ? (source.similarity_score * 100).toFixed(0) + '%' : 'N/A'}</strong>
-                    </div>
-                </div>
-                <div class="source-content">
-                    <div class="source-details">
-                        ${source.ticker ? `<span class="source-detail"><strong>Ticker:</strong> ${escapeHtml(source.ticker)}</span>` : ''}
-                        ${source.chunk_id ? `<span class="source-detail"><strong>Chunk:</strong> ${escapeHtml(source.chunk_id)}</span>` : ''}
-                    </div>
-                    <div class="source-preview">
-                        "${escapeHtml(source.text_preview || 'No preview available')}"
-                    </div>
-                </div>
-            </div>
-        `;
-    }).filter(Boolean).join('');
-}
-
-// Toggle source expansion
-function toggleSource(index) {
-    const card = document.getElementById(`source-${index}`);
-    if (card) {
-        card.classList.toggle('expanded');
-    }
-}
-
 // Export to PDF function
 function exportToPDF() {
-    if (!currentAnswer) {
-        showError('No answer to export. Please ask a question first.');
+    if (conversationHistory.length === 0) {
+        showError('No conversation to export. Please ask a question first.');
         return;
     }
     
     try {
-        // Check if jsPDF is loaded
         if (typeof window.jspdf === 'undefined') {
             showError('PDF library not loaded. Please refresh the page.');
             return;
@@ -358,90 +474,71 @@ function exportToPDF() {
         doc.setFont(undefined, 'bold');
         doc.text('FinSage Analytics Report', 20, 20);
         
-        // Set subtitle
         doc.setFontSize(10);
         doc.setFont(undefined, 'normal');
         doc.setTextColor(100);
         doc.text(`Generated on ${new Date().toLocaleString()}`, 20, 28);
+        doc.text(`Total Questions: ${conversationHistory.length}`, 20, 34);
         
-        // Query section
-        doc.setFontSize(12);
-        doc.setFont(undefined, 'bold');
-        doc.setTextColor(0);
-        doc.text('Query:', 20, 40);
-        
-        doc.setFont(undefined, 'normal');
-        doc.setFontSize(10);
-        const queryLines = doc.splitTextToSize(currentQuery || '', 170);
-        doc.text(queryLines, 20, 48);
-        
-        // Answer section
-        let yPos = 48 + (queryLines.length * 7) + 10;
-        doc.setFontSize(12);
-        doc.setFont(undefined, 'bold');
-        doc.text('Answer:', 20, yPos);
-        
-        yPos += 8;
-        doc.setFont(undefined, 'normal');
-        doc.setFontSize(10);
-        
-        // Clean answer text (remove HTML tags and format)
-        let cleanAnswer = currentAnswer
-            .replace(/<[^>]*>/g, '')  // Remove HTML tags
-            .replace(/\[Source \d+\]/g, '')  // Remove citation markers
-            .replace(/&nbsp;/g, ' ')
-            .replace(/&lt;/g, '<')
-            .replace(/&gt;/g, '>')
-            .replace(/&amp;/g, '&');
+        let yPos = 45;
         
-        const answerLines = doc.splitTextToSize(cleanAnswer, 170);
-        
-        // Add answer with page breaks if needed
-        answerLines.forEach((line, index) => {
-            if (yPos > 270) {
+        conversationHistory.forEach((item, index) => {
+            // Check for page break
+            if (yPos > 250) {
                 doc.addPage();
                 yPos = 20;
             }
-            doc.text(line, 20, yPos);
-            yPos += 7;
-        });
-        
-        // Sources section
-        if (currentSources && currentSources.length > 0) {
-            yPos += 10;
+            
+            // Question
+            doc.setFontSize(12);
+            doc.setFont(undefined, 'bold');
+            doc.setTextColor(0);
+            doc.text(`Question ${index + 1}:`, 20, yPos);
+            yPos += 8;
+            
+            doc.setFont(undefined, 'normal');
+            doc.setFontSize(10);
+            const queryLines = doc.splitTextToSize(item.query, 170);
+            doc.text(queryLines, 20, yPos);
+            yPos += queryLines.length * 7 + 5;
+            
+            // Answer
             if (yPos > 250) {
                 doc.addPage();
                 yPos = 20;
             }
             
-            doc.setFontSize(12);
+            doc.setFontSize(11);
             doc.setFont(undefined, 'bold');
-            doc.text('Sources:', 20, yPos);
+            doc.text('Answer:', 20, yPos);
             yPos += 8;
             
-            doc.setFontSize(9);
             doc.setFont(undefined, 'normal');
+            doc.setFontSize(10);
+            
+            let cleanAnswer = item.answer
+                .replace(/<[^>]*>/g, '')
+                .replace(/\[Source \d+\]/g, '')
+                .replace(/&nbsp;/g, ' ')
+                .replace(/&lt;/g, '<')
+                .replace(/&gt;/g, '>')
+                .replace(/&amp;/g, '&');
             
-            currentSources.forEach((source, index) => {
+            const answerLines = doc.splitTextToSize(cleanAnswer, 170);
+            
+            answerLines.forEach(line => {
                 if (yPos > 270) {
                     doc.addPage();
                     yPos = 20;
                 }
-                
-                doc.setFont(undefined, 'bold');
-                doc.text(`[${index + 1}] ${source.filename || 'Unknown'}`, 20, yPos);
-                yPos += 5;
-                
-                doc.setFont(undefined, 'normal');
-                doc.setTextColor(100);
-                doc.text(`Type: ${source.doc_type || 'N/A'} | Similarity: ${source.similarity_score ? (source.similarity_score * 100).toFixed(0) + '%' : 'N/A'}`, 20, yPos);
-                yPos += 8;
-                doc.setTextColor(0);
+                doc.text(line, 20, yPos);
+                yPos += 7;
             });
-        }
+            
+            yPos += 10;
+        });
         
-        // Save PDF
-        const filename = `FinSage_Analysis_${Date.now()}.pdf`;
+        const filename = `FinSage_Conversation_${Date.now()}.pdf`;
         doc.save(filename);
         
     } catch (error) {