Implemented smart auto-scroll in chat

Author: AumPatel1

plexe/ui/index.html

@@ -270,51 +270,74 @@
             const [messages, setMessages] = useState([]);
             const [input, setInput] = useState('');
             const [isLoading, setIsLoading] = useState(false);
+            const [userScrolledUp, setUserScrolledUp] = useState(false);
+            const [showScrollButton, setShowScrollButton] = useState(false);
             const messagesEndRef = useRef(null);
+            const messagesContainerRef = useRef(null);
 
             const scrollToBottom = () => {
                 messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+                setShowScrollButton(false);
+            };
+            
+            const handleScroll = (e) => {
+                const { scrollTop, scrollHeight, clientHeight } = e.target;
+                const isAtBottom = scrollHeight - scrollTop <= clientHeight + 10;
+                setUserScrolledUp(!isAtBottom);
             };
 
             useEffect(() => {
-                scrollToBottom();
-            }, [messages]);
+                if (messages.length > 0) {
+                    const lastMessage = messages[messages.length - 1];
+                    if (lastMessage.role === 'user') {
+                        // User sent message - always scroll to bottom
+                        scrollToBottom();
+                        setShowScrollButton(false);
+                    } else {
+                        // AI sent message - check if user scrolled up
+                        if (userScrolledUp) {
+                            setShowScrollButton(true);
+                        } else {
+                            scrollToBottom();
+                        }
+                    }
+                }
+            }, [messages, userScrolledUp]);
 
             useEffect(() => {
                 const unsubscribe = wsRuntime.subscribe((data) => {
                     if (data.type === 'status') return;
-                    
                     setMessages(prev => [...prev, {
                         id: data.id || Date.now().toString(),
                         role: data.role || 'assistant',
                         content: data.content
                     }]);
                     setIsLoading(false);
                 });
-                
                 return unsubscribe;
             }, [wsRuntime]);
 
             const handleSubmit = (e) => {
                 e.preventDefault();
                 if (!input.trim() || isLoading) return;
-                
                 const userMessage = {
                     id: Date.now().toString(),
                     role: 'user',
                     content: input.trim()
                 };
-                
                 setMessages(prev => [...prev, userMessage]);
                 setInput('');
                 setIsLoading(true);
-                
                 wsRuntime.send(userMessage.content);
             };
 
             return React.createElement('div', { className: 'flex flex-col h-full' },
                 // Messages area
-                React.createElement('div', { className: 'flex-1 overflow-y-auto p-4' },
+                React.createElement('div', {
+                    className: 'flex-1 overflow-y-auto p-4 relative',
+                    onScroll: handleScroll,
+                    ref: messagesContainerRef
+                },
                     messages.length === 0 && React.createElement('div', { className: 'text-center text-gray-500 mt-8' },
                         React.createElement('p', { className: 'text-lg mb-2' }, '👋 Hello! I\'m your Plexe Assistant.'),
                         React.createElement('p', { className: 'text-sm' }, 'I help you build machine learning models through natural conversation.'),
@@ -332,6 +355,11 @@
                     ),
                     React.createElement('div', { ref: messagesEndRef })
                 ),
+                // Scroll to bottom button
+                showScrollButton && React.createElement('button', {
+                    onClick: scrollToBottom,
+                    className: 'fixed bottom-20 right-4 bg-blue-500 text-white rounded-full p-3 shadow-lg hover:bg-blue-600 transition-colors z-10'
+                }, '↓'),
                 // Input area
                 React.createElement('form', { onSubmit: handleSubmit, className: 'border-t p-4' },
                     React.createElement('div', { className: 'flex space-x-2' },