@pubuduth-aplicy/chat-ui 2.2.4 → 2.2.6

package/package.json

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

@@ -17,7 +17,7 @@ export const Chat = () => {
         const parsed = JSON.parse(event.data);
 
         if (parsed.event === "newMessage") {
-          const message = parsed.data;
+          const message = parsed.data.data;
           // Send delivery confirmation
           // Update UI immediately
           setMessages((prev) => [...prev, message]);

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/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,19 +61,19 @@ 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
     };
 
     const handleInProgress = () => {
       console.log("Booking started (In Progress)");
-      window.location.href = `/booking/all`;
+      window.location.href = `/booking/all#${message.meta?.bookingDetails?.bookingId}`;
       // Update booking status to InProgress
     };
 
     const handleComplete = () => {
       console.log("Booking completed!");
-      window.location.href = `/booking/all`;
+      window.location.href = `/booking/all#${message.meta?.bookingDetails?.bookingId}`;
       // Update booking status to Completed
     };
 
@@ -82,7 +83,7 @@ const Message = ({ message }: MessageProps) => {
         window.location.href = `/customer/customer-reviews`;
       } else if (role === "provider") {
         console.log("Navigate to review page for provider → customer");
-        window.location.href = `/booking/all`;
+        window.location.href = `/booking/all#${message.meta?.bookingDetails?.bookingId}`;
       }
     };
 
@@ -544,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 (
@@ -641,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>
             )}