diff --git a/src/templates/chat.html b/src/templates/chat.html
index 05c202d..556470f 100644
--- a/src/templates/chat.html
+++ b/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;