@pubuduth-aplicy/chat-ui 2.1.73 → 2.1.74

package/src/components/sidebar/Conversation.tsx

@@ -1,205 +1,164 @@
-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);
+  // This should return the other participant
+  const participant = conversation.participantDetails?.find(
+    (p:any) => p._id !== userId
+  );
 
-  const handleSelectConversation = async () => {
-    // Set as selected conversation
-    setSelectedConversation(conversation);
 
-    // Mark as active chat
-    setActiveChatId(conversation._id);
+  // const handleSelectConversation = () => {
+  //   console.log("Selected Conversation Data:", JSON.stringify(conversation, null, 2));
+  //   setSelectedConversation(conversation);
+
+  //   const unreadMessages = conversation.unreadMessageIds || [];
+  //   if (unreadMessages.length > 0 && socket?.readyState === WebSocket.OPEN) {
+  //     console.log('unread meassge',unreadMessages);
+
+  //     const message = {
+  //       event: "messageRead",
+  //       data: {
+  //         messageIds: unreadMessages,
+  //         senderId: participant?._id,
+  //         chatId: conversation._id,
+  //       },
+  //     };
+  //     socket.send(JSON.stringify(message));
+  //   }
+  // };
 
-    // Join chat via WebSocket
-    if (socket?.readyState === WebSocket.OPEN) {
-      sendMessage({
-        event: "joinChat",
+  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);
+
+      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));
+      //  updateConversationReadStatus(conversation._id, unreadMessageIds);
     }
   };
 
-  // // 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]);
+
+  // Temporary debug in your component
+  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?.firstname || "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?.profilePic}
+              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">
+          {conversation.lastMessage?.status === "deleted"
+            ? "This message was deleted"
+            : conversation.lastMessage?.media?.length > 0
+            ? "Attachment"
+            : conversation.lastMessage?.message}
+        </p>
       </div>
-    </>
+    </div>
   );
 };
 

package/src/components/sidebar/Conversations.tsx

@@ -1,56 +1,286 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
+import { useEffect, useState } from "react";
 import { useGetConversations } from "../../hooks/queries/useChatApi";
 import { useChatContext } from "../../providers/ChatProvider";
-import Conversation from "./Conversation";
+import {
+  Conversation as ConversationType,
+  ParticipantGroup,
+} from "../../types/type";
+import CollapsibleSection from "../common/CollapsibleSection";
+import useChatUIStore from "../../stores/Zustant";
+import VirtualizedChatList from "../common/VirtualizedChatList";
+
+type GroupedServiceChats = {
+  [serviceId: string]: {
+    serviceTitle: string;
+    conversations: ConversationType[];
+  };
+};
 
 const Conversations = () => {
-  const { userId } = useChatContext();
-  const { data: conversations } = useGetConversations(userId);
-  console.log("conversations", conversations);
-  console.log("userId", userId);
-  // const { loading, conversations } = useGetConversations();
+  const { userId, socket } = useChatContext();
+  const { data: participantGroups } = useGetConversations(userId);
+  const { searchTerm } = useChatUIStore();
+  const [conversations, setConversations] = useState<{
+    generalChats: ConversationType[];
+    groupedServiceChats: GroupedServiceChats;
+  }>({ generalChats: [], groupedServiceChats: {} });
+
+  // Process fetched data
+  useEffect(() => {
+    if (!participantGroups) return;
+
+    const processConversations = (groups: ParticipantGroup[]) => {
+      const allGeneralChats: ConversationType[] = [];
+      const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
+
+      groups.forEach((group) => {
+        if (group.personalConversation) {
+          allGeneralChats.push(group.personalConversation);
+        }
+
+        group.serviceConversations.forEach((serviceGroup) => {
+          if (!allServiceChatsMap.has(serviceGroup.serviceId)) {
+            allServiceChatsMap.set(serviceGroup.serviceId, {
+              serviceTitle: serviceGroup.serviceTitle,
+              conversations: [],
+            });
+          }
+          allServiceChatsMap
+            .get(serviceGroup.serviceId)!
+            .conversations.push(...serviceGroup.conversations);
+        });
+      });
+
+      const sortConversations = (convos: ConversationType[]) =>
+        convos.sort(
+          (a, b) =>
+            new Date(b.lastMessage?.createdAt || b.updatedAt).getTime() -
+            new Date(a.lastMessage?.createdAt || a.updatedAt).getTime()
+        );
+
+      sortConversations(allGeneralChats);
+      allServiceChatsMap.forEach((value) =>
+        sortConversations(value.conversations)
+      );
+
+      return {
+        generalChats: allGeneralChats,
+        groupedServiceChats: Object.fromEntries(allServiceChatsMap),
+      };
+    };
+
+    setConversations(processConversations(participantGroups));
+  }, [participantGroups]);
+
+  // Real-time update listeners
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleMessageReadAck = (data: {
+      messageIds: string[];
+      chatId: string;
+    }) => {
+      const { chatId, messageIds } = data;
+
+      setConversations((prev) => {
+        const generalChats = [...prev.generalChats];
+        const groupedServiceChats = { ...prev.groupedServiceChats };
+
+        const updateRead = (convo: ConversationType) => {
+          if (convo._id !== chatId) return convo;
+          const updatedUnread = (convo.unreadMessageIds || []).filter(
+            (id) => !messageIds.includes(id)
+          );
+          return {
+            ...convo,
+            unreadMessageIds: updatedUnread,
+            unreadMessageCount: updatedUnread.length,
+          };
+        };
+
+        const generalIndex = generalChats.findIndex((c) => c._id === chatId);
+        if (generalIndex >= 0) {
+          generalChats[generalIndex] = updateRead(generalChats[generalIndex]);
+          return { generalChats, groupedServiceChats };
+        }
+
+        for (const serviceId in groupedServiceChats) {
+          const convos = groupedServiceChats[serviceId].conversations;
+          const convoIndex = convos.findIndex((c) => c._id === chatId);
+          if (convoIndex >= 0) {
+            const updatedConvos = [...convos];
+            updatedConvos[convoIndex] = updateRead(updatedConvos[convoIndex]);
+            groupedServiceChats[serviceId] = {
+              ...groupedServiceChats[serviceId],
+              conversations: updatedConvos,
+            };
+            return { generalChats, groupedServiceChats };
+          }
+        }
+
+        return prev;
+      });
+    };
+
+    const handleNewMessage = (newMessage: any) => {
+      if (!newMessage?.conversationId) return;
+
+      setConversations((prev) => {
+        const generalChats = [...prev.generalChats];
+        const groupedServiceChats = { ...prev.groupedServiceChats };
+
+        const updateConversation = (convo: ConversationType) => ({
+          ...convo,
+          lastMessage: newMessage,
+          updatedAt: new Date().toISOString(),
+          unreadMessageIds:
+            userId !== newMessage.senderId
+              ? [...(convo.unreadMessageIds || []), newMessage._id]
+              : convo.unreadMessageIds || [],
+          unreadMessageCount:
+            userId !== newMessage.senderId
+              ? (convo.unreadMessageCount || 0) + 1
+              : convo.unreadMessageCount || 0,
+        });
+
+        const generalIndex = generalChats.findIndex(
+          (c) => c._id === newMessage.conversationId
+        );
+        if (generalIndex >= 0) {
+          generalChats[generalIndex] = updateConversation(
+            generalChats[generalIndex]
+          );
+          return { generalChats, groupedServiceChats };
+        }
+
+        for (const serviceId in groupedServiceChats) {
+          const serviceIndex = groupedServiceChats[
+            serviceId
+          ].conversations.findIndex((c) => c._id === newMessage.conversationId);
+          if (serviceIndex >= 0) {
+            const updatedConversations = [
+              ...groupedServiceChats[serviceId].conversations,
+            ];
+            updatedConversations[serviceIndex] = updateConversation(
+              updatedConversations[serviceIndex]
+            );
+            groupedServiceChats[serviceId] = {
+              ...groupedServiceChats[serviceId],
+              conversations: updatedConversations,
+            };
+            return { generalChats, groupedServiceChats };
+          }
+        }
+
+        generalChats.push({
+          _id: newMessage.conversationId,
+          participants: [newMessage.senderId, newMessage.receiverId],
+          lastMessage: newMessage,
+          updatedAt: new Date().toISOString(),
+          unreadMessageIds:
+            userId !== newMessage.senderId ? [newMessage._id] : [],
+          unreadMessageCount: userId !== newMessage.senderId ? 1 : 0,
+          type: "personal",
+          readReceipts: [],
+          createdAt: new Date().toISOString(),
+        });
+
+        return { generalChats, groupedServiceChats };
+      });
+    };
+
+    const messageListener = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.event === "newMessage") {
+          handleNewMessage(data.data);
+        } else if (
+          data.event === "messageStatusUpdated" &&
+          data.data.status === "read"
+        ) {
+          handleMessageReadAck({
+            messageIds: Array.isArray(data.data.messageId)
+              ? data.data.messageId
+              : [data.data.messageId],
+            chatId: data.data.chatId,
+          });
+        }
+      } catch (e) {
+        console.error("Error parsing socket message:", e);
+      }
+    };
+
+    socket.addEventListener("message", messageListener);
+    return () => socket.removeEventListener("message", messageListener);
+  }, [socket, userId]);
+
+  const isEmpty =
+    conversations.generalChats.length === 0 &&
+    Object.keys(conversations.groupedServiceChats).length === 0;
+
+  const lowerSearch = searchTerm?.toLowerCase().trim();
+
+  const filteredGeneralChats = conversations.generalChats.filter((convo) =>
+    convo.participantDetails?.some((p:any) =>
+      typeof p === "string"
+        ? p.toLowerCase().includes(lowerSearch)
+        : p.firstname?.toLowerCase().includes(lowerSearch)
+    )
+  );
+
+  const filteredGroupedServiceChats: GroupedServiceChats = Object.fromEntries(
+    Object.entries(conversations.groupedServiceChats)
+      .map(([serviceId, group]) => {
+        const filteredConvos = group.conversations.filter((convo) =>
+          convo.participants?.some((p:any) =>
+            typeof p === "string"
+              ? p.toLowerCase().includes(lowerSearch)
+              : p.name?.toLowerCase().includes(lowerSearch)
+          )
+        );
+        return [serviceId, { ...group, conversations: filteredConvos }];
+      })
+      .filter(([_, group]) => group.conversations.length > 0) // Remove empty groups
+  );
+
   return (
     <div className="chatSidebarConversations">
-      <h2
-        className="text-lg font-semibold text-gray-700"
-        style={{ paddingLeft: "1rem" }}
-      >
-        All Messages
-      </h2>
-      {(!conversations || conversations.length === 0) && (
+      {isEmpty ? (
         <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">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="32"
-              height="32"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="text-gray-500"
-            >
-              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
-            </svg>
-          </div>
           <h3 className="text-xl font-semibold mb-1">No Conversations</h3>
           <p className="text-gray-500 text-sm mb-4">
-            There are no conversations under &quot;All messages&quot;
+            You have no messages yet.
           </p>
         </div>
+      ) : (
+        <>
+          {filteredGeneralChats.length > 0 && (
+            <CollapsibleSection title="General Chats">
+              <VirtualizedChatList conversations={filteredGeneralChats} />
+            </CollapsibleSection>
+          )}
+
+          {Object.entries(filteredGroupedServiceChats).length > 0 && (
+            <CollapsibleSection title="Service Chats">
+              {Object.entries(filteredGroupedServiceChats).map(
+                ([
+                  serviceId,
+                  { serviceTitle, conversations: serviceConvos },
+                ]) => (
+                  <CollapsibleSection
+                    key={serviceId}
+                    title={serviceTitle}
+                    defaultOpen={false}
+                  >
+                    <VirtualizedChatList conversations={serviceConvos} />
+                  </CollapsibleSection>
+                )
+              )}
+            </CollapsibleSection>
+          )}
+        </>
       )}
-      {conversations?.map((conversation: any, idx: any) => (
-        <Conversation
-          key={conversation._id}
-          conversation={conversation}
-          lastIdx={idx === conversations.length - 1}
-        />
-      ))}
-
-      {/* {loading ? <span className='loading loading-spinner mx-auto'></span> : null} */}
     </div>
   );
 };