@pubuduth-aplicy/chat-ui 2.1.94 → 2.1.96

package/package.json

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

@@ -6,9 +6,10 @@ const SystemNotice = () => (
       margin: "1rem",
       backgroundColor: "#f9f9f9",
       fontSize: "14px",
+      textAlign: "center",
     }}>
       <strong style={{ display: "block", marginBottom: "0.5rem", textAlign:"center", fontSize:"smaller" }}>🛡 WE HAVE YOUR BACK</strong>
-      <p style={{fontSize:"x-small"}}>For added safety and your protection, keep payments and communications within Hirepanther. 
+      <p style={{fontSize:"x-small", textAlign:"center"}}>For added safety and your protection, keep payments and communications within Hirepanther. 
         {/* <a href="#">Learn more</a> */}
       </p>
     </div>

package/src/components/common/VirtualizedChatList.tsx

@@ -29,9 +29,6 @@ const VirtualizedChatList = ({ conversations }: Props) => {
         overflow: "auto",
       }}
     >
-      {/* {virtualizer.getVirtualItems().map((item) => {
-        const conversation = conversations[item.index];
-        return ( */}
       <div
         // key={item.key}
         style={{
@@ -65,8 +62,6 @@ const VirtualizedChatList = ({ conversations }: Props) => {
           );
         })}
       </div>
-      {/* ); */}
-      {/* })} */}
     </div>
   );
 };

package/src/components/messages/Message.tsx

@@ -356,7 +356,7 @@ const Message = ({ message }: MessageProps) => {
                   <div className="circular-progress-container">
                     <div className="media-preview-background">
                       <img
-                        src={`${`${cdnUrl}${media.url}`}`}
+                        src={`${cdnUrl}${media.url}`}
                         alt={media.name}
                         className="blurred-preview"
                       />
@@ -409,32 +409,13 @@ const Message = ({ message }: MessageProps) => {
                       }
                     />
                   ) : media.type === "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">
+                      <source
+                        src={`${cdnUrl}${media.url}`}
+                        type={`video/${`${cdnUrl}${media.url}`.split(".").pop()}`}
+                      />
+                    </video>
                   ) : (
-                    // <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" && "📄"}
@@ -455,7 +436,7 @@ const Message = ({ message }: MessageProps) => {
                         cancelDownload();
                       } else {
                         handleDownload(
-                          `${cdnUrl}/${media.url}`,
+                          `${cdnUrl}${media.url}`,
                           media.name,
                           index
                         );

package/src/components/sidebar/Conversations.tsx

@@ -34,54 +34,52 @@ 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]>();
-
-    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: [],
-          });
+  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);
         }
-        
-        const existing = allServiceChatsMap.get(serviceGroup.serviceId)!;
-        existing.conversations.push(...serviceGroup.conversations);
+
+        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()
+        );
 
-    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);
+      });
 
-    sortConversations(allPersonalChats);
-    allServiceChatsMap.forEach((value) => {
-      sortConversations(value.conversations);
-    });
+      const result = {
+        personalChats: allPersonalChats,
+        groupedServiceChats: Object.fromEntries(allServiceChatsMap),
+      };
 
-    const result = {
-      personalChats: allPersonalChats,
-      groupedServiceChats: Object.fromEntries(allServiceChatsMap),
+      return result;
     };
 
-    return result;
-  };
-
-  setConversations(processConversations(participantGroups));
-}, [participantGroups]);
+    setConversations(processConversations(participantGroups));
+  }, [participantGroups]);
 
   // Real-time update listeners
   useEffect(() => {
@@ -111,7 +109,9 @@ const Conversations = () => {
 
         const personalIndex = personalChats.findIndex((c) => c._id === chatId);
         if (personalIndex >= 0) {
-          personalChats[personalIndex] = updateRead(personalChats[personalIndex]);
+          personalChats[personalIndex] = updateRead(
+            personalChats[personalIndex]
+          );
           return { personalChats, groupedServiceChats };
         }
 
@@ -232,38 +232,41 @@ const Conversations = () => {
 
   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)
-    );
+  // Filter personal chats
+  const filteredPersonalChats = !lowerSearch
+    ? conversations.personalChats
+    : conversations.personalChats.filter((convo) =>
+        convo.participantDetails?.some((p: any) =>
+          p?.name?.toLowerCase().includes(lowerSearch)
+        )
+      );
 
-// Improved empty state logic
-const showPersonalTab = activeTab === "personal" && filteredPersonalChats.length > 0;
-const showServiceTab = activeTab === "service" && Object.keys(filteredGroupedServiceChats).length > 0;
-const isEmpty = !showPersonalTab && !showServiceTab;
-  
+  // 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(
@@ -272,7 +275,7 @@ const isEmpty = !showPersonalTab && !showServiceTab;
   );
 
   const serviceUnreadCount = Object.values(conversations.groupedServiceChats)
-    .flatMap(group => group.conversations)
+    .flatMap((group) => group.conversations)
     .reduce((total, convo) => total + (convo.unreadMessageCount || 0), 0);
 
   return (
@@ -312,41 +315,43 @@ const isEmpty = !showPersonalTab && !showServiceTab;
       </div>
 
       {/* Tab Content */}
-      <div className="flex-1 overflow-auto">
+      <div className="flex-1 h-[550px] 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." 
+              {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 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>
@@ -354,4 +359,4 @@ const isEmpty = !showPersonalTab && !showServiceTab;
   );
 };
 
-export default Conversations;
+export default Conversations;