@pubuduth-aplicy/chat-ui 2.1.68 → 2.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.68",
+  "version": "2.1.69",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",
@@ -14,6 +14,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.67.2",
     "axios": "^1.8.2",
+    "lucide-react": "^0.514.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-intersection-observer": "^9.16.0",

package/src/components/Chat.tsx

@@ -4,74 +4,47 @@ import MessageContainer from "./messages/MessageContainer";
 import { Sidebar } from "./sidebar/Sidebar";
 import { useChatContext } from "../providers/ChatProvider";
 
-// import MessageContainer from './components/messages/MessageContainer'
-// import useConversation from '../../zustand/useConversation';
-
 export const Chat = () => {
-  const { selectedConversation, messages, setMessages, updateMessageStatus } =
+  const {  messages, setMessages, updateMessageStatus } =
     useChatUIStore();
   const { socket } = useChatContext();
+
   useEffect(() => {
-    socket.on("receiveMessage", (messageData) => {
-      setMessages([...messages, { ...messageData, status: "sent" }]);
-    });
+    if (!socket) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        
+        if (data.type === "receiveMessage") {
+          setMessages([...messages, { ...data.message, status: "sent" }]);
+        }
+
+        if (data.type === "messageDelivered") {
+          updateMessageStatus(data.messageId, "delivered");
+        }
+      } catch (error) {
+        console.error("Error parsing WebSocket message:", error);
+      }
+    };
 
-    socket.on("messageDelivered", ({ messageId }) => {
-      updateMessageStatus(messageId, "delivered");
-    });
+    socket.addEventListener("message", handleMessage);
 
     return () => {
-      socket.off("receiveMessage");
-      socket.off("messageDelivered");
+      socket.removeEventListener("message", handleMessage);
     };
-  }, [messages, setMessages, updateMessageStatus]);
+  }, [socket, messages, setMessages, updateMessageStatus]);
+
   return (
-    <>
-      <div className="container mx-auto mb-5">
-        <div className="grid-container">
-          {selectedConversation ? (
-            <>
-              <div className={`sidebarContainer`}>
-                <Sidebar />
-              </div>
-              <div className="messageContainer">
-                <MessageContainer />
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="sidebarContainer">
-                <Sidebar />
-              </div>
-              <div className="messageContainer">
-                <MessageContainer />
-              </div>
-            </>
-          )}
+    <div className="container mx-auto mb-5">
+      <div className="grid-container">
+        <div className={`sidebarContainer`}>
+          <Sidebar />
+        </div>
+        <div className="messageContainer">
+          <MessageContainer />
         </div>
       </div>
-    </>
+    </div>
   );
-};
-
-// const MessageBody = () => {
-
-//     return (
-//         <><div className='flex-grow px-8 pt-8 text-left text-gray-700 overflow-y-auto'>
-// 			<div className="relative mb-6 text-left">
-// 				<div className="text-gray-700">
-// 					<div className="absolute inset-x-0 top-0">
-// 						<img src="/images/fR71TFZIDTv2jhvKsOMhC.png" alt className="float-right inline-block h-6 w-6 sm:h-12 sm:w-12 rounded-full" />
-// 					</div>
-// 					<div className="relative float-right mr-8 sm:mr-16 inline-block rounded-md bg-blue-700 py-3 px-4 text-white">
-// 						<p className="text-sm">Hi, John</p>
-// 					</div>
-// 				</div>
-// 				<div className="clear-both flex text-gray-700" />
-// 			</div>
-// 		</div><div className="relative mt-4  flex items-start border-t  border-gray-300 sm:p-8 py-4 text-left  text-gray-700">
-// 				<input placeholder="Your Message" className="mr-4 overflow-hidden w-full flex-1 cursor-text resize-none whitespace-pre-wrap rounded-md bg-white text-sm py-2 sm:py-0 font-normal text-gray-600 opacity-70 shadow-none outline-none focus:text-gray-600 focus:opacity-100" defaultValue={""} />
-// 				<button className="relative  inline-flex h-10 w-auto flex-initial cursor-pointer items-center justify-center self-center  rounded-md bg-blue-700 px-6 text-center align-middle text-sm font-medium text-white outline-none focus:ring-2">Send</button>
-// 			</div></>
-//     );
-// };
+};

package/src/components/messages/Message.tsx

@@ -1,10 +1,15 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MessageStatus } from "../../types/type";
 import { useChatContext } from "../../providers/ChatProvider";
-import { useEffect, useState } from "react";
 import { FileType } from "../common/FilePreview";
 import { getChatConfig } from "../../Chat.config";
 import { Path } from "../../lib/api/endpoint";
+import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"
+import { useEditMessageMutation } from "../../hooks/mutations/useEditMessage";
+import { useDeleteMessageMutation } from "../../hooks/mutations/useDeleteMessage"
+import { useEffect, useRef, useState } from "react";
+
 
 interface MessageProps {
   message: {
@@ -22,17 +27,72 @@ interface MessageProps {
       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;
+        date: string;
+        time: string;
+        price: number;
+        // Add other booking details as needed
+      };
+      reviewLink?: string;
+    };
   };
 }
 
 const Message = ({ message }: MessageProps) => {
   const { userId } = useChatContext();
    const { apiUrl } = getChatConfig();
+
+ if (message.type === 'system') {
+    return (
+      <div className="system-message booking-details">
+        <h4>Booking Confirmed</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>
+      </div>
+    );
+  }
+
+  if (message.type === 'system-completion') {
+    return (
+      <div className="system-message completion-notice">
+        <p>Service completed successfully!</p>
+        <button 
+          onClick={() => window.location.href = message.meta?.reviewLink || '#'}
+          className="review-button"
+        >
+          Leave a Review
+        </button>
+      </div>
+    );
+  }
+
+
+
   const fromMe = message.senderId === userId;
   const timestamp = fromMe ? "timestamp_outgoing" : "timestamp_incomeing";
   const alignItems = fromMe ? "outgoing" : "incoming";
   const [localStatus, setLocalStatus] = useState(message.status);
-  const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
+
+const [showOptions, setShowOptions] = useState(false)
+  const [showDeleteOption, setShowDeleteOption] = useState(false)
+  const editInputRef = useRef<HTMLInputElement>(null)
+  const optionsRef = useRef<HTMLDivElement>(null)
+  const { mutate: editMessage} = useEditMessageMutation();
+  const [editedMessage, setEditedMessage] = useState('');
+  const [isEditingMode, setIsEditingMode] = useState(false);
+  const { mutate: deleteMessage} = useDeleteMessageMutation();
+
 
   useEffect(() => {
     setLocalStatus(message.status);
@@ -42,7 +102,7 @@ const Message = ({ message }: MessageProps) => {
   //   saveAs(url, name);
   // };
 
-  // const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null)
+  const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null)
   const [downloadProgress, setDownloadProgress] = useState<number>(0)
   const [downloadController, setDownloadController] = useState<AbortController | null>(null)
 
@@ -309,15 +369,120 @@ const Message = ({ message }: MessageProps) => {
     );
   };
 
+
+  const handleEditClick = () => {
+    setIsEditingMode(true)
+    setShowOptions(false)
+    setTimeout(() => {
+      editInputRef.current?.focus()
+    }, 0)
+  }
+
+  const handleSaveEdit = () => {
+    if (message._id && editedMessage.trim() !== message.message) {
+      editMessage({
+        messageId: message._id ?? '',
+        userId: userId, // Using userId from useChatContext
+        newMessage: editedMessage.trim()
+      }, {
+        onSuccess: () => {
+          setIsEditingMode(false);
+          // Any additional success handling
+        },
+        onError: (error:any) => {
+          // Handle error specifically for this edit
+          console.error("Edit failed:", error);
+        }
+      });
+    } else {
+      setIsEditingMode(false);
+    }
+  }
+
+  const handleCancelEdit = () => {
+    setEditedMessage(message.message)
+    setIsEditingMode(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleSaveEdit()
+    } else if (e.key === "Escape") {
+      handleCancelEdit()
+    }
+  }
+
+  const handleDeleteClick = () => {
+    deleteMessage({
+      messageId: message._id ?? '',
+      userId: userId // Get this from your auth context
+    });
+  };
+
+
   return (
     <div className="chat-container">
       <div className={`message-row ${alignItems}`}>
-        <div className="bubble-container">
-          {(message.message || (message.media && message.media.length > 0)) && (
+        <div
+          className="bubble-container"
+          onMouseEnter={() => fromMe && setShowOptions(true)}
+          onMouseLeave={() => fromMe && !showDeleteOption && setShowOptions(false)}
+        >
+          {message.isDeleted ? (
+            <div className="chat-bubble compact-bubble deleted-message">
+              <div className="message-text">This message was deleted</div>
+            </div>
+          ) : (message.message || (message.media && message.media.length > 0)) && (
             <div className="chat-bubble compact-bubble">
               {renderMedia()}
-              {message.message && (
-                <div className="message-text">{message.message}</div>
+              {isEditingMode ? (
+                <div className="edit-message-container">
+                  <input
+                    ref={editInputRef}
+                    type="text"
+                    value={editedMessage}
+                    onChange={(e) => setEditedMessage(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    className="edit-message-input"
+                  />
+                  <div className="edit-actions">
+                    <button className="save-edit" onClick={handleSaveEdit}>
+                      Save
+                    </button>
+                    <button className="cancel-edit" onClick={handleCancelEdit}>
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                message.message && <div className="message-text">{message.message}</div>
+              )}
+
+              {/* Message options for outgoing messages */}
+              {fromMe && showOptions && !isEditingMode && !message.isDeleted && (
+                <div className="message-options">
+                  <button className="message-option-btn edit-btn" onClick={handleEditClick} title="Edit">
+                    <Pencil size={16} />
+                  </button>
+                  <div className="more-options-container" ref={optionsRef}>
+                    <button
+                      className="message-option-btn more-btn"
+                      onClick={() => setShowDeleteOption(!showDeleteOption)}
+                      title="More options"
+                    >
+                      <MoreHorizontal size={16} />
+                    </button>
+
+                    {showDeleteOption && (
+                      <div className="delete-option">
+                        <button className="delete-btn" onClick={handleDeleteClick}>
+                          <Trash2 size={16} />
+                          <span>Delete</span>
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                </div>
               )}
             </div>
           )}
@@ -326,6 +491,7 @@ const Message = ({ message }: MessageProps) => {
               hour: "2-digit",
               minute: "2-digit",
             })}
+            {message.isEdited && !message.isDeleted && <span className="edited-label">edited</span>}
             <span className="status-icon">{getStatusIcon()}</span>
           </div>
         </div>

package/src/components/messages/MessageContainer.tsx

@@ -1,11 +1,9 @@
-import { useEffect } from "react";
-// import useConversation from "../../zustand/useConversation";
+import { useEffect, useState } from "react";
 import MessageInput from "./MessageInput";
 import Messages from "./Messages";
 import useChatUIStore from "../../stores/Zustant";
 import { useChatContext } from "../../providers/ChatProvider";
-// import { Chat, CaretLeft } from "@phosphor-icons/react";
-// import { useAuthContext } from "../../context/AuthContext";
+import { getChatConfig } from "@pubuduth-aplicy/chat-ui";
 
 const MessageContainer = () => {
   const {
@@ -14,34 +12,60 @@ const MessageContainer = () => {
     onlineUsers,
     setOnlineUsers,
   } = useChatUIStore();
-  const { socket } = useChatContext();
+  const { socket, sendMessage } = useChatContext();
+  const {role}= getChatConfig()
+  const [joinedChats, setJoinedChats] = useState<Set<string>>(new Set());
 
+  // Join chat room when conversation is selected
   useEffect(() => {
-    if (selectedConversation?._id && socket) {
-      socket.emit("joinChat", selectedConversation._id); // Join chat room
+    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));
+      }
     }
-  }, [selectedConversation?._id, socket]);
+  }, [selectedConversation?._id, socket, sendMessage, joinedChats]);
 
+  // Listen for online users updates
   useEffect(() => {
     if (!socket) return;
 
-    const handleOnlineUsers = (users: string[]) => {
-      setOnlineUsers(users);
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "getOnlineUsers") {
+          setOnlineUsers(data.users);
+        }
+      } catch (error) {
+        console.error("Error parsing message:", error);
+      }
     };
 
-    socket.on("getOnlineUsers", handleOnlineUsers);
+    socket.addEventListener("message", handleMessage);
 
     return () => {
-      socket.off("getOnlineUsers", handleOnlineUsers);
+      socket.removeEventListener("message", handleMessage);
     };
   }, [socket, setOnlineUsers]);
 
+   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation.participantDetails[1]?.profilePic
+    : !Array.isArray(selectedConversation?.participantDetails)
+      ? selectedConversation?.participantDetails?.profilePic
+      : undefined;
+
   const isUserOnline =
-    selectedConversation?.participantDetails?._id &&
-    onlineUsers?.includes(selectedConversation.participantDetails._id);
+  !Array.isArray(selectedConversation?.participantDetails) &&
+  !!selectedConversation?.participantDetails?._id &&
+  onlineUsers?.includes(selectedConversation.participantDetails._id);
+
 
+  // Cleanup on unmount
   useEffect(() => {
-    // cleanup function (unmounts)
     return () => setSelectedConversation(null);
   }, [setSelectedConversation]);
 
@@ -60,44 +84,34 @@ const MessageContainer = () => {
                 className="chatMessageContainerInnerImg"
                 alt="Profile"
                 src={
-                  selectedConversation.participantDetails?.profilePic ||
-                  selectedConversation.participantDetails?.idpic
+                   role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation.participantDetails[1]?.profilePic
+    : !Array.isArray(selectedConversation?.participantDetails)
+      ? selectedConversation?.participantDetails?.profilePic
+      : undefined
                 }
               />
               <div className="chatMessageContainerOutter">
                 <div className="chatMessageContainerOutterDiv">
                   <p className="chatMessageContainerOutterDiv_name">
-                    {selectedConversation.participantDetails.firstname}
+                     {role === 'admin' && Array.isArray(selectedConversation?.participantDetails)
+    ? selectedConversation.participantDetails[1]?.firstname
+    : !Array.isArray(selectedConversation?.participantDetails)
+      ? selectedConversation?.participantDetails?.firstname
+      : undefined
+                      }
                   </p>
-                  <p className="text-sm ">
+                  <p className="text-sm">
                     {isUserOnline ? "Online" : "Offline"}
                   </p>
                 </div>
               </div>
-              {/* <h4 className=" inline-block py-2 text-left font-sans font-semibold normal-case">Lara Abegnale</h4> */}
             </div>
           </div>
 
-          {/* <div className="h-14 overflow-x-hidden">
-                        <div className="top-0 h-14 px-4 py-4 w-full border-b border-gray-300 justify-start items-start gap-2 inline-flex sticky  z-10">
-                            <div className="grow shrink basis-0 self-stretch py-2 justify-start items-center gap-4 flex">
-                                <button onClick={() => setSelectedConversation(null)} className="text-blue-500 md:hidden">
-                                    <CaretLeft size={25} />
-                                </button>
-                                <img className="w-10 h-10 rounded-circle" src={selectedConversation.profile} alt="Profile" />
-                                <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
-                                    <div className="self-stretch justify-start items-center inline-flex">
-                                        <div className="grow shrink basis-0 text-slate-900 text-base font-semibold font-inter leading-tight">
-                                            {selectedConversation.username}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div> */}
-
           <Messages />
-          <MessageInput />
+          {role !== 'admin'&& (<MessageInput />)}
+
         </>
       )}
     </div>
@@ -106,6 +120,7 @@ const MessageContainer = () => {
 
 export default MessageContainer;
 
+// EmptyInbox component remains the same
 interface EmptyInboxProps {
   title?: string;
   description?: string;
@@ -198,4 +213,4 @@ const EmptyInbox: React.FC<EmptyInboxProps> = ({
       <p className="text-gray-500 max-w-sm">{description}</p>
     </div>
   );
-};
+};