@pubuduth-aplicy/chat-ui 2.1.35 → 2.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.35",
+  "version": "2.1.37",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",
@@ -16,6 +16,7 @@
     "axios": "^1.8.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-intersection-observer": "^9.16.0",
     "socket.io-client": "^4.8.1",
     "zustand": "^5.0.3"
   },

package/src/components/Chat.tsx

@@ -1,11 +1,29 @@
+import { useEffect } from 'react';
 import useChatUIStore from '../stores/Zustant';
 import MessageContainer from './messages/MessageContainer';
 import { Sidebar } from './sidebar/Sidebar'
+import { useChatContext } from '../providers/ChatProvider';
+
 // import MessageContainer from './components/messages/MessageContainer'
 // import useConversation from '../../zustand/useConversation';
 
 export const Chat = () => {
-	const { selectedConversation } = useChatUIStore();
+	const { selectedConversation, messages, setMessages, updateMessageStatus } = useChatUIStore();
+	const {socket}=useChatContext()
+	useEffect(() => {
+		socket.on("receiveMessage", (messageData) => {
+		  setMessages([...messages, { ...messageData, status: "sent" }]);
+		});
+	
+		socket.on("messageDelivered", ({ messageId }) => {
+		  updateMessageStatus(messageId, "delivered");
+		});
+	
+		return () => {
+		  socket.off("receiveMessage");
+		  socket.off("messageDelivered");
+		};
+	  }, [messages, setMessages, updateMessageStatus]);
 	return (
 		<>
 			<div className='container mx-auto mb-5'>

package/src/components/messages/MessageInput.tsx

@@ -79,28 +79,6 @@ const MessageInput = () => {
       setIsSending(true);
       try {
         console.log("📤 Sending message:", message);
-
-        // if (selectedConversation?._id) {
-        //   const response = await sendMessage({
-        //     chatId: selectedConversation.participantDetails._id,
-        //     senderId: userId,
-        //     message,
-        //   });
-          
-        //   // You can log or handle the response here
-        //   console.log('Response from sendMessage:', response);
-  
-          
-        //   socket.emit("sendMessage", {
-        //     chatId: selectedConversation._id,
-        //     message,
-        //     senderId: userId,
-        //     receiverId: selectedConversation.participantDetails._id,
-        //   });
-        // }
-
-       
-
         mutation.mutate({
           chatId: selectedConversation?.participantDetails._id,
           senderId: userId,

package/src/components/messages/Messages.tsx

@@ -1,103 +1,130 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useRef } from "react";
-// import useGetMessages from "../../hooks/useGetMessages";
-// import MessageSkeleton from "../skeletons/MessageSkeleton";
+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 useListenMessages from "../../hooks/useListenMessages";
+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 { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
+  const { selectedConversation, setMessages, messages } = useChatUIStore();
+  const { userId, socket } = useChatContext();
+  const { ref, inView } = useInView();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-	const lastMessageRef = useRef<HTMLDivElement>(null);
+  // const { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
 
+  const lastMessageRef = useRef<HTMLDivElement>(null);
 
-	useEffect(() => {	
-		if (data) {
-		  setMessages(data.messages);
+  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.length ? allPages.length + 1 : undefined;
+      },
+    });
+
+	useEffect(() => {
+		if (inView) {
+		  fetchNextPage();
 		}
-	  }, [selectedConversation?._id,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([...messages, newMessage[1]]);
-		setMessages((prevMessages) => [...prevMessages, newMessage]);
-		};
-
-		const handleStatusUpdate = ({ messageId, status }) => {
-			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 (!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]);
-
-	if (isLoading) {
-		return <p>Loading messages...</p>;
-	  }
-	
-	  if (isError) {
-		return <p>Error: {error?.message}</p>;
-	  }
-
-	  console.log("📩 Messages:", messages);
-	  console.log("📩 Messages Length:", messages?.length);
-	  
-	return (
-	// 	<div className="chatMessages">
-	// 	{messages?.length > 0 ? (
-	// 	  messages?.map((message: any) => (
-	// 		<div key={message._id} ref={lastMessageRef}>
-	// 		  <Message message={message} />
-	// 		</div>
-	// 	  ))
-	// 	) : (
-	// 	  <p style={{ textAlign: "center" }}>Send a message to start the conversation</p>
-	// 	)}
-	//   </div>
-<div className="chatMessages">
+	  }, [fetchNextPage, inView]);
+
+  useEffect(() => {
+    if (data) {
+		console.log(data,'message data');
+		
+      setMessages(data.messages);
+    }
+  }, [selectedConversation?._id, 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 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 (!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 < 100) {
+      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">
       {messages?.length > 0 ? (
         messages?.map((message: any) =>
           // Check if the message object is valid and has an _id before rendering
@@ -112,8 +139,11 @@ const Messages = () => {
           Send a message to start the conversation
         </p>
       )}
+
+<div ref={ref} className="my-8">
+        {isFetchingNextPage ? '<Loading isLoading={isFetchingNextPage} /> ': null}
+      </div>
     </div>
-	);
+  );
 };
 export default Messages;
-

package/src/components/sidebar/Conversation.tsx

@@ -13,16 +13,15 @@ console.log(conversation);
 const handleSelectConversation = async () => {
   setSelectedConversation(conversation);
 
-  const lastMessageId = conversation.lastMessageId; // You should have this in conversation data
+  const unreadMessages = conversation.unreadMessageIds || []; // Get all unread message IDs
+
+  if (unreadMessages.length > 0) {
+    console.log("Emitting messageRead for messages:", unreadMessages);
 
-  if (lastMessageId) {
-    // ✅ Notify server via socket
     socket.emit("messageRead", {
-      messageId: lastMessageId,
-      receiverId: conversation.participantDetails._id, // or receiverId
+      messageIds: unreadMessages, // Send all unread message IDs
+      receiverId: conversation.participantDetails._id,
     });
-
-
   }
 };
 
@@ -34,7 +33,7 @@ const handleSelectConversation = async () => {
       <div
         className={` chatSidebarConversationMain
 			`}
-        onClick={() => setSelectedConversation(conversation)}
+        onClick={handleSelectConversation}
       >
         <img
           className="chatSidebarConversationImg"

package/src/declarations.d.ts

@@ -1,16 +1,17 @@
 // src/declarations.d.ts
 declare module '*.css' {
-    const content: string;
-    export default content;
-  }
+  const content: string;
+  export default content;
+}
 
 declare module '*.png' {
-    const content: string;
-    export default content;
-  }
+  const content: string;
+  export default content;
+}
 
 declare module '*.svg' {
-    const content: string;
-    export default content;
-  }
-  
+  const content: string;
+  export default content;
+}
+
+declare module '@pubuduth-aplicy/chat-ui';

package/src/hooks/queries/useChatApi.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useQuery } from "@tanstack/react-query";
 import { getAllConversationData } from "../../service/sidebarApi";
-import { fetchMessages } from "../../service/messageService";
+// import { fetchMessages } from "../../service/messageService";
 
 
 export const useGetConversations = (id: any) => {
@@ -15,12 +15,12 @@ export const useGetConversations = (id: any) => {
   });
 };
 
-export const useMessages = (chatId: string| undefined, userid: string) => {
-  return useQuery({
-    queryKey: ['messages', chatId, userid],
-    queryFn: () => {
-      console.log('Fetching messages for:', chatId, userid);
-      return fetchMessages(chatId, userid);
-    },
-  });
-};
+// export const useMessages = (chatId: string| undefined, userid: string) => {
+//   return useQuery({
+//     queryKey: ['messages', chatId, userid],
+//     queryFn: () => {
+//       console.log('Fetching messages for:', chatId, userid);
+//       return fetchMessages(chatId, userid);
+//     },
+//   });
+// };

package/src/service/messageService.ts

@@ -10,9 +10,11 @@ export const sendMessage = async ({ chatId,senderId, message }: { chatId: any; s
 };
 
 
-export const fetchMessages = async (chatId: string|undefined, userid: string) => {
+export const fetchMessages = async (chatId: string|undefined, userid: string,pagenum:number) => {
     try {
-        const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`);
+        const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`,{
+            params: { pagenum, limit: 20 },
+        });
         console.log(response); // Check the full response
         return response.data; // Ensure 'data' exists or adjust accordingly
     } catch (error) {