fix: sanitize before render (#416)

## Changes
- 

ticket: []

## Additional Notes
- 

## Checklist
Before requesting a code review, please check the following:
- [ ] **[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.

__visual_tests__/utils/localStorageUtils.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { type Page } from '@playwright/test';
 
 export const getKey = (appId: string, botId: string) => {
   return `@sendbird/chat-ai-widget/${appId}/${botId}`;

__visual_tests__/utils/testUtils.ts

@@ -1,4 +1,4 @@
-import { expect, Page } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 
 import { getWidgetSessionCache } from './localStorageUtils';
 import { deleteChannel, deleteUser } from './requestUtils';
@@ -51,3 +51,7 @@ export async function deleteTestResources(page: Page) {
     }
   }
 }
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

__visual_tests__/workflow-tests.spec.ts

@@ -1,7 +1,14 @@
 import { test } from '@playwright/test';
 
 import { WidgetComponentIds } from './const';
-import { assertScreenshot, clickNthChip, deleteTestResources, loadWidget, sendTextMessage } from './utils/testUtils';
+import {
+  sleep,
+  assertScreenshot,
+  clickNthChip,
+  deleteTestResources,
+  loadWidget,
+  sendTextMessage,
+} from './utils/testUtils';
 
 test.afterEach(async ({ page }) => {
   await deleteTestResources(page);
@@ -43,15 +50,15 @@ test('100', async ({ page, browserName }) => {
   await inputs.nth(4).fill('123_456_7890');
   await clickNthChip(page, 4);
   submitButton = page.locator(WidgetComponentIds.BUTTON);
-  await page.waitForTimeout(1000);
+  await sleep(1000);
   await assertScreenshot(page, '100-3', browserName);
 
   // 4
   await inputs.nth(2).fill('2');
   await inputs.nth(3).fill('[email protected]');
   await inputs.nth(4).fill('123-456-7890');
   await submitButton.click();
-  await page.waitForTimeout(2000);
+  await sleep(2000);
   await assertScreenshot(page, '100-4', browserName);
 });
 
@@ -64,7 +71,7 @@ test('100', async ({ page, browserName }) => {
 test('101', async ({ page, browserName }) => {
   await loadWidget(page);
   // 1
-  await sendTextMessage(page, 'Tell me about one cat breed', 2000);
+  await sendTextMessage(page, 'Tell me about one cat breed', 5000);
   await assertScreenshot(page, '101-1', browserName);
 });
 
@@ -95,25 +102,25 @@ test('102', async ({ page, browserName }) => {
 test('103', async ({ page, browserName }) => {
   await loadWidget(page);
   // 1
-  await sendTextMessage(page, 'Suggested replies', 2000);
+  await sendTextMessage(page, 'Suggested replies', 4000);
   await assertScreenshot(page, '103-1', browserName);
 
   // 2
   let options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(0).click();
-  await page.waitForTimeout(1000);
+  await sleep(4000);
   await assertScreenshot(page, '103-2', browserName);
 
   // 3
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(0).click();
-  await page.waitForTimeout(1000);
+  await sleep(4000);
   await assertScreenshot(page, '103-3', browserName);
 
   // 4
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(1).click();
-  await page.waitForTimeout(4000); // Time takes long for file message to be rendered and then scrolled to bottom in CI browsers.
+  await sleep(4000); // Time takes long for file message to be rendered and then scrolled to bottom in CI browsers.
   await assertScreenshot(page, '103-4', browserName);
 
   // 5
@@ -127,7 +134,7 @@ test('103', async ({ page, browserName }) => {
   // 6
   options = page.locator(WidgetComponentIds.SUGGESTED_REPLIES_OPTIONS);
   await options.nth(2).click();
-  await page.waitForTimeout(2000);
+  await sleep(4000);
   await assertScreenshot(page, '103-6', browserName);
 });
 

src/components/TokensBody.tsx

@@ -38,9 +38,6 @@ export default function TokensBody({ tokens, sources, className }: TokensBodyPro
             <div key={i} className={cx(className, 'widget-markdown')}>
               <Markdown
                 options={{
-                  sanitizer: (value: string) => {
-                    return DOMPurify.sanitize(value);
-                  },
                   overrides: {
                     // Note that this is to remove text-align: right by the library.
                     td: {
@@ -68,7 +65,7 @@ export default function TokensBody({ tokens, sources, className }: TokensBodyPro
                   },
                 }}
               >
-                {token.value}
+                {DOMPurify.sanitize(token.value)}
               </Markdown>
             </div>
           );