@pubuduth-aplicy/chat-ui 2.1.42 → 2.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.42",
+  "version": "2.1.43",
   "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,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useRef, useState } from "react";
+import { 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";
@@ -13,16 +12,11 @@ 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 } =
+  const { data, fetchNextPage, isFetchingNextPage } =
   useInfiniteQuery({
     queryKey: ["messages", selectedConversation?._id, userId],
     queryFn: ({ pageParam = 1 }) =>
@@ -31,120 +25,8 @@ const Messages = () => {
       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) {
@@ -152,13 +34,6 @@ const Messages = () => {
 		}
 	  }, [fetchNextPage, inView]);
 
-//   useEffect(() => {
-//     if (data) {
-// 		console.log(data,'message data');
-		
-//       setMessages(data.messages);
-//     }
-//   }, [selectedConversation?._id, data]);
 
 useEffect(() => {
 	if (data) {
@@ -173,20 +48,20 @@ useEffect(() => {
   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) => [...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 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 = ({
@@ -197,7 +72,7 @@ useEffect(() => {
       status: string;
     }) => {
       setMessages((prev) =>
-        prev.map((msg) => (msg._id === messageId ? { ...msg, status } : msg))
+        prev.map((msg) => (msg.id === messageId ? { ...msg, status } : msg))
       );
     };
 
@@ -275,7 +150,7 @@ console.log("📩 Messages:", messages);
 
   return (
     <div className="chatMessages"
-	ref={scrollContainerRef}
+
 	style={{ overflowY: 'auto', height: '100%', position: 'relative' }}
 	>
 

package/src/components/sidebar/Conversation.tsx

@@ -1,12 +1,13 @@
 // import { useSocketContext } from "../../context/SocketContext";
 // import useConversation from "../../zustand/useConversation";
 
+import { useEffect } from "react";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
 
 const Conversation = ({ conversation, lastIdx }: ConversationProps) => {
-  const { setSelectedConversation } = useChatUIStore();
+  const { setSelectedConversation, setOnlineUsers,onlineUsers } = useChatUIStore();
   const { socket } = useChatContext();
 console.log(conversation);
 
@@ -25,9 +26,22 @@ const handleSelectConversation = async () => {
   }
 };
 
-//   const isSelected = selectedConversation?._id === conversation._id;
-  // const { onlineUsers } = useSocketContext();
-  // const isOnline = onlineUsers.includes(conversation._id);
+    useEffect(() => {
+        if (!socket) return;
+
+        const handleOnlineUsers = (users: string[]) => {
+            setOnlineUsers(users);
+        };
+
+        socket.on("getOnlineUsers", handleOnlineUsers);
+
+        return () => {
+            socket.off("getOnlineUsers", handleOnlineUsers);
+        };
+    }, [socket, setOnlineUsers]);
+
+    const isUserOnline = conversation?.participantDetails?._id &&
+    onlineUsers?.includes(conversation.participantDetails._id);
   return (
     <>
       <div
@@ -39,17 +53,22 @@ const handleSelectConversation = async () => {
           className="chatSidebarConversationImg"
           src={conversation.participantDetails?.profilePic|| conversation.participantDetails?.idpic}
         />
+         <p className="text-sm text-[#12bbb5]">
+                                    {isUserOnline ? "Online" : "Offline"}
+                                    </p>
         <div className="chatSidebarConversationContainer">
           {/* <div className="chatSidebarConversationInnerDiv"> */}
             <p className="text-sm text-gray-500">
               {conversation.participantDetails?.firstname}
             </p>
             <p className="chatSidebarConversationOuterDiv">
-            Do you know which
+           {conversation.lastMessage.message}
             </p>
           {/* </div> */}
         </div>
-        <span className="text-xs text-gray-500">08:12 AM</span>
+        <span className="text-xs text-gray-500">
+        {new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+        </span>
       </div>
 
       {!lastIdx && <div className="divider my-0 py-0 h-1" />}