feat: modify emoji display condition

src/components/BotMessageWithBodyInput.tsx

@@ -61,12 +61,13 @@ type Props = {
   messageCount?: number;
   zIndex?: number;
   bodyStyle?: object;
+  isBotWelcomeMessage?: boolean;
 };
 
 const ImageContainer = styled.div``;
 
 const EmptyImageContainer = styled.div`
-  width: 30px;
+  width: 28px;
 `;
 
 export default function BotMessageWithBodyInput(props: Props) {
@@ -80,11 +81,13 @@ export default function BotMessageWithBodyInput(props: Props) {
     bodyStyle,
     chainTop,
     chainBottom,
+    isBotWelcomeMessage,
   } = props;
 
   const nonChainedMessage = chainTop == null && chainBottom == null;
   const displayProfileImage = nonChainedMessage || chainBottom;
   const displaySender = nonChainedMessage || chainTop;
+
   return (
     <Root style={{ zIndex: messageCount === 1 && zIndex ? zIndex : 0 }}>
       {displayProfileImage ? (
@@ -111,7 +114,9 @@ export default function BotMessageWithBodyInput(props: Props) {
           </Sender>
         )}
         {bodyComponent}
-        {enableEmojiFeedback && <ReactionContainer message={message} />}
+        {enableEmojiFeedback && displayProfileImage && !isBotWelcomeMessage && (
+          <ReactionContainer message={message} />
+        )}
       </BodyContainer>
       <SentTime>{formatCreatedAtToAMPM(message.createdAt)}</SentTime>
     </Root>

src/components/CustomMessage.tsx

@@ -1,6 +1,7 @@
 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';
 
@@ -20,6 +21,7 @@ import {
   replaceUrl,
   Token,
 } from '../utils';
+import { getBotWelcomeMessages } from '../utils/messages';
 
 type Props = {
   message: EveryMessage;
@@ -45,6 +47,16 @@ export default function CustomMessage(props: Props) {
   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>;
@@ -71,9 +83,9 @@ export default function CustomMessage(props: Props) {
           }
           messageCount={allMessages.length}
           zIndex={30}
-          bodyStyle={{ maxWidth: '255px', width: 'calc(100% - 98px)' }}
           chainTop={chainTop}
           chainBottom={chainBottom}
+          isBotWelcomeMessage={isBotWelcomeMessage}
         />
       </div>
     );
@@ -94,6 +106,7 @@ export default function CustomMessage(props: Props) {
           messageCount={allMessages.length}
           chainTop={chainTop}
           chainBottom={chainBottom}
+          isBotWelcomeMessage={isBotWelcomeMessage}
         />
       );
     }
@@ -125,6 +138,7 @@ export default function CustomMessage(props: Props) {
         }
         chainTop={chainTop}
         chainBottom={chainBottom}
+        isBotWelcomeMessage={isBotWelcomeMessage}
       />
     </div>
   );

src/components/ParsedBotMessageBody.tsx

@@ -61,7 +61,7 @@ export default function ParsedBotMessageBody(props: Props) {
     : [];
 
   // console.log('## sources: ', sources);
-  if (tokens.length > 0 && enableSourceMessage) {
+  if (tokens.length > 0) {
     return (
       <Root>
         {tokens.map((token: Token, i) => {
@@ -81,7 +81,7 @@ export default function ParsedBotMessageBody(props: Props) {
             </BlockContainer>
           );
         })}
-        {sources.length > 0 ? (
+        {sources.length > 0 && enableSourceMessage ? (
           <>
             <SourceContainer sources={sources} />
             <BotMessageBottom />

src/const.ts

@@ -50,15 +50,15 @@ export const DEFAULT_CONSTANT: Constant = {
     ],
   },
   firstMessageData: [
-    {
-      data: {
-        quick_replies: [
-          'What can I learn from Pre-K 8th grade?',
-          'Tell me about Math',
-        ],
-      },
-      message: "Hi~ I'm Khan Academy Support ChatBot. Ask me anything!",
-    },
+    // {
+    //   data: {
+    //     quick_replies: [
+    //       'What can I learn from Pre-K 8th grade?',
+    //       'Tell me about Math',
+    //     ],
+    //   },
+    //   message: "Hi~ I'm Khan Academy Support ChatBot. Ask me anything!",
+    // },
   ],
   createGroupChannelParams: {
     name: 'Sendbird AI Chatbot',

src/main.tsx

@@ -6,8 +6,6 @@ import { DEFAULT_CONSTANT } from './const';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App 
-      firstMessageData={DEFAULT_CONSTANT.firstMessageData}
-    />
+    <App firstMessageData={DEFAULT_CONSTANT.firstMessageData} />
   </React.StrictMode>
 );

src/utils/messages.ts

@@ -53,3 +53,24 @@ export function groupMessagesByShortSpanTime(
     }
   );
 }
+
+export function getBotWelcomeMessages(
+  messages: EveryMessage[],
+  botUserId: string
+) {
+  // if the list is empty or the first message is not from bot,
+  // we just assume there's no welcome messages
+  if (messages.length === 0 || messages[0]?.sender.userId !== botUserId) {
+    return [];
+  }
+
+  // if the list has only bot messages, then just return the whole list
+  if (messages.every((message) => message?.sender.userId === botUserId)) {
+    return messages;
+  }
+
+  const firstUserMesssage = messages.find(
+    (message) => message?.sender.userId !== botUserId
+  );
+  return messages.slice(0, messages.indexOf(firstUserMesssage));
+}