@sendbird/uikit-react 3.4.8 → 3.4.9-rc.0

package/SendbirdProvider.js

@@ -1,23 +1,23 @@
-import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-eaf55eff.js';
-import React__default, { useLayoutEffect, useState, useEffect, useCallback, useMemo, useReducer } from 'react';
+import { _ as _objectSpread2, a as _defineProperty } from './_rollupPluginBabelHelpers-8c286a7c.js';
+import React__default, { useLayoutEffect, useState, useEffect, useCallback, useContext, createContext, useMemo, useReducer } from 'react';
 import { SendbirdSdkContext } from './withSendbird.js';
 import cssVars from 'css-vars-ponyfill';
-import { K } from './index.module-1c75b4f5.js';
-import { U as USER_ACTIONS } from './actionTypes-98eee9f4.js';
+import { K } from './index.module-3529d572.js';
+import { U as USER_ACTIONS } from './actionTypes-bd8af98d.js';
 import SendbirdChat, { ConnectionHandler } from '@sendbird/chat';
-import { u as uuidv4 } from './uuid-c94bd88b.js';
+import { u as uuidv4 } from './uuid-295e6b8b.js';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
-import { i as isTextuallyNull } from './index-d8fdbe6f.js';
-import { V as VoicePlayerProvider } from './index-ae8e6fc3.js';
+import { i as isTextuallyNull } from './index-2d3d2283.js';
+import { V as VoicePlayerProvider } from './index-8d2735b6.js';
 import { VoiceRecorderProvider } from './VoiceRecorder/context.js';
-import { L as LocalizationProvider } from './LocalizationContext-ae38446a.js';
-import { M as MediaQueryProvider } from './MediaQueryContext-8d283dc2.js';
-import { g as getStringSet } from './stringSet-6d89212b.js';
-import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-9ece4263.js';
+import { L as LocalizationProvider } from './LocalizationContext-8b7b48ec.js';
+import { M as MediaQueryProvider } from './MediaQueryContext-744e0eb4.js';
+import { g as getStringSet } from './stringSet-387833a3.js';
+import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-63e52cd8.js';
 import './utils/message/getOutgoingMessageState.js';
 import './useSendbirdStateContext.js';
-import './index-321e838f.js';
+import './index-617179bd.js';
 
 const isEmpty = obj => {
   if (obj === null || obj === undefined) {
@@ -322,6 +322,7 @@ async function disconnectSdk(_ref) {
   });
 }
 
+const APP_VERSION_STRING = '3.4.9-rc.0';
 const {
   INIT_SDK,
   SET_SDK_LOADING,
@@ -333,7 +334,6 @@ const {
   UPDATE_USER_INFO,
   RESET_USER
 } = USER_ACTIONS;
-const APP_VERSION_STRING = '3.4.8';
 function getMissingParamError(_ref) {
   let {
     userId,
@@ -370,7 +370,7 @@ function setUpParams(_ref2) {
 //  1.b. If yes, continue
 // 2. Set up params with custom host if provided
 // 3. Set up session handler if provided
-// 4. Set up version if not storybook
+// 4. Set up version
 // 5. Connect to Sendbird -> either using user ID or (user ID + access token)
 // 6. If connected, connectCbSucess
 //  6.a check if nickname is to be updated -> no > !resolve immediately
@@ -381,6 +381,7 @@ async function setUpConnection(_ref3) {
     logger,
     sdkDispatcher,
     userDispatcher,
+    initDashboardConfigs,
     userId,
     appId,
     customApiHost,
@@ -401,6 +402,7 @@ async function setUpConnection(_ref3) {
       payload: true
     });
     if (userId && appId) {
+      var _logger$info3, _logger$info8;
       const newSdk = setUpParams({
         appId,
         customApiHost,
@@ -412,15 +414,11 @@ async function setUpConnection(_ref3) {
         logger === null || logger === void 0 ? void 0 : (_logger$info2 = logger.info) === null || _logger$info2 === void 0 ? void 0 : _logger$info2.call(logger, 'SendbirdProvider | useConnect/setupConnection/configureSession', sessionHandler);
         newSdk.setSessionHandler(sessionHandler);
       }
-      // to check if code is released version from rollup and *not from storybook*
-      // see rollup config file
-      // @ts-ignore
-      {
-        var _logger$info3;
-        logger === null || logger === void 0 ? void 0 : (_logger$info3 = logger.info) === null || _logger$info3 === void 0 ? void 0 : _logger$info3.call(logger, 'SendbirdProvider | useConnect/setupConnection/setVersion', APP_VERSION_STRING);
-        newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
-      }
-      const connectCbSucess = user => {
+      logger === null || logger === void 0 ? void 0 : (_logger$info3 = logger.info) === null || _logger$info3 === void 0 ? void 0 : _logger$info3.call(logger, 'SendbirdProvider | useConnect/setupConnection/setVersion', {
+        version: APP_VERSION_STRING
+      });
+      newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
+      const connectCbSucess = async user => {
         var _logger$info4;
         logger === null || logger === void 0 ? void 0 : (_logger$info4 = logger.info) === null || _logger$info4 === void 0 ? void 0 : _logger$info4.call(logger, 'SendbirdProvider | useConnect/setupConnection/connectCbSucess', user);
         sdkDispatcher({
@@ -431,11 +429,23 @@ async function setUpConnection(_ref3) {
           type: INIT_USER,
           payload: user
         });
+        initDashboardConfigs(newSdk).then(config => {
+          var _logger$info5;
+          logger === null || logger === void 0 ? void 0 : (_logger$info5 = logger.info) === null || _logger$info5 === void 0 ? void 0 : _logger$info5.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration success', {
+            config
+          });
+        }).catch(error => {
+          var _logger$error;
+          logger === null || logger === void 0 ? void 0 : (_logger$error = logger.error) === null || _logger$error === void 0 ? void 0 : _logger$error.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration failed', {
+            error
+          });
+        });
+
         // use nickname/profileUrl if provided
         // or set userID as nickname
         if ((nickname !== user.nickname || profileUrl !== user.profileUrl) && !(isTextuallyNull(nickname) && isTextuallyNull(profileUrl))) {
-          var _logger$info5;
-          logger === null || logger === void 0 ? void 0 : (_logger$info5 = logger.info) === null || _logger$info5 === void 0 ? void 0 : _logger$info5.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo', {
+          var _logger$info6;
+          logger === null || logger === void 0 ? void 0 : (_logger$info6 = logger.info) === null || _logger$info6 === void 0 ? void 0 : _logger$info6.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo', {
             nickname,
             profileUrl
           });
@@ -443,8 +453,8 @@ async function setUpConnection(_ref3) {
             nickname: nickname || user.nickname,
             profileUrl: profileUrl || user.profileUrl
           }).then(namedUser => {
-            var _logger$info6;
-            logger === null || logger === void 0 ? void 0 : (_logger$info6 = logger.info) === null || _logger$info6 === void 0 ? void 0 : _logger$info6.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {
+            var _logger$info7;
+            logger === null || logger === void 0 ? void 0 : (_logger$info7 = logger.info) === null || _logger$info7 === void 0 ? void 0 : _logger$info7.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {
               nickname,
               profileUrl
             });
@@ -460,9 +470,9 @@ async function setUpConnection(_ref3) {
         }
       };
       const connectCbError = e => {
-        var _logger$error;
+        var _logger$error2;
         const errorMessage = getConnectSbError(e);
-        logger === null || logger === void 0 ? void 0 : (_logger$error = logger.error) === null || _logger$error === void 0 ? void 0 : _logger$error.call(logger, errorMessage, {
+        logger === null || logger === void 0 ? void 0 : (_logger$error2 = logger.error) === null || _logger$error2 === void 0 ? void 0 : _logger$error2.call(logger, errorMessage, {
           e,
           appId,
           userId
@@ -479,17 +489,10 @@ async function setUpConnection(_ref3) {
         // exit promise with error
         reject(errorMessage);
       };
-      if (accessToken) {
-        var _logger$info7;
-        logger === null || logger === void 0 ? void 0 : (_logger$info7 = logger.info) === null || _logger$info7 === void 0 ? void 0 : _logger$info7.call(logger, 'SendbirdProvider | useConnect/setupConnection/connect connecting using accessToken');
-        newSdk.connect(userId, accessToken).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
-      } else {
-        var _logger$info8;
-        logger === null || logger === void 0 ? void 0 : (_logger$info8 = logger.info) === null || _logger$info8 === void 0 ? void 0 : _logger$info8.call(logger, 'SendbirdProvider | useConnect/setupConnection/connect connecting using userId');
-        newSdk.connect(userId).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
-      }
+      logger === null || logger === void 0 ? void 0 : (_logger$info8 = logger.info) === null || _logger$info8 === void 0 ? void 0 : _logger$info8.call(logger, `SendbirdProvider | useConnect/setupConnection/connect connecting using ${accessToken !== null && accessToken !== void 0 ? accessToken : userId}`);
+      newSdk.connect(userId, accessToken).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
     } else {
-      var _logger$error2;
+      var _logger$error3;
       const errorMessage = getMissingParamError({
         userId,
         appId
@@ -497,7 +500,7 @@ async function setUpConnection(_ref3) {
       sdkDispatcher({
         type: SDK_ERROR
       });
-      logger === null || logger === void 0 ? void 0 : (_logger$error2 = logger.error) === null || _logger$error2 === void 0 ? void 0 : _logger$error2.call(logger, errorMessage);
+      logger === null || logger === void 0 ? void 0 : (_logger$error3 = logger.error) === null || _logger$error3 === void 0 ? void 0 : _logger$error3.call(logger, errorMessage);
       // exit promise with error
       reject(errorMessage);
     }
@@ -509,6 +512,7 @@ async function connect(_ref) {
     logger,
     sdkDispatcher,
     userDispatcher,
+    initDashboardConfigs,
     userId,
     appId,
     customApiHost,
@@ -529,6 +533,7 @@ async function connect(_ref) {
     logger,
     sdkDispatcher,
     userDispatcher,
+    initDashboardConfigs,
     userId,
     appId,
     customApiHost,
@@ -556,7 +561,8 @@ function useConnect(triggerTypes, staticTypes) {
     customWebSocketHost,
     sdk,
     sdkDispatcher,
-    userDispatcher
+    userDispatcher,
+    initDashboardConfigs
   } = staticTypes;
   logger === null || logger === void 0 ? void 0 : (_logger$info = logger.info) === null || _logger$info === void 0 ? void 0 : _logger$info.call(logger, 'SendbirdProvider | useConnect', _objectSpread2(_objectSpread2({}, triggerTypes), staticTypes));
   useEffect(() => {
@@ -579,7 +585,8 @@ function useConnect(triggerTypes, staticTypes) {
         customWebSocketHost,
         sdk,
         sdkDispatcher,
-        userDispatcher
+        userDispatcher,
+        initDashboardConfigs
       });
     } catch (error) {
       var _logger$error;
@@ -604,7 +611,8 @@ function useConnect(triggerTypes, staticTypes) {
         customWebSocketHost,
         sdk,
         sdkDispatcher,
-        userDispatcher
+        userDispatcher,
+        initDashboardConfigs
       });
     } catch (error) {
       var _logger$error2;
@@ -751,6 +759,181 @@ function useAppendDomNode() {
   }, []);
 }
 
+function snakeToCamel(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return obj.map(item => snakeToCamel(item));
+  }
+  const result = {};
+  Object.keys(obj).forEach(key => {
+    const camelKey = key.replace(/_\w/g, m => m[1].toUpperCase());
+    result[camelKey] = snakeToCamel(obj[key]);
+  });
+  return result;
+}
+
+// @link https://gist.github.com/navix/6c25c15e0a2d3cd0e5bce999e0086fc9
+/* eslint-disable @typescript-eslint/ban-types */
+
+function isSameType(a, b) {
+  // we do this cause typeof can't differenciate object/ array/ null
+  return Object.prototype.toString.call(a) === Object.prototype.toString.call(b);
+}
+
+/**
+ * @param localConfigs Set directly in code level. It has higher priority than remote ones
+ * @param remoteConfigs Set by Feature Config setting in Dashboard
+ * @returns
+ */
+function getConfigsByPriority(localConfigs, remoteConfigs) {
+  const prioritizedConfigs = _objectSpread2({}, remoteConfigs); // copy remoteConfigs to prevent mutation
+
+  Object.keys(localConfigs).forEach(key => {
+    if (prioritizedConfigs.hasOwnProperty(key) && isSameType(localConfigs[key], prioritizedConfigs[key])) {
+      prioritizedConfigs[key] = typeof localConfigs[key] === 'object'
+      // Recursively call getConfigsByPriority only when the value of the key is Object
+      ? getConfigsByPriority(localConfigs[key], prioritizedConfigs[key]) : localConfigs[key];
+    }
+  });
+  return prioritizedConfigs;
+}
+
+// @link: https://docs.google.com/spreadsheets/d/1-AozBMHRYOXS74vZ-7x2ptQcBL6nnM-orJWRvUgmkd4/edit#gid=0
+const initialConfig = {
+  common: {
+    enableUsingDefaultUserProfile: false
+  },
+  groupChannel: {
+    channel: {
+      enableMention: false,
+      enableOgtag: true,
+      enableReactions: true,
+      enableTypingIndicator: true,
+      enableVoiceMessage: false,
+      input: {
+        camera: {
+          enablePhoto: true,
+          enableVideo: true
+        },
+        enableDocument: true,
+        gallery: {
+          enablePhoto: true,
+          enableVideo: true
+        }
+      },
+      replyType: 'quote_reply',
+      threadReplySelectType: 'thread'
+    },
+    channelList: {
+      enableMessageReceiptStatus: false,
+      enableTypingIndicator: false
+    },
+    setting: {
+      enableMessageSearch: false
+    }
+  },
+  openChannel: {
+    channel: {
+      enableOgtag: true,
+      input: {
+        camera: {
+          enablePhoto: true,
+          enableVideo: true
+        },
+        enableDocument: true,
+        gallery: {
+          enablePhoto: true,
+          enableVideo: true
+        }
+      }
+    }
+  }
+};
+
+class UIKitConfigStorageManager {
+  constructor(storage) {
+    _defineProperty(this, "key", void 0);
+    _defineProperty(this, "storage", void 0);
+    this.storage = storage;
+  }
+  init(appId) {
+    this.key = `sbu@${appId}.uikitConfiguration`;
+    return this.get();
+  }
+  async update(payload) {
+    const storedConfig = await this.get();
+    const mergedConfig = {
+      lastUpdatedAt: payload.lastUpdatedAt,
+      uikitConfigurations: getConfigsByPriority(payload === null || payload === void 0 ? void 0 : payload.uikitConfigurations, storedConfig === null || storedConfig === void 0 ? void 0 : storedConfig.uikitConfigurations)
+    };
+    await this.storage.setItem(this.key, JSON.stringify(mergedConfig));
+    return mergedConfig;
+  }
+  async get() {
+    const initialPayload = {
+      lastUpdatedAt: 0,
+      uikitConfigurations: initialConfig
+    };
+    try {
+      const storedConfig = await this.storage.getItem(this.key);
+      if (storedConfig) {
+        // TODO: Validation
+        return JSON.parse(storedConfig);
+      } else {
+        return initialPayload;
+      }
+    } catch (_unused) {
+      return initialPayload;
+    }
+  }
+}
+
+const UIKitConfigContext = /*#__PURE__*/createContext({
+  initDashboardConfigs: () => Promise.resolve(),
+  configs: initialConfig
+});
+const UIKitConfigProvider = _ref => {
+  let {
+    storage,
+    children,
+    localConfigs
+  } = _ref;
+  // Set by Feature Config setting in Dashboard
+  const [remoteConfigs, setRemoteConfigs] = useState(initialConfig);
+  const initDashboardConfigs = useCallback(async sdk => {
+    try {
+      if (storage == null) {
+        const payload = await sdk.getUIKitConfiguration();
+        setRemoteConfigs(snakeToCamel(payload.json.uikit_configurations));
+        return;
+      }
+
+      // Compare the sdk uikitConfig's lastUpdatedAt <-> stored one
+      const manager = new UIKitConfigStorageManager(storage);
+      const storedConfigs = await manager.init(sdk.appId);
+      if (sdk.appInfo.uikitConfigInfo.lastUpdatedAt === storedConfigs.lastUpdatedAt) {
+        setRemoteConfigs(storedConfigs.uikitConfigurations);
+      } else {
+        const payload = await sdk.getUIKitConfiguration();
+        const updatedPayloed = await manager.update(snakeToCamel(payload.json));
+        setRemoteConfigs(updatedPayloed.uikitConfigurations);
+      }
+    } catch (error) {
+      //
+    }
+  }, []);
+  const configs = getConfigsByPriority(localConfigs, remoteConfigs);
+  return /*#__PURE__*/React__default.createElement(UIKitConfigContext.Provider, {
+    value: {
+      initDashboardConfigs,
+      configs
+    }
+  }, children);
+};
+const useUIKitConfig = () => useContext(UIKitConfigContext);
+
 const VoiceMessageProvider = _ref => {
   let {
     children,
@@ -762,8 +945,20 @@ const VoiceMessageProvider = _ref => {
   return /*#__PURE__*/React__default.createElement(VoiceRecorderProvider, null, /*#__PURE__*/React__default.createElement(VoicePlayerProvider, null, children));
 };
 
-const TIMEOUT = 5000;
-const schedulerFactory = (logger, timeout) => {
+const TIMEOUT = 2000;
+
+/*
+  * This is a factory function that returns a scheduler.
+  * The scheduler is a queue that calls the callback function on intervals.
+  * If interval is empty, the callback function is called immediately.
+  * If interval is not empty, the callback function is called after the interval.
+*/
+function schedulerFactory(_ref) {
+  let {
+    logger,
+    timeout,
+    cb
+  } = _ref;
   let queue = [];
   let interval = null;
   const push = channel => {
@@ -771,25 +966,27 @@ const schedulerFactory = (logger, timeout) => {
     if (!channelPresent) {
       queue.push(channel);
     } else {
-      logger.info('Channel: Mark as read already in queue', channel);
+      logger.info('Channel: Mark as read already in queue', {
+        channel
+      });
     }
     // start the interval if it's not already running
     if (interval) {
       return;
     }
+    const item = queue.shift();
+    if (item) {
+      cb(item);
+    }
     interval = setInterval(() => {
-      if (queue.length === 0) {
+      if (queue.length === 0 && interval) {
         clearInterval(interval);
         interval = null;
         return;
       }
-      const channel = queue.shift();
-      if (channel) {
-        try {
-          channel.markAsRead();
-        } catch (error) {
-          logger.error('Channel: Mark as read failed', error);
-        }
+      const item = queue.shift();
+      if (item) {
+        cb(item);
       }
     }, timeout || TIMEOUT);
   };
@@ -805,7 +1002,17 @@ const schedulerFactory = (logger, timeout) => {
     clear,
     getQueue: () => queue
   };
-};
+}
+
+// this hook accepts a callback to run component is unmounted
+function useUnmount(callback) {
+  useLayoutEffect(() => {
+    return () => {
+      callback();
+    };
+  }, []);
+}
+
 function useMarkAsReadScheduler(_ref, _ref2) {
   let {
     isConnected
@@ -813,17 +1020,99 @@ function useMarkAsReadScheduler(_ref, _ref2) {
   let {
     logger
   } = _ref2;
-  const markAsReadScheduler = useMemo(() => schedulerFactory(logger), []);
+  const markAsReadScheduler = useMemo(() => schedulerFactory({
+    logger,
+    cb: channel => {
+      try {
+        channel.markAsRead();
+      } catch (error) {
+        logger.warning('Channel: Mark as delivered failed', {
+          channel,
+          error
+        });
+      }
+    }
+  }), []);
   useEffect(() => {
     // for simplicity, we clear the queue when the connection is lost
     if (!isConnected) {
       markAsReadScheduler.clear();
     }
   }, [isConnected]);
+  useUnmount(() => {
+    markAsReadScheduler.clear();
+  });
   return markAsReadScheduler;
 }
 
-const Sendbird = _ref => {
+function useMarkAsDeliveredScheduler(_ref, _ref2) {
+  let {
+    isConnected
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  const markAsDeliveredScheduler = useMemo(() => schedulerFactory({
+    logger,
+    cb: channel => {
+      try {
+        channel.markAsDelivered();
+      } catch (error) {
+        logger.warning('Channel: Mark as delivered failed', {
+          channel,
+          error
+        });
+      }
+    }
+  }), []);
+  useEffect(() => {
+    // for simplicity, we clear the queue when the connection is lost
+    if (!isConnected) {
+      markAsDeliveredScheduler.clear();
+    }
+  }, [isConnected]);
+  useUnmount(() => {
+    markAsDeliveredScheduler.clear();
+  });
+  return markAsDeliveredScheduler;
+}
+
+function Sendbird(props) {
+  const {
+    replyType = 'NONE',
+    isMentionEnabled = false,
+    isReactionEnabled = true,
+    disableUserProfile = false,
+    isVoiceMessageEnabled = true,
+    isTypingIndicatorEnabledOnChannelList = false,
+    isMessageReceiptStatusEnabledOnChannelList = false
+  } = props;
+  return /*#__PURE__*/React__default.createElement(UIKitConfigProvider, {
+    localConfigs: {
+      common: {
+        enableUsingDefaultUserProfile: !disableUserProfile
+      },
+      groupChannel: {
+        channel: {
+          enableReactions: isReactionEnabled,
+          enableMention: isMentionEnabled,
+          enableVoiceMessage: isVoiceMessageEnabled,
+          /**
+           * Since dashbord UIKit Configuration's replyType is consisted of all lowercase letters,
+           * we convert it from here.
+           * i.e. 'THREAD' -> 'thread'
+           */
+          replyType: replyType.toLowerCase()
+        },
+        channelList: {
+          enableTypingIndicator: isTypingIndicatorEnabledOnChannelList,
+          enableMessageReceiptStatus: isMessageReceiptStatusEnabledOnChannelList
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(SendbirdSDK, props));
+}
+const SendbirdSDK = _ref => {
   let {
     appId,
     userId,
@@ -837,7 +1126,6 @@ const Sendbird = _ref => {
     nickname = '',
     colorSet = null,
     stringSet = null,
-    replyType = 'NONE',
     dateLocale = null,
     profileUrl = '',
     voiceRecord = {
@@ -847,17 +1135,11 @@ const Sendbird = _ref => {
     userListQuery = null,
     imageCompression = {},
     allowProfileEdit = false,
-    isMentionEnabled = false,
-    isReactionEnabled = true,
-    disableUserProfile = false,
-    isVoiceMessageEnabled = true,
     disableMarkAsDelivered = false,
-    isTypingIndicatorEnabledOnChannelList = false,
-    isMessageReceiptStatusEnabledOnChannelList = false,
     renderUserProfile = null,
     onUserProfileMessage = null
   } = _ref;
-  const mediaQueryBreakPoint = false;
+  const breakpoint = false;
   const {
     logLevel = '',
     userMention = {},
@@ -867,6 +1149,10 @@ const Sendbird = _ref => {
   const [pubSub] = useState(pubSubFactory());
   const [sdkStore, sdkDispatcher] = useReducer(reducer$1, initialState$1);
   const [userStore, userDispatcher] = useReducer(reducer, initialState);
+  const {
+    configs,
+    initDashboardConfigs
+  } = useUIKitConfig();
   useTheme(colorSet);
   const reconnect = useConnect({
     appId,
@@ -881,7 +1167,8 @@ const Sendbird = _ref => {
     customWebSocketHost,
     sdk: sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk,
     sdkDispatcher,
-    userDispatcher
+    userDispatcher,
+    initDashboardConfigs
   });
 
   // to create a pubsub to communicate between parent and child
@@ -930,6 +1217,11 @@ const Sendbird = _ref => {
   }, {
     logger
   });
+  const markAsDeliveredScheduler = useMarkAsDeliveredScheduler({
+    isConnected: isOnline
+  }, {
+    logger
+  });
   const localeStringSet = React__default.useMemo(() => {
     if (!stringSet) {
       return getStringSet('en');
@@ -948,7 +1240,6 @@ const Sendbird = _ref => {
         reconnect
       },
       config: {
-        disableUserProfile,
         disableMarkAsDelivered,
         renderUserProfile,
         onUserProfileMessage,
@@ -965,28 +1256,39 @@ const Sendbird = _ref => {
         imageCompression: _objectSpread2({
           compressionRate: 0.7
         }, imageCompression),
-        isReactionEnabled,
-        isMentionEnabled: isMentionEnabled || false,
-        isVoiceMessageEnabled,
         voiceRecord,
         userMention: {
           maxMentionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || 10,
           maxSuggestionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15
         },
-        isTypingIndicatorEnabledOnChannelList,
-        isMessageReceiptStatusEnabledOnChannelList,
-        replyType,
-        markAsReadScheduler
+        markAsReadScheduler,
+        markAsDeliveredScheduler,
+        // From UIKitConfigProvider.localConfigs
+        disableUserProfile: !configs.common.enableUsingDefaultUserProfile,
+        isReactionEnabled: configs.groupChannel.channel.enableReactions,
+        isMentionEnabled: configs.groupChannel.channel.enableMention,
+        isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage,
+        replyType:
+        /**
+         * Since UIKitConfigContext's replyType is consisted of all lowercase letters,
+         * we need to convert it into all uppercase ones like
+         *  - 'thread' -> 'THREAD'
+         *  - 'quote_reply' -> 'QUOTE_REPLY'
+         */
+        configs.groupChannel.channel.replyType.toUpperCase(),
+        isTypingIndicatorEnabledOnChannelList: configs.groupChannel.channelList.enableTypingIndicator,
+        isMessageReceiptStatusEnabledOnChannelList: configs.groupChannel.channelList.enableMessageReceiptStatus
+        // TODO(Ahyoung): add more configs from UIKitConfigProvider.remoteConfigs
       }
     }
   }, /*#__PURE__*/React__default.createElement(MediaQueryProvider, {
     logger: logger,
-    mediaQueryBreakPoint: mediaQueryBreakPoint
+    breakpoint: breakpoint
   }, /*#__PURE__*/React__default.createElement(LocalizationProvider, {
     stringSet: localeStringSet,
     dateLocale: dateLocale
   }, /*#__PURE__*/React__default.createElement(VoiceMessageProvider, {
-    isVoiceMessageEnabled: isVoiceMessageEnabled
+    isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage
   }, children))));
 };