@pubuduth-aplicy/chat-ui 2.1.93 → 2.1.94

package/package.json

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

@@ -1,541 +1,357 @@
-// /* 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 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[];
-//   };
-// };
-
-// type Row =
-//   | { type: "service-header"; serviceId: string; title: string }
-//   | { type: "conversation"; conversation: ConversationType };
-
-// 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<{
-//     personalChats: ConversationType[];
-//     groupedServiceChats: GroupedServiceChats;
-//   }>({ personalChats: [], groupedServiceChats: {} });
-
-//   // Process fetched data
-//  useEffect(() => {
-//   if (!participantGroups) return;
-//   const processConversations = (groups: ParticipantGroup[]) => {
-//     const allPersonalChats: ConversationType[] = [];
-//     const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
-
-//     groups.forEach((group) => {
-   
-//       if (group.personalConversation) {
-//         allPersonalChats.push(group.personalConversation);
-//       }
-
-//       group.serviceConversations.forEach((serviceGroup) => {
-//         if (!allServiceChatsMap.has(serviceGroup.serviceId)) {
-//           allServiceChatsMap.set(serviceGroup.serviceId, {
-//             serviceTitle: serviceGroup.serviceTitle,
-//             conversations: [],
-//           });
-//         }
-        
-//         const existing = allServiceChatsMap.get(serviceGroup.serviceId)!;
-//         existing.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(allPersonalChats);
-//     allServiceChatsMap.forEach((value) => {
-//       sortConversations(value.conversations);
-//     });
-
-//     const result = {
-//       personalChats: allPersonalChats,
-//       groupedServiceChats: Object.fromEntries(allServiceChatsMap),
-//     };
-
-//     return result;
-//   };
-
-//   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 personalChats = [...prev.personalChats];
-//         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 personalIndex = personalChats.findIndex((c) => c._id === chatId);
-//         if (personalIndex >= 0) {
-//           personalChats[personalIndex] = updateRead(personalChats[personalIndex]);
-//           return { personalChats, 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 { personalChats, groupedServiceChats };
-//           }
-//         }
-
-//         return prev;
-//       });
-//     };
-
-//     const handleNewMessage = (newMessage: any) => {
-//       if (!newMessage?.conversationId) return;
-
-//       setConversations((prev) => {
-//         const personalChats = [...prev.personalChats];
-//         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 personalIndex = personalChats.findIndex(
-//           (c) => c._id === newMessage.conversationId
-//         );
-//         if (personalIndex >= 0) {
-//           personalChats[personalIndex] = updateConversation(
-//             personalChats[personalIndex]
-//           );
-//           return { personalChats, 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 { personalChats, groupedServiceChats };
-//           }
-//         }
-
-//         personalChats.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 { personalChats, 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 =
-//   //   activeTab === "personal"
-//   //     ? conversations.personalChats.length === 0
-//   //     : Object.keys(conversations.groupedServiceChats).length === 0;
-
-//   const lowerSearch = searchTerm?.toLowerCase().trim();
-
-// // Filter personal chats
-// const filteredPersonalChats = !lowerSearch
-//   ? conversations.personalChats
-//   : conversations.personalChats.filter((convo) =>
-//       convo.participantDetails?.some((p: any) =>
-//         p?.name?.toLowerCase().includes(lowerSearch)
-//       )
-//     );
-
-// // Filter service chats
-// const filteredGroupedServiceChats: GroupedServiceChats = !lowerSearch
-//   ? conversations.groupedServiceChats
-//   : Object.fromEntries(
-//       Object.entries(conversations.groupedServiceChats)
-//         .map(([serviceId, group]) => {
-//           const filteredConvos = group.conversations.filter((convo) =>
-//             convo.participantDetails?.some((p: any) =>
-//               p?.name?.toLowerCase().includes(lowerSearch)
-//             ) ||
-//             group.serviceTitle?.toLowerCase().includes(lowerSearch) ||
-//             convo.serviceTitle?.toLowerCase().includes(lowerSearch)
-//           );
-//           return [serviceId, { ...group, conversations: filteredConvos }];
-//         })
-//         .filter(([_, group]) => group.conversations.length > 0)
-//     );
-
-// // Improved empty state logic
-// const showPersonalTab = activeTab === "personal" && filteredPersonalChats.length > 0;
-// const showServiceTab = activeTab === "service" && Object.keys(filteredGroupedServiceChats).length > 0;
-// const isEmpty = !showPersonalTab && !showServiceTab;
-  
-
-//   // 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">
-//       {/* 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-primary text-primary "
-//               : "border-transparent text-gray-500 hover:text-gray-700"
-//           }`}
-//           onClick={() => setActiveTab("personal")}
-//         >
-//           Personal
-//           {personalUnreadCount > 0 && (
-//             <span className="ml-2 bg-blue-primary text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
-//               {personalUnreadCount}
-//             </span>
-//           )}
-//         </button>
-//         <button
-//           className={`flex-1 py-3 px-4 text-sm font-medium text-center border-b-2 transition-colors ${
-//             activeTab === "service"
-//               ? "border-primary text-primary "
-//               : "border-transparent text-gray-500 hover:text-gray-700"
-//           }`}
-//           onClick={() => setActiveTab("service")}
-//         >
-//           Service
-//           {serviceUnreadCount > 0 && (
-//             <span className="ml-2 bg-primary 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>
-//         ) : (
-//           <>
-//           <div className="h-full overflow-auto">
-//  {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>
-//     </div>
-//   );
-// };
-
-// export default Conversations;
-
-
-
-/* Optimized single-virtualizer version for 10k+ conversations */
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+/* 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 as ConversationType,
+  ParticipantGroup,
+} from "../../types/type";
+import CollapsibleSection from "../common/CollapsibleSection";
 import useChatUIStore from "../../stores/Zustant";
-import Conversation from "../sidebar/Conversation";
-import { Conversation as ConversationType, ParticipantGroup } from "../../types/type";
+import VirtualizedChatList from "../common/VirtualizedChatList";
+
+type GroupedServiceChats = {
+  [serviceId: string]: {
+    serviceTitle: string;
+    conversations: ConversationType[];
+  };
+};
 
-// ---------- Row model ----------
 type Row =
   | { type: "service-header"; serviceId: string; title: string }
   | { type: "conversation"; conversation: ConversationType };
 
 type TabType = "personal" | "service";
 
-const HEADER_HEIGHT = 36;
-const ROW_HEIGHT = 60;
-
-export default function Conversations() {
+const Conversations = () => {
   const { userId, socket } = useChatContext();
   const { data: participantGroups } = useGetConversations(userId);
   const { searchTerm } = useChatUIStore();
-
   const [activeTab, setActiveTab] = useState<TabType>("personal");
-  const [personalChats, setPersonalChats] = useState<ConversationType[]>([]);
-  const [serviceChats, setServiceChats] = useState<
-    Record<string, { serviceTitle: string; conversations: ConversationType[] }>
-  >({});
+  const [conversations, setConversations] = useState<{
+    personalChats: ConversationType[];
+    groupedServiceChats: GroupedServiceChats;
+  }>({ personalChats: [], groupedServiceChats: {} });
+
+  // Process fetched data
+ useEffect(() => {
+  if (!participantGroups) return;
+  const processConversations = (groups: ParticipantGroup[]) => {
+    const allPersonalChats: ConversationType[] = [];
+    const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
+
+    groups.forEach((group) => {
+   
+      if (group.personalConversation) {
+        allPersonalChats.push(group.personalConversation);
+      }
+
+      group.serviceConversations.forEach((serviceGroup) => {
+        if (!allServiceChatsMap.has(serviceGroup.serviceId)) {
+          allServiceChatsMap.set(serviceGroup.serviceId, {
+            serviceTitle: serviceGroup.serviceTitle,
+            conversations: [],
+          });
+        }
+        
+        const existing = allServiceChatsMap.get(serviceGroup.serviceId)!;
+        existing.conversations.push(...serviceGroup.conversations);
+      });
+    });
 
-  // -------- Normalize API data (once) --------
-  useEffect(() => {
-    if (!participantGroups) return;
 
-    const personals: ConversationType[] = [];
-    const services: Record<string, { serviceTitle: string; conversations: ConversationType[] }> = {};
+    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(allPersonalChats);
+    allServiceChatsMap.forEach((value) => {
+      sortConversations(value.conversations);
+    });
 
-    participantGroups.forEach((group: ParticipantGroup) => {
-      if (group.personalConversation) personals.push(group.personalConversation);
+    const result = {
+      personalChats: allPersonalChats,
+      groupedServiceChats: Object.fromEntries(allServiceChatsMap),
+    };
 
-      group.serviceConversations.forEach((sg) => {
-        if (!services[sg.serviceId]) {
-          services[sg.serviceId] = {
-            serviceTitle: sg.serviceTitle,
-            conversations: [],
+    return result;
+  };
+
+  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 personalChats = [...prev.personalChats];
+        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 personalIndex = personalChats.findIndex((c) => c._id === chatId);
+        if (personalIndex >= 0) {
+          personalChats[personalIndex] = updateRead(personalChats[personalIndex]);
+          return { personalChats, 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 { personalChats, groupedServiceChats };
+          }
         }
-        services[sg.serviceId].conversations.push(...sg.conversations);
+
+        return prev;
       });
-    });
+    };
+
+    const handleNewMessage = (newMessage: any) => {
+      if (!newMessage?.conversationId) return;
+
+      setConversations((prev) => {
+        const personalChats = [...prev.personalChats];
+        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 personalIndex = personalChats.findIndex(
+          (c) => c._id === newMessage.conversationId
+        );
+        if (personalIndex >= 0) {
+          personalChats[personalIndex] = updateConversation(
+            personalChats[personalIndex]
+          );
+          return { personalChats, groupedServiceChats };
+        }
 
-    const sortFn = (a: ConversationType, b: ConversationType) =>
-      new Date(b.lastMessage?.createdAt || b.updatedAt).getTime() -
-      new Date(a.lastMessage?.createdAt || a.updatedAt).getTime();
+        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 { personalChats, groupedServiceChats };
+          }
+        }
 
-    personals.sort(sortFn);
-    Object.values(services).forEach((g) => g.conversations.sort(sortFn));
+        personalChats.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 { personalChats, 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);
+      }
+    };
 
-    setPersonalChats(personals);
-    setServiceChats(services);
-  }, [participantGroups]);
+    socket.addEventListener("message", messageListener);
+    return () => socket.removeEventListener("message", messageListener);
+  }, [socket, userId]);
+
+  // const isEmpty =
+  //   activeTab === "personal"
+  //     ? conversations.personalChats.length === 0
+  //     : Object.keys(conversations.groupedServiceChats).length === 0;
 
-  // -------- Search filtering --------
   const lowerSearch = searchTerm?.toLowerCase().trim();
 
-  const filteredPersonal = useMemo(() => {
-    if (!lowerSearch) return personalChats;
-    return personalChats.filter((c) =>
-      c.participantDetails?.some((p: any) =>
+// Filter personal chats
+const filteredPersonalChats = !lowerSearch
+  ? conversations.personalChats
+  : conversations.personalChats.filter((convo) =>
+      convo.participantDetails?.some((p: any) =>
         p?.name?.toLowerCase().includes(lowerSearch)
       )
     );
-  }, [personalChats, lowerSearch]);
-
-  const filteredService = useMemo(() => {
-    if (!lowerSearch) return serviceChats;
-
-    const result: typeof serviceChats = {};
-    Object.entries(serviceChats).forEach(([sid, group]) => {
-      const convs = group.conversations.filter((c) =>
-        c.participantDetails?.some((p: any) =>
-          p?.name?.toLowerCase().includes(lowerSearch)
-        ) ||
-        group.serviceTitle.toLowerCase().includes(lowerSearch)
-      );
-      if (convs.length) result[sid] = { ...group, conversations: convs };
-    });
-    return result;
-  }, [serviceChats, lowerSearch]);
-
-  // -------- Flatten into ONE list --------
-  const rows: Row[] = useMemo(() => {
-    const out: Row[] = [];
-
-    if (activeTab === "personal") {
-      filteredPersonal.forEach((c) =>
-        out.push({ type: "conversation", conversation: c })
-      );
-    }
 
-    if (activeTab === "service") {
-      Object.entries(filteredService).forEach(([sid, group]) => {
-        out.push({ type: "service-header", serviceId: sid, title: group.serviceTitle });
-        group.conversations.forEach((c) =>
-          out.push({ type: "conversation", conversation: c })
-        );
-      });
-    }
+// Filter service chats
+const filteredGroupedServiceChats: GroupedServiceChats = !lowerSearch
+  ? conversations.groupedServiceChats
+  : Object.fromEntries(
+      Object.entries(conversations.groupedServiceChats)
+        .map(([serviceId, group]) => {
+          const filteredConvos = group.conversations.filter((convo) =>
+            convo.participantDetails?.some((p: any) =>
+              p?.name?.toLowerCase().includes(lowerSearch)
+            ) ||
+            group.serviceTitle?.toLowerCase().includes(lowerSearch) ||
+            convo.serviceTitle?.toLowerCase().includes(lowerSearch)
+          );
+          return [serviceId, { ...group, conversations: filteredConvos }];
+        })
+        .filter(([_, group]) => group.conversations.length > 0)
+    );
 
-    return out;
-  }, [activeTab, filteredPersonal, filteredService]);
+// Improved empty state logic
+const showPersonalTab = activeTab === "personal" && filteredPersonalChats.length > 0;
+const showServiceTab = activeTab === "service" && Object.keys(filteredGroupedServiceChats).length > 0;
+const isEmpty = !showPersonalTab && !showServiceTab;
+  
 
-  // -------- Virtualizer --------
-  const parentRef = useRef<HTMLDivElement>(null);
+  // Calculate unread counts for tabs
+  const personalUnreadCount = conversations.personalChats.reduce(
+    (total, convo) => total + (convo.unreadMessageCount || 0),
+    0
+  );
 
-  const virtualizer = useVirtualizer({
-    count: rows.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: (index) =>
-      rows[index]?.type === "service-header" ? HEADER_HEIGHT : ROW_HEIGHT,
-    overscan: 10,
-  });
+  const serviceUnreadCount = Object.values(conversations.groupedServiceChats)
+    .flatMap(group => group.conversations)
+    .reduce((total, convo) => total + (convo.unreadMessageCount || 0), 0);
 
-  // -------- UI --------
   return (
-    <div className="flex flex-col h-full">
-      {/* Tabs */}
-      <div className="flex border-b">
+    <div className="chatSidebarConversations">
+      {/* Tab Navigation */}
+      <div className="flex border-b border-gray-200">
         <button
-          className={`flex-1 py-3 ${activeTab === "personal" ? "border-b-2 border-primary" : ""}`}
+          className={`flex-1 py-3 px-4 text-sm font-medium text-center border-b-2 transition-colors ${
+            activeTab === "personal"
+              ? "border-primary text-primary "
+              : "border-transparent text-gray-500 hover:text-gray-700"
+          }`}
           onClick={() => setActiveTab("personal")}
         >
           Personal
+          {personalUnreadCount > 0 && (
+            <span className="ml-2 bg-blue-primary text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
+              {personalUnreadCount}
+            </span>
+          )}
         </button>
         <button
-          className={`flex-1 py-3 ${activeTab === "service" ? "border-b-2 border-primary" : ""}`}
+          className={`flex-1 py-3 px-4 text-sm font-medium text-center border-b-2 transition-colors ${
+            activeTab === "service"
+              ? "border-primary text-primary "
+              : "border-transparent text-gray-500 hover:text-gray-700"
+          }`}
           onClick={() => setActiveTab("service")}
         >
           Service
+          {serviceUnreadCount > 0 && (
+            <span className="ml-2 bg-primary text-white text-xs rounded-full px-2 py-1 min-w-5 inline-flex justify-center">
+              {serviceUnreadCount}
+            </span>
+          )}
         </button>
       </div>
 
-      {/* Single scroll container */}
-      <div ref={parentRef} className="flex-1 overflow-auto">
-        <div
-          style={{
-            height: virtualizer.getTotalSize(),
-            position: "relative",
-          }}
-        >
-          {virtualizer.getVirtualItems().map((item) => {
-            const row = rows[item.index];
-            if (!row) return null;
-
-            return (
-              <div
-                key={item.key}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
-                  transform: `translateY(${item.start}px)`,
-                }}
-              >
-                {row.type === "service-header" ? (
-                  <div className="px-3 py-2 text-xs font-semibold uppercase bg-gray-100 dark:bg-gray-800">
-                    {row.title}
-                  </div>
-                ) : (
-                  <Conversation conversation={row.conversation} />
+      {/* 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>
+        ) : (
+          <>
+          <div className="h-full overflow-auto">
+ {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>
+           
+          </>
+        )}
       </div>
     </div>
   );
-}
+};
+
+export default Conversations;