@pubuduth-aplicy/chat-ui 2.1.40 → 2.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.40",
+  "version": "2.1.41",
   "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

@@ -7,7 +7,7 @@ import useChatUIStore from "../../stores/Zustant";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { fetchMessages } from "../../service/messageService";
 import { useInView } from "react-intersection-observer";
-import Loader from "../loader";
+import Loader from "../Loader";
 
 const Messages = () => {
   const { selectedConversation, setMessages, messages } = useChatUIStore();
@@ -16,68 +16,135 @@ const Messages = () => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
   const [isAutoScrolling, setIsAutoScrolling] = useState(false);
-
-
+  const [prevMessagesLength, setPrevMessagesLength] = useState(0);
+  const loadingRef = useRef(false);
   // const { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
 
   const lastMessageRef = useRef<HTMLDivElement>(null);
 
-//   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
-//     useInfiniteQuery({
-//       queryKey: ["messages", selectedConversation?._id, userId],
-//       queryFn: ({ pageParam = 1 }) =>
-//         fetchMessages(selectedConversation?._id, userId, pageParam),
-//       initialPageParam: 1,
-//       getNextPageParam: (lastPage, allPages) => {
-//         return lastPage.messages.length ? allPages.length + 1: undefined;
-//       },
-//     });
-
-
-const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isLoading,
-  } = useInfiniteQuery({
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  useInfiniteQuery({
     queryKey: ["messages", selectedConversation?._id, userId],
     queryFn: ({ pageParam = 1 }) =>
       fetchMessages(selectedConversation?._id, userId, pageParam),
-    getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,
-    onSuccess: (data) => {
-      const allMessages = data.pages.flatMap(page => page.messages);
-      setMessages(allMessages);
-      
-      // Scroll to bottom on initial load
-      if (isInitialLoad && scrollContainerRef.current) {
-        setTimeout(() => {
-          scrollContainerRef.current?.scrollTo({
-            top: scrollContainerRef.current.scrollHeight,
-            behavior: 'auto'
-          });
-          setIsInitialLoad(false);
-        }, 100);
-      }
+    getNextPageParam: (lastPage) => {
+      return lastPage.nextPage; // Use the nextPage from API response
     },
+    initialPageParam: 1,
   });
 
-    // Auto-scroll to bottom when new message arrives and user is near bottom
-	useEffect(() => {
-		if (!scrollContainerRef.current || isAutoScrolling) return;
-	
-		const container = scrollContainerRef.current;
-		const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
-	
-		if (isNearBottom) {
-		  setIsAutoScrolling(true);
-		  container.scrollTo({
-			top: container.scrollHeight,
-			behavior: "smooth"
-		  });
-		  setTimeout(() => setIsAutoScrolling(false), 500);
-		}
-	  }, [messages.length, isAutoScrolling]);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const scrollHeightBeforeLoad = useRef(0);
+
+  const handleScroll = useCallback(() => {
+    if (!scrollContainerRef.current || isFetchingNextPage || !hasNextPage) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+    
+    // Load more when scrolled near the top (100px threshold)
+    if (scrollTop < 100) {
+      // Save current scroll height before loading
+      scrollHeightBeforeLoad.current = scrollHeight;
+      setIsLoadingMore(true);
+      fetchNextPage().finally(() => setIsLoadingMore(false));
+    }
+  }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
+
+  useEffect(() => {
+    if (isLoadingMore && scrollContainerRef.current && scrollHeightBeforeLoad.current) {
+      // After new messages are loaded, adjust scroll position to maintain the same view
+      const container = scrollContainerRef.current;
+      const newScrollHeight = container.scrollHeight;
+      container.scrollTop = newScrollHeight - scrollHeightBeforeLoad.current;
+    }
+  }, [messages.length, isLoadingMore]);
+
+  // Scroll to bottom for new messages
+  useEffect(() => {
+    if (messages.length > 0 && !isLoadingMore) {
+      setTimeout(() => {
+        lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
+    }
+  }, [messages.length, isLoadingMore]);
+
+
+// const {
+//     data,
+//     fetchNextPage,
+//     hasNextPage,
+//     isFetchingNextPage,
+//     isLoading,
+//   } = useInfiniteQuery({
+//     queryKey: ["messages", selectedConversation?._id, userId],
+//     queryFn: ({ pageParam = 1 }) =>
+//       fetchMessages(selectedConversation?._id, userId, pageParam),
+//     getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,
+//     onSuccess: (data) => {
+//       const allMessages = data.pages.flatMap(page => page.messages);
+//       setMessages(allMessages);
+      
+//       // Scroll to bottom on initial load
+//       if (isInitialLoad && scrollContainerRef.current) {
+//         setTimeout(() => {
+//           scrollContainerRef.current?.scrollTo({
+//             top: scrollContainerRef.current.scrollHeight,
+//             behavior: 'auto'
+//           });
+//           setIsInitialLoad(false);
+//         }, 100);
+//       }
+//     },
+//   });
+
+   // Maintain scroll position when loading older messages
+  
+
+  //  useEffect(() => {
+  //   console.log('scrollContainerRef',scrollContainerRef.current);
+    
+  //   if (!scrollContainerRef.current || isInitialLoad) return;
+    
+  //   if (isFetchingNextPage) {
+  //     // Store current scroll position before loading
+  //     const container = scrollContainerRef.current;
+  //     const scrollTopBefore = container.scrollTop;
+  //     const scrollHeightBefore = container.scrollHeight;
+  //     console.log(container,'scrollHeightBefore',scrollHeightBefore,'container',scrollTopBefore); 
+      
+  //     loadingRef.current = true;
+      
+  //     return () => {
+  //       // After messages are loaded, adjust scroll position
+  //       requestAnimationFrame(() => {
+  //         container.scrollTop = container.scrollHeight - scrollHeightBefore + scrollTopBefore;
+  //         loadingRef.current = false;
+  //       });
+  //     };
+  //   }
+  // }, [isFetchingNextPage, isInitialLoad]);
+
+	// Add this useEffect to handle new messages
+  // useEffect(() => {
+  //   if (!scrollContainerRef.current || loadingRef.current) return;
+    
+  //   const container = scrollContainerRef.current;
+  //   console.log("container",container);
+    
+  //   const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
+
+  //   // Only auto-scroll if we're near bottom or it's a new message
+  //   if (isNearBottom || messages.length > prevMessagesLength) {
+  //     setIsAutoScrolling(true);
+  //     container.scrollTo({
+  //       top: container.scrollHeight,
+  //       behavior: messages.length > prevMessagesLength ? 'smooth' : 'auto'
+  //     });
+  //     setTimeout(() => setIsAutoScrolling(false), 500);
+  //   }
+    
+  //   setPrevMessagesLength(messages.length);
+  // }, [messages.length]);
 
 	useEffect(() => {
 		if (inView) {
@@ -95,7 +162,9 @@ const {
 
 useEffect(() => {
 	if (data) {
-	  const allMessages = data.pages.flatMap(page => page.messages);
+		console.log('message fetching data',data);
+		
+	  const allMessages = data.pages.flatMap(page => page.messages).reverse();
 	  setMessages(allMessages);
 	}
   }, [data]);
@@ -172,23 +241,23 @@ useEffect(() => {
     return () => observer.disconnect();
   }, [messages, socket]);
 
-  const handleScroll = useCallback(() => {
-    if (!scrollContainerRef.current || isFetchingNextPage || !hasNextPage) return;
+  // const handleScroll = useCallback(() => {
+  //   if (!scrollContainerRef.current || isFetchingNextPage || !hasNextPage) return;
 
-    const { scrollTop } = scrollContainerRef.current;
-    // Load more when scrolled near the top (10% threshold)
-    if (scrollTop < 100) {
-      fetchNextPage();
-    }
-  }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
+  //   const { scrollTop } = scrollContainerRef.current;
+  //   // Load more when scrolled near the top (10% threshold)
+  //   if (scrollTop < 100) {
+  //     fetchNextPage();
+  //   }
+  // }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
 
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (container) {
-      container.addEventListener('scroll', handleScroll);
-      return () => container.removeEventListener('scroll', handleScroll);
-    }
-  }, [handleScroll]);
+  // useEffect(() => {
+  //   const container = scrollContainerRef.current;
+  //   if (container) {
+  //     container.addEventListener('scroll', handleScroll);
+  //     return () => container.removeEventListener('scroll', handleScroll);
+  //   }
+  // }, [handleScroll]);
 
 //   useEffect(() => {
 //     const scrollContainer = scrollContainerRef.current;
@@ -197,28 +266,29 @@ useEffect(() => {
 //       return () => scrollContainer.removeEventListener("scroll", handleScroll);
 //     }
 //   }, [handleScroll]);
-  console.log("📩 Messages:", messages);
+ 
+
+console.log("📩 Messages:", messages);
   console.log("📩 Messages Length:", messages?.length);
 
-  if (isLoading && !messages.length) {
-    return <Loader />;
-  }
+
 
   return (
     <div className="chatMessages"
 	ref={scrollContainerRef}
 	style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
 	>
-	{isFetchingNextPage && (
-        <div className="loading-indicator">
-          <Loader/>
-        </div>
-      )}
+
+<div ref={ref} className="my-8">
+        {isFetchingNextPage ? <Loader /> : null}
+      </div>
       {messages?.length > 0 ? (
         messages?.map((message: any) =>
           // Check if the message object is valid and has an _id before rendering
           message ? (
-            <div key={message._id} ref={lastMessageRef}>
+            <div key={message._id} ref={lastMessageRef}
+			style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}
+			>
               <Message message={message} />
             </div>
           ) : null