@pubuduth-aplicy/chat-ui 2.1.29 → 2.1.31

package/package.json

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useMessageMutation } from "../../hooks/mutations/useSendMessage";
 import { useChatContext } from "../../providers/ChatProvider";
 import useChatUIStore from "../../stores/Zustant";
@@ -13,8 +13,60 @@ 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);
+  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);
+      socket.emit("typing", {
+        chatId: selectedConversation?._id,
+        userId,
+      });
+    }
+  
+    // Clear typing indicator when user stops typing
+    const typingTimeout = setTimeout(() => {
+      if (message === "") {
+        setIsTyping(false);
+        socket.emit("stopTyping", { chatId: selectedConversation?._id, userId });
+      }
+    }, 2000);
+  
+    return () => clearTimeout(typingTimeout);
+  }, [message, socket, selectedConversation?._id, userId]);
+  
 
   const handleSubmit = useCallback(
     async (e: any) => {
@@ -62,6 +114,11 @@ const MessageInput = () => {
           {/* {loading ? <div className='loading loading-spinner'></div> : <PaperPlaneRight />} Show loading spinner if loading */}
         </button>
       </div>
+
+      {isTyping && !isSending && (
+        <div className="typingIndicator">Someone is typing...</div>
+      )}
+
     </form>
   );
 };