Update web/past_data.html

web/past_data.html

@@ -98,6 +98,50 @@
         </div>
       </div>
     </main>
+     <!-- Floating Chat Button -->
+     <button
+     id="chat-toggle"
+     class="fixed bottom-6 right-6 bg-[var(--tropical-indigo)] text-white px-5 py-3 rounded-full shadow-lg hover:scale-105 transition"
+   >
+     💬 Chat
+   </button>
+
+   <!-- Chatbot Drawer -->
+   <div
+     id="chat-drawer"
+     class="fixed top-16 right-0 w-96 max-w-full h-[calc(100%-4rem)] bg-white shadow-lg border-l border-gray-200 transform translate-x-full transition-transform duration-300 ease-in-out z-40 flex flex-col"
+   >
+     <div class="flex justify-between items-center p-4 border-b">
+       <h3 class="text-lg font-semibold">Ask Chatbot</h3>
+       <button id="chat-close" class="text-gray-600 hover:text-black text-xl">
+         ✖
+       </button>
+     </div>
+     <div id="chat-output" class="flex-1 overflow-auto p-4 space-y-2 text-sm">
+       <p><strong>Chatbot:</strong> Ask me something about your report</p>
+     </div>
+     <div class="flex gap-2 p-4 border-t">
+       <input
+         type="text"
+         id="user-question"
+         placeholder="Ask a question..."
+         class="flex-1 rounded px-3 py-2 focus:outline-none border"
+       />
+       <button id="ask-btn" class="btn-primary px-4 py-2 rounded">Ask</button>
+     </div>
+   </div>
+
+   <script>
+    const chatDrawer = document.getElementById("chat-drawer");
+    const chatToggle = document.getElementById("chat-toggle");
+    const chatClose = document.getElementById("chat-close");
+    chatToggle.addEventListener("click", () =>
+      chatDrawer.classList.toggle("translate-x-full")
+    );
+    chatClose.addEventListener("click", () =>
+      chatDrawer.classList.add("translate-x-full")
+    );
+  </script>
 
     <script type="module">
       import {