stop typing in message bubbles, only type in user messages in "Type your message..." input - Follow Up Deployment

index.html

@@ -38,14 +38,16 @@
         .user-bubble {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
-            align-self: flex-end;
+            margin-left: auto;
+            margin-right: 0;
             border-bottom-right-radius: 4px;
         }
         
         .ai-bubble {
             background: rgba(255, 255, 255, 0.9);
             color: #333;
-            align-self: flex-start;
+            margin-right: auto;
+            margin-left: 0;
             border-bottom-left-radius: 4px;
         }
         
@@ -307,30 +309,45 @@
             const message = userInput.value.trim();
             if (message === '') return;
             
-            // Add user message
-            addMessage(message, 'user');
-            userInput.value = '';
-            
-            // Show typing indicator
+            // Show typing indicator for user
             typingIndicator.classList.remove('hidden');
+            typingIndicator.style.marginLeft = 'auto';
+            typingIndicator.style.marginRight = '0';
             chatContainer.scrollTop = chatContainer.scrollHeight;
             
-            // Simulate AI response after delay
+            // Clear input but keep message for animation
+            const messageToSend = message;
+            userInput.value = '';
+            
+            // Add user message immediately
+            const bubble = document.createElement('div');
+            bubble.className = 'message-bubble user-bubble';
+            bubble.textContent = messageToSend;
+            chatContainer.appendChild(bubble);
+            
+            typingIndicator.classList.add('hidden');
+            
+            // Show AI typing after short delay
             setTimeout(() => {
-                typingIndicator.classList.add('hidden');
+                typingIndicator.style.marginLeft = '0';
+                typingIndicator.style.marginRight = 'auto';
+                typingIndicator.classList.remove('hidden');
                 simulateAIResponse();
-            }, 1500);
+            }, 500);
         }
         
-        // Add message to chat
+        // Add message to chat (for AI responses)
         function addMessage(message, sender) {
             const messageDiv = document.createElement('div');
             messageDiv.className = `message-bubble ${sender}-bubble`;
-            messageDiv.innerHTML = message;
             chatContainer.appendChild(messageDiv);
+            
+            // Add message immediately
+            messageDiv.innerHTML = message;
             chatContainer.scrollTop = chatContainer.scrollHeight;
+            typingIndicator.classList.add('hidden');
             
-            // Handle gallery images
+            // Handle gallery images after message is complete
             if (sender === 'ai') {
                 setTimeout(() => {
                     const galleryImages = document.querySelectorAll('.gallery-img');
@@ -346,12 +363,15 @@
         
         // Simulate AI response based on conversation flow
         function simulateAIResponse() {
-            if (currentStep < conversation.length) {
-                addMessage(conversation[currentStep].ai, 'ai');
-                currentStep++;
-            } else {
-                addMessage("Is there anything else I can help you with today?", 'ai');
-            }
+            // Random delay before AI starts typing (1-3 seconds)
+            setTimeout(() => {
+                if (currentStep < conversation.length) {
+                    addMessage(conversation[currentStep].ai, 'ai');
+                    currentStep++;
+                } else {
+                    addMessage("Is there anything else I can help you with today?", 'ai');
+                }
+            }, 500 + Math.random() * 2000);
         }
         
         // Event listeners
@@ -388,22 +408,26 @@
             conversation.forEach((step, index) => {
                 // User message
                 setTimeout(() => {
-                    addMessage(step.user, 'user');
-                }, delay);
-                
-                // AI typing indicator
-                setTimeout(() => {
+                    const userBubble = document.createElement('div');
+                    userBubble.className = 'message-bubble user-bubble';
+                    userBubble.textContent = step.user;
+                    chatContainer.appendChild(userBubble);
+                    
+                    // Show AI typing
                     typingIndicator.classList.remove('hidden');
                     chatContainer.scrollTop = chatContainer.scrollHeight;
-                }, delay + 500);
-                
-                // AI response
-                setTimeout(() => {
-                    typingIndicator.classList.add('hidden');
-                    addMessage(step.ai, 'ai');
-                }, delay + 2000);
+                    
+                    // AI response after delay
+                    setTimeout(() => {
+                        typingIndicator.classList.add('hidden');
+                        const aiBubble = document.createElement('div');
+                        aiBubble.className = 'message-bubble ai-bubble';
+                        aiBubble.innerHTML = step.ai;
+                        chatContainer.appendChild(aiBubble);
+                    }, 1000);
+                }, delay);
                 
-                delay += 3500; // Increment delay for next pair
+                delay += 2000; // Increment delay for next pair
             });
         });
     </script>