From cf7633e83c06b28a6016245033f697d2a4c0097c Mon Sep 17 00:00:00 2001
From: bang9 <gusrn1423@naver.com>
Date: Wed, 28 Aug 2024 11:53:33 +0900
Subject: [PATCH] fix: message gap styles

---
 src/components/BotMessageWithBodyInput.tsx    |  1 -
 src/components/CurrentUserMessage.tsx         |  2 -
 .../CustomTypingIndicatorBubble.tsx           |  2 +-
 src/components/SuggestedRepliesContainer.tsx  | 12 ++---
 src/components/UserMessageWithBodyInput.tsx   |  1 -
 src/components/chat/ui/ChatMessageList.tsx    | 44 ++++++++++---------
 6 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx
index ea58c57c6..ae41ff029 100644
--- a/src/components/BotMessageWithBodyInput.tsx
+++ b/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;
 `;
diff --git a/src/components/CurrentUserMessage.tsx b/src/components/CurrentUserMessage.tsx
index 67493d1de..ffd159e58 100644
--- a/src/components/CurrentUserMessage.tsx
+++ b/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 = {
diff --git a/src/components/CustomTypingIndicatorBubble.tsx b/src/components/CustomTypingIndicatorBubble.tsx
index 0fbdc64a8..e1b6baaf1 100644
--- a/src/components/CustomTypingIndicatorBubble.tsx
+++ b/src/components/CustomTypingIndicatorBubble.tsx
@@ -3,7 +3,7 @@ import { TypingBubble } from '../foundation/components/TypingBubble';
 
 function CustomTypingIndicatorBubble({ botProfileUrl }: { botProfileUrl: string }) {
   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>
diff --git a/src/components/SuggestedRepliesContainer.tsx b/src/components/SuggestedRepliesContainer.tsx
index 29c950f42..c9b957c44 100644
--- a/src/components/SuggestedRepliesContainer.tsx
+++ b/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>
   );
 };
 
diff --git a/src/components/UserMessageWithBodyInput.tsx b/src/components/UserMessageWithBodyInput.tsx
index a741d87f6..b05970085 100644
--- a/src/components/UserMessageWithBodyInput.tsx
+++ b/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;
diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx
index 85031a0e3..36dbc6bb6 100644
--- a/src/components/chat/ui/ChatMessageList.tsx
+++ b/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>
           );
         }}