@pubuduth-aplicy/chat-ui 2.1.36 → 2.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.36",
+  "version": "2.1.38",
   "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/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,119 +1,393 @@
+// /* 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 { useEffect, useRef } from "react";
-// import useGetMessages from "../../hooks/useGetMessages";
-// import MessageSkeleton from "../skeletons/MessageSkeleton";
+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 useListenMessages from "../../hooks/useListenMessages";
+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 { data, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
-
-	const lastMessageRef = useRef<HTMLDivElement>(null);
-
-
-	useEffect(() => {	
-		if (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([...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">
+  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 {
+    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 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]);
+
+  // 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]);
+
+  // Socket event handlers
+  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 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, selectedConversation?._id]);
+
+  // Delivery confirmation observer
+  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]);
+
+  // 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) {
+      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 />;
+  }
+
+  return (
+    <div 
+      ref={scrollContainerRef}
+      className="chatMessages"
+      style={{ overflowY: "auto", height: "100%", position: "relative" }}
+    >
+      {isFetchingNextPage && (
+        <div className="loading-indicator">
+         loading
+        </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}>
+        messages.map((message: any) => (
+          message && (
+            <div 
+              key={message._id} 
+              data-message-id={message._id}
+              ref={messages.indexOf(message) === messages.length - 1 ? lastMessageRef : null}
+            >
               <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/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,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // 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';
+declare module '@pubuduth-aplicy/chat-ui' {
+  export function ChatUI(props: any): JSX.Element;
+  // Define other exports and types as needed
+}

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) {