feat: Apply markdowns to text messages (#1120)

Fixes: [AC-2156](https://sendbird.atlassian.net/browse/AC-2156)

Added `enableMarkdownForUserMessage` to `UIKitOptions`. When enabled,
user messages that include markdowns syntaxes for bold and link are now being applied to
the original text.

Author: chohongm

apps/testing/src/utils/paramsBuilder.ts

@@ -94,6 +94,7 @@ export const paramKeys = [
   'groupChannel_enableFeedback',
   'groupChannel_enableSuggestedReplies',
   'groupChannel_showSuggestedRepliesFor',
+  'groupChannel_enableMarkdownForUserMessage',
   'groupChannelList_enableTypingIndicator',
   'groupChannelList_enableMessageReceiptStatus',
   'groupChannelSettings_enableMessageSearch',

package.json

@@ -70,8 +70,8 @@
   },
   "dependencies": {
     "@sendbird/chat": "^4.12.3",
-    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.73",
-    "@sendbird/uikit-tools": "0.0.1-alpha.73",
+    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.76",
+    "@sendbird/uikit-tools": "0.0.1-alpha.76",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "dompurify": "^3.0.1"

src/lib/Sendbird.tsx

@@ -185,6 +185,7 @@ const SendbirdSDK = ({
   const [appInfoStore, appInfoDispatcher] = useReducer(appInfoReducers, appInfoInitialState);
 
   const { configs, configsWithAppAttr, initDashboardConfigs } = useUIKitConfig();
+
   const sdkInitialized = sdkStore.initialized;
   const sdk = sdkStore?.sdk;
   const { uploadSizeLimit, multipleFilesMessageFileCountLimit } = sdk?.appInfo ?? {};
@@ -370,6 +371,7 @@ const SendbirdSDK = ({
             enableSuggestedReplies: configs.groupChannel.channel.enableSuggestedReplies,
             showSuggestedRepliesFor: configs.groupChannel.channel.showSuggestedRepliesFor,
             suggestedRepliesDirection: configs.groupChannel.channel.suggestedRepliesDirection,
+            enableMarkdownForUserMessage: configs.groupChannel.channel.enableMarkdownForUserMessage,
           },
           groupChannelList: {
             enableTypingIndicator: configs.groupChannel.channelList.enableTypingIndicator,

src/lib/types.ts

@@ -109,6 +109,7 @@ export interface SendBirdStateConfig {
     enableSuggestedReplies: SBUConfig['groupChannel']['channel']['enableSuggestedReplies'];
     showSuggestedRepliesFor: SBUConfig['groupChannel']['channel']['showSuggestedRepliesFor'];
     suggestedRepliesDirection: SBUConfig['groupChannel']['channel']['suggestedRepliesDirection'];
+    enableMarkdownForUserMessage: SBUConfig['groupChannel']['channel']['enableMarkdownForUserMessage'];
   },
   groupChannelList: {
     enableTypingIndicator: SBUConfig['groupChannel']['channelList']['enableTypingIndicator'];

src/lib/utils/uikitConfigMapper.ts

@@ -15,6 +15,7 @@ export function uikitConfigMapper({
     isMessageReceiptStatusEnabledOnChannelList,
     showSearchIcon,
   } = legacyConfig;
+
   return {
     common: {
       enableUsingDefaultUserProfile: uikitOptions.common?.enableUsingDefaultUserProfile
@@ -38,6 +39,7 @@ export function uikitConfigMapper({
       enableSuggestedReplies: uikitOptions.groupChannel?.enableSuggestedReplies,
       showSuggestedRepliesFor: uikitOptions.groupChannel?.showSuggestedRepliesFor,
       suggestedRepliesDirection: uikitOptions.groupChannel?.suggestedRepliesDirection,
+      enableMarkdownForUserMessage: uikitOptions.groupChannel?.enableMarkdownForUserMessage,
     },
     groupChannelList: {
       enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,

src/modules/Message/components/TextFragment/index.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 import { UserMessage } from '@sendbird/chat/message';
 import { match } from 'ts-pattern';
 
-import { TOKEN_TYPES, Token } from '../../utils/tokens/types';
+import { TOKEN_TYPES, Token, MarkdownToken } from '../../utils/tokens/types';
 import { useMessageContext } from '../../context/MessageProvider';
 import { keyGenerator } from '../../utils/tokens/keyGenerator';
 import MentionLabel from '../../../../ui/MentionLabel';
 import { USER_MENTION_PREFIX } from '../../consts';
 import LinkLabel from '../../../../ui/LinkLabel';
-import { LabelTypography } from '../../../../ui/Label';
-import { getWhiteSpacePreservedText } from '../../utils/tokens/tokenize';
+import { LabelColors, LabelTypography } from '../../../../ui/Label';
+import { getWhiteSpacePreservedText, tokenizeMarkdown } from '../../utils/tokens/tokenize';
+import { asSafeURL } from '../../utils/tokens/asSafeURL';
 
 export type TextFragmentProps = {
   tokens: Token[];
@@ -29,6 +30,35 @@ export default function TextFragment({
       {tokens?.map((token, idx) => {
         const key = keyGenerator(createdAt, updatedAt, idx);
         return match(token.type)
+          .with(TOKEN_TYPES.markdown, () => {
+            const markdownToken = token as MarkdownToken;
+            const groups = markdownToken.groups;
+            return <span className="sendbird-word" key={key} data-testid="sendbird-ui-word">
+              {
+                match(markdownToken.markdownType)
+                  .with('bold', () => (
+                    <span style={{ fontWeight: 'bold' }}>
+                      <TextFragment tokens={tokenizeMarkdown({ messageText: groups[1] })}/>
+                    </span>
+                  ))
+                  .with('url', () => {
+                    return (
+                      <a
+                        className={
+                          isByMe
+                            ? 'sendbird-label--color-oncontent-1'
+                            : 'sendbird-label--color-onbackground-1'
+                        }
+                        href={asSafeURL(groups[2])}
+                      >
+                        <TextFragment tokens={tokenizeMarkdown({ messageText: groups[1] })}/>
+                      </a>
+                    );
+                  })
+                  .otherwise(() => <></>)
+              }
+          </span>;
+          })
           .with(TOKEN_TYPES.mention, () => (
             <span className="sendbird-word" key={key} data-testid="sendbird-ui-word">
               <MentionLabel
@@ -43,9 +73,9 @@ export default function TextFragment({
           .with(TOKEN_TYPES.url, () => (
             <span className="sendbird-word" key={key} data-testid="sendbird-ui-word">
               <LinkLabel
-                className="sendbird-word__url"
                 src={token.value}
                 type={LabelTypography.BODY_1}
+                color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
               >
                 {token.value}
               </LinkLabel>

src/modules/Message/utils/tokens/__tests__/tokenizeMessage.spec.ts

@@ -55,4 +55,109 @@ describe('tokenizeMessage', () => {
       type: 'url',
     }]);
   });
+
+  it('should tokenize a string markdown strings', () => {
+    const tokens = tokenizeMessage({
+      messageText: '**bold**  https://www.naver.com  ** https://www.naver.com ** [bold] **text** **text**',
+      includeMarkdown: true,
+    });
+    expect(tokens).toEqual([
+      { value: '', type: 'string' },
+      {
+        type: 'markdown',
+        markdownType: 'bold',
+        value: '**bold**',
+        groups: ['**bold**', 'bold'],
+      },
+      { value: '  ', type: 'string' },
+      { value: 'https://www.naver.com', type: 'url' },
+      { value: '  ', type: 'string' },
+      {
+        type: 'markdown',
+        markdownType: 'bold',
+        value: '** https://www.naver.com **',
+        groups: ['** https://www.naver.com **', ' https://www.naver.com '],
+      },
+      { value: ' [bold] ', type: 'string' },
+      {
+        type: 'markdown',
+        markdownType: 'bold',
+        value: '**text**',
+        groups: ['**text**', 'text'],
+      },
+      { value: ' ', type: 'string' },
+      {
+        type: 'markdown',
+        markdownType: 'bold',
+        value: '**text**',
+        groups: ['**text**', 'text'],
+      },
+    ]);
+  });
+
+  it('should tokenize a string with mention, markdown strings', () => {
+    const tokens = tokenizeMessage({
+      messageText: 'Hello @{userA}! This is a test for **tokenizeMessage**. Followings are urls with different '
+        + 'syntaxes: https://example.com, and [here](https://example.com). Finally, the followings are nested '
+        + 'markdown cases: [**this one**](https://example.com) and **[this one](https://example.com)**',
+      mentionedUsers: [
+        ({ userId: 'userA', nickname: 'User A' } as User),
+      ],
+      includeMarkdown: true,
+    });
+    expect(tokens).toEqual([
+      { value: 'Hello ', type: 'string' },
+      { value: 'User A', type: 'mention', userId: 'userA' },
+      { value: '! This is a test for ', type: 'string' },
+      {
+        type: 'markdown',
+        markdownType: 'bold',
+        value: '**tokenizeMessage**',
+        groups: ['**tokenizeMessage**', 'tokenizeMessage'],
+      },
+      {
+        value: '. Followings are urls with different syntaxes: ',
+        type: 'string',
+      },
+      { value: 'https://example.com', type: 'url' },
+      { value: ', and ', type: 'string' },
+      {
+        type: 'markdown',
+        markdownType: 'url',
+        value: '[here](https://example.com)',
+        groups: [
+          '[here](https://example.com)',
+          'here',
+          'https://example.com',
+        ],
+      },
+      {
+        value: '. Finally, the followings are nested markdown cases: ',
+        type: 'string',
+      },
+      {
+        groups: [
+          '[**this one**](https://example.com)',
+          '**this one**',
+          'https://example.com',
+        ],
+        markdownType: 'url',
+        type: 'markdown',
+        value: '[**this one**](https://example.com)',
+      },
+      {
+        type: 'string',
+        value: ' and ',
+      },
+      {
+        groups: [
+          '**[this one](https://example.com)**',
+          '[this one](https://example.com)',
+        ],
+        markdownType: 'bold',
+        type: 'markdown',
+        value: '**[this one](https://example.com)**',
+      },
+    ]);
+  });
 });

src/modules/Message/utils/tokens/asSafeURL.ts

@@ -0,0 +1,18 @@
+export function asSafeURL(url: string) {
+  let safeURL = decodeURIComponent(url);
+
+  try {
+    const { protocol } = new URL(safeURL);
+    if (['https:', 'http:'].some((it) => it === protocol.toLowerCase())) {
+      return safeURL;
+    } else {
+      return '#';
+    }
+  } catch (error) {
+    if (!safeURL.startsWith('http://') && !safeURL.startsWith('https://')) {
+      safeURL = 'https://' + safeURL;
+    }
+  }
+
+  return safeURL;
+}

src/modules/Message/utils/tokens/tokenize.ts

@@ -1,6 +1,20 @@
 import { User } from '@sendbird/chat';
 import { USER_MENTION_PREFIX } from '../../consts';
-import { IdentifyMentionsType, MentionToken, Token, TOKEN_TYPES, TokenParams, UndeterminedToken } from './types';
+import {
+  IdentifyMentionsType,
+  MarkdownToken,
+  MentionToken,
+  Token,
+  TOKEN_TYPES,
+  TokenParams,
+  UndeterminedToken,
+} from './types';
+
+/**
+ * /\[(.*?)\]\((.*?)\) is for url.
+ * /\*\*(.*?)\*\* for bold.
+ */
+const MarkdownRegex = /\[(.*?)\]\((.*?)\)|\*\*(.*?)\*\*/g;
 
 export function getUserMentionRegex(mentionedUsers: User[], templatePrefix_: string): RegExp {
   const templatePrefix = templatePrefix_ || USER_MENTION_PREFIX;
@@ -86,6 +100,64 @@ export function identifyUrlsAndStrings(token: Token[]): Token[] {
   return results;
 }
 
+/**
+ * For every string token in the given list of tokens, if the token contains markdowns, the token is split into
+ * string tokens and markdown tokens in the original order.
+ * Returns a new array tokens.
+ * @param tokens
+ */
+export function splitTokensWithMarkdowns(tokens: Token[]): Token[] {
+  const prevTokens = tokens;
+  const newTokens = [];
+  prevTokens.forEach((token) => {
+    if (token.type === TOKEN_TYPES.mention || token.type === TOKEN_TYPES.markdown) {
+      newTokens.push(token);
+      return;
+    }
+    const rawStr = token.value;
+    // @ts-ignore
+    const matches = [...rawStr.matchAll(MarkdownRegex)];
+    const allMatches = matches.map((value) => {
+      const text = value[0];
+      const start = value.index ?? 0;
+      const end = start + text.length;
+      return { text, start, end, groups: value.filter((val: any) => typeof val === 'string') };
+    });
+    let restText = rawStr;
+    let cursor = 0;
+    allMatches.forEach(({ text, start, end, groups }) => {
+      const left: Token = {
+        type: TOKEN_TYPES.undetermined,
+        value: restText.slice(0, start - cursor),
+      };
+      newTokens.push(left);
+      let markdownType;
+      if (text.startsWith('[')) {
+        markdownType = 'url';
+      } else if (text.startsWith('**')) {
+        markdownType = 'bold';
+      }
+      const mid: MarkdownToken = {
+        type: TOKEN_TYPES.markdown,
+        markdownType,
+        value: text,
+        groups,
+      };
+      newTokens.push(mid);
+      restText = rawStr.slice(end);
+      cursor = end;
+    });
+    if (restText) {
+      const right: Token = {
+        type: TOKEN_TYPES.undetermined,
+        value: restText,
+      };
+      newTokens.push(right);
+    }
+  });
+  return newTokens;
+}
+
 export function combineNearbyStrings(tokens: Token[]): Token[] {
   const results: Token[] = tokens.reduce((acc, token) => {
     const lastToken = acc[acc.length - 1];
@@ -105,6 +177,7 @@ export function tokenizeMessage({
   messageText,
   mentionedUsers = [],
   templatePrefix = USER_MENTION_PREFIX,
+  includeMarkdown = false,
 }: TokenParams): Token[] {
   // mention can be squeezed-in(no-space-between) with other mentions and urls
   // if no users are mentioned, return the messageText as a single token
@@ -120,9 +193,23 @@ export function tokenizeMessage({
     mentionedUsers,
     templatePrefix,
   });
-  const partialsWithUrlsAndMentions = identifyUrlsAndStrings(partialWithMentions);
+  const partialsWithUrlsAndMentions = identifyUrlsAndStrings(
+    includeMarkdown
+      ? splitTokensWithMarkdowns(partialWithMentions)
+      : partialWithMentions,
+  );
   const result = combineNearbyStrings(partialsWithUrlsAndMentions);
+  return result;
+}
 
+export function tokenizeMarkdown({
+  messageText,
+}): Token[] {
+  const partialResult = [{
+    type: TOKEN_TYPES.undetermined,
+    value: messageText,
+  }];
+  const result = combineNearbyStrings(splitTokensWithMarkdowns(partialResult));
   return result;
 }