Add frontend modification

static/search.js

@@ -321,18 +321,15 @@ async function sendMessage() {
     
     if (!question || !currentPaperState.pdfUrl) return;
 
-    const chatMessages = document.getElementById('chatMessages');
-    
     // Add user message
     addMessage(question, true);
 
-    // Add AI thinking message with loading animation
-    const thinkingMessageId = 'ai-thinking-' + Date.now();
-    addMessage(`${thinkingMessageId} AI is thinking...`, false);
+    // Add AI thinking message with unique ID
+    const thinkingId = `thinking-${Date.now()}`;
+    const thinkingDiv = addThinkingMessage(thinkingId);
 
     chatInput.value = '';
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-
+    
     try {
         const response = await fetch('/chat-with-paper', {
             method: 'POST',
@@ -348,29 +345,20 @@ async function sendMessage() {
 
         const data = await response.json();
 
+        // Remove thinking indicator before adding response
+        removeThinkingMessage(thinkingId);
+
         if (data.error) {
             throw new Error(data.error);
         }
 
-        // Remove thinking message
-        const thinkingMessage = document.getElementById(thinkingMessageId);
-        if (thinkingMessage) {
-            thinkingMessage.remove();
-        }
-
         // Add AI response
         addMessage(data.response, false);
 
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-
     } catch (error) {
         console.error('Chat error:', error);
-        // Remove thinking message
-        const thinkingMessage = document.getElementById(thinkingMessageId);
-        if (thinkingMessage) {
-            thinkingMessage.remove();
-        }
-
+        // Remove thinking indicator
+        removeThinkingMessage(thinkingId);
         addMessage(`Error: ${error.message}`, false);
     }
 }
@@ -763,18 +751,30 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
-function addThinkingMessage() {
+function addThinkingMessage(id) {
     const chatMessages = document.getElementById('chatMessages');
     const thinkingDiv = document.createElement('div');
-    thinkingDiv.className = 'ai-thinking';
+    thinkingDiv.id = id;
+    thinkingDiv.className = 'message-wrapper thinking-indicator';
     thinkingDiv.innerHTML = `
-        <div class="ai-thinking-dots">
-            <div class="ai-thinking-dot"></div>
-            <div class="ai-thinking-dot"></div>
-            <div class="ai-thinking-dot"></div>
+        <div class="message-avatar ai-avatar">AI</div>
+        <div class="message ai-message ai-thinking">
+            <div class="ai-thinking-dots">
+                <div class="ai-thinking-dot"></div>
+                <div class="ai-thinking-dot"></div>
+                <div class="ai-thinking-dot"></div>
+            </div>
         </div>
     `;
     chatMessages.appendChild(thinkingDiv);
     chatMessages.scrollTop = chatMessages.scrollHeight;
     return thinkingDiv;
 }
+
+// Add new function to remove thinking message
+function removeThinkingMessage(id) {
+    const thinkingDiv = document.getElementById(id);
+    if (thinkingDiv) {
+        thinkingDiv.remove();
+    }
+}

static/styles.css

@@ -725,14 +725,17 @@ body {
     display: flex;
     align-items: center;
     padding: 0.8rem 1.2rem;
-    background: var(--surface-dark);
+    background: rgba(30, 27, 46, 0.4);
     border-radius: 12px;
-    margin-left: 48px;
+    min-width: 80px;
 }
 
 .ai-thinking-dots {
     display: flex;
     gap: 4px;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
 }
 
 .ai-thinking-dot {
@@ -741,20 +744,18 @@ body {
     background: var(--primary-color);
     border-radius: 50%;
     animation: thinking 1.4s infinite ease-in-out;
+    opacity: 0.7;
 }
 
-.ai-thinking-dot:nth-child(1) { animation-delay: 0s; }
-.ai-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
-.ai-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
-
+/* Smoother animation for dots */
 @keyframes thinking {
     0%, 80%, 100% { 
-        transform: scale(0.8);
+        transform: scale(0.6);
         opacity: 0.3;
     }
     40% { 
         transform: scale(1);
-        opacity: 1;
+        opacity: 0.8;
     }
 }
 
@@ -2233,18 +2234,26 @@ body {
 }
 
 /* AI Thinking Indicator */
+.thinking-indicator {
+    opacity: 0.7;
+    transition: all 0.3s ease;
+}
+
 .ai-thinking {
     display: flex;
     align-items: center;
     padding: 0.8rem 1.2rem;
     background: rgba(30, 27, 46, 0.4);
     border-radius: 12px;
-    margin-left: 48px; /* To align with other AI messages */
+    min-width: 80px;
 }
 
 .ai-thinking-dots {
     display: flex;
     gap: 4px;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
 }
 
 .ai-thinking-dot {
@@ -2253,19 +2262,17 @@ body {
     background: var(--primary-color);
     border-radius: 50%;
     animation: thinking 1.4s infinite ease-in-out;
+    opacity: 0.7;
 }
 
-.ai-thinking-dot:nth-child(1) { animation-delay: 0s; }
-.ai-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
-.ai-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
-
+/* Smoother animation for dots */
 @keyframes thinking {
     0%, 80%, 100% { 
-        transform: scale(0.8);
+        transform: scale(0.6);
         opacity: 0.3;
     }
     40% { 
         transform: scale(1);
-        opacity: 1;
+        opacity: 0.8;
     }
 }