Remove unused component & little bit of refactoring

src/components/Chat.tsx

@@ -25,7 +25,6 @@ const SBComponent = () => {
     userId,
     userNickName,
     configureSession,
-    enableEmojiFeedback,
     enableMention,
     customUserAgentParam,
   } = useConstantState();
@@ -76,7 +75,6 @@ const SBComponent = () => {
       configureSession={configureSession}
       customExtensionParams={userAgentCustomParams.current}
       breakPoint={isMobile}
-      isReactionEnabled={enableEmojiFeedback}
       isMentionEnabled={enableMention}
       theme={theme}
       colorSet={customColorSet}

src/components/CustomChannelComponent.tsx

@@ -131,6 +131,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
     (lastMessage as ClientUserMessage)?.sender?.userId === botUser.userId;
 
   const [activeSpinnerId, setActiveSpinnerId] = useState(-1);
+  const messageCount = allMessages?.length ?? 0;
 
   const lastMessageMeta = useMemo(() => {
     let messageMeta: MessageMeta | null;
@@ -151,7 +152,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
 
   const isStaticReplyVisible =
     allMessages &&
-    allMessages.length > 1 &&
+    messageCount > 1 &&
     !(lastMessage?.messageType === 'admin') &&
     lastMessage.sender?.userId === botUser.userId &&
     // in streaming
@@ -193,12 +194,12 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
 
   const grouppedMessages = useMemo(
     () => groupMessagesByShortSpanTime(allMessages),
-    [allMessages.length]
+    [messageCount]
   );
 
   const botWelcomeMessages = useMemo(() => {
     return getBotWelcomeMessages(allMessages, botUser.userId);
-  }, [allMessages.length]);
+  }, [messageCount]);
   return (
     <Root height={'100%'}>
       <ChannelUI
@@ -231,6 +232,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
                 chainTop={grouppedMessage?.chaintop}
                 chainBottom={grouppedMessage?.chainBottom}
                 isBotWelcomeMessage={isBotWelcomeMessage}
+                messageCount={messageCount}
               />
               {message.messageId === lastMessage.messageId &&
                 dynamicReplyOptions.length > 0 && (

src/components/CustomMessage.tsx

@@ -1,6 +1,5 @@
 import { User } from '@sendbird/chat';
 import { UserMessage } from '@sendbird/chat/message';
-import { useChannelContext } from '@sendbird/uikit-react/Channel/context';
 // eslint-disable-next-line import/no-unresolved
 import { EveryMessage } from 'SendbirdUIKitGlobal';
 
@@ -29,9 +28,10 @@ type Props = {
   activeSpinnerId: number;
   botUser: User;
   lastMessageRef: React.RefObject<HTMLDivElement>;
+  isBotWelcomeMessage: boolean;
+  messageCount: number;
   chainTop?: boolean;
   chainBottom?: boolean;
-  isBotWelcomeMessage: boolean;
 };
 
 export default function CustomMessage(props: Props) {
@@ -43,11 +43,10 @@ export default function CustomMessage(props: Props) {
     chainTop,
     chainBottom,
     isBotWelcomeMessage,
+    messageCount,
   } = props;
   const { replacementTextList, userId } = useConstantState();
 
-  const { allMessages } = useChannelContext();
-
   // admin message
   if (message.messageType === 'admin') {
     return <div>{<AdminMessage message={message} />}</div>;
@@ -60,7 +59,7 @@ export default function CustomMessage(props: Props) {
         botUser={botUser}
         message={message}
         bodyComponent={<FormMessage form={forms[0]} message={message} />}
-        messageCount={allMessages.length}
+        messageCount={messageCount}
         chainTop={chainTop}
         chainBottom={chainBottom}
         isBotWelcomeMessage={isBotWelcomeMessage}
@@ -111,7 +110,7 @@ export default function CustomMessage(props: Props) {
           bodyComponent={
             <SuggestedReplyMessageBody message={message as UserMessage} />
           }
-          messageCount={allMessages.length}
+          messageCount={messageCount}
           chainTop={chainTop}
           chainBottom={chainBottom}
           isBotWelcomeMessage={isBotWelcomeMessage}
@@ -137,7 +136,7 @@ export default function CustomMessage(props: Props) {
       <BotMessageWithBodyInput
         botUser={botUser}
         message={message}
-        messageCount={allMessages.length}
+        messageCount={messageCount}
         bodyComponent={
           <ParsedBotMessageBody
             message={message as UserMessage}

src/hooks/useChannelStyle.ts

@@ -2,7 +2,6 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 const DEFAULT_CHANNEL_STYLE = {
-  autoOpen: true,
   theme: 'light',
   accentColor: '#742DDD',
   botMessageBGColor: '#EEEEEE',