Update static/application.js

static/application.js

@@ -7,78 +7,65 @@ document.addEventListener("DOMContentLoaded", () => {
 
   let selectedFile = null;
   let filePreviewBubble = null;
-// Hidden file inputs
-const fileUpload = document.querySelector(".fa-file");
-const imageUpload = document.querySelector(".fa-image");
-
-// Create separate input elements for documents and images
-const docInput = document.createElement("input");
-docInput.type = "file";
-docInput.accept = ".pdf,.docx,.pptx,.xlsx";
-docInput.style.display = "none";
-document.body.appendChild(docInput);
-
-const imgInput = document.createElement("input");
-imgInput.type = "file";
-imgInput.accept = "image/*";
-imgInput.style.display = "none";
-document.body.appendChild(imgInput);
-
-fileBtn.addEventListener("click", () => docInput.click());
-imageBtn.addEventListener("click", () => imgInput.click());
-
-// Document input handler
-docInput.addEventListener("change", (e) => {
-  if (e.target.files.length > 0) {
-    const file = e.target.files[0];
+
+  // Create hidden file inputs for documents and images
+  const fileUpload = document.createElement("input");
+  fileUpload.type = "file";
+  fileUpload.accept = ".pdf,.docx,.pptx,.xlsx";
+  fileUpload.style.display = "none";
+  document.body.appendChild(fileUpload);
+
+  const imageUpload = document.createElement("input");
+  imageUpload.type = "file";
+  imageUpload.accept = "image/*";
+  imageUpload.style.display = "none";
+  document.body.appendChild(imageUpload);
+
+  // Click on hidden inputs when buttons are clicked
+  fileBtn.addEventListener("click", () => fileUpload.click());
+  imageBtn.addEventListener("click", () => imageUpload.click());
+
+  // Handle document file selection
+  fileUpload.addEventListener("change", (e) => {
+    handleFileSelection(e.target.files[0], "document");
+  });
+
+  // Handle image file selection
+  imageUpload.addEventListener("change", (e) => {
+    handleFileSelection(e.target.files[0], "image");
+  });
+
+  function handleFileSelection(file, type) {
+    if (!file) return;
+
     const validDocTypes = [
       'application/pdf',
       'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
       'application/vnd.openxmlformats-officedocument.presentationml.presentation',
       'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     ];
-    
-    if (validDocTypes.includes(file.type)) {
-      selectedFile = file;
-      if (filePreviewBubble) filePreviewBubble.remove();
-
-      filePreviewBubble = document.createElement("div");
-      filePreviewBubble.className = "file-preview-bubble bubble right";
-      filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
-      convo.appendChild(filePreviewBubble);
-      convo.scrollTop = convo.scrollHeight;
-    } else {
-      alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
-      docInput.value = ''; // Reset the input
-    }
-  }
-});
-
-// Image input handler
-imgInput.addEventListener("change", (e) => {
-  if (e.target.files.length > 0) {
-    const file = e.target.files[0];
     const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-    
-    if (validImageTypes.includes(file.type)) {
-      selectedFile = file;
-      if (filePreviewBubble) filePreviewBubble.remove();
-
-      filePreviewBubble = document.createElement("div");
-      filePreviewBubble.className = "file-preview-bubble bubble right";
-      filePreviewBubble.textContent = `🖼️ Selected: ${file.name}`;
-      convo.appendChild(filePreviewBubble);
-      convo.scrollTop = convo.scrollHeight;
-    } else {
-      alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
-      imgInput.value = ''; // Reset the input
+
+    const isValid = type === "document" ? validDocTypes.includes(file.type) : validImageTypes.includes(file.type);
+
+    if (!isValid) {
+      alert(`Please select a valid ${type === "document" ? "document (PDF, DOCX, PPTX, XLSX)" : "image (JPEG, PNG, GIF, WEBP)"}`);
+      if (type === "document") fileUpload.value = '';
+      else imageUpload.value = '';
+      return;
     }
+
+    selectedFile = file;
+
+    if (filePreviewBubble) filePreviewBubble.remove();
+
+    filePreviewBubble = document.createElement("div");
+    filePreviewBubble.className = "file-preview-bubble bubble right";
+    filePreviewBubble.textContent = `${type === "document" ? "📎" : "🖼️"} Selected: ${file.name}`;
+    convo.appendChild(filePreviewBubble);
+    convo.scrollTop = convo.scrollHeight;
   }
-});
 
-// Remove the old event listeners since we're using the new inputs
-fileUpload.removeEventListener('change');
-imageUpload.removeEventListener('change');
   function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
     const bubble = document.createElement("div");
     bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
@@ -155,10 +142,10 @@ imageUpload.removeEventListener('change');
       filePreviewBubble = null;
     }
 
-    // User message with file info
+    // Create user's message bubble
     createMessageBubble(question, "You", null, selectedFile.name);
 
-    // Aidan is thinking...
+    // Thinking bubble
     const thinkingBubble = createMessageBubble("Wait, Let me think 🤔...", "Aidan");
 
     const formData = new FormData();
@@ -175,7 +162,7 @@ imageUpload.removeEventListener('change');
       const answerText = result.answer || "No response.";
       const audioSrc = result.audio || null;
 
-      // Replace "Let me think..." with actual answer
+      // Update the thinking bubble
       const message = thinkingBubble.querySelector(".text");
       message.innerText = answerText;
 
@@ -215,19 +202,16 @@ imageUpload.removeEventListener('change');
       message.innerText = "⚠️ Aidan had trouble responding.";
     }
 
-    // Clear inputs after processing is complete
     input.value = "";
     selectedFile = null;
   }
 
-  // Click event for send button
   sendBtn.addEventListener("click", sendMessage);
 
-  // Enter key event for input field
   input.addEventListener("keydown", (event) => {
     if (event.key === "Enter") {
-      event.preventDefault(); // Prevent form submission
+      event.preventDefault();
       sendMessage();
     }
   });
-});
+});