Add feature to scroll to top of new message instead of bottom

danney-chun · danney-chun · commit 43b1f0d09993 · 2025-12-01T20:15:29.000+09:00
diff --git a/apps/testing/src/pages/PlaygroundPage.tsx b/apps/testing/src/pages/PlaygroundPage.tsx
@@ -10,5 +10,6 @@ export function PlaygroundPage() {
         replyType: 'thread',
       }
     }}
+    // isFocusOnLastMessage={true}
   />;
 }
diff --git a/src/lib/Sendbird/context/SendbirdProvider.tsx b/src/lib/Sendbird/context/SendbirdProvider.tsx
@@ -72,6 +72,7 @@ const SendbirdContextManager = ({
   sdkInitParams,
   customExtensionParams,
   isMultipleFilesMessageEnabled = false,
+  isFocusOnLastMessage = false,
   eventHandlers,
   htmlTextDirection = 'ltr',
   forceLeftToRightMessageLayout = false,
@@ -288,6 +289,7 @@ const SendbirdContextManager = ({
       setCurrentTheme,
       setCurrenttheme: setCurrentTheme, // deprecated: typo
       isMultipleFilesMessageEnabled,
+      isFocusOnLastMessage,
       uikitMultipleFilesMessageLimit,
       logger,
       pubSub,
@@ -316,6 +318,7 @@ const SendbirdContextManager = ({
     currentTheme,
     setCurrentTheme,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage,
     uikitMultipleFilesMessageLimit,
     logger,
     pubSub,
@@ -395,6 +398,7 @@ const InternalSendbirdProvider = (props: SendbirdProviderProps & { logger: Logge
       },
       disableMarkAsDelivered: props?.disableMarkAsDelivered,
       isMultipleFilesMessageEnabled: props?.isMultipleFilesMessageEnabled,
+      isFocusOnLastMessage: props?.isFocusOnLastMessage,
     },
     eventHandlers: props?.eventHandlers,
   });
diff --git a/src/lib/Sendbird/context/initialState.ts b/src/lib/Sendbird/context/initialState.ts
@@ -33,6 +33,7 @@ const config: SendbirdStateConfig = {
   forceLeftToRightMessageLayout: false,
   disableMarkAsDelivered: false,
   isMultipleFilesMessageEnabled: false,
+  isFocusOnLastMessage: false,
   htmlTextDirection: 'ltr',
   uikitUploadSizeLimit: DEFAULT_UPLOAD_SIZE_LIMIT,
   uikitMultipleFilesMessageLimit: DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT,
diff --git a/src/lib/Sendbird/types.ts b/src/lib/Sendbird/types.ts
@@ -218,6 +218,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps, React.Pro
   sdkInitParams?: SendbirdChatInitParams;
   customExtensionParams?: CustomExtensionParams;
   isMultipleFilesMessageEnabled?: boolean;
+  isFocusOnLastMessage?: boolean;
   // UserProfile
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   onStartDirectMessage?: (channel: GroupChannel) => void;
@@ -260,6 +261,7 @@ export interface SendbirdStateConfig {
   markAsDeliveredScheduler: MarkAsDeliveredSchedulerType;
   disableMarkAsDelivered: boolean;
   isMultipleFilesMessageEnabled: boolean;
+  isFocusOnLastMessage: boolean;
   // Remote configs set from dashboard by UIKit feature configuration
   common: {
     enableUsingDefaultUserProfile: SBUConfig['common']['enableUsingDefaultUserProfile'];
diff --git a/src/modules/App/AppLayout.tsx b/src/modules/App/AppLayout.tsx
@@ -13,6 +13,7 @@ import useSendbird from '../../lib/Sendbird/context/hooks/useSendbird';
 export const AppLayout = (props: AppLayoutProps) => {
   const {
     isMessageGroupingEnabled,
+    isFocusOnLastMessage,
     allowProfileEdit,
     onProfileEditSuccess,
     disableAutoSelect,
@@ -50,6 +51,7 @@ export const AppLayout = (props: AppLayoutProps) => {
               showSearchIcon={showSearchIcon}
               isReactionEnabled={isReactionEnabled}
               isMessageGroupingEnabled={isMessageGroupingEnabled}
+              isFocusOnLastMessage={isFocusOnLastMessage}
               allowProfileEdit={allowProfileEdit}
               onProfileEditSuccess={onProfileEditSuccess}
               currentChannel={currentChannel}
@@ -69,6 +71,7 @@ export const AppLayout = (props: AppLayoutProps) => {
               isReactionEnabled={isReactionEnabled}
               showSearchIcon={showSearchIcon}
               isMessageGroupingEnabled={isMessageGroupingEnabled}
+              isFocusOnLastMessage={isFocusOnLastMessage}
               allowProfileEdit={allowProfileEdit}
               onProfileEditSuccess={onProfileEditSuccess}
               disableAutoSelect={disableAutoSelect}
diff --git a/src/modules/App/DesktopLayout.tsx b/src/modules/App/DesktopLayout.tsx
@@ -21,6 +21,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     replyType,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage,
     allowProfileEdit,
     showSearchIcon,
     onProfileEditSuccess,
@@ -104,6 +105,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     replyType: replyType,
     isMessageGroupingEnabled: isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage: isFocusOnLastMessage,
     // for GroupChannel
     animatedMessageId: highlightedMessage,
     onReplyInThreadClick: onClickThreadReply,
diff --git a/src/modules/App/MobileLayout.tsx b/src/modules/App/MobileLayout.tsx
@@ -32,6 +32,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     replyType,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage,
     allowProfileEdit,
     isReactionEnabled,
     showSearchIcon,
@@ -155,6 +156,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     replyType,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage,
     // for GroupChannel
     animatedMessageId: highlightedMessage,
     onReplyInThreadClick: ({ message }) => {
diff --git a/src/modules/App/index.tsx b/src/modules/App/index.tsx
@@ -29,6 +29,7 @@ export interface AppProps {
   config?: SendbirdProviderProps['config'];
   voiceRecord?: SendbirdProviderProps['voiceRecord'];
   isMultipleFilesMessageEnabled?: SendbirdProviderProps['isMultipleFilesMessageEnabled'];
+  isFocusOnLastMessage?: SendbirdProviderProps['isFocusOnLastMessage'];
   colorSet?: SendbirdProviderProps['colorSet'];
   stringSet?: SendbirdProviderProps['stringSet'];
   allowProfileEdit?: SendbirdProviderProps['allowProfileEdit'];
@@ -99,6 +100,7 @@ export default function App(props: AppProps) {
     customExtensionParams,
     eventHandlers,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage = false,
     isUserIdUsedForNickname = true,
     enableLegacyChannelModules = false,
     uikitOptions,
@@ -138,6 +140,7 @@ export default function App(props: AppProps) {
       renderUserProfile={renderUserProfile}
       imageCompression={imageCompression}
       isMultipleFilesMessageEnabled={isMultipleFilesMessageEnabled}
+      isFocusOnLastMessage={isFocusOnLastMessage}
       voiceRecord={voiceRecord}
       onStartDirectMessage={(channel) => {
         setCurrentChannel(channel);
@@ -159,6 +162,7 @@ export default function App(props: AppProps) {
       forceLeftToRightMessageLayout={forceLeftToRightMessageLayout}
     >
       <AppLayout
+        isFocusOnLastMessage={isFocusOnLastMessage}
         isMessageGroupingEnabled={isMessageGroupingEnabled}
         allowProfileEdit={allowProfileEdit}
         onProfileEditSuccess={onProfileEditSuccess}
diff --git a/src/modules/App/types.ts b/src/modules/App/types.ts
@@ -18,6 +18,7 @@ export interface AppLayoutProps {
   forceLeftToRightMessageLayout?: boolean;
   isMessageGroupingEnabled?: boolean;
   isMultipleFilesMessageEnabled?: boolean;
+  isFocusOnLastMessage?: boolean;
   allowProfileEdit?: boolean;
   showSearchIcon?: boolean;
   onProfileEditSuccess?(user: User): void; // TODO: Unused props, deprecate it
diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx
@@ -55,6 +55,10 @@ export interface MessageProps {
    * A function that is called when the new message separator visibility changes.
    */
   onNewMessageSeparatorVisibilityChange?: (isVisible: boolean) => void;
+  /**
+   * A function that forces scroll to message when new message is received.
+   */
+  forceScrollToMessage?: (ref: React.MutableRefObject<any>, message: CoreMessageType) => void;
   /**
    * @deprecated Please use `children` instead
    * @description Customizes all child components of the message.
@@ -97,6 +101,10 @@ export interface MessageViewProps extends MessageProps {
 
   animatedMessageId: number | null;
   setAnimatedMessageId: React.Dispatch<React.SetStateAction<number | null>>;
+
+  newMessageIds?: number[] | null;
+  setNewMessageIds?: (ids: number[]) => void;
+
   onMessageAnimated?: () => void;
   /** @deprecated * */
   highLightedMessageId?: number | null;
@@ -119,6 +127,7 @@ const MessageView = (props: MessageViewProps) => {
     chainBottom,
     handleScroll,
     onNewMessageSeparatorVisibilityChange,
+    forceScrollToMessage,
 
     // MessageViewProps
     channel,
@@ -147,6 +156,9 @@ const MessageView = (props: MessageViewProps) => {
     animatedMessageId,
     onMessageAnimated,
     usedInLegacy = true,
+
+    newMessageIds,
+    setNewMessageIds,
   } = props;
 
   const {
@@ -257,6 +269,23 @@ const MessageView = (props: MessageViewProps) => {
     };
   }, [animatedMessageId, messageScrollRef.current, message.messageId]);
 
+  useLayoutEffect(() => {
+    if (newMessageIds?.length > 0 && newMessageIds.includes(message.messageId)) {
+      let rafId: number | null = null;
+
+      rafId = requestAnimationFrame(() => {
+        forceScrollToMessage(messageScrollRef, message);
+        setNewMessageIds([]);
+      });
+
+      return () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+      };
+    }
+  }, [newMessageIds]);
+
   const renderedCustomSeparator = useMemo(() => renderCustomSeparator?.({ message }) ?? null, [message, renderCustomSeparator]);
 
   const renderChildren = () => {
diff --git a/src/modules/GroupChannel/components/Message/index.tsx b/src/modules/GroupChannel/components/Message/index.tsx
@@ -30,6 +30,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       onBeforeDownloadFileMessage,
       messages,
       markAsUnread,
+      newMessageIds,
     },
     actions: {
       toggleReaction,
@@ -40,6 +41,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       sendUserMessage,
       resendMessage,
       deleteMessage,
+      setNewMessageIds,
     },
   } = useGroupChannel();
 
@@ -94,6 +96,8 @@ export const Message = (props: MessageProps): React.ReactElement => {
       renderRemoveMessageModal={(props) => <RemoveMessageModal {...props} />}
       usedInLegacy={false}
       onBeforeDownloadFileMessage={onBeforeDownloadFileMessage}
+      newMessageIds={newMessageIds}
+      setNewMessageIds={setNewMessageIds}
     />
   );
 };
diff --git a/src/modules/GroupChannel/components/MessageList/index.tsx b/src/modules/GroupChannel/components/MessageList/index.tsx
@@ -89,12 +89,14 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
       scrollDistanceFromBottomRef,
       markAsUnreadSourceRef,
       readState,
+      isFocusOnLastMessage,
     },
     actions: {
       scrollToBottom,
       setIsScrollBottomReached,
       markAsReadAll,
       markAsUnread,
+      scrollToMessage,
     },
   } = useGroupChannel();
 
@@ -204,6 +206,24 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
     }
   };
 
+  /**
+   * Force scroll to message
+   * when new message is received
+   * and the message content height is over the current scroll height
+   */
+  const forceScrollToMessage = (ref: React.MutableRefObject<any>, message: CoreMessageType) => {
+    if (!isFocusOnLastMessage) return;
+    const messageComponent = ref.current;
+    const messageComponentHeight = messageComponent?.clientHeight;
+    const currentScrollHeight = scrollRef.current?.offsetHeight;
+
+    if (messageComponentHeight > currentScrollHeight) {
+      scrollToMessage(message.createdAt, message.messageId);
+    } else if (isScrollBottomReached) {
+      scrollToBottom();
+    }
+  };
+
   const renderer = {
     frozenNotification() {
       if (!currentChannel || !currentChannel.isFrozen) return null;
@@ -331,6 +351,7 @@ export const MessageList = (props: GroupChannelMessageListProps) => {
                   renderSuggestedReplies,
                   renderCustomSeparator,
                   onNewMessageSeparatorVisibilityChange: checkDisplayedNewMessageSeparator,
+                  forceScrollToMessage,
                 })}
               </MessageProvider>
             );
diff --git a/src/modules/GroupChannel/context/GroupChannelProvider.tsx b/src/modules/GroupChannel/context/GroupChannelProvider.tsx
@@ -56,6 +56,7 @@ const initialState = () => ({
   isReactionEnabled: false,
   isMessageGroupingEnabled: true,
   isMultipleFilesMessageEnabled: false,
+  isFocusOnLastMessage: false,
   showSearchIcon: true,
   replyType: 'NONE',
   threadReplySelectType: ThreadReplySelectType.PARENT,
@@ -83,6 +84,7 @@ export const InternalGroupChannelProvider = (props: GroupChannelProviderProps) =
     isReactionEnabled: props?.isReactionEnabled,
     isMessageGroupingEnabled: props?.isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled: props?.isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage: props?.isFocusOnLastMessage,
     showSearchIcon: props?.showSearchIcon,
     threadReplySelectType: props?.threadReplySelectType,
     disableMarkAsRead: props?.disableMarkAsRead,
@@ -125,6 +127,7 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
     threadReplySelectType: moduleThreadReplySelectType,
     isMessageGroupingEnabled = true,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage,
     showSearchIcon,
     disableMarkAsRead = false,
     scrollBehavior = 'auto',
@@ -224,7 +227,11 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
         // even though the next messages and the current messages length are the same.
         // So added this condition to check if they are the same to prevent unnecessary calling scrollToBottom action
         && messages.length !== state.messages.length) {
-        setTimeout(async () => actions.scrollToBottom(true), 10);
+        if (!isFocusOnLastMessage) {
+          setTimeout(async () => actions.scrollToBottom(true), 10);
+        } else {
+          actions.setNewMessageIds(messages.map(it => it.messageId));
+        }
       }
     },
     onChannelDeleted: () => {
@@ -271,6 +278,7 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
     }
 
     const handleExternalMessage = (data) => {
+      // send message
       if (data.channel.url === state.currentChannel?.url) {
         actions.scrollToBottom(true);
       }
@@ -339,6 +347,7 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
     isReactionEnabled: resolvedIsReactionEnabled,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage: isFocusOnLastMessage ?? false,
     replyType: resolvedReplyType,
     threadReplySelectType: resolvedThreadReplySelectType,
     showSearchIcon: showSearchIcon ?? config.groupChannelSettings.enableMessageSearch,
@@ -348,6 +357,7 @@ const GroupChannelManager :React.FC<React.PropsWithChildren<GroupChannelProvider
     resolvedIsReactionEnabled,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    isFocusOnLastMessage,
     resolvedReplyType,
     resolvedThreadReplySelectType,
     showSearchIcon,
diff --git a/src/modules/GroupChannel/context/hooks/useGroupChannel.ts b/src/modules/GroupChannel/context/hooks/useGroupChannel.ts
@@ -35,6 +35,8 @@ export interface GroupChannelActions extends MessageActions {
   sendMultipleFilesMessage: (params: MultipleFilesMessageCreateParams) => Promise<MultipleFilesMessage>;
   updateUserMessage: (messageId: number, params: UserMessageUpdateParams) => Promise<UserMessage>;
 
+  setNewMessageIds: (ids: number[]) => void;
+
   // UI actions
   setQuoteMessage: (message: SendableMessageType | null) => void;
   setAnimatedMessageId: (messageId: number | null) => void;
@@ -205,6 +207,10 @@ export const useGroupChannel = () => {
     store.setState(state => ({ ...state, firstUnreadMessageId: messageId }));
   }, []);
 
+  const setNewMessageIds = useCallback((newMessageIds: number[]) => {
+    store.setState(state => ({ ...state, newMessageIds }));
+  }, []);
+
   const actions: GroupChannelActions = useMemo(() => {
     return {
       setCurrentChannel,
@@ -213,6 +219,7 @@ export const useGroupChannel = () => {
       markAsUnread: state.markAsUnread,
       setReadStateChanged,
       setFirstUnreadMessageId,
+      setNewMessageIds,
       setQuoteMessage,
       scrollToBottom,
       scrollToMessage,
diff --git a/src/modules/GroupChannel/context/types.ts b/src/modules/GroupChannel/context/types.ts

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,6 @@ export function PlaygroundPage() {`
`10`	`10`	`replyType: 'thread',`
`11`	`11`	`}`
`12`	`12`	`}}`
	`13`	`+ // isFocusOnLastMessage={true}`
`13`	`14`	`/>;`
`14`	`15`	`}`