added throttle on composing

client-web/src/pages/ChatInRoom/Chat.tsx

@@ -60,6 +60,7 @@ import { useSnackbar } from "../../context/SnackbarContext";
 import { createMainMessageForThread } from "../../utils/createMessage";
 import Dompurify from "dompurify";
 import { LeaveRoomButton } from "../../components/Chat/LeaveRoomButton";
+import { throttle } from "../../utils/throttle";
 
 export type IMessagePosition = {
   position: MessageModel["position"];
@@ -401,14 +402,19 @@ export function ChatInRoom() {
     }
     setFileUploading(false);
   };
+  const sendThrottledComposing = useRef(
+    throttle(() => {
+      xmpp.isComposing(
+        user.walletAddress,
+        roomData.jid,
+        user.firstName + " " + user.lastName
+      );
+    }, 500)
+  );
 
-  const setMessage = (value) => {
+  const setMessage = (value: string) => {
     setMyMessage(value);
-    xmpp.isComposing(
-      user.walletAddress,
-      roomData.jid,
-      user.firstName + " " + user.lastName
-    );
+    sendThrottledComposing.current();
   };
 
   const handlePaste = (event: any) => {
@@ -423,7 +429,6 @@ export function ChatInRoom() {
   };
 
   useEffect(() => {
-
     const timeoutId = setTimeout(() => {
       xmpp.pausedComposing(user.walletAddress, roomData?.jid);
     }, 1000);

client-web/src/utils/throttle.ts

@@ -0,0 +1,29 @@
+export const throttle = <T extends (...args: any[]) => void>(
+  func: T,
+  delay: number
+): T => {
+  let lastInvokeTime = 0;
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return ((...args: any[]) => {
+    const now = Date.now();
+    const timeSinceLastInvoke = now - lastInvokeTime;
+
+    const invoke = () => {
+      lastInvokeTime = Date.now();
+      func(...args);
+    };
+
+    if (timeSinceLastInvoke >= delay) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      invoke();
+    } else if (!timeoutId) {
+      timeoutId = setTimeout(() => {
+        invoke();
+      }, delay - timeSinceLastInvoke);
+    }
+  }) as T;
+};