@pubuduth-aplicy/chat-ui 2.2.9 → 2.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.9",
+  "version": "2.2.11",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/Chat.tsx

@@ -17,12 +17,12 @@ export const Chat = () => {
         const parsed = JSON.parse(event.data);
 
         if (parsed.event === "newMessage") {
-          const message = parsed.data;
+          const message = parsed.data.data;
           // Send delivery confirmation
           // Update UI immediately
           setMessages((prev) => [...prev, message]);
           sendMessage({
-            event: "confirmDelivery",
+            event: "messageRead",
             data: {
               messageIds: [message._id],
               chatId: message.conversationId, // make sure this is sent from backend
@@ -34,23 +34,24 @@ export const Chat = () => {
           });
 
           // Optional: update UI
-          updateMessageStatus(message._id, "delivered");
+          // updateMessageStatus(message._id, "delivered");
+          updateMessageStatus(message._id, "read");
 
-          // Send read receipt if user is viewing this conversation
-          // This ensures messages are marked as "read" immediately when both users are in the same chat
-          if (message.conversationId === selectedConversation?._id) {
-            sendMessage({
-              event: "messageRead",
-              data: {
-                messageIds: [message._id],
-                chatId: message.conversationId,
-                senderId: message.senderId,
-                receiverId: message.receiverId,
-                receiverRole: message.receiverRole,
-                senderRole: message.senderRole,
-              },
-            });
-          }
+          // // Send read receipt if user is viewing this conversation
+          // // This ensures messages are marked as "read" immediately when both users are in the same chat
+          // if (message.conversationId === selectedConversation?._id) {
+          //   sendMessage({
+          //     event: "messageRead",
+          //     data: {
+          //       messageIds: [message._id],
+          //       chatId: message.conversationId,
+          //       senderId: message.senderId,
+          //       receiverId: message.receiverId,
+          //       receiverRole: message.receiverRole,
+          //       senderRole: message.senderRole,
+          //     },
+          //   });
+          // }
         }
       } catch (error) {
         console.error("WebSocket message parse error:", error);

package/src/components/messages/MessageInput.tsx

@@ -40,21 +40,28 @@ const MessageInput = () => {
   const { role } = getChatConfig();
   const { socket, sendMessage, userId } = useChatContext();
   const { selectedConversation, setMessages } = useChatUIStore();
+
   const [message, setMessage] = useState("");
   const [message1, setMessage1] = useState("");
   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);
+
   const fileInputRef = useRef<HTMLInputElement>(null);
   const attachmentsRef = useRef<Attachment[]>([]);
   const [tempMessageId, setTempMessageId] = useState<string | null>(null);
   const [inputError, setInputError] = useState<string | null>(null);
   const attachmentsContainerRef = useRef<HTMLDivElement>(null);
-  const typingTimeoutRef = useRef<number | null>(null);
+  
+  const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isTypingRef = useRef(false);
+
+
   const generateTempId = () =>
     `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   // Join chat room when conversation is selected
@@ -69,6 +76,49 @@ const MessageInput = () => {
     (p: any) => p._id !== userId
   );
 
+  // --- Emit typing helpers (debounced / stateful) ---
+  const emitTyping = useCallback(() => {
+    if (!socket || socket.readyState !== WebSocket.OPEN) return;
+    if (!selectedConversation?._id || !otherParticipant?._id) return;
+
+    sendMessage({
+      event: "typing",
+      data: {
+        chatId: selectedConversation._id,
+        userId,
+        receiverId: otherParticipant._id,
+        receiverRole: role === "customer" ? "provider" : "customer",
+      },
+    });
+  }, [socket, selectedConversation?._id, otherParticipant?._id, sendMessage, userId, role]);
+
+  const emitStopTyping = useCallback(() => {
+    if (!socket || socket.readyState !== WebSocket.OPEN) return;
+    if (!selectedConversation?._id || !otherParticipant?._id) return;
+
+    sendMessage({
+      event: "stopTyping",
+      data: {
+        chatId: selectedConversation._id,
+        userId,
+        receiverId: otherParticipant._id,
+        receiverRole: role === "customer" ? "provider" : "customer",
+      },
+    });
+  }, [socket, selectedConversation?._id, otherParticipant?._id, sendMessage, userId, role]);
+
+  const stopTypingNow = useCallback(() => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = null;
+    }
+    if (isTypingRef.current) {
+      isTypingRef.current = false;
+      emitStopTyping();
+    }
+  }, [emitStopTyping]);
+
+
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
       sendMessage({
@@ -88,50 +138,119 @@ const MessageInput = () => {
     setInputError(null);
     setShowAttachmentOptions(false);
 
+    stopTypingNow();
+
     // Clean up any existing file input
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
-  }, [selectedConversation?._id]);
+  }, [selectedConversation?._id, stopTypingNow]);
 
   // Typing indicator logic
+  // useEffect(() => {
+  //   if (!socket || !selectedConversation?._id) return;
+
+  //   if (message.trim() !== "") {
+  //     setIsTyping(true);
+  //     sendMessage({
+  //       event: "typing",
+  //       data: {
+  //         chatId: selectedConversation._id,
+  //         userId,
+  //         receiverId: otherParticipant?._id,
+  //         receiverRole: role === "customer" ? "provider" : "customer",
+  //       },
+  //     });
+  //   }
+
+  //   typingTimeoutRef.current = setTimeout(() => {
+  //     if (message.trim() === "") {
+  //       setIsTyping(false);
+  //       sendMessage({
+  //         event: "stopTyping",
+  //         data: {
+  //           chatId: selectedConversation._id,
+  //           userId,
+  //           receiverId: otherParticipant?._id,
+  //           receiverRole: role === "customer" ? "provider" : "customer",
+  //         },
+  //       });
+  //     }
+  //   }, 200);
+
+  //   return () => {
+  //     if (typingTimeoutRef.current) {
+  //       clearTimeout(typingTimeoutRef.current);
+  //     }
+  //   };
+  // }, [message, socket, selectedConversation?._id, userId, sendMessage]);
+
+  // // Listen for typing indicators from others
+  // useEffect(() => {
+  //   if (!socket || !selectedConversation?._id) return;
+
+  //   const handleMessage = (event: MessageEvent) => {
+  //     try {
+  //       const data = JSON.parse(event.data);
+  //       if (
+  //         data.event === "typing" &&
+  //         data.data.chatId === selectedConversation._id
+  //       ) {
+  //         setTypingUser(data.data.userId);
+  //       } else if (
+  //         data.event === "stopTyping" &&
+  //         data.data.chatId === selectedConversation._id
+  //       ) {
+  //         setTypingUser((prev) => (prev === data.data.userId ? null : prev));
+  //       }
+  //     } catch (error) {
+  //       console.error("Error parsing typing message:", error);
+  //     }
+  //   };
+
+  //   socket.addEventListener("message", handleMessage);
+  //   return () => {
+  //     socket.removeEventListener("message", handleMessage);
+  //   };
+  // }, [socket, selectedConversation?._id]);
+
+
+  // ✅ FIXED Typing indicator logic:
+  // - Send "typing" once when user starts typing
+  // - Send "stopTyping" after inactivity (even if text remains)
+  // - If input becomes empty -> stopTyping once
   useEffect(() => {
-    if (!socket || !selectedConversation?._id) return;
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
 
-    if (message.trim() !== "") {
-      setIsTyping(true);
-      sendMessage({
-        event: "typing",
-        data: {
-          chatId: selectedConversation._id,
-          userId,
-          receiverId: otherParticipant?._id,
-          receiverRole: role === "customer" ? "provider" : "customer",
-        },
-      });
+    const hasText = message.trim().length > 0;
+
+    if (!hasText) {
+      // If input empty, ensure stopTyping is emitted once
+      if (isTypingRef.current) {
+        isTypingRef.current = false;
+        emitStopTyping();
+      }
+      return;
+    }
+
+    // Has text
+    if (!isTypingRef.current) {
+      isTypingRef.current = true;
+      emitTyping();
     }
 
+    // If user pauses, stop typing after 1s
     typingTimeoutRef.current = setTimeout(() => {
-      if (message.trim() === "") {
-        setIsTyping(false);
-        sendMessage({
-          event: "stopTyping",
-          data: {
-            chatId: selectedConversation._id,
-            userId,
-            receiverId: otherParticipant?._id,
-            receiverRole: role === "customer" ? "provider" : "customer",
-          },
-        });
+      if (isTypingRef.current) {
+        isTypingRef.current = false;
+        emitStopTyping();
       }
-    }, 200);
+    }, 1000);
 
     return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
     };
-  }, [message, socket, selectedConversation?._id, userId, sendMessage]);
+  }, [message, emitTyping, emitStopTyping]);
 
   // Listen for typing indicators from others
   useEffect(() => {
@@ -140,15 +259,10 @@ const MessageInput = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
-        if (
-          data.event === "typing" &&
-          data.data.chatId === selectedConversation._id
-        ) {
+
+        if (data.event === "typing" && data.data.chatId === selectedConversation._id) {
           setTypingUser(data.data.userId);
-        } else if (
-          data.event === "stopTyping" &&
-          data.data.chatId === selectedConversation._id
-        ) {
+        } else if (data.event === "stopTyping" && data.data.chatId === selectedConversation._id) {
           setTypingUser((prev) => (prev === data.data.userId ? null : prev));
         }
       } catch (error) {

package/src/hooks/useMessageStatus.ts

@@ -3,7 +3,7 @@ import { useChatContext } from "../providers/ChatProvider";
 import useChatUIStore from '../stores/Zustant';
 
 export const useMessageStatus = () => {
-    const { socket,userId } = useChatContext();
+    const { socket, userId } = useChatContext();
     const { messages, setMessages, selectedConversation } = useChatUIStore();
 
     useEffect(() => {
@@ -12,16 +12,16 @@ export const useMessageStatus = () => {
         const handleStatusUpdate = (event: MessageEvent) => {
             try {
                 const parsed = JSON.parse(event.data);
-                
+
                 if (parsed.event === 'messageStatusUpdated') {
                     const { messageId, status, chatId } = parsed.data;
-                    
+
                     setMessages(prev => prev.map(msg => {
                         if (msg._id === messageId) {
                             const statusOrder = ['sent', 'delivered', 'read'];
                             const currentIdx = statusOrder.indexOf(msg.status);
                             const newIdx = statusOrder.indexOf(status);
-                            
+
                             if (newIdx > currentIdx) {
                                 return { ...msg, status };
                             }
@@ -53,7 +53,9 @@ export const useMessageStatus = () => {
                                     event: 'confirmDelivery',
                                     data: {
                                         messageId,
-                                        chatId: selectedConversation._id
+                                        chatId: selectedConversation._id,
+                                        senderRole: message.sender.role,
+                                        senderId: message.sender.senderId,
                                     }
                                 }));
                             }
@@ -74,9 +76,9 @@ export const useMessageStatus = () => {
         if (!socket || !selectedConversation) return;
 
         const unreadMessages = messages.filter(
-            msg => msg.status !== 'read' && 
-                  msg.conversationId === selectedConversation._id &&
-                  msg.senderId !== userId
+            msg => msg.status !== 'read' &&
+                msg.conversationId === selectedConversation._id &&
+                msg.sender.senderId !== userId
         );
 
         if (unreadMessages.length > 0) {
@@ -84,7 +86,9 @@ export const useMessageStatus = () => {
                 event: 'messageRead',
                 data: {
                     messageIds: unreadMessages.map(m => m._id),
-                    chatId: selectedConversation._id
+                    chatId: selectedConversation._id,
+                    senderRole: unreadMessages[0].sender.role,
+                    senderId: unreadMessages[0].sender.senderId,
                 }
             }));
         }