@pubuduth-aplicy/chat-ui 2.2.20 → 2.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.20",
+  "version": "2.2.21",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/messages/Messages.tsx

@@ -13,7 +13,7 @@ const Messages = () => {
   const { selectedConversation, setMessages, messages } = useChatUIStore();
   const { userId, socket } = useChatContext();
   const { ref, inView } = useInView();
-  const lastMessageRef = useRef<HTMLDivElement>(null);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
 
   const { data, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({
     queryKey: ["messages", selectedConversation?._id, userId],
@@ -173,17 +173,21 @@ const Messages = () => {
     };
   }, [socket, selectedConversation?._id, setMessages, userId]);
 
-  // Scroll to bottom when messages change
+  // Scroll to bottom when a new message is appended (sender or receiver)
+  const lastMessageId = messages[messages.length - 1]?._id;
   useEffect(() => {
-    if (messages.length > 0) {
-      setTimeout(() => {
-        lastMessageRef.current?.scrollIntoView({
+    if (!lastMessageId) return;
+    const timer = setTimeout(() => {
+      const container = chatContainerRef.current;
+      if (container) {
+        container.scrollTo({
+          top: container.scrollHeight,
           behavior: "smooth",
-          block: "nearest",
         });
-      }, 100);
-    }
-  }, [messages.length]);
+      }
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [lastMessageId]);
 
   // Track message visibility for read receipts
   // useEffect(() => {
@@ -211,6 +215,7 @@ const Messages = () => {
 
   return (
     <div
+      ref={chatContainerRef}
       className="chatMessages"
       style={{ overflowY: "auto", height: "100%", position: "relative" }}
     >
@@ -223,7 +228,6 @@ const Messages = () => {
           message ? (
             <div
               key={message._id}
-              ref={lastMessageRef}
               data-message-id={message._id}
               style={{ flex: 1, minHeight: 0, overflowY: "auto" }}
             >