@pubuduth-aplicy/chat-ui 2.1.73 → 2.1.75

package/src/components/messages/Messages.tsx

@@ -21,6 +21,7 @@ const Messages = () => {
       fetchMessages(selectedConversation?._id, userId, pageParam),
     getNextPageParam: (lastPage) => lastPage.nextPage,
     initialPageParam: 1,
+    enabled: !!selectedConversation?._id, // Prevent fetching if no conversation is selected
   });
 
   // Handle infinite scroll
@@ -45,7 +46,15 @@ const Messages = () => {
         const parsed = JSON.parse(event.data);
         console.log("Parsed WebSocket message1:", parsed);
         if (parsed.type === "newMessage" || parsed.event === "newMessage") {
-          const newMessage = parsed.message;
+          const newMessage = parsed.data;
+          if (!newMessage) {
+            console.warn(
+              "Received newMessage event without a message payload",
+              parsed
+            );
+            return;
+          }
+
           newMessage.shouldShake = true;
 
           setMessages((prevMessages) => {
@@ -61,7 +70,7 @@ const Messages = () => {
           });
         }
 
-        const statusOrder = ["sent", "delivered", "read"];
+        const statusOrder = ["sent", "delivered", "read", "edited", "deleted"];
         if (parsed.event === "messageStatusUpdated") {
           const { messageId, status } = parsed.data || {};
           if (!messageId) {
@@ -69,22 +78,58 @@ const Messages = () => {
             return;
           }
 
-          console.log(`Updating status for ${messageId} to ${status}`);
           setMessages((prev) =>
             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);
+              if (newIdx === -1 || currentIdx === -1 || newIdx <= currentIdx)
+                return msg;
+
+              if (newIdx > currentIdx) {
+                console.log(`Updating status for ${messageId} to ${status}`);
+                return { ...msg, status };
+              }
 
-              return {
-                ...msg,
-                status: newIdx > currentIdx ? status : msg.status,
-              };
+              return msg; // No update if new status isn't higher
             })
           );
         }
+
+        if (parsed.event === "messageEdited") {
+          console.log("Received messageEdited event:", parsed);
+
+          const updatedMessage = parsed.data;
+          if (!updatedMessage || !updatedMessage.messageId) return;
+
+          setMessages((prevMessages) =>
+            prevMessages.map((msg) =>
+              msg._id === updatedMessage.messageId
+                ? { ...msg, message: updatedMessage.message, status: "edited" }
+                : msg
+            )
+          );
+        }
+
+        if (parsed.event === "messageDeleted") {
+          console.log("Received messageDeleted event:", parsed);
+
+          const { messageId } = parsed.data || {};
+          if (!messageId) return;
+
+          setMessages((prevMessages) =>
+            prevMessages.map((msg) =>
+              msg._id === messageId
+                ? {
+                    ...msg,
+                    message: "This message was deleted",
+                    status: "deleted",
+                  }
+                : msg
+            )
+          );
+        }
       } catch (error) {
         console.error("Error parsing WebSocket message:", error);
       }
@@ -97,56 +142,41 @@ 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: "end",
+          block: "nearest",
         });
       }, 100);
     }
   }, [messages.length]);
 
   // Track message visibility for read receipts
-  useEffect(() => {
-    if (!socket || !messages.length) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const messageId = entry.target.getAttribute("data-message-id");
-            if (messageId) {
-              sendDeliveryConfirmation(messageId);
-            }
-          }
-        });
-      },
-      { threshold: 0.5 }
-    );
-
-    const messageElements = document.querySelectorAll("[data-message-id]");
-    messageElements.forEach((el) => observer.observe(el));
-
-    return () => observer.disconnect();
-  }, [messages, socket]);
+  // useEffect(() => {
+  //   if (!socket || !messages.length) return;
+
+  //   const observer = new IntersectionObserver(
+  //     (entries) => {
+  //       entries.forEach((entry) => {
+  //         if (entry.isIntersecting) {
+  //           const messageId = entry.target.getAttribute("data-message-id");
+  //           if (messageId) {
+  //             sendDeliveryConfirmation(messageId);
+  //           }
+  //         }
+  //       });
+  //     },
+  //     { threshold: 0.5 }
+  //   );
+
+  //   const messageElements = document.querySelectorAll("[data-message-id]");
+  //   messageElements.forEach((el) => observer.observe(el));
+
+  //   return () => observer.disconnect();
+  // }, [messages, socket]);
 
   return (
     <div

package/src/components/sidebar/Conversation.tsx

@@ -1,205 +1,140 @@
-import { useEffect, useState } from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { MessageCircle } from "lucide-react";
+import { useEffect } 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,
-    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 { socket, isUserOnline } = useChatContext();
+  const selectedConversation = useChatUIStore(
+    (state) => state.selectedConversation
+  );
+  const { userId } = useChatContext();
 
-  const [activeChatId, setActiveChatId] = useState(null);
+  const participant = conversation.participantDetails?.find(
+    (p:any) => p._id !== userId
+  );
 
-  const handleSelectConversation = async () => {
-    // Set as selected conversation
+  const handleSelectConversation = () => {
+    console.log(
+      "Selected Conversation Data:",
+      JSON.stringify(conversation, null, 2)
+    );
     setSelectedConversation(conversation);
+    const unreadMessageIds = conversation.unreadMessageIds || [];
+    if (unreadMessageIds.length > 0 && socket?.readyState === WebSocket.OPEN) {
+      console.log("unread messages", unreadMessageIds);
 
-    // Mark as active chat
-    setActiveChatId(conversation._id);
-
-    // Join chat via WebSocket
-    if (socket?.readyState === WebSocket.OPEN) {
-      sendMessage({
-        event: "joinChat",
+      const message = {
+        event: "messageRead",
         data: {
+          messageIds: unreadMessageIds,
+          senderId: participant?._id,
+          receiverId: userId,
           chatId: conversation._id,
-          // Send any existing unread messages to mark as read
-          messageIds: conversation.unreadMessageIds || [],
         },
-      });
+      };
+      socket.send(JSON.stringify(message));
     }
   };
 
-  // // Enhanced message handler
   useEffect(() => {
     if (!socket) return;
 
     const handleMessage = (event: MessageEvent) => {
       try {
-        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,
-              },
-            });
-          }
+        const data = JSON.parse(event.data);
+        if (data.event === "getOnlineUsers") {
+          setOnlineUsers(data.payload);
         }
       } catch (error) {
-        console.error("Error handling message:", error);
+        console.error("Failed to parse WebSocket message:", error);
       }
     };
 
     socket.addEventListener("message", handleMessage);
-    return () => socket.removeEventListener("message", handleMessage);
-  }, [socket, activeChatId, setMessages, updateMessageStatus]);
 
-  const isOnline = isUserOnline(conversation?.participantDetails?._id || "");
-  console.log("Online status:", isOnline);
+    return () => {
+      socket.removeEventListener("message", handleMessage);
+    };
+  }, [socket, setOnlineUsers]);
+
+  useEffect(() => {
+    console.log("Current conversation state:", conversation);
+  }, [conversation]);
+
+  const isOnline = isUserOnline(participant?._id || "");
   const isSelected = selectedConversation?._id === conversation._id;
+  const unreadCount = conversation.unreadMessageCount || 0;
+  const conversationName =
+    conversation.type === "service" && conversation.bookingId
+      ? `Booking #${conversation.bookingId}`
+      : participant?.name || "Conversation";
+
+  const lastMessageTimestamp = new Date(
+    conversation.lastMessage?.updatedAt || conversation.lastMessage?.createdAt
+  ).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
 
   return (
-    <>
-      <div
-        className={`conversation-container ${isSelected ? "selected" : ""} `}
-        onClick={handleSelectConversation}
-      >
-        <div className="conversation-avatar">
-          <img
-            className="conversation-img"
-            src={
-              role === "admin" &&
-              Array.isArray(conversation?.participantDetails)
-                ? conversation.participantDetails[1]?.profilePic
-                : !Array.isArray(conversation?.participantDetails)
-                ? conversation?.participantDetails?.profilePic
-                : undefined
-            }
-            alt="User Avatar"
-          />
-          <span
-            className={`chatSidebarStatusDot ${isOnline && "online"}`}
-          ></span>
-        </div>
+    <div
+      className={`flex items-center p-2 cursor-pointer rounded-md hover:bg-gray-100 ${
+        isSelected ? "bg-gray-200" : ""
+      }`}
+      onClick={handleSelectConversation}
+    >
+      <div className="relative">
+        {conversation.type === "service" ? (
+          <div className="gap-2 flex relative">
+            <MessageCircle className="text-gray-600 w-4 h-4 mt-.5" />
+          </div>
+        ) : (
+          <>
+            <img
+              className="w-10 h-10 rounded-full"
+              src={participant?.profilePicture}
+              alt="User Avatar"
+            />
+            <span
+              className={`chatSidebarStatusDot ${isOnline && "online"}`}
+            ></span>
+          </>
+        )}
+      </div>
 
-        <div className="conversation-info">
-          <div className="conversation-header">
-            <p className="conversation-name">
-              {role === "admin" &&
-              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",
-                  })}
+      <div className="flex-1 ml-3">
+        <div className="flex justify-between items-center">
+          <p className="text-sm font-semibold text-gray-800">
+            {conversationName}
+          </p>
+          <div className="flex items-center gap-2">
+            {unreadCount > 0 && (
+              <span className="bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+                {unreadCount}
+              </span>
+            )}
+            <span className="text-xs text-gray-500">
+              {lastMessageTimestamp}
             </span>
           </div>
-          <p className="conversation-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>
+          {/* <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>
       </div>
-    </>
+    </div>
   );
 };