@pubuduth-aplicy/chat-ui 2.1.74 → 2.1.75

package/package.json

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

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

@@ -24,7 +24,7 @@ const CollapsibleSection = ({
         className="flex justify-between items-center p-2 cursor-pointer hover:bg-gray-50"
         onClick={toggleOpen}
       >
-        <p className="text-xs uppercase">{title}</p>
+        <p className="text-xs uppercase text-gray-900 dark:text-gray-200">{title}</p>
         <ChevronDown
           size={20}
           className={`transform transition-transform duration-200 ${
@@ -32,7 +32,7 @@ const CollapsibleSection = ({
           }`}
         />
       </div>
-      {isOpen && <div className="p-2">{children}</div>}
+      {isOpen && <div className="p-2 text-gray-900 dark:text-gray-200">{children}</div>}
     </div>
   );
 };

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>
     );
   }
@@ -194,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);
@@ -224,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(
@@ -320,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"
                       />
@@ -365,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>
                   ) : (
@@ -397,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"}
@@ -490,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.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 ||
@@ -533,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>
                   )
                 )}
 
@@ -541,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

@@ -120,13 +120,13 @@ 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>
@@ -138,7 +138,7 @@ const MessageContainer = () => {
                 <img
                   className="chatMessageContainerInnerImg"
                   alt="Profile"
-                  src={participant?.profilePic}
+                  src={participant?.profilePicture}
                 />
               )}
               <div className="chatMessageContainerOutter">
@@ -155,7 +155,7 @@ const MessageContainer = () => {
                   ) : (
                     <>
                       <p className="chatMessageContainerOutterDiv_name">
-                        {participant?.firstname || ""}
+                        {participant?.name || ""}
                       </p>
                       <p className="text-sm">
                         {isOnline ? "Online" : "Offline"}

package/src/components/messages/MessageInput.tsx

@@ -67,7 +67,8 @@ const MessageInput = () => {
       });
     }
   }, [selectedConversation?._id, socket, sendMessage]);
-
+  console.log('selected', selectedConversation);
+  
   useEffect(() => {
     // Clear all input state when conversation changes
     setMessage("");
@@ -192,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;
@@ -225,18 +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 participantDetails = Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation?.participantDetails
+    : [selectedConversation?.participantDetails].filter(Boolean);
 
-    const otherParticipant = selectedConversation?.participantDetails?.find(
-    (p:any) => p._id !== userId
+  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();
@@ -531,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
@@ -574,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}
@@ -679,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}

package/src/components/sidebar/Conversation.tsx

@@ -16,32 +16,10 @@ const Conversation = ({ conversation }: ConversationProps) => {
   );
   const { userId } = useChatContext();
 
-  // This should return the other participant
   const participant = conversation.participantDetails?.find(
     (p:any) => p._id !== userId
   );
 
-
-  // const handleSelectConversation = () => {
-  //   console.log("Selected Conversation Data:", JSON.stringify(conversation, null, 2));
-  //   setSelectedConversation(conversation);
-
-  //   const unreadMessages = conversation.unreadMessageIds || [];
-  //   if (unreadMessages.length > 0 && socket?.readyState === WebSocket.OPEN) {
-  //     console.log('unread meassge',unreadMessages);
-
-  //     const message = {
-  //       event: "messageRead",
-  //       data: {
-  //         messageIds: unreadMessages,
-  //         senderId: participant?._id,
-  //         chatId: conversation._id,
-  //       },
-  //     };
-  //     socket.send(JSON.stringify(message));
-  //   }
-  // };
-
   const handleSelectConversation = () => {
     console.log(
       "Selected Conversation Data:",
@@ -62,7 +40,6 @@ const Conversation = ({ conversation }: ConversationProps) => {
         },
       };
       socket.send(JSON.stringify(message));
-      //  updateConversationReadStatus(conversation._id, unreadMessageIds);
     }
   };
 
@@ -87,7 +64,6 @@ const Conversation = ({ conversation }: ConversationProps) => {
     };
   }, [socket, setOnlineUsers]);
 
-  // Temporary debug in your component
   useEffect(() => {
     console.log("Current conversation state:", conversation);
   }, [conversation]);
@@ -98,7 +74,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
   const conversationName =
     conversation.type === "service" && conversation.bookingId
       ? `Booking #${conversation.bookingId}`
-      : participant?.firstname || "Conversation";
+      : participant?.name || "Conversation";
 
   const lastMessageTimestamp = new Date(
     conversation.lastMessage?.updatedAt || conversation.lastMessage?.createdAt
@@ -123,7 +99,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           <>
             <img
               className="w-10 h-10 rounded-full"
-              src={participant?.profilePic}
+              src={participant?.profilePicture}
               alt="User Avatar"
             />
             <span
@@ -150,7 +126,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           </div>
           {/* <span className="text-xs text-gray-500">{lastMessageTimestamp}</span> */}
         </div>
-        <p className="text-xs text-gray-600 truncate">
+        <p className="text-xs text-gray-600 truncate dark:text-gray-500">
           {conversation.lastMessage?.status === "deleted"
             ? "This message was deleted"
             : conversation.lastMessage?.media?.length > 0

package/src/components/sidebar/Conversations.tsx

@@ -245,7 +245,7 @@ const Conversations = () => {
   );
 
   return (
-    <div className="chatSidebarConversations">
+    <div className="chatSidebarConversations" style={{height:'100%'}}>
       {isEmpty ? (
         <div className="flex flex-col items-center justify-center p-8 text-center">
           <h3 className="text-xl font-semibold mb-1">No Conversations</h3>
@@ -255,7 +255,14 @@ const Conversations = () => {
         </div>
       ) : (
         <>
-          {filteredGeneralChats.length > 0 && (
+         <div 
+          className="overflow-y-auto"
+          style={{ 
+            maxHeight: 'calc(5 * 5rem)', // Adjust 3.5rem to match your chat item height
+            scrollbarWidth: 'thin'
+          }}
+        >
+           {filteredGeneralChats.length > 0 && (
             <CollapsibleSection title="General Chats">
               <VirtualizedChatList conversations={filteredGeneralChats} />
             </CollapsibleSection>
@@ -278,7 +285,9 @@ const Conversations = () => {
                 )
               )}
             </CollapsibleSection>
-          )}
+          )} 
+        </div>
+        
         </>
       )}
     </div>

package/src/components/sidebar/SearchInput.tsx

@@ -18,8 +18,8 @@ const SearchInput = () => {
   };
   return (
     <>
-      <div className="chatSidebarSearchbar">
-        <div className="chatSidebarSearchbarContainer">
+      <div className="chatSidebarSearchbar bg-{FFFFFF} dark:bg-gray-800 text-gray-900 dark:text-gray-300">
+        <div className="chatSidebarSearchbarContainer  bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-300">
           <img src={searchicon} className="chatSidebarSearchbarImg" />
           <input
             className="chatSidebarInput"

package/src/hooks/useMessageStatus.ts

@@ -6,7 +6,6 @@ export const useMessageStatus = () => {
     const { socket,userId } = useChatContext();
     const { messages, setMessages, selectedConversation } = useChatUIStore();
 
-    // Handle status updates from server
     useEffect(() => {
         if (!socket) return;
 
@@ -19,7 +18,6 @@ export const useMessageStatus = () => {
                     
                     setMessages(prev => prev.map(msg => {
                         if (msg._id === messageId) {
-                            // Only update if new status is higher priority
                             const statusOrder = ['sent', 'delivered', 'read'];
                             const currentIdx = statusOrder.indexOf(msg.status);
                             const newIdx = statusOrder.indexOf(status);
@@ -40,7 +38,6 @@ export const useMessageStatus = () => {
         return () => socket.removeEventListener('message', handleStatusUpdate);
     }, [socket, setMessages]);
 
-    // Send delivery confirmations for visible messages
     useEffect(() => {
         if (!socket || !selectedConversation) return;
 
@@ -67,14 +64,12 @@ export const useMessageStatus = () => {
             { threshold: 0.7 }
         );
 
-        // Observe all messages in current chat
         const messageElements = document.querySelectorAll('[data-message-id]');
         messageElements.forEach(el => observer.observe(el));
 
         return () => observer.disconnect();
     }, [messages, socket, selectedConversation]);
 
-    // Mark messages as read when chat is active
     useEffect(() => {
         if (!socket || !selectedConversation) return;
 

package/src/providers/ChatProvider.tsx

@@ -9,6 +9,7 @@ import React, {
   useCallback,
 } from "react";
 import { getChatConfig } from "../Chat.config";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 interface ChatProviderProps {
   userId: string;
@@ -26,6 +27,7 @@ interface ChatContextType {
 }
 
 const ChatContext = createContext<ChatContextType | null>(null);
+const queryClient = new QueryClient();
 
 export const ChatProvider: React.FC<ChatProviderProps> = ({
   userId,
@@ -131,18 +133,20 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   );
 
   return (
-    <ChatContext.Provider
-      value={{
-        socket,
-        userId,
-        onlineUsers,
-        sendMessage,
-        isConnected,
-        isUserOnline,
-      }}
-    >
-      {children}
-    </ChatContext.Provider>
+    <QueryClientProvider client={queryClient}>
+      <ChatContext.Provider
+        value={{
+          socket,
+          userId,
+          onlineUsers,
+          sendMessage,
+          isConnected,
+          isUserOnline,
+        }}
+      >
+        {children}
+      </ChatContext.Provider>
+    </QueryClientProvider>
   );
 };
 

package/src/service/messageService.ts

@@ -46,11 +46,11 @@ export const fetchMessages = async (chatId: string | undefined, userid: string,
     const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`, {
       params: { pagenum, limit: 20 },
     });
-    console.log(response); // Check the full response
-    return response.data; // Ensure 'data' exists or adjust accordingly
+    console.log(response); 
+    return response.data; 
   } catch (error) {
     console.error("Error fetching messages:", error);
-    return []; // Return a default empty array on error
+    return []; 
   }
 };
 
@@ -89,7 +89,7 @@ export const deleteMessage = async ({
     const response = await apiClient.delete(
       `${Path.deleteMessage}/${messageId}`,
       {
-        data: { userId } // Sending userId in the request body
+        data: { userId } 
       }
     );
     return response.data;

package/src/service/sidebarApi.ts

@@ -9,19 +9,16 @@ export const getAllConversationData = async (userid: string) => {
   try {
     const {role} = getChatConfig();
     const apiClient = getApiClient();
-    //create common variable and assign the value of role
-    // check if the user is an admin
-    //create url for admon and user
+   
     const endpoint = role === 'admin' 
         ? `${Path.getConversationListByAdmin}` 
         : `${Path.getconversation}/${userid}`;
-    //create url for admon and user
+
     const res = await apiClient.get<ApiResponse>(endpoint);
     if (res.data) {
       console.log("API Response: ", res.data);
       
     }
-    // Access conversations with participant details from the API response
     const  conversationsWithParticipantDetails  = res.data.serviceInfo;
     console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
     

package/src/style/style.css

@@ -1813,4 +1813,96 @@
   height: 100%;
   background: rgba(0, 0, 0, 0.2);
   /* z-index: 1; */
+}
+
+.confirm-button {
+  background: linear-gradient(135deg, #2AA8A6, #1E9C9A);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.confirm-button:hover {
+  background: linear-gradient(135deg, #1E9C9A, #168A88);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.confirm-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.confirm-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  transition: 0.5s;
+}
+
+.confirm-button:hover::before {
+  left: 100%;
+}
+
+.confirm-button svg {
+  transition: transform 0.3s ease;
+}
+
+.confirm-button:hover svg {
+  transform: scale(1.1);
+}
+
+
+.message-option-btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.message-option-btn[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Tooltip styles */
+.message-option-btn {
+  position: relative;
+  overflow: hidden;
+}
+
+.message-option-btn:hover::before {
+  content: attr(title);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #333;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 10;
+  margin-bottom: 5px;
+}
+
+.message-option-btn.disabled:hover::before {
+  background: #666;
 }

package/src/ChatWindow.tsx

@@ -1,15 +0,0 @@
-// import { ChatWindowProps } from "./types/type";
-
-
-// export const ChatWindow: React.FC<ChatWindowProps> = ({ userId}) => {
-//     // const { messages, sendMessage, sendFile } = useChat(userId);
-//     // const [file, setFile] = useState<File | null>(null);
-
-//     return (
-//         <div className="w-full max-w-lg border p-4 rounded-lg shadow-lg bg-white">
-//             <MessageList messages={messages} />
-//             <FileUploader file={file} setFile={setFile} onUpload={sendFile} />
-//             <MessageInput onSend={sendMessage} />
-//         </div>
-//     );
-// };