Update static/application.js

static/application.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", () => {
+/*document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");
   const sendBtn = document.querySelector(".sendingQA");
   const questionInput = document.querySelector(".qt");
@@ -70,4 +70,83 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     }
   });
+}); */
+// Wait until the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => {
+  const convo = document.querySelector(".convo");
+  const input = document.querySelector(".qt input");
+  const sendBtn = document.querySelector(".sendingQA");
+  const fileBtn = document.querySelector(".fa-file");
+  const imageBtn = document.querySelector(".fa-image");
+
+  // Create file input dynamically (not visible)
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.style.display = "none";
+  document.body.appendChild(fileInput);
+
+  fileBtn.addEventListener("click", () => fileInput.click());
+
+  fileInput.addEventListener("change", () => {
+    const file = fileInput.files[0];
+    if (file) {
+      const fileBubble = document.createElement("div");
+      fileBubble.className = "file-preview-bubble bubble right";
+      fileBubble.textContent = `Selected: ${file.name}`;
+      convo.appendChild(fileBubble);
+      convo.scrollTop = convo.scrollHeight;
+    }
+  });
+
+  function createMessageBubble(message, isUser = true, audioSrc = null) {
+    const bubble = document.createElement("div");
+    bubble.className = `bubble ${isUser ? "right" : "left"}`;
+    bubble.innerHTML = `<span>${message}</span>`;
+
+    if (audioSrc && !isUser) {
+      const audio = document.createElement("audio");
+      audio.src = audioSrc;
+      audio.autoplay = true;
+      audio.muted = false;
+
+      const audioIcon = document.createElement("i");
+      audioIcon.className = "fa-solid fa-volume-high audio-toggle";
+      audioIcon.style.marginLeft = "10px";
+      audioIcon.title = "Click to mute";
+
+      bubble.appendChild(audio);
+      bubble.appendChild(audioIcon);
+
+      // Add toggle logic
+      audioIcon.addEventListener("click", () => {
+        audio.muted = !audio.muted;
+        if (audio.muted) {
+          audioIcon.classList.replace("fa-volume-high", "fa-volume-xmark");
+          audioIcon.title = "Click to unmute";
+        } else {
+          audioIcon.classList.replace("fa-volume-xmark", "fa-volume-high");
+          audioIcon.title = "Click to mute";
+        }
+      });
+    }
+
+    convo.appendChild(bubble);
+    convo.scrollTop = convo.scrollHeight;
+  }
+
+  sendBtn.addEventListener("click", () => {
+    const question = input.value?.trim();
+    if (!question) return;
+
+    // Add user's question to convo
+    createMessageBubble(question, true);
+    input.value = "";
+
+    // Simulate a bot answer for now
+    setTimeout(() => {
+      const answerText = "Here's a simulated answer from Chris!";
+      const audioPath = "/static/audio/response.mp3"; // Replace this with dynamic path if needed
+      createMessageBubble(answerText, false, audioPath);
+    }, 1000);
+  });
 });