Update script.js

script.js

@@ -1,58 +1,54 @@
 document.addEventListener("DOMContentLoaded", () => {
-    const workerUrl = "https://ctmresearchagent.aiagents.workers.dev"; // Your worker URL
+    const workerUrl = "https://ctmresearchagent.aiagents.workers.dev";
     
     // 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
+    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
     loadReportsList();
     loadResearchHistory();
 
     /**
-     * NEW: Submits the structured report data as JSON
+     * NEW: Checks if a "View" button was clicked and opens the report
      */
-    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,
-        };
+    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');
 
-        if (!report.title || !report.description || !report.body) {
-            uploadStatus.textContent = 'Please fill out all fields.';
-            return;
-        }
+            // Show loading state
+            modalTitle.textContent = "Loading Report...";
+            modalBody.textContent = "";
+            modal.style.display = 'block';
 
-        uploadButton.disabled = true;
-        uploadButton.innerText = "Processing...";
-        uploadStatus.textContent = "Submitting and processing report. This may take a moment...";
+            try {
+                const response = await fetch(`${workerUrl}/api/document/${docId}`);
+                if (!response.ok) throw new Error('Document not found.');
+                const doc = await response.json();
 
-        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(); // Refresh the list
-        } catch (error) {
-            uploadStatus.textContent = `Error: ${error.message}`;
-        } finally {
-            uploadButton.disabled = false;
-            uploadButton.innerText = "Process and Add Report";
+                modalTitle.textContent = doc.title;
+                modalBody.textContent = doc.body;
+
+            } catch(error) {
+                modalTitle.textContent = "Error";
+                modalBody.textContent = error.message;
+            }
         }
     }
-
+    
     /**
-     * NEW: Loads the list of reports directly from the database
+     * REVISED: Adds a "View" button for each report
      */
     async function loadReportsList() {
         const reportsList = document.getElementById("reportsList");
@@ -68,7 +64,14 @@ document.addEventListener("DOMContentLoaded", () => {
             documents.forEach(doc => {
                 const entryDiv = document.createElement("div");
                 entryDiv.className = "report-entry";
-                entryDiv.innerHTML = `<h3>${doc.title}</h3><p>${doc.description}</p>`;
+                // 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>
+                `;
                 reportsList.appendChild(entryDiv);
             });
         } catch (error) {
@@ -76,49 +79,8 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    // AI Query and History functions remain the same as the last working version
-    async function handleAiQuerySubmit() { /* ... function code is unchanged ... */ }
-    async function loadResearchHistory() { /* ... function code is unchanged ... */ }
-
-    // Paste the unchanged functions here
-    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>";
-        }
-    }
+    // --- 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>"; } }
 });