QA for modularization phase 1

src/components/BotMessageWithBodyInput.tsx

@@ -12,7 +12,6 @@ const Root = styled.span`
   display: flex;
   flex-direction: row;
   align-items: flex-end;
-  margin-bottom: 6px;
   gap: 8px;
   position: relative;
 `;

src/components/CurrentUserMessage.tsx

@@ -9,9 +9,7 @@ const Root = styled.div<{ enableEmojiFeedback: boolean }>`
   display: flex;
   justify-content: flex-end;
   align-items: end;
-  margin-bottom: 6px;
   gap: 4px;
-  margin-top: ${({ enableEmojiFeedback }) => (enableEmojiFeedback ? '16px' : '0')};
 `;
 
 type Props = {

src/components/CustomMessage.tsx

@@ -30,17 +30,20 @@ type Props = {
 
 export default function CustomMessage(props: Props) {
   const { message, activeSpinnerId, botUser } = props;
-  const { replacementTextList, enableEmojiFeedback, botStudioEditProps } = useConstantState();
+  const { replacementTextList, enableEmojiFeedback, botStudioEditProps = {} } = useConstantState();
   const { userId: currentUserId } = useWidgetSession();
-  const { profileUrl } = botStudioEditProps?.botInfo ?? {};
+  const { botInfo } = botStudioEditProps;
 
   const botUserId = botUser?.userId;
-  const botProfileUrl = profileUrl ?? botUser?.profileUrl ?? '';
+  const botProfileUrl = botInfo?.profileUrl ?? botUser?.profileUrl ?? '';
   const isWaitingForBotReply = activeSpinnerId === message.messageId && !!botUser;
 
   const shouldRenderFeedback = () => {
     return (
-      enableEmojiFeedback && message.myFeedbackStatus !== 'NOT_APPLICABLE' && !messageExtension.isStreaming(message)
+      enableEmojiFeedback &&
+      message.myFeedbackStatus !== 'NOT_APPLICABLE' &&
+      !messageExtension.isStreaming(message) &&
+      !messageExtension.isBotWelcomeMsg(message, botUserId ?? '')
     );
   };
 
@@ -65,7 +68,7 @@ export default function CustomMessage(props: Props) {
       return (
         <div>
           <CurrentUserMessage message={message} />
-          {isWaitingForBotReply && <CustomTypingIndicatorBubble botProfileUrl={botProfileUrl} />}
+          {isWaitingForBotReply && <CustomTypingIndicatorBubble />}
         </div>
       );
     }

src/components/CustomTypingIndicatorBubble.tsx

@@ -1,9 +1,18 @@
 import BotProfileImage from './BotProfileImage';
+import { useChatContext } from './chat/context/ChatProvider';
+import { useConstantState } from '../context/ConstantContext';
 import { TypingBubble } from '../foundation/components/TypingBubble';
 
-function CustomTypingIndicatorBubble({ botProfileUrl }: { botProfileUrl: string }) {
+function CustomTypingIndicatorBubble() {
+  const { botStudioEditProps = {}, botId } = useConstantState();
+  const { channel } = useChatContext();
+
+  const botUser = channel?.members.find((member) => member.userId === botId);
+  const botInfo = botStudioEditProps.botInfo;
+  const botProfileUrl = botInfo?.profileUrl ?? botUser?.profileUrl;
+
   return (
-    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
+    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginTop: 16 }}>
       <BotProfileImage size={28} profileUrl={botProfileUrl} />
       <TypingBubble />
     </div>

src/components/SuggestedRepliesContainer.tsx

@@ -11,11 +11,13 @@ interface Props {
 const SuggestedRepliesContainer = ({ replies = [], type = 'vertical', sendUserMessage }: Props) => {
   if (replies.length <= 0) return null;
   return (
-    <SuggestedReplies
-      replyOptions={replies}
-      onSendMessage={({ message }) => sendUserMessage?.({ message })}
-      type={type}
-    />
+    <div style={{ marginTop: 8 }}>
+      <SuggestedReplies
+        replyOptions={replies}
+        onSendMessage={({ message }) => sendUserMessage?.({ message })}
+        type={type}
+      />
+    </div>
   );
 };
 

src/components/UserMessageWithBodyInput.tsx

@@ -13,7 +13,6 @@ import { formatCreatedAtToAMPM } from '../utils/messageTimestamp';
 const Root = styled.div`
   display: flex;
   align-items: flex-end;
-  margin-bottom: 6px;
   flex-wrap: wrap;
   gap: 8px;
   position: relative;

src/components/chat/hooks/useBotStudioView.tsx

@@ -64,7 +64,7 @@ export const useBotStudioView = () => {
               const isLastMessage = index === welcomeMessages.length - 1;
 
               return (
-                <div key={index} style={{ padding: '0 16px' }}>
+                <div key={index} style={{ padding: '0 16px', marginBottom: 16 }}>
                   <BotMessageWithBodyInput
                     chainTop={index === 0}
                     chainBottom={index === welcomeMessages.length - 1}
@@ -99,4 +99,5 @@ export const useBotStudioView = () => {
 
 const dateSeparatorMargin = css`
   margin: 8px 0;
+  padding: 0 16px;
 `;

src/components/chat/ui/ChatMessageList.tsx

@@ -62,29 +62,31 @@ export const ChatMessageList = () => {
                   formatString={stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR}
                 />
               )}
-              <CustomMessage
-                message={message as any}
-                botUser={isSendableMessage(message) ? message.sender : undefined}
-                activeSpinnerId={typingTargetMessageId}
-                chainTop={top}
-                chainBottom={bottom}
-              />
+              <div style={{ marginBottom: index === filteredMessages.length - 1 ? 0 : 16 }}>
+                <CustomMessage
+                  message={message as any}
+                  botUser={isSendableMessage(message) ? message.sender : undefined}
+                  activeSpinnerId={typingTargetMessageId}
+                  chainTop={top}
+                  chainBottom={bottom}
+                />
 
-              {message.data &&
-                isDashboardPreview(customUserAgentParam) &&
-                message.messageId === channel?.lastMessage?.messageId && (
-                  <MessageDataContent messageData={message.data} />
+                {message.data &&
+                  isDashboardPreview(customUserAgentParam) &&
+                  message.messageId === channel?.lastMessage?.messageId && (
+                    <MessageDataContent messageData={message.data} />
+                  )}
+
+                {showRepliesOnLastMessage && suggestedReplies.length > 0 && (
+                  <SuggestedRepliesContainer
+                    replies={suggestedReplies}
+                    type={botStudioEditProps?.suggestedRepliesDirection}
+                    sendUserMessage={(params) => {
+                      dataSource.sendUserMessage(params, handlers.onAfterSendMessage).then(handlers.onAfterSendMessage);
+                    }}
+                  />
                 )}
-
-              {showRepliesOnLastMessage && suggestedReplies.length > 0 && (
-                <SuggestedRepliesContainer
-                  replies={suggestedReplies}
-                  type={botStudioEditProps?.suggestedRepliesDirection}
-                  sendUserMessage={(params) => {
-                    dataSource.sendUserMessage(params, handlers.onAfterSendMessage).then(handlers.onAfterSendMessage);
-                  }}
-                />
-              )}
+              </div>
             </div>
           );
         }}

src/foundation/components/DateSeparator/css.ts

@@ -3,7 +3,7 @@ import { css } from '@linaria/core';
 export const dateSeparatorContainer = css`
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  align-items: center;
 `;
 
 export const dateSeparatorLabel = css`

src/foundation/components/InfiniteMessageList/css.ts

@@ -11,7 +11,7 @@ export const infiniteListInner = css`
   display: flex;
   flex: 1;
   flex-direction: column;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 export const infiniteListOverlayContainer = css`

src/foundation/components/TypingBubble/css.ts

@@ -2,7 +2,7 @@ import { css } from '@linaria/core';
 
 export const typingDotContainer = css`
   align-items: center;
-  border-radius: 16px;
+  border-radius: 100px;
   display: flex;
   gap: 6px;
   justify-content: center;