@pubuduth-aplicy/chat-ui 2.1.83 → 2.1.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.83",
+  "version": "2.1.84",
   "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/messages/MessageContainer.tsx

@@ -102,7 +102,7 @@ const MessageContainer = () => {
                 <div className="chatMessageContainerOutterDiv">
                   {selectedConversation.type === "service" ? (
                     <>
-                      <p className="chatMessageContainerOutterDiv_name">
+                      <p className="chatMessageContainerOutterDiv_name truncate xs:line-clamp-1">
                         {selectedConversation.serviceTitle}
                       </p>
                       <p className="text-sm">

package/src/components/messages/MessageInput.tsx

@@ -38,7 +38,7 @@ interface Attachment {
 
 const MessageInput = () => {
   const apiClient = getApiClient();
-  const {role} = getChatConfig();
+  const { role } = getChatConfig();
   const { socket, sendMessage, userId } = useChatContext();
   const { selectedConversation, setMessages } = useChatUIStore();
   const [message, setMessage] = useState("");
@@ -60,7 +60,9 @@ const MessageInput = () => {
     `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   // Join chat room when conversation is selected
 
-  const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+  const participantDetails = Array.isArray(
+    selectedConversation?.participantDetails
+  )
     ? selectedConversation?.participantDetails
     : [selectedConversation?.participantDetails].filter(Boolean);
 
@@ -78,7 +80,7 @@ const MessageInput = () => {
       });
     }
   }, [selectedConversation?._id, socket, sendMessage]);
-  
+
   useEffect(() => {
     // Clear all input state when conversation changes
     setMessage("");
@@ -203,7 +205,7 @@ const MessageInput = () => {
     const response = await apiClient.post(`${Path.preSignUrl}`, {
       fileName: file.name,
       fileType: file.type,
-      conversationId: selectedConversation?._id
+      conversationId: selectedConversation?._id,
     });
 
     const { signedUrl, fileUrl } = await response.data;
@@ -237,8 +239,6 @@ const MessageInput = () => {
     });
   };
 
-  
-
   //   const otherParticipant = selectedConversation?.participantDetails?.find(
   //   (p:any) => p._id !== userId
   // );
@@ -355,7 +355,7 @@ const MessageInput = () => {
                 ? selectedConversation?.serviceId
                 : undefined,
             senderRole: role,
-            receiverRole: role === 'customer' ? 'provider' : 'customer',
+            receiverRole: role === "customer" ? "provider" : "customer",
           },
           {
             onSuccess: (data) => {
@@ -704,27 +704,29 @@ const MessageInput = () => {
             }}
           />
 
-          <button
-            type="submit"
-            className="chatMessageInputSubmit"
-            disabled={!!inputError || isSending}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="icon"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#ffffff"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+          <div>
+            <button
+              type="submit"
+              className="chatMessageInputSubmit"
+              disabled={!!inputError || isSending}
             >
-              <line x1="22" y1="2" x2="11" y2="13"></line>
-              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-            </svg>
-          </button>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="icon"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#ffffff"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="22" y1="2" x2="11" y2="13"></line>
+                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+              </svg>
+            </button>
+          </div>
         </div>
 
         {typingUser &&

package/src/components/sidebar/Conversations.tsx

@@ -30,51 +30,54 @@ const Conversations = () => {
   }>({ personalChats: [], groupedServiceChats: {} });
 
   // Process fetched data
-  useEffect(() => {
-    if (!participantGroups) return;
-
-    const processConversations = (groups: ParticipantGroup[]) => {
-      const allPersonalChats: ConversationType[] = [];
-      const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
+ 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);
+      }
 
-      groups.forEach((group) => {
-        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: [],
+          });
         }
-
-        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 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 sortConversations = (convos: ConversationType[]) =>
+      convos.sort(
+        (a, b) =>
+          new Date(b.lastMessage?.createdAt || b.updatedAt).getTime() -
+          new Date(a.lastMessage?.createdAt || a.updatedAt).getTime()
       );
 
-      return {
-        personalChats: allPersonalChats,
-        groupedServiceChats: Object.fromEntries(allServiceChatsMap),
-      };
+    sortConversations(allPersonalChats);
+    allServiceChatsMap.forEach((value, key) => {
+      sortConversations(value.conversations);
+    });
+
+    const result = {
+      personalChats: allPersonalChats,
+      groupedServiceChats: Object.fromEntries(allServiceChatsMap),
     };
 
-    setConversations(processConversations(participantGroups));
-  }, [participantGroups]);
+    return result;
+  };
+
+  setConversations(processConversations(participantGroups));
+}, [participantGroups]);
 
   // Real-time update listeners
   useEffect(() => {
@@ -218,35 +221,45 @@ const Conversations = () => {
     return () => socket.removeEventListener("message", messageListener);
   }, [socket, userId]);
 
-  const isEmpty =
-    activeTab === "personal"
-      ? conversations.personalChats.length === 0
-      : Object.keys(conversations.groupedServiceChats).length === 0;
+  // const isEmpty =
+  //   activeTab === "personal"
+  //     ? conversations.personalChats.length === 0
+  //     : Object.keys(conversations.groupedServiceChats).length === 0;
 
   const lowerSearch = searchTerm?.toLowerCase().trim();
 
-  const filteredPersonalChats = conversations.personalChats.filter((convo) =>
-    convo.participantDetails?.some((p: any) =>
-      typeof p === "string"
-        ? p.toLowerCase().includes(lowerSearch)
-        : p.name?.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
-  );
+// 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(