QoL - U1

did some scrolling things

src/templates/chat.html

@@ -181,6 +181,119 @@
                 });
             }
         });
+
+        // Auto-scroll functionality for new messages
+        function scrollToBottom(smooth = true) {
+            const messagesWrapper = document.getElementById('messagesWrapper');
+            if (messagesWrapper) {
+                if (smooth) {
+                    messagesWrapper.scrollTo({
+                        top: messagesWrapper.scrollHeight,
+                        behavior: 'smooth'
+                    });
+                } else {
+                    messagesWrapper.scrollTop = messagesWrapper.scrollHeight;
+                }
+            }
+        }
+
+        // Function to check if user is near bottom of messages
+        function isNearBottom() {
+            const messagesWrapper = document.getElementById('messagesWrapper');
+            if (!messagesWrapper) return true;
+            
+            const threshold = 100; // pixels from bottom
+            return messagesWrapper.scrollHeight - messagesWrapper.scrollTop - messagesWrapper.clientHeight < threshold;
+        }
+
+        // Store the last scroll position to detect if user manually scrolled
+        let lastScrollTop = 0;
+        let userScrolled = false;
+
+        // Detect user scroll
+        document.addEventListener('DOMContentLoaded', function() {
+            const messagesWrapper = document.getElementById('messagesWrapper');
+            if (messagesWrapper) {
+                messagesWrapper.addEventListener('scroll', function() {
+                    const currentScrollTop = messagesWrapper.scrollTop;
+                    const maxScroll = messagesWrapper.scrollHeight - messagesWrapper.clientHeight;
+                    
+                    // If user scrolled up manually, don't auto-scroll for new messages
+                    if (currentScrollTop < lastScrollTop && currentScrollTop < maxScroll - 50) {
+                        userScrolled = true;
+                    }
+                    
+                    // If user scrolled to near bottom, resume auto-scrolling
+                    if (isNearBottom()) {
+                        userScrolled = false;
+                    }
+                    
+                    lastScrollTop = currentScrollTop;
+                });
+            }
+        });
+
+        // Override the message adding function to include auto-scroll
+        // You'll need to call this function whenever a new message is added
+        function addMessageWithAutoScroll(messageElement) {
+            const messagesContainer = document.getElementById('messagesContainer');
+            if (messagesContainer && messageElement) {
+                messagesContainer.appendChild(messageElement);
+                
+                // Only auto-scroll if user hasn't manually scrolled up
+                if (!userScrolled) {
+                    // Small delay to ensure DOM is updated
+                    setTimeout(() => {
+                        scrollToBottom(true);
+                    }, 50);
+                }
+            }
+        }
+
+        // Function to force scroll to bottom (useful for when joining a room)
+        function forceScrollToBottom() {
+            userScrolled = false;
+            setTimeout(() => {
+                scrollToBottom(false);
+            }, 100);
+        }
+
+        // Observer to watch for new messages being added to the DOM
+        document.addEventListener('DOMContentLoaded', function() {
+            const messagesContainer = document.getElementById('messagesContainer');
+            if (messagesContainer) {
+                // Create a MutationObserver to watch for new messages
+                const observer = new MutationObserver(function(mutations) {
+                    mutations.forEach(function(mutation) {
+                        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                            // Check if any added nodes are message elements
+                            const hasNewMessage = Array.from(mutation.addedNodes).some(node => 
+                                node.nodeType === Node.ELEMENT_NODE && 
+                                (node.classList.contains('message-group') || node.querySelector('.message-group'))
+                            );
+                            
+                            if (hasNewMessage && !userScrolled) {
+                                setTimeout(() => {
+                                    scrollToBottom(true);
+                                }, 50);
+                            }
+                        }
+                    });
+                });
+
+                // Start observing
+                observer.observe(messagesContainer, {
+                    childList: true,
+                    subtree: true
+                });
+            }
+        });
+
+        // Expose functions globally so your existing JavaScript can use them
+        window.ByteChat = window.ByteChat || {};
+        window.ByteChat.scrollToBottom = scrollToBottom;
+        window.ByteChat.forceScrollToBottom = forceScrollToBottom;
+        window.ByteChat.addMessageWithAutoScroll = addMessageWithAutoScroll;
     </script>
 </body>
 </html>