@pubuduth-aplicy/chat-ui 2.1.70 → 2.1.73

package/src/components/messages/MessageContainer.tsx

@@ -11,58 +11,97 @@ const MessageContainer = () => {
     setSelectedConversation,
     onlineUsers,
     setOnlineUsers,
+    setMessages,
   } = useChatUIStore();
-  const { socket, sendMessage } = useChatContext();
-  const {role}= getChatConfig()
+  const { socket, sendMessage, isUserOnline } = useChatContext();
+  const { role } = getChatConfig();
   const [joinedChats, setJoinedChats] = useState<Set<string>>(new Set());
 
+  //   useEffect(() => {
+  //   if (!socket) return;
+
+  //   const handleMessage = (event) => {
+  //     try {
+  //       const parsed = JSON.parse(event.data);
+
+  //      if (parsed.event === 'newMessage') {
+  //   const message = parsed.data;
+  //   console.log('Received message:', message);
+
+  //   if (selectedConversation?._id !== message.chatId) return;
+
+  //   const messageId = message._id || message.messageId;
+  //   console.log('Message ID for unread:', messageId);
+
+  //   if (!messageId) {
+  //     console.warn('Message has no _id or messageId, skipping unread tracking');
+  //     return;
+  //   }
+
+  //   const updatedUnread = [
+  //     ...(selectedConversation?.unreadMessageIds || []),
+  //     messageId,
+  //   ];
+
+  //   console.log('Updated unreadMessageIds:', updatedUnread);
+
+  //   setSelectedConversation({
+  //     ...selectedConversation,
+  //     unreadMessageIds: updatedUnread,
+  //   });
+  // }
+
+  //       // Handle other events...
+
+  //     } catch (error) {
+  //       console.error("WebSocket message parse error:", error);
+  //     }
+  //   };
+
+  //   socket.addEventListener("message", handleMessage);
+  //   return () => socket.removeEventListener("message", handleMessage);
+  // }, [socket, setMessages, selectedConversation, setSelectedConversation]);
+
   // Join chat room when conversation is selected
+
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
       const chatId = selectedConversation._id;
-      if (!joinedChats.has(chatId)) {
+      const unreadMessages = selectedConversation.unreadMessageIds || [];
+
+      console.log("Unread messages:", unreadMessages);
+
+      if (unreadMessages.length > 0) {
         sendMessage({
-          type: "joinChat",
-          chatId: chatId,
+          event: "messageRead",
+          data: {
+            messageIds: unreadMessages,
+            chatId: chatId,
+          },
         });
-        setJoinedChats(new Set(joinedChats).add(chatId));
       }
+      // }
     }
-  }, [selectedConversation?._id, socket, sendMessage, joinedChats]);
+  }, [
+    selectedConversation?._id,
+    socket,
+    selectedConversation?.unreadMessageIds,
+    sendMessage,
+    joinedChats,
+  ]);
 
   // Listen for online users updates
-  useEffect(() => {
-    if (!socket) return;
-
-    const handleMessage = (event: MessageEvent) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === "getOnlineUsers") {
-          setOnlineUsers(data.users);
-        }
-      } catch (error) {
-        console.error("Error parsing message:", error);
-      }
-    };
 
-    socket.addEventListener("message", handleMessage);
-
-    return () => {
-      socket.removeEventListener("message", handleMessage);
-    };
-  }, [socket, setOnlineUsers]);
-
-   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
+  role === "admin" && Array.isArray(selectedConversation?.participantDetails)
     ? selectedConversation.participantDetails[1]?.profilePic
     : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.profilePic
-      : undefined;
-
-  const isUserOnline =
-  !Array.isArray(selectedConversation?.participantDetails) &&
-  !!selectedConversation?.participantDetails?._id &&
-  onlineUsers?.includes(selectedConversation.participantDetails._id);
+    ? selectedConversation?.participantDetails?.profilePic
+    : undefined;
 
+  const isOnline =
+    !Array.isArray(selectedConversation?.participantDetails) &&
+    !!selectedConversation?.participantDetails?._id &&
+    isUserOnline(selectedConversation.participantDetails._id);
 
   // Cleanup on unmount
   useEffect(() => {
@@ -84,34 +123,32 @@ const MessageContainer = () => {
                 className="chatMessageContainerInnerImg"
                 alt="Profile"
                 src={
-                   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.profilePic
-    : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.profilePic
-      : undefined
+                  role === "admin" &&
+                  Array.isArray(selectedConversation?.participantDetails)
+                    ? selectedConversation.participantDetails[1]?.profilePic
+                    : !Array.isArray(selectedConversation?.participantDetails)
+                    ? selectedConversation?.participantDetails?.profilePic
+                    : undefined
                 }
               />
               <div className="chatMessageContainerOutter">
                 <div className="chatMessageContainerOutterDiv">
                   <p className="chatMessageContainerOutterDiv_name">
-                     {role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.firstname
-    : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.firstname
-      : undefined
-                      }
-                  </p>
-                  <p className="text-sm">
-                    {isUserOnline ? "Online" : "Offline"}
+                    {role === "admin" &&
+                    Array.isArray(selectedConversation?.participantDetails)
+                      ? selectedConversation.participantDetails[1]?.firstname
+                      : !Array.isArray(selectedConversation?.participantDetails)
+                      ? selectedConversation?.participantDetails?.firstname
+                      : undefined}
                   </p>
+                  <p className="text-sm">{isOnline ? "Online" : "Offline"}</p>
                 </div>
               </div>
             </div>
           </div>
 
           <Messages />
-          {role !== 'admin'&& (<MessageInput />)}
-
+          {role !== "admin" && <MessageInput />}
         </>
       )}
     </div>
@@ -213,4 +250,4 @@ const EmptyInbox: React.FC<EmptyInboxProps> = ({
       <p className="text-gray-500 max-w-sm">{description}</p>
     </div>
   );
-};
+};

package/src/components/messages/MessageInput.tsx

@@ -227,7 +227,7 @@ const MessageInput = () => {
         text: message1,
         message: message1,
         senderId: userId,
-        status: "sending" as MessageStatus,
+        status: "pending" as MessageStatus,
         createdAt: new Date().toISOString(),
         media: attachmentsRef.current.map((att) => ({
           type: att.type,
@@ -321,15 +321,17 @@ const MessageInput = () => {
 
               // Send message via WebSocket
               sendMessage({
-                type: "sendMessage",
-                chatId: selectedConversation?._id,
-                message: message1,
-                messageId: data[1]._id,
-                attachments: successfulUploads,
-                senderId: userId,
-                receiverId:
-                  !Array.isArray(selectedConversation?.participantDetails) &&
-                  selectedConversation?.participantDetails._id,
+                event: "sendMessage",
+                data: {
+                  chatId: selectedConversation?._id,
+                  message: message1,
+                  messageId: data[1]._id,
+                  attachments: successfulUploads,
+                  senderId: userId,
+                  receiverId:
+                    !Array.isArray(selectedConversation?.participantDetails) &&
+                    selectedConversation?.participantDetails._id,
+                },
               });
             },
             onError: (error) => {

package/src/components/messages/Messages.tsx

@@ -42,12 +42,12 @@ const Messages = () => {
 
     const handleMessage = (event: MessageEvent) => {
       try {
-        const data = JSON.parse(event.data);
-        
-        if (data.type === "newMessage") {
-          const newMessage = data.message;
+        const parsed = JSON.parse(event.data);
+        console.log("Parsed WebSocket message1:", parsed);
+        if (parsed.type === "newMessage" || parsed.event === "newMessage") {
+          const newMessage = parsed.message;
           newMessage.shouldShake = true;
-          
+
           setMessages((prevMessages) => {
             const isDuplicate = prevMessages.some(
               (msg) =>
@@ -61,11 +61,28 @@ const Messages = () => {
           });
         }
 
-        if (data.type === "messageStatusUpdated") {
+        const statusOrder = ["sent", "delivered", "read"];
+        if (parsed.event === "messageStatusUpdated") {
+          const { messageId, status } = parsed.data || {};
+          if (!messageId) {
+            console.error("Missing messageId in status update", parsed);
+            return;
+          }
+
+          console.log(`Updating status for ${messageId} to ${status}`);
           setMessages((prev) =>
-            prev.map((msg) => 
-              msg._id === data.messageId ? { ...msg, status: data.status } : msg
-            )
+            prev.map((msg) => {
+              if (msg._id !== messageId) return msg;
+
+              // Only update if new status is higher than current status
+              const currentIdx = statusOrder.indexOf(msg.status);
+              const newIdx = statusOrder.indexOf(status);
+
+              return {
+                ...msg,
+                status: newIdx > currentIdx ? status : msg.status,
+              };
+            })
           );
         }
       } catch (error) {
@@ -80,11 +97,29 @@ const Messages = () => {
     };
   }, [socket, selectedConversation?._id, setMessages, userId]);
 
+  const sendDeliveryConfirmation = (messageId: string) => {
+    if (!socket) return;
+
+    const message = {
+      event: "confirmDelivery",
+      data: {
+        messageId,
+      },
+
+      // timestamp: Date.now()
+    };
+
+    socket.send(JSON.stringify(message));
+  };
+
   // Scroll to bottom when messages change
   useEffect(() => {
     if (messages.length > 0) {
       setTimeout(() => {
-        lastMessageRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        lastMessageRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "end",
+        });
       }, 100);
     }
   }, [messages.length]);
@@ -113,19 +148,6 @@ const Messages = () => {
     return () => observer.disconnect();
   }, [messages, socket]);
 
-
-  const sendDeliveryConfirmation = (messageId: string) => {
-  if (!socket) return;
-  
-  const message = {
-    type: "confirmDelivery",
-    messageId,
-    // timestamp: Date.now()
-  };
-  
-  socket.send(JSON.stringify(message));
-};
-
   return (
     <div
       className="chatMessages"
@@ -157,4 +179,4 @@ const Messages = () => {
   );
 };
 
-export default Messages;
+export default Messages;

package/src/components/sidebar/Conversation.tsx

@@ -1,59 +1,112 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
 import { getChatConfig } from "@pubuduth-aplicy/chat-ui";
 
 const Conversation = ({ conversation }: ConversationProps) => {
-  const { setSelectedConversation, setOnlineUsers, onlineUsers,selectedConversation } =
-    useChatUIStore();
-  const { socket, sendMessage } = useChatContext();
- const {role} =getChatConfig()
+  const {
+    setSelectedConversation,
+    setOnlineUsers,
+    onlineUsers,
+    setMessages,
+    selectedConversation,
+    updateMessageStatus,
+  } = useChatUIStore();
+  const { socket, sendMessage, isUserOnline } = useChatContext();
+  const { role } = getChatConfig();
+  //  const handleSelectConversation = async () => {
+  //     setSelectedConversation(conversation);
+
+  //     // Mark unread messages as read
+  //     const unreadMessages = conversation.unreadMessageIds || [];
+  //     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
+  //         sendMessage({
+  //           event: "joinChat",
+  //           data: {
+  //           chatId: conversation._id,
+  //         },
+  //             // event: "messageRead",
+  //             // data: {
+  //             //     messageIds: unreadMessages,
+  //             //     chatId: conversation._id,
+  //             // },
+  //         });
+  //     }
+  // };
+
+  const [activeChatId, setActiveChatId] = useState(null);
+
   const handleSelectConversation = async () => {
+    // Set as selected conversation
     setSelectedConversation(conversation);
 
-    const unreadMessages = conversation.unreadMessageIds || [];
-    if (unreadMessages.length > 0) {
-      console.log("Marking messages as read:", unreadMessages);
-      
+    // Mark as active chat
+    setActiveChatId(conversation._id);
+
+    // Join chat via WebSocket
+    if (socket?.readyState === WebSocket.OPEN) {
       sendMessage({
-        event: "messageRead",
-        data:{
-          messageIds: unreadMessages,
-        chatId: conversation._id
-        }
-        
+        event: "joinChat",
+        data: {
+          chatId: conversation._id,
+          // Send any existing unread messages to mark as read
+          messageIds: conversation.unreadMessageIds || [],
+        },
       });
     }
   };
 
-  // Listen for online users updates
+  // // Enhanced message handler
   useEffect(() => {
     if (!socket) return;
 
     const handleMessage = (event: MessageEvent) => {
       try {
-        const data = JSON.parse(event.data);
-        if (data.event === "getOnlineUsers") {
-          setOnlineUsers(data.data);
+        const message = JSON.parse(event.data);
+        console.log("fdgfd", message);
+
+        if (message.event === "newMessage") {
+          const newMessage = message.data;
+
+          // If this is the active chat, mark as read immediately
+          if (activeChatId === newMessage.conversationId) {
+            console.log("rtrtr");
+
+            sendMessage({
+              event: "messageRead",
+              data: {
+                messageIds: [newMessage._id],
+                chatId: newMessage.conversationId,
+                senderId: newMessage.senderId,
+              },
+            });
+
+            // Optimistic UI update
+            // updateMessageStatus(newMessage._id, "read");
+          } else {
+            // Otherwise mark as delivered
+            sendMessage({
+              event: "confirmDelivery",
+              data: {
+                messageIds: [newMessage._id],
+                chatId: newMessage.conversationId,
+              },
+            });
+          }
         }
       } catch (error) {
-        console.error("Error parsing online users update:", error);
+        console.error("Error handling message:", error);
       }
     };
 
     socket.addEventListener("message", handleMessage);
+    return () => socket.removeEventListener("message", handleMessage);
+  }, [socket, activeChatId, setMessages, updateMessageStatus]);
 
-    return () => {
-      socket.removeEventListener("message", handleMessage);
-    };
-  }, [socket, setOnlineUsers]);
-
-  const isUserOnline =
-    conversation?.participantDetails?._id &&
-    onlineUsers?.includes(conversation.participantDetails._id);
-
-    const isSelected = selectedConversation?._id === conversation._id;
+  const isOnline = isUserOnline(conversation?.participantDetails?._id || "");
+  console.log("Online status:", isOnline);
+  const isSelected = selectedConversation?._id === conversation._id;
 
   return (
     <>
@@ -65,54 +118,84 @@ const Conversation = ({ conversation }: ConversationProps) => {
           <img
             className="conversation-img"
             src={
-             role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.profilePic
-    : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.profilePic
-      : undefined 
+              role === "admin" &&
+              Array.isArray(conversation?.participantDetails)
+                ? conversation.participantDetails[1]?.profilePic
+                : !Array.isArray(conversation?.participantDetails)
+                ? conversation?.participantDetails?.profilePic
+                : undefined
             }
-            
             alt="User Avatar"
           />
           <span
-            className={`chatSidebarStatusDot ${
-              isUserOnline && "online"
-            }`}
+            className={`chatSidebarStatusDot ${isOnline && "online"}`}
           ></span>
         </div>
 
         <div className="conversation-info">
           <div className="conversation-header">
             <p className="conversation-name">
-                {
-                   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.firstname
-    : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.firstname
-      : undefined
-                      }
+              {role === "admin" &&
+              Array.isArray(conversation?.participantDetails)
+                ? conversation.participantDetails[1]?.firstname
+                : !Array.isArray(conversation?.participantDetails)
+                ? conversation?.participantDetails?.firstname
+                : undefined}
             </p>
             <span className="conversation-time">
-              {new Date(conversation.lastMessage.createdAt).toLocaleTimeString(
-                [],
-                {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                }
-              )}
+              {conversation.lastMessage.status === "deleted"
+                ? // Show deleted timestamp if message is deleted
+                  new Date(
+                    conversation.lastMessage.updatedAt
+                  ).toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })
+                : conversation.lastMessage.status === "edited"
+                ? // Show updated timestamp if message was edited
+                  new Date(
+                    conversation.lastMessage.updatedAt
+                  ).toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })
+                : // Default to created timestamp
+                  new Date(
+                    conversation.lastMessage.createdAt
+                  ).toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
             </span>
           </div>
           <p className="conversation-message">
-            {conversation.lastMessage.message.length > 50
-              ? conversation.lastMessage.message.slice(0, 50) + "..."
-              : conversation.lastMessage.media.length > 0 ? (
-                  <div style={{display:"flex",alignItems:"center", gap:"5px"}}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
-                    </svg>
-                    attachment
-                  </div>
-                ) : conversation.lastMessage.message}
+            {conversation.lastMessage.status === "deleted" ? (
+              "This message was deleted"
+            ) : conversation.lastMessage.type !== "system" &&
+              conversation.lastMessage.message.length > 50 ? (
+              conversation.lastMessage.message.slice(0, 50) + "..."
+            ) : conversation.lastMessage.media.length > 0 ? (
+              <div
+                style={{ display: "flex", alignItems: "center", gap: "5px" }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+                </svg>
+                attachment
+              </div>
+            ) : (
+              conversation.lastMessage.message
+            )}
           </p>
         </div>
       </div>
@@ -120,4 +203,4 @@ const Conversation = ({ conversation }: ConversationProps) => {
   );
 };
 
-export default Conversation;
+export default Conversation;

package/src/components/sidebar/Conversations.tsx

@@ -12,7 +12,12 @@ const Conversations = () => {
   // const { loading, conversations } = useGetConversations();
   return (
     <div className="chatSidebarConversations">
-      <h2 className="text-lg font-semibold text-gray-700" style={{paddingLeft:'1rem'}}>All Messages</h2>
+      <h2
+        className="text-lg font-semibold text-gray-700"
+        style={{ paddingLeft: "1rem" }}
+      >
+        All Messages
+      </h2>
       {(!conversations || conversations.length === 0) && (
         <div className="flex flex-col items-center justify-center p-8 text-center">
           <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 mb-4">