move isBotWelcomeMessage calc logic to the upper level component

src/components/CustomChannelComponent.tsx

@@ -17,7 +17,10 @@ import DynamicRepliesPanel from './DynamicRepliesPanel';
 import { useConstantState } from '../context/ConstantContext';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
 import { isSpecialMessage, scrollUtil } from '../utils';
-import { groupMessagesByShortSpanTime } from '../utils/messages';
+import {
+  groupMessagesByShortSpanTime,
+  getBotWelcomeMessages,
+} from '../utils/messages';
 
 const Root = styled.div<{ hidePlaceholder: boolean; height: string }>`
   height: ${({ height }) => height};
@@ -126,6 +129,10 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
     [allMessages.length]
   );
 
+  const botWelcomeMessages = useMemo(() => {
+    return getBotWelcomeMessages(allMessages, botUser.userId);
+  }, [allMessages.length]);
+
   return (
     <Root hidePlaceholder={startingPagePlaceHolder} height={'100%'}>
       <ChannelUI
@@ -158,6 +165,10 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
           const grouppedMessage = grouppedMessages.find(
             (m) => m.messageId == message.messageId
           );
+
+          const isBotWelcomeMessage = !!botWelcomeMessages.find(
+            (welcomeMessage) => welcomeMessage.messageId === message.messageId
+          );
           return (
             <>
               <CustomMessage
@@ -167,6 +178,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
                 lastMessageRef={lastMessageRef}
                 chainTop={grouppedMessage?.chaintop}
                 chainBottom={grouppedMessage?.chainBottom}
+                isBotWelcomeMessage={isBotWelcomeMessage}
               />
               {message.messageId === lastMessage.messageId &&
                 dynamicReplyOptions.length > 0 && (

src/components/CustomMessage.tsx

@@ -1,7 +1,6 @@
 import { User } from '@sendbird/chat';
 import { UserMessage } from '@sendbird/chat/message';
 import { useChannelContext } from '@sendbird/uikit-react/Channel/context';
-import { useMemo } from 'react';
 // eslint-disable-next-line import/no-unresolved
 import { EveryMessage } from 'SendbirdUIKitGlobal';
 
@@ -21,7 +20,6 @@ import {
   replaceUrl,
   Token,
 } from '../utils';
-import { getBotWelcomeMessages } from '../utils/messages';
 
 type Props = {
   message: EveryMessage;
@@ -30,6 +28,7 @@ type Props = {
   lastMessageRef: React.RefObject<HTMLDivElement>;
   chainTop?: boolean;
   chainBottom?: boolean;
+  isBotWelcomeMessage: boolean;
 };
 
 export default function CustomMessage(props: Props) {
@@ -40,23 +39,14 @@ export default function CustomMessage(props: Props) {
     lastMessageRef,
     chainTop,
     chainBottom,
+    isBotWelcomeMessage,
   } = props;
   const { replacementTextList } = useConstantState();
 
   const { allMessages } = useChannelContext();
   const firstMessage: UserMessage = allMessages[0] as UserMessage;
   const firstMessageId = firstMessage?.messageId ?? -1;
 
-  const isBotWelcomeMessage = useMemo(() => {
-    const botWelcomeMessages = getBotWelcomeMessages(
-      allMessages,
-      botUser.userId
-    );
-    return !!botWelcomeMessages.find(
-      (welcomeMessage) => welcomeMessage.messageId === message.messageId
-    );
-  }, [allMessages.length]);
-
   // admin message
   if (message.messageType === 'admin') {
     return <div>{<AdminMessage message={message} />}</div>;