fixed auto scroll again 🙂

client/src/components/chat/MessagesArea.tsx

@@ -4,7 +4,7 @@ import { useOutletContext } from 'react-router-dom';
 import { sendContact } from '../../api/contactsApi.tsx';
 import LoadingWheel from './LoadingWheel.tsx';
 import { ChatMessages } from '../../pages/Chat.tsx';
-import FileBox from './FIleBox.tsx';
+import FileBox from './FileBox.tsx';
 import { ContactsProps } from '../../pages/Chat.tsx';
 import { Trash2 } from 'lucide-react';
 import { axiosClient } from '../../App.tsx';
@@ -31,27 +31,45 @@ function MessagesArea({
   errorMessage,
   setMessages,
 }: MessagesAreaProps) {
-  const messagesEndRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const { username }: { username: string } = useOutletContext();
-  const prevScrollHeight = useRef(0);
-  const [isFetchingHistory, setIsFetchingHistory] = useState(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [shouldScrollToBottom, setShouldScrollToBottom] = useState(true);
+  const previousMessagesLength = useRef(messages.length);
 
-  const handleScroll = () => {
+  const scrollToBottom = () => {
     const container = containerRef.current;
-    if (container && container.scrollTop === 0) {
-      setIsLoading(true);
-      prevScrollHeight.current = container.scrollHeight;
-      setIsFetchingHistory(true);
-      fetchPreviousMessages(currentContact.conversation_id)
-        .then(() => setIsLoading(false))
-        .catch(() => {
-          setIsLoading(false);
-        });
+    if (container && shouldScrollToBottom) {
+      container.scrollTop = container.scrollHeight;
     }
   };
 
+  const handleScroll = async () => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    if (container.scrollTop === 0) {
+      setIsLoading(true);
+      setShouldScrollToBottom(false);
+      const previousScrollHeight = container.scrollHeight;
+
+      try {
+        await fetchPreviousMessages(currentContact?.conversation_id);
+
+        container.scrollTop = container.scrollHeight - previousScrollHeight;
+      } catch (e) {
+        console.error('Error fetching previous messages:', e);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    const isAtBottom =
+      container.scrollHeight - container.scrollTop <=
+      container.clientHeight + 100;
+    setShouldScrollToBottom(isAtBottom);
+  };
+
   const deleteMessage = async (message_id: number) => {
     try {
       const response = await axiosClient.delete(
@@ -130,29 +148,21 @@ function MessagesArea({
     };
   }, [currentContact, username, setContactsList, updateContactStatus]);
 
+  // Handle auto-scrolling when new messages arrive
   useEffect(() => {
-    const container = containerRef.current;
-    if (container && isFetchingHistory) {
-      container.scrollTop = container.scrollHeight - prevScrollHeight.current;
-      setIsFetchingHistory(false);
-    }
-  }, [messages]);
+    const hasNewMessages = messages.length > previousMessagesLength.current;
+    previousMessagesLength.current = messages.length;
 
-  const scrollToBottom = () => {
-    const container = containerRef.current;
-    if (container) {
-      container.scrollTop = container.scrollHeight;
-    }
-  };
-
-  // Scroll to bottom when messages change
-  useEffect(() => {
-    if (!isFetchingHistory) {
+    if (hasNewMessages && shouldScrollToBottom) {
       scrollToBottom();
 
       setTimeout(scrollToBottom, 100);
     }
-  }, [messages, isFetchingHistory]);
+  }, [messages, shouldScrollToBottom]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, []);
 
   const AttachmentPreview = ({ url }: { url: string }) => {
     const isImage = url.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i);
@@ -221,7 +231,6 @@ function MessagesArea({
         {isLoading ? <LoadingWheel /> : null}
         {messageList}
       </ul>
-      <div ref={messagesEndRef} />
     </div>
   );
 }