@sendbird/uikit-react 3.12.1 → 3.13.0

package/cjs/SendbirdProvider.js

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('./chunks/bundle-QauQilHV.js');
+var _tslib = require('./chunks/bundle-9l41IWgC.js');
 var React = require('react');
 var uikitTools = require('@sendbird/uikit-tools');
 var withSendbird = require('./withSendbird.js');
 var cssVars = require('css-vars-ponyfill');
-var index = require('./chunks/bundle-7pGAEUaG.js');
-var actionTypes = require('./chunks/bundle-J790CoNK.js');
-var useMarkAsDeliveredScheduler = require('./chunks/bundle-KHlebcMh.js');
+var index = require('./chunks/bundle-SWOq3kxG.js');
+var actionTypes = require('./chunks/bundle-hfoBchbF.js');
+var useMarkAsDeliveredScheduler = require('./chunks/bundle-ZFhZ9UyN.js');
 var SendbirdChat = require('@sendbird/chat');
 var openChannel = require('@sendbird/chat/openChannel');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var index$1 = require('./chunks/bundle-opmIFrXg.js');
-var utils = require('./chunks/bundle-DGXRqeiH.js');
-var index$2 = require('./chunks/bundle-cbIBIuxw.js');
-var VoicePlayer_context = require('./chunks/bundle-sSkyvCgN.js');
+var index$1 = require('./chunks/bundle-Gw-7KmmG.js');
+var utils = require('./chunks/bundle-BdWL3kB4.js');
+var index$2 = require('./chunks/bundle-OypRlCX4.js');
+var VoicePlayer_context = require('./chunks/bundle-xe1wuNko.js');
 var VoiceRecorder_context = require('./VoiceRecorder/context.js');
-var LocalizationContext = require('./chunks/bundle-rGYP82Yc.js');
-var MediaQueryContext = require('./chunks/bundle-xTAz4Z91.js');
-var stringSet = require('./chunks/bundle-JfUvL0pn.js');
-var consts = require('./chunks/bundle-Oq2WwdJI.js');
-var resolvedReplyType = require('./chunks/bundle-yJYTZhFC.js');
+var LocalizationContext = require('./chunks/bundle-2dTv415Y.js');
+var MediaQueryContext = require('./chunks/bundle-UOOPIGjG.js');
+var stringSet = require('./chunks/bundle-xtUT3duD.js');
+var consts = require('./chunks/bundle-qD5w2tyR.js');
+var resolvedReplyType = require('./chunks/bundle-_Hwf9prH.js');
 var hooks_useModal = require('./hooks/useModal.js');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-require('./chunks/bundle-BAZMzxRI.js');
+require('./chunks/bundle-5zZ25-q8.js');
 require('./utils/message/getOutgoingMessageState.js');
-require('./chunks/bundle-3eINsVVm.js');
+require('./chunks/bundle-Myh0hGtf.js');
 require('react-dom');
 require('./ui/IconButton.js');
 require('./ui/Button.js');
-require('./chunks/bundle-12iJO39c.js');
+require('./chunks/bundle-5i9-ntZ5.js');
 require('./ui/Icon.js');
-require('./chunks/bundle-6uWmKzjA.js');
+require('./chunks/bundle-qYN98FNj.js');
 
 var isEmpty = function (obj) {
     if (obj === null || obj === undefined) {
@@ -118,10 +118,12 @@ var useTheme = function (overrides) {
                     '--sendbird-light-onlight-02': 'rgba(0, 0, 0, 0.50)',
                     '--sendbird-light-onlight-03': 'rgba(0, 0, 0, 0.38)',
                     '--sendbird-light-onlight-04': 'rgba(0, 0, 0, 0.12)',
+                    '--sendbird-light-onlight-05': 'rgba(0, 0, 0, 0.44)',
                     '--sendbird-light-ondark-01': 'rgba(255, 255, 255, 0.88)',
                     '--sendbird-light-ondark-02': 'rgba(255, 255, 255, 0.50)',
                     '--sendbird-light-ondark-03': 'rgba(255, 255, 255, 0.38)',
                     '--sendbird-light-ondark-04': 'rgba(255, 255, 255, 0.12)',
+                    '--sendbird-light-ondark-05': 'rgba(255, 255, 255, 0.44)',
                     '--sendbird-light-shadow-01': '0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12)',
                     '--sendbird-light-shadow-02': '0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12)',
                     '--sendbird-light-shadow-03': '0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12)',
@@ -140,14 +142,14 @@ var SDK_ACTIONS = {
     SDK_ERROR: 'SDK_ERROR',
 };
 
-var initialState$1 = {
+var initialState$2 = {
     initialized: false,
     loading: false,
     sdk: {},
     error: false,
 };
 
-function reducer$1(state, action) {
+function reducer$2(state, action) {
     return index.K(action)
         .with({ type: SDK_ACTIONS.SET_SDK_LOADING }, function (_a) {
         var payload = _a.payload;
@@ -166,20 +168,20 @@ function reducer$1(state, action) {
         };
     })
         .with({ type: SDK_ACTIONS.RESET_SDK }, function () {
-        return initialState$1;
+        return initialState$2;
     })
         .otherwise(function () {
         return state;
     });
 }
 
-var initialState = {
+var initialState$1 = {
     initialized: false,
     loading: false,
     user: {},
 };
 
-function reducer(state, action) {
+function reducer$1(state, action) {
     return index.K(action)
         .with({ type: actionTypes.USER_ACTIONS.INIT_USER }, function (_a) {
         var payload = _a.payload;
@@ -190,7 +192,7 @@ function reducer(state, action) {
         };
     })
         .with({ type: actionTypes.USER_ACTIONS.RESET_USER }, function () {
-        return initialState;
+        return initialState$1;
     })
         .with({ type: actionTypes.USER_ACTIONS.UPDATE_USER_INFO }, function (_a) {
         var payload = _a.payload;
@@ -201,6 +203,59 @@ function reducer(state, action) {
     });
 }
 
+var 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',
+};
+
+function reducer(state, action) {
+    return index.K(action)
+        .with({ type: APP_INFO_ACTIONS.INITIALIZE_MESSAGE_TEMPLATES_INFO }, function (_a) {
+        var payload = _a.payload;
+        return {
+            messageTemplatesInfo: payload,
+            waitingTemplateKeysMap: {},
+        };
+    })
+        .with({ type: APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE }, function (_a) {
+        var payload = _a.payload;
+        var templatesInfo = state.messageTemplatesInfo;
+        if (!templatesInfo)
+            return state; // Not initialized. Ignore.
+        var key = payload.key, template = payload.template;
+        templatesInfo.templatesMap[key] = template;
+        delete state.waitingTemplateKeysMap[key];
+        return _tslib.__assign(_tslib.__assign({}, state), { messageTemplatesInfo: templatesInfo });
+    })
+        .with({ type: APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY }, function (_a) {
+        var payload = _a.payload;
+        var key = payload.key, requestedAt = payload.requestedAt;
+        state.waitingTemplateKeysMap[key] = {
+            requestedAt: requestedAt,
+            isError: false,
+        };
+        return _tslib.__assign({}, state);
+    })
+        .with({ type: APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY }, function (_a) {
+        var payload = _a.payload;
+        var key = payload.key;
+        var waitingTemplateKeyData = state.waitingTemplateKeysMap[key];
+        if (waitingTemplateKeyData) {
+            waitingTemplateKeyData.isError = true;
+        }
+        return _tslib.__assign({}, state);
+    })
+        .otherwise(function () {
+        return state;
+    });
+}
+
+var initialState = {
+    waitingTemplateKeysMap: {},
+};
+
 function disconnectSdk(_a) {
     var sdkDispatcher = _a.sdkDispatcher, userDispatcher = _a.userDispatcher, sdk = _a.sdk;
     return _tslib.__awaiter(this, void 0, void 0, function () {
@@ -225,7 +280,7 @@ function disconnectSdk(_a) {
     });
 }
 
-var APP_VERSION_STRING = '3.12.1';
+var APP_VERSION_STRING = '3.13.0';
 var INIT_SDK = SDK_ACTIONS.INIT_SDK, SET_SDK_LOADING = SDK_ACTIONS.SET_SDK_LOADING, RESET_SDK = SDK_ACTIONS.RESET_SDK, SDK_ERROR = SDK_ACTIONS.SDK_ERROR;
 var INIT_USER = actionTypes.USER_ACTIONS.INIT_USER, UPDATE_USER_INFO = actionTypes.USER_ACTIONS.UPDATE_USER_INFO, RESET_USER = actionTypes.USER_ACTIONS.RESET_USER;
 function getMissingParamError(_a) {
@@ -262,7 +317,7 @@ function setUpParams(_a) {
 //  6.b check if nickname is to be updated -> yes > update nickname > !resolve
 // 7. If not connected, connectCbError > !reject
 function setUpConnection(_a) {
-    var logger = _a.logger, sdkDispatcher = _a.sdkDispatcher, userDispatcher = _a.userDispatcher, initDashboardConfigs = _a.initDashboardConfigs, userId = _a.userId, appId = _a.appId, customApiHost = _a.customApiHost, customWebSocketHost = _a.customWebSocketHost, configureSession = _a.configureSession, nickname = _a.nickname, profileUrl = _a.profileUrl, accessToken = _a.accessToken, isUserIdUsedForNickname = _a.isUserIdUsedForNickname, sdkInitParams = _a.sdkInitParams, customExtensionParams = _a.customExtensionParams, _b = _a.isMobile, isMobile = _b === void 0 ? false : _b, eventHandlers = _a.eventHandlers;
+    var logger = _a.logger, sdkDispatcher = _a.sdkDispatcher, userDispatcher = _a.userDispatcher, initDashboardConfigs = _a.initDashboardConfigs, userId = _a.userId, appId = _a.appId, customApiHost = _a.customApiHost, customWebSocketHost = _a.customWebSocketHost, configureSession = _a.configureSession, nickname = _a.nickname, profileUrl = _a.profileUrl, accessToken = _a.accessToken, isUserIdUsedForNickname = _a.isUserIdUsedForNickname, sdkInitParams = _a.sdkInitParams, customExtensionParams = _a.customExtensionParams, _b = _a.isMobile, isMobile = _b === void 0 ? false : _b, eventHandlers = _a.eventHandlers, initializeMessageTemplatesInfo = _a.initializeMessageTemplatesInfo;
     return _tslib.__awaiter(this, void 0, void 0, function () {
         var _this = this;
         return _tslib.__generator(this, function (_c) {
@@ -300,51 +355,69 @@ function setUpConnection(_a) {
                                 : (_j = SendbirdChat.DeviceOsPlatform === null || SendbirdChat.DeviceOsPlatform === void 0 ? void 0 : SendbirdChat.DeviceOsPlatform.WEB) !== null && _j !== void 0 ? _j : 'web'),
                         }, customExtensionParams);
                         newSdk_1.addExtension('sb_uikit', APP_VERSION_STRING);
-                        var connectCbSucess_1 = function (user) { return _tslib.__awaiter(_this, void 0, void 0, function () {
-                            var _a, _b;
-                            return _tslib.__generator(this, function (_c) {
-                                (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/connectCbSucess', user);
-                                sdkDispatcher({ type: INIT_SDK, payload: newSdk_1 });
-                                userDispatcher({ type: INIT_USER, payload: user });
-                                initDashboardConfigs(newSdk_1)
-                                    .then(function (config) {
-                                    var _a;
-                                    (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration success', {
-                                        config: config,
-                                    });
-                                })
-                                    .catch(function (error) {
-                                    var _a;
-                                    (_a = logger === null || logger === void 0 ? void 0 : logger.error) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration failed', {
-                                        error: error,
-                                    });
-                                });
-                                // use nickname/profileUrl if provided
-                                // or set userID as nickname
-                                if ((nickname !== user.nickname || profileUrl !== user.profileUrl)
-                                    && !(index$1.isTextuallyNull(nickname) && index$1.isTextuallyNull(profileUrl))) {
-                                    (_b = logger === null || logger === void 0 ? void 0 : logger.info) === null || _b === void 0 ? void 0 : _b.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo', {
-                                        nickname: nickname,
-                                        profileUrl: profileUrl,
-                                    });
-                                    newSdk_1.updateCurrentUserInfo({
-                                        nickname: nickname || user.nickname || (isUserIdUsedForNickname ? user.userId : ''),
-                                        profileUrl: profileUrl || user.profileUrl,
-                                    }).then(function (namedUser) {
-                                        var _a;
-                                        (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {
-                                            nickname: nickname,
-                                            profileUrl: profileUrl,
+                        var connectCbSuccess_1 = function (user) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                            var error_1;
+                            var _a, _b, _c;
+                            return _tslib.__generator(this, function (_d) {
+                                switch (_d.label) {
+                                    case 0:
+                                        (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/connectCbSuccess', user);
+                                        sdkDispatcher({ type: INIT_SDK, payload: newSdk_1 });
+                                        userDispatcher({ type: INIT_USER, payload: user });
+                                        _d.label = 1;
+                                    case 1:
+                                        _d.trys.push([1, 3, , 4]);
+                                        return [4 /*yield*/, initializeMessageTemplatesInfo(newSdk_1)];
+                                    case 2:
+                                        _d.sent();
+                                        return [3 /*break*/, 4];
+                                    case 3:
+                                        error_1 = _d.sent();
+                                        (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.call(logger, 'SendbirdProvider | useConnect/setupConnection/upsertMessageTemplateListInLocalStorage failed', {
+                                            error: error_1,
                                         });
-                                        userDispatcher({ type: UPDATE_USER_INFO, payload: namedUser });
-                                    }).finally(function () {
-                                        resolve();
-                                    });
-                                }
-                                else {
-                                    resolve();
+                                        return [3 /*break*/, 4];
+                                    case 4:
+                                        initDashboardConfigs(newSdk_1)
+                                            .then(function (config) {
+                                            var _a;
+                                            (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration success', {
+                                                config: config,
+                                            });
+                                        })
+                                            .catch(function (error) {
+                                            var _a;
+                                            (_a = logger === null || logger === void 0 ? void 0 : logger.error) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration failed', {
+                                                error: error,
+                                            });
+                                        });
+                                        // use nickname/profileUrl if provided
+                                        // or set userID as nickname
+                                        if ((nickname !== user.nickname || profileUrl !== user.profileUrl)
+                                            && !(index$1.isTextuallyNull(nickname) && index$1.isTextuallyNull(profileUrl))) {
+                                            (_c = logger === null || logger === void 0 ? void 0 : logger.info) === null || _c === void 0 ? void 0 : _c.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo', {
+                                                nickname: nickname,
+                                                profileUrl: profileUrl,
+                                            });
+                                            newSdk_1.updateCurrentUserInfo({
+                                                nickname: nickname || user.nickname || (isUserIdUsedForNickname ? user.userId : ''),
+                                                profileUrl: profileUrl || user.profileUrl,
+                                            }).then(function (namedUser) {
+                                                var _a;
+                                                (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {
+                                                    nickname: nickname,
+                                                    profileUrl: profileUrl,
+                                                });
+                                                userDispatcher({ type: UPDATE_USER_INFO, payload: namedUser });
+                                            }).finally(function () {
+                                                resolve();
+                                            });
+                                        }
+                                        else {
+                                            resolve();
+                                        }
+                                        return [2 /*return*/];
                                 }
-                                return [2 /*return*/];
                             });
                         }); };
                         var connectCbError_1 = function (e) {
@@ -364,7 +437,7 @@ function setUpConnection(_a) {
                         };
                         (_k = logger === null || logger === void 0 ? void 0 : logger.info) === null || _k === void 0 ? void 0 : _k.call(logger, "SendbirdProvider | useConnect/setupConnection/connect connecting using ".concat(accessToken !== null && accessToken !== void 0 ? accessToken : userId));
                         newSdk_1.connect(userId, accessToken)
-                            .then(function (res) { return connectCbSucess_1(res); })
+                            .then(function (res) { return connectCbSuccess_1(res); })
                             .catch(function (err) { return connectCbError_1(err); });
                     }
                     else {
@@ -381,7 +454,7 @@ function setUpConnection(_a) {
 }
 
 function connect(_a) {
-    var logger = _a.logger, sdkDispatcher = _a.sdkDispatcher, userDispatcher = _a.userDispatcher, initDashboardConfigs = _a.initDashboardConfigs, userId = _a.userId, appId = _a.appId, customApiHost = _a.customApiHost, customWebSocketHost = _a.customWebSocketHost, configureSession = _a.configureSession, nickname = _a.nickname, profileUrl = _a.profileUrl, accessToken = _a.accessToken, sdk = _a.sdk, sdkInitParams = _a.sdkInitParams, customExtensionParams = _a.customExtensionParams, isMobile = _a.isMobile, eventHandlers = _a.eventHandlers, isUserIdUsedForNickname = _a.isUserIdUsedForNickname;
+    var logger = _a.logger, sdkDispatcher = _a.sdkDispatcher, userDispatcher = _a.userDispatcher, appInfoDispatcher = _a.appInfoDispatcher, initDashboardConfigs = _a.initDashboardConfigs, userId = _a.userId, appId = _a.appId, customApiHost = _a.customApiHost, customWebSocketHost = _a.customWebSocketHost, configureSession = _a.configureSession, nickname = _a.nickname, profileUrl = _a.profileUrl, accessToken = _a.accessToken, sdk = _a.sdk, sdkInitParams = _a.sdkInitParams, customExtensionParams = _a.customExtensionParams, isMobile = _a.isMobile, eventHandlers = _a.eventHandlers, isUserIdUsedForNickname = _a.isUserIdUsedForNickname, initializeMessageTemplatesInfo = _a.initializeMessageTemplatesInfo;
     return _tslib.__awaiter(this, void 0, void 0, function () {
         return _tslib.__generator(this, function (_b) {
             switch (_b.label) {
@@ -397,6 +470,7 @@ function connect(_a) {
                             logger: logger,
                             sdkDispatcher: sdkDispatcher,
                             userDispatcher: userDispatcher,
+                            appInfoDispatcher: appInfoDispatcher,
                             initDashboardConfigs: initDashboardConfigs,
                             userId: userId,
                             appId: appId,
@@ -411,6 +485,7 @@ function connect(_a) {
                             isMobile: isMobile,
                             eventHandlers: eventHandlers,
                             isUserIdUsedForNickname: isUserIdUsedForNickname,
+                            initializeMessageTemplatesInfo: initializeMessageTemplatesInfo,
                         })];
                 case 2:
                     _b.sent();
@@ -424,7 +499,7 @@ function useConnect(triggerTypes, staticTypes) {
     var _this = this;
     var _a;
     var userId = triggerTypes.userId, appId = triggerTypes.appId, accessToken = triggerTypes.accessToken, isMobile = triggerTypes.isMobile, isUserIdUsedForNickname = triggerTypes.isUserIdUsedForNickname;
-    var logger = staticTypes.logger, nickname = staticTypes.nickname, profileUrl = staticTypes.profileUrl, configureSession = staticTypes.configureSession, customApiHost = staticTypes.customApiHost, customWebSocketHost = staticTypes.customWebSocketHost, sdk = staticTypes.sdk, sdkDispatcher = staticTypes.sdkDispatcher, userDispatcher = staticTypes.userDispatcher, initDashboardConfigs = staticTypes.initDashboardConfigs, sdkInitParams = staticTypes.sdkInitParams, customExtensionParams = staticTypes.customExtensionParams, eventHandlers = staticTypes.eventHandlers;
+    var logger = staticTypes.logger, nickname = staticTypes.nickname, profileUrl = staticTypes.profileUrl, configureSession = staticTypes.configureSession, customApiHost = staticTypes.customApiHost, customWebSocketHost = staticTypes.customWebSocketHost, sdk = staticTypes.sdk, sdkDispatcher = staticTypes.sdkDispatcher, userDispatcher = staticTypes.userDispatcher, appInfoDispatcher = staticTypes.appInfoDispatcher, initDashboardConfigs = staticTypes.initDashboardConfigs, sdkInitParams = staticTypes.sdkInitParams, customExtensionParams = staticTypes.customExtensionParams, eventHandlers = staticTypes.eventHandlers, initializeMessageTemplatesInfo = staticTypes.initializeMessageTemplatesInfo;
     (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect', _tslib.__assign(_tslib.__assign({}, triggerTypes), staticTypes));
     // Note: This is a workaround to prevent the creation of multiple SDK instances when React strict mode is enabled.
     var connectDeps = React.useRef({
@@ -453,12 +528,14 @@ function useConnect(triggerTypes, staticTypes) {
             sdk: sdk,
             sdkDispatcher: sdkDispatcher,
             userDispatcher: userDispatcher,
+            appInfoDispatcher: appInfoDispatcher,
             initDashboardConfigs: initDashboardConfigs,
             isUserIdUsedForNickname: isUserIdUsedForNickname,
             sdkInitParams: sdkInitParams,
             customExtensionParams: customExtensionParams,
             isMobile: isMobile,
             eventHandlers: eventHandlers,
+            initializeMessageTemplatesInfo: initializeMessageTemplatesInfo,
         }).catch(function (error) {
             var _a;
             (_a = logger === null || logger === void 0 ? void 0 : logger.error) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/useEffect', error);
@@ -487,12 +564,14 @@ function useConnect(triggerTypes, staticTypes) {
                             sdk: sdk,
                             sdkDispatcher: sdkDispatcher,
                             userDispatcher: userDispatcher,
+                            appInfoDispatcher: appInfoDispatcher,
                             initDashboardConfigs: initDashboardConfigs,
                             isUserIdUsedForNickname: isUserIdUsedForNickname,
                             sdkInitParams: sdkInitParams,
                             customExtensionParams: customExtensionParams,
                             isMobile: isMobile,
                             eventHandlers: eventHandlers,
+                            initializeMessageTemplatesInfo: initializeMessageTemplatesInfo,
                         })];
                 case 2:
                     _c.sent();
@@ -602,8 +681,8 @@ var VoiceMessageProvider = function (_a) {
 };
 
 function uikitConfigMapper(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-    var legacyConfig = _a.legacyConfig, _4 = _a.uikitOptions, uikitOptions = _4 === void 0 ? {} : _4;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var legacyConfig = _a.legacyConfig, _5 = _a.uikitOptions, uikitOptions = _5 === void 0 ? {} : _5;
     var replyType = legacyConfig.replyType, isMentionEnabled = legacyConfig.isMentionEnabled, isReactionEnabled = legacyConfig.isReactionEnabled, disableUserProfile = legacyConfig.disableUserProfile, isVoiceMessageEnabled = legacyConfig.isVoiceMessageEnabled, isTypingIndicatorEnabledOnChannelList = legacyConfig.isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = legacyConfig.isMessageReceiptStatusEnabledOnChannelList, showSearchIcon = legacyConfig.showSearchIcon;
     return {
         common: {
@@ -625,18 +704,19 @@ function uikitConfigMapper(_a) {
             typingIndicatorTypes: (_s = uikitOptions.groupChannel) === null || _s === void 0 ? void 0 : _s.typingIndicatorTypes,
             enableFeedback: (_t = uikitOptions.groupChannel) === null || _t === void 0 ? void 0 : _t.enableFeedback,
             enableSuggestedReplies: (_u = uikitOptions.groupChannel) === null || _u === void 0 ? void 0 : _u.enableSuggestedReplies,
+            showSuggestedRepliesFor: (_v = uikitOptions.groupChannel) === null || _v === void 0 ? void 0 : _v.showSuggestedRepliesFor,
         },
         groupChannelList: {
-            enableTypingIndicator: (_w = (_v = uikitOptions.groupChannelList) === null || _v === void 0 ? void 0 : _v.enableTypingIndicator) !== null && _w !== void 0 ? _w : isTypingIndicatorEnabledOnChannelList,
-            enableMessageReceiptStatus: (_y = (_x = uikitOptions.groupChannelList) === null || _x === void 0 ? void 0 : _x.enableMessageReceiptStatus) !== null && _y !== void 0 ? _y : isMessageReceiptStatusEnabledOnChannelList,
+            enableTypingIndicator: (_x = (_w = uikitOptions.groupChannelList) === null || _w === void 0 ? void 0 : _w.enableTypingIndicator) !== null && _x !== void 0 ? _x : isTypingIndicatorEnabledOnChannelList,
+            enableMessageReceiptStatus: (_z = (_y = uikitOptions.groupChannelList) === null || _y === void 0 ? void 0 : _y.enableMessageReceiptStatus) !== null && _z !== void 0 ? _z : isMessageReceiptStatusEnabledOnChannelList,
         },
         groupChannelSettings: {
-            enableMessageSearch: (_0 = (_z = uikitOptions.groupChannelSettings) === null || _z === void 0 ? void 0 : _z.enableMessageSearch) !== null && _0 !== void 0 ? _0 : showSearchIcon,
+            enableMessageSearch: (_1 = (_0 = uikitOptions.groupChannelSettings) === null || _0 === void 0 ? void 0 : _0.enableMessageSearch) !== null && _1 !== void 0 ? _1 : showSearchIcon,
         },
         openChannel: {
-            enableOgtag: (_1 = uikitOptions.openChannel) === null || _1 === void 0 ? void 0 : _1.enableOgtag,
+            enableOgtag: (_2 = uikitOptions.openChannel) === null || _2 === void 0 ? void 0 : _2.enableOgtag,
             input: {
-                enableDocument: (_3 = (_2 = uikitOptions.openChannel) === null || _2 === void 0 ? void 0 : _2.input) === null || _3 === void 0 ? void 0 : _3.enableDocument,
+                enableDocument: (_4 = (_3 = uikitOptions.openChannel) === null || _3 === void 0 ? void 0 : _3.input) === null || _4 === void 0 ? void 0 : _4.enableDocument,
             },
         },
     };
@@ -736,6 +816,186 @@ var uikitConfigStorage = {
     },
 };
 
+/**
+ * Takes JSON parsed template and then returns processed message template for storing it in global state.
+ */
+var getProcessedTemplate = function (parsedTemplate) {
+    return {
+        uiTemplate: JSON.stringify(parsedTemplate.ui_template.body.items),
+        colorVariables: parsedTemplate.color_variables,
+    };
+};
+var getProcessedTemplates = function (parsedTemplates) {
+    var processedTemplates = {};
+    parsedTemplates.forEach(function (template) {
+        processedTemplates[template.key] = getProcessedTemplate(template);
+    });
+    return processedTemplates;
+};
+
+var MESSAGE_TEMPLATES_FETCH_LIMIT = 20;
+var INITIALIZE_MESSAGE_TEMPLATES_INFO = APP_INFO_ACTIONS.INITIALIZE_MESSAGE_TEMPLATES_INFO, UPSERT_MESSAGE_TEMPLATE = APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE, UPSERT_WAITING_TEMPLATE_KEY = APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY, MARK_ERROR_WAITING_TEMPLATE_KEY = APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY;
+function useMessageTemplateUtils(_a) {
+    var _this = this;
+    var sdk = _a.sdk, logger = _a.logger, appInfoStore = _a.appInfoStore, appInfoDispatcher = _a.appInfoDispatcher;
+    var messageTemplatesInfo = appInfoStore === null || appInfoStore === void 0 ? void 0 : appInfoStore.messageTemplatesInfo;
+    var getCachedTemplate = function (key) {
+        var _a, _b;
+        if (!messageTemplatesInfo)
+            return null;
+        var cachedTemplate = null;
+        var cachedMessageTemplates = (_a = messageTemplatesInfo === null || messageTemplatesInfo === void 0 ? void 0 : messageTemplatesInfo.templatesMap) !== null && _a !== void 0 ? _a : null;
+        if (cachedMessageTemplates) {
+            cachedTemplate = (_b = cachedMessageTemplates[key]) !== null && _b !== void 0 ? _b : null;
+        }
+        return cachedTemplate;
+    };
+    /**
+     * Fetches a single message template by given key and then
+     * returns processed template for updating templates info in global state.
+     * If no such templates exists (error) or any error occurs in response, return null.
+     */
+    var fetchAllMessageTemplates = function (readySdk) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+        var hasMore, paginationToken, fetchedTemplates, res;
+        return _tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    hasMore = true;
+                    paginationToken = null;
+                    fetchedTemplates = [];
+                    _a.label = 1;
+                case 1:
+                    if (!hasMore) return [3 /*break*/, 3];
+                    return [4 /*yield*/, readySdk.message.getMessageTemplatesByToken(paginationToken, { limit: MESSAGE_TEMPLATES_FETCH_LIMIT })];
+                case 2:
+                    res = _a.sent();
+                    hasMore = res.hasMore;
+                    paginationToken = res.token;
+                    res.templates.forEach(function (messageTemplate) {
+                        fetchedTemplates.push(JSON.parse(messageTemplate.template));
+                    });
+                    return [3 /*break*/, 1];
+                case 3: return [2 /*return*/, fetchedTemplates];
+            }
+        });
+    }); };
+    var initializeMessageTemplatesInfo = function (readySdk) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+        var sdkMessageTemplateToken, cachedMessageTemplatesToken, cachedMessageTemplates, parsedTemplates, newMessageTemplatesInfo, parsedTemplates, newMessageTemplatesInfo;
+        var _a;
+        return _tslib.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    sdkMessageTemplateToken = (_a = readySdk.appInfo) === null || _a === void 0 ? void 0 : _a.messageTemplateInfo.token;
+                    /**
+                     * no sdkMessageTemplateToken => no templates => clear cached
+                     */
+                    if (!sdkMessageTemplateToken) {
+                        localStorage.removeItem(consts.CACHED_MESSAGE_TEMPLATES_TOKEN_KEY);
+                        localStorage.removeItem(consts.CACHED_MESSAGE_TEMPLATES_KEY);
+                        return [2 /*return*/];
+                    }
+                    cachedMessageTemplatesToken = localStorage.getItem(consts.CACHED_MESSAGE_TEMPLATES_TOKEN_KEY);
+                    cachedMessageTemplates = localStorage.getItem(consts.CACHED_MESSAGE_TEMPLATES_KEY);
+                    if (!(!cachedMessageTemplatesToken
+                        || cachedMessageTemplatesToken !== sdkMessageTemplateToken)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, fetchAllMessageTemplates(readySdk)];
+                case 1:
+                    parsedTemplates = _b.sent();
+                    newMessageTemplatesInfo = {
+                        token: sdkMessageTemplateToken,
+                        templatesMap: getProcessedTemplates(parsedTemplates),
+                    };
+                    appInfoDispatcher({ type: INITIALIZE_MESSAGE_TEMPLATES_INFO, payload: newMessageTemplatesInfo });
+                    localStorage.setItem(consts.CACHED_MESSAGE_TEMPLATES_TOKEN_KEY, sdkMessageTemplateToken);
+                    localStorage.setItem(consts.CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify(parsedTemplates));
+                    return [3 /*break*/, 3];
+                case 2:
+                    if (cachedMessageTemplatesToken
+                        && cachedMessageTemplatesToken === sdkMessageTemplateToken
+                        && cachedMessageTemplates) {
+                        parsedTemplates = JSON.parse(cachedMessageTemplates);
+                        newMessageTemplatesInfo = {
+                            token: sdkMessageTemplateToken,
+                            templatesMap: getProcessedTemplates(parsedTemplates),
+                        };
+                        appInfoDispatcher({ type: INITIALIZE_MESSAGE_TEMPLATES_INFO, payload: newMessageTemplatesInfo });
+                    }
+                    _b.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * If given message is a template message with template key and if the key does not exist in the cache,
+     * update the cache by fetching the template.
+     */
+    var updateMessageTemplatesInfo = function (templateKey, requestedAt) { return _tslib.__awaiter(_this, void 0, void 0, function () {
+        var parsedTemplate, newTemplate, e_1, cachedMessageTemplates, parsedTemplates, processedTemplate;
+        var _a;
+        return _tslib.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!appInfoDispatcher) return [3 /*break*/, 5];
+                    appInfoDispatcher({
+                        type: UPSERT_WAITING_TEMPLATE_KEY,
+                        payload: {
+                            key: templateKey,
+                            requestedAt: requestedAt,
+                        },
+                    });
+                    parsedTemplate = null;
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, sdk.message.getMessageTemplate(templateKey)];
+                case 2:
+                    newTemplate = _b.sent();
+                    parsedTemplate = JSON.parse(newTemplate.template);
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _b.sent();
+                    (_a = logger === null || logger === void 0 ? void 0 : logger.error) === null || _a === void 0 ? void 0 : _a.call(logger, 'Sendbird | fetchProcessedMessageTemplate failed', e_1);
+                    return [3 /*break*/, 4];
+                case 4:
+                    if (parsedTemplate) {
+                        cachedMessageTemplates = localStorage.getItem(consts.CACHED_MESSAGE_TEMPLATES_KEY);
+                        if (cachedMessageTemplates) {
+                            parsedTemplates = JSON.parse(cachedMessageTemplates);
+                            parsedTemplates.push(parsedTemplate);
+                            localStorage.setItem(consts.CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify(parsedTemplates));
+                        }
+                        else {
+                            localStorage.setItem(consts.CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify([parsedTemplate]));
+                        }
+                        processedTemplate = getProcessedTemplate(parsedTemplate);
+                        appInfoDispatcher({
+                            type: UPSERT_MESSAGE_TEMPLATE,
+                            payload: {
+                                key: templateKey,
+                                template: processedTemplate,
+                            },
+                        });
+                    }
+                    else {
+                        appInfoDispatcher({
+                            type: MARK_ERROR_WAITING_TEMPLATE_KEY,
+                            payload: {
+                                key: templateKey,
+                            },
+                        });
+                    }
+                    _b.label = 5;
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    return {
+        getCachedTemplate: getCachedTemplate,
+        updateMessageTemplatesInfo: updateMessageTemplatesInfo,
+        initializeMessageTemplatesInfo: initializeMessageTemplatesInfo,
+    };
+}
+
 function SendbirdProvider(props) {
     var localConfigs = uikitConfigMapper({
         legacyConfig: {
@@ -770,13 +1030,24 @@ var SendbirdSDK = function (_a) {
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
     var _0 = React.useState(LoggerFactory(logLevel)), logger = _0[0], setLogger = _0[1];
     var pubSub = React.useState(function () { return customPubSub !== null && customPubSub !== void 0 ? customPubSub : index$2.pubSubFactory(); })[0];
-    var _1 = React.useReducer(reducer$1, initialState$1), sdkStore = _1[0], sdkDispatcher = _1[1];
-    var _2 = React.useReducer(reducer, initialState), userStore = _2[0], userDispatcher = _2[1];
-    var _3 = uikitTools.useUIKitConfig(), configs = _3.configs, configsWithAppAttr = _3.configsWithAppAttr, initDashboardConfigs = _3.initDashboardConfigs;
+    var _1 = React.useReducer(reducer$2, initialState$2), sdkStore = _1[0], sdkDispatcher = _1[1];
+    var _2 = React.useReducer(reducer$1, initialState$1), userStore = _2[0], userDispatcher = _2[1];
+    var _3 = React.useReducer(reducer, initialState), appInfoStore = _3[0], appInfoDispatcher = _3[1];
+    var _4 = uikitTools.useUIKitConfig(), configs = _4.configs, configsWithAppAttr = _4.configsWithAppAttr, initDashboardConfigs = _4.initDashboardConfigs;
     var sdkInitialized = sdkStore.initialized;
     var sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
-    var _4 = (_b = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) !== null && _b !== void 0 ? _b : {}, uploadSizeLimit = _4.uploadSizeLimit, multipleFilesMessageFileCountLimit = _4.multipleFilesMessageFileCountLimit;
+    var _5 = (_b = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) !== null && _b !== void 0 ? _b : {}, uploadSizeLimit = _5.uploadSizeLimit, multipleFilesMessageFileCountLimit = _5.multipleFilesMessageFileCountLimit;
     useTheme(colorSet);
+    var _6 = useMessageTemplateUtils({
+        sdk: sdk,
+        logger: logger,
+        appInfoStore: appInfoStore,
+        appInfoDispatcher: appInfoDispatcher,
+    }), getCachedTemplate = _6.getCachedTemplate, updateMessageTemplatesInfo = _6.updateMessageTemplatesInfo, initializeMessageTemplatesInfo = _6.initializeMessageTemplatesInfo;
+    var utils = {
+        updateMessageTemplatesInfo: updateMessageTemplatesInfo,
+        getCachedTemplate: getCachedTemplate,
+    };
     var reconnect = useConnect({
         appId: appId,
         userId: userId,
@@ -795,8 +1066,10 @@ var SendbirdSDK = function (_a) {
         sdk: sdk,
         sdkDispatcher: sdkDispatcher,
         userDispatcher: userDispatcher,
+        appInfoDispatcher: appInfoDispatcher,
         initDashboardConfigs: initDashboardConfigs,
         eventHandlers: eventHandlers,
+        initializeMessageTemplatesInfo: initializeMessageTemplatesInfo,
     });
     useMarkAsDeliveredScheduler.useUnmount(function () {
         if (typeof sdk.disconnect === 'function') {
@@ -818,7 +1091,7 @@ var SendbirdSDK = function (_a) {
         'sendbird-emoji-list-portal',
     ], 'body');
     // should move to reducer
-    var _5 = React.useState(theme), currentTheme = _5[0], setCurrentTheme = _5[1];
+    var _7 = React.useState(theme), currentTheme = _7[0], setCurrentTheme = _7[1];
     React.useEffect(function () {
         setCurrentTheme(theme);
     }, [theme]);
@@ -883,10 +1156,12 @@ var SendbirdSDK = function (_a) {
             stores: {
                 sdkStore: sdkStore,
                 userStore: userStore,
+                appInfoStore: appInfoStore,
             },
             dispatchers: {
                 sdkDispatcher: sdkDispatcher,
                 userDispatcher: userDispatcher,
+                appInfoDispatcher: appInfoDispatcher,
                 reconnect: reconnect,
             },
             config: {
@@ -938,6 +1213,7 @@ var SendbirdSDK = function (_a) {
                     typingIndicatorTypes: configs.groupChannel.channel.typingIndicatorTypes,
                     enableFeedback: configs.groupChannel.channel.enableFeedback,
                     enableSuggestedReplies: configs.groupChannel.channel.enableSuggestedReplies,
+                    showSuggestedRepliesFor: configs.groupChannel.channel.showSuggestedRepliesFor,
                 },
                 openChannel: {
                     enableOgtag: sdkInitialized && configsWithAppAttr(sdk).openChannel.channel.enableOgtag,
@@ -946,6 +1222,7 @@ var SendbirdSDK = function (_a) {
             },
             eventHandlers: eventHandlers,
             emojiManager: emojiManager,
+            utils: utils,
         } },
         React.createElement(MediaQueryContext.MediaQueryProvider, { logger: logger, breakpoint: breakpoint },
             React.createElement(LocalizationContext.LocalizationProvider, { stringSet: localeStringSet, dateLocale: dateLocale },