@pubuduth-aplicy/chat-ui 2.1.73 → 2.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.73",
+  "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/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

@@ -101,6 +101,7 @@ const Message = ({ message }: MessageProps) => {
   // 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 Message = ({ message }: MessageProps) => {
             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>

package/src/components/messages/MessageContainer.tsx

@@ -1,22 +1,17 @@
-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,
-    setMessages,
-  } = useChatUIStore();
-  const { socket, sendMessage, isUserOnline } = useChatContext();
+  const { selectedConversation, setSelectedConversation, setOnlineUsers } =
+    useChatUIStore();
+  const { socket, isUserOnline } = useChatContext();
   const { role } = getChatConfig();
-  const [joinedChats, setJoinedChats] = useState<Set<string>>(new Set());
-
   //   useEffect(() => {
   //   if (!socket) return;
 
@@ -66,42 +61,58 @@ const MessageContainer = () => {
 
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
-      const chatId = selectedConversation._id;
-      const unreadMessages = selectedConversation.unreadMessageIds || [];
-
-      console.log("Unread messages:", unreadMessages);
-
-      if (unreadMessages.length > 0) {
-        sendMessage({
-          event: "messageRead",
+      // Send joinChat command to server via WebSocket
+      socket.send(
+        JSON.stringify({
+          event: "joinChat",
           data: {
-            messageIds: unreadMessages,
-            chatId: chatId,
+            chatId: selectedConversation._id,
           },
-        });
-      }
-      // }
+        })
+      );
     }
-  }, [
-    selectedConversation?._id,
-    socket,
-    selectedConversation?.unreadMessageIds,
-    sendMessage,
-    joinedChats,
-  ]);
+  }, [selectedConversation?._id, socket]);
+
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        console.log("Parsed WebSocket message in mc:", data);
+
+        if (data.event === "getOnlineUsers") {
+          setOnlineUsers(data.payload); // payload should be an array of user IDs
+        }
+      } catch (err) {
+        console.error("Failed to parse WebSocket message", err);
+      }
+    };
+
+    socket.addEventListener("message", handleMessage);
+
+    return () => {
+      socket.removeEventListener("message", handleMessage);
+    };
+  }, [socket, setOnlineUsers]);
 
   // Listen for online users updates
 
-  role === "admin" && Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation.participantDetails[1]?.profilePic
-    : !Array.isArray(selectedConversation?.participantDetails)
-    ? selectedConversation?.participantDetails?.profilePic
-    : undefined;
+  const { userId } = useChatContext();
+
+  // const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+  //   ? selectedConversation?.participantDetails
+  //   : [selectedConversation?.participantDetails].filter(Boolean);
 
-  const isOnline =
-    !Array.isArray(selectedConversation?.participantDetails) &&
-    !!selectedConversation?.participantDetails?._id &&
-    isUserOnline(selectedConversation.participantDetails._id);
+  // 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(() => {
@@ -119,29 +130,38 @@ 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">{isOnline ? "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>

package/src/components/messages/MessageInput.tsx

@@ -1,8 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useMessageMutation } from "../../hooks/mutations/useSendMessage";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
-import paperplane from "../../assets/icons8-send-50.png";
 import { FilePreview, FileType } from "../common/FilePreview";
 import { getApiClient } from "../../lib/api/apiClient";
 import { MessageStatus } from "../../types/type";
@@ -44,6 +44,7 @@ const MessageInput = () => {
   const mutation = useMessageMutation();
   const [typingUser, setTypingUser] = useState<string | null>(null);
   const [isSending, setIsSending] = useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isTyping, setIsTyping] = useState(false);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [showAttachmentOptions, setShowAttachmentOptions] = useState(false);
@@ -55,7 +56,6 @@ const MessageInput = () => {
   const typingTimeoutRef = useRef<number | null>(null);
   const generateTempId = () =>
     `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
   // Join chat room when conversation is selected
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
@@ -68,6 +68,20 @@ const MessageInput = () => {
     }
   }, [selectedConversation?._id, socket, sendMessage]);
 
+  useEffect(() => {
+    // Clear all input state when conversation changes
+    setMessage("");
+    setMessage1("");
+    setAttachments([]);
+    setInputError(null);
+    setShowAttachmentOptions(false);
+
+    // Clean up any existing file input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [selectedConversation?._id]);
+
   // Typing indicator logic
   useEffect(() => {
     if (!socket || !selectedConversation?._id) return;
@@ -211,6 +225,18 @@ const MessageInput = () => {
     });
   };
 
+  // const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+  //   ? selectedConversation?.participantDetails
+  //   : [selectedConversation?.participantDetails].filter(Boolean);
+
+  // const otherParticipant = participantDetails.find(
+  //   (p: any) => p._id !== userId
+  // );
+
+    const otherParticipant = selectedConversation?.participantDetails?.find(
+    (p:any) => p._id !== userId
+  );
+
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
@@ -294,14 +320,31 @@ const MessageInput = () => {
 
         const successfulUploads = uploadedFiles.filter((file) => file !== null);
 
+        if (!otherParticipant?._id) {
+          console.error("Cannot send message: receiver ID is missing.");
+          setIsSending(false);
+          return;
+        }
+
         mutation.mutate(
           {
-            chatId:
-              !Array.isArray(selectedConversation?.participantDetails) &&
-              selectedConversation?.participantDetails._id,
+            receiverId: otherParticipant._id,
             senderId: userId,
             message: message1,
             attachments: successfulUploads,
+            bookingId:
+              selectedConversation?.type === "service"
+                ? selectedConversation?.bookingId
+                : undefined,
+            serviceTitle:
+              selectedConversation?.type === "service"
+                ? selectedConversation?.title
+                : undefined,
+            type: selectedConversation?.type,
+            serviceId:
+              selectedConversation?.type === "service"
+                ? selectedConversation?.serviceId
+                : undefined,
           },
           {
             onSuccess: (data) => {
@@ -328,9 +371,7 @@ const MessageInput = () => {
                   messageId: data[1]._id,
                   attachments: successfulUploads,
                   senderId: userId,
-                  receiverId:
-                    !Array.isArray(selectedConversation?.participantDetails) &&
-                    selectedConversation?.participantDetails._id,
+                  receiverId: otherParticipant._id,
                 },
               });
             },
@@ -677,9 +718,7 @@ const MessageInput = () => {
 
         {typingUser &&
           typingUser !== userId &&
-          typingUser ===
-            (!Array.isArray(selectedConversation?.participantDetails) &&
-              selectedConversation?.participantDetails?._id) &&
+          typingUser === otherParticipant?._id &&
           !isSending && (
             <div className="typingIndicator">
               <div className="typing-loader">

package/src/components/messages/Messages.tsx

@@ -21,6 +21,7 @@ const Messages = () => {
       fetchMessages(selectedConversation?._id, userId, pageParam),
     getNextPageParam: (lastPage) => lastPage.nextPage,
     initialPageParam: 1,
+    enabled: !!selectedConversation?._id, // Prevent fetching if no conversation is selected
   });
 
   // Handle infinite scroll
@@ -45,7 +46,15 @@ const Messages = () => {
         const parsed = JSON.parse(event.data);
         console.log("Parsed WebSocket message1:", parsed);
         if (parsed.type === "newMessage" || parsed.event === "newMessage") {
-          const newMessage = parsed.message;
+          const newMessage = parsed.data;
+          if (!newMessage) {
+            console.warn(
+              "Received newMessage event without a message payload",
+              parsed
+            );
+            return;
+          }
+
           newMessage.shouldShake = true;
 
           setMessages((prevMessages) => {
@@ -61,7 +70,7 @@ const Messages = () => {
           });
         }
 
-        const statusOrder = ["sent", "delivered", "read"];
+        const statusOrder = ["sent", "delivered", "read", "edited", "deleted"];
         if (parsed.event === "messageStatusUpdated") {
           const { messageId, status } = parsed.data || {};
           if (!messageId) {
@@ -69,22 +78,58 @@ const Messages = () => {
             return;
           }
 
-          console.log(`Updating status for ${messageId} to ${status}`);
           setMessages((prev) =>
             prev.map((msg) => {
               if (msg._id !== messageId) return msg;
 
-              // Only update if new status is higher than current status
               const currentIdx = statusOrder.indexOf(msg.status);
               const newIdx = statusOrder.indexOf(status);
+              if (newIdx === -1 || currentIdx === -1 || newIdx <= currentIdx)
+                return msg;
+
+              if (newIdx > currentIdx) {
+                console.log(`Updating status for ${messageId} to ${status}`);
+                return { ...msg, status };
+              }
 
-              return {
-                ...msg,
-                status: newIdx > currentIdx ? status : msg.status,
-              };
+              return msg; // No update if new status isn't higher
             })
           );
         }
+
+        if (parsed.event === "messageEdited") {
+          console.log("Received messageEdited event:", parsed);
+
+          const updatedMessage = parsed.data;
+          if (!updatedMessage || !updatedMessage.messageId) return;
+
+          setMessages((prevMessages) =>
+            prevMessages.map((msg) =>
+              msg._id === updatedMessage.messageId
+                ? { ...msg, message: updatedMessage.message, status: "edited" }
+                : msg
+            )
+          );
+        }
+
+        if (parsed.event === "messageDeleted") {
+          console.log("Received messageDeleted event:", parsed);
+
+          const { messageId } = parsed.data || {};
+          if (!messageId) return;
+
+          setMessages((prevMessages) =>
+            prevMessages.map((msg) =>
+              msg._id === messageId
+                ? {
+                    ...msg,
+                    message: "This message was deleted",
+                    status: "deleted",
+                  }
+                : msg
+            )
+          );
+        }
       } catch (error) {
         console.error("Error parsing WebSocket message:", error);
       }
@@ -97,56 +142,41 @@ const Messages = () => {
     };
   }, [socket, selectedConversation?._id, setMessages, userId]);
 
-  const sendDeliveryConfirmation = (messageId: string) => {
-    if (!socket) return;
-
-    const message = {
-      event: "confirmDelivery",
-      data: {
-        messageId,
-      },
-
-      // timestamp: Date.now()
-    };
-
-    socket.send(JSON.stringify(message));
-  };
-
   // Scroll to bottom when messages change
   useEffect(() => {
     if (messages.length > 0) {
       setTimeout(() => {
         lastMessageRef.current?.scrollIntoView({
           behavior: "smooth",
-          block: "end",
+          block: "nearest",
         });
       }, 100);
     }
   }, [messages.length]);
 
   // Track message visibility for read receipts
-  useEffect(() => {
-    if (!socket || !messages.length) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            const messageId = entry.target.getAttribute("data-message-id");
-            if (messageId) {
-              sendDeliveryConfirmation(messageId);
-            }
-          }
-        });
-      },
-      { threshold: 0.5 }
-    );
-
-    const messageElements = document.querySelectorAll("[data-message-id]");
-    messageElements.forEach((el) => observer.observe(el));
-
-    return () => observer.disconnect();
-  }, [messages, socket]);
+  // useEffect(() => {
+  //   if (!socket || !messages.length) return;
+
+  //   const observer = new IntersectionObserver(
+  //     (entries) => {
+  //       entries.forEach((entry) => {
+  //         if (entry.isIntersecting) {
+  //           const messageId = entry.target.getAttribute("data-message-id");
+  //           if (messageId) {
+  //             sendDeliveryConfirmation(messageId);
+  //           }
+  //         }
+  //       });
+  //     },
+  //     { threshold: 0.5 }
+  //   );
+
+  //   const messageElements = document.querySelectorAll("[data-message-id]");
+  //   messageElements.forEach((el) => observer.observe(el));
+
+  //   return () => observer.disconnect();
+  // }, [messages, socket]);
 
   return (
     <div