@pubuduth-aplicy/chat-ui 2.2.3 → 2.2.5

package/package.json

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

@@ -35,8 +35,7 @@ const CollapsibleSection = ({
         />
       </div>
       {isOpen && (
-        <div className="p-2 text-gray-900 dark:text-gray-200"
-        style={{height:"400px"}}>{children}</div>
+        <div className="p-2 text-gray-900 dark:text-gray-200">{children}</div>
       )}
     </div>
   );

package/src/components/common/SystemNotice.tsx

@@ -1,5 +1,6 @@
 const SystemNotice = () => (
-    <div style={{
+  <div
+    style={{
       padding: "1rem",
       border: "1px solid #ddd",
       borderRadius: "8px",
@@ -7,12 +8,33 @@ const SystemNotice = () => (
       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", textAlign:"center"}}>For added safety and your protection, keep payments and communications within Hirepanther. 
-        {/* <a href="#">Learn more</a> */}
-      </p>
+    }}
+  >
+    <div
+      style={{
+        fontSize: "32px", // 🔥 control icon size here
+        lineHeight: 1,
+        marginBottom: "0.25rem",
+      }}
+    >
+      🛡
     </div>
-  );
-  export default SystemNotice;
-  
+
+    <strong
+      style={{
+        display: "block",
+        marginBottom: "0.5rem",
+        fontSize: "12px",
+        letterSpacing: "0.5px",
+      }}
+    >
+      WE HAVE YOUR BACK
+    </strong>
+
+    <p style={{ fontSize: "11px", margin: 0 }}>
+      For added safety and your protection, keep payments and communications
+      within Hirepanther.
+    </p>
+  </div>
+);
+export default SystemNotice;

package/src/components/common/VirtualizedChatList.tsx

@@ -23,7 +23,7 @@ const VirtualizedChatList = ({ conversations }: Props) => {
     <div
       ref={parentRef}
       style={{
-        height: `400px`,
+        // height: `400px`,
         width: "100%",
         // position: "relative",
         overflow: "auto",

package/src/components/messages/Message.tsx

@@ -37,6 +37,7 @@ interface MessageProps {
     type?: "user" | "system" | "system-completion";
     meta?: {
       bookingDetails?: {
+        bookingId: string;
         status: string; // e.g., "confirmed", "pending", "cancelled"
         serviceId: string;
         date: string;
@@ -60,7 +61,7 @@ const Message = ({ message }: MessageProps) => {
 
     const handleConfirm = () => {
       console.log("Booking confirmed!");
-      window.location.href = `/booking/all`;
+      window.location.href = `/booking/all#${message.meta?.bookingDetails?.bookingId}`;
       // Update booking status to Confirmed
     };
 
@@ -420,7 +421,10 @@ const Message = ({ message }: MessageProps) => {
                       <div className="file-icon">
                         {media.type === "document" && "📄"}
                       </div>
-                      <div className="file-info">
+                      <div className="file-info"
+                       onClick={() =>
+                        window.open(`${cdnUrl}${media.url}`, "_blank")
+                      }>
                         <span className="file-name">{media.name}</span>
                         <span className="file-size">
                           {(media.size / 1024).toFixed(1)} KB
@@ -541,6 +545,40 @@ const Message = ({ message }: MessageProps) => {
     return now.getTime() - messageDate.getTime() > oneDayInMs;
   };
 
+    const formatLastMessageTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+
+    const isToday = date.toDateString() === now.toDateString();
+
+    const yesterday = new Date();
+    yesterday.setDate(now.getDate() - 1);
+
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+
+    if (isToday) {
+      return date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    }
+
+    if (isYesterday) {
+      return "Yesterday";
+    }
+
+    // MM/DD format
+    return date.toLocaleDateString("en-US", {
+      month: "2-digit",
+      day: "2-digit",
+    });
+  };
+
+  const messageTime =
+  message.status === "deleted" || message.status === "edited"
+    ? message.updatedAt
+    : message.createdAt;
+
   const hasMedia = message.media && message.media.length > 0;
 
   return (
@@ -638,23 +676,7 @@ const Message = ({ message }: MessageProps) => {
             )
           )}
           <div className={`${timestamp}`}>
-            {message.status === "deleted"
-              ? // Show deleted timestamp if message is deleted
-                new Date(message.updatedAt).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })
-              : message.status === "edited"
-              ? // Show updated timestamp if message was edited
-                new Date(message.updatedAt).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })
-              : // Default to created timestamp
-                new Date(message.createdAt).toLocaleTimeString([], {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                })}
+            {formatLastMessageTime(messageTime)}
             <span className="status-icon">{getStatusIcon()}</span>
           </div>
         </div>

package/src/components/sidebar/Conversation.tsx

@@ -8,19 +8,16 @@ import { getChatConfig } from "../../Chat.config";
 import defaultProfilePicture from "../../assets/pngegg.png";
 
 const Conversation = ({ conversation }: ConversationProps) => {
-  const {
-    setSelectedConversation,
-    setOnlineUsers,
-  } = useChatUIStore();
-  const { socket, isUserOnline, } = useChatContext();
+  const { setSelectedConversation, setOnlineUsers } = useChatUIStore();
+  const { socket, isUserOnline } = useChatContext();
   const selectedConversation = useChatUIStore(
     (state) => state.selectedConversation
   );
   const { userId } = useChatContext();
-   const { role } = getChatConfig();
+  const { role } = getChatConfig();
 
   const participant = conversation.participantDetails?.find(
-    (p:any) => p._id !== userId
+    (p: any) => p._id !== userId
   );
 
   const handleSelectConversation = () => {
@@ -81,12 +78,40 @@ const Conversation = ({ conversation }: ConversationProps) => {
       ? `Booking #${conversation.bookingId}`
       : participant?.name || "Conversation";
 
-  const lastMessageTimestamp = new Date(
-    conversation.lastMessage?.updatedAt || conversation.lastMessage?.createdAt || conversation.createdAt
-  ).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
+  const formatLastMessageTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+
+    const isToday = date.toDateString() === now.toDateString();
+
+    const yesterday = new Date();
+    yesterday.setDate(now.getDate() - 1);
+
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+
+    if (isToday) {
+      return date.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    }
+
+    if (isYesterday) {
+      return "Yesterday";
+    }
+
+    // MM/DD format
+    return date.toLocaleDateString("en-US", {
+      month: "2-digit",
+      day: "2-digit",
+    });
+  };
+
+  const lastMessageTimestamp = formatLastMessageTime(
+    conversation.lastMessage?.updatedAt ||
+      conversation.lastMessage?.createdAt ||
+      conversation.createdAt
+  );
 
   return (
     <div
@@ -104,7 +129,11 @@ const Conversation = ({ conversation }: ConversationProps) => {
           <>
             <img
               className="w-10 h-10 rounded-full"
-              src={participant?.profilePicture ? participant?.profilePicture: defaultProfilePicture}
+              src={
+                participant?.profilePicture
+                  ? participant?.profilePicture
+                  : defaultProfilePicture
+              }
               alt="User Avatar"
             />
             <span
@@ -121,7 +150,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           </p>
           <div className="flex items-center gap-2">
             {unreadCount > 0 && (
-             <span className="background text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+              <span className="background text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                 {unreadCount}
               </span>
             )}