@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-1

package/cjs/SendbirdProvider.js

@@ -1,191 +1,48 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-a7254c9d.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-3a9d1641.js');
 var React = require('react');
-var PropTypes = require('prop-types');
 var withSendbird = require('./withSendbird.js');
+var cssVars = require('css-vars-ponyfill');
+var index_module = require('./index.module-d2876b1c.js');
+var actionTypes = require('./actionTypes-ecb5bef6.js');
 var SendbirdChat = require('@sendbird/chat');
+var uuid = require('./uuid-5ab4f88b.js');
 var openChannel = require('@sendbird/chat/openChannel');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var actionTypes = require('./actionTypes-0e8bea91.js');
-var index = require('./index-21b2339d.js');
-var tslib_es6 = require('./tslib.es6-43854eb1.js');
-var cssVars = require('css-vars-ponyfill');
-var uuid = require('./uuid-11d4efe8.js');
-var LocalizationContext = require('./LocalizationContext-2b3f310d.js');
-var MediaQueryContext = require('./MediaQueryContext-71862be1.js');
-var stringSet = require('./stringSet-91b919f6.js');
+var index = require('./index-0b8a1074.js');
+var VoicePlayer_context = require('./index-cb1d7ac4.js');
+var VoiceRecorder_context = require('./VoiceRecorder/context.js');
+var LocalizationContext = require('./LocalizationContext-b42fa07d.js');
+var MediaQueryContext = require('./MediaQueryContext-372b55a6.js');
+var stringSet = require('./stringSet-4f30313f.js');
+var consts = require('./consts-f71467c8.js');
 require('./utils/message/getOutgoingMessageState.js');
-require('./index-de151767.js');
+require('./useSendbirdStateContext.js');
+require('./index-97005534.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var SendbirdChat__default = /*#__PURE__*/_interopDefaultLegacy(SendbirdChat);
 var cssVars__default = /*#__PURE__*/_interopDefaultLegacy(cssVars);
+var SendbirdChat__default = /*#__PURE__*/_interopDefaultLegacy(SendbirdChat);
 
-const INIT_SDK = 'INIT_SDK';
-const SET_SDK_LOADING = 'SET_SDK_LOADING';
-const RESET_SDK = 'RESET_SDK';
-const SDK_ERROR = 'SDK_ERROR';
-
-const APP_VERSION_STRING = '3.5.0-beta.0';
-const disconnectSdk = _ref => {
-  let {
-    sdkDispatcher,
-    userDispatcher,
-    sdk,
-    onDisconnect
-  } = _ref;
-  sdkDispatcher({
-    type: SET_SDK_LOADING,
-    payload: true
-  });
-
-  if (sdk && sdk.disconnect) {
-    sdk.disconnect().then(() => {
-      sdkDispatcher({
-        type: RESET_SDK
-      });
-      userDispatcher({
-        type: actionTypes.RESET_USER
-      });
-    }).finally(() => {
-      onDisconnect();
-    });
-  } else {
-    onDisconnect();
-  }
-};
-const handleConnection = (_ref2, dispatchers) => {
-  let {
-    userId,
-    appId,
-    nickname,
-    profileUrl,
-    accessToken,
-    configureSession,
-    customApiHost,
-    customWebSocketHost,
-    sdk,
-    logger
-  } = _ref2;
-  const {
-    sdkDispatcher,
-    userDispatcher
-  } = dispatchers;
-  disconnectSdk({
-    sdkDispatcher,
-    userDispatcher,
-    sdk,
-    logger,
-    onDisconnect: () => {
-      logger.info('Setup connection');
-      let sessionHandler = null;
-      sdkDispatcher({
-        type: SET_SDK_LOADING,
-        payload: true
-      });
-
-      if (userId && appId) {
-        const params = {
-          appId,
-          modules: [new groupChannel.GroupChannelModule(), new openChannel.OpenChannelModule()]
-        };
-
-        if (customApiHost) {
-          params.customApiHost = customApiHost;
-        }
-
-        if (customWebSocketHost) {
-          params.customWebSocketHost = customWebSocketHost;
-        }
-
-        const newSdk = SendbirdChat__default["default"].init(params);
-
-        if (configureSession && typeof configureSession === 'function') {
-          sessionHandler = configureSession(newSdk);
-          newSdk.setSessionHandler(sessionHandler);
-        } // to check if code is released version from rollup and *not from storybook*
-        // see rollup config file
-
-
-        {
-          newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
-        }
-
-        const connectCbSucess = user => {
-          sdkDispatcher({
-            type: INIT_SDK,
-            payload: newSdk
-          });
-          userDispatcher({
-            type: actionTypes.INIT_USER,
-            payload: user
-          }); // use nickname/profileUrl if provided
-          // or set userID as nickname
-
-          if ((nickname !== user.nickname || profileUrl !== user.profileUrl) && !(index.isTextuallyNull(nickname) && index.isTextuallyNull(profileUrl))) {
-            newSdk.updateCurrentUserInfo({
-              nickname: nickname || user.nickname,
-              profileUrl: profileUrl || user.profileUrl
-            }).then(namedUser => {
-              userDispatcher({
-                type: actionTypes.UPDATE_USER_INFO,
-                payload: namedUser
-              });
-            });
-          }
-        };
-
-        const connectCbError = e => {
-          logger.error('Connection failed', `${e}`);
-          sdkDispatcher({
-            type: RESET_SDK
-          });
-          sdkDispatcher({
-            type: actionTypes.RESET_USER
-          });
-          sdkDispatcher({
-            type: SDK_ERROR
-          });
-        };
-
-        if (accessToken) {
-          newSdk.connect(userId, accessToken).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
-        } else {
-          newSdk.connect(userId).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
-        }
-      } else {
-        sdkDispatcher({
-          type: SDK_ERROR
-        });
-        logger.warning('Connection failed', 'UserId or appId missing');
-      }
-    }
-  });
-};
-
-var isEmpty = function (obj) {
+const isEmpty = obj => {
   if (obj === null || obj === undefined) {
     return true;
   }
-
-  for (var prop in obj) {
+  for (const prop in obj) {
     if (obj.hasOwnProperty(prop)) {
       return false;
     }
   }
-
   return JSON.stringify(obj) === JSON.stringify({});
 };
-
-var useTheme = function (overrides) {
-  React.useLayoutEffect(function () {
+const useTheme = overrides => {
+  React.useLayoutEffect(() => {
     if (!isEmpty(overrides)) {
       cssVars__default["default"]({
-        variables: tslib_es6.__assign({
+        variables: _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, {
           '--sendbird-dark-primary-500': '#4d2aa6',
           '--sendbird-dark-primary-400': '#6440C4',
           '--sendbird-dark-primary-300': '#7B53EF',
@@ -262,13 +119,20 @@ var useTheme = function (overrides) {
           '--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)',
           '--sendbird-light-shadow-04': '0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12)',
           '--sendbird-light-shadow-message-input': '0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)'
-        }, overrides)
+        }), overrides)
       });
     }
   }, [overrides]);
 };
 
-var sdkInitialState = {
+const SDK_ACTIONS = {
+  INIT_SDK: 'INIT_SDK',
+  SET_SDK_LOADING: 'SET_SDK_LOADING',
+  RESET_SDK: 'RESET_SDK',
+  SDK_ERROR: 'SDK_ERROR'
+};
+
+const initialState$1 = {
   initialized: false,
   loading: false,
   sdk: {},
@@ -276,112 +140,124 @@ var sdkInitialState = {
 };
 
 function reducer$1(state, action) {
-  switch (action.type) {
-    case SET_SDK_LOADING:
-      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-        initialized: false,
-        loading: action.payload
-      });
-
-    case SDK_ERROR:
-      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-        initialized: false,
-        loading: false,
-        error: true
-      });
-
-    case INIT_SDK:
-      return {
-        sdk: action.payload,
-        initialized: true,
-        loading: false,
-        error: false
-      };
-
-    case RESET_SDK:
-      return sdkInitialState;
-
-    default:
-      return state;
-  }
+  return index_module.K(action).with({
+    type: SDK_ACTIONS.SET_SDK_LOADING
+  }, _ref => {
+    let {
+      payload
+    } = _ref;
+    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
+      initialized: false,
+      loading: payload
+    });
+  }).with({
+    type: SDK_ACTIONS.SDK_ERROR
+  }, () => {
+    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
+      initialized: false,
+      loading: false,
+      error: true
+    });
+  }).with({
+    type: SDK_ACTIONS.INIT_SDK
+  }, _ref2 => {
+    let {
+      payload
+    } = _ref2;
+    return {
+      sdk: payload,
+      initialized: true,
+      loading: false,
+      error: false
+    };
+  }).with({
+    type: SDK_ACTIONS.RESET_SDK
+  }, () => {
+    return initialState$1;
+  }).otherwise(() => {
+    return state;
+  });
 }
 
-var userInitialState = {
+const initialState = {
   initialized: false,
   loading: false,
   user: {}
 };
 
 function reducer(state, action) {
-  switch (action.type) {
-    case actionTypes.INIT_USER:
-      return {
-        initialized: true,
-        loading: false,
-        user: action.payload
-      };
-
-    case actionTypes.RESET_USER:
-      return userInitialState;
-
-    case actionTypes.UPDATE_USER_INFO:
-      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-        user: action.payload
-      });
-
-    default:
-      return state;
-  }
+  return index_module.K(action).with({
+    type: actionTypes.USER_ACTIONS.INIT_USER
+  }, _ref => {
+    let {
+      payload
+    } = _ref;
+    return {
+      initialized: true,
+      loading: false,
+      user: payload
+    };
+  }).with({
+    type: actionTypes.USER_ACTIONS.RESET_USER
+  }, () => {
+    return initialState;
+  }).with({
+    type: actionTypes.USER_ACTIONS.UPDATE_USER_INFO
+  }, _ref2 => {
+    let {
+      payload
+    } = _ref2;
+    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
+      user: payload
+    });
+  }).otherwise(() => {
+    return state;
+  });
 }
 
 function useConnectionStatus(sdk, logger) {
   const [isOnline, setIsOnline] = React.useState(true);
   React.useEffect(() => {
     const uniqueHandlerId = uuid.uuidv4();
-
     try {
       logger.warning('sdk changed', uniqueHandlerId);
       const handler = new SendbirdChat.ConnectionHandler();
-
       handler.onDisconnected = () => {
         logger.warning('onDisconnected', {
           isOnline
         });
       };
-
       handler.onReconnectStarted = () => {
         setIsOnline(false);
         logger.warning('onReconnectStarted', {
           isOnline
         });
       };
-
       handler.onReconnectSucceeded = () => {
         setIsOnline(true);
         logger.warning('onReconnectSucceeded', {
           isOnline
         });
       };
-
       handler.onReconnectFailed = () => {
         sdk.reconnect();
         logger.warning('onReconnectFailed');
       };
-
-      logger.info('Added ConnectionHandler', uniqueHandlerId); // workaround -> addConnectionHandler invalidates session handler
+      logger.info('Added ConnectionHandler', uniqueHandlerId);
+      // workaround -> addConnectionHandler invalidates session handler
       // provided through configureSession
-
       if (sdk !== null && sdk !== void 0 && sdk.addConnectionHandler) {
         sdk.addConnectionHandler(uniqueHandlerId, handler);
       }
-    } catch (_unused) {//
+    } catch (_unused) {
+      //
     }
-
     return () => {
       try {
         sdk.removeConnectionHandler(uniqueHandlerId);
         logger.info('Removed ConnectionHandler', uniqueHandlerId);
-      } catch (_unused2) {//
+      } catch (_unused2) {
+        //
       }
     };
   }, [sdk]);
@@ -389,44 +265,374 @@ function useConnectionStatus(sdk, logger) {
     const tryReconnect = () => {
       try {
         logger.warning('Try reconnecting SDK');
-
         if (sdk.connectionState !== 'OPEN') {
           // connection is not broken yet
           sdk.reconnect();
         }
-      } catch (_unused3) {//
+      } catch (_unused3) {
+        //
       }
-    }; // addEventListener version
-
-
+    };
+    // addEventListener version
     window.addEventListener('online', tryReconnect);
     return () => {
       window.removeEventListener('online', tryReconnect);
     };
-  }, [sdk]); // add offline-class to body
+  }, [sdk]);
 
+  // add offline-class to body
   React.useEffect(() => {
     const body = document.querySelector('body');
-
     if (!isOnline) {
       try {
         body.classList.add('sendbird__offline');
         logger.info('Added class sendbird__offline to body');
-      } catch (e) {//
+      } catch (e) {
+        //
       }
     } else {
       try {
         body.classList.remove('sendbird__offline');
         logger.info('Removed class sendbird__offline from body');
-      } catch (e) {//
+      } catch (e) {
+        //
       }
     }
   }, [isOnline]);
   return isOnline;
 }
 
+async function disconnectSdk(_ref) {
+  let {
+    sdkDispatcher,
+    userDispatcher,
+    sdk
+  } = _ref;
+  return new Promise(resolve => {
+    sdkDispatcher({
+      type: SDK_ACTIONS.SET_SDK_LOADING,
+      payload: true
+    });
+    if (sdk !== null && sdk !== void 0 && sdk.disconnect) {
+      sdk.disconnect().then(() => {
+        sdkDispatcher({
+          type: SDK_ACTIONS.RESET_SDK
+        });
+        userDispatcher({
+          type: actionTypes.USER_ACTIONS.RESET_USER
+        });
+      }).finally(() => {
+        resolve(true);
+      });
+    } else {
+      resolve(true);
+    }
+  });
+}
+
+const APP_VERSION_STRING = '3.5.0-mobile-web-1';
+const {
+  INIT_SDK,
+  SET_SDK_LOADING,
+  RESET_SDK,
+  SDK_ERROR
+} = SDK_ACTIONS;
+const {
+  INIT_USER,
+  UPDATE_USER_INFO,
+  RESET_USER
+} = actionTypes.USER_ACTIONS;
+function getMissingParamError(_ref) {
+  let {
+    userId,
+    appId
+  } = _ref;
+  return `SendbirdProvider | useConnect/setupConnection/Connection failed UserId: ${userId} or appId: ${appId} missing`;
+}
+function getConnectSbError(error) {
+  return `SendbirdProvider | useConnect/setupConnection/Connection failed. ${(error === null || error === void 0 ? void 0 : error.code) || ''} ${(error === null || error === void 0 ? void 0 : error.message) || ''}`;
+}
+function setUpParams(_ref2) {
+  let {
+    appId,
+    customApiHost,
+    customWebSocketHost
+  } = _ref2;
+  const params = {
+    appId,
+    modules: [new groupChannel.GroupChannelModule(), new openChannel.OpenChannelModule()]
+  };
+  if (customApiHost) {
+    params['customApiHost'] = customApiHost;
+  }
+  if (customWebSocketHost) {
+    params['customWebSocketHost'] = customWebSocketHost;
+  }
+  const newSdk = SendbirdChat__default["default"].init(params);
+  return newSdk;
+}
+
+// Steps
+// 1. Check if minimum userID/appID is provided
+//  1.a. If not, throw error > !reject
+//  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
+// 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
+//  6.b check if nickname is to be updated -> yes > update nickname > !resolve
+// 7. If not connected, connectCbError > !reject
+async function setUpConnection(_ref3) {
+  let {
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs,
+    userId,
+    appId,
+    customApiHost,
+    customWebSocketHost,
+    configureSession,
+    nickname,
+    profileUrl,
+    accessToken
+  } = _ref3;
+  return new Promise((resolve, reject) => {
+    var _logger$info;
+    logger === null || logger === void 0 ? void 0 : (_logger$info = logger.info) === null || _logger$info === void 0 ? void 0 : _logger$info.call(logger, 'SendbirdProvider | useConnect/setupConnection/init', {
+      userId,
+      appId
+    });
+    sdkDispatcher({
+      type: SET_SDK_LOADING,
+      payload: true
+    });
+    if (userId && appId) {
+      var _logger$info3, _logger$info8;
+      const newSdk = setUpParams({
+        appId,
+        customApiHost,
+        customWebSocketHost
+      });
+      if (configureSession && typeof configureSession === 'function') {
+        var _logger$info2;
+        const sessionHandler = configureSession(newSdk);
+        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);
+      }
+      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({
+          type: INIT_SDK,
+          payload: newSdk
+        });
+        userDispatcher({
+          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) && !(index.isTextuallyNull(nickname) && index.isTextuallyNull(profileUrl))) {
+          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
+          });
+          newSdk.updateCurrentUserInfo({
+            nickname: nickname || user.nickname,
+            profileUrl: profileUrl || user.profileUrl
+          }).then(namedUser => {
+            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
+            });
+            userDispatcher({
+              type: UPDATE_USER_INFO,
+              payload: namedUser
+            });
+          }).finally(() => {
+            resolve();
+          });
+        } else {
+          resolve();
+        }
+      };
+      const connectCbError = e => {
+        var _logger$error2;
+        const errorMessage = getConnectSbError(e);
+        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
+        });
+        sdkDispatcher({
+          type: RESET_SDK
+        });
+        userDispatcher({
+          type: RESET_USER
+        });
+        sdkDispatcher({
+          type: SDK_ERROR
+        });
+        // exit promise with error
+        reject(errorMessage);
+      };
+      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$error3;
+      const errorMessage = getMissingParamError({
+        userId,
+        appId
+      });
+      sdkDispatcher({
+        type: SDK_ERROR
+      });
+      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);
+    }
+  });
+}
+
+async function connect(_ref) {
+  let {
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs,
+    userId,
+    appId,
+    customApiHost,
+    customWebSocketHost,
+    configureSession,
+    nickname,
+    profileUrl,
+    accessToken,
+    sdk
+  } = _ref;
+  await disconnectSdk({
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    sdk
+  });
+  await setUpConnection({
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs,
+    userId,
+    appId,
+    customApiHost,
+    customWebSocketHost,
+    configureSession,
+    nickname,
+    profileUrl,
+    accessToken
+  });
+}
+
+function useConnect(triggerTypes, staticTypes) {
+  var _logger$info;
+  const {
+    userId,
+    appId,
+    accessToken
+  } = triggerTypes;
+  const {
+    logger,
+    nickname,
+    profileUrl,
+    configureSession,
+    customApiHost,
+    customWebSocketHost,
+    sdk,
+    sdkDispatcher,
+    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', _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, triggerTypes), staticTypes));
+  React.useEffect(() => {
+    var _logger$info2;
+    logger === null || logger === void 0 ? void 0 : (_logger$info2 = logger.info) === null || _logger$info2 === void 0 ? void 0 : _logger$info2.call(logger, 'SendbirdProvider | useConnect/useEffect', {
+      userId,
+      appId,
+      accessToken
+    });
+    try {
+      connect({
+        userId,
+        appId,
+        accessToken,
+        logger,
+        nickname,
+        profileUrl,
+        configureSession,
+        customApiHost,
+        customWebSocketHost,
+        sdk,
+        sdkDispatcher,
+        userDispatcher,
+        initDashboardConfigs
+      });
+    } 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/useEffect', error);
+    }
+  }, [userId, appId, accessToken]);
+  const reconnect = React.useCallback(() => {
+    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/reconnect/useCallback', {
+      sdk
+    });
+    try {
+      connect({
+        userId,
+        appId,
+        accessToken,
+        logger,
+        nickname,
+        profileUrl,
+        configureSession,
+        customApiHost,
+        customWebSocketHost,
+        sdk,
+        sdkDispatcher,
+        userDispatcher,
+        initDashboardConfigs
+      });
+    } catch (error) {
+      var _logger$error2;
+      logger === null || logger === void 0 ? void 0 : (_logger$error2 = logger.error) === null || _logger$error2 === void 0 ? void 0 : _logger$error2.call(logger, 'SendbirdProvider | useConnect/reconnect/useCallback', error);
+    }
+  }, [sdk]);
+  return reconnect;
+}
+
 // Logger, pretty much explains it
 // in SendbirdProvider
+
 // const [logger, setLogger] = useState(LoggerFactory(logLevel));
 const LOG_LEVELS = {
   DEBUG: 'debug',
@@ -435,20 +641,16 @@ const LOG_LEVELS = {
   INFO: 'info',
   ALL: 'all'
 };
-
 const colorLog = level => {
   switch (level) {
     case LOG_LEVELS.WARNING:
       return 'color: Orange';
-
     case LOG_LEVELS.ERROR:
       return 'color: Red';
-
     default:
       return 'color: Gray';
   }
 };
-
 const printLog = _ref => {
   let {
     level,
@@ -458,21 +660,20 @@ const printLog = _ref => {
   // eslint-disable-next-line no-console
   console.log(`%c SendbirdUIKit | ${level} | ${new Date().toISOString()} | ${title} ${description && '|'}`, colorLog(level), description);
 };
+const noop = () => {/* noop */};
 const getDefaultLogger = () => ({
-  info: () => {},
-  error: () => {},
-  warning: () => {}
+  info: noop,
+  error: noop,
+  warning: noop
 });
 const LoggerFactory = (lvl, customInterface) => {
   const logInterface = customInterface || printLog;
   const lvlArray = Array.isArray(lvl) ? lvl : [lvl];
-
   const applyLog = lgLvl => (title, description) => logInterface({
     level: lgLvl,
     title,
     description
   });
-
   const logger = lvlArray.reduce((accumulator, currentLvl) => {
     if (currentLvl === LOG_LEVELS.DEBUG || currentLvl === LOG_LEVELS.ALL) {
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
@@ -481,36 +682,35 @@ const LoggerFactory = (lvl, customInterface) => {
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
-
     if (currentLvl === LOG_LEVELS.INFO) {
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
         info: applyLog(LOG_LEVELS.INFO)
       });
     }
-
     if (currentLvl === LOG_LEVELS.ERROR) {
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
         error: applyLog(LOG_LEVELS.ERROR)
       });
     }
-
     if (currentLvl === LOG_LEVELS.WARNING) {
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
-
     return _rollupPluginBabelHelpers._objectSpread2({}, accumulator);
   }, getDefaultLogger());
   return logger;
 };
 
+// TODO: Make this to hook, useLogger
+
 // https://davidwalsh.name/pubsub-javascript
 // we use pubsub to sync events between multiple components(example - ChannelList, Channel)
 // for example, if customer sends a message from their custom component
 // without pubsub,we would not be able to listen to it
 // in our ChannelList or Conversation
-var pubSubFactory = (() => {
+
+const pubSubFactory = () => {
   const topics = {};
   const hOP = topics.hasOwnProperty;
   return {
@@ -519,11 +719,12 @@ var pubSubFactory = (() => {
       // Create the topic's object if not yet created
       if (!hOP.call(topics, topic)) {
         topics[topic] = [];
-      } // Add the listener to queue
-
+      }
 
-      const index = topics[topic].push(listener) - 1; // Provide handle back for removal of topic
+      // Add the listener to queue
+      const index = topics[topic].push(listener) - 1;
 
+      // Provide handle back for removal of topic
       return {
         remove: () => {
           delete topics[topic][index];
@@ -534,16 +735,17 @@ var pubSubFactory = (() => {
       // If the topic doesn't exist, or there's no listeners in queue, just leave
       if (!hOP.call(topics, topic)) {
         return;
-      } // Cycle through topics queue, fire!
-
+      }
 
+      // Cycle through topics queue, fire!
       topics[topic].forEach(item => {
         item(info !== undefined ? info : {});
       });
     }
   };
-});
+};
 
+/* eslint-disable default-param-last */
 function useAppendDomNode() {
   let ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let rootSelector = arguments.length > 1 ? arguments[1] : undefined;
@@ -557,7 +759,6 @@ function useAppendDomNode() {
     return () => {
       ids.forEach(id => {
         const target = document.getElementById(id);
-
         if (target) {
           root.removeChild(target);
         }
@@ -566,76 +767,425 @@ 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 = _rollupPluginBabelHelpers._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) {
+    _rollupPluginBabelHelpers._defineProperty(this, "key", void 0);
+    _rollupPluginBabelHelpers._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__*/React.createContext({
+  initDashboardConfigs: () => Promise.resolve(),
+  configs: initialConfig
+});
+const UIKitConfigProvider = _ref => {
+  let {
+    storage,
+    children,
+    localConfigs
+  } = _ref;
+  // Set by Feature Config setting in Dashboard
+  const [remoteConfigs, setRemoteConfigs] = React.useState(initialConfig);
+  const initDashboardConfigs = React.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["default"].createElement(UIKitConfigContext.Provider, {
+    value: {
+      initDashboardConfigs,
+      configs
+    }
+  }, children);
+};
+const useUIKitConfig = () => React.useContext(UIKitConfigContext);
+
+const VoiceMessageProvider = _ref => {
+  let {
+    children,
+    isVoiceMessageEnabled = true
+  } = _ref;
+  if (!isVoiceMessageEnabled) {
+    return /*#__PURE__*/React__default["default"].createElement(VoicePlayer_context.VoicePlayerProvider, null, children);
+  }
+  return /*#__PURE__*/React__default["default"].createElement(VoiceRecorder_context.VoiceRecorderProvider, null, /*#__PURE__*/React__default["default"].createElement(VoicePlayer_context.VoicePlayerProvider, null, children));
+};
+
+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 => {
+    const channelPresent = queue.find(c => c.url === channel.url);
+    if (!channelPresent) {
+      queue.push(channel);
+    } else {
+      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 && interval) {
+        clearInterval(interval);
+        interval = null;
+        return;
+      }
+      const item = queue.shift();
+      if (item) {
+        cb(item);
+      }
+    }, timeout || TIMEOUT);
+  };
+  const clear = () => {
+    queue = [];
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+  };
+  return {
+    push,
+    clear,
+    getQueue: () => queue
+  };
+}
+
+// this hook accepts a callback to run component is unmounted
+function useUnmount(callback) {
+  React.useLayoutEffect(() => {
+    return () => {
+      callback();
+    };
+  }, []);
+}
+
+function useMarkAsReadScheduler(_ref, _ref2) {
+  let {
+    isConnected
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  const markAsReadScheduler = React.useMemo(() => schedulerFactory({
+    logger,
+    cb: channel => {
+      try {
+        channel.markAsRead();
+      } catch (error) {
+        logger.warning('Channel: Mark as delivered failed', {
+          channel,
+          error
+        });
+      }
+    }
+  }), []);
+  React.useEffect(() => {
+    // for simplicity, we clear the queue when the connection is lost
+    if (!isConnected) {
+      markAsReadScheduler.clear();
+    }
+  }, [isConnected]);
+  useUnmount(() => {
+    markAsReadScheduler.clear();
+  });
+  return markAsReadScheduler;
+}
+
+function useMarkAsDeliveredScheduler(_ref, _ref2) {
+  let {
+    isConnected
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  const markAsDeliveredScheduler = React.useMemo(() => schedulerFactory({
+    logger,
+    cb: channel => {
+      try {
+        channel.markAsDelivered();
+      } catch (error) {
+        logger.warning('Channel: Mark as delivered failed', {
+          channel,
+          error
+        });
+      }
+    }
+  }), []);
+  React.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 {
-    userId,
-    dateLocale,
-    appId,
-    accessToken,
-    configureSession,
-    // mediaQueryBreakPoint,
-    customApiHost,
-    customWebSocketHost,
-    children,
-    disableUserProfile,
-    disableMarkAsDelivered,
-    renderUserProfile,
-    onUserProfileMessage,
-    allowProfileEdit,
-    theme,
-    nickname,
-    profileUrl,
-    userListQuery,
-    config = {},
-    colorSet,
-    stringSet: stringSet$1,
-    imageCompression,
-    isReactionEnabled,
+    replyType,
     isMentionEnabled,
+    isReactionEnabled,
+    disableUserProfile,
+    isVoiceMessageEnabled,
     isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList,
-    replyType
+    isMessageReceiptStatusEnabledOnChannelList
   } = props;
-  const mediaQueryBreakPoint = false;
+  return /*#__PURE__*/React__default["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["default"].createElement(SendbirdSDK, props));
+}
+const SendbirdSDK = _ref => {
+  let {
+    appId,
+    userId,
+    children,
+    accessToken = '',
+    customApiHost = '',
+    customWebSocketHost = '',
+    configureSession = null,
+    theme = 'light',
+    config = {},
+    nickname = '',
+    colorSet = null,
+    stringSet: stringSet$1 = null,
+    dateLocale = null,
+    profileUrl = '',
+    voiceRecord = {
+      maxRecordingTime: consts.VOICE_RECORDER_DEFAULT_MAX,
+      minRecordingTime: consts.VOICE_RECORDER_DEFAULT_MIN
+    },
+    userListQuery = null,
+    imageCompression = {},
+    allowProfileEdit = false,
+    disableMarkAsDelivered = false,
+    renderUserProfile = null,
+    onUserProfileMessage = null
+  } = _ref;
+  const breakpoint = false;
   const {
     logLevel = '',
     userMention = {},
     isREMUnitEnabled = false
   } = config;
   const [logger, setLogger] = React.useState(LoggerFactory(logLevel));
-  const [pubSub, setPubSub] = React.useState();
-  const [sdkStore, sdkDispatcher] = React.useReducer(reducer$1, sdkInitialState);
-  const [userStore, userDispatcher] = React.useReducer(reducer, userInitialState);
+  const [pubSub] = React.useState(pubSubFactory());
+  const [sdkStore, sdkDispatcher] = React.useReducer(reducer$1, initialState$1);
+  const [userStore, userDispatcher] = React.useReducer(reducer, initialState);
+  const {
+    configs,
+    initDashboardConfigs
+  } = useUIKitConfig();
   useTheme(colorSet);
-  React.useEffect(() => {
-    setPubSub(pubSubFactory());
-  }, []);
-  React.useEffect(() => {
-    logger.info('App Init'); // dispatch action
-
-    handleConnection({
-      userId,
-      appId,
-      accessToken,
-      sdkStore,
-      nickname,
-      profileUrl,
-      configureSession,
-      customApiHost,
-      customWebSocketHost,
-      sdk: sdkStore.sdk,
-      logger
-    }, {
-      sdkDispatcher,
-      userDispatcher
-    });
-  }, [userId, appId, accessToken]); // to create a pubsub to communicate between parent and child
+  const reconnect = useConnect({
+    appId,
+    userId,
+    accessToken
+  }, {
+    logger,
+    nickname,
+    profileUrl,
+    configureSession,
+    customApiHost,
+    customWebSocketHost,
+    sdk: sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs
+  });
 
+  // to create a pubsub to communicate between parent and child
   React.useEffect(() => {
     setLogger(LoggerFactory(logLevel));
   }, [logLevel]);
-  useAppendDomNode(['sendbird-modal-root', 'sendbird-dropdown-portal', 'sendbird-emoji-list-portal'], 'body'); // should move to reducer
+  useAppendDomNode(['sendbird-modal-root', 'sendbird-dropdown-portal', 'sendbird-emoji-list-portal'], 'body');
 
+  // should move to reducer
   const [currenttheme, setCurrenttheme] = React.useState(theme);
   React.useEffect(() => {
     setCurrenttheme(theme);
@@ -643,39 +1193,47 @@ function Sendbird(props) {
   React.useEffect(() => {
     const body = document.querySelector('body');
     body.classList.remove('sendbird-experimental__rem__units');
-
     if (isREMUnitEnabled) {
       body.classList.add('sendbird-experimental__rem__units');
     }
-  }, [isREMUnitEnabled]); // add-remove theme from body
-
+  }, [isREMUnitEnabled]);
+  // add-remove theme from body
   React.useEffect(() => {
     logger.info('Setup theme', `Theme: ${currenttheme}`);
-
     try {
       const body = document.querySelector('body');
       body.classList.remove('sendbird-theme--light');
       body.classList.remove('sendbird-theme--dark');
       body.classList.add(`sendbird-theme--${currenttheme || 'light'}`);
-      logger.info('Finish setup theme'); // eslint-disable-next-line no-empty
+      logger.info('Finish setup theme');
+      // eslint-disable-next-line no-empty
     } catch (e) {
       logger.warning('Setup theme failed', `${e}`);
     }
-
     return () => {
       try {
         const body = document.querySelector('body');
         body.classList.remove('sendbird-theme--light');
-        body.classList.remove('sendbird-theme--dark'); // eslint-disable-next-line no-empty
+        body.classList.remove('sendbird-theme--dark');
+        // eslint-disable-next-line no-empty
       } catch (_unused) {}
     };
   }, [currenttheme]);
   const isOnline = useConnectionStatus(sdkStore.sdk, logger);
+  const markAsReadScheduler = useMarkAsReadScheduler({
+    isConnected: isOnline
+  }, {
+    logger
+  });
+  const markAsDeliveredScheduler = useMarkAsDeliveredScheduler({
+    isConnected: isOnline
+  }, {
+    logger
+  });
   const localeStringSet = React__default["default"].useMemo(() => {
     if (!stringSet$1) {
       return stringSet.getStringSet('en');
     }
-
     return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, stringSet.getStringSet('en')), stringSet$1);
   }, [stringSet$1]);
   return /*#__PURE__*/React__default["default"].createElement(withSendbird.SendbirdSdkContext.Provider, {
@@ -687,24 +1245,9 @@ function Sendbird(props) {
       dispatchers: {
         sdkDispatcher,
         userDispatcher,
-        reconnect: () => {
-          handleConnection({
-            userId,
-            appId,
-            accessToken,
-            sdkStore,
-            nickname,
-            profileUrl,
-            logger,
-            sdk: sdkStore.sdk
-          }, {
-            sdkDispatcher,
-            userDispatcher
-          });
-        }
+        reconnect
       },
       config: {
-        disableUserProfile,
         disableMarkAsDelivered,
         renderUserProfile,
         onUserProfileMessage,
@@ -721,95 +1264,40 @@ function Sendbird(props) {
         imageCompression: _rollupPluginBabelHelpers._objectSpread2({
           compressionRate: 0.7
         }, imageCompression),
-        isReactionEnabled,
-        isMentionEnabled: isMentionEnabled || false,
+        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,
+        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["default"].createElement(MediaQueryContext.MediaQueryProvider, {
     logger: logger,
-    mediaQueryBreakPoint: mediaQueryBreakPoint
+    breakpoint: breakpoint
   }, /*#__PURE__*/React__default["default"].createElement(LocalizationContext.LocalizationProvider, {
     stringSet: localeStringSet,
     dateLocale: dateLocale
-  }, children)));
-}
-Sendbird.propTypes = {
-  userId: PropTypes__default["default"].string.isRequired,
-  appId: PropTypes__default["default"].string.isRequired,
-  accessToken: PropTypes__default["default"].string,
-  customApiHost: PropTypes__default["default"].string,
-  customWebSocketHost: PropTypes__default["default"].string,
-  // mediaQueryBreakPoint: PropTypes.string,
-  configureSession: PropTypes__default["default"].func,
-  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].arrayOf(PropTypes__default["default"].element), PropTypes__default["default"].any]).isRequired,
-  theme: PropTypes__default["default"].string,
-  nickname: PropTypes__default["default"].string,
-  dateLocale: PropTypes__default["default"].shape({}),
-  profileUrl: PropTypes__default["default"].string,
-  disableUserProfile: PropTypes__default["default"].bool,
-  disableMarkAsDelivered: PropTypes__default["default"].bool,
-  renderUserProfile: PropTypes__default["default"].func,
-  onUserProfileMessage: PropTypes__default["default"].func,
-  allowProfileEdit: PropTypes__default["default"].bool,
-  userListQuery: PropTypes__default["default"].func,
-  config: PropTypes__default["default"].shape({
-    // None Error Warning Info 'All/Debug'
-    logLevel: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]),
-    pubSub: PropTypes__default["default"].shape({
-      subscribe: PropTypes__default["default"].func,
-      publish: PropTypes__default["default"].func
-    }),
-    userMention: PropTypes__default["default"].shape({
-      maxMentionCount: PropTypes__default["default"].number,
-      maxSuggestionCount: PropTypes__default["default"].number
-    }),
-    isREMUnitEnabled: PropTypes__default["default"].bool
-  }),
-  stringSet: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
-  colorSet: PropTypes__default["default"].objectOf(PropTypes__default["default"].string),
-  isReactionEnabled: PropTypes__default["default"].bool,
-  isMentionEnabled: PropTypes__default["default"].bool,
-  imageCompression: PropTypes__default["default"].shape({
-    compressionRate: PropTypes__default["default"].number,
-    resizingWidth: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-    resizingHeight: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
-  }),
-  isTypingIndicatorEnabledOnChannelList: PropTypes__default["default"].bool,
-  isMessageReceiptStatusEnabledOnChannelList: PropTypes__default["default"].bool,
-  replyType: PropTypes__default["default"].oneOf(['NONE', 'QUOTE_REPLY', 'THREAD'])
-};
-Sendbird.defaultProps = {
-  accessToken: '',
-  customApiHost: null,
-  customWebSocketHost: null,
-  configureSession: null,
-  theme: 'light',
-  // mediaQueryBreakPoint: null,
-  nickname: '',
-  dateLocale: null,
-  profileUrl: '',
-  disableUserProfile: false,
-  disableMarkAsDelivered: false,
-  renderUserProfile: null,
-  onUserProfileMessage: null,
-  allowProfileEdit: false,
-  userListQuery: null,
-  config: {},
-  stringSet: null,
-  colorSet: null,
-  imageCompression: {},
-  isReactionEnabled: true,
-  isMentionEnabled: false,
-  isTypingIndicatorEnabledOnChannelList: false,
-  isMessageReceiptStatusEnabledOnChannelList: false,
-  replyType: 'NONE'
+  }, /*#__PURE__*/React__default["default"].createElement(VoiceMessageProvider, {
+    isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage
+  }, children))));
 };
 
 module.exports = Sendbird;