feat: Support full markdown syntax (#397)

## How to test?
- yarn dev. try copy and paste
[here](https://remarkjs.github.io/react-markdown/) then send a message.
- or send message like below:
- can you give me some random message with some markdown syntax applied?
  - can you give me another one with h1, h2, h3, ol and ul?
- include any other markdown syntax I missed out. give me random
authentic message.
  
You can also test workflow by sending below message:
- give me a markdown message

## Changes
- Added support for wider range of markdown syntaxes

ticket: [AC-4384]

## Additional Notes
- To run snapshot test locally:
https://sendbird.atlassian.net/wiki/spaces/AC/pages/2610724994/Widget+snapshot+test+plan

## Checklist
Before requesting a code review, please check the following:
- [x] **[Required]** CI has passed all checks.
- [ ] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [ ] **[Required]** Unnecessary comments/debugging code have been
removed.
- [ ] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [ ] Ensure the ticket has been updated with the sprint, status, and
story points.


[AC-4384]:
https://sendbird.atlassian.net/browse/AC-4384?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

__visual_tests__/const.ts

@@ -15,4 +15,5 @@ export const WidgetComponentIds = {
   INPUT: '.sendbird-input__input',
   CHIPS_CONTAINER: '.sendbird-form-chip__container',
   FORM: '#aichatbot-widget-form',
+  MARKDOWN: '.widget-markdown',
 };

__visual_tests__/utils/testUtils.ts

@@ -2,7 +2,7 @@ import { expect, Page } from '@playwright/test';
 
 import { getWidgetSessionCache } from './localStorageUtils';
 import { deleteChannel, deleteUser } from './requestUtils';
-import { AppId, BotId, WidgetComponentIds } from '../const';
+import { AppId, BotId, TestUrl, WidgetComponentIds } from '../const';
 
 export async function assertScreenshot(page: Page, screenshotName: string, browserName: string) {
   const name = `${screenshotName}.${browserName}.${process.platform}.png`; // Include the browser and OS architecture info in the filename
@@ -12,12 +12,15 @@ export async function assertScreenshot(page: Page, screenshotName: string, brows
   });
 }
 
-export async function loadWidget(page: Page) {
+export async function loadWidget(page: Page, testUrl = TestUrl) {
+  await page.goto(testUrl);
+  const widgetWindow = page.locator(WidgetComponentIds.WIDGET_BUTTON);
+  await widgetWindow.waitFor({ state: 'visible' });
+
   await page.click(WidgetComponentIds.WIDGET_BUTTON);
   // NOTE: below fails sometimes in CI.
-  const widgetWindow = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
-  await widgetWindow.waitFor({ state: 'visible' });
-  // await page.waitForTimeout(3000);
+  const replies = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await replies.waitFor({ state: 'visible' });
 }
 
 export async function sendTextMessage(page: Page, text: string, waitTime = 1000) {

__visual_tests__/workflow-tests.spec.ts

@@ -1,15 +1,8 @@
 import { test } from '@playwright/test';
 
-import { TestUrl, WidgetComponentIds } from './const';
+import { WidgetComponentIds } from './const';
 import { assertScreenshot, clickNthChip, deleteTestResources, loadWidget, sendTextMessage } from './utils/testUtils';
 
-test.beforeEach(async ({ page }) => {
-  await page.goto(TestUrl);
-
-  const widgetWindow = page.locator(WidgetComponentIds.WIDGET_BUTTON);
-  await widgetWindow.waitFor({ state: 'visible' });
-});
-
 test.afterEach(async ({ page }) => {
   await deleteTestResources(page);
   /**
@@ -58,7 +51,7 @@ test('100', async ({ page, browserName }) => {
   await inputs.nth(3).fill('[email protected]');
   await inputs.nth(4).fill('123-456-7890');
   await submitButton.click();
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(2000);
   await assertScreenshot(page, '100-4', browserName);
 });
 
@@ -137,3 +130,69 @@ test('103', async ({ page, browserName }) => {
   await page.waitForTimeout(2000);
   await assertScreenshot(page, '103-6', browserName);
 });
+
+/**
+ * 104
+ * Workflow - Markdown response
+ * Steps:
+ * 1. Send the trigger message: "give me a markdown message"
+ * 2. Click "Part 2"
+ * 3. Click "Back"
+ * 4. Click "Part 3"
+ * 5. Click "Back"
+ * 6. Click "Part 4"
+ */
+test('104', async ({ page, browserName }) => {
+  await loadWidget(page);
+  // 1
+  await sendTextMessage(page, 'give me a markdown message', 2000);
+
+  // Check if the fallback component is visible
+  const fallback = page.locator(WidgetComponentIds.MARKDOWN);
+  await fallback.first().waitFor({ state: 'visible' });
+  let options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(4).waitFor({ state: 'visible' });
+  await assertScreenshot(page, '104-1', browserName);
+
+  // 2
+  await options.nth(0).click();
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(0).waitFor({ state: 'visible' }); // Wait for go back button to show
+  await assertScreenshot(page, '104-2', browserName);
+  await options.nth(0).click(); // Go back
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(4).waitFor({ state: 'visible' });
+
+  // 3
+  await options.nth(1).click();
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(0).waitFor({ state: 'visible' }); // Wait for go back button to show
+  await assertScreenshot(page, '104-3', browserName);
+  await options.nth(0).click(); // Go back
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(4).waitFor({ state: 'visible' });
+
+  // 4
+  await options.nth(2).click();
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(0).waitFor({ state: 'visible' }); // Wait for go back button to show
+  await assertScreenshot(page, '104-4', browserName);
+  await options.nth(0).click(); // Go back
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(4).waitFor({ state: 'visible' });
+
+  // 5
+  await options.nth(3).click();
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(0).waitFor({ state: 'visible' }); // Wait for go back button to show
+  await assertScreenshot(page, '104-5', browserName);
+  await options.nth(0).click(); // Go back
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(4).waitFor({ state: 'visible' });
+
+  // 6
+  await options.nth(4).click();
+  options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
+  await options.nth(0).waitFor({ state: 'visible' }); // Wait for go back button to show
+  await assertScreenshot(page, '104-6', browserName);
+});

package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-styled-components-a11y": "^2.1.32",
     "jsdom": "^24.1.0",
+    "markdown-to-jsx": "^7.7.0",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/ParsedBotMessageBody.tsx

@@ -1,26 +1,43 @@
+import { lazy, Suspense } from 'react';
+import styled from 'styled-components';
+
 import { Source } from './SourceContainer';
-import TokensBody, { TextContainer } from './TokensBody';
 import { Token } from '../utils';
 
+const TokensBody = lazy(() => import('./TokensBody'));
+
 type Props = {
   text: string;
-  tokens?: Token[];
+  tokens: Token[];
   sources?: Source[];
 };
 
+const TextContainer = styled.div`
+  width: inherit;
+  text-align: start;
+  word-break: break-word;
+  padding: 8px 12px;
+  gap: 12px;
+  white-space: pre-wrap;
+`;
+
 /**
  * Parses bot message text to process code snippets within the text.
  * @param props
  * @constructor
  */
 export default function ParsedBotMessageBody(props: Props) {
   const { text, tokens, sources } = props;
-  if (tokens && tokens.length > 0) {
-    return <TokensBody tokens={tokens} sources={sources} />;
-  }
+
   return (
-    <TextContainer className="sendbird-word" style={{ borderRadius: 16 }}>
-      {text}
-    </TextContainer>
+    <Suspense
+      fallback={
+        <TextContainer className="sendbird-word" style={{ borderRadius: 16 }}>
+          {text}
+        </TextContainer>
+      }
+    >
+      <TokensBody tokens={tokens} sources={sources} />
+    </Suspense>
   );
 }

src/components/TokensBody.tsx

@@ -1,70 +1,36 @@
-import { ReactNode } from 'react';
+import DOMPurify from 'dompurify';
+import Markdown from 'markdown-to-jsx';
 import styled from 'styled-components';
 
 import BotMessageBottom from './BotMessageBottom';
 import SourceContainer, { Source } from './SourceContainer';
 import { CodeBlock } from './ui/CodeBlock';
 import { useConstantState } from '../context/ConstantContext';
-import { asSafeURL, replaceWithRegex, Token, TokenType } from '../utils';
+import { Token, TokenType } from '../utils';
 
-const urlRegex =
-  /(?:https?:\/\/|www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.(xn--)?[a-z]{2,20}\b([-a-zA-Z0-9@:%_+[\],.~#?&/=]*[-a-zA-Z0-9@:%_+~#?&/=])*/g;
-const markdownUrlRegex = /\[(.*?)\]\((.*?)\)/g;
-const markdownBoldRegex = /\*\*(.*?)\*\*/g;
+import './markdown.scss';
 
 type TokensBodyProps = {
   tokens: Token[];
   sources?: Source[];
 };
 
-interface RegexTextPattern {
-  regex: RegExp;
-  replacer(params: { match: string; groups: string[]; index: number }): string | ReactNode;
-}
-
 const BlockContainer = styled.div`
   width: 100%;
+  /*
+  Note this was added because following element doest not have top margin due to it being the first element
+  of its markdown 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 const TextContainer = styled.div`
-  width: inherit;
-  text-align: start;
-  word-break: break-word;
-  padding: 8px 12px;
-  gap: 12px;
-  white-space: pre-wrap;
-`;
-
-const RegexText = ({ children, patterns }: { children: string; patterns: RegexTextPattern[] }) => {
-  if (patterns.length === 0 || typeof children !== 'string') {
-    return <>{children}</>;
-  }
-
-  const convertedNodes: Array<string | ReactNode> = [children];
-  patterns.forEach(({ regex, replacer }) => {
-    const node = convertedNodes.concat();
-    let offset = 0;
-    node.forEach((text, index) => {
-      if (typeof text === 'string' && text) {
-        const children = replaceWithRegex(text, regex, replacer);
-
-        if (children.length > 1) {
-          convertedNodes.splice(index + offset, 1, ...children);
-          offset += children.length - 1;
-        }
-      }
-    });
-  });
-
-  return <TextContainer>{convertedNodes}</TextContainer>;
-};
-
 export default function TokensBody({ tokens, sources }: TokensBodyProps) {
   const { enableSourceMessage } = useConstantState();
 
@@ -74,51 +40,42 @@ export default function TokensBody({ tokens, sources }: TokensBodyProps) {
         // Normal text part of the message.
         if (token.type === TokenType.string) {
           return (
-            <RegexText
-              key={'token' + i}
-              patterns={[
-                {
-                  regex: markdownBoldRegex,
-                  replacer({ match, groups, index }) {
-                    return <strong key={`${match}-${index}`}>{groups[1]}</strong>;
-                  },
-                },
-                {
-                  regex: markdownUrlRegex,
-                  replacer({ match, groups, index }) {
-                    return (
-                      <a
-                        key={`${match}-${index}`}
-                        className="sendbird-word__url"
-                        href={asSafeURL(groups[2])}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {groups[1]}
-                      </a>
-                    );
+            <div key={i} className="widget-markdown">
+              <Markdown
+                options={{
+                  sanitizer: (value: string) => {
+                    return DOMPurify.sanitize(value);
                   },
-                },
-                {
-                  regex: urlRegex,
-                  replacer({ match, index }) {
-                    return (
-                      <a
-                        key={`${match}-${index}`}
-                        className="sendbird-word__url"
-                        href={asSafeURL(match)}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {match}
-                      </a>
-                    );
+                  overrides: {
+                    // Note that this is to remove text-align: right by the library.
+                    td: {
+                      component: ({ children, ...props }) => (
+                        <td {...props} style={null}>
+                          {children}
+                        </td>
+                      ),
+                    },
+                    // Note that this is to remove text-align: right by the library.
+                    th: {
+                      component: ({ children, ...props }) => (
+                        <th {...props} style={null}>
+                          {children}
+                        </th>
+                      ),
+                    },
+                    a: {
+                      component: ({ children, ...props }) => (
+                        <a {...props} target="_blank">
+                          {children}
+                        </a>
+                      ),
+                    },
                   },
-                },
-              ]}
-            >
-              {token.value}
-            </RegexText>
+                }}
+              >
+                {token.value}
+              </Markdown>
+            </div>
           );
         }
         // Code part of the message.