@sendbird/uikit-react 3.12.1 → 3.13.1

package/SendbirdProvider.js

@@ -1,35 +1,35 @@
-import { _ as __assign, a as __awaiter, b as __generator, c as __spreadArray } from './chunks/bundle-yoFO4gJM.js';
+import { _ as __assign, a as __awaiter, b as __generator, c as __spreadArray } from './chunks/bundle-XgKdQ_N6.js';
 import React__default, { useLayoutEffect, useRef, useEffect, useCallback, useMemo, useState, useReducer } from 'react';
 import { UIKitConfigProvider, useUIKitConfig } from '@sendbird/uikit-tools';
 import { SendbirdSdkContext } from './withSendbird.js';
 import cssVars from 'css-vars-ponyfill';
-import { K } from './chunks/bundle-5fPKUbCn.js';
-import { U as USER_ACTIONS } from './chunks/bundle-J6qXeThU.js';
-import { s as schedulerFactory, b as useUnmount, u as useOnlineStatus, a as useMarkAsDeliveredScheduler } from './chunks/bundle-6cTGHg9E.js';
+import { K } from './chunks/bundle-ZcW4v7tz.js';
+import { U as USER_ACTIONS } from './chunks/bundle-v0F6T-gl.js';
+import { s as schedulerFactory, b as useUnmount, u as useOnlineStatus, a as useMarkAsDeliveredScheduler } from './chunks/bundle-Q-LEE_gW.js';
 import SendbirdChat, { SendbirdProduct, SendbirdPlatform, DeviceOsPlatform } from '@sendbird/chat';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
-import { W as isTextuallyNull } from './chunks/bundle-TYsOyvS5.js';
-import { n as noop } from './chunks/bundle-TovLF3ih.js';
-import { p as pubSubFactory } from './chunks/bundle-PrsPGxuw.js';
-import { b as VoicePlayerProvider } from './chunks/bundle-wKSIzWUl.js';
+import { X as isTextuallyNull } from './chunks/bundle-aRzA6Ar7.js';
+import { n as noop } from './chunks/bundle-LN_WdItn.js';
+import { p as pubSubFactory } from './chunks/bundle-1gwAtv3_.js';
+import { b as VoicePlayerProvider } from './chunks/bundle-ILthLqdx.js';
 import { VoiceRecorderProvider } from './VoiceRecorder/context.js';
-import { a as LocalizationProvider } from './chunks/bundle-_xgfKjN0.js';
-import { u as useMediaQueryContext, M as MediaQueryProvider } from './chunks/bundle-fMkcL8C8.js';
-import { g as getStringSet } from './chunks/bundle-yPhMS1LV.js';
-import { m as DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT, n as VOICE_RECORDER_DEFAULT_MAX, g as VOICE_RECORDER_DEFAULT_MIN } from './chunks/bundle-S-mn30SU.js';
-import { g as getCaseResolvedReplyType, a as getCaseResolvedThreadReplySelectType } from './chunks/bundle-taqbMkQe.js';
+import { a as LocalizationProvider } from './chunks/bundle-fGp6w98-.js';
+import { u as useMediaQueryContext, M as MediaQueryProvider } from './chunks/bundle-726H1FcN.js';
+import { g as getStringSet } from './chunks/bundle-DpuIAEpN.js';
+import { C as CACHED_MESSAGE_TEMPLATES_TOKEN_KEY, m as CACHED_MESSAGE_TEMPLATES_KEY, n as DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT, o as VOICE_RECORDER_DEFAULT_MAX, g as VOICE_RECORDER_DEFAULT_MIN } from './chunks/bundle-lQUghzL6.js';
+import { g as getCaseResolvedReplyType, a as getCaseResolvedThreadReplySelectType } from './chunks/bundle-iNwXYg8t.js';
 import { GlobalModalProvider } from './hooks/useModal.js';
 export { useSendbirdStateContext } from './useSendbirdStateContext.js';
-import './chunks/bundle-wdUAfmoS.js';
+import './chunks/bundle-a81-P2WI.js';
 import './utils/message/getOutgoingMessageState.js';
-import './chunks/bundle-6hgn3L9Y.js';
+import './chunks/bundle-ZxknBRho.js';
 import 'react-dom';
 import './ui/IconButton.js';
 import './ui/Button.js';
-import './chunks/bundle-52hs7-M-.js';
+import './chunks/bundle-ueZaur75.js';
 import './ui/Icon.js';
-import './chunks/bundle-wO0wz3br.js';
+import './chunks/bundle-vKBxT9Oa.js';
 
 var isEmpty = function (obj) {
     if (obj === null || obj === undefined) {
@@ -114,10 +114,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)',
@@ -136,14 +138,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 K(action)
         .with({ type: SDK_ACTIONS.SET_SDK_LOADING }, function (_a) {
         var payload = _a.payload;
@@ -162,20 +164,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 K(action)
         .with({ type: USER_ACTIONS.INIT_USER }, function (_a) {
         var payload = _a.payload;
@@ -186,7 +188,7 @@ function reducer(state, action) {
         };
     })
         .with({ type: USER_ACTIONS.RESET_USER }, function () {
-        return initialState;
+        return initialState$1;
     })
         .with({ type: USER_ACTIONS.UPDATE_USER_INFO }, function (_a) {
         var payload = _a.payload;
@@ -197,6 +199,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 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 __assign(__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 __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 __assign({}, state);
+    })
+        .otherwise(function () {
+        return state;
+    });
+}
+
+var initialState = {
+    waitingTemplateKeysMap: {},
+};
+
 function disconnectSdk(_a) {
     var sdkDispatcher = _a.sdkDispatcher, userDispatcher = _a.userDispatcher, sdk = _a.sdk;
     return __awaiter(this, void 0, void 0, function () {
@@ -221,7 +276,7 @@ function disconnectSdk(_a) {
     });
 }
 
-var APP_VERSION_STRING = '3.12.1';
+var APP_VERSION_STRING = '3.13.1';
 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 = USER_ACTIONS.INIT_USER, UPDATE_USER_INFO = USER_ACTIONS.UPDATE_USER_INFO, RESET_USER = USER_ACTIONS.RESET_USER;
 function getMissingParamError(_a) {
@@ -258,7 +313,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 __awaiter(this, void 0, void 0, function () {
         var _this = this;
         return __generator(this, function (_c) {
@@ -296,51 +351,69 @@ function setUpConnection(_a) {
                                 : (_j = DeviceOsPlatform === null || DeviceOsPlatform === void 0 ? void 0 : DeviceOsPlatform.WEB) !== null && _j !== void 0 ? _j : 'web'),
                         }, customExtensionParams);
                         newSdk_1.addExtension('sb_uikit', APP_VERSION_STRING);
-                        var connectCbSucess_1 = function (user) { return __awaiter(_this, void 0, void 0, function () {
-                            var _a, _b;
-                            return __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)
-                                    && !(isTextuallyNull(nickname) && 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 __awaiter(_this, void 0, void 0, function () {
+                            var error_1;
+                            var _a, _b, _c;
+                            return __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)
+                                            && !(isTextuallyNull(nickname) && 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) {
@@ -360,7 +433,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 {
@@ -377,7 +450,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 __awaiter(this, void 0, void 0, function () {
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -393,6 +466,7 @@ function connect(_a) {
                             logger: logger,
                             sdkDispatcher: sdkDispatcher,
                             userDispatcher: userDispatcher,
+                            appInfoDispatcher: appInfoDispatcher,
                             initDashboardConfigs: initDashboardConfigs,
                             userId: userId,
                             appId: appId,
@@ -407,6 +481,7 @@ function connect(_a) {
                             isMobile: isMobile,
                             eventHandlers: eventHandlers,
                             isUserIdUsedForNickname: isUserIdUsedForNickname,
+                            initializeMessageTemplatesInfo: initializeMessageTemplatesInfo,
                         })];
                 case 2:
                     _b.sent();
@@ -420,7 +495,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', __assign(__assign({}, triggerTypes), staticTypes));
     // Note: This is a workaround to prevent the creation of multiple SDK instances when React strict mode is enabled.
     var connectDeps = useRef({
@@ -449,12 +524,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);
@@ -483,12 +560,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();
@@ -598,8 +677,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: {
@@ -621,18 +700,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,
             },
         },
     };
@@ -732,6 +812,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 __awaiter(_this, void 0, void 0, function () {
+        var hasMore, paginationToken, fetchedTemplates, res;
+        return __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 __awaiter(_this, void 0, void 0, function () {
+        var sdkMessageTemplateToken, cachedMessageTemplatesToken, cachedMessageTemplates, parsedTemplates, newMessageTemplatesInfo, parsedTemplates, newMessageTemplatesInfo;
+        var _a;
+        return __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(CACHED_MESSAGE_TEMPLATES_TOKEN_KEY);
+                        localStorage.removeItem(CACHED_MESSAGE_TEMPLATES_KEY);
+                        return [2 /*return*/];
+                    }
+                    cachedMessageTemplatesToken = localStorage.getItem(CACHED_MESSAGE_TEMPLATES_TOKEN_KEY);
+                    cachedMessageTemplates = localStorage.getItem(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(CACHED_MESSAGE_TEMPLATES_TOKEN_KEY, sdkMessageTemplateToken);
+                    localStorage.setItem(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 __awaiter(_this, void 0, void 0, function () {
+        var parsedTemplate, newTemplate, e_1, cachedMessageTemplates, parsedTemplates, processedTemplate;
+        var _a;
+        return __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(CACHED_MESSAGE_TEMPLATES_KEY);
+                        if (cachedMessageTemplates) {
+                            parsedTemplates = JSON.parse(cachedMessageTemplates);
+                            parsedTemplates.push(parsedTemplate);
+                            localStorage.setItem(CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify(parsedTemplates));
+                        }
+                        else {
+                            localStorage.setItem(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: {
@@ -766,13 +1026,24 @@ var SendbirdSDK = function (_a) {
     var isMobile = useMediaQueryContext().isMobile;
     var _0 = useState(LoggerFactory(logLevel)), logger = _0[0], setLogger = _0[1];
     var pubSub = useState(function () { return customPubSub !== null && customPubSub !== void 0 ? customPubSub : pubSubFactory(); })[0];
-    var _1 = useReducer(reducer$1, initialState$1), sdkStore = _1[0], sdkDispatcher = _1[1];
-    var _2 = useReducer(reducer, initialState), userStore = _2[0], userDispatcher = _2[1];
-    var _3 = useUIKitConfig(), configs = _3.configs, configsWithAppAttr = _3.configsWithAppAttr, initDashboardConfigs = _3.initDashboardConfigs;
+    var _1 = useReducer(reducer$2, initialState$2), sdkStore = _1[0], sdkDispatcher = _1[1];
+    var _2 = useReducer(reducer$1, initialState$1), userStore = _2[0], userDispatcher = _2[1];
+    var _3 = useReducer(reducer, initialState), appInfoStore = _3[0], appInfoDispatcher = _3[1];
+    var _4 = 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,
@@ -791,8 +1062,10 @@ var SendbirdSDK = function (_a) {
         sdk: sdk,
         sdkDispatcher: sdkDispatcher,
         userDispatcher: userDispatcher,
+        appInfoDispatcher: appInfoDispatcher,
         initDashboardConfigs: initDashboardConfigs,
         eventHandlers: eventHandlers,
+        initializeMessageTemplatesInfo: initializeMessageTemplatesInfo,
     });
     useUnmount(function () {
         if (typeof sdk.disconnect === 'function') {
@@ -814,7 +1087,7 @@ var SendbirdSDK = function (_a) {
         'sendbird-emoji-list-portal',
     ], 'body');
     // should move to reducer
-    var _5 = useState(theme), currentTheme = _5[0], setCurrentTheme = _5[1];
+    var _7 = useState(theme), currentTheme = _7[0], setCurrentTheme = _7[1];
     useEffect(function () {
         setCurrentTheme(theme);
     }, [theme]);
@@ -879,10 +1152,12 @@ var SendbirdSDK = function (_a) {
             stores: {
                 sdkStore: sdkStore,
                 userStore: userStore,
+                appInfoStore: appInfoStore,
             },
             dispatchers: {
                 sdkDispatcher: sdkDispatcher,
                 userDispatcher: userDispatcher,
+                appInfoDispatcher: appInfoDispatcher,
                 reconnect: reconnect,
             },
             config: {
@@ -934,6 +1209,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,
@@ -942,6 +1218,7 @@ var SendbirdSDK = function (_a) {
             },
             eventHandlers: eventHandlers,
             emojiManager: emojiManager,
+            utils: utils,
         } },
         React__default.createElement(MediaQueryProvider, { logger: logger, breakpoint: breakpoint },
             React__default.createElement(LocalizationProvider, { stringSet: localeStringSet, dateLocale: dateLocale },