@pubuduth-aplicy/chat-ui 2.1.38 → 2.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.38",
+  "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,23 +1,26 @@
-// /* eslint-disable @typescript-eslint/no-explicit-any */
-// import { useCallback, useEffect, useRef } from "react";
-// import Message from "./Message";
-// import { useChatContext } from "../../providers/ChatProvider";
-// import { useMessages } from "../../hooks/queries/useChatApi";
-// import useChatUIStore from "../../stores/Zustant";
-// import { useInfiniteQuery } from "@tanstack/react-query";
-// import { fetchMessages } from "../../service/messageService";
-// import { useInView } from "react-intersection-observer";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useEffect, useRef, useState } from "react";
+import Message from "./Message";
+import { useChatContext } from "../../providers/ChatProvider";
+import { useMessages } from "../../hooks/queries/useChatApi";
+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 Messages = () => {
-//   const { selectedConversation, setMessages, messages } = useChatUIStore();
-//   const { userId, socket } = useChatContext();
-//   const { ref, inView } = useInView();
-//   const previousScrollHeight = useRef(0);
-//   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-//   // const { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
+  // const { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
 
-//   const lastMessageRef = useRef<HTMLDivElement>(null);
+  const lastMessageRef = useRef<HTMLDivElement>(null);
 
 //   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
 //     useInfiniteQuery({
@@ -30,183 +33,8 @@
 //       },
 //     });
 
-// 	useEffect(() => {
-// 		if (inView) {
-// 		  fetchNextPage();
-// 		}
-// 	  }, [fetchNextPage, inView]);
-
-// //   useEffect(() => {
-// //     if (data) {
-// // 		console.log(data,'message data');
-		
-// //       setMessages(data.messages);
-// //     }
-// //   }, [selectedConversation?._id, data]);
-
-// useEffect(() => {
-// 	if (data) {
-// 	  const allMessages = data.pages.flatMap(page => page.messages);
-// 	  setMessages(allMessages);
-
-// 	  if (scrollContainerRef.current) {
-// 		const newScrollHeight = scrollContainerRef.current.scrollHeight;
-// 		scrollContainerRef.current.scrollTop = newScrollHeight - previousScrollHeight.current;
-// 	  }
-// 	}
-//   }, [data]);
-
-//   // Listen for new messages from the server
-//   useEffect(() => {
-//     if (!socket || !selectedConversation?._id) return;
-
-//     // const handleNewMessage = (newMessage: any) => {
-//     //   newMessage.shouldShake = true;
-//     //   console.log("📩 New message received:", newMessage);
-//     //   setMessages((prevMessages) => [...prevMessages, newMessage[1]]);
-//     // };
-
-// 	const handleNewMessage = (newMessage: any) => {
-// 		newMessage.shouldShake = true;
-// 		console.log("📩 New message received:", newMessage);
-// 		setMessages((prevMessages) => {
-// 		  const updatedMessages = [...prevMessages, newMessage];
-// 		  return [...new Map(updatedMessages.map(m => [m._id, m])).values()]; // Prevent duplicates
-// 		});
-// 	  };
-	  
-
-//     const handleStatusUpdate = ({
-//       messageId,
-//       status,
-//     }: {
-//       messageId: string;
-//       status: string;
-//     }) => {
-//       setMessages((prev) =>
-//         prev.map((msg) => (msg._id === messageId ? { ...msg, status } : msg))
-//       );
-//     };
-
-//     socket.on("newMessage", handleNewMessage);
-//     socket.on("messageStatusUpdated", handleStatusUpdate);
-
-//     return () => {
-//       socket.off("newMessage", handleNewMessage);
-//       socket.off("messageStatusUpdated", handleStatusUpdate);
-//     };
-//   }, [socket, setMessages, messages]);
 
-// //   useEffect(() => {
-// //     setTimeout(() => {
-// //       lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
-// //     }, 100);
-// //   }, [messages]);
-
-// useEffect(() => {
-// 	if (!scrollContainerRef.current) return;
-  
-// 	const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
-// 	const isAtBottom = scrollHeight - scrollTop <= clientHeight + 100;
-  
-// 	if (isAtBottom) {
-// 	  setTimeout(() => {
-// 		lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
-// 	  }, 100);
-// 	}
-//   }, [messages]);
-  
-
-//   useEffect(() => {
-//     if (!socket || !messages.length) return;
-
-//     const observer = new IntersectionObserver(
-//       (entries) => {
-//         entries.forEach((entry) => {
-//           if (entry.isIntersecting) {
-//             const messageId = entry.target.getAttribute("data-message-id");
-//             if (messageId) {
-//               socket.emit("confirmDelivery", { messageId });
-//             }
-//           }
-//         });
-//       },
-//       { threshold: 0.5 }
-//     );
-
-//     const messageElements = document.querySelectorAll("[data-message-id]");
-//     messageElements.forEach((el) => observer.observe(el));
-
-//     return () => observer.disconnect();
-//   }, [messages, socket]);
-
-//   const handleScroll = useCallback(() => {
-// 	if (!scrollContainerRef.current || isFetchingNextPage || !hasNextPage) return;
-  
-// 	const { scrollTop } = scrollContainerRef.current;
-  
-// 	if (scrollTop < 50) { // Fetch next page only if close to the top
-// 	  fetchNextPage();
-// 	}
-//   }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
-  
-  
-
-//   useEffect(() => {
-//     const scrollContainer = scrollContainerRef.current;
-//     if (scrollContainer) {
-//       scrollContainer.addEventListener("scroll", handleScroll);
-//       return () => scrollContainer.removeEventListener("scroll", handleScroll);
-//     }
-//   }, [handleScroll]);
-
-//   console.log("📩 Messages:", messages);
-//   console.log("📩 Messages Length:", messages?.length);
-
-//   return (
-//     <div className="chatMessages">
-		
-// <div ref={ref} className="my-8">
-//         {isFetchingNextPage ? '<Loading isLoading={isFetchingNextPage} /> ': 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}>
-//               <Message message={message} />
-//             </div>
-//           ) : null
-//         )
-//       ) : (
-//         <p style={{ textAlign: "center" }}>
-//           Send a message to start the conversation
-//         </p>
-//       )}
-
-//     </div>
-//   );
-// };
-// export default Messages;
-
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useRef, useState } from "react";
-import Message from "./Message";
-import { useChatContext } from "../../providers/ChatProvider";
-import { useMessages } from "../../hooks/queries/useChatApi";
-import useChatUIStore from "../../stores/Zustant";
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { fetchMessages } from "../../service/messageService";// Assuming you have a loading spinner component
-
-const Messages = () => {
-  const { selectedConversation, setMessages, messages } = useChatUIStore();
-  const { userId, socket } = useChatContext();
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [isAutoScrolling, setIsAutoScrolling] = useState(false);
-  const [initialLoad, setInitialLoad] = useState(true);
-
-  const {
+const {
     data,
     fetchNextPage,
     hasNextPage,
@@ -216,76 +44,81 @@ const Messages = () => {
     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;
-    },
-  });
-
-  // Handle merging paginated data with messages
-  useEffect(() => {
-    if (data) {
+    getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,
+    onSuccess: (data) => {
       const allMessages = data.pages.flatMap(page => page.messages);
       setMessages(allMessages);
-    }
-  }, [data, setMessages]);
-
-  // Handle scroll position when new messages are loaded
-  useEffect(() => {
-    if (!scrollContainerRef.current || initialLoad) return;
-
-    const container = scrollContainerRef.current;
-    if (isFetchingNextPage) {
-      // Store current scroll position before loading more messages
-      const scrollTopBefore = container.scrollTop;
-      const scrollHeightBefore = container.scrollHeight;
       
-      // After messages are loaded, adjust scroll position to maintain view
-      requestAnimationFrame(() => {
-        container.scrollTop = container.scrollHeight - scrollHeightBefore + scrollTopBefore;
-      });
-    }
-  }, [isFetchingNextPage, initialLoad]);
-
-  // Handle initial scroll to bottom
-  useEffect(() => {
-    if (scrollContainerRef.current && messages.length > 0 && initialLoad) {
-      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
-      setInitialLoad(false);
-    }
-  }, [messages.length, initialLoad]);
+      // 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;
+    // 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) {
+		  fetchNextPage();
+		}
+	  }, [fetchNextPage, inView]);
 
-    const container = scrollContainerRef.current;
-    const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 100;
+//   useEffect(() => {
+//     if (data) {
+// 		console.log(data,'message data');
+		
+//       setMessages(data.messages);
+//     }
+//   }, [selectedConversation?._id, data]);
 
-    if (isNearBottom) {
-      setIsAutoScrolling(true);
-      container.scrollTo({
-        top: container.scrollHeight,
-        behavior: "smooth"
-      });
-      setTimeout(() => setIsAutoScrolling(false), 500);
-    }
-  }, [messages.length, isAutoScrolling]);
+useEffect(() => {
+	if (data) {
+	  const allMessages = data.pages.flatMap(page => page.messages);
+	  setMessages(allMessages);
+	}
+  }, [data]);
 
-  // Socket event handlers
+  // Listen for new messages from the server
   useEffect(() => {
     if (!socket || !selectedConversation?._id) return;
 
-    const handleNewMessage = (newMessage: any) => {
-      newMessage.shouldShake = true;
-      setMessages((prevMessages) => {
-        // Prevent duplicates
-        if (prevMessages.some(msg => msg._id === newMessage._id)) {
-          return prevMessages;
-        }
-        return [...prevMessages, newMessage];
-      });
-    };
+    // const handleNewMessage = (newMessage: any) => {
+    //   newMessage.shouldShake = true;
+    //   console.log("📩 New message received:", newMessage);
+    //   setMessages((prevMessages) => [...prevMessages, newMessage[1]]);
+    // };
+
+	const handleNewMessage = (newMessage: any) => {
+		newMessage.shouldShake = true;
+		console.log("📩 New message received:", newMessage);
+		setMessages((prevMessages) => {
+		  const updatedMessages = [...prevMessages, newMessage];
+		  return [...new Map(updatedMessages.map(m => [m._id, m])).values()]; // Prevent duplicates
+		});
+	  };
+	  
 
     const handleStatusUpdate = ({
       messageId,
@@ -306,9 +139,16 @@ const Messages = () => {
       socket.off("newMessage", handleNewMessage);
       socket.off("messageStatusUpdated", handleStatusUpdate);
     };
-  }, [socket, setMessages, selectedConversation?._id]);
+  }, [socket, setMessages, messages]);
+
+  useEffect(() => {
+    if (messages.length > 0) {
+		setTimeout(() => {
+		  lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+		}, 100);
+	  }
+  }, [messages.length]);
 
-  // Delivery confirmation observer
   useEffect(() => {
     if (!socket || !messages.length) return;
 
@@ -332,62 +172,64 @@ const Messages = () => {
     return () => observer.disconnect();
   }, [messages, socket]);
 
-  // Scroll handler for infinite loading
   const handleScroll = useCallback(() => {
     if (!scrollContainerRef.current || isFetchingNextPage || !hasNextPage) return;
 
-    const container = scrollContainerRef.current;
-    const scrollTop = container.scrollTop;
-    
-    // Load more messages when scrolled near the top
-    if (scrollTop < 100 && !isFetchingNextPage) {
+    const { scrollTop } = scrollContainerRef.current;
+    // Load more when scrolled near the top (10% threshold)
+    if (scrollTop < 100) {
       fetchNextPage();
     }
   }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
 
   useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
-    if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll);
-      return () => scrollContainer.removeEventListener("scroll", handleScroll);
+    const container = scrollContainerRef.current;
+    if (container) {
+      container.addEventListener('scroll', handleScroll);
+      return () => container.removeEventListener('scroll', handleScroll);
     }
   }, [handleScroll]);
 
+//   useEffect(() => {
+//     const scrollContainer = scrollContainerRef.current;
+//     if (scrollContainer) {
+//       scrollContainer.addEventListener("scroll", handleScroll);
+//       return () => scrollContainer.removeEventListener("scroll", handleScroll);
+//     }
+//   }, [handleScroll]);
+  console.log("📩 Messages:", messages);
+  console.log("📩 Messages Length:", messages?.length);
+
   if (isLoading && !messages.length) {
-    return <LoadingSpinner />;
+    return <Loader />;
   }
 
   return (
-    <div 
-      ref={scrollContainerRef}
-      className="chatMessages"
-      style={{ overflowY: "auto", height: "100%", position: "relative" }}
-    >
-      {isFetchingNextPage && (
+    <div className="chatMessages"
+	ref={scrollContainerRef}
+	style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
+	>
+	{isFetchingNextPage && (
         <div className="loading-indicator">
-         loading
+          <Loader/>
         </div>
       )}
-
       {messages?.length > 0 ? (
-        messages.map((message: any) => (
-          message && (
-            <div 
-              key={message._id} 
-              data-message-id={message._id}
-              ref={messages.indexOf(message) === messages.length - 1 ? lastMessageRef : null}
-            >
+        messages?.map((message: any) =>
+          // Check if the message object is valid and has an _id before rendering
+          message ? (
+            <div key={message._id} ref={lastMessageRef}>
               <Message message={message} />
             </div>
-          )
-        ))
+          ) : null
+        )
       ) : (
         <p style={{ textAlign: "center" }}>
           Send a message to start the conversation
         </p>
       )}
+
     </div>
   );
 };
-
-export default Messages;
+export default Messages;

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