[CLNP-7850]Add feature to scroll to top of new message instead of bottom (#1378)

// PR title (Required)
[feat]: Add feature to scroll to top of new message instead of bottom

// PR description (Optional)
Added `isFocusOnLastMessage` as a prop to `SendbirdProvider`.
If this prop is set to true, then when a new message arrives and its
height exceeds the screen, the scroll position will not automatically
jump to the bottom. Instead, it will move to the top position of that
new message.

// Footer (Recommended)
feat [CLNP-7850](https://sendbird.atlassian.net/browse/CLNP-7850)

### Changelogs
- Added a new `isFocusOnLastMessage` prop to `SendbirdProvider`
When set to true, if a newly received message is taller than the
viewport, the scroll position will not auto-jump to the bottom.
Instead, the view scrolls to the top of the new message, keeping the
start of the message in focus.

### Checklist

Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If unsure, ask the members.
This is a reminder of what we look for before merging your code.

- [x] **All tests pass locally with my changes**
- [ ] **I have added tests that prove my fix is effective or that my
feature works**
- [ ] **Public components / utils / props are appropriately exported**
- [ ] I have added necessary documentation (if appropriate)


## External Contributions



[CLNP-7850]:
https://sendbird.atlassian.net/browse/CLNP-7850?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: danney-chun

apps/testing/src/pages/PlaygroundPage.tsx

@@ -10,5 +10,6 @@ export function PlaygroundPage() {
         replyType: 'thread',
       }
     }}
+    // autoscrollMessageOverflowToTop={true}
   />;
 }

src/lib/Sendbird/context/SendbirdProvider.tsx

@@ -72,6 +72,7 @@ const SendbirdContextManager = ({
   sdkInitParams,
   customExtensionParams,
   isMultipleFilesMessageEnabled = false,
+  autoscrollMessageOverflowToTop = false,
   eventHandlers,
   htmlTextDirection = 'ltr',
   forceLeftToRightMessageLayout = false,
@@ -288,6 +289,7 @@ const SendbirdContextManager = ({
       setCurrentTheme,
       setCurrenttheme: setCurrentTheme, // deprecated: typo
       isMultipleFilesMessageEnabled,
+      autoscrollMessageOverflowToTop,
       uikitMultipleFilesMessageLimit,
       logger,
       pubSub,
@@ -316,6 +318,7 @@ const SendbirdContextManager = ({
     currentTheme,
     setCurrentTheme,
     isMultipleFilesMessageEnabled,
+    autoscrollMessageOverflowToTop,
     uikitMultipleFilesMessageLimit,
     logger,
     pubSub,
@@ -395,6 +398,7 @@ const InternalSendbirdProvider = (props: SendbirdProviderProps & { logger: Logge
       },
       disableMarkAsDelivered: props?.disableMarkAsDelivered,
       isMultipleFilesMessageEnabled: props?.isMultipleFilesMessageEnabled,
+      autoscrollMessageOverflowToTop: props?.autoscrollMessageOverflowToTop,
     },
     eventHandlers: props?.eventHandlers,
   });

src/lib/Sendbird/context/initialState.ts

@@ -33,6 +33,7 @@ const config: SendbirdStateConfig = {
   forceLeftToRightMessageLayout: false,
   disableMarkAsDelivered: false,
   isMultipleFilesMessageEnabled: false,
+  autoscrollMessageOverflowToTop: false,
   htmlTextDirection: 'ltr',
   uikitUploadSizeLimit: DEFAULT_UPLOAD_SIZE_LIMIT,
   uikitMultipleFilesMessageLimit: DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT,

src/lib/Sendbird/types.ts

@@ -218,6 +218,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps, React.Pro
   sdkInitParams?: SendbirdChatInitParams;
   customExtensionParams?: CustomExtensionParams;
   isMultipleFilesMessageEnabled?: boolean;
+  autoscrollMessageOverflowToTop?: boolean;
   // UserProfile
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   onStartDirectMessage?: (channel: GroupChannel) => void;
@@ -260,6 +261,7 @@ export interface SendbirdStateConfig {
   markAsDeliveredScheduler: MarkAsDeliveredSchedulerType;
   disableMarkAsDelivered: boolean;
   isMultipleFilesMessageEnabled: boolean;
+  autoscrollMessageOverflowToTop: boolean;
   // Remote configs set from dashboard by UIKit feature configuration
   common: {
     enableUsingDefaultUserProfile: SBUConfig['common']['enableUsingDefaultUserProfile'];

src/modules/App/AppLayout.tsx

@@ -13,6 +13,7 @@ import useSendbird from '../../lib/Sendbird/context/hooks/useSendbird';
 export const AppLayout = (props: AppLayoutProps) => {
   const {
     isMessageGroupingEnabled,
+    autoscrollMessageOverflowToTop,
     allowProfileEdit,
     onProfileEditSuccess,
     disableAutoSelect,
@@ -50,6 +51,7 @@ export const AppLayout = (props: AppLayoutProps) => {
               showSearchIcon={showSearchIcon}
               isReactionEnabled={isReactionEnabled}
               isMessageGroupingEnabled={isMessageGroupingEnabled}
+              autoscrollMessageOverflowToTop={autoscrollMessageOverflowToTop}
               allowProfileEdit={allowProfileEdit}
               onProfileEditSuccess={onProfileEditSuccess}
               currentChannel={currentChannel}
@@ -69,6 +71,7 @@ export const AppLayout = (props: AppLayoutProps) => {
               isReactionEnabled={isReactionEnabled}
               showSearchIcon={showSearchIcon}
               isMessageGroupingEnabled={isMessageGroupingEnabled}
+              autoscrollMessageOverflowToTop={autoscrollMessageOverflowToTop}
               allowProfileEdit={allowProfileEdit}
               onProfileEditSuccess={onProfileEditSuccess}
               disableAutoSelect={disableAutoSelect}

src/modules/App/DesktopLayout.tsx

@@ -21,6 +21,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     replyType,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    autoscrollMessageOverflowToTop,
     allowProfileEdit,
     showSearchIcon,
     onProfileEditSuccess,
@@ -104,6 +105,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
     replyType: replyType,
     isMessageGroupingEnabled: isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
+    autoscrollMessageOverflowToTop: autoscrollMessageOverflowToTop,
     // for GroupChannel
     animatedMessageId: highlightedMessage,
     onReplyInThreadClick: onClickThreadReply,

src/modules/App/MobileLayout.tsx

@@ -32,6 +32,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     replyType,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    autoscrollMessageOverflowToTop,
     allowProfileEdit,
     isReactionEnabled,
     showSearchIcon,
@@ -155,6 +156,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
     replyType,
     isMessageGroupingEnabled,
     isMultipleFilesMessageEnabled,
+    autoscrollMessageOverflowToTop,
     // for GroupChannel
     animatedMessageId: highlightedMessage,
     onReplyInThreadClick: ({ message }) => {

src/modules/App/index.tsx

@@ -29,6 +29,7 @@ export interface AppProps {
   config?: SendbirdProviderProps['config'];
   voiceRecord?: SendbirdProviderProps['voiceRecord'];
   isMultipleFilesMessageEnabled?: SendbirdProviderProps['isMultipleFilesMessageEnabled'];
+  autoscrollMessageOverflowToTop?: SendbirdProviderProps['autoscrollMessageOverflowToTop'];
   colorSet?: SendbirdProviderProps['colorSet'];
   stringSet?: SendbirdProviderProps['stringSet'];
   allowProfileEdit?: SendbirdProviderProps['allowProfileEdit'];
@@ -99,6 +100,7 @@ export default function App(props: AppProps) {
     customExtensionParams,
     eventHandlers,
     isMultipleFilesMessageEnabled,
+    autoscrollMessageOverflowToTop = false,
     isUserIdUsedForNickname = true,
     enableLegacyChannelModules = false,
     uikitOptions,
@@ -138,6 +140,7 @@ export default function App(props: AppProps) {
       renderUserProfile={renderUserProfile}
       imageCompression={imageCompression}
       isMultipleFilesMessageEnabled={isMultipleFilesMessageEnabled}
+      autoscrollMessageOverflowToTop={autoscrollMessageOverflowToTop}
       voiceRecord={voiceRecord}
       onStartDirectMessage={(channel) => {
         setCurrentChannel(channel);
@@ -159,6 +162,7 @@ export default function App(props: AppProps) {
       forceLeftToRightMessageLayout={forceLeftToRightMessageLayout}
     >
       <AppLayout
+        autoscrollMessageOverflowToTop={autoscrollMessageOverflowToTop}
         isMessageGroupingEnabled={isMessageGroupingEnabled}
         allowProfileEdit={allowProfileEdit}
         onProfileEditSuccess={onProfileEditSuccess}

src/modules/App/types.ts

@@ -18,6 +18,7 @@ export interface AppLayoutProps {
   forceLeftToRightMessageLayout?: boolean;
   isMessageGroupingEnabled?: boolean;
   isMultipleFilesMessageEnabled?: boolean;
+  autoscrollMessageOverflowToTop?: boolean;
   allowProfileEdit?: boolean;
   showSearchIcon?: boolean;
   onProfileEditSuccess?(user: User): void; // TODO: Unused props, deprecate it

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.
+   */
+  scrollMessageOverflowToTop?: (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,
+    scrollMessageOverflowToTop,
 
     // 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(() => {
+        scrollMessageOverflowToTop(messageScrollRef, message);
+        setNewMessageIds([]);
+      });
+
+      return () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+      };
+    }
+  }, [newMessageIds]);
+
   const renderedCustomSeparator = useMemo(() => renderCustomSeparator?.({ message }) ?? null, [message, renderCustomSeparator]);
 
   const renderChildren = () => {