@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/cjs/SendbirdProvider.js

@@ -1,37 +1,41 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-83d7e84b.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-2f2b0bca.js');
 var React = require('react');
+var uikitTools = require('@sendbird/uikit-tools');
 var withSendbird = require('./withSendbird.js');
 var cssVars = require('css-vars-ponyfill');
-var index_module = require('./index.module-a24e9cd7.js');
-var actionTypes = require('./actionTypes-1d118952.js');
+var index = require('./index-609b07a2.js');
+var actionTypes = require('./actionTypes-7fa02f94.js');
 var SendbirdChat = require('@sendbird/chat');
-var uuid = require('./uuid-b2806cf5.js');
+var uuid = require('./uuid-c74bbbb6.js');
 var openChannel = require('@sendbird/chat/openChannel');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var index = require('./index-fbe9cc73.js');
-var uikitTools = require('@sendbird/uikit-tools');
-var VoicePlayer_context = require('./index-1f6b30ea.js');
+var index$1 = require('./index-b995f638.js');
+var utils = require('./utils-180c6bc8.js');
+var VoicePlayer_context = require('./index-0ec5a831.js');
 var VoiceRecorder_context = require('./VoiceRecorder/context.js');
-var LocalizationContext = require('./LocalizationContext-482c1343.js');
-var MediaQueryContext = require('./MediaQueryContext-73aac8cf.js');
-var stringSet = require('./stringSet-d00535a5.js');
-var consts = require('./consts-fb07c671.js');
-var resolvedReplyType = require('./resolvedReplyType-85b4bd7c.js');
-var index$1 = require('./index-e9ac5ae1.js');
+var LocalizationContext = require('./LocalizationContext-5009012e.js');
+var MediaQueryContext = require('./MediaQueryContext-d6fdbe43.js');
+var stringSet = require('./stringSet-98b52c49.js');
+var consts = require('./consts-95462b21.js');
+var resolvedReplyType = require('./resolvedReplyType-c20ef661.js');
+var hooks_useModal = require('./hooks/useModal.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
 require('./utils/message/getOutgoingMessageState.js');
-require('./useSendbirdStateContext.js');
 require('./ui/Modal.js');
 require('react-dom');
-require('./utils-c47c68b1.js');
-require('./index-cbcacbee.js');
+require('./index-daf80c58.js');
 require('./ui/IconButton.js');
 require('./ui/Button.js');
-require('./index-18720f0d.js');
+require('./index-35820a94.js');
 require('prop-types');
+require('./types-66554668.js');
 require('./ui/Icon.js');
-require('./index-d04f312e.js');
+require('./index-fd8a0abb.js');
+require('./_rollupPluginBabelHelpers-94c18dc1.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,22 +43,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cssVars__default = /*#__PURE__*/_interopDefaultLegacy(cssVars);
 var SendbirdChat__default = /*#__PURE__*/_interopDefaultLegacy(SendbirdChat);
 
-const isEmpty = obj => {
+var isEmpty = function (obj) {
   if (obj === null || obj === undefined) {
     return true;
   }
-  for (const prop in obj) {
+  for (var prop in obj) {
     if (obj.hasOwnProperty(prop)) {
       return false;
     }
   }
   return JSON.stringify(obj) === JSON.stringify({});
 };
-const useTheme = overrides => {
-  React.useLayoutEffect(() => {
+var useTheme = function (overrides) {
+  React.useLayoutEffect(function () {
     if (!isEmpty(overrides)) {
       cssVars__default["default"]({
-        variables: _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, {
+        variables: tslib_es6.__assign({
           '--sendbird-dark-primary-500': '#4d2aa6',
           '--sendbird-dark-primary-400': '#6440C4',
           '--sendbird-dark-primary-300': '#7B53EF',
@@ -131,20 +135,20 @@ const useTheme = 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]);
 };
 
-const SDK_ACTIONS = {
+var SDK_ACTIONS = {
   INIT_SDK: 'INIT_SDK',
   SET_SDK_LOADING: 'SET_SDK_LOADING',
   RESET_SDK: 'RESET_SDK',
   SDK_ERROR: 'SDK_ERROR'
 };
 
-const initialState$1 = {
+var initialState$1 = {
   initialized: false,
   loading: false,
   sdk: {},
@@ -152,30 +156,26 @@ const initialState$1 = {
 };
 
 function reducer$1(state, action) {
-  return index_module.K(action).with({
+  return index.K(action).with({
     type: SDK_ACTIONS.SET_SDK_LOADING
-  }, _ref => {
-    let {
-      payload
-    } = _ref;
-    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
+  }, function (_a) {
+    var payload = _a.payload;
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
       initialized: false,
       loading: payload
     });
   }).with({
     type: SDK_ACTIONS.SDK_ERROR
-  }, () => {
-    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
+  }, function () {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
       initialized: false,
       loading: false,
       error: true
     });
   }).with({
     type: SDK_ACTIONS.INIT_SDK
-  }, _ref2 => {
-    let {
-      payload
-    } = _ref2;
+  }, function (_a) {
+    var payload = _a.payload;
     return {
       sdk: payload,
       initialized: true,
@@ -184,26 +184,24 @@ function reducer$1(state, action) {
     };
   }).with({
     type: SDK_ACTIONS.RESET_SDK
-  }, () => {
+  }, function () {
     return initialState$1;
-  }).otherwise(() => {
+  }).otherwise(function () {
     return state;
   });
 }
 
-const initialState = {
+var initialState = {
   initialized: false,
   loading: false,
   user: {}
 };
 
 function reducer(state, action) {
-  return index_module.K(action).with({
+  return index.K(action).with({
     type: actionTypes.USER_ACTIONS.INIT_USER
-  }, _ref => {
-    let {
-      payload
-    } = _ref;
+  }, function (_a) {
+    var payload = _a.payload;
     return {
       initialized: true,
       loading: false,
@@ -211,91 +209,92 @@ function reducer(state, action) {
     };
   }).with({
     type: actionTypes.USER_ACTIONS.RESET_USER
-  }, () => {
+  }, function () {
     return initialState;
   }).with({
     type: actionTypes.USER_ACTIONS.UPDATE_USER_INFO
-  }, _ref2 => {
-    let {
-      payload
-    } = _ref2;
-    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
+  }, function (_a) {
+    var payload = _a.payload;
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
       user: payload
     });
-  }).otherwise(() => {
+  }).otherwise(function () {
     return state;
   });
 }
 
-function useConnectionStatus(sdk, logger) {
-  const [isOnline, setIsOnline] = React.useState(true);
-  React.useEffect(() => {
-    const uniqueHandlerId = uuid.uuidv4();
+function useOnlineStatus(sdk, logger) {
+  var _a, _b;
+  var _c = React.useState((_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.onLine) !== null && _b !== void 0 ? _b : true),
+    isOnline = _c[0],
+    setIsOnline = _c[1];
+  React.useEffect(function () {
+    var uniqueHandlerId = uuid.uuidv4();
     try {
       logger.warning('sdk changed', uniqueHandlerId);
-      const handler = new SendbirdChat.ConnectionHandler();
-      handler.onDisconnected = () => {
-        setIsOnline(false);
-        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
-      // provided through configureSession
-      if (sdk !== null && sdk !== void 0 && sdk.addConnectionHandler) {
+      var handler = new SendbirdChat.ConnectionHandler({
+        onDisconnected: function () {
+          setIsOnline(false);
+          logger.warning('onDisconnected', {
+            isOnline: isOnline
+          });
+        },
+        onReconnectStarted: function () {
+          setIsOnline(false);
+          logger.warning('onReconnectStarted', {
+            isOnline: isOnline
+          });
+        },
+        onReconnectSucceeded: function () {
+          setIsOnline(true);
+          logger.warning('onReconnectSucceeded', {
+            isOnline: isOnline
+          });
+        },
+        onReconnectFailed: function () {
+          sdk.reconnect();
+          logger.warning('onReconnectFailed');
+        }
+      });
+      if (sdk === null || sdk === void 0 ? void 0 : sdk.addConnectionHandler) {
+        // workaround -> addConnectionHandler invalidates session handler
+        // provided through configureSession
         sdk.addConnectionHandler(uniqueHandlerId, handler);
+        logger.info('Added ConnectionHandler', uniqueHandlerId);
       }
-    } catch (_unused) {
+    } catch (_a) {
       //
     }
-    return () => {
+    return function () {
       try {
         sdk.removeConnectionHandler(uniqueHandlerId);
         logger.info('Removed ConnectionHandler', uniqueHandlerId);
-      } catch (_unused2) {
+      } catch (_a) {
         //
       }
     };
   }, [sdk]);
-  React.useEffect(() => {
-    const tryReconnect = () => {
+  React.useEffect(function () {
+    var tryReconnect = function () {
       try {
         logger.warning('Try reconnecting SDK');
         if (sdk.connectionState !== 'OPEN') {
           // connection is not broken yet
           sdk.reconnect();
         }
-      } catch (_unused3) {
+      } catch (_a) {
         //
       }
     };
     // addEventListener version
     window.addEventListener('online', tryReconnect);
-    return () => {
+    return function () {
       window.removeEventListener('online', tryReconnect);
     };
   }, [sdk]);
-
   // add offline-class to body
-  React.useEffect(() => {
-    const body = document.querySelector('body');
+  React.useEffect(function () {
+    var body = document.querySelector('body');
     if (!isOnline) {
       try {
         body.classList.add('sendbird__offline');
@@ -315,69 +314,63 @@ function useConnectionStatus(sdk, logger) {
   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(() => {
+function disconnectSdk(_a) {
+  var sdkDispatcher = _a.sdkDispatcher,
+    userDispatcher = _a.userDispatcher,
+    sdk = _a.sdk;
+  return tslib_es6.__awaiter(this, void 0, void 0, function () {
+    return tslib_es6.__generator(this, function (_b) {
+      return [2 /*return*/, new Promise(function (resolve) {
         sdkDispatcher({
-          type: SDK_ACTIONS.RESET_SDK
+          type: SDK_ACTIONS.SET_SDK_LOADING,
+          payload: true
         });
-        userDispatcher({
-          type: actionTypes.USER_ACTIONS.RESET_USER
-        });
-      }).finally(() => {
-        resolve(true);
-      });
-    } else {
-      resolve(true);
-    }
+        if (sdk === null || sdk === void 0 ? void 0 : sdk.disconnect) {
+          sdk.disconnect().then(function () {
+            sdkDispatcher({
+              type: SDK_ACTIONS.RESET_SDK
+            });
+            userDispatcher({
+              type: actionTypes.USER_ACTIONS.RESET_USER
+            });
+          }).finally(function () {
+            resolve(true);
+          });
+        } else {
+          resolve(true);
+        }
+      })];
+    });
   });
 }
 
-const APP_VERSION_STRING = '3.6.11-beta.2';
-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`;
+var APP_VERSION_STRING = '3.7.0-rc.0';
+var INIT_SDK = SDK_ACTIONS.INIT_SDK,
+  SET_SDK_LOADING = SDK_ACTIONS.SET_SDK_LOADING,
+  RESET_SDK = SDK_ACTIONS.RESET_SDK,
+  SDK_ERROR = SDK_ACTIONS.SDK_ERROR;
+var INIT_USER = actionTypes.USER_ACTIONS.INIT_USER,
+  UPDATE_USER_INFO = actionTypes.USER_ACTIONS.UPDATE_USER_INFO,
+  RESET_USER = actionTypes.USER_ACTIONS.RESET_USER;
+function getMissingParamError(_a) {
+  var userId = _a.userId,
+    appId = _a.appId;
+  return "SendbirdProvider | useConnect/setupConnection/Connection failed UserId: ".concat(userId, " or appId: ").concat(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) || ''}`;
+  return "SendbirdProvider | useConnect/setupConnection/Connection failed. ".concat((error === null || error === void 0 ? void 0 : error.code) || '', " ").concat((error === null || error === void 0 ? void 0 : error.message) || '');
 }
-function setUpParams(_ref2) {
-  let {
-    appId,
-    customApiHost,
-    customWebSocketHost,
-    sdkInitParams
-  } = _ref2;
-  const params = _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({
+function setUpParams(_a) {
+  var appId = _a.appId,
+    customApiHost = _a.customApiHost,
+    customWebSocketHost = _a.customWebSocketHost,
+    sdkInitParams = _a.sdkInitParams;
+  var params = tslib_es6.__assign(tslib_es6.__assign({
     modules: [new groupChannel.GroupChannelModule(), new openChannel.OpenChannelModule()],
     newInstance: true
-  }, sdkInitParams !== null && sdkInitParams !== void 0 ? sdkInitParams : {}), {}, {
+  }, sdkInitParams !== null && sdkInitParams !== void 0 ? sdkInitParams : {}), {
     // appId shouldn't be overrided
-    appId
+    appId: appId
   });
   if (customApiHost) {
     params['customApiHost'] = customApiHost;
@@ -385,10 +378,9 @@ function setUpParams(_ref2) {
   if (customWebSocketHost) {
     params['customWebSocketHost'] = customWebSocketHost;
   }
-  const newSdk = SendbirdChat__default["default"].init(params);
+  var newSdk = SendbirdChat__default["default"].init(params);
   return newSdk;
 }
-
 // Steps
 // 1. Check if minimum userID/appID is provided
 //  1.a. If not, throw error > !reject
@@ -401,296 +393,309 @@ function setUpParams(_ref2) {
 //  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,
-    isUserIdUsedForNickname,
-    sdkInitParams,
-    customExtensionParams,
-    isMobile = false
-  } = _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, _newSdk$addSendbirdEx, _SendbirdProduct$UIKI, _SendbirdPlatform$JS, _DeviceOsPlatform$MOB, _DeviceOsPlatform$WEB, _logger$info8;
-      const newSdk = setUpParams({
-        appId,
-        customApiHost,
-        customWebSocketHost,
-        sdkInitParams
-      });
-      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
-      });
-      /**
-       * Keep optional chaining to the addSendbirdExtensions
-       * for supporting the ChatSDK v4.9.5 or less
-       */
-      newSdk === null || newSdk === void 0 ? void 0 : (_newSdk$addSendbirdEx = newSdk.addSendbirdExtensions) === null || _newSdk$addSendbirdEx === void 0 ? void 0 : _newSdk$addSendbirdEx.call(newSdk, [{
-        product: (_SendbirdProduct$UIKI = SendbirdChat.SendbirdProduct === null || SendbirdChat.SendbirdProduct === void 0 ? void 0 : SendbirdChat.SendbirdProduct.UIKIT_CHAT) !== null && _SendbirdProduct$UIKI !== void 0 ? _SendbirdProduct$UIKI : 'uikit-chat',
-        version: APP_VERSION_STRING,
-        platform: (_SendbirdPlatform$JS = SendbirdChat.SendbirdPlatform === null || SendbirdChat.SendbirdPlatform === void 0 ? void 0 : SendbirdChat.SendbirdPlatform.JS) !== null && _SendbirdPlatform$JS !== void 0 ? _SendbirdPlatform$JS : 'js'
-      }], isMobile ? (_DeviceOsPlatform$MOB = SendbirdChat.DeviceOsPlatform === null || SendbirdChat.DeviceOsPlatform === void 0 ? void 0 : SendbirdChat.DeviceOsPlatform.MOBILE_WEB) !== null && _DeviceOsPlatform$MOB !== void 0 ? _DeviceOsPlatform$MOB : 'mobile_web' : (_DeviceOsPlatform$WEB = SendbirdChat.DeviceOsPlatform === null || SendbirdChat.DeviceOsPlatform === void 0 ? void 0 : SendbirdChat.DeviceOsPlatform.WEB) !== null && _DeviceOsPlatform$WEB !== void 0 ? _DeviceOsPlatform$WEB : 'web', customExtensionParams);
-      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
+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;
+  return tslib_es6.__awaiter(this, void 0, void 0, function () {
+    var _this = this;
+    return tslib_es6.__generator(this, function (_c) {
+      return [2 /*return*/, new Promise(function (resolve, reject) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/init', {
+          userId: userId,
+          appId: appId
         });
-        userDispatcher({
-          type: INIT_USER,
-          payload: user
+        sdkDispatcher({
+          type: SET_SDK_LOADING,
+          payload: true
         });
-        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
+        if (userId && appId) {
+          var newSdk_1 = setUpParams({
+            appId: appId,
+            customApiHost: customApiHost,
+            customWebSocketHost: customWebSocketHost,
+            sdkInitParams: sdkInitParams
           });
-        }).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
+          if (configureSession && typeof configureSession === 'function') {
+            var sessionHandler = configureSession(newSdk_1);
+            (_b = logger === null || logger === void 0 ? void 0 : logger.info) === null || _b === void 0 ? void 0 : _b.call(logger, 'SendbirdProvider | useConnect/setupConnection/configureSession', sessionHandler);
+            newSdk_1.setSessionHandler(sessionHandler);
+          }
+          (_c = logger === null || logger === void 0 ? void 0 : logger.info) === null || _c === void 0 ? void 0 : _c.call(logger, 'SendbirdProvider | useConnect/setupConnection/setVersion', {
+            version: APP_VERSION_STRING
           });
-        });
+          /**
+           * Keep optional chaining to the addSendbirdExtensions
+           * for supporting the ChatSDK v4.9.5 or less
+           */
+          (_d = newSdk_1 === null || newSdk_1 === void 0 ? void 0 : newSdk_1.addSendbirdExtensions) === null || _d === void 0 ? void 0 : _d.call(newSdk_1, [{
+            product: (_e = SendbirdChat.SendbirdProduct === null || SendbirdChat.SendbirdProduct === void 0 ? void 0 : SendbirdChat.SendbirdProduct.UIKIT_CHAT) !== null && _e !== void 0 ? _e : 'uikit-chat',
+            version: APP_VERSION_STRING,
+            platform: (_f = SendbirdChat.SendbirdPlatform === null || SendbirdChat.SendbirdPlatform === void 0 ? void 0 : SendbirdChat.SendbirdPlatform.JS) !== null && _f !== void 0 ? _f : 'js'
+          }], {
+            platform: isMobile ? (_g = SendbirdChat.DeviceOsPlatform === null || SendbirdChat.DeviceOsPlatform === void 0 ? void 0 : SendbirdChat.DeviceOsPlatform.MOBILE_WEB) !== null && _g !== void 0 ? _g : 'mobile_web' : (_h = SendbirdChat.DeviceOsPlatform === null || SendbirdChat.DeviceOsPlatform === void 0 ? void 0 : SendbirdChat.DeviceOsPlatform.WEB) !== null && _h !== void 0 ? _h : 'web'
+          }, customExtensionParams);
+          newSdk_1.addExtension('sb_uikit', APP_VERSION_STRING);
+          var connectCbSucess_1 = function (user) {
+            return tslib_es6.__awaiter(_this, void 0, void 0, function () {
+              var _a, _b;
+              return tslib_es6.__generator(this, function (_c) {
+                (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/connectCbSucess', user);
+                sdkDispatcher({
+                  type: INIT_SDK,
+                  payload: newSdk_1
+                });
+                userDispatcher({
+                  type: INIT_USER,
+                  payload: user
+                });
+                initDashboardConfigs(newSdk_1).then(function (config) {
+                  var _a;
+                  (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration success', {
+                    config: config
+                  });
+                }).catch(function (error) {
+                  var _a;
+                  (_a = logger === null || logger === void 0 ? void 0 : logger.error) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration failed', {
+                    error: error
+                  });
+                });
+                // use nickname/profileUrl if provided
+                // or set userID as nickname
+                if ((nickname !== user.nickname || profileUrl !== user.profileUrl) && !(index$1.isTextuallyNull(nickname) && index$1.isTextuallyNull(profileUrl))) {
+                  (_b = logger === null || logger === void 0 ? void 0 : logger.info) === null || _b === void 0 ? void 0 : _b.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo', {
+                    nickname: nickname,
+                    profileUrl: profileUrl
+                  });
+                  newSdk_1.updateCurrentUserInfo({
+                    nickname: nickname || user.nickname || (isUserIdUsedForNickname ? user.userId : ''),
+                    profileUrl: profileUrl || user.profileUrl
+                  }).then(function (namedUser) {
+                    var _a;
+                    (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {
+                      nickname: nickname,
+                      profileUrl: profileUrl
+                    });
+                    userDispatcher({
+                      type: UPDATE_USER_INFO,
+                      payload: namedUser
+                    });
+                  }).finally(function () {
+                    resolve();
+                  });
+                } else {
+                  resolve();
+                }
+                return [2 /*return*/];
+              });
+            });
+          };
 
-        // 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 || (isUserIdUsedForNickname ? user.userId : ''),
-            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
+          var connectCbError_1 = function (e) {
+            var _a;
+            var errorMessage = getConnectSbError(e);
+            (_a = logger === null || logger === void 0 ? void 0 : logger.error) === null || _a === void 0 ? void 0 : _a.call(logger, errorMessage, {
+              e: e,
+              appId: appId,
+              userId: userId
+            });
+            sdkDispatcher({
+              type: RESET_SDK
             });
             userDispatcher({
-              type: UPDATE_USER_INFO,
-              payload: namedUser
+              type: RESET_USER
             });
-          }).finally(() => {
-            resolve();
+            sdkDispatcher({
+              type: SDK_ERROR
+            });
+            // exit promise with error
+            reject(errorMessage);
+          };
+          (_j = logger === null || logger === void 0 ? void 0 : logger.info) === null || _j === void 0 ? void 0 : _j.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);
+          }).catch(function (err) {
+            return connectCbError_1(err);
           });
         } else {
-          resolve();
+          var errorMessage = getMissingParamError({
+            userId: userId,
+            appId: appId
+          });
+          sdkDispatcher({
+            type: SDK_ERROR
+          });
+          (_k = logger === null || logger === void 0 ? void 0 : logger.error) === null || _k === void 0 ? void 0 : _k.call(logger, errorMessage);
+          // exit promise with error
+          reject(errorMessage);
         }
-      };
-      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,
-    sdkInitParams,
-    customExtensionParams,
-    isMobile
-  } = _ref;
-  await disconnectSdk({
-    logger,
-    sdkDispatcher,
-    userDispatcher,
-    sdk
-  });
-  await setUpConnection({
-    logger,
-    sdkDispatcher,
-    userDispatcher,
-    initDashboardConfigs,
-    userId,
-    appId,
-    customApiHost,
-    customWebSocketHost,
-    configureSession,
-    nickname,
-    profileUrl,
-    accessToken,
-    sdkInitParams,
-    customExtensionParams,
-    isMobile
+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;
+  return tslib_es6.__awaiter(this, void 0, void 0, function () {
+    return tslib_es6.__generator(this, function (_b) {
+      switch (_b.label) {
+        case 0:
+          return [4 /*yield*/, disconnectSdk({
+            logger: logger,
+            sdkDispatcher: sdkDispatcher,
+            userDispatcher: userDispatcher,
+            sdk: sdk
+          })];
+        case 1:
+          _b.sent();
+          return [4 /*yield*/, setUpConnection({
+            logger: logger,
+            sdkDispatcher: sdkDispatcher,
+            userDispatcher: userDispatcher,
+            initDashboardConfigs: initDashboardConfigs,
+            userId: userId,
+            appId: appId,
+            customApiHost: customApiHost,
+            customWebSocketHost: customWebSocketHost,
+            configureSession: configureSession,
+            nickname: nickname,
+            profileUrl: profileUrl,
+            accessToken: accessToken,
+            sdkInitParams: sdkInitParams,
+            customExtensionParams: customExtensionParams,
+            isMobile: isMobile
+          })];
+        case 2:
+          _b.sent();
+          return [2 /*return*/];
+      }
+    });
   });
 }
 
 function useConnect(triggerTypes, staticTypes) {
-  var _logger$info;
-  const {
-    userId,
-    appId,
-    accessToken,
-    isMobile,
-    isUserIdUsedForNickname
-  } = triggerTypes;
-  const {
-    logger,
-    nickname,
-    profileUrl,
-    configureSession,
-    customApiHost,
-    customWebSocketHost,
-    sdk,
-    sdkDispatcher,
-    userDispatcher,
-    initDashboardConfigs,
-    sdkInitParams,
-    customExtensionParams
-  } = 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
+  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;
+  (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect', tslib_es6.__assign(tslib_es6.__assign({}, triggerTypes), staticTypes));
+  React.useEffect(function () {
+    var _a, _b;
+    (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/useEffect', {
+      userId: userId,
+      appId: appId,
+      accessToken: accessToken
     });
     try {
       connect({
-        userId,
-        appId,
-        accessToken,
-        logger,
-        nickname,
-        profileUrl,
-        configureSession,
-        customApiHost,
-        customWebSocketHost,
-        sdk,
-        sdkDispatcher,
-        userDispatcher,
-        initDashboardConfigs,
-        isUserIdUsedForNickname,
-        sdkInitParams,
-        customExtensionParams,
-        isMobile
+        userId: userId,
+        appId: appId,
+        accessToken: accessToken,
+        logger: logger,
+        nickname: nickname,
+        profileUrl: profileUrl,
+        configureSession: configureSession,
+        customApiHost: customApiHost,
+        customWebSocketHost: customWebSocketHost,
+        sdk: sdk,
+        sdkDispatcher: sdkDispatcher,
+        userDispatcher: userDispatcher,
+        initDashboardConfigs: initDashboardConfigs,
+        isUserIdUsedForNickname: isUserIdUsedForNickname,
+        sdkInitParams: sdkInitParams,
+        customExtensionParams: customExtensionParams,
+        isMobile: isMobile
       });
     } 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);
+      (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.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
+  var reconnect = React.useCallback(function () {
+    var _a, _b;
+    (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'SendbirdProvider | useConnect/reconnect/useCallback', {
+      sdk: sdk
     });
     try {
       connect({
-        userId,
-        appId,
-        accessToken,
-        logger,
-        nickname,
-        profileUrl,
-        configureSession,
-        customApiHost,
-        customWebSocketHost,
-        sdk,
-        sdkDispatcher,
-        userDispatcher,
-        initDashboardConfigs,
-        isUserIdUsedForNickname,
-        sdkInitParams,
-        customExtensionParams,
-        isMobile
+        userId: userId,
+        appId: appId,
+        accessToken: accessToken,
+        logger: logger,
+        nickname: nickname,
+        profileUrl: profileUrl,
+        configureSession: configureSession,
+        customApiHost: customApiHost,
+        customWebSocketHost: customWebSocketHost,
+        sdk: sdk,
+        sdkDispatcher: sdkDispatcher,
+        userDispatcher: userDispatcher,
+        initDashboardConfigs: initDashboardConfigs,
+        isUserIdUsedForNickname: isUserIdUsedForNickname,
+        sdkInitParams: sdkInitParams,
+        customExtensionParams: customExtensionParams,
+        isMobile: isMobile
       });
     } 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);
+      (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.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 = {
+var LOG_LEVELS = {
   DEBUG: 'debug',
   WARNING: 'warning',
   ERROR: 'error',
   INFO: 'info',
   ALL: 'all'
 };
-const colorLog = level => {
+var colorLog = function (level) {
   switch (level) {
     case LOG_LEVELS.WARNING:
       return 'color: Orange';
@@ -700,57 +705,66 @@ const colorLog = level => {
       return 'color: Gray';
   }
 };
-const printLog = _ref => {
-  let {
-    level,
-    title,
-    description = ''
-  } = _ref;
+var printLog = function (_a) {
+  var level = _a.level,
+    title = _a.title,
+    _b = _a.description,
+    description = _b === void 0 ? '' : _b,
+    _c = _a.payload,
+    payload = _c === void 0 ? [] : _c;
   // eslint-disable-next-line no-console
-  console.log(`%c SendbirdUIKit | ${level} | ${new Date().toISOString()} | ${title} ${description && '|'}`, colorLog(level), description);
+  console.log.apply(console, tslib_es6.__spreadArray(["%c SendbirdUIKit | ".concat(level, " | ").concat(new Date().toISOString(), " | ").concat(title, " ").concat(description && '|'), colorLog(level), description], payload, false));
 };
-const noop = () => {/* noop */};
-const getDefaultLogger = () => ({
-  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) => {
+var getDefaultLogger = function () {
+  return {
+    info: utils.noop,
+    error: utils.noop,
+    warning: utils.noop
+  };
+};
+var LoggerFactory = function (lvl, customInterface) {
+  var logInterface = customInterface || printLog;
+  var lvlArray = Array.isArray(lvl) ? lvl : [lvl];
+  var applyLog = function (lgLvl) {
+    return function (title, description) {
+      var payload = [];
+      for (var _i = 2; _i < arguments.length; _i++) {
+        payload[_i - 2] = arguments[_i];
+      }
+      return logInterface({
+        level: lgLvl,
+        title: title,
+        description: description,
+        payload: payload
+      });
+    };
+  };
+  return lvlArray.reduce(function (accumulator, currentLvl) {
     if (currentLvl === LOG_LEVELS.DEBUG || currentLvl === LOG_LEVELS.ALL) {
-      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
+      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
         info: applyLog(LOG_LEVELS.INFO),
         error: applyLog(LOG_LEVELS.ERROR),
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
     if (currentLvl === LOG_LEVELS.INFO) {
-      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
+      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
         info: applyLog(LOG_LEVELS.INFO)
       });
     }
     if (currentLvl === LOG_LEVELS.ERROR) {
-      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
+      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
         error: applyLog(LOG_LEVELS.ERROR)
       });
     }
     if (currentLvl === LOG_LEVELS.WARNING) {
-      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
+      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
-    return _rollupPluginBabelHelpers._objectSpread2({}, accumulator);
+    return tslib_es6.__assign({}, accumulator);
   }, getDefaultLogger());
-  return logger;
 };
-
 // TODO: Make this to hook, useLogger
 
 // https://davidwalsh.name/pubsub-javascript
@@ -758,169 +772,167 @@ const LoggerFactory = (lvl, customInterface) => {
 // 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
-
-const pubSubFactory = () => {
-  const topics = {};
-  const hOP = topics.hasOwnProperty;
+var pubSubFactory = function () {
+  var topics = {};
+  var hOP = topics.hasOwnProperty;
   return {
-    __getTopics: () => topics,
-    subscribe: (topic, listener) => {
+    __getTopics: function () {
+      return topics;
+    },
+    subscribe: function (topic, listener) {
       // 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;
-
+      var index = topics[topic].push(listener) - 1;
       // Provide handle back for removal of topic
       return {
-        remove: () => {
-          delete topics[topic][index];
+        remove: function () {
+          topics[topic].splice(index, 1);
         }
       };
     },
-    publish: (topic, info) => {
+    publish: function (topic, info) {
       // 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!
-      topics[topic].forEach(item => {
+      topics[topic].forEach(function (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;
-  React.useEffect(() => {
-    const root = document.querySelector(rootSelector);
-    ids.forEach(id => {
-      const elem = document.createElement('div');
-      elem.setAttribute('id', id);
-      root.appendChild(elem);
-    });
-    return () => {
-      ids.forEach(id => {
-        const target = document.getElementById(id);
-        if (target) {
-          root.removeChild(target);
-        }
+function useAppendDomNode(ids, rootSelector) {
+  if (ids === void 0) {
+    ids = [];
+  }
+  if (rootSelector === void 0) {
+    rootSelector = 'unknown';
+  }
+  React.useEffect(function () {
+    var root = document.querySelector(rootSelector);
+    if (root) {
+      ids.forEach(function (id) {
+        var elem = document.createElement('div');
+        elem.setAttribute('id', id);
+        root.appendChild(elem);
       });
+    }
+    return function () {
+      if (root) {
+        ids.forEach(function (id) {
+          var target = document.getElementById(id);
+          if (target) root.removeChild(target);
+        });
+      }
     };
   }, []);
 }
 
-const VoiceMessageProvider = _ref => {
-  let {
-    children,
-    isVoiceMessageEnabled = true
-  } = _ref;
+var VoiceMessageProvider = function (_a) {
+  var children = _a.children,
+    _b = _a.isVoiceMessageEnabled,
+    isVoiceMessageEnabled = _b === void 0 ? true : _b;
   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));
 };
 
-function uikitConfigMapper(_ref) {
-  var _uikitOptions$common$, _uikitOptions$common, _uikitOptions$groupCh, _uikitOptions$groupCh2, _uikitOptions$groupCh3, _uikitOptions$groupCh4, _uikitOptions$groupCh5, _uikitOptions$groupCh6, _uikitOptions$groupCh7, _uikitOptions$groupCh8, _uikitOptions$groupCh9, _uikitOptions$groupCh10, _uikitOptions$groupCh11, _uikitOptions$groupCh12, _uikitOptions$groupCh13, _uikitOptions$groupCh14, _uikitOptions$groupCh15, _uikitOptions$groupCh16, _uikitOptions$groupCh17, _uikitOptions$groupCh18, _uikitOptions$groupCh19, _uikitOptions$openCha, _uikitOptions$openCha2, _uikitOptions$openCha3;
-  let {
-    legacyConfig,
-    uikitOptions = {}
-  } = _ref;
-  const {
-    replyType,
-    isMentionEnabled,
-    isReactionEnabled,
-    disableUserProfile,
-    isVoiceMessageEnabled,
-    isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList,
-    showSearchIcon
-  } = legacyConfig;
+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;
+  var legacyConfig = _a.legacyConfig,
+    _1 = _a.uikitOptions,
+    uikitOptions = _1 === void 0 ? {} : _1;
+  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: {
-      enableUsingDefaultUserProfile: (_uikitOptions$common$ = (_uikitOptions$common = uikitOptions.common) === null || _uikitOptions$common === void 0 ? void 0 : _uikitOptions$common.enableUsingDefaultUserProfile) !== null && _uikitOptions$common$ !== void 0 ? _uikitOptions$common$ : typeof disableUserProfile === 'boolean' ? !disableUserProfile : undefined
+      enableUsingDefaultUserProfile: (_c = (_b = uikitOptions.common) === null || _b === void 0 ? void 0 : _b.enableUsingDefaultUserProfile) !== null && _c !== void 0 ? _c : typeof disableUserProfile === 'boolean' ? !disableUserProfile : undefined
     },
     groupChannel: {
-      enableOgtag: (_uikitOptions$groupCh = uikitOptions.groupChannel) === null || _uikitOptions$groupCh === void 0 ? void 0 : _uikitOptions$groupCh.enableOgtag,
-      enableMention: (_uikitOptions$groupCh2 = (_uikitOptions$groupCh3 = uikitOptions.groupChannel) === null || _uikitOptions$groupCh3 === void 0 ? void 0 : _uikitOptions$groupCh3.enableMention) !== null && _uikitOptions$groupCh2 !== void 0 ? _uikitOptions$groupCh2 : isMentionEnabled,
-      enableReactions: (_uikitOptions$groupCh4 = (_uikitOptions$groupCh5 = uikitOptions.groupChannel) === null || _uikitOptions$groupCh5 === void 0 ? void 0 : _uikitOptions$groupCh5.enableReactions) !== null && _uikitOptions$groupCh4 !== void 0 ? _uikitOptions$groupCh4 : isReactionEnabled,
-      enableTypingIndicator: (_uikitOptions$groupCh6 = uikitOptions.groupChannel) === null || _uikitOptions$groupCh6 === void 0 ? void 0 : _uikitOptions$groupCh6.enableTypingIndicator,
-      enableVoiceMessage: (_uikitOptions$groupCh7 = (_uikitOptions$groupCh8 = uikitOptions.groupChannel) === null || _uikitOptions$groupCh8 === void 0 ? void 0 : _uikitOptions$groupCh8.enableVoiceMessage) !== null && _uikitOptions$groupCh7 !== void 0 ? _uikitOptions$groupCh7 : isVoiceMessageEnabled,
-      replyType: (_uikitOptions$groupCh9 = (_uikitOptions$groupCh10 = uikitOptions.groupChannel) === null || _uikitOptions$groupCh10 === void 0 ? void 0 : _uikitOptions$groupCh10.replyType) !== null && _uikitOptions$groupCh9 !== void 0 ? _uikitOptions$groupCh9 : replyType != null ? resolvedReplyType.getCaseResolvedReplyType(replyType).lowerCase : undefined,
-      threadReplySelectType: (_uikitOptions$groupCh11 = uikitOptions.groupChannel) === null || _uikitOptions$groupCh11 === void 0 ? void 0 : _uikitOptions$groupCh11.threadReplySelectType,
+      enableOgtag: (_d = uikitOptions.groupChannel) === null || _d === void 0 ? void 0 : _d.enableOgtag,
+      enableMention: (_f = (_e = uikitOptions.groupChannel) === null || _e === void 0 ? void 0 : _e.enableMention) !== null && _f !== void 0 ? _f : isMentionEnabled,
+      enableReactions: (_h = (_g = uikitOptions.groupChannel) === null || _g === void 0 ? void 0 : _g.enableReactions) !== null && _h !== void 0 ? _h : isReactionEnabled,
+      enableTypingIndicator: (_j = uikitOptions.groupChannel) === null || _j === void 0 ? void 0 : _j.enableTypingIndicator,
+      enableVoiceMessage: (_l = (_k = uikitOptions.groupChannel) === null || _k === void 0 ? void 0 : _k.enableVoiceMessage) !== null && _l !== void 0 ? _l : isVoiceMessageEnabled,
+      replyType: (_o = (_m = uikitOptions.groupChannel) === null || _m === void 0 ? void 0 : _m.replyType) !== null && _o !== void 0 ? _o : replyType != null ? resolvedReplyType.getCaseResolvedReplyType(replyType).lowerCase : undefined,
+      threadReplySelectType: (_p = uikitOptions.groupChannel) === null || _p === void 0 ? void 0 : _p.threadReplySelectType,
       input: {
-        enableDocument: (_uikitOptions$groupCh12 = uikitOptions.groupChannel) === null || _uikitOptions$groupCh12 === void 0 ? void 0 : (_uikitOptions$groupCh13 = _uikitOptions$groupCh12.input) === null || _uikitOptions$groupCh13 === void 0 ? void 0 : _uikitOptions$groupCh13.enableDocument
+        enableDocument: (_r = (_q = uikitOptions.groupChannel) === null || _q === void 0 ? void 0 : _q.input) === null || _r === void 0 ? void 0 : _r.enableDocument
       }
     },
     groupChannelList: {
-      enableTypingIndicator: (_uikitOptions$groupCh14 = (_uikitOptions$groupCh15 = uikitOptions.groupChannelList) === null || _uikitOptions$groupCh15 === void 0 ? void 0 : _uikitOptions$groupCh15.enableTypingIndicator) !== null && _uikitOptions$groupCh14 !== void 0 ? _uikitOptions$groupCh14 : isTypingIndicatorEnabledOnChannelList,
-      enableMessageReceiptStatus: (_uikitOptions$groupCh16 = (_uikitOptions$groupCh17 = uikitOptions.groupChannelList) === null || _uikitOptions$groupCh17 === void 0 ? void 0 : _uikitOptions$groupCh17.enableMessageReceiptStatus) !== null && _uikitOptions$groupCh16 !== void 0 ? _uikitOptions$groupCh16 : isMessageReceiptStatusEnabledOnChannelList
+      enableTypingIndicator: (_t = (_s = uikitOptions.groupChannelList) === null || _s === void 0 ? void 0 : _s.enableTypingIndicator) !== null && _t !== void 0 ? _t : isTypingIndicatorEnabledOnChannelList,
+      enableMessageReceiptStatus: (_v = (_u = uikitOptions.groupChannelList) === null || _u === void 0 ? void 0 : _u.enableMessageReceiptStatus) !== null && _v !== void 0 ? _v : isMessageReceiptStatusEnabledOnChannelList
     },
     groupChannelSettings: {
-      enableMessageSearch: (_uikitOptions$groupCh18 = (_uikitOptions$groupCh19 = uikitOptions.groupChannelSettings) === null || _uikitOptions$groupCh19 === void 0 ? void 0 : _uikitOptions$groupCh19.enableMessageSearch) !== null && _uikitOptions$groupCh18 !== void 0 ? _uikitOptions$groupCh18 : showSearchIcon
+      enableMessageSearch: (_x = (_w = uikitOptions.groupChannelSettings) === null || _w === void 0 ? void 0 : _w.enableMessageSearch) !== null && _x !== void 0 ? _x : showSearchIcon
     },
     openChannel: {
-      enableOgtag: (_uikitOptions$openCha = uikitOptions.openChannel) === null || _uikitOptions$openCha === void 0 ? void 0 : _uikitOptions$openCha.enableOgtag,
+      enableOgtag: (_y = uikitOptions.openChannel) === null || _y === void 0 ? void 0 : _y.enableOgtag,
       input: {
-        enableDocument: (_uikitOptions$openCha2 = uikitOptions.openChannel) === null || _uikitOptions$openCha2 === void 0 ? void 0 : (_uikitOptions$openCha3 = _uikitOptions$openCha2.input) === null || _uikitOptions$openCha3 === void 0 ? void 0 : _uikitOptions$openCha3.enableDocument
+        enableDocument: (_0 = (_z = uikitOptions.openChannel) === null || _z === void 0 ? void 0 : _z.input) === null || _0 === void 0 ? void 0 : _0.enableDocument
       }
     }
   };
 }
 
-const TIMEOUT = 2000;
-
+var 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);
+function schedulerFactory(_a) {
+  var logger = _a.logger,
+    timeout = _a.timeout,
+    cb = _a.cb;
+  var queue = [];
+  var interval = null;
+  var push = function (channel) {
+    var channelPresent = queue.find(function (c) {
+      return c.url === channel.url;
+    });
     if (!channelPresent) {
       queue.push(channel);
     } else {
       logger.info('Channel: Mark as read already in queue', {
-        channel
+        channel: channel
       });
     }
     // start the interval if it's not already running
     if (interval) {
       return;
     }
-    const item = queue.shift();
+    var item = queue.shift();
     if (item) {
       cb(item);
     }
-    interval = setInterval(() => {
+    interval = setInterval(function () {
       if (queue.length === 0 && interval) {
         clearInterval(interval);
         interval = null;
         return;
       }
-      const item = queue.shift();
+      var item = queue.shift();
       if (item) {
         cb(item);
       }
     }, timeout || TIMEOUT);
   };
-  const clear = () => {
+  var clear = function () {
     queue = [];
     if (interval) {
       clearInterval(interval);
@@ -928,88 +940,88 @@ function schedulerFactory(_ref) {
     }
   };
   return {
-    push,
-    clear,
-    getQueue: () => queue
+    push: push,
+    clear: clear,
+    getQueue: function () {
+      return queue;
+    }
   };
 }
 
 // this hook accepts a callback to run component is unmounted
-function useUnmount(callback) {
-  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  React.useLayoutEffect(() => {
-    return () => {
+function useUnmount(callback, deps) {
+  if (deps === void 0) {
+    deps = [];
+  }
+  React.useLayoutEffect(function () {
+    return function () {
       callback();
     };
   }, deps);
 }
 
-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
-        });
+function useMarkAsReadScheduler(_a, _b) {
+  var isConnected = _a.isConnected;
+  var logger = _b.logger;
+  var markAsReadScheduler = React.useMemo(function () {
+    return schedulerFactory({
+      logger: logger,
+      cb: function (channel) {
+        try {
+          channel.markAsRead();
+        } catch (error) {
+          logger.warning('Channel: Mark as delivered failed', {
+            channel: channel,
+            error: error
+          });
+        }
       }
-    }
-  }), []);
-  React.useEffect(() => {
+    });
+  }, []);
+  React.useEffect(function () {
     // for simplicity, we clear the queue when the connection is lost
     if (!isConnected) {
       markAsReadScheduler.clear();
     }
   }, [isConnected]);
-  useUnmount(() => {
+  useUnmount(function () {
     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
-        });
+function useMarkAsDeliveredScheduler(_a, _b) {
+  var isConnected = _a.isConnected;
+  var logger = _b.logger;
+  var markAsDeliveredScheduler = React.useMemo(function () {
+    return schedulerFactory({
+      logger: logger,
+      cb: function (channel) {
+        try {
+          channel.markAsDelivered();
+        } catch (error) {
+          logger.warning('Channel: Mark as delivered failed', {
+            channel: channel,
+            error: error
+          });
+        }
       }
-    }
-  }), []);
-  React.useEffect(() => {
+    });
+  }, []);
+  React.useEffect(function () {
     // for simplicity, we clear the queue when the connection is lost
     if (!isConnected) {
       markAsDeliveredScheduler.clear();
     }
   }, [isConnected]);
-  useUnmount(() => {
+  useUnmount(function () {
     markAsDeliveredScheduler.clear();
   });
   return markAsDeliveredScheduler;
 }
 
-function Sendbird(props) {
-  const localConfigs = uikitConfigMapper({
+function SendbirdProvider(props) {
+  var localConfigs = uikitConfigMapper({
     legacyConfig: {
       replyType: props.replyType,
       isMentionEnabled: props.isMentionEnabled,
@@ -1036,200 +1048,225 @@ function Sendbird(props) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(SendbirdSDK, props));
 }
-const SendbirdSDK = _ref => {
-  var _sdk$appInfo;
-  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,
-    breakpoint = false,
-    isUserIdUsedForNickname = true,
-    sdkInitParams,
-    customExtensionParams,
-    isMultipleFilesMessageEnabled = false
-  } = _ref;
-  const {
-    logLevel = '',
-    userMention = {},
-    isREMUnitEnabled = false
-  } = config;
-  const {
-    isMobile
-  } = MediaQueryContext.useMediaQueryContext();
-  const [logger, setLogger] = React.useState(LoggerFactory(logLevel));
-  const [pubSub] = React.useState(pubSubFactory());
-  const [sdkStore, sdkDispatcher] = React.useReducer(reducer$1, initialState$1);
-  const [userStore, userDispatcher] = React.useReducer(reducer, initialState);
-  const {
-    configs,
-    configsWithAppAttr,
-    initDashboardConfigs
-  } = uikitTools.useUIKitConfig();
-  const sdkInitialized = sdkStore.initialized;
-  const sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
-  const {
-    uploadSizeLimit,
-    multipleFilesMessageFileCountLimit
-  } = (_sdk$appInfo = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) !== null && _sdk$appInfo !== void 0 ? _sdk$appInfo : {};
+var SendbirdSDK = function (_a) {
+  var _b, _c, _d;
+  var appId = _a.appId,
+    userId = _a.userId,
+    children = _a.children,
+    _e = _a.accessToken,
+    accessToken = _e === void 0 ? '' : _e,
+    _f = _a.customApiHost,
+    customApiHost = _f === void 0 ? '' : _f,
+    _g = _a.customWebSocketHost,
+    customWebSocketHost = _g === void 0 ? '' : _g,
+    _h = _a.configureSession,
+    configureSession = _h === void 0 ? null : _h,
+    _j = _a.theme,
+    theme = _j === void 0 ? 'light' : _j,
+    _k = _a.config,
+    config = _k === void 0 ? {} : _k,
+    _l = _a.nickname,
+    nickname = _l === void 0 ? '' : _l,
+    _m = _a.colorSet,
+    colorSet = _m === void 0 ? null : _m,
+    _o = _a.stringSet,
+    stringSet$1 = _o === void 0 ? null : _o,
+    _p = _a.dateLocale,
+    dateLocale = _p === void 0 ? null : _p,
+    _q = _a.profileUrl,
+    profileUrl = _q === void 0 ? '' : _q,
+    voiceRecord = _a.voiceRecord,
+    _r = _a.userListQuery,
+    userListQuery = _r === void 0 ? null : _r,
+    _s = _a.imageCompression,
+    imageCompression = _s === void 0 ? {} : _s,
+    _t = _a.allowProfileEdit,
+    allowProfileEdit = _t === void 0 ? false : _t,
+    _u = _a.disableMarkAsDelivered,
+    disableMarkAsDelivered = _u === void 0 ? false : _u,
+    _v = _a.renderUserProfile,
+    renderUserProfile = _v === void 0 ? null : _v,
+    _w = _a.onUserProfileMessage,
+    onUserProfileMessage = _w === void 0 ? null : _w,
+    _x = _a.breakpoint,
+    breakpoint = _x === void 0 ? false : _x,
+    _y = _a.isUserIdUsedForNickname,
+    isUserIdUsedForNickname = _y === void 0 ? true : _y,
+    sdkInitParams = _a.sdkInitParams,
+    customExtensionParams = _a.customExtensionParams,
+    _z = _a.isMultipleFilesMessageEnabled,
+    isMultipleFilesMessageEnabled = _z === void 0 ? false : _z,
+    eventHandlers = _a.eventHandlers;
+  var _0 = config.logLevel,
+    logLevel = _0 === void 0 ? '' : _0,
+    _1 = config.userMention,
+    userMention = _1 === void 0 ? {} : _1,
+    _2 = config.isREMUnitEnabled,
+    isREMUnitEnabled = _2 === void 0 ? false : _2,
+    customPubSub = config.pubSub;
+  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+  var _3 = React.useState(LoggerFactory(logLevel)),
+    logger = _3[0],
+    setLogger = _3[1];
+  var pubSub = React.useState(function () {
+    return customPubSub !== null && customPubSub !== void 0 ? customPubSub : pubSubFactory();
+  })[0];
+  var _4 = React.useReducer(reducer$1, initialState$1),
+    sdkStore = _4[0],
+    sdkDispatcher = _4[1];
+  var _5 = React.useReducer(reducer, initialState),
+    userStore = _5[0],
+    userDispatcher = _5[1];
+  var _6 = uikitTools.useUIKitConfig(),
+    configs = _6.configs,
+    configsWithAppAttr = _6.configsWithAppAttr,
+    initDashboardConfigs = _6.initDashboardConfigs;
+  var sdkInitialized = sdkStore.initialized;
+  var sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
+  var _7 = (_b = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) !== null && _b !== void 0 ? _b : {},
+    uploadSizeLimit = _7.uploadSizeLimit,
+    multipleFilesMessageFileCountLimit = _7.multipleFilesMessageFileCountLimit;
   useTheme(colorSet);
-  const reconnect = useConnect({
-    appId,
-    userId,
-    accessToken,
-    isUserIdUsedForNickname,
-    isMobile
+  var reconnect = useConnect({
+    appId: appId,
+    userId: userId,
+    accessToken: accessToken,
+    isUserIdUsedForNickname: isUserIdUsedForNickname,
+    isMobile: isMobile
   }, {
-    logger,
-    nickname,
-    profileUrl,
-    configureSession,
-    customApiHost,
-    customWebSocketHost,
-    sdkInitParams,
-    customExtensionParams,
-    sdk,
-    sdkDispatcher,
-    userDispatcher,
-    initDashboardConfigs
+    logger: logger,
+    nickname: nickname,
+    profileUrl: profileUrl,
+    configureSession: configureSession,
+    customApiHost: customApiHost,
+    customWebSocketHost: customWebSocketHost,
+    sdkInitParams: sdkInitParams,
+    customExtensionParams: customExtensionParams,
+    sdk: sdk,
+    sdkDispatcher: sdkDispatcher,
+    userDispatcher: userDispatcher,
+    initDashboardConfigs: initDashboardConfigs
   });
-  useUnmount(() => {
+  useUnmount(function () {
     if (typeof sdk.disconnect === 'function') {
       disconnectSdk({
-        logger,
-        sdkDispatcher,
-        userDispatcher,
-        sdk
+        logger: logger,
+        sdkDispatcher: sdkDispatcher,
+        userDispatcher: userDispatcher,
+        sdk: sdk
       });
     }
   }, [sdk.disconnect]);
-
   // to create a pubsub to communicate between parent and child
-  React.useEffect(() => {
+  React.useEffect(function () {
     setLogger(LoggerFactory(logLevel));
   }, [logLevel]);
   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);
+  var _8 = React.useState(theme),
+    currentTheme = _8[0],
+    setCurrentTheme = _8[1];
+  React.useEffect(function () {
+    setCurrentTheme(theme);
   }, [theme]);
-  React.useEffect(() => {
-    const body = document.querySelector('body');
+  React.useEffect(function () {
+    var 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
-  React.useEffect(() => {
-    logger.info('Setup theme', `Theme: ${currenttheme}`);
+  React.useEffect(function () {
+    logger.info('Setup theme', "Theme: ".concat(currentTheme));
     try {
-      const body = document.querySelector('body');
+      var body = document.querySelector('body');
       body.classList.remove('sendbird-theme--light');
       body.classList.remove('sendbird-theme--dark');
-      body.classList.add(`sendbird-theme--${currenttheme || 'light'}`);
+      body.classList.add("sendbird-theme--".concat(currentTheme || 'light'));
       logger.info('Finish setup theme');
       // eslint-disable-next-line no-empty
     } catch (e) {
-      logger.warning('Setup theme failed', `${e}`);
+      logger.warning('Setup theme failed', "".concat(e));
     }
-    return () => {
+    return function () {
       try {
-        const body = document.querySelector('body');
+        var body = document.querySelector('body');
         body.classList.remove('sendbird-theme--light');
         body.classList.remove('sendbird-theme--dark');
         // eslint-disable-next-line no-empty
-      } catch (_unused) {}
+      } catch (_a) {}
     };
-  }, [currenttheme]);
-  const isOnline = useConnectionStatus(sdkStore.sdk, logger);
-  const markAsReadScheduler = useMarkAsReadScheduler({
+  }, [currentTheme]);
+  var isOnline = useOnlineStatus(sdkStore.sdk, logger);
+  var markAsReadScheduler = useMarkAsReadScheduler({
     isConnected: isOnline
   }, {
-    logger
+    logger: logger
   });
-  const markAsDeliveredScheduler = useMarkAsDeliveredScheduler({
+  var markAsDeliveredScheduler = useMarkAsDeliveredScheduler({
     isConnected: isOnline
   }, {
-    logger
+    logger: logger
   });
-  const localeStringSet = React__default["default"].useMemo(() => {
+  var localeStringSet = React__default["default"].useMemo(function () {
     if (!stringSet$1) {
       return stringSet.getStringSet('en');
     }
-    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, stringSet.getStringSet('en')), stringSet$1);
+    return tslib_es6.__assign(tslib_es6.__assign({}, stringSet.getStringSet('en')), stringSet$1);
   }, [stringSet$1]);
-
   /**
    * Feature Configuration - TODO
    * This will be moved into the UIKitConfigProvider, aftering Dashboard applies
    */
-  const uikitMultipleFilesMessageLimit = React.useMemo(() => {
+  var uikitMultipleFilesMessageLimit = React.useMemo(function () {
     return Math.min(consts.DEFAULT_MULTIPLE_FILES_MESSAGE_LIMIT, multipleFilesMessageFileCountLimit !== null && multipleFilesMessageFileCountLimit !== void 0 ? multipleFilesMessageFileCountLimit : Number.MAX_SAFE_INTEGER);
   }, [multipleFilesMessageFileCountLimit]);
-  const uikitUploadSizeLimit = React.useMemo(() => {
+  var uikitUploadSizeLimit = React.useMemo(function () {
     return uploadSizeLimit;
   }, [uploadSizeLimit]);
   return /*#__PURE__*/React__default["default"].createElement(withSendbird.SendbirdSdkContext.Provider, {
     value: {
       stores: {
-        sdkStore,
-        userStore
+        sdkStore: sdkStore,
+        userStore: userStore
       },
       dispatchers: {
-        sdkDispatcher,
-        userDispatcher,
-        reconnect
+        sdkDispatcher: sdkDispatcher,
+        userDispatcher: userDispatcher,
+        reconnect: reconnect
       },
       config: {
-        disableMarkAsDelivered,
-        renderUserProfile,
-        onUserProfileMessage,
-        allowProfileEdit,
-        isOnline,
-        userId,
-        appId,
-        accessToken,
-        theme: currenttheme,
-        setCurrenttheme,
-        isMultipleFilesMessageEnabled,
-        uikitUploadSizeLimit,
-        uikitMultipleFilesMessageLimit,
-        userListQuery,
-        logger,
-        pubSub,
-        imageCompression: _rollupPluginBabelHelpers._objectSpread2({
+        disableMarkAsDelivered: disableMarkAsDelivered,
+        renderUserProfile: renderUserProfile,
+        onUserProfileMessage: onUserProfileMessage,
+        allowProfileEdit: allowProfileEdit,
+        isOnline: isOnline,
+        userId: userId,
+        appId: appId,
+        accessToken: accessToken,
+        theme: currentTheme,
+        setCurrentTheme: setCurrentTheme,
+        setCurrenttheme: setCurrentTheme,
+        isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
+        uikitUploadSizeLimit: uikitUploadSizeLimit,
+        uikitMultipleFilesMessageLimit: uikitMultipleFilesMessageLimit,
+        userListQuery: userListQuery,
+        logger: logger,
+        pubSub: pubSub,
+        imageCompression: tslib_es6.__assign({
           compressionRate: 0.7
         }, imageCompression),
-        voiceRecord,
+        voiceRecord: {
+          maxRecordingTime: (_c = voiceRecord === null || voiceRecord === void 0 ? void 0 : voiceRecord.maxRecordingTime) !== null && _c !== void 0 ? _c : consts.VOICE_RECORDER_DEFAULT_MAX,
+          minRecordingTime: (_d = voiceRecord === null || voiceRecord === void 0 ? void 0 : voiceRecord.minRecordingTime) !== null && _d !== void 0 ? _d : consts.VOICE_RECORDER_DEFAULT_MIN
+        },
         userMention: {
           maxMentionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || 10,
           maxSuggestionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15
         },
-        markAsReadScheduler,
-        markAsDeliveredScheduler,
+        markAsReadScheduler: markAsReadScheduler,
+        markAsDeliveredScheduler: markAsDeliveredScheduler,
         // From UIKitConfigProvider.localConfigs
         disableUserProfile: !configs.common.enableUsingDefaultUserProfile,
         isReactionEnabled: sdkInitialized && configsWithAppAttr(sdk).groupChannel.channel.enableReactions,
@@ -1244,13 +1281,14 @@ const SendbirdSDK = _ref => {
           enableOgtag: sdkInitialized && configsWithAppAttr(sdk).groupChannel.channel.enableOgtag,
           enableTypingIndicator: configs.groupChannel.channel.enableTypingIndicator,
           enableDocument: configs.groupChannel.channel.input.enableDocument,
-          threadReplySelectType: resolvedReplyType.getCaseResolvedThreadReplySelectType(configs.groupChannel.channel.threadReplySelectType).upperCase
+          threadReplySelectType: resolvedReplyType.getCaseResolvedThreadReplySelectType(configs.groupChannel.channel.threadReplySelectType).lowerCase
         },
         openChannel: {
           enableOgtag: sdkInitialized && configsWithAppAttr(sdk).openChannel.channel.enableOgtag,
           enableDocument: configs.openChannel.channel.input.enableDocument
         }
-      }
+      },
+      eventHandlers: eventHandlers
     }
   }, /*#__PURE__*/React__default["default"].createElement(MediaQueryContext.MediaQueryProvider, {
     logger: logger,
@@ -1260,8 +1298,10 @@ const SendbirdSDK = _ref => {
     dateLocale: dateLocale
   }, /*#__PURE__*/React__default["default"].createElement(VoiceMessageProvider, {
     isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage
-  }, /*#__PURE__*/React__default["default"].createElement(index$1.GlobalModalProvider, null, children)))));
+  }, /*#__PURE__*/React__default["default"].createElement(hooks_useModal.GlobalModalProvider, null, children)))));
 };
 
-module.exports = Sendbird;
+exports.useSendbirdStateContext = useSendbirdStateContext.useSendbirdStateContext;
+exports.SendbirdProvider = SendbirdProvider;
+exports["default"] = SendbirdProvider;
 //# sourceMappingURL=SendbirdProvider.js.map