@pubuduth-aplicy/chat-ui 2.1.71 → 2.1.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.71",
+  "version": "2.1.73",
   "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,35 +5,48 @@ import { Sidebar } from "./sidebar/Sidebar";
 import { useChatContext } from "../providers/ChatProvider";
 
 export const Chat = () => {
-  const {  messages, setMessages, updateMessageStatus } =
-    useChatUIStore();
-  const { socket } = useChatContext();
+  const { setMessages, updateMessageStatus } = useChatUIStore();
+
+  const { socket, sendMessage } = useChatContext();
 
   useEffect(() => {
     if (!socket) return;
 
     const handleMessage = (event: MessageEvent) => {
       try {
-        const data = JSON.parse(event.data);
-        
-        if (data.type === "receiveMessage") {
-          setMessages([...messages, { ...data.message, status: "sent" }]);
-        }
+        const parsed = JSON.parse(event.data);
+        console.log("Parsed WebSocket message:", parsed);
+
+        if (parsed.event === "newMessage") {
+          const message = parsed.data;
+          console.log(
+            "📨 Message received at:",
+            message.createdAt,
+            "from:",
+            message
+          );
+          // Send delivery confirmation
+          // Update UI immediately
+          setMessages((prev) => [...prev, message]);
+          sendMessage({
+            event: "confirmDelivery",
+            data: {
+              messageIds: [message._id],
+              chatId: message.conversationId, // make sure this is sent from backend
+            },
+          });
 
-        if (data.type === "messageDelivered") {
-          updateMessageStatus(data.messageId, "delivered");
+          // Optional: update UI
+          updateMessageStatus(message._id, "delivered");
         }
       } catch (error) {
-        console.error("Error parsing WebSocket message:", error);
+        console.error("WebSocket message parse error:", error);
       }
     };
 
     socket.addEventListener("message", handleMessage);
-
-    return () => {
-      socket.removeEventListener("message", handleMessage);
-    };
-  }, [socket, messages, setMessages, updateMessageStatus]);
+    return () => socket.removeEventListener("message", handleMessage);
+  }, [socket, setMessages, sendMessage, updateMessageStatus]);
 
   return (
     <div className="container mx-auto mb-5">
@@ -47,4 +60,4 @@ export const Chat = () => {
       </div>
     </div>
   );
-};
+};

package/src/components/messages/Message.tsx

@@ -11,27 +11,27 @@ import { useDeleteMessageMutation } from "../../hooks/mutations/useDeleteMessage
 import { useEffect, useRef, useState } from "react";
 
 interface MessageProps {
- message: {
-    _id?: string
-    senderId: string
-    message: string
-    status: MessageStatus
-    createdAt: any
-    updatedAt: any
+  message: {
+    _id?: string;
+    senderId: string;
+    message: string;
+    status: MessageStatus;
+    createdAt: any;
+    updatedAt: any;
     media?: {
-      type: FileType
-      url: string
-      name: string
-      size: number
-      uploadProgress?: number
-      uploadError: string | null
-    }[]
-    isUploading?: boolean
-    isEdited?: boolean
-    isDeleted?: boolean
-    onEdit?: (messageId: string, newMessage: string) => void
-    onDelete?: (messageId: string) => void
-    type?: 'user' | 'system' | 'system-completion';
+      type: FileType;
+      url: string;
+      name: string;
+      size: number;
+      uploadProgress?: number;
+      uploadError: string | null;
+    }[];
+    isUploading?: boolean;
+    isEdited?: boolean;
+    isDeleted?: boolean;
+    onEdit?: (messageId: string, newMessage: string) => void;
+    onDelete?: (messageId: string) => void;
+    type?: "user" | "system" | "system-completion";
     meta?: {
       bookingDetails?: {
         serviceId: string;
@@ -41,8 +41,8 @@ interface MessageProps {
         // Add other booking details as needed
       };
       reviewLink?: string;
-  }
-}
+    };
+  };
 }
 
 const Message = ({ message }: MessageProps) => {
@@ -91,8 +91,8 @@ const Message = ({ message }: MessageProps) => {
   const { mutate: editMessage } = useEditMessageMutation();
   const [editedMessage, setEditedMessage] = useState("");
   const [isEditingMode, setIsEditingMode] = useState(false);
-const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutation();
-
+  const { mutate: deleteMessage, isPending: isDeleting } =
+    useDeleteMessageMutation();
 
   useEffect(() => {
     setLocalStatus(message.status);
@@ -565,7 +565,9 @@ const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutatio
                               onClick={handleDeleteClick}
                             >
                               <Trash2 size={16} />
-                              <span>{isDeleting ? 'Deleting...' : 'Delete'}</span>
+                              <span>
+                                {isDeleting ? "Deleting..." : "Delete"}
+                              </span>
                             </button>
                           </div>
                         )}
@@ -576,25 +578,23 @@ const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutatio
             )
           )}
           <div className={`${timestamp}`}>
-            {message.status === 'deleted' ? (
-              // Show deleted timestamp if message is deleted
-              new Date(message.updatedAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })
-            ) : message.status === 'edited' ? (
-              // Show updated timestamp if message was edited
-              new Date(message.updatedAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })
-            ) : (
-              // Default to created timestamp
-              new Date(message.createdAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })
-            )}
+            {message.status === "deleted"
+              ? // Show deleted timestamp if message is deleted
+                new Date(message.updatedAt).toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })
+              : message.status === "edited"
+              ? // Show updated timestamp if message was edited
+                new Date(message.updatedAt).toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })
+              : // Default to created timestamp
+                new Date(message.createdAt).toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
             <span className="status-icon">{getStatusIcon()}</span>
           </div>
         </div>

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,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
@@ -9,53 +9,103 @@ const Conversation = ({ conversation }: ConversationProps) => {
     setSelectedConversation,
     setOnlineUsers,
     onlineUsers,
+    setMessages,
     selectedConversation,
+    updateMessageStatus,
   } = useChatUIStore();
-  const { socket, sendMessage } = useChatContext();
+  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",
+        event: "joinChat",
         data: {
-          messageIds: unreadMessages,
           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 isOnline = isUserOnline(conversation?.participantDetails?._id || "");
+  console.log("Online status:", isOnline);
   const isSelected = selectedConversation?._id === conversation._id;
 
   return (
@@ -69,16 +119,16 @@ const Conversation = ({ conversation }: ConversationProps) => {
             className="conversation-img"
             src={
               role === "admin" &&
-              Array.isArray(selectedConversation?.participantDetails)
-                ? selectedConversation.participantDetails[1]?.profilePic
-                : !Array.isArray(selectedConversation?.participantDetails)
-                ? selectedConversation?.participantDetails?.profilePic
+              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>
 
@@ -86,32 +136,36 @@ const Conversation = ({ conversation }: ConversationProps) => {
           <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
+              Array.isArray(conversation?.participantDetails)
+                ? conversation.participantDetails[1]?.firstname
+                : !Array.isArray(conversation?.participantDetails)
+                ? conversation?.participantDetails?.firstname
                 : undefined}
             </p>
             <span className="conversation-time">
-            {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",
-              })
-            )}
+              {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">

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">

package/src/providers/ChatProvider.tsx

@@ -18,9 +18,11 @@ interface ChatProviderProps {
 interface ChatContextType {
   socket: WebSocket | null;
   userId: string;
-  onlineUsers: any[];
+  // onlineUsers: any[];
   sendMessage: (data: any) => void;
   isConnected: boolean;
+  onlineUsers: Set<string>; // Change to Set for better performance
+  isUserOnline: (userId: string) => boolean; // Add helper function
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
@@ -31,7 +33,8 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 }) => {
   const socketRef = useRef<WebSocket | null>(null);
   const [socket, setSocket] = useState<WebSocket | null>(null);
-  const [onlineUsers, setOnlineUsers] = useState<any[]>([]);
+  // const [onlineUsers, setOnlineUsers] = useState<any[]>([]);
+  const [onlineUsers, setOnlineUsers] = useState<Set<string>>(new Set());
   const [isConnected, setIsConnected] = useState(false);
   const reconnectAttempts = useRef(0);
   const maxReconnectAttempts = 5;
@@ -40,35 +43,40 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
 
   const connectWebSocket = useCallback(() => {
     console.log("🔌 Creating new WebSocket connection...");
-    
+
     // Convert HTTP URL to WebSocket URL
-    const wsUrl = apiUrl.replace(/^http:/, 'ws:').replace(/^https:/, 'wss:');
-    const socketInstance = new WebSocket(`${wsUrl}?userId=${userId}`);
+    const wsUrl = apiUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
+    const socketInstance = new WebSocket(
+      `${wsUrl}?userId=${encodeURIComponent(userId)}`
+    );
 
     socketInstance.onopen = () => {
       console.log("✅ WebSocket connected");
       setIsConnected(true);
       reconnectAttempts.current = 0;
-      
+
       // Send initial handshake if needed
-      socketInstance.send(JSON.stringify({
-        type: 'handshake',
-        userId: userId
-      }));
+      socketInstance.send(
+        JSON.stringify({
+          event: "handshake",
+          userId: userId,
+        })
+      );
     };
 
     socketInstance.onmessage = (event) => {
       try {
         const data = JSON.parse(event.data);
-        
-        if (data.type === 'getOnlineUsers') {
-          setOnlineUsers(data.users);
+
+        if (data.event === "getOnlineUsers") {
+          console.log("Online users update:", data.data);
+          setOnlineUsers(new Set(data.data));
         }
-        
+
         // Handle other message types here
-        console.log('Received message:', data);
+        console.log("Received message:", data);
       } catch (error) {
-        console.error('Error parsing message:', error);
+        console.error("Error parsing message:", error);
       }
     };
 
@@ -80,11 +88,13 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       console.log("🔌 WebSocket connection closed", event);
       console.log("❌ WebSocket disconnected:", event.code, event.reason);
       setIsConnected(false);
-      
+
       // Attempt reconnection
       if (reconnectAttempts.current < maxReconnectAttempts) {
         reconnectAttempts.current += 1;
-        console.log(`Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`);
+        console.log(
+          `Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`
+        );
         setTimeout(connectWebSocket, reconnectInterval);
       }
     };
@@ -113,14 +123,24 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     };
   }, [connectWebSocket]);
 
+  const isUserOnline = useCallback(
+    (userId: string) => {
+      return onlineUsers.has(userId);
+    },
+    [onlineUsers]
+  );
+
   return (
-    <ChatContext.Provider value={{ 
-      socket, 
-      userId, 
-      onlineUsers, 
-      sendMessage,
-      isConnected 
-    }}>
+    <ChatContext.Provider
+      value={{
+        socket,
+        userId,
+        onlineUsers,
+        sendMessage,
+        isConnected,
+        isUserOnline,
+      }}
+    >
       {children}
     </ChatContext.Provider>
   );
@@ -132,4 +152,4 @@ export const useChatContext = () => {
     throw new Error("useChatContext must be used within a ChatProvider");
   }
   return context;
-};
+};

package/src/stores/Zustant.ts

@@ -12,28 +12,30 @@ interface ChatUIState {
       firstname: string;
       idpic: string;
     };
+    unreadMessageIds?: string[];
     _id: string;
   } | null;
   setSelectedConversation: (
     selectedConversation: ChatUIState["selectedConversation"]
   ) => void;
-  messages: { 
-    _id: string; 
-    text: string; 
-    senderId: string; 
-    status: string ;
-     isOptimistic:boolean;
-      message:string;
-      createdAt: string;
-      media: {
-          type: FileType;
-          url: string;
-          name: string;
-          size: number;
-          uploadProgress: number;
-          uploadError:string
-      }[];
-      isUploading: boolean;}[];
+  messages: {
+    _id: string;
+    text: string;
+    senderId: string;
+    status: string;
+    isOptimistic: boolean;
+    message: string;
+    createdAt: string;
+    media: {
+      type: FileType;
+      url: string;
+      name: string;
+      size: number;
+      uploadProgress: number;
+      uploadError: string
+    }[];
+    isUploading: boolean;
+  }[];
   setMessages: (messages: ChatUIState["messages"] | ((prev: ChatUIState["messages"]) => ChatUIState["messages"])) => void;
   updateMessageStatus: (messageId: string, status: string) => void;
   toggleChat: () => void;

package/src/style/style.css

@@ -51,13 +51,15 @@
   display: flex;
   padding: 0.5rem 1rem;
   width: 100%;
-  border: 1px solid #ccc; /* Consistent border color */
+  border: 1px solid #ccc;
+  /* Consistent border color */
   border-radius: 4px;
   gap: 1rem;
   justify-content: flex-start;
   align-items: center;
   height: 2.5rem;
-  background-color: rgb(248, 249, 249); /* Move bg color here */
+  background-color: rgb(248, 249, 249);
+  /* Move bg color here */
 }
 
 .chatSidebarSearchbarImg {
@@ -77,9 +79,12 @@
   font-weight: 400;
   width: 100%;
   max-width: 600px;
-  border: none !important; /* Force no border */
-  background: transparent; /* Inherit from container */
-  box-shadow: none !important; /* Remove any shadow */
+  border: none !important;
+  /* Force no border */
+  background: transparent;
+  /* Inherit from container */
+  box-shadow: none !important;
+  /* Remove any shadow */
 }
 
 .chatSidebarSearchbarContainer:focus-within {
@@ -379,7 +384,8 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  border-radius: 6px; /* or 0px for sharp corners */
+  border-radius: 6px;
+  /* or 0px for sharp corners */
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -435,23 +441,23 @@
   position: relative;
 }
 
-.amk7{
-position: absolute;
-top: 0;
-display: block;
-width: 8px;
-height: 13px;
-right: -8px;
+.amk7 {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 8px;
+  height: 13px;
+  right: -8px;
 }
 
-:root{
-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+:root {
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .chat-bubble {
 
   background-color: #f3f4f6;
-  border-radius: 0.5rem ;
+  border-radius: 0.5rem;
   /* padding: 0.5rem; */
   font-size: 14px;
   max-width: 20rem;
@@ -1191,17 +1197,17 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
   /* margin-top: 0.5rem; */
 }
 
- .media-item {
+.media-item {
   background: #f3f4f6;
   border-radius: 0.375rem;
   /* reduced from 0.75rem */
-   padding: 0.5rem;
+  padding: 0.5rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: start;
   width: 246px;
-} 
+}
 
 /* .media-grid {
   display: grid;
@@ -1243,15 +1249,15 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
   position: relative;
   width: 246px;
   height: 100%; */
-  /* aspect-ratio: 1; */
-  /* overflow: hidden;
+/* aspect-ratio: 1; */
+/* overflow: hidden;
 } */
 
 /* .media-item img {
   width: 100%;
   height: 100%;
   object-fit: cover; */
-  /* display: block; */
+/* display: block; */
 /* } */
 
 /* Adjust aspect ratio for single media */
@@ -1277,7 +1283,8 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
 .four-media-item
 {
   width: 100%;
-} */ */
+} */
+*/
 
 /* Optional: Add overlay for additional items count */
 .media-item.count-overlay {
@@ -1351,7 +1358,7 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
 
 .document-preview {
   position: relative;
-  width: 226px; 
+  width: 226px;
   height: 60px;
   /* Increased height to accommodate filename */
   border-radius: 12px;
@@ -1560,6 +1567,7 @@ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe U
   background-color: #f44336;
   color: white;
 }
+
 .system-message.booking-details {
   display: flex;
   flex-direction: column;

package/src/types/type.ts

@@ -21,7 +21,7 @@ export interface ParticipantDetails {
 export interface Conversation {
   _id: string;
   createdAt: string;
-  lastMessage:{
+  lastMessage: {
     _id: string;
     senderId: string;
     message: string;
@@ -47,12 +47,12 @@ export interface ApiResponse {
 
 export interface ConversationProps {
   conversation: {
-    lastMessage:{
+    lastMessage: {
       _id: string;
       senderId: string;
       message: string;
-      media:string[];
-      type?:'user' | 'system' | 'system-completion';
+      media: string[];
+      type?: 'user' | 'system' | 'system-completion';
       status: MessageStatus;
       chatId: string;
       createdAt: string;