From 90bc1ace63a43f00e9b3208545263eeac0faea0a Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Mon, 16 Dec 2024 10:39:46 +0900
Subject: [PATCH] scroll to bottom when bubble TypingIndicator appears

---
 .../GroupChannel/components/MessageList/index.tsx        | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/modules/GroupChannel/components/MessageList/index.tsx b/src/modules/GroupChannel/components/MessageList/index.tsx
index 7e8019df6..66b5d6c1c 100644
--- a/src/modules/GroupChannel/components/MessageList/index.tsx
+++ b/src/modules/GroupChannel/components/MessageList/index.tsx
@@ -19,7 +19,7 @@ import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
 import { deleteNullish } from '../../../../utils/utils';
 import { getMessagePartsInfo } from './getMessagePartsInfo';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
-import { getComponentKeyFromMessage } from '../../context/utils';
+import { getComponentKeyFromMessage, isContextMenuClosed } from '../../context/utils';
 import { InfiniteList } from './InfiniteList';
 
 export interface GroupChannelMessageListProps {
@@ -225,6 +225,7 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
 
 const TypingIndicatorBubbleWrapper = (props: { handleScroll: () => void; channelUrl: string }) => {
   const { stores } = useSendbirdStateContext();
+  const { isScrollBottomReached, scrollPubSub } = useGroupChannelContext();
   const [typingMembers, setTypingMembers] = useState<Member[]>([]);
 
   useGroupChannelHandler(stores.sdkStore.sdk, {
@@ -232,6 +233,12 @@ const TypingIndicatorBubbleWrapper = (props: { handleScroll: () => void; channel
       if (channel.url === props.channelUrl) {
         setTypingMembers(channel.getTypingUsers());
       }
+
+      if (isScrollBottomReached && isContextMenuClosed()) {
+        setTimeout(() => {
+          scrollPubSub.publish('scrollToBottom', {});
+        }, 10);
+      }
     },
   });