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 

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) {
  convo.innerHTML = `
    <div style="padding: 0.8rem; background-color: #f3f3f3; border-radius: 10px; margin: 1rem;">
      ${icon} <strong>Selected file:</strong> ${fileName}
    </div>
  `;
}

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);

  convo.innerHTML = `<div style="padding: 1rem; background: #eee; border-radius: 8px;">Processing your request...</div>`;

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

    const result = await response.json();
    if (result.answer) {
      convo.innerHTML = `
        <div style="padding: 1rem; background: #e1f7e1; border-radius: 10px; margin: 1rem;">
          <strong>Question:</strong> ${question}<br>
          ${selectedFile ? `<strong>${selectedType}:</strong> ${selectedFile.name}<br>` : ""}
          <strong>Answer:</strong> ${result.answer}
        </div>
      `;
    } else {
      convo.innerHTML = `<div style="color: red;">Error: ${result.error}</div>`;
    }
  } catch (error) {
    convo.innerHTML = `<div style="color: red;">Request failed: ${error.message}</div>`;
  }

  // Reset input field
  inputField.value = "";
}
*/
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;
}