upadate analyzer with chatbot changes

web/analyzer.html

@@ -129,10 +129,10 @@
 
         <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
           <li><a href="index.html" class="nav-link">Home</a></li>
-          <li><a href="profile.html" class="nav-link">Profile</a></li>
           <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
           <li><a href="past_data.html" class="nav-link">Past Reports</a></li>
-          <li><a href="login.html" class="nav-link">Login</a></li>
+          <li><a href="profile.html" class="nav-link">Profile</a></li>
+          <li id="authNavItem"><a href="login.html" class="nav-link">Login</a></li>
         </ul>
 
         <!-- Hamburger Menu -->
@@ -542,22 +542,55 @@
           }
         }
 
-      document.getElementById("ask-btn").onclick = async () => {
-        const q = document.getElementById("user-question").value.trim();
-        if (!q) return;
-        const chat = document.getElementById("chat-output");
-        chat.innerHTML += `<p><strong>You:</strong> ${q}</p>`;
-        chat.scrollTop = chat.scrollHeight;
-        env.allowLocalModels = false;
-        const qa = await pipeline(
-          "question-answering",
-          "Xenova/distilbert-base-uncased-distilled-squad"
-        );
-        const out = await qa(q, extractedText);
-        chat.innerHTML += `<p><strong>Chatbot:</strong> ${out.answer}</p>`;
-        document.getElementById("user-question").value = "";
-        chat.scrollTop = chat.scrollHeight;
-      };
+        document.getElementById("ask-btn").onclick = async () => {
+          const q = document.getElementById("user-question").value.trim();
+          if (!q) return;
+          
+          if (!extractedText) {
+            alert("Please analyze a document first before asking questions.");
+            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("http://localhost:9000/chat/", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                question: q,
+                user_id: currentUser ? currentUser.uid : "anonymous"
+              }),
+            });
+            
+            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>
 </html>