fix: Move message list scroll after OG image is loaded (#505)

### Description Of Changes
* Move the scroll of the message list after loading the OG message's thumbnail image

[UIKIT-3724](https://sendbird.atlassian.net/browse/UIKIT-3724)

Author: HoonBaek

scripts/index_d_ts

@@ -597,7 +597,7 @@ declare module "SendbirdUIKitGlobal" {
     hasSeparator?: boolean;
     chainTop?: boolean;
     chainBottom?: boolean;
-    handleScroll: () => void;
+    handleScroll?: () => void;
     // for extending
     renderMessage?: (props: RenderMessageProps) => React.ReactNode | React.ReactElement;
     renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;

src/modules/Channel/components/Message/index.tsx

@@ -32,7 +32,7 @@ type MessageUIProps = {
   hasSeparator?: boolean;
   chainTop?: boolean;
   chainBottom?: boolean;
-  handleScroll: () => void;
+  handleScroll?: () => void;
   // for extending
   renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
@@ -137,6 +137,7 @@ const Message = ({
     }));
   }, [mentionedUserIds]);
 
+  // Move the messsage list scroll when the last message's height is changed by reactions
   useDidMountEffect(() => {
     if (currentGroupChannel?.lastMessage?.messageId === message?.messageId) {
       handleScroll?.();
@@ -358,6 +359,7 @@ const Message = ({
             setQuoteMessage={setQuoteMessage}
             onReplyInThread={onReplyInThread}
             onQuoteMessageClick={onQuoteMessageClick}
+            onMessageHeightChange={handleScroll}
           />
         )
       }

src/modules/Channel/components/MessageList/index.tsx

@@ -103,7 +103,7 @@ const MessageList: React.FC<MessageListProps> = ({
     }
   };
 
-  const handleScroll = () => {
+  const handleMessageHeightChange = () => {
     const current = scrollRef?.current;
     if (current) {
       const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
@@ -156,7 +156,7 @@ const MessageList: React.FC<MessageListProps> = ({
             return (
               <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
                 <Message
-                  handleScroll={handleScroll}
+                  handleScroll={handleMessageHeightChange}
                   renderMessage={renderMessage}
                   message={m}
                   hasSeparator={hasSeparator}

src/ui/MessageContent/index.tsx

@@ -79,6 +79,7 @@ interface Props {
   setQuoteMessage?: (message: UserMessage | FileMessage) => void;
   onReplyInThread?: (props: { message: UserMessage | FileMessage }) => void;
   onQuoteMessageClick?: (props: { message: UserMessage | FileMessage }) => void;
+  onMessageHeightChange?: () => void;
 }
 export default function MessageContent({
   className,
@@ -103,6 +104,7 @@ export default function MessageContent({
   setQuoteMessage,
   onReplyInThread,
   onQuoteMessageClick,
+  onMessageHeightChange,
 }: Props): ReactElement {
   const messageTypes = getUIKitMessageTypes();
   const { dateLocale } = useLocalization();
@@ -311,6 +313,7 @@ export default function MessageContent({
               mouseHover={mouseHover}
               isMentionEnabled={config?.isMentionEnabled || false}
               isReactionEnabled={isReactionEnabledInChannel}
+              onMessageHeightChange={onMessageHeightChange}
             />
           )}
           {(getUIKitMessageType((message as FileMessage)) === messageTypes.FILE) && (

src/ui/OGMessageItemBody/index.tsx

@@ -23,6 +23,7 @@ interface Props {
   mouseHover?: boolean;
   isMentionEnabled?: boolean;
   isReactionEnabled?: boolean;
+  onMessageHeightChange?: () => void;
 }
 
 export default function OGMessageItemBody({
@@ -32,6 +33,7 @@ export default function OGMessageItemBody({
   mouseHover = false,
   isMentionEnabled = false,
   isReactionEnabled = false,
+  onMessageHeightChange = () => { /* noop */ },
 }: Props): ReactElement {
   const imageRef = useRef<HTMLDivElement>(null);
   const { stringSet } = useContext(LocalizationContext);
@@ -85,6 +87,7 @@ export default function OGMessageItemBody({
         onClick={openOGUrl}
       >
         <ImageRenderer
+          onLoad={onMessageHeightChange}
           onError={() => {
             try {
               imageRef?.current?.classList?.add('sendbird-og-message-item-body__og-thumbnail__empty');