@pubuduth-aplicy/chat-ui 2.1.79 → 2.1.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.79",
+  "version": "2.1.80",
   "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/sidebar/Conversations.tsx

@@ -17,28 +17,29 @@ type GroupedServiceChats = {
   };
 };
 
+type TabType = "personal" | "service";
+
 const Conversations = () => {
   const { userId, socket } = useChatContext();
   const { data: participantGroups } = useGetConversations(userId);
   const { searchTerm } = useChatUIStore();
+  const [activeTab, setActiveTab] = useState<TabType>("personal");
   const [conversations, setConversations] = useState<{
-    generalChats: ConversationType[];
+    personalChats: ConversationType[];
     groupedServiceChats: GroupedServiceChats;
-  }>({ generalChats: [], groupedServiceChats: {} });
+  }>({ personalChats: [], groupedServiceChats: {} });
 
   // Process fetched data
   useEffect(() => {
     if (!participantGroups) return;
 
     const processConversations = (groups: ParticipantGroup[]) => {
-      const allGeneralChats: ConversationType[] = [];
+      const allPersonalChats: ConversationType[] = [];
       const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
 
       groups.forEach((group) => {
-        // console.log("group", group.personalConversation);
-
         if (group.personalConversation) {
-          allGeneralChats.push(group.personalConversation);
+          allPersonalChats.push(group.personalConversation);
         }
 
         group.serviceConversations.forEach((serviceGroup) => {
@@ -61,13 +62,13 @@ const Conversations = () => {
             new Date(a.lastMessage?.createdAt || a.updatedAt).getTime()
         );
 
-      sortConversations(allGeneralChats);
+      sortConversations(allPersonalChats);
       allServiceChatsMap.forEach((value) =>
         sortConversations(value.conversations)
       );
 
       return {
-        generalChats: allGeneralChats,
+        personalChats: allPersonalChats,
         groupedServiceChats: Object.fromEntries(allServiceChatsMap),
       };
     };
@@ -86,7 +87,7 @@ const Conversations = () => {
       const { chatId, messageIds } = data;
 
       setConversations((prev) => {
-        const generalChats = [...prev.generalChats];
+        const personalChats = [...prev.personalChats];
         const groupedServiceChats = { ...prev.groupedServiceChats };
 
         const updateRead = (convo: ConversationType) => {
@@ -101,10 +102,10 @@ const Conversations = () => {
           };
         };
 
-        const generalIndex = generalChats.findIndex((c) => c._id === chatId);
-        if (generalIndex >= 0) {
-          generalChats[generalIndex] = updateRead(generalChats[generalIndex]);
-          return { generalChats, groupedServiceChats };
+        const personalIndex = personalChats.findIndex((c) => c._id === chatId);
+        if (personalIndex >= 0) {
+          personalChats[personalIndex] = updateRead(personalChats[personalIndex]);
+          return { personalChats, groupedServiceChats };
         }
 
         for (const serviceId in groupedServiceChats) {
@@ -117,7 +118,7 @@ const Conversations = () => {
               ...groupedServiceChats[serviceId],
               conversations: updatedConvos,
             };
-            return { generalChats, groupedServiceChats };
+            return { personalChats, groupedServiceChats };
           }
         }
 
@@ -129,7 +130,7 @@ const Conversations = () => {
       if (!newMessage?.conversationId) return;
 
       setConversations((prev) => {
-        const generalChats = [...prev.generalChats];
+        const personalChats = [...prev.personalChats];
         const groupedServiceChats = { ...prev.groupedServiceChats };
 
         const updateConversation = (convo: ConversationType) => ({
@@ -146,14 +147,14 @@ const Conversations = () => {
               : convo.unreadMessageCount || 0,
         });
 
-        const generalIndex = generalChats.findIndex(
+        const personalIndex = personalChats.findIndex(
           (c) => c._id === newMessage.conversationId
         );
-        if (generalIndex >= 0) {
-          generalChats[generalIndex] = updateConversation(
-            generalChats[generalIndex]
+        if (personalIndex >= 0) {
+          personalChats[personalIndex] = updateConversation(
+            personalChats[personalIndex]
           );
-          return { generalChats, groupedServiceChats };
+          return { personalChats, groupedServiceChats };
         }
 
         for (const serviceId in groupedServiceChats) {
@@ -171,11 +172,11 @@ const Conversations = () => {
               ...groupedServiceChats[serviceId],
               conversations: updatedConversations,
             };
-            return { generalChats, groupedServiceChats };
+            return { personalChats, groupedServiceChats };
           }
         }
 
-        generalChats.push({
+        personalChats.push({
           _id: newMessage.conversationId,
           participants: [newMessage.senderId, newMessage.receiverId],
           lastMessage: newMessage,
@@ -188,7 +189,7 @@ const Conversations = () => {
           createdAt: new Date().toISOString(),
         });
 
-        return { generalChats, groupedServiceChats };
+        return { personalChats, groupedServiceChats };
       });
     };
 
@@ -218,13 +219,14 @@ const Conversations = () => {
   }, [socket, userId]);
 
   const isEmpty =
-    conversations.generalChats.length === 0 &&
-    Object.keys(conversations.groupedServiceChats).length === 0;
+    activeTab === "personal"
+      ? conversations.personalChats.length === 0
+      : Object.keys(conversations.groupedServiceChats).length === 0;
 
   const lowerSearch = searchTerm?.toLowerCase().trim();
 
-  const filteredGeneralChats = conversations.generalChats.filter((convo) =>
-    convo.participantDetails?.some((p:any) =>
+  const filteredPersonalChats = conversations.personalChats.filter((convo) =>
+    convo.participantDetails?.some((p: any) =>
       typeof p === "string"
         ? p.toLowerCase().includes(lowerSearch)
         : p.name?.toLowerCase().includes(lowerSearch)
@@ -235,7 +237,7 @@ const Conversations = () => {
     Object.entries(conversations.groupedServiceChats)
       .map(([serviceId, group]) => {
         const filteredConvos = group.conversations.filter((convo) =>
-          convo.participants?.some((p:any) =>
+          convo.participants?.some((p: any) =>
             typeof p === "string"
               ? p.toLowerCase().includes(lowerSearch)
               : p.name?.toLowerCase().includes(lowerSearch)
@@ -246,48 +248,90 @@ const Conversations = () => {
       .filter(([_, group]) => group.conversations.length > 0) // Remove empty groups
   );
 
-  // console.log("filteredGeneralChats",filteredGeneralChats);
-  // console.log("filteredGroupedServiceChats");
+  // Calculate unread counts for tabs
+  const personalUnreadCount = conversations.personalChats.reduce(
+    (total, convo) => total + (convo.unreadMessageCount || 0),
+    0
+  );
+
+  const serviceUnreadCount = Object.values(conversations.groupedServiceChats)
+    .flatMap(group => group.conversations)
+    .reduce((total, convo) => total + (convo.unreadMessageCount || 0), 0);
 
   return (
     <div className="chatSidebarConversations">
-      {isEmpty ? (
-        <div className="flex flex-col items-center justify-center p-8 text-center">
-          <h3 className="text-xl font-semibold mb-1">No Conversations</h3>
-          <p className="text-gray-500 text-sm mb-4">
-            You have no messages yet.
-          </p>
-        </div>
-      ) : (
-        <>
-          {filteredGeneralChats.length > 0 && (
-            <CollapsibleSection title="General Chats">
-              <VirtualizedChatList conversations={filteredGeneralChats} />
-            </CollapsibleSection>
+      {/* Tab Navigation */}
+      <div className="flex border-b border-gray-200">
+        <button
+          className={`flex-1 py-3 px-4 text-sm font-medium text-center border-b-2 transition-colors ${
+            activeTab === "personal"
+              ? "border-[#317490] message-text bg-blue-50"
+              : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50"
+          }`}
+          onClick={() => setActiveTab("personal")}
+        >
+          Personal
+          {personalUnreadCount > 0 && (
+            <span className="ml-2 bg-blue-500 text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
+              {personalUnreadCount}
+            </span>
           )}
-
-          {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>
+        </button>
+        <button
+          className={`flex-1 py-3 px-4 text-sm font-medium text-center border-b-2 transition-colors ${
+            activeTab === "service"
+              ? "border-blue-500 text-blue-600 bg-blue-50"
+              : "border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50"
+          }`}
+          onClick={() => setActiveTab("service")}
+        >
+          Service
+          {serviceUnreadCount > 0 && (
+            <span className="ml-2 bg-blue-500 text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
+              {serviceUnreadCount}
+            </span>
           )}
-        </>
-      )}
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-auto">
+        {isEmpty ? (
+          <div className="flex flex-col items-center justify-center p-8 text-center">
+            <h3 className="text-xl font-semibold mb-1">No Conversations</h3>
+            <p className="text-gray-500 text-sm mb-4">
+              {activeTab === "personal" 
+                ? "You have no personal messages yet." 
+                : "You have no service messages yet."}
+            </p>
+          </div>
+        ) : (
+          <>
+            {activeTab === "personal" && filteredPersonalChats.length > 0 && (
+              <VirtualizedChatList conversations={filteredPersonalChats} />
+            )}
+
+            {activeTab === "service" && 
+              Object.entries(filteredGroupedServiceChats).length > 0 && (
+              <div className="p-2">
+                {Object.entries(filteredGroupedServiceChats).map(
+                  ([serviceId, { serviceTitle, conversations: serviceConvos }]) => (
+                    <CollapsibleSection
+                      key={serviceId}
+                      title={serviceTitle}
+                      defaultOpen={false}
+                    >
+                      <VirtualizedChatList conversations={serviceConvos} />
+                    </CollapsibleSection>
+                  )
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 };
 
-export default Conversations;
+export default Conversations;