@pubuduth-aplicy/chat-ui 2.1.37 → 2.1.38

package/package.json

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

package/src/components/messages/Messages.tsx

@@ -1,56 +1,290 @@
+// /* 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 } from "react";
+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 { fetchMessages } from "../../service/messageService";// Assuming you have a loading spinner component
 
 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, isLoading, isError, error } = useMessages(selectedConversation?._id, userId);
+  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;
+    },
+  });
 
-  const lastMessageRef = useRef<HTMLDivElement>(null);
+  // Handle merging paginated data with messages
+  useEffect(() => {
+    if (data) {
+      const allMessages = data.pages.flatMap(page => page.messages);
+      setMessages(allMessages);
+    }
+  }, [data, setMessages]);
 
-  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;
-      },
-    });
+  // Handle scroll position when new messages are loaded
+  useEffect(() => {
+    if (!scrollContainerRef.current || initialLoad) return;
 
-	useEffect(() => {
-		if (inView) {
-		  fetchNextPage();
-		}
-	  }, [fetchNextPage, inView]);
+    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 (data) {
-		console.log(data,'message data');
-		
-      setMessages(data.messages);
+    if (scrollContainerRef.current && messages.length > 0 && initialLoad) {
+      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+      setInitialLoad(false);
     }
-  }, [selectedConversation?._id, data]);
+  }, [messages.length, initialLoad]);
 
-  // Listen for new messages from the server
+  // 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;
-      console.log("📩 New message received:", newMessage);
-      setMessages((prevMessages) => [...prevMessages, newMessage[1]]);
+      setMessages((prevMessages) => {
+        // Prevent duplicates
+        if (prevMessages.some(msg => msg._id === newMessage._id)) {
+          return prevMessages;
+        }
+        return [...prevMessages, newMessage];
+      });
     };
 
     const handleStatusUpdate = ({
@@ -61,7 +295,7 @@ const Messages = () => {
       status: string;
     }) => {
       setMessages((prev) =>
-        prev.map((msg) => (msg.id === messageId ? { ...msg, status } : msg))
+        prev.map((msg) => (msg._id === messageId ? { ...msg, status } : msg))
       );
     };
 
@@ -72,14 +306,9 @@ const Messages = () => {
       socket.off("newMessage", handleNewMessage);
       socket.off("messageStatusUpdated", handleStatusUpdate);
     };
-  }, [socket, setMessages, messages]);
-
-  useEffect(() => {
-    setTimeout(() => {
-      lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, 100);
-  }, [messages]);
+  }, [socket, setMessages, selectedConversation?._id]);
 
+  // Delivery confirmation observer
   useEffect(() => {
     if (!socket || !messages.length) return;
 
@@ -103,12 +332,15 @@ 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;
     
-    const { scrollTop } = scrollContainerRef.current;
-    
-    if (scrollTop < 100) {
+    // Load more messages when scrolled near the top
+    if (scrollTop < 100 && !isFetchingNextPage) {
       fetchNextPage();
     }
   }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
@@ -120,30 +352,42 @@ const Messages = () => {
       return () => scrollContainer.removeEventListener("scroll", handleScroll);
     }
   }, [handleScroll]);
-  console.log("📩 Messages:", messages);
-  console.log("📩 Messages Length:", messages?.length);
+
+  if (isLoading && !messages.length) {
+    return <LoadingSpinner />;
+  }
 
   return (
-    <div className="chatMessages">
+    <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 ref={ref} className="my-8">
-        {isFetchingNextPage ? '<Loading isLoading={isFetchingNextPage} /> ': null}
-      </div>
     </div>
   );
 };
-export default Messages;
+
+export default Messages;

package/src/declarations.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // src/declarations.d.ts
 declare module '*.css' {
   const content: string;
@@ -15,3 +16,7 @@ declare module '*.svg' {
 }
 
 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
+}