static/application.js

/*const inputField = document.querySelector(".qt input");
const icons = document.querySelectorAll(".icons i");
const convo = document.querySelector(".convo");
const send = document.querySelector(".sendingQA");

// Create hidden file inputs dynamically
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;

// Icon click handlers
icons[0].addEventListener("click", () => imageInput.click()); // image icon
icons[1].addEventListener("click", () => docInput.click());   // file icon
send.addEventListener("click", handleSubmit);                 // send button

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) {
    alert("Please type a question or select a file.");
    return;
  }

  const formData = new FormData();
  formData.append("question", question);
  formData.append("file", selectedFile);

  // Show question in convo
  const userBlock = document.createElement("div");
  userBlock.style.padding = "1rem";
  userBlock.style.background = "#e0e7ff";
  userBlock.style.borderRadius = "10px";
  userBlock.style.margin = "1rem";
  userBlock.innerHTML = `
    <strong>Question:</strong> ${question}<br>
    ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}` : ""}
  `;
  convo.appendChild(userBlock);

  // Show loading message
  const loadingBlock = document.createElement("div");
  loadingBlock.style.padding = "1rem";
  loadingBlock.style.background = "#eee";
  loadingBlock.style.borderRadius = "10px";
  loadingBlock.style.margin = "1rem";
  loadingBlock.innerText = "Processing your request...";
  convo.appendChild(loadingBlock);

  try {
    const response = await fetch("/predict", {
      method: "POST",
      body: formData,
    });

    const result = await response.json();

    loadingBlock.remove(); // remove loading message

    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 || result.error || "No response"}
    `;
    convo.appendChild(answerBlock);
  } catch (error) {
    loadingBlock.remove();

    const errorBlock = document.createElement("div");
    errorBlock.style.color = "red";
    errorBlock.style.margin = "1rem";
    errorBlock.innerText = `Request failed: ${error.message}`;
    convo.appendChild(errorBlock);
  }

  // Reset input field and file
  inputField.value = "";
  selectedFile = null;
  selectedType = null;
}
*/
// frontend.js
async function handleSubmit() {
  const question = inputField.value.trim();
  if (!question && !selectedFile) {
    alert("Please type a question or select a file.");
    return;
  }

  const formData = new FormData();
  formData.append("question", question);
  formData.append("file", selectedFile);

  // Show user question
  const userBlock = document.createElement("div");
  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.className = "loading-block";
  loadingBlock.innerText = "Processing your request...";
  convo.appendChild(loadingBlock);

  try {
    const response = await fetch("/predict", {
      method: "POST",
      body: formData,
    });

    const result = await response.json();
    loadingBlock.remove();

    // Answer block with optional audio
    const answerBlock = document.createElement("div");
    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";
        }
      });
    }

  } catch (error) {
    loadingBlock.remove();
    const errorBlock = document.createElement("div");
    errorBlock.className = "error-block";
    errorBlock.innerText = `Request failed: ${error.message}`;
    convo.appendChild(errorBlock);
  }

  inputField.value = "";
  selectedFile = null;
  selectedType = null;
}