Update script.js

script.js

@@ -1,55 +1,61 @@
 document.addEventListener("DOMContentLoaded", () => {
     const workerUrl = "https://ctmresearchagent.aiagents.workers.dev";
     
-    // Event Listeners
+    // --- Event Listeners ---
     document.getElementById("uploadForm").addEventListener("submit", handleReportUpload);
     document.getElementById("submitButton").addEventListener("click", handleAiQuerySubmit);
-
-    // NEW: Event listener for opening the modal
     document.getElementById("reportsList").addEventListener("click", handleViewReportClick);
     
-    // NEW: Event listeners for closing the modal
+    // NEW: Event listener for collapsible reports section
+    document.querySelector(".collapsible-header").addEventListener("click", toggleReportsList);
+
+    // Modal close listeners
     const modal = document.getElementById('reportModal');
     document.querySelector('.modal-close-button').addEventListener('click', () => { modal.style.display = 'none'; });
     window.addEventListener('click', (event) => { if (event.target == modal) { modal.style.display = 'none'; }});
 
-    // Initial data load
+    // --- Initial data load ---
     loadReportsList();
     loadResearchHistory();
 
     /**
-     * NEW: Checks if a "View" button was clicked and opens the report
+     * NEW: Toggles the visibility of the reports list
      */
+    function toggleReportsList() {
+        const reportsList = document.getElementById("reportsList");
+        const reportsToggle = document.getElementById("reportsToggle");
+        
+        reportsList.classList.toggle("collapsed");
+
+        if (reportsList.classList.contains("collapsed")) {
+            reportsToggle.textContent = "+";
+        } else {
+            reportsToggle.textContent = "-";
+        }
+    }
+
+    // --- All other functions are unchanged ---
     async function handleViewReportClick(event) {
         if (event.target.classList.contains('view-report-btn')) {
             const docId = event.target.dataset.id;
-            const modal = document.getElementById('reportModal');
             const modalTitle = document.getElementById('modalTitle');
             const modalBody = document.getElementById('modalBody');
-
-            // Show loading state
+            modal.style.display = 'block';
             modalTitle.textContent = "Loading Report...";
             modalBody.textContent = "";
-            modal.style.display = 'block';
-
             try {
                 const response = await fetch(`${workerUrl}/api/document/${docId}`);
                 if (!response.ok) throw new Error('Document not found.');
                 const doc = await response.json();
-
                 modalTitle.textContent = doc.title;
                 modalBody.textContent = doc.body;
-
             } catch(error) {
                 modalTitle.textContent = "Error";
                 modalBody.textContent = error.message;
             }
         }
     }
-    
-    /**
-     * REVISED: Adds a "View" button for each report
-     */
+
     async function loadReportsList() {
         const reportsList = document.getElementById("reportsList");
         reportsList.innerHTML = "<p>Fetching reports...</p>";
@@ -57,21 +63,12 @@ document.addEventListener("DOMContentLoaded", () => {
             const response = await fetch(`${workerUrl}/api/documents`);
             if (!response.ok) throw new Error('Failed to fetch reports list.');
             const documents = await response.json();
-            
             reportsList.innerHTML = "";
             if (documents.length === 0) { reportsList.innerHTML = "<p>No reports have been added yet.</p>"; return; }
-            
             documents.forEach(doc => {
                 const entryDiv = document.createElement("div");
                 entryDiv.className = "report-entry";
-                // Add the data-id attribute to the button
-                entryDiv.innerHTML = `
-                    <div>
-                        <h3>${doc.title}</h3>
-                        <p>${doc.description}</p>
-                    </div>
-                    <button class="view-report-btn" data-id="${doc.id}">View</button>
-                `;
+                entryDiv.innerHTML = `<div><h3>${doc.title}</h3><p>${doc.description}</p></div><button class="view-report-btn" data-id="${doc.id}">View</button>`;
                 reportsList.appendChild(entryDiv);
             });
         } catch (error) {
@@ -79,7 +76,6 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    // --- All other functions (handleReportUpload, handleAiQuerySubmit, loadResearchHistory) are unchanged ---
     async function handleReportUpload(event) { event.preventDefault(); const uploadButton = document.getElementById("uploadButton"); const uploadStatus = document.getElementById("uploadStatus"); const report = { title: document.getElementById('reportTitle').value, description: document.getElementById('reportDescription').value, body: document.getElementById('reportBody').value, }; if (!report.title || !report.description || !report.body) { uploadStatus.textContent = 'Please fill out all fields.'; return; } uploadButton.disabled = true; uploadButton.innerText = "Processing..."; uploadStatus.textContent = "Submitting report..."; try { const response = await fetch(`${workerUrl}/api/upload`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(report), }); const data = await response.json(); if (!response.ok) throw new Error(data.error || 'Failed to process report.'); uploadStatus.textContent = `Success: ${data.message}`; document.getElementById("uploadForm").reset(); await loadReportsList(); } catch (error) { uploadStatus.textContent = `Error: ${error.message}`; } finally { uploadButton.disabled = false; uploadButton.innerText = "Process and Add Report"; } }
     async function handleAiQuerySubmit() { const researchQueryInput = document.getElementById("researchQuery"); const resultDisplay = document.getElementById("resultDisplay"); const submitButton = document.getElementById("submitButton"); const query = researchQueryInput.value.trim(); if (!query) { alert("Please enter a query."); return; } submitButton.disabled = true; submitButton.innerText = "Thinking..."; resultDisplay.innerHTML = "<p>Generating response...</p>"; try { const response = await fetch(`${workerUrl}/api/query`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: query }) }); const data = await response.json(); if (!response.ok) throw new Error(data.error || "An unknown error occurred."); resultDisplay.innerText = data.result; await loadResearchHistory(); } catch (error) { resultDisplay.innerText = `Error: ${error.message}`; } finally { submitButton.disabled = false; submitButton.innerText = "Submit"; } }
     async function loadResearchHistory() { const historyContainer = document.getElementById("historyContainer"); try { const response = await fetch(`${workerUrl}/api/research`); if (!response.ok) throw new Error('Failed to load history.'); const logs = await response.json(); historyContainer.innerHTML = ""; if (logs.length === 0) { historyContainer.innerHTML = "<p>No research history found.</p>"; return; } logs.forEach(log => { const entryDiv = document.createElement("div"); entryDiv.className = "history-entry"; entryDiv.innerHTML = `<p><strong>Query:</strong> ${log.query}</p><p><strong>Result:</strong> ${log.result}</p><p><small><em>${new Date(log.timestamp).toLocaleString()}</em></small></p>`; historyContainer.appendChild(entryDiv); }); } catch (error) { historyContainer.innerHTML = "<p>Error loading research history.</p>"; } }