@pubuduth-aplicy/chat-ui 2.1.91 → 2.1.93

package/package.json

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

@@ -23,33 +23,50 @@ const VirtualizedChatList = ({ conversations }: Props) => {
     <div
       ref={parentRef}
       style={{
-        height: `${virtualizer.getTotalSize()}px`,
+        height: `400px`,
         width: "100%",
-        position: "relative",
+        // position: "relative",
         overflow: "auto",
       }}
     >
-      {virtualizer.getVirtualItems().map((item) => {
+      {/* {virtualizer.getVirtualItems().map((item) => {
         const conversation = conversations[item.index];
-        return (
-          <div
-            key={item.key}
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: `${item.size}px`,
-              transform: `translateY(${item.start}px)`,
-            }}
-          >
-            <Conversation
-              conversation={conversation}
-              lastIdx={item.index === conversations.length - 1}
-            />
-          </div>
-        );
-      })}
+        return ( */}
+      <div
+        // key={item.key}
+        style={{
+          position: "relative",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: `${virtualizer.getTotalSize()}px`,
+          // transform: `translateY(${item.start}px)`,
+        }}
+      >
+        {virtualizer.getVirtualItems().map((item) => {
+          const conversation = conversations[item.index];
+          return (
+            <div
+              key={item.key}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${item.size}px`,
+                transform: `translateY(${item.start}px)`,
+              }}
+            >
+              <Conversation
+                conversation={conversation}
+                lastIdx={item.index === conversations.length - 1}
+              />
+            </div>
+          );
+        })}
+      </div>
+      {/* ); */}
+      {/* })} */}
     </div>
   );
 };

package/src/components/messages/Message.tsx

@@ -51,31 +51,31 @@ interface MessageProps {
 
 const Message = ({ message }: MessageProps) => {
   const { userId } = useChatContext();
-  const { apiUrl,cdnUrl ,role: role1} = getChatConfig();
+  const { apiUrl, cdnUrl, role: role1 } = getChatConfig();
 
   if (message.type === "system") {
     const booking = message.meta?.bookingDetails;
     const status = booking?.status || "Pending"; // Default to Pending
     const role = role1; // "provider" or "customer"
-  
+
     const handleConfirm = () => {
       console.log("Booking confirmed!");
       window.location.href = `/booking/all`;
       // Update booking status to Confirmed
     };
-  
+
     const handleInProgress = () => {
       console.log("Booking started (In Progress)");
       window.location.href = `/booking/all`;
       // Update booking status to InProgress
     };
-  
+
     const handleComplete = () => {
       console.log("Booking completed!");
       window.location.href = `/booking/all`;
       // Update booking status to Completed
     };
-  
+
     const handleReview = () => {
       if (role === "customer") {
         console.log("Navigate to review page for customer → provider");
@@ -85,35 +85,35 @@ const Message = ({ message }: MessageProps) => {
         window.location.href = `/booking/all`;
       }
     };
-  
+
     return (
       <div className="system-message booking-details">
         <h4>{status}</h4>
         <div className="details">
           <p>Service: {booking?.serviceId}</p>
-          <p>Date: {booking?.date.split('T')[0]}</p>
+          <p>Date: {booking?.date.split("T")[0]}</p>
           <p>Time: {booking?.time}</p>
         </div>
-  
+
         {/* Actions based on role + status */}
         {role === "provider" && status === "Pending" && (
           <button className="confirm-button" onClick={handleConfirm}>
             Confirm Booking ✅
           </button>
         )}
-  
+
         {role === "provider" && status === "Confirmed" && (
           <button className="confirm-button" onClick={handleInProgress}>
             Start Service ▶️
           </button>
         )}
-  
+
         {role === "provider" && status === "InProgress" && (
           <button className="confirm-button" onClick={handleComplete}>
             Mark as Completed ✔️
           </button>
         )}
-  
+
         {status === "Completed" && (
           <button className="confirm-button" onClick={handleReview}>
             Leave a Review ✍️
@@ -253,7 +253,6 @@ const Message = ({ message }: MessageProps) => {
     }
   };
 
-
   const handleDownload = async (url: string, name: string, index: number) => {
     setDownloadingIndex(index);
     setDownloadProgress(0);
@@ -405,16 +404,37 @@ const Message = ({ message }: MessageProps) => {
                       src={`${cdnUrl}${media.url}`}
                       alt={media.name}
                       className="media-content"
-                      onClick={() => window.open(`${cdnUrl}${media.url}`, "_blank")}
+                      onClick={() =>
+                        window.open(`${cdnUrl}${media.url}`, "_blank")
+                      }
                     />
                   ) : media.type === "video" ? (
-                    <video controls className="media-content" preload="metadata">
-                      <source
-                        src={`${cdnUrl}${media.url}`}
-                        type={`video/${`${cdnUrl}${media.url}`.split(".").pop()?.toLocaleLowerCase()}`}
-                      />
-                    </video>
+                    <>
+                      <div
+                        className="video-file-preview"
+                        onClick={() =>
+                          window.open(`${cdnUrl}${media.url}`, "_blank")
+                        }
+                      >
+                        <div className="file-icon video-icon">🎥</div>
+
+                        <div className="file-info">
+                          <span className="file-name">{media.name}</span>
+                          <span className="file-size">
+                            {(media.size / 1024 / 1024).toFixed(1)} MB
+                          </span>
+                        </div>
+
+                        <div className="play-overlay">▶</div>
+                      </div>
+                    </>
                   ) : (
+                    // <video controls className="media-content" preload="metadata">
+                    //   <source
+                    //     src={`${cdnUrl}${media.url}`}
+                    //     type={`video/${`${cdnUrl}${media.url}`.split(".").pop()?.toLocaleLowerCase()}`}
+                    //   />
+                    // </video>
                     <div className="document-preview">
                       <div className="file-icon">
                         {media.type === "document" && "📄"}
@@ -434,7 +454,11 @@ const Message = ({ message }: MessageProps) => {
                       if (downloadingIndex === index) {
                         cancelDownload();
                       } else {
-                        handleDownload(`${cdnUrl}${media.url}`, media.name, index);
+                        handleDownload(
+                          `${cdnUrl}/${media.url}`,
+                          media.name,
+                          index
+                        );
                       }
                     }}
                     title={downloadingIndex === index ? "Cancel" : "Download"}
@@ -491,12 +515,14 @@ const Message = ({ message }: MessageProps) => {
       );
     } else {
       setIsEditingMode(false);
+      setShowOptions(false);
     }
   };
 
   const handleCancelEdit = () => {
     setEditedMessage(message.message);
     setIsEditingMode(false);
+    setShowOptions(false);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -534,7 +560,7 @@ const Message = ({ message }: MessageProps) => {
     return now.getTime() - messageDate.getTime() > oneDayInMs;
   };
 
-    const hasMedia = message.media && message.media.length > 0;
+  const hasMedia = message.media && message.media.length > 0;
 
   return (
     <div className="chat-container">
@@ -548,7 +574,9 @@ const Message = ({ message }: MessageProps) => {
         >
           {message.status === "deleted" ? (
             <div className="chat-bubble compact-bubble deleted-message">
-              <div className="message-text text-gray-900 dark:text-gray-100">This message was deleted</div>
+              <div className="message-text text-gray-900 dark:text-gray-100">
+                This message was deleted
+              </div>
             </div>
           ) : (
             (message.message ||
@@ -579,7 +607,9 @@ const Message = ({ message }: MessageProps) => {
                   </div>
                 ) : (
                   message.message && (
-                    <div className="message-text text-gray-900 dark:text-gray-100">{message.message}</div>
+                    <div className="message-text text-gray-900 dark:text-gray-100">
+                      {message.message}
+                    </div>
                   )
                 )}
 

package/src/components/messages/MessageInput.tsx

@@ -194,8 +194,8 @@ const MessageInput = () => {
   };
 
   const getFileType = (mimeType: string): FileType | null => {
-    if (ACCEPTED_IMAGE_TYPES.includes(mimeType)) return "image";
     if (ACCEPTED_VIDEO_TYPES.includes(mimeType)) return "video";
+    if (ACCEPTED_IMAGE_TYPES.includes(mimeType)) return "image";
     if (ACCEPTED_DOCUMENT_TYPES.includes(mimeType)) return "document";
     return null;
   };

package/src/components/sidebar/Conversation.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MessageCircle } from "lucide-react";
-import { useEffect } from "react";
+import { memo, useEffect } from "react";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
@@ -143,4 +143,4 @@ const Conversation = ({ conversation }: ConversationProps) => {
   );
 };
 
-export default Conversation;
+export default memo(Conversation);

package/src/components/sidebar/Conversations.tsx

@@ -1,350 +1,541 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState } from "react";
+// /* 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";
 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";
+import Conversation from "../sidebar/Conversation";
+import { Conversation as ConversationType, ParticipantGroup } from "../../types/type";
 
-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 Conversations = () => {
+const HEADER_HEIGHT = 36;
+const ROW_HEIGHT = 60;
+
+export default function 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, groupIndex) => {
-   
-      if (group.personalConversation) {
-        allPersonalChats.push(group.personalConversation);
-      }
-
-      group.serviceConversations.forEach((serviceGroup, serviceIndex) => {
-        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 [activeTab, setActiveTab] = useState<TabType>("personal");
+  const [personalChats, setPersonalChats] = useState<ConversationType[]>([]);
+  const [serviceChats, setServiceChats] = useState<
+    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, key) => {
-      sortConversations(value.conversations);
-    });
-
-    const result = {
-      personalChats: allPersonalChats,
-      groupedServiceChats: Object.fromEntries(allServiceChatsMap),
-    };
+  // -------- Normalize API data (once) --------
+  useEffect(() => {
+    if (!participantGroups) return;
 
-    return result;
-  };
+    const personals: ConversationType[] = [];
+    const services: Record<string, { serviceTitle: string; conversations: ConversationType[] }> = {};
 
-  setConversations(processConversations(participantGroups));
-}, [participantGroups]);
+    participantGroups.forEach((group: ParticipantGroup) => {
+      if (group.personalConversation) personals.push(group.personalConversation);
 
-  // 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,
+      group.serviceConversations.forEach((sg) => {
+        if (!services[sg.serviceId]) {
+          services[sg.serviceId] = {
+            serviceTitle: sg.serviceTitle,
+            conversations: [],
           };
-        };
-
-        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;
+        services[sg.serviceId].conversations.push(...sg.conversations);
       });
-    };
-
-    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);
-      }
-    };
+    const sortFn = (a: ConversationType, b: ConversationType) =>
+      new Date(b.lastMessage?.createdAt || b.updatedAt).getTime() -
+      new Date(a.lastMessage?.createdAt || a.updatedAt).getTime();
 
-    socket.addEventListener("message", messageListener);
-    return () => socket.removeEventListener("message", messageListener);
-  }, [socket, userId]);
+    personals.sort(sortFn);
+    Object.values(services).forEach((g) => g.conversations.sort(sortFn));
 
-  // const isEmpty =
-  //   activeTab === "personal"
-  //     ? conversations.personalChats.length === 0
-  //     : Object.keys(conversations.groupedServiceChats).length === 0;
+    setPersonalChats(personals);
+    setServiceChats(services);
+  }, [participantGroups]);
 
+  // -------- Search filtering --------
   const lowerSearch = searchTerm?.toLowerCase().trim();
 
-// Filter personal chats
-const filteredPersonalChats = !lowerSearch
-  ? conversations.personalChats
-  : conversations.personalChats.filter((convo) =>
-      convo.participantDetails?.some((p: any) =>
+  const filteredPersonal = useMemo(() => {
+    if (!lowerSearch) return personalChats;
+    return personalChats.filter((c) =>
+      c.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]);
 
-// 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)
-    );
+  // -------- Flatten into ONE list --------
+  const rows: Row[] = useMemo(() => {
+    const out: Row[] = [];
 
-// Improved empty state logic
-const showPersonalTab = activeTab === "personal" && filteredPersonalChats.length > 0;
-const showServiceTab = activeTab === "service" && Object.keys(filteredGroupedServiceChats).length > 0;
-const isEmpty = !showPersonalTab && !showServiceTab;
-  
+    if (activeTab === "personal") {
+      filteredPersonal.forEach((c) =>
+        out.push({ type: "conversation", conversation: c })
+      );
+    }
 
-  // Calculate unread counts for tabs
-  const personalUnreadCount = conversations.personalChats.reduce(
-    (total, convo) => total + (convo.unreadMessageCount || 0),
-    0
-  );
+    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 })
+        );
+      });
+    }
 
-  const serviceUnreadCount = Object.values(conversations.groupedServiceChats)
-    .flatMap(group => group.conversations)
-    .reduce((total, convo) => total + (convo.unreadMessageCount || 0), 0);
+    return out;
+  }, [activeTab, filteredPersonal, filteredService]);
 
+  // -------- Virtualizer --------
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) =>
+      rows[index]?.type === "service-header" ? HEADER_HEIGHT : ROW_HEIGHT,
+    overscan: 10,
+  });
+
+  // -------- UI --------
   return (
-    <div className="chatSidebarConversations">
-      {/* Tab Navigation */}
-      <div className="flex border-b border-gray-200">
+    <div className="flex flex-col h-full">
+      {/* Tabs */}
+      <div className="flex border-b">
         <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"
-          }`}
+          className={`flex-1 py-3 ${activeTab === "personal" ? "border-b-2 border-primary" : ""}`}
           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"
-          }`}
+          className={`flex-1 py-3 ${activeTab === "service" ? "border-b-2 border-primary" : ""}`}
           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>
-        ) : (
-          <>
-            {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>
-                  )
+      {/* 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} />
                 )}
               </div>
-            )}
-          </>
-        )}
+            );
+          })}
+        </div>
       </div>
     </div>
   );
-};
-
-export default Conversations;
+}