@pubuduth-aplicy/chat-ui 2.2.5 → 2.2.7

package/package.json

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

@@ -35,6 +35,22 @@ export const Chat = () => {
 
           // Optional: update UI
           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,
+              },
+            });
+          }
         }
       } catch (error) {
         console.error("WebSocket message parse error:", error);

package/src/components/messages/Message.tsx

@@ -67,13 +67,13 @@ const Message = ({ message }: MessageProps) => {
 
     const handleInProgress = () => {
       console.log("Booking started (In Progress)");
-      window.location.href = `/booking/all`;
+      window.location.href = `/booking/all#${message.meta?.bookingDetails?.bookingId}`;
       // Update booking status to InProgress
     };
 
     const handleComplete = () => {
       console.log("Booking completed!");
-      window.location.href = `/booking/all`;
+      window.location.href = `/booking/all#${message.meta?.bookingDetails?.bookingId}`;
       // Update booking status to Completed
     };
 
@@ -83,7 +83,7 @@ const Message = ({ message }: MessageProps) => {
         window.location.href = `/customer/customer-reviews`;
       } else if (role === "provider") {
         console.log("Navigate to review page for provider → customer");
-        window.location.href = `/booking/all`;
+        window.location.href = `/booking/all#${message.meta?.bookingDetails?.bookingId}`;
       }
     };
 
@@ -546,7 +546,18 @@ const Message = ({ message }: MessageProps) => {
   };
 
     const formatLastMessageTime = (dateString: string) => {
+    // Validate date input
+    if (!dateString) {
+      return "";
+    }
+
     const date = new Date(dateString);
+    
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+      return "";
+    }
+
     const now = new Date();
 
     const isToday = date.toDateString() === now.toDateString();

package/src/components/sidebar/Conversation.tsx

@@ -79,7 +79,18 @@ const Conversation = ({ conversation }: ConversationProps) => {
       : participant?.name || "Conversation";
 
   const formatLastMessageTime = (dateString: string) => {
+    // Validate date input
+    if (!dateString) {
+      return "";
+    }
+
     const date = new Date(dateString);
+    
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+      return "";
+    }
+
     const now = new Date();
 
     const isToday = date.toDateString() === now.toDateString();
@@ -130,8 +141,8 @@ const Conversation = ({ conversation }: ConversationProps) => {
             <img
               className="w-10 h-10 rounded-full"
               src={
-                participant?.profilePicture
-                  ? participant?.profilePicture
+                participant?.profilePic
+                  ? participant?.profilePic
                   : defaultProfilePicture
               }
               alt="User Avatar"

package/src/components/sidebar/Conversations.tsx

@@ -134,7 +134,18 @@ const Conversations = () => {
     };
 
     const handleNewMessage = (newMessage: any) => {
-      if (!newMessage?.conversationId) return;
+      // Logic to handle inconsistent message structure
+      const conversationId = newMessage?.conversationId || newMessage?.chatId;
+      
+      if (!conversationId) return;
+      
+      // Ensure we have a valid message object
+      const messageData = {
+        ...newMessage,
+        conversationId: conversationId, // Normalize to conversationId
+        createdAt: newMessage.createdAt || new Date().toISOString(),
+        updatedAt: newMessage.updatedAt || new Date().toISOString()
+      };
 
       setConversations((prev) => {
         const personalChats = [...prev.personalChats];
@@ -142,20 +153,20 @@ const Conversations = () => {
 
         const updateConversation = (convo: ConversationType) => ({
           ...convo,
-          lastMessage: newMessage,
+          lastMessage: messageData,
           updatedAt: new Date().toISOString(),
           unreadMessageIds:
-            userId !== newMessage.senderId
-              ? [...(convo.unreadMessageIds || []), newMessage._id]
+            userId !== messageData.senderId
+              ? [...(convo.unreadMessageIds || []), messageData._id]
               : convo.unreadMessageIds || [],
           unreadMessageCount:
-            userId !== newMessage.senderId
+            userId !== messageData.senderId
               ? (convo.unreadMessageCount || 0) + 1
               : convo.unreadMessageCount || 0,
         });
 
         const personalIndex = personalChats.findIndex(
-          (c) => c._id === newMessage.conversationId
+          (c) => c._id === conversationId
         );
         if (personalIndex >= 0) {
           personalChats[personalIndex] = updateConversation(
@@ -167,7 +178,7 @@ const Conversations = () => {
         for (const serviceId in groupedServiceChats) {
           const serviceIndex = groupedServiceChats[
             serviceId
-          ].conversations.findIndex((c) => c._id === newMessage.conversationId);
+          ].conversations.findIndex((c) => c._id === conversationId);
           if (serviceIndex >= 0) {
             const updatedConversations = [
               ...groupedServiceChats[serviceId].conversations,
@@ -183,10 +194,14 @@ const Conversations = () => {
           }
         }
 
+        // Only add new conversation if we have enough info
+        // This part usually requires fetching full conversation details if it doesn't exist
+        // For now we just skip if not found to avoid ghost chats
+        /*
         personalChats.push({
-          _id: newMessage.conversationId,
+          _id: conversationId,
           participants: [newMessage.senderId, newMessage.receiverId],
-          lastMessage: newMessage,
+          lastMessage: messageData,
           updatedAt: new Date().toISOString(),
           unreadMessageIds:
             userId !== newMessage.senderId ? [newMessage._id] : [],
@@ -194,7 +209,9 @@ const Conversations = () => {
           type: "personal",
           readReceipts: [],
           createdAt: new Date().toISOString(),
+           participantDetails: [] // Missing details
         });
+        */
 
         return { personalChats, groupedServiceChats };
       });
@@ -204,6 +221,7 @@ const Conversations = () => {
       try {
         const data = JSON.parse(event.data);
         if (data.event === "newMessage") {
+          // data.data is the message object
           handleNewMessage(data.data);
         } else if (
           data.event === "messageStatusUpdated" &&
@@ -275,8 +293,8 @@ const Conversations = () => {
   );
 
   const serviceUnreadCount = Object.values(conversations.groupedServiceChats)
-    .flatMap((group) => group.conversations)
-    .reduce((total, convo) => total + (convo.unreadMessageCount || 0), 0);
+    .flatMap((group: any) => group.conversations)
+    .reduce((total: any, convo: any) => total + (convo.unreadMessageCount || 0), 0);
 
   return (
    <div className="chatSidebarConversations">

package/src/stores/Zustant.ts

@@ -11,7 +11,7 @@ interface ChatUIState {
       profilePic: string;
       firstname: string;
       idpic: string;
-    };
+    } | any; // Allow array or object until fully refactored
     unreadMessageIds?: string[];
     _id: string;
     type?: 'personal' | 'service';

package/src/types/type.ts

@@ -6,16 +6,19 @@ export interface ChatWindowProps {
 export interface ParticipantDetails {
   _id: string;
   username: string;
-  password: string;
-  acctype: string;
-  contactno: string;
-  country: string;
-  email: string;
-  verified: string;
-  profilePic: string;
-  createdAt: string;
-  updatedAt: string;
-  __v: number;
+  password?: string;
+  acctype?: string;
+  contactno?: string;
+  country?: string;
+  email?: string;
+  verified?: string;
+  profilePic?: string;
+  firstname?: string;
+  name?: string;
+  idpic?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  __v?: number;
 }
 
 export interface Conversation {
@@ -32,14 +35,15 @@ export interface Conversation {
     createdAt: string;
     updatedAt: string;
     __v: number;
+    conversationId?: string;
   };
   updatedAt: string;
   __v: number;
-  participantDetails: ParticipantDetails;
+  participantDetails: ParticipantDetails[];
   participants?: string[];
   // readReceipts?: string[] | [];
   unreadMessageIds: string[];
-  type?: string | undefined;
+  type?: 'personal' | 'service' | undefined;
   bookingId?: string;
   serviceId?: string;
   unreadMessageCount?: number