fix: message gap styles

sendbird · Aug 29, 2024 · cf7633e · cf7633e
1 parent 01112c1
commit cf7633e
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
           );
         }}