Update templates/chat.html

templates/chat.html

@@ -77,6 +77,39 @@
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
 
+        .loading-dots {
+            display: inline-block;
+        }
+
+        @keyframes dots {
+            0% {
+                content: '';
+            }
+
+            25% {
+                content: '.';
+            }
+
+            50% {
+                content: '..';
+            }
+
+            75% {
+                content: '...';
+            }
+
+            100% {
+                content: '';
+            }
+        }
+
+        .loading-dots::after {
+            content: '';
+            animation: dots 2s infinite;
+            display: inline-block;
+            width: 1em;
+        }
+
         .input-container {
             display: flex;
             gap: 12px;
@@ -263,6 +296,7 @@
             messageDiv.textContent = message;
             chatContainer.appendChild(messageDiv);
             chatContainer.scrollTop = chatContainer.scrollHeight;
+            return messageDiv;
         }
 
         function updateSources(sources) {
@@ -284,6 +318,16 @@
             addMessage(message, true);
             messageInput.value = '';
 
+            // Add loading message
+            const loadingDiv = document.createElement('div');
+            loadingDiv.className = 'message bot-message';
+            const loadingSpan = document.createElement('span');
+            loadingSpan.className = 'loading-dots';
+            loadingSpan.textContent = 'Thinking';
+            loadingDiv.appendChild(loadingSpan);
+            chatContainer.appendChild(loadingDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+
             try {
                 const response = await fetch('/chat', {
                     method: 'POST',
@@ -295,6 +339,9 @@
 
                 const data = await response.json();
 
+                // Remove loading message
+                chatContainer.removeChild(loadingDiv);
+
                 if (data.error) {
                     addMessage(data.error, false);
                     return;
@@ -317,6 +364,8 @@
                     updateSources(data.answer[1]);
                 }
             } catch (error) {
+                // Remove loading message
+                chatContainer.removeChild(loadingDiv);
                 console.error('Error:', error);
                 addMessage('Sorry, there was an error processing your message.', false);
             }