Update static/application.js

static/application.js

@@ -1,77 +1,3 @@
-/*document.addEventListener("DOMContentLoaded", () => {
-  const convo = document.querySelector(".convo");
-  const sendBtn = document.querySelector(".sendingQA");
-  const questionInput = document.querySelector(".qt");
-  const fileInput = document.querySelector("#file-upload");
-  const imageInput = document.querySelector("#image-upload");
-
-  // Handle text or file submission
-  function sendQuestion() {
-    const question = questionInput.value.trim();
-    if (!question && !fileInput.files.length && !imageInput.files.length) return;
-
-    const userBubble = document.createElement("div");
-    userBubble.className = "bubble right";
-    userBubble.textContent = question || "Sent a file/image";
-    convo.appendChild(userBubble);
-
-    // Preview file name (if any)
-    const file = fileInput.files[0];
-    if (file) {
-      const filePreview = document.createElement("div");
-      filePreview.className = "file-preview-bubble bubble right";
-      filePreview.textContent = `Selected: ${file.name}`;
-      convo.appendChild(filePreview);
-    }
-
-    // Preview image name (if any)
-    const image = imageInput.files[0];
-    if (image) {
-      const imagePreview = document.createElement("div");
-      imagePreview.className = "file-preview-bubble bubble right";
-      imagePreview.textContent = `Selected: ${image.name}`;
-      convo.appendChild(imagePreview);
-    }
-
-    convo.scrollTop = convo.scrollHeight;
-    questionInput.value = "";
-
-    // TODO: Send data to backend here
-  }
-
-  // Handle send button click
-  sendBtn.addEventListener("click", sendQuestion);
-
-  // Handle Enter key in input
-  questionInput.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      sendQuestion();
-    }
-  });
-
-  // Toggle audio mute/unmute
-  convo.addEventListener("click", (e) => {
-    if (e.target.classList.contains("audio-toggle")) {
-      const audioIcon = e.target;
-      const answerBlock = audioIcon.closest(".bubble");
-      const audioElement = answerBlock.querySelector("audio");
-
-      if (audioElement) {
-        if (audioElement.muted) {
-          audioElement.muted = false;
-          audioIcon.classList.replace("fa-volume-xmark", "fa-volume-high");
-          audioIcon.title = "Click to mute";
-        } else {
-          audioElement.muted = true;
-          audioIcon.classList.replace("fa-volume-high", "fa-volume-xmark");
-          audioIcon.title = "Click to unmute";
-        }
-      }
-    }
-  });
-}); */
-// Wait until the DOM is fully loaded
 document.addEventListener("DOMContentLoaded", () => {
   const convo = document.querySelector(".convo");
   const input = document.querySelector(".qt input");
@@ -116,46 +42,48 @@ function createMessageBubble(text, sender = "You", audioSrc = null) {
   label.className = "label";
   label.innerText = sender;
 
-  const message = document.createElement("div");
-  message.className = "text";
-  message.innerText = text;
+  const messageRow = document.createElement("div");
+  messageRow.className = "text";
+  messageRow.style.display = "flex";
+  messageRow.style.justifyContent = "space-between";
+  messageRow.style.alignItems = "center";
+  messageRow.style.gap = "8px";
 
-  bubble.appendChild(label);
-  bubble.appendChild(message);
+  const messageText = document.createElement("span");
+  messageText.innerText = text;
 
-  if (audioSrc && sender === "Chris") {
-    const audio = document.createElement("audio");
-    audio.src = audioSrc;
-    audio.autoplay = true;
-    audio.controls = true;
+  messageRow.appendChild(messageText);
 
+  // Only add icon for Chris's answer
+  if (sender === "Chris" && audioSrc) {
     const icon = document.createElement("i");
     icon.className = "fa-solid fa-volume-high audio-toggle";
     icon.style.cursor = "pointer";
+    icon.style.fontSize = "18px";
     icon.title = "Click to mute";
-    icon.style.marginLeft = "10px";
+
+    let isMuted = false;
+    let audio = new Audio(audioSrc);
+    audio.play();
 
     icon.addEventListener("click", () => {
-      audio.muted = !audio.muted;
-      icon.classList.toggle("fa-volume-high", !audio.muted);
-      icon.classList.toggle("fa-volume-xmark", audio.muted);
-      icon.title = audio.muted ? "Click to unmute" : "Click to mute";
+      isMuted = !isMuted;
+      audio.muted = isMuted;
+      icon.classList.toggle("fa-volume-high", !isMuted);
+      icon.classList.toggle("fa-volume-xmark", isMuted);
+      icon.title = isMuted ? "Click to unmute" : "Click to mute";
     });
 
-    const audioWrap = document.createElement("div");
-    audioWrap.style.display = "flex";
-    audioWrap.style.alignItems = "center";
-    audioWrap.style.gap = "8px";
-    audioWrap.appendChild(icon);
-    audioWrap.appendChild(audio);
-
-    bubble.appendChild(audioWrap);
+    messageRow.appendChild(icon);
   }
 
+  bubble.appendChild(label);
+  bubble.appendChild(messageRow);
+
   convo.appendChild(bubble);
   convo.scrollTop = convo.scrollHeight;
 
-  return bubble;  // ✅ Return the bubble so you can modify it later
+  return bubble;
 }
 
   sendBtn.addEventListener("click", async () => {