@pubuduth-aplicy/chat-ui 2.1.30 → 2.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.30",
+  "version": "2.1.32",
   "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/messages/MessageInput.tsx

@@ -13,11 +13,41 @@ const MessageInput = () => {
   const { selectedConversation } = useChatUIStore();
   const [message, setMessage] = useState(""); // State for storing the message input
   const { mutate: sendMessage } = 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); // Track if the user is typing
 
+  useEffect(() => {
+    if (selectedConversation?._id) {
+      socket.emit("joinChat", selectedConversation._id);
+    }
+  }, [selectedConversation, socket]);
+
+  useEffect(() => {
+    if (!socket) return;
+  
+    const handleTyping = ({ userid }: { userid: string }) => {
+      if (userid !== userId) {
+        setTypingUser(userid);
+      }
+    };
+  
+    const handleStopTyping = ({ userid }: { userid: string }) => {
+      if (userid === typingUser) {
+        setTypingUser(null);
+      }
+    };
+  
+    socket.on("typing", handleTyping);
+    socket.on("stopTyping", handleStopTyping);
+  
+    return () => {
+      socket.off("typing", handleTyping);
+      socket.off("stopTyping", handleStopTyping);
+    };
+  }, [socket, typingUser, userId]);
+
   useEffect(() => {
     if (message) {
       setIsTyping(true);
@@ -25,21 +55,19 @@ const MessageInput = () => {
         chatId: selectedConversation?._id,
         userId,
       });
-    } else {
-      setIsTyping(false);
-      socket.emit("typing", { chatId: selectedConversation?._id, userId: null }); // Stop typing event
     }
-
-    // Cleanup: Stop typing after 2 seconds of inactivity
+  
+    // Clear typing indicator when user stops typing
     const typingTimeout = setTimeout(() => {
       if (message === "") {
         setIsTyping(false);
-        socket.emit("typing", { chatId: selectedConversation?._id, userId: null });
+        socket.emit("stopTyping", { chatId: selectedConversation?._id, userId });
       }
     }, 2000);
-
+  
     return () => clearTimeout(typingTimeout);
   }, [message, socket, selectedConversation?._id, userId]);
+  
 
   const handleSubmit = useCallback(
     async (e: any) => {
@@ -88,7 +116,7 @@ const MessageInput = () => {
         </button>
       </div>
 
-      {isTyping && !isSending && (
+      {typingUser && typingUser !== userId && !isSending &&(
         <div className="typingIndicator">Someone is typing...</div>
       )}