@pubuduth-aplicy/chat-ui 2.1.37 → 2.1.39

package/package.json

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

@@ -25,7 +25,7 @@ const Messages = () => {
         fetchMessages(selectedConversation?._id, userId, pageParam),
       initialPageParam: 1,
       getNextPageParam: (lastPage, allPages) => {
-        return lastPage.length ? allPages.length + 1 : undefined;
+        return lastPage.messages.length ? allPages.length + 1: undefined;
       },
     });
 
@@ -35,23 +35,40 @@ const Messages = () => {
 		}
 	  }, [fetchNextPage, inView]);
 
-  useEffect(() => {
-    if (data) {
-		console.log(data,'message data');
+//   useEffect(() => {
+//     if (data) {
+// 		console.log(data,'message data');
 		
-      setMessages(data.messages);
-    }
-  }, [selectedConversation?._id, data]);
+//       setMessages(data.messages);
+//     }
+//   }, [selectedConversation?._id, data]);
+
+useEffect(() => {
+	if (data) {
+	  const allMessages = data.pages.flatMap(page => page.messages);
+	  setMessages(allMessages);
+	}
+  }, [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) => [...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,
@@ -61,7 +78,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))
       );
     };
 
@@ -75,10 +92,12 @@ const Messages = () => {
   }, [socket, setMessages, messages]);
 
   useEffect(() => {
-    setTimeout(() => {
-      lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, 100);
-  }, [messages]);
+    if (messages.length > 0) {
+		setTimeout(() => {
+		  lastMessageRef.current?.scrollIntoView({ behavior: "smooth" });
+		}, 100);
+	  }
+  }, [messages.length]);
 
   useEffect(() => {
     if (!socket || !messages.length) return;
@@ -113,18 +132,22 @@ const Messages = () => {
     }
   }, [fetchNextPage, isFetchingNextPage, hasNextPage]);
 
-  useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
-    if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll);
-      return () => scrollContainer.removeEventListener("scroll", handleScroll);
-    }
-  }, [handleScroll]);
+//   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
@@ -140,9 +163,6 @@ const Messages = () => {
         </p>
       )}
 
-<div ref={ref} className="my-8">
-        {isFetchingNextPage ? '<Loading isLoading={isFetchingNextPage} /> ': null}
-      </div>
     </div>
   );
 };

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
+}