Update static/application.js

static/application.js

@@ -87,7 +87,7 @@ document.addEventListener("DOMContentLoaded", () => {
       message.style.alignItems = "center";
 
       const msgSpan = document.createElement("span");
-      msgSpan.innerText = text;
+      msgSpan.innerHTML = text; 
       message.appendChild(msgSpan);
 
       if (audioSrc) {
@@ -146,7 +146,8 @@ document.addEventListener("DOMContentLoaded", () => {
     createMessageBubble(question, "You", null, selectedFile.name);
 
     // Thinking bubble
-    const thinkingBubble = createMessageBubble("Wait, Let me think 🤔...", "Aidan");
+    const thinkingBubble = createMessageBubble("Wait, let me think 🤔... <div class='loader'></div>", "Aidan");
+
 
     const formData = new FormData();
     formData.append("question", question);
@@ -214,4 +215,24 @@ document.addEventListener("DOMContentLoaded", () => {
       sendMessage();
     }
   });
+
+  const style = document.createElement('style');
+style.textContent = `
+  .loader {
+      display: inline-block;
+      border: 2px solid #f3f3f3;
+      border-top: 2px solid #3b82f6;
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      animation: spin 1s linear infinite;
+      margin-left: 8px;
+  }
+  @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+  }
+`;
+document.head.appendChild(style);
+ 
 });