@pubuduth-aplicy/chat-ui 2.2.11 → 2.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.11",
+  "version": "2.2.13",
   "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/Chat.tsx

@@ -20,9 +20,9 @@ export const Chat = () => {
           const message = parsed.data.data;
           // Send delivery confirmation
           // Update UI immediately
-          setMessages((prev) => [...prev, message]);
+          // setMessages((prev) => [...prev, message]);
           sendMessage({
-            event: "messageRead",
+            event: "confirmDelivery",
             data: {
               messageIds: [message._id],
               chatId: message.conversationId, // make sure this is sent from backend
@@ -34,24 +34,25 @@ export const Chat = () => {
           });
 
           // Optional: update UI
-          // updateMessageStatus(message._id, "delivered");
-          updateMessageStatus(message._id, "read");
+          updateMessageStatus(message._id, "delivered");
 
-          // // Send read receipt if user is viewing this conversation
-          // // This ensures messages are marked as "read" immediately when both users are in the same chat
-          // if (message.conversationId === selectedConversation?._id) {
-          //   sendMessage({
-          //     event: "messageRead",
-          //     data: {
-          //       messageIds: [message._id],
-          //       chatId: message.conversationId,
-          //       senderId: message.senderId,
-          //       receiverId: message.receiverId,
-          //       receiverRole: message.receiverRole,
-          //       senderRole: message.senderRole,
-          //     },
-          //   });
-          // }
+          // Only append to the message list if the message belongs to the currently open conversation
+          if (message.conversationId === selectedConversation?._id) {
+            setMessages((prev) => [...prev, message]);
+
+            // Send read receipt only when the user is viewing this conversation
+            sendMessage({
+              event: "messageRead",
+              data: {
+                messageIds: [message._id],
+                chatId: message.conversationId,
+                senderId: message.senderId,
+                receiverId: message.receiverId,
+                receiverRole: message.receiverRole,
+                senderRole: message.senderRole,
+              },
+            });
+          }
         }
       } catch (error) {
         console.error("WebSocket message parse error:", error);
@@ -60,7 +61,7 @@ export const Chat = () => {
 
     socket.addEventListener("message", handleMessage);
     return () => socket.removeEventListener("message", handleMessage);
-  }, [socket, setMessages, sendMessage, updateMessageStatus]);
+  }, [socket, setMessages, sendMessage, updateMessageStatus, selectedConversation]);
 
   return (
     <div className="container mx-auto mb-5">

package/src/components/messages/Messages.tsx

@@ -44,13 +44,43 @@ const Messages = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const parsed = JSON.parse(event.data);
-        if (parsed.type === "newMessage" || parsed.event === "newMessage") {
-          const newMessage = parsed.data;
-          if (!newMessage) {
-            // console.warn(
-            //   "Received newMessage event without a message payload",
-            //   parsed
-            // );
+        // if (parsed.type === "newMessage" || parsed.event === "newMessage") {
+        //   const newMessage = parsed.data;
+        //   if (!newMessage) {
+        //     // console.warn(
+        //     //   "Received newMessage event without a message payload",
+        //     //   parsed
+        //     // );
+        //     return;
+        //   }
+
+        //   newMessage.shouldShake = true;
+
+        //   setMessages((prevMessages) => {
+        //     const isDuplicate = prevMessages.some(
+        //       (msg) =>
+        //         msg._id === newMessage._id ||
+        //         (msg.isOptimistic &&
+        //           msg.sender.senderId === userId &&
+        //           msg.message === newMessage.message)
+        //     );
+
+        //     return isDuplicate ? prevMessages : [...prevMessages, newMessage];
+        //   });
+        // }
+
+        if (parsed.event === "newMessage" || parsed.type === "newMessage") {
+          const newMessage = parsed?.data?.data;
+          if (!newMessage) return;
+
+          const incomingConversationId = newMessage.conversationId;
+          const currentConversationId = selectedConversation?._id;
+
+          // ✅ if message is for another conversation, DO NOT append here
+          if (
+            !currentConversationId ||
+            incomingConversationId !== currentConversationId
+          ) {
             return;
           }
 
@@ -58,15 +88,17 @@ const Messages = () => {
 
           setMessages((prevMessages) => {
             const isDuplicate = prevMessages.some(
-              (msg) =>
+              (msg: any) =>
                 msg._id === newMessage._id ||
                 (msg.isOptimistic &&
-                  msg.sender.senderId === userId &&
-                  msg.message === newMessage.message)
+                  msg.sender?.senderId === userId &&
+                  msg.message === newMessage.message),
             );
 
             return isDuplicate ? prevMessages : [...prevMessages, newMessage];
           });
+
+          return;
         }
 
         const statusOrder = ["sent", "delivered", "read", "edited", "deleted"];
@@ -92,7 +124,7 @@ const Messages = () => {
               }
 
               return msg; // No update if new status isn't higher
-            })
+            }),
           );
         }
 
@@ -106,8 +138,8 @@ const Messages = () => {
             prevMessages.map((msg) =>
               msg._id === updatedMessage.messageId
                 ? { ...msg, message: updatedMessage.message, status: "edited" }
-                : msg
-            )
+                : msg,
+            ),
           );
         }
 
@@ -125,8 +157,8 @@ const Messages = () => {
                     message: "This message was deleted",
                     status: "deleted",
                   }
-                : msg
-            )
+                : msg,
+            ),
           );
         }
       } catch (error) {
@@ -197,7 +229,7 @@ const Messages = () => {
             >
               <Message message={message} />
             </div>
-          ) : null
+          ) : null,
         )
       ) : (
         <p style={{ textAlign: "center" }}>

package/src/components/sidebar/Conversations.tsx

@@ -17,10 +17,6 @@ type GroupedServiceChats = {
   };
 };
 
-type Row =
-  | { type: "service-header"; serviceId: string; title: string }
-  | { type: "conversation"; conversation: ConversationType };
-
 type TabType = "personal" | "service";
 
 const Conversations = () => {

package/src/hooks/useMessageStatus.ts

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import { useChatContext } from "../providers/ChatProvider";
 import useChatUIStore from '../stores/Zustant';
+import { getChatConfig } from '../Chat.config';
 
 export const useMessageStatus = () => {
     const { socket, userId } = useChatContext();
     const { messages, setMessages, selectedConversation } = useChatUIStore();
-
+    const { role } = getChatConfig();
     useEffect(() => {
         if (!socket) return;
 
@@ -82,6 +83,8 @@ export const useMessageStatus = () => {
         );
 
         if (unreadMessages.length > 0) {
+            console.log('unread message in usemessagestatus',u);
+            
             socket.send(JSON.stringify({
                 event: 'messageRead',
                 data: {
@@ -89,6 +92,8 @@ export const useMessageStatus = () => {
                     chatId: selectedConversation._id,
                     senderRole: unreadMessages[0].sender.role,
                     senderId: unreadMessages[0].sender.senderId,
+                    receiverId: userId,
+                    receiverRole: role,
                 }
             }));
         }