@pubuduth-aplicy/chat-ui 2.1.38 → 2.1.39

package/package.json

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

@@ -1,291 +1,74 @@
-// /* 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";
-
-// 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 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;
-//       },
-//     });
-
-// 	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 { 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";// Assuming you have a loading spinner component
+import { fetchMessages } from "../../service/messageService";
+import { useInView } from "react-intersection-observer";
 
 const Messages = () => {
   const { selectedConversation, setMessages, messages } = useChatUIStore();
   const { userId, socket } = useChatContext();
+  const { ref, inView } = useInView();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [isAutoScrolling, setIsAutoScrolling] = useState(false);
-  const [initialLoad, setInitialLoad] = useState(true);
-
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isLoading,
-  } = 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;
-    },
-  });
-
-  // Handle merging paginated data with messages
-  useEffect(() => {
-    if (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 { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
 
-    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]);
+  const lastMessageRef = useRef<HTMLDivElement>(null);
 
-  // Handle initial scroll to bottom
-  useEffect(() => {
-    if (scrollContainerRef.current && messages.length > 0 && initialLoad) {
-      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
-      setInitialLoad(false);
-    }
-  }, [messages.length, initialLoad]);
+  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;
+      },
+    });
 
-  // Auto-scroll to bottom when new message arrives and user is near bottom
-  useEffect(() => {
-    if (!scrollContainerRef.current || isAutoScrolling) return;
+	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 +89,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 +122,48 @@ 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;
+    
+    if (scrollTop < 100) {
       fetchNextPage();
     }
   }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
 
-  useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
-    if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll);
-      return () => scrollContainer.removeEventListener("scroll", handleScroll);
-    }
-  }, [handleScroll]);
-
-  if (isLoading && !messages.length) {
-    return <LoadingSpinner />;
-  }
+//   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 
-      ref={scrollContainerRef}
-      className="chatMessages"
-      style={{ overflowY: "auto", height: "100%", position: "relative" }}
-    >
-      {isFetchingNextPage && (
-        <div className="loading-indicator">
-         loading
-        </div>
-      )}
-
+    <div className="chatMessages">
+		
+<div ref={ref} className="my-8">
+        {isFetchingNextPage ? '<Loading isLoading={isFetchingNextPage} /> ': null}
+      </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;