fix: Fix markdown lazy load preview message background color

src/components/ParsedBotMessageBody.tsx

@@ -1,3 +1,4 @@
+import { css } from '@linaria/core';
 import { lazy, Suspense } from 'react';
 import styled from 'styled-components';
 
@@ -12,13 +13,17 @@ type Props = {
   sources?: Source[];
 };
 
-const TextContainer = styled.div`
-  width: inherit;
-  text-align: start;
+const textContainerStyle = css`
   word-break: break-word;
-  padding: 8px 12px;
-  gap: 12px;
   white-space: pre-wrap;
+  padding: 0 12px; // apply side padding of the bubble
+`;
+
+const Container = styled.div`
+  padding: 8px 0; // Bubble top and bottom padding. Side padding is applied for token containers.
+  border-radius: 16px;
+  overflow: auto;
+  background-color: ${({ theme }) => theme.bgColor.incomingMessage};
 `;
 
 /**
@@ -30,14 +35,10 @@ export default function ParsedBotMessageBody(props: Props) {
   const { text, tokens, sources } = props;
 
   return (
-    <Suspense
-      fallback={
-        <TextContainer className="sendbird-word" style={{ borderRadius: 16 }}>
-          {text}
-        </TextContainer>
-      }
-    >
-      <TokensBody tokens={tokens} sources={sources} />
-    </Suspense>
+    <Container>
+      <Suspense fallback={<div className={textContainerStyle}>{text}</div>}>
+        <TokensBody className={textContainerStyle} tokens={tokens} sources={sources} />
+      </Suspense>
+    </Container>
   );
 }

src/components/TokensBody.tsx

@@ -1,3 +1,4 @@
+import { cx } from '@linaria/core';
 import DOMPurify from 'dompurify';
 import Markdown from 'markdown-to-jsx';
 import styled from 'styled-components';
@@ -13,6 +14,7 @@ import './markdown.scss';
 type TokensBodyProps = {
   tokens: Token[];
   sources?: Source[];
+  className?: string;
 };
 
 const BlockContainer = styled.div`
@@ -24,23 +26,16 @@ const BlockContainer = styled.div`
   margin: 0.5em 0;
 `;
 
-const MultipleTokenTypeContainer = styled.div`
-  padding: 8px 0; // Bubble top and bottom padding. Side padding is applied for token containers.
-  border-radius: 16px;
-  overflow: auto;
-  background-color: ${({ theme }) => theme.bgColor.incomingMessage};
-`;
-
-export default function TokensBody({ tokens, sources }: TokensBodyProps) {
+export default function TokensBody({ tokens, sources, className }: TokensBodyProps) {
   const { enableSourceMessage } = useConstantState();
 
   return (
-    <MultipleTokenTypeContainer className="sendbird-word">
+    <>
       {tokens.map((token: Token, i) => {
         // Normal text part of the message.
         if (token.type === TokenType.string) {
           return (
-            <div key={i} className="widget-markdown">
+            <div key={i} className={cx(className, 'widget-markdown')}>
               <Markdown
                 options={{
                   sanitizer: (value: string) => {
@@ -95,6 +90,6 @@ export default function TokensBody({ tokens, sources }: TokensBodyProps) {
           <BotMessageBottom />
         </div>
       ) : null}
-    </MultipleTokenTypeContainer>
+    </>
   );
 }

src/components/markdown.scss

@@ -1,7 +1,3 @@
-.widget-markdown {
-  padding: 0 12px; /* apply side padding of the bubble */
-}
-
 .widget-markdown * {
   color: var(--sb-on-content-inverse-1);
 }