@pubuduth-aplicy/chat-ui 2.1.73 → 2.1.75

package/package.json

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

@@ -2,6 +2,7 @@
 export interface ChatConfig {
     apiUrl: string;
     role?: string;
+    cdnUrl?: string;
   }
   
   let chatConfig: ChatConfig;

package/src/components/Chat.tsx

@@ -51,7 +51,7 @@ export const Chat = () => {
   return (
     <div className="container mx-auto mb-5">
       <div className="grid-container">
-        <div className={`sidebarContainer`}>
+        <div className={`sidebarContainer dark:bg-gray-800`}>
           <Sidebar />
         </div>
         <div className="messageContainer">

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 text-gray-900 dark:text-gray-200">{title}</p>
+        <ChevronDown
+          size={20}
+          className={`transform transition-transform duration-200 ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </div>
+      {isOpen && <div className="p-2 text-gray-900 dark:text-gray-200">{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

@@ -34,6 +34,7 @@ interface MessageProps {
     type?: "user" | "system" | "system-completion";
     meta?: {
       bookingDetails?: {
+        status: string; // e.g., "confirmed", "pending", "cancelled"
         serviceId: string;
         date: string;
         time: string;
@@ -47,18 +48,30 @@ interface MessageProps {
 
 const Message = ({ message }: MessageProps) => {
   const { userId } = useChatContext();
-  const { apiUrl } = getChatConfig();
+  const { apiUrl,cdnUrl } = getChatConfig();
 
   if (message.type === "system") {
     return (
       <div className="system-message booking-details">
-        <h4>Booking Confirmed</h4>
+        <h4>{message.meta?.bookingDetails?.status || 'Unknown'}</h4>
         <div className="details">
           <p>Service: {message.meta?.bookingDetails?.serviceId}</p>
           <p>Date: {message.meta?.bookingDetails?.date}</p>
           <p>Time: {message.meta?.bookingDetails?.time}</p>
           <p>Price: ${message.meta?.bookingDetails?.price}</p>
         </div>
+        <button
+          className="confirm-button"
+          onClick={() => {
+            // Add your confirmation logic here
+            console.log('Booking confirmed!');
+          }}
+        >
+          Confirm Booking
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
+          </svg>
+        </button>
       </div>
     );
   }
@@ -101,6 +114,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);
@@ -193,27 +207,6 @@ const Message = ({ message }: MessageProps) => {
     }
   };
 
-  // const handleDownload = async (url: string, name: string, index: number) => {
-  //   setDownloadingIndex(index);
-  //   try {
-  //     var xhr = new XMLHttpRequest()
-  //     xhr.open('HEAD', url, false)
-  //     xhr.send()
-  //     const blob = await response.blob();
-  //     const link = document.createElement("a");
-  //     link.href = URL.createObjectURL(blob);
-  //     link.download = name;
-  //     link.click();
-  //     URL.revokeObjectURL(link.href);
-  //   } catch (error) {
-  //     console.error("Download failed:", error);
-  //   } finally {
-  //     setDownloadingIndex(null);
-  //   }
-  // };
-
-  // const renderMedia = () => {
-  //   if (!message.media || message.media.length === 0) return null;
 
   const handleDownload = async (url: string, name: string, index: number) => {
     setDownloadingIndex(index);
@@ -223,7 +216,6 @@ const Message = ({ message }: MessageProps) => {
     setDownloadController(controller);
 
     try {
-      // First try to download directly
       try {
         const response = await fetch(
           `${apiUrl}${Path.apiProxy}?url=${encodeURIComponent(
@@ -319,7 +311,7 @@ const Message = ({ message }: MessageProps) => {
                   <div className="circular-progress-container">
                     <div className="media-preview-background">
                       <img
-                        src={media.url}
+                        src={`${cdnUrl}${`${cdnUrl}${media.url}`}`}
                         alt={media.name}
                         className="blurred-preview"
                       />
@@ -364,16 +356,16 @@ const Message = ({ message }: MessageProps) => {
                 <>
                   {media.type === "image" ? (
                     <img
-                      src={media.url}
+                      src={`${cdnUrl}${media.url}`}
                       alt={media.name}
                       className="media-content"
-                      onClick={() => window.open(media.url, "_blank")}
+                      onClick={() => window.open(`${cdnUrl}${media.url}`, "_blank")}
                     />
                   ) : media.type === "video" ? (
                     <video controls className="media-content">
                       <source
-                        src={media.url}
-                        type={`video/${media.url.split(".").pop()}`}
+                        src={`${cdnUrl}${media.url}`}
+                        type={`video/${`${cdnUrl}${media.url}`.split(".").pop()}`}
                       />
                     </video>
                   ) : (
@@ -396,7 +388,7 @@ const Message = ({ message }: MessageProps) => {
                       if (downloadingIndex === index) {
                         cancelDownload();
                       } else {
-                        handleDownload(media.url, media.name, index);
+                        handleDownload(`${cdnUrl}${media.url}`, media.name, index);
                       }
                     }}
                     title={downloadingIndex === index ? "Cancel" : "Download"}
@@ -489,19 +481,28 @@ const Message = ({ message }: MessageProps) => {
     }
   };
 
+  const isMessageOlderThanOneDay = (createdAt: string | Date) => {
+    const messageDate = new Date(createdAt);
+    const now = new Date();
+    const oneDayInMs = 24 * 60 * 60 * 1000;
+    return now.getTime() - messageDate.getTime() > oneDayInMs;
+  };
+
+    const hasMedia = message.media && message.media.length > 0;
+
   return (
     <div className="chat-container">
       <div className={`message-row ${alignItems}`}>
         <div
           className="bubble-container"
-          onMouseEnter={() => fromMe && setShowOptions(true)}
+          onMouseEnter={() => fromMe && !hasMedia && setShowOptions(true)}
           onMouseLeave={() =>
             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 className="message-text text-gray-900 dark:text-gray-100">This message was deleted</div>
             </div>
           ) : (
             (message.message ||
@@ -532,7 +533,7 @@ const Message = ({ message }: MessageProps) => {
                   </div>
                 ) : (
                   message.message && (
-                    <div className="message-text">{message.message}</div>
+                    <div className="message-text text-gray-900 dark:text-gray-100">{message.message}</div>
                   )
                 )}
 
@@ -540,7 +541,9 @@ const Message = ({ message }: MessageProps) => {
                 {fromMe &&
                   showOptions &&
                   !isEditingMode &&
-                  !message.isDeleted && (
+                  !message.isDeleted &&
+                  !hasMedia &&
+                  !isMessageOlderThanOneDay(message.createdAt) && (
                     <div className="message-options">
                       <button
                         className="message-option-btn edit-btn"

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(() => {
@@ -109,39 +120,48 @@ const MessageContainer = () => {
   }, [setSelectedConversation]);
 
   return (
-    <div className="chatMessageContainer">
+    <div className="chatMessageContainer bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-100">
       {!selectedConversation ? (
         <EmptyInbox />
       ) : (
         <>
-          <div className="chatMessageContainerInner">
-            <div className="chatMessageContainerInnerDiv">
+          <div className="chatMessageContainerInner bg-[FFFFFF] dark:bg-gray-800">
+            <div className="chatMessageContainerInnerDiv text-gray-900 dark:text-gray-200">
               <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?.profilePicture}
+                />
+              )}
               <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?.name || ""}
+                      </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) {
@@ -67,6 +67,21 @@ const MessageInput = () => {
       });
     }
   }, [selectedConversation?._id, socket, sendMessage]);
+  console.log('selected', selectedConversation);
+  
+  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(() => {
@@ -178,6 +193,7 @@ const MessageInput = () => {
     const response = await apiClient.post(`${Path.preSignUrl}`, {
       fileName: file.name,
       fileType: file.type,
+      conversationId: selectedConversation?._id
     });
 
     const { signedUrl, fileUrl } = await response.data;
@@ -211,6 +227,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 +322,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 +373,7 @@ const MessageInput = () => {
                   messageId: data[1]._id,
                   attachments: successfulUploads,
                   senderId: userId,
-                  receiverId:
-                    !Array.isArray(selectedConversation?.participantDetails) &&
-                    selectedConversation?.participantDetails._id,
+                  receiverId: otherParticipant._id,
                 },
               });
             },
@@ -490,7 +533,7 @@ const MessageInput = () => {
   };
 
   return (
-    <div className="message-input-container">
+    <div className="message-input-container bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-200">
       {attachments.length > 0 && (
         <div className="attachments-preview-container">
           <button
@@ -533,12 +576,12 @@ const MessageInput = () => {
         </div>
       )}
 
-      <form className="chatMessageInputform" onSubmit={handleSubmit}>
+      <form className="chatMessageInputform bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-200" onSubmit={handleSubmit}>
         {inputError && (
           <p style={{ color: "red", fontSize: "12px" }}>{inputError}</p>
         )}
 
-        <div className="chatMessageInputdiv">
+        <div className="chatMessageInputdiv bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-200">
           <input
             type="file"
             ref={fileInputRef}
@@ -638,7 +681,7 @@ const MessageInput = () => {
           </div>
 
           <textarea
-            className="chatMessageInput"
+            className="chatMessageInput bg-[#FFFFFF] dark:bg-gray-800 text-gray-900 dark:text-gray-300"
             placeholder="Send a message"
             value={message}
             onChange={handleChange}
@@ -677,9 +720,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">