@pubuduth-aplicy/chat-ui 2.1.39 → 2.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.39",
+  "version": "2.1.40",
   "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,77 @@ 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 { 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 } =
+//     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({
+    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);
+      }
+    },
+  });
+
+    // 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]);
 
 	useEffect(() => {
 		if (inView) {
@@ -124,14 +174,22 @@ useEffect(() => {
 
   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;
 //     if (scrollContainer) {
@@ -142,12 +200,20 @@ useEffect(() => {
   console.log("📩 Messages:", messages);
   console.log("📩 Messages Length:", messages?.length);
 
+  if (isLoading && !messages.length) {
+    return <Loader />;
+  }
+
   return (
-    <div className="chatMessages">
-		
-<div ref={ref} className="my-8">
-        {isFetchingNextPage ? '<Loading isLoading={isFetchingNextPage} /> ': null}
-      </div>
+    <div className="chatMessages"
+	ref={scrollContainerRef}
+	style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
+	>
+	{isFetchingNextPage && (
+        <div className="loading-indicator">
+          <Loader/>
+        </div>
+      )}
       {messages?.length > 0 ? (
         messages?.map((message: any) =>
           // Check if the message object is valid and has an _id before rendering

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;
+    }
+  }
+