@pubuduth-aplicy/chat-ui 2.2.12 → 2.2.14

package/package.json

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

@@ -5,7 +5,7 @@ import { Sidebar } from "./sidebar/Sidebar";
 import { useChatContext } from "../providers/ChatProvider";
 
 export const Chat = () => {
-  const { setMessages, selectedConversation, updateMessageStatus } = useChatUIStore();
+  const { selectedConversation, updateMessageStatus } = useChatUIStore();
 
   const { socket, sendMessage } = useChatContext();
 
@@ -20,12 +20,12 @@ 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
+              chatId: message.conversationId,
               senderRole: message.senderRole,
               receiverRole: message.receiverRole,
               senderId: message.senderId,
@@ -34,24 +34,22 @@ 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) {
+            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 +58,7 @@ export const Chat = () => {
 
     socket.addEventListener("message", handleMessage);
     return () => socket.removeEventListener("message", handleMessage);
-  }, [socket, setMessages, sendMessage, updateMessageStatus]);
+  }, [socket, sendMessage, updateMessageStatus, selectedConversation]);
 
   return (
     <div className="container mx-auto mb-5">

package/src/components/messages/MessageContainer.tsx

@@ -16,8 +16,9 @@ const MessageContainer = () => {
   const { role } = getChatConfig();
 
   useEffect(() => {
-    if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
-      // Send joinChat command to server via WebSocket
+    if (!socket || !selectedConversation?._id) return;
+
+    const sendJoinChat = () => {
       socket.send(
         JSON.stringify({
           event: "joinChat",
@@ -28,8 +29,35 @@ const MessageContainer = () => {
           },
         })
       );
+
+      // Bulk-mark all existing unread messages as read when the conversation is opened
+      const unreadIds = selectedConversation.unreadMessageIds ?? [];
+      const lastMsg = selectedConversation.lastMessage;
+      if (unreadIds.length > 0 && lastMsg) {
+        socket.send(
+          JSON.stringify({
+            event: "messageRead",
+            data: {
+              messageIds: unreadIds,
+              chatId: selectedConversation._id,
+              senderId: lastMsg.senderId,
+              receiverId: userId,
+              // roles are not always available here — backend should infer from chatId if needed
+            },
+          })
+        );
+      }
+    };
+
+    if (socket.readyState === WebSocket.OPEN) {
+      // Socket already open — fire immediately
+      sendJoinChat();
+    } else if (socket.readyState === WebSocket.CONNECTING) {
+      // Socket still connecting — wait for it to open, then fire once
+      socket.addEventListener("open", sendJoinChat, { once: true });
+      return () => socket.removeEventListener("open", sendJoinChat);
     }
-  }, [selectedConversation?._id, socket]);
+  }, [selectedConversation?._id, socket, userId, role]);
 
   useEffect(() => {
     if (!socket) return;

package/src/components/sidebar/Conversation.tsx

@@ -160,13 +160,16 @@ const Conversation = ({ conversation }: ConversationProps) => {
           </div>
           {/* <span className="text-xs text-gray-500">{lastMessageTimestamp}</span> */}
         </div>
-        <p className="text-xs text-gray-600 truncate dark:text-gray-500">
-          {conversation.lastMessage?.status === "deleted"
-            ? "This message was deleted"
-            : conversation.lastMessage?.media?.length > 0
-            ? "Attachment"
-            : conversation.lastMessage?.message}
-        </p>
+       <p className="text-xs text-gray-600 dark:text-gray-500">
+  {conversation.lastMessage?.status === "deleted"
+    ? "This message was deleted"
+    : conversation.lastMessage?.media?.length > 0
+    ? "Attachment"
+    : conversation.lastMessage?.message?.length > 30
+    ? conversation.lastMessage.message.slice(0, 30) + "..."
+    : conversation.lastMessage?.message}
+</p>
+
       </div>
     </div>
   );

package/src/components/sidebar/Conversations.tsx

@@ -198,18 +198,21 @@ const Conversations = () => {
 
     const messageListener = (event: MessageEvent) => {
       try {
-        const data = JSON.parse(event.data);
-        if (data.event === "newMessage") {
-          handleNewMessage(data.data);
+        const parsed = JSON.parse(event.data);
+
+        if (parsed.event === "newMessage") {
+          // Actual message is nested at parsed.data.data — same structure as Messages.tsx
+          const newMessage = parsed?.data?.data;
+          handleNewMessage(newMessage);
         } else if (
-          data.event === "messageStatusUpdated" &&
-          data.data.status === "read"
+          parsed.event === "messageStatusUpdated" &&
+          parsed.data?.status === "read"
         ) {
+          // messageId can come as a single id or an array depending on backend
+          const rawId = parsed.data.messageId ?? parsed.data.messageIds;
           handleMessageReadAck({
-            messageIds: Array.isArray(data.data.messageId)
-              ? data.data.messageId
-              : [data.data.messageId],
-            chatId: data.data.chatId,
+            messageIds: Array.isArray(rawId) ? rawId : [rawId].filter(Boolean),
+            chatId: parsed.data.chatId,
           });
         }
       } catch (e) {