Update static/application.js

static/application.js

@@ -116,66 +116,6 @@ async function handleSubmit() {
 }
 */
 // frontend.js
-const inputField = document.querySelector(".qt input");
-const icons = document.querySelectorAll(".icons i");
-const convo = document.querySelector(".convo");
-const send = document.querySelector(".sendingQA");
-const audioToggle = document.createElement("input");
-audioToggle.type = "checkbox";
-audioToggle.checked = true;
-audioToggle.id = "audioToggle";
-audioToggle.style.marginLeft = "1rem";
-
-const audioLabel = document.createElement("label");
-audioLabel.htmlFor = "audioToggle";
-audioLabel.innerText = "🔊 Audio";
-audioLabel.style.marginLeft = "0.5rem";
-
-document.querySelector(".controls").appendChild(audioToggle);
-document.querySelector(".controls").appendChild(audioLabel);
-
-const imageInput = document.createElement("input");
-imageInput.type = "file";
-imageInput.accept = "image/*";
-imageInput.style.display = "none";
-
-const docInput = document.createElement("input");
-docInput.type = "file";
-docInput.accept = ".pdf,.docx,.pptx,.xlsx";
-docInput.style.display = "none";
-
-document.body.appendChild(imageInput);
-document.body.appendChild(docInput);
-
-let selectedFile = null;
-let selectedType = null;
-
-icons[0].addEventListener("click", () => imageInput.click());
-icons[1].addEventListener("click", () => docInput.click());
-send.addEventListener("click", handleSubmit);
-
-imageInput.addEventListener("change", () => {
-  selectedFile = imageInput.files[0];
-  selectedType = "Image";
-  showSelectedFile(selectedFile.name, "🗾️");
-});
-
-docInput.addEventListener("change", () => {
-  selectedFile = docInput.files[0];
-  selectedType = "Document";
-  showSelectedFile(selectedFile.name, "📄");
-});
-
-function showSelectedFile(fileName, icon) {
-  const fileNotice = document.createElement("div");
-  fileNotice.style.padding = "0.8rem";
-  fileNotice.style.backgroundColor = "#f3f3f3";
-  fileNotice.style.borderRadius = "10px";
-  fileNotice.style.margin = "1rem";
-  fileNotice.innerHTML = `${icon} <strong>Selected file:</strong> ${fileName}`;
-  convo.appendChild(fileNotice);
-}
-
 async function handleSubmit() {
   const question = inputField.value.trim();
   if (!question && !selectedFile) {
@@ -186,24 +126,19 @@ async function handleSubmit() {
   const formData = new FormData();
   formData.append("question", question);
   formData.append("file", selectedFile);
-  formData.append("audio", audioToggle.checked);
 
+  // Show user question
   const userBlock = document.createElement("div");
-  userBlock.style.padding = "1rem";
-  userBlock.style.background = "#e0e7ff";
-  userBlock.style.borderRadius = "10px";
-  userBlock.style.margin = "1rem";
+  userBlock.className = "user-block";
   userBlock.innerHTML = `
     <strong>Question:</strong> ${question}<br>
     ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}` : ""}
   `;
   convo.appendChild(userBlock);
 
+  // Loading message
   const loadingBlock = document.createElement("div");
-  loadingBlock.style.padding = "1rem";
-  loadingBlock.style.background = "#eee";
-  loadingBlock.style.borderRadius = "10px";
-  loadingBlock.style.margin = "1rem";
+  loadingBlock.className = "loading-block";
   loadingBlock.innerText = "Processing your request...";
   convo.appendChild(loadingBlock);
 
@@ -216,28 +151,42 @@ async function handleSubmit() {
     const result = await response.json();
     loadingBlock.remove();
 
+    // Answer block with optional audio
     const answerBlock = document.createElement("div");
-    answerBlock.style.padding = "1rem";
-    answerBlock.style.background = "#e1f7e1";
-    answerBlock.style.borderRadius = "10px";
-    answerBlock.style.margin = "1rem";
-    answerBlock.innerHTML = `<strong>Answer:</strong> ${result.answer}`;
-
-    if (result.audio_url) {
-      const audio = document.createElement("audio");
-      audio.controls = true;
-      audio.src = result.audio_url;
-      answerBlock.appendChild(document.createElement("br"));
-      answerBlock.appendChild(audio);
+    answerBlock.className = "answer-block";
+    answerBlock.innerHTML = `
+      <strong>Answer:</strong> ${result.answer || result.error || "No response"}
+      ${result.audio ? `
+        <div style="margin-top: 0.5rem;">
+          <i class="fa-solid fa-volume-high audio-toggle" title="Click to mute" style="cursor:pointer; margin-right: 8px;"></i>
+          <audio src="${result.audio}" autoplay></audio>
+        </div>
+      ` : ""}
+    `;
+    convo.appendChild(answerBlock);
+
+    // Handle audio toggle
+    const audioIcon = answerBlock.querySelector(".audio-toggle");
+    const audioElement = answerBlock.querySelector("audio");
+
+    if (audioIcon && audioElement) {
+      audioIcon.addEventListener("click", () => {
+        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";
+        }
+      });
     }
 
-    convo.appendChild(answerBlock);
   } catch (error) {
     loadingBlock.remove();
-
     const errorBlock = document.createElement("div");
-    errorBlock.style.color = "red";
-    errorBlock.style.margin = "1rem";
+    errorBlock.className = "error-block";
     errorBlock.innerText = `Request failed: ${error.message}`;
     convo.appendChild(errorBlock);
   }