@pubuduth-aplicy/chat-ui 2.1.39 → 2.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.39",
+  "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/Loader.tsx

@@ -0,0 +1,17 @@
+const Loader = () => {
+  return (
+
+<div className="dot-spinner">
+  <div className="dot-spinner__dot" />
+  <div className="dot-spinner__dot" />
+  <div className="dot-spinner__dot" />
+  <div className="dot-spinner__dot" />
+  <div className="dot-spinner__dot" />
+  <div className="dot-spinner__dot" />
+  <div className="dot-spinner__dot" />
+  <div className="dot-spinner__dot" />
+</div>
+  )
+}
+
+export default Loader

package/src/components/messages/Messages.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Message from "./Message";
 import { useChatContext } from "../../providers/ChatProvider";
 import { useMessages } from "../../hooks/queries/useChatApi";
@@ -7,27 +7,144 @@ 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";
 
 const Messages = () => {
   const { selectedConversation, setMessages, messages } = useChatUIStore();
   const { userId, socket } = useChatContext();
   const { ref, inView } = useInView();
   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;
-      },
-    });
+  useInfiniteQuery({
+    queryKey: ["messages", selectedConversation?._id, userId],
+    queryFn: ({ pageParam = 1 }) =>
+      fetchMessages(selectedConversation?._id, userId, pageParam),
+    getNextPageParam: (lastPage) => {
+      return lastPage.nextPage; // Use the nextPage from API response
+    },
+    initialPageParam: 1,
+  });
+
+  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) {
@@ -45,7 +162,9 @@ const Messages = () => {
 
 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]);
@@ -122,15 +241,23 @@ useEffect(() => {
     return () => observer.disconnect();
   }, [messages, socket]);
 
-  const handleScroll = useCallback(() => {
-    if (!scrollContainerRef.current || isFetchingNextPage || !hasNextPage) return;
-    
-    const { scrollTop } = scrollContainerRef.current;
-    
-    if (scrollTop < 100) {
-      fetchNextPage();
-    }
-  }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
+  // 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]);
+
+  // useEffect(() => {
+  //   const container = scrollContainerRef.current;
+  //   if (container) {
+  //     container.addEventListener('scroll', handleScroll);
+  //     return () => container.removeEventListener('scroll', handleScroll);
+  //   }
+  // }, [handleScroll]);
 
 //   useEffect(() => {
 //     const scrollContainer = scrollContainerRef.current;
@@ -139,20 +266,29 @@ useEffect(() => {
 //       return () => scrollContainer.removeEventListener("scroll", handleScroll);
 //     }
 //   }, [handleScroll]);
-  console.log("📩 Messages:", messages);
+ 
+
+console.log("📩 Messages:", messages);
   console.log("📩 Messages Length:", messages?.length);
 
+
+
   return (
-    <div className="chatMessages">
-		
+    <div className="chatMessages"
+	ref={scrollContainerRef}
+	style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
+	>
+
 <div ref={ref} className="my-8">
-        {isFetchingNextPage ? '<Loading isLoading={isFetchingNextPage} /> ': null}
+        {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

package/src/style/style.css

@@ -442,4 +442,110 @@
     50% {
       transform: translateY(-3px);
     }
-  }
+  }
+
+/* From Uiverse.io by abrahamcalsin */ 
+.dot-spinner {
+    --uib-size: 2.8rem;
+    --uib-speed: .9s;
+    --uib-color: #183153;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: var(--uib-size);
+    width: var(--uib-size);
+  }
+  
+  .dot-spinner__dot {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    width: 100%;
+  }
+  
+  .dot-spinner__dot::before {
+    content: '';
+    height: 20%;
+    width: 20%;
+    border-radius: 50%;
+    background-color: var(--uib-color);
+    transform: scale(0);
+    opacity: 0.5;
+    animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
+    box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
+  }
+  
+  .dot-spinner__dot:nth-child(2) {
+    transform: rotate(45deg);
+  }
+  
+  .dot-spinner__dot:nth-child(2)::before {
+    animation-delay: calc(var(--uib-speed) * -0.875);
+  }
+  
+  .dot-spinner__dot:nth-child(3) {
+    transform: rotate(90deg);
+  }
+  
+  .dot-spinner__dot:nth-child(3)::before {
+    animation-delay: calc(var(--uib-speed) * -0.75);
+  }
+  
+  .dot-spinner__dot:nth-child(4) {
+    transform: rotate(135deg);
+  }
+  
+  .dot-spinner__dot:nth-child(4)::before {
+    animation-delay: calc(var(--uib-speed) * -0.625);
+  }
+  
+  .dot-spinner__dot:nth-child(5) {
+    transform: rotate(180deg);
+  }
+  
+  .dot-spinner__dot:nth-child(5)::before {
+    animation-delay: calc(var(--uib-speed) * -0.5);
+  }
+  
+  .dot-spinner__dot:nth-child(6) {
+    transform: rotate(225deg);
+  }
+  
+  .dot-spinner__dot:nth-child(6)::before {
+    animation-delay: calc(var(--uib-speed) * -0.375);
+  }
+  
+  .dot-spinner__dot:nth-child(7) {
+    transform: rotate(270deg);
+  }
+  
+  .dot-spinner__dot:nth-child(7)::before {
+    animation-delay: calc(var(--uib-speed) * -0.25);
+  }
+  
+  .dot-spinner__dot:nth-child(8) {
+    transform: rotate(315deg);
+  }
+  
+  .dot-spinner__dot:nth-child(8)::before {
+    animation-delay: calc(var(--uib-speed) * -0.125);
+  }
+  
+  @keyframes pulse0112 {
+    0%,
+    100% {
+      transform: scale(0);
+      opacity: 0.5;
+    }
+  
+    50% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+