Merge pull request #1423 from sendbird/fix/clnp-7811

[CLNP-7811][fix]: send endTyping on empty input, channel change, and unmount

Author: sf-tyler-jeong

src/hooks/__tests__/useTypingLifecycle.spec.tsx

@@ -0,0 +1,177 @@
+import { renderHook, act } from '@testing-library/react';
+import { useTypingLifecycle } from '../useTypingLifecycle';
+
+const makeChannel = (url = 'channel-a') => ({
+  url,
+  startTyping: jest.fn(),
+  endTyping: jest.fn(),
+});
+
+describe('useTypingLifecycle', () => {
+  it('startTyping calls channel.startTyping', () => {
+    const channel = makeChannel();
+    const { result } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+
+    expect(channel.startTyping).toHaveBeenCalledTimes(1);
+    expect(channel.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('stopTyping calls channel.endTyping', () => {
+    const channel = makeChannel();
+    const { result } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+    act(() => result.current.stopTyping());
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls endTyping on unmount when typing was active', () => {
+    const channel = makeChannel();
+    const { result, unmount } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+    unmount();
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call endTyping on unmount when typing was never active', () => {
+    const channel = makeChannel();
+    const { unmount } = renderHook(() => useTypingLifecycle(channel));
+
+    unmount();
+
+    expect(channel.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('does not duplicate endTyping when stopTyping called before unmount', () => {
+    const channel = makeChannel();
+    const { result, unmount } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+    act(() => result.current.stopTyping());
+    unmount();
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls endTyping on previous channel when channel changes', () => {
+    const channelA = makeChannel('a');
+    const channelB = makeChannel('b');
+
+    const { result, rerender } = renderHook(
+      ({ channel }) => useTypingLifecycle(channel),
+      { initialProps: { channel: channelA } },
+    );
+
+    act(() => result.current.startTyping());
+    expect(channelA.startTyping).toHaveBeenCalledTimes(1);
+
+    rerender({ channel: channelB });
+
+    expect(channelA.endTyping).toHaveBeenCalledTimes(1);
+    expect(channelB.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('calls endTyping when active toggles to false', () => {
+    const channel = makeChannel();
+
+    const { result, rerender } = renderHook(
+      ({ active }) => useTypingLifecycle(channel, active),
+      { initialProps: { active: true } },
+    );
+
+    act(() => result.current.startTyping());
+    rerender({ active: false });
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call endTyping when active toggles to false without typing', () => {
+    const channel = makeChannel();
+
+    const { rerender } = renderHook(
+      ({ active }) => useTypingLifecycle(channel, active),
+      { initialProps: { active: true } },
+    );
+
+    rerender({ active: false });
+
+    expect(channel.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('handles null channel gracefully', () => {
+    const { result, unmount } = renderHook(() => useTypingLifecycle(null));
+
+    expect(() => {
+      act(() => result.current.startTyping());
+      act(() => result.current.stopTyping());
+      unmount();
+    }).not.toThrow();
+  });
+
+  describe('same-URL channel re-instantiation', () => {
+    it('cleans up on the latest instance when typing starts after re-instantiation', () => {
+      const original = makeChannel('a');
+      const refreshed = makeChannel('a');
+
+      const { result, rerender, unmount } = renderHook(
+        ({ channel }) => useTypingLifecycle(channel),
+        { initialProps: { channel: original } },
+      );
+
+      rerender({ channel: refreshed });
+      act(() => result.current.startTyping());
+
+      expect(refreshed.startTyping).toHaveBeenCalledTimes(1);
+      expect(original.startTyping).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(refreshed.endTyping).toHaveBeenCalledTimes(1);
+      expect(original.endTyping).not.toHaveBeenCalled();
+    });
+
+    it('cleans up on the original instance if typing started before re-instantiation', () => {
+      const original = makeChannel('a');
+      const refreshed = makeChannel('a');
+
+      const { result, rerender, unmount } = renderHook(
+        ({ channel }) => useTypingLifecycle(channel),
+        { initialProps: { channel: original } },
+      );
+
+      act(() => result.current.startTyping());
+      rerender({ channel: refreshed });
+      unmount();
+
+      expect(original.endTyping).toHaveBeenCalledTimes(1);
+      expect(refreshed.endTyping).not.toHaveBeenCalled();
+    });
+
+    it('uses the latest instance for endTyping when typing is restarted after re-instantiation', () => {
+      const original = makeChannel('a');
+      const refreshed = makeChannel('a');
+
+      const { result, rerender, unmount } = renderHook(
+        ({ channel }) => useTypingLifecycle(channel),
+        { initialProps: { channel: original } },
+      );
+
+      act(() => result.current.startTyping());
+      rerender({ channel: refreshed });
+      act(() => result.current.startTyping());
+      unmount();
+
+      expect(original.startTyping).toHaveBeenCalledTimes(1);
+      expect(refreshed.startTyping).toHaveBeenCalledTimes(1);
+      // endTyping should hit only the refreshed instance (the most recent
+      // startTyping target), not the original.
+      expect(original.endTyping).not.toHaveBeenCalled();
+      expect(refreshed.endTyping).toHaveBeenCalledTimes(1);
+    });
+  });
+});

src/hooks/useTypingLifecycle.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+type TypingChannel = {
+  url?: string;
+  startTyping?: () => void;
+  endTyping?: () => void;
+} | null | undefined;
+
+/**
+ * Tracks typing lifecycle on a Sendbird channel and ensures `endTyping` is
+ * sent when the channel changes, the `active` flag toggles to false, or the
+ * component unmounts. Returns memoized `startTyping`/`stopTyping` helpers
+ * that the caller wires to input events.
+ *
+ * @param channel - the channel currently being typed in
+ * @param active  - when set to false, the cleanup runs and clears typing
+ *                  state. Useful for edit-mode wrappers that pass `showEdit`
+ *                  so closing the edit panel emits `endTyping`.
+ */
+export function useTypingLifecycle(
+  channel: TypingChannel,
+  active: boolean = true,
+): { startTyping: () => void; stopTyping: () => void } {
+  // Holds the channel that startTyping was last invoked on. Storing the
+  // actual reference (rather than a boolean flag) ensures endTyping is sent
+  // on the same channel instance that received startTyping, even if the
+  // channel object is re-instantiated under the same URL.
+  const typingChannelRef = useRef<TypingChannel>(null);
+
+  const startTyping = useCallback(() => {
+    channel?.startTyping?.();
+    typingChannelRef.current = channel ?? null;
+  }, [channel]);
+
+  const stopTyping = useCallback(() => {
+    typingChannelRef.current?.endTyping?.();
+    typingChannelRef.current = null;
+  }, []);
+
+  // Run cleanup on channel URL change, active toggle, or unmount.
+  // Reads typingChannelRef so endTyping is sent on the channel where
+  // startTyping was actually invoked.
+  useEffect(() => {
+    return () => {
+      if (typingChannelRef.current) {
+        typingChannelRef.current.endTyping?.();
+        typingChannelRef.current = null;
+      }
+    };
+  }, [channel?.url, active]);
+
+  return { startTyping, stopTyping };
+}

src/modules/GroupChannel/components/Message/MessageView.tsx

@@ -1,5 +1,6 @@
 import type { EveryMessage, RenderCustomSeparatorProps, RenderMessageParamsType, ReplyType } from '../../../../types';
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTypingLifecycle } from '../../../../hooks/useTypingLifecycle';
 import { type EmojiCategory, EmojiContainer, User } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { FileMessage, UserMessage, UserMessageCreateParams, UserMessageUpdateParams } from '@sendbird/chat/message';
@@ -220,6 +221,8 @@ const MessageView = (props: MessageViewProps) => {
     );
   }, [mentionedUserIds]);
 
+  const { startTyping, stopTyping } = useTypingLifecycle(channel, showEdit);
+
   // Side effect: scroll position update when showEdit is toggled or reactions updated
   useDidMountEffect(() => {
     handleScroll?.();
@@ -381,25 +384,24 @@ const MessageView = (props: MessageViewProps) => {
             mentionSelectedUser={selectedUser}
             isMentionEnabled={groupChannel.enableMention}
             message={message}
-            onStartTyping={() => {
-              channel?.startTyping?.();
-            }}
+            onStartTyping={startTyping}
+            onStopTyping={stopTyping}
             onUpdateMessage={({ messageId, message, mentionTemplate }) => {
               updateUserMessage(messageId, {
                 message,
                 mentionedUsers,
                 mentionedMessageTemplate: mentionTemplate,
               });
               setShowEdit(false);
-              channel?.endTyping?.();
+              stopTyping();
             }}
             onCancelEdit={() => {
               setMentionNickname('');
               setMentionedUsers([]);
               setMentionedUserIds([]);
               setMentionSuggestedUsers([]);
               setShowEdit(false);
-              channel?.endTyping?.();
+              stopTyping();
             }}
             onUserMentioned={(user) => {
               if (selectedUser?.userId === user?.userId) {

src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx

@@ -1,5 +1,6 @@
 import './index.scss';
 import React, { useState, useEffect } from 'react';
+import { useTypingLifecycle } from '../../../../hooks/useTypingLifecycle';
 import type { User } from '@sendbird/chat';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type {
@@ -128,6 +129,8 @@ export const MessageInputWrapperView = React.forwardRef((
     setMessageInputEvent(null);
     setShowVoiceMessageInput(false);
   }, [currentChannel?.url]);
+
+  const { startTyping, stopTyping } = useTypingLifecycle(currentChannel);
   useEffect(() => {
     setMentionedUsers(
       mentionedUsers.filter(({ userId }) => {
@@ -234,9 +237,8 @@ export const MessageInputWrapperView = React.forwardRef((
           renderFileUploadIcon={renderFileUploadIcon}
           renderSendMessageIcon={renderSendMessageIcon}
           renderVoiceMessageIcon={renderVoiceMessageIcon}
-          onStartTyping={() => {
-            currentChannel?.startTyping();
-          }}
+          onStartTyping={startTyping}
+          onStopTyping={stopTyping}
           onSendMessage={({ message, mentionTemplate }) => {
             sendUserMessage({
               message,
@@ -247,7 +249,7 @@ export const MessageInputWrapperView = React.forwardRef((
             setMentionNickname('');
             setMentionedUsers([]);
             setQuoteMessage(null);
-            currentChannel?.endTyping?.();
+            stopTyping();
           }}
           onFileUpload={(fileList) => {
             handleUploadFiles(fileList);

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { useTypingLifecycle } from '../../../../hooks/useTypingLifecycle';
 import format from 'date-fns/format';
 import { FileMessage } from '@sendbird/chat/message';
 
@@ -132,6 +133,8 @@ export default function ParentMessageInfo({
     }));
   }, [mentionedUserIds]);
 
+  const { startTyping, stopTyping } = useTypingLifecycle(currentChannel, showEditInput);
+
   const handleOnDownloadClick = async (e: React.MouseEvent) => {
     if (!onBeforeDownloadFileMessage) return;
 
@@ -188,9 +191,8 @@ export default function ParentMessageInfo({
           mentionSelectedUser={selectedUser}
           isMentionEnabled={isMentionEnabled}
           message={parentMessage}
-          onStartTyping={() => {
-            currentChannel?.startTyping?.();
-          }}
+          onStartTyping={startTyping}
+          onStopTyping={stopTyping}
           onUpdateMessage={({ messageId, message, mentionTemplate }) => {
             updateMessage({
               messageId,
@@ -199,15 +201,15 @@ export default function ParentMessageInfo({
               mentionTemplate,
             });
             setShowEditInput(false);
-            currentChannel?.endTyping?.();
+            stopTyping();
           }}
           onCancelEdit={() => {
             setMentionNickname('');
             setMentionedUsers([]);
             setMentionedUserIds([]);
             setMentionSuggestedUsers([]);
             setShowEditInput(false);
-            currentChannel?.endTyping?.();
+            stopTyping();
           }}
           onUserMentioned={(user) => {
             if (selectedUser?.userId === user?.userId) {