fix typing animation's location issue in the chat

index.html

@@ -78,15 +78,17 @@
                         </div>
                     </div>
                 </div>
-<div id="typingIndicator" class="hidden flex items-start space-x-3">
-                    <div class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center flex-shrink-0">
-                        <i data-feather="cpu" class="w-4 h-4 text-zinc-400"></i>
+                <div id="typingIndicator" class="hidden flex items-start gap-3 message-slide-in group">
+                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center flex-shrink-0 ring-1 ring-zinc-800/50 group-hover:ring-zinc-700/50 transition-all duration-200">
+                        <i data-feather="cpu" class="w-4.5 h-4.5 text-zinc-300"></i>
                     </div>
-<div class="bg-zinc-800 rounded-lg p-3 max-w-xs">
-                        <div class="typing-indicator flex space-x-1">
-                            <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
-                            <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
-                            <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
+                    <div class="flex-1 max-w-4xl">
+                        <div class="bg-zinc-900/60 backdrop-blur-sm rounded-2xl p-4 border border-zinc-800/50 hover:border-zinc-700/50 transition-all duration-200">
+                            <div class="typing-indicator flex space-x-1">
+                                <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
+                                <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
+                                <span class="w-2 h-2 bg-zinc-400 rounded-full"></span>
+                            </div>
                         </div>
                     </div>
                 </div>

script.js

@@ -328,15 +328,35 @@ function autoResize(textarea) {
     textarea.style.height = 'auto';
     textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
 }
-
 function showTypingIndicator() {
-    document.getElementById('typingIndicator').classList.remove('hidden');
+    const typingIndicator = document.getElementById('typingIndicator');
     const chatContainer = document.getElementById('chatContainer');
+    
+    // Remove any existing typing indicator
+    if (typingIndicator.parentNode === chatContainer) {
+        typingIndicator.remove();
+    }
+    
+    // Add the typing indicator at the end of chat container
+    chatContainer.appendChild(typingIndicator);
+    typingIndicator.classList.remove('hidden');
+    typingIndicator.classList.add('message-slide-in');
+    
+    // Scroll to bottom to show the indicator
     chatContainer.scrollTop = chatContainer.scrollHeight;
+    
+    // Re-initialize feather icons for the typing indicator
+    feather.replace();
 }
 
 function hideTypingIndicator() {
-    document.getElementById('typingIndicator').classList.add('hidden');
+    const typingIndicator = document.getElementById('typingIndicator');
+    typingIndicator.classList.add('hidden');
+    
+    // Remove the typing indicator from DOM when hidden
+    if (typingIndicator.parentNode) {
+        typingIndicator.remove();
+    }
 }
 function toggleChatMode() {
     isCompactMode = !isCompactMode;