feat: Implement template message (#962)

Fixes:
[AC-1196](https://sendbird.atlassian.net/browse/AC-1196)
[AC-1091](https://sendbird.atlassian.net/browse/AC-1091)
[AC-1229](https://sendbird.atlassian.net/browse/AC-1229)


### Docs
-
https://sendbird.atlassian.net/wiki/spaces/PLAT/pages/2254405651/RFC+Message+Template
-
https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2252079302/Message+Template+for+GenAI+Specification
-
https://docs.google.com/spreadsheets/d/1aFGGeRAQZGRJkUZLC-M4BTBlR-Jtz97A2Z1Nw_Q1yYc/edit#gid=0


### Changelogs
#### Template message feature
Now we are supporting template message feature!

A message with valid `extendedMessagePayload.template` value will be
displayed with `TemplateMessageItemBody`

* Added new ui components:
  * `MessageTemplate`
  * `TemplateMessageItemBody`
  * `FallbackTemplateMessageItemBody`
  * `LoadingTemplateMessageItemBody`

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

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

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

---------

Co-authored-by: Hyungu Kang | Airen <[email protected]>

Author: chohongm

.eslintrc.json

@@ -40,6 +40,7 @@
   },
   "rules": {
     "no-unused-expressions": "off",
+    "no-await-in-loop": "off",
     // Not to make ESLint complains a type is only being used as type but recognized as a unused variable
     // https://stackoverflow.com/questions/57802057/eslint-configuring-no-unused-vars-for-typescript
     "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",

jest.config.js

@@ -178,10 +178,9 @@ module.exports = {
   // transform: undefined,
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
-
+  transformIgnorePatterns: [
+    '/node_modules/(?!(?:@sendbird/(react-uikit-message-template-view|uikit-message-template))/)'
+  ]
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,
 

package.json

@@ -67,7 +67,8 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.10.10",
+    "@sendbird/chat": "^4.11.0",
+    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.65",
     "@sendbird/uikit-tools": "0.0.1-alpha.65",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",

rollup.module-exports.mjs

@@ -201,6 +201,10 @@ export default {
   'ui/MessageSearchFileItem': 'src/ui/MessageSearchFileItem/index.tsx',
   'ui/MessageSearchItem': 'src/ui/MessageSearchItem/index.tsx',
   'ui/MessageStatus': 'src/ui/MessageStatus/index.tsx',
+  'ui/MessageTemplate': 'src/ui/MessageTemplate/index.tsx',
+  'ui/TemplateMessageItemBody': 'src/ui/TemplateMessageItemBody/index.tsx',
+  'ui/FallbackTemplateMessageItemBody.tsx': 'src/ui/TemplateMessageItemBody/FallbackTemplateMessageItemBody.tsx',
+  'ui/LoadingTemplateMessageItemBody.tsx': 'src/ui/TemplateMessageItemBody/LoadingTemplateMessageItemBody.tsx',
   'ui/Modal': 'src/ui/Modal/index.tsx',
   'ui/OGMessageItemBody': 'src/ui/OGMessageItemBody/index.tsx',
   'ui/OpenChannelAdminMessage': 'src/ui/OpenChannelAdminMessage/index.tsx',

src/lib/Sendbird.tsx

@@ -12,9 +12,11 @@ import useTheme from './hooks/useTheme';
 
 import sdkReducers from './dux/sdk/reducers';
 import userReducers from './dux/user/reducers';
+import appInfoReducers from './dux/appInfo/reducers';
 
 import sdkInitialState from './dux/sdk/initialState';
 import userInitialState from './dux/user/initialState';
+import appInfoInitialState from './dux/appInfo/initialState';
 
 import useOnlineStatus from './hooks/useOnlineStatus';
 import useConnect from './hooks/useConnect';
@@ -44,13 +46,14 @@ import {
   CommonUIKitConfigProps,
   SendbirdChatInitParams,
   CustomExtensionParams,
-  SBUEventHandlers,
+  SBUEventHandlers, SendbirdProviderUtils,
 } from './types';
 import { GlobalModalProvider } from '../hooks/useModal';
 import { RenderUserProfileProps } from '../types';
 import PUBSUB_TOPICS, { SBUGlobalPubSub, SBUGlobalPubSubTopicPayloadUnion } from './pubSub/topics';
 import { EmojiManager } from './emojiManager';
 import { uikitConfigStorage } from './utils/uikitConfigStorage';
+import useMessageTemplateUtils from './hooks/useMessageTemplateUtils';
 
 export { useSendbirdStateContext } from '../hooks/useSendbirdStateContext';
 
@@ -189,6 +192,7 @@ const SendbirdSDK = ({
   const [pubSub] = useState(() => customPubSub ?? pubSubFactory<PUBSUB_TOPICS, SBUGlobalPubSubTopicPayloadUnion>());
   const [sdkStore, sdkDispatcher] = useReducer(sdkReducers, sdkInitialState);
   const [userStore, userDispatcher] = useReducer(userReducers, userInitialState);
+  const [appInfoStore, appInfoDispatcher] = useReducer(appInfoReducers, appInfoInitialState);
 
   const { configs, configsWithAppAttr, initDashboardConfigs } = useUIKitConfig();
   const sdkInitialized = sdkStore.initialized;
@@ -200,6 +204,19 @@ const SendbirdSDK = ({
 
   useTheme(colorSet);
 
+  const {
+    getCachedTemplate,
+    updateMessageTemplatesInfo,
+    initializeMessageTemplatesInfo,
+  } = useMessageTemplateUtils({
+    sdk, logger, appInfoStore, appInfoDispatcher,
+  });
+
+  const utils: SendbirdProviderUtils = {
+    updateMessageTemplatesInfo,
+    getCachedTemplate,
+  };
+
   const reconnect = useConnect({
     appId,
     userId,
@@ -218,8 +235,10 @@ const SendbirdSDK = ({
     sdk,
     sdkDispatcher,
     userDispatcher,
+    appInfoDispatcher,
     initDashboardConfigs,
     eventHandlers,
+    initializeMessageTemplatesInfo,
   });
 
   useUnmount(() => {
@@ -320,10 +339,12 @@ const SendbirdSDK = ({
         stores: {
           sdkStore,
           userStore,
+          appInfoStore,
         },
         dispatchers: {
           sdkDispatcher,
           userDispatcher,
+          appInfoDispatcher,
           reconnect,
         },
         config: {
@@ -396,6 +417,7 @@ const SendbirdSDK = ({
         },
         eventHandlers,
         emojiManager,
+        utils,
       }}
     >
       <MediaQueryProvider logger={logger} breakpoint={breakpoint}>

src/lib/dux/appInfo/actionTypes.ts

@@ -0,0 +1,23 @@
+import { CreateAction } from '../../../utils/typeHelpers/reducers/createAction';
+import { MessageTemplatesInfo, ProcessedMessageTemplate } from './initialState';
+
+export const APP_INFO_ACTIONS = {
+  INITIALIZE_MESSAGE_TEMPLATES_INFO: 'INITIALIZE_MESSAGE_TEMPLATES_INFO',
+  UPSERT_MESSAGE_TEMPLATE: 'UPSERT_MESSAGE_TEMPLATE',
+  UPSERT_WAITING_TEMPLATE_KEY: 'UPSERT_WAITING_TEMPLATE_KEY',
+  MARK_ERROR_WAITING_TEMPLATE_KEY: 'MARK_ERROR_WAITING_TEMPLATE_KEY',
+} as const;
+
+export type TemplatesMapData = {
+  key: string;
+  template: ProcessedMessageTemplate;
+};
+
+type APP_INFO_PAYLOAD_TYPES = {
+  [APP_INFO_ACTIONS.INITIALIZE_MESSAGE_TEMPLATES_INFO]: MessageTemplatesInfo,
+  [APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE]: TemplatesMapData,
+  [APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY]: { key: string, requestedAt: number },
+  [APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY]: { key: string },
+};
+
+export type AppInfoActionTypes = CreateAction<APP_INFO_PAYLOAD_TYPES>;

src/lib/dux/appInfo/initialState.ts

@@ -0,0 +1,29 @@
+export type ProcessedMessageTemplate = {
+  uiTemplate: string; // This is stringified ui_template.
+  colorVariables?: Record<string, string>;
+};
+
+export interface MessageTemplatesInfo {
+  token: string; // This server-side token gets updated on every CRUD operation on message template table.
+  templatesMap: Record<string, ProcessedMessageTemplate>;
+}
+
+export interface WaitingTemplateKeyData {
+  requestedAt: number;
+  isError: boolean;
+}
+
+export interface AppInfoStateType {
+  messageTemplatesInfo?: MessageTemplatesInfo;
+  /**
+   * This represents template keys that are currently waiting for its fetch response.
+   * Whenever initialized, request succeeds or fails, it needs to be updated.
+   */
+  waitingTemplateKeysMap: Record<string, WaitingTemplateKeyData>;
+}
+
+const initialState: AppInfoStateType = {
+  waitingTemplateKeysMap: {},
+};
+
+export default initialState;

src/lib/dux/appInfo/reducers.ts

@@ -0,0 +1,54 @@
+import { match } from 'ts-pattern';
+import { AppInfoStateType, WaitingTemplateKeyData } from './initialState';
+import { APP_INFO_ACTIONS, AppInfoActionTypes } from './actionTypes';
+
+export default function reducer(state: AppInfoStateType, action: AppInfoActionTypes): AppInfoStateType {
+  return match(action)
+    .with(
+      { type: APP_INFO_ACTIONS.INITIALIZE_MESSAGE_TEMPLATES_INFO },
+      ({ payload }) => {
+        return {
+          messageTemplatesInfo: payload,
+          waitingTemplateKeysMap: {},
+        };
+      })
+    .with(
+      { type: APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE },
+      ({ payload }) => {
+        const templatesInfo = state.messageTemplatesInfo;
+        if (!templatesInfo) return state; // Not initialized. Ignore.
+
+        const { key, template } = payload;
+        templatesInfo.templatesMap[key] = template;
+
+        delete state.waitingTemplateKeysMap[key];
+
+        return {
+          ...state,
+          messageTemplatesInfo: templatesInfo,
+        };
+      })
+    .with(
+      { type: APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY },
+      ({ payload }) => {
+        const { key, requestedAt } = payload;
+        state.waitingTemplateKeysMap[key] = {
+          requestedAt,
+          isError: false,
+        };
+        return { ...state };
+      })
+    .with(
+      { type: APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY },
+      ({ payload }) => {
+        const { key } = payload;
+        const waitingTemplateKeyData: WaitingTemplateKeyData | undefined = state.waitingTemplateKeysMap[key];
+        if (waitingTemplateKeyData) {
+          waitingTemplateKeyData.isError = true;
+        }
+        return { ...state };
+      })
+    .otherwise(() => {
+      return state;
+    });
+}

src/lib/dux/appInfo/utils.ts

@@ -0,0 +1,22 @@
+import { ProcessedMessageTemplate } from './initialState';
+import { SendbirdMessageTemplate } from '../../../ui/TemplateMessageItemBody/types';
+
+/**
+ * Takes JSON parsed template and then returns processed message template for storing it in global state.
+ */
+export const getProcessedTemplate = (parsedTemplate: SendbirdMessageTemplate): ProcessedMessageTemplate => {
+  return {
+    uiTemplate: JSON.stringify(parsedTemplate.ui_template.body.items),
+    colorVariables: parsedTemplate.color_variables,
+  };
+};
+
+export const getProcessedTemplates = (
+  parsedTemplates: SendbirdMessageTemplate[],
+): Record<string, ProcessedMessageTemplate> => {
+  const processedTemplates = {};
+  parsedTemplates.forEach((template) => {
+    processedTemplates[template.key] = getProcessedTemplate(template);
+  });
+  return processedTemplates;
+};

src/lib/hooks/useConnect/__test__/data.mocks.ts

@@ -36,6 +36,7 @@ export const mockSdk = {
 
 export const mockSdkDispatcher = jest.fn() as unknown as ConnectTypes['sdkDispatcher'];
 export const mockUserDispatcher = jest.fn() as unknown as ConnectTypes['userDispatcher'];
+export const mockAppInfoDispatcher = jest.fn() as unknown as ConnectTypes['appInfoDispatcher'];
 export const mockInitDashboardConfigs = jest.fn().mockImplementation(() => Promise.resolve({})) as unknown as ConnectTypes['initDashboardConfigs'];
 
 export const defaultStaticParams: StaticTypes = {
@@ -45,7 +46,9 @@ export const defaultStaticParams: StaticTypes = {
   logger: LoggerFactory('all'),
   sdkDispatcher: mockSdkDispatcher,
   userDispatcher: mockUserDispatcher,
+  appInfoDispatcher: mockAppInfoDispatcher,
   initDashboardConfigs: mockInitDashboardConfigs,
+  initializeMessageTemplatesInfo: jest.fn().mockImplementation(() => Promise.resolve()),
 };
 
 export const defaultTriggerParams: TriggerTypes = {

src/lib/hooks/useConnect/connect.ts

@@ -6,6 +6,7 @@ export async function connect({
   logger,
   sdkDispatcher,
   userDispatcher,
+  appInfoDispatcher,
   initDashboardConfigs,
   userId,
   appId,
@@ -21,6 +22,7 @@ export async function connect({
   isMobile,
   eventHandlers,
   isUserIdUsedForNickname,
+  initializeMessageTemplatesInfo,
 }: ConnectTypes): Promise<void> {
   await disconnectSdk({
     logger,
@@ -32,6 +34,7 @@ export async function connect({
     logger,
     sdkDispatcher,
     userDispatcher,
+    appInfoDispatcher,
     initDashboardConfigs,
     userId,
     appId,
@@ -46,5 +49,6 @@ export async function connect({
     isMobile,
     eventHandlers,
     isUserIdUsedForNickname,
+    initializeMessageTemplatesInfo,
   });
 }

src/lib/hooks/useConnect/index.ts

@@ -15,10 +15,12 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
     sdk,
     sdkDispatcher,
     userDispatcher,
+    appInfoDispatcher,
     initDashboardConfigs,
     sdkInitParams,
     customExtensionParams,
     eventHandlers,
+    initializeMessageTemplatesInfo,
   } = staticTypes;
   logger?.info?.('SendbirdProvider | useConnect', { ...triggerTypes, ...staticTypes });
 
@@ -50,12 +52,14 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
       sdk,
       sdkDispatcher,
       userDispatcher,
+      appInfoDispatcher,
       initDashboardConfigs,
       isUserIdUsedForNickname,
       sdkInitParams,
       customExtensionParams,
       isMobile,
       eventHandlers,
+      initializeMessageTemplatesInfo,
     }).catch(error => {
       logger?.error?.('SendbirdProvider | useConnect/useEffect', error);
     });
@@ -78,12 +82,14 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         sdk,
         sdkDispatcher,
         userDispatcher,
+        appInfoDispatcher,
         initDashboardConfigs,
         isUserIdUsedForNickname,
         sdkInitParams,
         customExtensionParams,
         isMobile,
         eventHandlers,
+        initializeMessageTemplatesInfo,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/reconnect/useCallback', error);

src/lib/hooks/useConnect/setupConnection.ts

@@ -75,6 +75,7 @@ export async function setUpConnection({
   customExtensionParams,
   isMobile = false,
   eventHandlers,
+  initializeMessageTemplatesInfo,
 }: SetupConnectionTypes): Promise<void> {
   return new Promise((resolve, reject) => {
     logger?.info?.('SendbirdProvider | useConnect/setupConnection/init', { userId, appId });
@@ -115,13 +116,22 @@ export async function setUpConnection({
         },
         customExtensionParams,
       );
+
       newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
 
-      const connectCbSucess = async (user: User) => {
-        logger?.info?.('SendbirdProvider | useConnect/setupConnection/connectCbSucess', user);
+      const connectCbSuccess = async (user: User) => {
+        logger?.info?.('SendbirdProvider | useConnect/setupConnection/connectCbSuccess', user);
         sdkDispatcher({ type: INIT_SDK, payload: newSdk });
         userDispatcher({ type: INIT_USER, payload: user });
 
+        try {
+          await initializeMessageTemplatesInfo(newSdk);
+        } catch (error) {
+          logger?.error?.('SendbirdProvider | useConnect/setupConnection/upsertMessageTemplateListInLocalStorage failed', {
+            error,
+          });
+        }
+
         initDashboardConfigs(newSdk)
           .then(config => {
             logger?.info?.('SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration success', {
@@ -178,7 +188,7 @@ export async function setUpConnection({
 
       logger?.info?.(`SendbirdProvider | useConnect/setupConnection/connect connecting using ${accessToken ?? userId}`);
       newSdk.connect(userId, accessToken)
-        .then((res) => connectCbSucess(res))
+        .then((res) => connectCbSuccess(res))
         .catch((err) => connectCbError(err));
     } else {
       const errorMessage = getMissingParamError({ userId, appId });