Update web/past_data.html (#18)

- Update web/past_data.html (f35059427cd2b141ccd28862eee3a6311d5b1939)


Co-authored-by: Vihaan Jyothiswaroop <meamgodyay@users.noreply.huggingface.co>

web/past_data.html

@@ -27,6 +27,28 @@
     <div id="recs-container" class="space-y-4">
       <p class="text-sm text-gray-500">Sign in to view your saved analyzes.</p>
     </div>
+      <div
+        class="bg-[var(--latte-cream)] border border-[var(--wisteria)] rounded-lg p-6 mb-8"
+      >
+        <h3 class="text-lg font-semibold mb-3">Ask Chatbot</h3>
+        <div
+          id="chat-output"
+          class="space-y-2 h-48 overflow-auto text-sm rounded p-4"
+        >
+          <p><strong>Chatbot:</strong> Ask me something about your report</p>
+        </div>
+        <div class="flex mt-4 gap-2">
+          <input
+            type="text"
+            id="user-question"
+            placeholder="Ask a question..."
+            class="flex-1 rounded px-3 py-2 focus:outline-none"
+          />
+          <button id="ask-btn" class="btn-primary px-4 py-2 rounded">
+            Ask
+          </button>
+        </div>
+      </div>
   </main>
 
   <script type="module">
@@ -47,7 +69,17 @@
     const app = initializeApp(firebaseConfig);
     const auth = getAuth(app);
     const db = getFirestore(app);
-
+    window.currentUser = null;
+    window.chatContext = null;
+    window.setChatContextFromId = function (id) {
+      const pre = document.querySelector(`#content-${id} .ocr-pre`);
+      window.chatContext = pre ? pre.textContent.trim() : null;
+      const chatOutput = document.getElementById('chat-output');
+      if (chatOutput) {
+        chatOutput.innerHTML += `<p class="text-xs text-gray-500"><em>Context set from selected report.</em></p>`;
+        chatOutput.scrollTop = chatOutput.scrollHeight;
+      }
+    };
     onAuthStateChanged(auth, (user) => {
       const authNavItem = document.getElementById('authNavItem');
       if (user) {
@@ -210,6 +242,68 @@
         statusEl.textContent = "Not signed in.";
         recsEl.innerHTML = '<p class="text-sm text-gray-500">Please sign in to see your analyses.</p>';
       }
+        document.getElementById("ask-btn").onclick = async () => {
+          const q = document.getElementById("user-question").value.trim();
+          if (!q) return;
+
+          // require a selected report as context
+          if (!window.chatContext) {
+            alert("Please click 'Chat about this report' on a saved report first to set context.");
+            return;
+          }
+
+        document.getElementById("ask-btn").onclick = async () => {
+          const q = document.getElementById("user-question").value.trim();
+          if (!q) return;
+
+          // require a selected report as context
+          if (!window.chatContext) {
+            alert("Please click 'Chat about this report' on a saved report first to set context.");
+            return;
+          }
+          
+           const chat = document.getElementById("chat-output");
+           chat.innerHTML += `<p><strong>You:</strong> ${q}</p>`;
+           chat.scrollTop = chat.scrollHeight;
+           
+           chat.innerHTML += `<p><strong>Chatbot:</strong> <em>Thinking...</em></p>`;
+           chat.scrollTop = chat.scrollHeight;
+           
+           try {
+             const response = await fetch(api('chat/'), {
+               method: "POST",
+               headers: {
+                 "Content-Type": "application/json",
+               },
+               body: JSON.stringify({
+                 question: q,
+                user_id: auth && auth.currentUser ? (auth.currentUser.uid || auth.currentUser.email) : "anonymous",
+                context: window.chatContext
+               }),
+             });
+             
+             if (!response.ok) {
+               throw new Error(`HTTP error! status: ${response.status}`);
+             }
+             
+             const data = await response.json();
+             
+             //now addign acctual reposnse
+             const messages = chat.querySelectorAll('p');
+             const lastMessage = messages[messages.length - 1];
+             lastMessage.innerHTML = `<strong>Chatbot:</strong> ${data.answer}`;
+             
+           } catch (error) {
+             console.error("Error:", error);
+             const messages = chat.querySelectorAll('p');
+             const lastMessage = messages[messages.length - 1];
+             lastMessage.innerHTML = `<strong>Chatbot:</strong> Sorry, I encountered an error: ${error.message}`;
+           }
+           
+           document.getElementById("user-question").value = "";
+           chat.scrollTop = chat.scrollHeight;
+         };
+      };
     });
   </script>
 </body>