@pubuduth-aplicy/chat-ui 2.1.71 → 2.1.74

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();
@@ -227,7 +253,7 @@ const MessageInput = () => {
         text: message1,
         message: message1,
         senderId: userId,
-        status: "sending" as MessageStatus,
+        status: "pending" as MessageStatus,
         createdAt: new Date().toISOString(),
         media: attachmentsRef.current.map((att) => ({
           type: att.type,
@@ -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) => {
@@ -321,15 +364,15 @@ const MessageInput = () => {
 
               // Send message via WebSocket
               sendMessage({
-                type: "sendMessage",
-                chatId: selectedConversation?._id,
-                message: message1,
-                messageId: data[1]._id,
-                attachments: successfulUploads,
-                senderId: userId,
-                receiverId:
-                  !Array.isArray(selectedConversation?.participantDetails) &&
-                  selectedConversation?.participantDetails._id,
+                event: "sendMessage",
+                data: {
+                  chatId: selectedConversation?._id,
+                  message: message1,
+                  messageId: data[1]._id,
+                  attachments: successfulUploads,
+                  senderId: userId,
+                  receiverId: otherParticipant._id,
+                },
               });
             },
             onError: (error) => {
@@ -675,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
@@ -42,12 +43,20 @@ const Messages = () => {
 
     const handleMessage = (event: MessageEvent) => {
       try {
-        const data = JSON.parse(event.data);
-        
-        if (data.type === "newMessage") {
-          const newMessage = data.message;
+        const parsed = JSON.parse(event.data);
+        console.log("Parsed WebSocket message1:", parsed);
+        if (parsed.type === "newMessage" || parsed.event === "newMessage") {
+          const newMessage = parsed.data;
+          if (!newMessage) {
+            console.warn(
+              "Received newMessage event without a message payload",
+              parsed
+            );
+            return;
+          }
+
           newMessage.shouldShake = true;
-          
+
           setMessages((prevMessages) => {
             const isDuplicate = prevMessages.some(
               (msg) =>
@@ -61,10 +70,63 @@ const Messages = () => {
           });
         }
 
-        if (data.type === "messageStatusUpdated") {
+        const statusOrder = ["sent", "delivered", "read", "edited", "deleted"];
+        if (parsed.event === "messageStatusUpdated") {
+          const { messageId, status } = parsed.data || {};
+          if (!messageId) {
+            console.error("Missing messageId in status update", parsed);
+            return;
+          }
+
           setMessages((prev) =>
-            prev.map((msg) => 
-              msg._id === data.messageId ? { ...msg, status: data.status } : msg
+            prev.map((msg) => {
+              if (msg._id !== messageId) return msg;
+
+              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; // 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
             )
           );
         }
@@ -84,47 +146,37 @@ const Messages = () => {
   useEffect(() => {
     if (messages.length > 0) {
       setTimeout(() => {
-        lastMessageRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        lastMessageRef.current?.scrollIntoView({
+          behavior: "smooth",
+          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]);
-
-
-  const sendDeliveryConfirmation = (messageId: string) => {
-  if (!socket) return;
-  
-  const message = {
-    type: "confirmDelivery",
-    messageId,
-    // timestamp: Date.now()
-  };
-  
-  socket.send(JSON.stringify(message));
-};
+  // 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
@@ -157,4 +209,4 @@ const Messages = () => {
   );
 };
 
-export default Messages;
+export default Messages;

package/src/components/sidebar/Conversation.tsx

@@ -1,36 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { MessageCircle } from "lucide-react";
 import { useEffect } from "react";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
 import { ConversationProps } from "../../types/type";
-import { getChatConfig } from "@pubuduth-aplicy/chat-ui";
 
 const Conversation = ({ conversation }: ConversationProps) => {
   const {
     setSelectedConversation,
     setOnlineUsers,
-    onlineUsers,
-    selectedConversation,
   } = useChatUIStore();
-  const { socket, sendMessage } = useChatContext();
-  const { role } = getChatConfig();
-  const handleSelectConversation = async () => {
-    setSelectedConversation(conversation);
+  const { socket, isUserOnline } = useChatContext();
+  const selectedConversation = useChatUIStore(
+    (state) => state.selectedConversation
+  );
+  const { userId } = useChatContext();
+
+  // This should return the other participant
+  const participant = conversation.participantDetails?.find(
+    (p:any) => p._id !== userId
+  );
+
 
-    const unreadMessages = conversation.unreadMessageIds || [];
-    if (unreadMessages.length > 0) {
-      console.log("Marking messages as read:", unreadMessages);
+  // 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:",
+      JSON.stringify(conversation, null, 2)
+    );
+    setSelectedConversation(conversation);
+    const unreadMessageIds = conversation.unreadMessageIds || [];
+    if (unreadMessageIds.length > 0 && socket?.readyState === WebSocket.OPEN) {
+      console.log("unread messages", unreadMessageIds);
 
-      sendMessage({
+      const message = {
         event: "messageRead",
         data: {
-          messageIds: unreadMessages,
+          messageIds: unreadMessageIds,
+          senderId: participant?._id,
+          receiverId: userId,
           chatId: conversation._id,
         },
-      });
+      };
+      socket.send(JSON.stringify(message));
+      //  updateConversationReadStatus(conversation._id, unreadMessageIds);
     }
   };
 
-  // Listen for online users updates
   useEffect(() => {
     if (!socket) return;
 
@@ -38,10 +73,10 @@ const Conversation = ({ conversation }: ConversationProps) => {
       try {
         const data = JSON.parse(event.data);
         if (data.event === "getOnlineUsers") {
-          setOnlineUsers(data.data);
+          setOnlineUsers(data.payload);
         }
       } catch (error) {
-        console.error("Error parsing online users update:", error);
+        console.error("Failed to parse WebSocket message:", error);
       }
     };
 
@@ -52,100 +87,78 @@ const Conversation = ({ conversation }: ConversationProps) => {
     };
   }, [socket, setOnlineUsers]);
 
-  const isUserOnline =
-    conversation?.participantDetails?._id &&
-    onlineUsers?.includes(conversation.participantDetails._id);
+  // Temporary debug in your component
+  useEffect(() => {
+    console.log("Current conversation state:", conversation);
+  }, [conversation]);
 
+  const isOnline = isUserOnline(participant?._id || "");
   const isSelected = selectedConversation?._id === conversation._id;
+  const unreadCount = conversation.unreadMessageCount || 0;
+  const conversationName =
+    conversation.type === "service" && conversation.bookingId
+      ? `Booking #${conversation.bookingId}`
+      : participant?.firstname || "Conversation";
+
+  const lastMessageTimestamp = new Date(
+    conversation.lastMessage?.updatedAt || conversation.lastMessage?.createdAt
+  ).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
 
   return (
-    <>
-      <div
-        className={`conversation-container ${isSelected ? "selected" : ""} `}
-        onClick={handleSelectConversation}
-      >
-        <div className="conversation-avatar">
-          <img
-            className="conversation-img"
-            src={
-              role === "admin" &&
-              Array.isArray(selectedConversation?.participantDetails)
-                ? selectedConversation.participantDetails[1]?.profilePic
-                : !Array.isArray(selectedConversation?.participantDetails)
-                ? selectedConversation?.participantDetails?.profilePic
-                : undefined
-            }
-            alt="User Avatar"
-          />
-          <span
-            className={`chatSidebarStatusDot ${isUserOnline && "online"}`}
-          ></span>
-        </div>
+    <div
+      className={`flex items-center p-2 cursor-pointer rounded-md hover:bg-gray-100 ${
+        isSelected ? "bg-gray-200" : ""
+      }`}
+      onClick={handleSelectConversation}
+    >
+      <div className="relative">
+        {conversation.type === "service" ? (
+          <div className="gap-2 flex relative">
+            <MessageCircle className="text-gray-600 w-4 h-4 mt-.5" />
+          </div>
+        ) : (
+          <>
+            <img
+              className="w-10 h-10 rounded-full"
+              src={participant?.profilePic}
+              alt="User Avatar"
+            />
+            <span
+              className={`chatSidebarStatusDot ${isOnline && "online"}`}
+            ></span>
+          </>
+        )}
+      </div>
 
-        <div className="conversation-info">
-          <div className="conversation-header">
-            <p className="conversation-name">
-              {role === "admin" &&
-              Array.isArray(selectedConversation?.participantDetails)
-                ? selectedConversation.participantDetails[1]?.firstname
-                : !Array.isArray(selectedConversation?.participantDetails)
-                ? selectedConversation?.participantDetails?.firstname
-                : undefined}
-            </p>
-            <span className="conversation-time">
-            {conversation.lastMessage.status === 'deleted' ? (
-              // Show deleted timestamp if message is deleted
-              new Date(conversation.lastMessage.updatedAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })
-            ) : conversation.lastMessage.status === 'edited' ? (
-              // Show updated timestamp if message was edited
-              new Date(conversation.lastMessage.updatedAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })
-            ) : (
-              // Default to created timestamp
-              new Date(conversation.lastMessage.createdAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit",
-              })
+      <div className="flex-1 ml-3">
+        <div className="flex justify-between items-center">
+          <p className="text-sm font-semibold text-gray-800">
+            {conversationName}
+          </p>
+          <div className="flex items-center gap-2">
+            {unreadCount > 0 && (
+              <span className="bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+                {unreadCount}
+              </span>
             )}
+            <span className="text-xs text-gray-500">
+              {lastMessageTimestamp}
             </span>
           </div>
-          <p className="conversation-message">
-            {conversation.lastMessage.status === "deleted" ? (
-              "This message was deleted"
-            ) : conversation.lastMessage.type !== "system" &&
-              conversation.lastMessage.message.length > 50 ? (
-              conversation.lastMessage.message.slice(0, 50) + "..."
-            ) : conversation.lastMessage.media.length > 0 ? (
-              <div
-                style={{ display: "flex", alignItems: "center", gap: "5px" }}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
-                </svg>
-                attachment
-              </div>
-            ) : (
-              conversation.lastMessage.message
-            )}
-          </p>
+          {/* <span className="text-xs text-gray-500">{lastMessageTimestamp}</span> */}
         </div>
+        <p className="text-xs text-gray-600 truncate">
+          {conversation.lastMessage?.status === "deleted"
+            ? "This message was deleted"
+            : conversation.lastMessage?.media?.length > 0
+            ? "Attachment"
+            : conversation.lastMessage?.message}
+        </p>
       </div>
-    </>
+    </div>
   );
 };