Fixes the UX issue of download buttons showing before the report is complete. Still kinda ugly, but functional

Author: jacobSingh

client/index.html

@@ -93,8 +93,11 @@ <h2>Agent Output</h2>
     <div class="margin-div">
         <h2>Research Report</h2>
         <div id="reportContainer"></div>
-        <button onclick="GPTResearcher.copyToClipboard()" class="btn btn-secondary mt-3">Copy to clipboard</button>
-        <a id="downloadLink" href="#" class="btn btn-secondary mt-3" target="_blank">Download as PDF</a>
+        <div id="reportActions">
+            <div class="alert alert-info" role="alert" id="status"></div>
+            <a onclick="GPTResearcher.copyToClipboard()" class="btn btn-secondary mt-3">Copy to clipboard</button>
+            <a id="downloadLink" href="#" class="btn btn-secondary mt-3" target="_blank">Download as PDF</a>
+        </div>
     </div>
 </main>
 
@@ -106,17 +109,19 @@ <h2>Research Report</h2>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
 <script src="/site/scripts.js"></script>
 <script>
-    const btnChoose = document.getElementById('btnChoose');
+    // const btnChoose = document.getElementById('btnChoose');
     const btnShowAuto = document.getElementById('btnShowAuto');
     const autoAgentDiv = document.getElementById('autoAgentDiv');
     const agentChoices = document.getElementsByClassName('agent-choices');
 
+    /**
     btnChoose.addEventListener('click', function () {
         btnShowAuto.style.display = 'inline-block';
         btnChoose.style.display = 'none';
         autoAgentDiv.style.display = 'none';
         agentChoices[0].style.display = 'flex';
     });
+    **/
 
     btnShowAuto.addEventListener('click', function () {
         btnShowAuto.style.display = 'none';

client/scripts.js

@@ -1,7 +1,16 @@
 const GPTResearcher = (() => {
+    const init = () => {
+      // Not sure, but I think it would be better to add event handlers here instead of in the HTML
+      //document.getElementById("startResearch").addEventListener("click", startResearch);
+      //document.getElementById("copyToClipboard").addEventListener("click", copyToClipboard);
+
+      updateState("initial");
+    }
+
     const startResearch = () => {
       document.getElementById("output").innerHTML = "";
       document.getElementById("reportContainer").innerHTML = "";
+      updateState("in_progress")
 
       addAgentResponse({ output: "🤔 Thinking about research questions for the task..." });
 
@@ -21,7 +30,9 @@ const GPTResearcher = (() => {
         } else if (data.type === 'report') {
           writeReport(data, converter);
         } else if (data.type === 'path') {
+          updateState("finished")
           updateDownloadLink(data);
+
         }
       };
 
@@ -57,8 +68,7 @@ const GPTResearcher = (() => {
 
     const updateDownloadLink = (data) => {
       const path = data.output;
-      const downloadLink = document.getElementById("downloadLink");
-      downloadLink.href = path;
+      document.getElementById("downloadLink").setAttribute("href", path);
     };
 
     const updateScroll = () => {
@@ -76,9 +86,65 @@ const GPTResearcher = (() => {
       document.execCommand('copy');
       document.body.removeChild(textarea);
     };
-  
+
+    const updateState = (state) => {
+      var status = "";
+      switch (state) {
+        case "in_progress":
+          status = "Research in progress..."
+          setReportActionsStatus("disabled");
+          break;
+        case "finished":
+          status = "Research finished!"
+          setReportActionsStatus("enabled");
+          break;
+        case "error":
+          status = "Research failed!"
+          setReportActionsStatus("disabled");
+          break;
+        case "initial":
+          status = ""
+          setReportActionsStatus("hidden");
+          break;
+        default:
+          setReportActionsStatus("disabled");
+      }
+      document.getElementById("status").innerHTML = status;
+      if (document.getElementById("status").innerHTML == "") {
+        document.getElementById("status").style.display = "none";
+      } else {
+        document.getElementById("status").style.display = "block";
+      }
+    }
+
+    /**
+     * Shows or hides the download and copy buttons
+     * @param {str} status Kind of hacky. Takes "enabled", "disabled", or "hidden". "Hidden is same as disabled but also hides the div"
+     */
+    const setReportActionsStatus = (status) => {
+      const reportActions = document.getElementById("reportActions");
+      // Disable everything in reportActions until research is finished
+
+      if (status == "enabled") {
+        reportActions.querySelectorAll("a").forEach((link) => {
+          link.classList.remove("disabled");
+          link.removeAttribute('onclick');
+          reportActions.style.display = "block";
+        });
+      } else {
+        reportActions.querySelectorAll("a").forEach((link) => {
+          link.classList.add("disabled");
+          link.setAttribute('onclick', "return false;");
+        });
+        if (status == "hidden") {
+          reportActions.style.display = "none";
+        }
+      }
+    }
+
+    document.addEventListener("DOMContentLoaded", init);
     return {
       startResearch,
       copyToClipboard,
     };
-  })();
+  })();