Update static/application.js

static/application.js

@@ -1,4 +1,4 @@
-const inputField = document.querySelector(".qt input");
+/*const inputField = document.querySelector(".qt input");
 const icons = document.querySelectorAll(".icons i");
 const convo = document.querySelector(".convo");
 const send = document.querySelector(".sendingQA")
@@ -82,3 +82,119 @@ async function handleSubmit() {
   // 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;
+}