@pubuduth-aplicy/chat-ui 2.1.71 → 2.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.71",
+  "version": "2.1.74",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.67.2",
+    "@tanstack/react-virtual": "^3.13.12",
     "axios": "^1.8.2",
     "lucide-react": "^0.514.0",
     "react": "^19.0.0",

package/src/components/Chat.tsx

@@ -5,35 +5,48 @@ import { Sidebar } from "./sidebar/Sidebar";
 import { useChatContext } from "../providers/ChatProvider";
 
 export const Chat = () => {
-  const {  messages, setMessages, updateMessageStatus } =
-    useChatUIStore();
-  const { socket } = useChatContext();
+  const { setMessages, updateMessageStatus } = useChatUIStore();
+
+  const { socket, sendMessage } = useChatContext();
 
   useEffect(() => {
     if (!socket) return;
 
     const handleMessage = (event: MessageEvent) => {
       try {
-        const data = JSON.parse(event.data);
-        
-        if (data.type === "receiveMessage") {
-          setMessages([...messages, { ...data.message, status: "sent" }]);
-        }
+        const parsed = JSON.parse(event.data);
+        console.log("Parsed WebSocket message:", parsed);
+
+        if (parsed.event === "newMessage") {
+          const message = parsed.data;
+          console.log(
+            "📨 Message received at:",
+            message.createdAt,
+            "from:",
+            message
+          );
+          // Send delivery confirmation
+          // Update UI immediately
+          setMessages((prev) => [...prev, message]);
+          sendMessage({
+            event: "confirmDelivery",
+            data: {
+              messageIds: [message._id],
+              chatId: message.conversationId, // make sure this is sent from backend
+            },
+          });
 
-        if (data.type === "messageDelivered") {
-          updateMessageStatus(data.messageId, "delivered");
+          // Optional: update UI
+          updateMessageStatus(message._id, "delivered");
         }
       } catch (error) {
-        console.error("Error parsing WebSocket message:", error);
+        console.error("WebSocket message parse error:", error);
       }
     };
 
     socket.addEventListener("message", handleMessage);
-
-    return () => {
-      socket.removeEventListener("message", handleMessage);
-    };
-  }, [socket, messages, setMessages, updateMessageStatus]);
+    return () => socket.removeEventListener("message", handleMessage);
+  }, [socket, setMessages, sendMessage, updateMessageStatus]);
 
   return (
     <div className="container mx-auto mb-5">
@@ -47,4 +60,4 @@ export const Chat = () => {
       </div>
     </div>
   );
-};
+};

package/src/components/common/CollapsibleSection.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+interface CollapsibleSectionProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+const CollapsibleSection = ({
+  title,
+  children,
+  defaultOpen = true,
+}: CollapsibleSectionProps) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const toggleOpen = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="border-b border-gray-200">
+      <div
+        className="flex justify-between items-center p-2 cursor-pointer hover:bg-gray-50"
+        onClick={toggleOpen}
+      >
+        <p className="text-xs uppercase">{title}</p>
+        <ChevronDown
+          size={20}
+          className={`transform transition-transform duration-200 ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </div>
+      {isOpen && <div className="p-2">{children}</div>}
+    </div>
+  );
+};
+
+export default CollapsibleSection;

package/src/components/common/VirtualizedChatList.tsx

@@ -0,0 +1,57 @@
+import { useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import Conversation from "../sidebar/Conversation";
+import { Conversation as ConversationType } from "../../types/type";
+
+interface Props {
+  conversations: ConversationType[];
+}
+
+const ITEM_HEIGHT = 60;
+
+const VirtualizedChatList = ({ conversations }: Props) => {
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: conversations.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ITEM_HEIGHT,
+    overscan: 5,
+  });
+
+  return (
+    <div
+      ref={parentRef}
+      style={{
+        height: `${virtualizer.getTotalSize()}px`,
+        width: "100%",
+        position: "relative",
+        overflow: "auto",
+      }}
+    >
+      {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>
+  );
+};
+
+export default VirtualizedChatList;

package/src/components/messages/Message.tsx

@@ -11,27 +11,27 @@ import { useDeleteMessageMutation } from "../../hooks/mutations/useDeleteMessage
 import { useEffect, useRef, useState } from "react";
 
 interface MessageProps {
- message: {
-    _id?: string
-    senderId: string
-    message: string
-    status: MessageStatus
-    createdAt: any
-    updatedAt: any
+  message: {
+    _id?: string;
+    senderId: string;
+    message: string;
+    status: MessageStatus;
+    createdAt: any;
+    updatedAt: any;
     media?: {
-      type: FileType
-      url: string
-      name: string
-      size: number
-      uploadProgress?: number
-      uploadError: string | null
-    }[]
-    isUploading?: boolean
-    isEdited?: boolean
-    isDeleted?: boolean
-    onEdit?: (messageId: string, newMessage: string) => void
-    onDelete?: (messageId: string) => void
-    type?: 'user' | 'system' | 'system-completion';
+      type: FileType;
+      url: string;
+      name: string;
+      size: number;
+      uploadProgress?: number;
+      uploadError: string | null;
+    }[];
+    isUploading?: boolean;
+    isEdited?: boolean;
+    isDeleted?: boolean;
+    onEdit?: (messageId: string, newMessage: string) => void;
+    onDelete?: (messageId: string) => void;
+    type?: "user" | "system" | "system-completion";
     meta?: {
       bookingDetails?: {
         serviceId: string;
@@ -41,8 +41,8 @@ interface MessageProps {
         // Add other booking details as needed
       };
       reviewLink?: string;
-  }
-}
+    };
+  };
 }
 
 const Message = ({ message }: MessageProps) => {
@@ -91,8 +91,8 @@ const Message = ({ message }: MessageProps) => {
   const { mutate: editMessage } = useEditMessageMutation();
   const [editedMessage, setEditedMessage] = useState("");
   const [isEditingMode, setIsEditingMode] = useState(false);
-const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutation();
-
+  const { mutate: deleteMessage, isPending: isDeleting } =
+    useDeleteMessageMutation();
 
   useEffect(() => {
     setLocalStatus(message.status);
@@ -101,6 +101,7 @@ const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutatio
   // const handleDownload = (url: string, name: string) => {
   //   saveAs(url, name);
   // };
+  console.log("check message status", message.status);
 
   const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
   const [downloadProgress, setDownloadProgress] = useState<number>(0);
@@ -499,7 +500,7 @@ const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutatio
             fromMe && !showDeleteOption && setShowOptions(false)
           }
         >
-          {message.isDeleted ? (
+          {message.status === "deleted" ? (
             <div className="chat-bubble compact-bubble deleted-message">
               <div className="message-text">This message was deleted</div>
             </div>
@@ -565,7 +566,9 @@ const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutatio
                               onClick={handleDeleteClick}
                             >
                               <Trash2 size={16} />
-                              <span>{isDeleting ? 'Deleting...' : 'Delete'}</span>
+                              <span>
+                                {isDeleting ? "Deleting..." : "Delete"}
+                              </span>
                             </button>
                           </div>
                         )}
@@ -576,25 +579,23 @@ const { mutate: deleteMessage, isPending: isDeleting } = useDeleteMessageMutatio
             )
           )}
           <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",
-              })
-            )}
+            {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",
+                })}
             <span className="status-icon">{getStatusIcon()}</span>
           </div>
         </div>

package/src/components/messages/MessageContainer.tsx

@@ -1,47 +1,91 @@
-import { useEffect, useState } from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { MessageSquare } from "lucide-react";
+import { useEffect } from "react";
 import MessageInput from "./MessageInput";
 import Messages from "./Messages";
 import useChatUIStore from "../../stores/Zustant";
 import { useChatContext } from "../../providers/ChatProvider";
-import { getChatConfig } from "@pubuduth-aplicy/chat-ui";
+import { getChatConfig } from "../../Chat.config";
 
 const MessageContainer = () => {
-  const {
-    selectedConversation,
-    setSelectedConversation,
-    onlineUsers,
-    setOnlineUsers,
-  } = useChatUIStore();
-  const { socket, sendMessage } = useChatContext();
-  const {role}= getChatConfig()
-  const [joinedChats, setJoinedChats] = useState<Set<string>>(new Set());
+  const { selectedConversation, setSelectedConversation, setOnlineUsers } =
+    useChatUIStore();
+  const { socket, isUserOnline } = useChatContext();
+  const { role } = getChatConfig();
+  //   useEffect(() => {
+  //   if (!socket) return;
+
+  //   const handleMessage = (event) => {
+  //     try {
+  //       const parsed = JSON.parse(event.data);
+
+  //      if (parsed.event === 'newMessage') {
+  //   const message = parsed.data;
+  //   console.log('Received message:', message);
+
+  //   if (selectedConversation?._id !== message.chatId) return;
+
+  //   const messageId = message._id || message.messageId;
+  //   console.log('Message ID for unread:', messageId);
+
+  //   if (!messageId) {
+  //     console.warn('Message has no _id or messageId, skipping unread tracking');
+  //     return;
+  //   }
+
+  //   const updatedUnread = [
+  //     ...(selectedConversation?.unreadMessageIds || []),
+  //     messageId,
+  //   ];
+
+  //   console.log('Updated unreadMessageIds:', updatedUnread);
+
+  //   setSelectedConversation({
+  //     ...selectedConversation,
+  //     unreadMessageIds: updatedUnread,
+  //   });
+  // }
+
+  //       // Handle other events...
+
+  //     } catch (error) {
+  //       console.error("WebSocket message parse error:", error);
+  //     }
+  //   };
+
+  //   socket.addEventListener("message", handleMessage);
+  //   return () => socket.removeEventListener("message", handleMessage);
+  // }, [socket, setMessages, selectedConversation, setSelectedConversation]);
 
   // Join chat room when conversation is selected
+
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
-      const chatId = selectedConversation._id;
-      if (!joinedChats.has(chatId)) {
-        sendMessage({
-          type: "joinChat",
-          chatId: chatId,
-        });
-        setJoinedChats(new Set(joinedChats).add(chatId));
-      }
+      // Send joinChat command to server via WebSocket
+      socket.send(
+        JSON.stringify({
+          event: "joinChat",
+          data: {
+            chatId: selectedConversation._id,
+          },
+        })
+      );
     }
-  }, [selectedConversation?._id, socket, sendMessage, joinedChats]);
+  }, [selectedConversation?._id, socket]);
 
-  // Listen for online users updates
   useEffect(() => {
     if (!socket) return;
 
     const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
-        if (data.type === "getOnlineUsers") {
-          setOnlineUsers(data.users);
+        console.log("Parsed WebSocket message in mc:", data);
+
+        if (data.event === "getOnlineUsers") {
+          setOnlineUsers(data.payload); // payload should be an array of user IDs
         }
-      } catch (error) {
-        console.error("Error parsing message:", error);
+      } catch (err) {
+        console.error("Failed to parse WebSocket message", err);
       }
     };
 
@@ -52,17 +96,23 @@ const MessageContainer = () => {
     };
   }, [socket, setOnlineUsers]);
 
-   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.profilePic
-    : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.profilePic
-      : undefined;
+  // Listen for online users updates
+
+  const { userId } = useChatContext();
 
-  const isUserOnline =
-  !Array.isArray(selectedConversation?.participantDetails) &&
-  !!selectedConversation?.participantDetails?._id &&
-  onlineUsers?.includes(selectedConversation.participantDetails._id);
+  // const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+  //   ? selectedConversation?.participantDetails
+  //   : [selectedConversation?.participantDetails].filter(Boolean);
 
+  // const participant = participantDetails.find(
+  //   (p: any) => p._id !== userId
+  // );
+
+  const participant = selectedConversation?.participantDetails?.find(
+    (p: any) => p._id !== userId
+  );
+  
+  const isOnline = isUserOnline(participant?._id || "");
 
   // Cleanup on unmount
   useEffect(() => {
@@ -80,38 +130,45 @@ const MessageContainer = () => {
               <button className="chatMessageContainerInnerDiv_button">
                 {/* <CaretLeft size={25} /> */}
               </button>
-              <img
-                className="chatMessageContainerInnerImg"
-                alt="Profile"
-                src={
-                   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.profilePic
-    : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.profilePic
-      : undefined
-                }
-              />
+              {selectedConversation.type === "service" ? (
+                <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+                  <MessageSquare size={24} className="text-gray-600" />
+                </div>
+              ) : (
+                <img
+                  className="chatMessageContainerInnerImg"
+                  alt="Profile"
+                  src={participant?.profilePic}
+                />
+              )}
               <div className="chatMessageContainerOutter">
                 <div className="chatMessageContainerOutterDiv">
-                  <p className="chatMessageContainerOutterDiv_name">
-                     {role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.firstname
-    : !Array.isArray(selectedConversation?.participantDetails)
-      ? selectedConversation?.participantDetails?.firstname
-      : undefined
-                      }
-                  </p>
-                  <p className="text-sm">
-                    {isUserOnline ? "Online" : "Offline"}
-                  </p>
+                  {selectedConversation.type === "service" ? (
+                    <>
+                      <p className="chatMessageContainerOutterDiv_name">
+                        {selectedConversation.serviceTitle}
+                      </p>
+                      <p className="text-sm">
+                        Booking ID: #{selectedConversation.bookingId}
+                      </p>
+                    </>
+                  ) : (
+                    <>
+                      <p className="chatMessageContainerOutterDiv_name">
+                        {participant?.firstname || ""}
+                      </p>
+                      <p className="text-sm">
+                        {isOnline ? "Online" : "Offline"}
+                      </p>
+                    </>
+                  )}
                 </div>
               </div>
             </div>
           </div>
 
           <Messages />
-          {role !== 'admin'&& (<MessageInput />)}
-
+          {role !== "admin" && <MessageInput />}
         </>
       )}
     </div>
@@ -213,4 +270,4 @@ const EmptyInbox: React.FC<EmptyInboxProps> = ({
       <p className="text-gray-500 max-w-sm">{description}</p>
     </div>
   );
-};
+};