@sendbird/uikit-react 3.4.6 → 3.4.7-rc.0

package/cjs/SendbirdProvider.js

@@ -1,192 +1,48 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-8f4b0cfe.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c04a5857.js');
 var React = require('react');
 var withSendbird = require('./withSendbird.js');
+var cssVars = require('css-vars-ponyfill');
+var index_module = require('./index.module-984504c9.js');
+var actionTypes = require('./actionTypes-1fec1d92.js');
 var SendbirdChat = require('@sendbird/chat');
+var uuid = require('./uuid-b0cd103f.js');
 var openChannel = require('@sendbird/chat/openChannel');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var actionTypes = require('./actionTypes-0e0d2d59.js');
-var index = require('./index-2ac1f908.js');
-var cssVars = require('css-vars-ponyfill');
-var index_module = require('./index.module-cf39e3b9.js');
-var uuid = require('./uuid-1ffa3b79.js');
-var VoicePlayer_context = require('./index-cd680348.js');
+var index = require('./index-99e85757.js');
+var VoicePlayer_context = require('./index-6c62c727.js');
 var VoiceRecorder_context = require('./VoiceRecorder/context.js');
-var LocalizationContext = require('./LocalizationContext-498cb747.js');
-var MediaQueryContext = require('./MediaQueryContext-b9c2ec1f.js');
-var stringSet = require('./stringSet-061fe0c1.js');
-var consts = require('./consts-8605e767.js');
+var LocalizationContext = require('./LocalizationContext-08499fd8.js');
+var MediaQueryContext = require('./MediaQueryContext-8a0d2426.js');
+var stringSet = require('./stringSet-43ba803e.js');
+var consts = require('./consts-d8eecba2.js');
 require('./utils/message/getOutgoingMessageState.js');
 require('./useSendbirdStateContext.js');
-require('./index-8b6bb1ee.js');
+require('./index-d817af55.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var SendbirdChat__default = /*#__PURE__*/_interopDefaultLegacy(SendbirdChat);
 var cssVars__default = /*#__PURE__*/_interopDefaultLegacy(cssVars);
+var SendbirdChat__default = /*#__PURE__*/_interopDefaultLegacy(SendbirdChat);
 
-var SDK_ACTIONS = {
-  INIT_SDK: 'INIT_SDK',
-  SET_SDK_LOADING: 'SET_SDK_LOADING',
-  RESET_SDK: 'RESET_SDK',
-  SDK_ERROR: 'SDK_ERROR'
-};
-
-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;
-var APP_VERSION_STRING = '3.4.6';
-var disconnectSdk = function (_a) {
-  var sdkDispatcher = _a.sdkDispatcher,
-    userDispatcher = _a.userDispatcher,
-    sdk = _a.sdk,
-    onDisconnect = _a.onDisconnect;
-  sdkDispatcher({
-    type: SET_SDK_LOADING,
-    payload: true
-  });
-  if (sdk === null || sdk === void 0 ? void 0 : sdk.disconnect) {
-    sdk.disconnect().then(function () {
-      sdkDispatcher({
-        type: RESET_SDK
-      });
-      userDispatcher({
-        type: RESET_USER
-      });
-    }).finally(function () {
-      onDisconnect();
-    });
-  } else {
-    onDisconnect();
-  }
-};
-var handleConnection = function (_a, dispatchers) {
-  var userId = _a.userId,
-    appId = _a.appId,
-    nickname = _a.nickname,
-    profileUrl = _a.profileUrl,
-    accessToken = _a.accessToken,
-    configureSession = _a.configureSession,
-    customApiHost = _a.customApiHost,
-    customWebSocketHost = _a.customWebSocketHost,
-    sdk = _a.sdk,
-    logger = _a.logger;
-  var sdkDispatcher = dispatchers.sdkDispatcher,
-    userDispatcher = dispatchers.userDispatcher;
-  disconnectSdk({
-    sdkDispatcher: sdkDispatcher,
-    userDispatcher: userDispatcher,
-    sdk: sdk,
-    logger: logger,
-    onDisconnect: function () {
-      logger.info('Setup connection');
-      var sessionHandler = null;
-      sdkDispatcher({
-        type: SET_SDK_LOADING,
-        payload: true
-      });
-      if (userId && appId) {
-        var params = {
-          appId: appId,
-          modules: [new groupChannel.GroupChannelModule(), new openChannel.OpenChannelModule()]
-        };
-        if (customApiHost) {
-          params['customApiHost'] = customApiHost;
-        }
-        if (customWebSocketHost) {
-          params['customWebSocketHost'] = customWebSocketHost;
-        }
-        var newSdk_1 = SendbirdChat__default["default"].init(params);
-        if (configureSession && typeof configureSession === 'function') {
-          sessionHandler = configureSession(newSdk_1);
-          newSdk_1.setSessionHandler(sessionHandler);
-        }
-        // to check if code is released version from rollup and *not from storybook*
-        // see rollup config file
-        // @ts-ignore
-        {
-          newSdk_1.addExtension('sb_uikit', APP_VERSION_STRING);
-        }
-        var connectCbSucess_1 = function (user) {
-          sdkDispatcher({
-            type: INIT_SDK,
-            payload: newSdk_1
-          });
-          userDispatcher({
-            type: 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_1.updateCurrentUserInfo({
-              nickname: nickname || user.nickname,
-              profileUrl: profileUrl || user.profileUrl
-            }).then(function (namedUser) {
-              userDispatcher({
-                type: UPDATE_USER_INFO,
-                payload: namedUser
-              });
-            });
-          }
-        };
-        var connectCbError_1 = function (e) {
-          logger.error('Connection failed', "".concat(e));
-          sdkDispatcher({
-            type: RESET_SDK
-          });
-          userDispatcher({
-            type: RESET_USER
-          });
-          sdkDispatcher({
-            type: SDK_ERROR
-          });
-        };
-        if (accessToken) {
-          newSdk_1.connect(userId, accessToken).then(function (res) {
-            return connectCbSucess_1(res);
-          }).catch(function (err) {
-            return connectCbError_1(err);
-          });
-        } else {
-          newSdk_1.connect(userId).then(function (res) {
-            return connectCbSucess_1(res);
-          }).catch(function (err) {
-            return connectCbError_1(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',
@@ -263,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 initialState$1 = {
+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: {},
@@ -279,24 +142,28 @@ var initialState$1 = {
 function reducer$1(state, action) {
   return index_module.K(action).with({
     type: SDK_ACTIONS.SET_SDK_LOADING
-  }, function (_a) {
-    var payload = _a.payload;
-    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+  }, _ref => {
+    let {
+      payload
+    } = _ref;
+    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
       initialized: false,
       loading: payload
     });
   }).with({
     type: SDK_ACTIONS.SDK_ERROR
-  }, function () {
-    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+  }, () => {
+    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
       initialized: false,
       loading: false,
       error: true
     });
   }).with({
     type: SDK_ACTIONS.INIT_SDK
-  }, function (_a) {
-    var payload = _a.payload;
+  }, _ref2 => {
+    let {
+      payload
+    } = _ref2;
     return {
       sdk: payload,
       initialized: true,
@@ -305,14 +172,14 @@ function reducer$1(state, action) {
     };
   }).with({
     type: SDK_ACTIONS.RESET_SDK
-  }, function () {
+  }, () => {
     return initialState$1;
-  }).otherwise(function () {
+  }).otherwise(() => {
     return state;
   });
 }
 
-var initialState = {
+const initialState = {
   initialized: false,
   loading: false,
   user: {}
@@ -321,8 +188,10 @@ var initialState = {
 function reducer(state, action) {
   return index_module.K(action).with({
     type: actionTypes.USER_ACTIONS.INIT_USER
-  }, function (_a) {
-    var payload = _a.payload;
+  }, _ref => {
+    let {
+      payload
+    } = _ref;
     return {
       initialized: true,
       loading: false,
@@ -330,16 +199,18 @@ function reducer(state, action) {
     };
   }).with({
     type: actionTypes.USER_ACTIONS.RESET_USER
-  }, function () {
+  }, () => {
     return initialState;
   }).with({
     type: actionTypes.USER_ACTIONS.UPDATE_USER_INFO
-  }, function (_a) {
-    var payload = _a.payload;
-    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+  }, _ref2 => {
+    let {
+      payload
+    } = _ref2;
+    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
       user: payload
     });
-  }).otherwise(function () {
+  }).otherwise(() => {
     return state;
   });
 }
@@ -431,16 +302,338 @@ 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(() => {
+        sdkDispatcher({
+          type: SDK_ACTIONS.RESET_SDK
+        });
+        userDispatcher({
+          type: actionTypes.USER_ACTIONS.RESET_USER
+        });
+      }).finally(() => {
+        resolve(true);
+      });
+    } else {
+      resolve(true);
+    }
+  });
+}
+
+const {
+  INIT_SDK,
+  SET_SDK_LOADING,
+  RESET_SDK,
+  SDK_ERROR
+} = SDK_ACTIONS;
+const {
+  INIT_USER,
+  UPDATE_USER_INFO,
+  RESET_USER
+} = actionTypes.USER_ACTIONS;
+const APP_VERSION_STRING = '3.4.7-rc.0';
+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 if not storybook
+// 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,
+    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) {
+      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);
+      }
+      // to check if code is released version from rollup and *not from storybook*
+      // see rollup config file
+      // @ts-ignore
+      {
+        var _logger$info3;
+        logger === null || logger === void 0 ? void 0 : (_logger$info3 = logger.info) === null || _logger$info3 === void 0 ? void 0 : _logger$info3.call(logger, 'SendbirdProvider | useConnect/setupConnection/setVersion', APP_VERSION_STRING);
+        newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
+      }
+      const connectCbSucess = user => {
+        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
+        });
+        // 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$info5;
+          logger === null || logger === void 0 ? void 0 : (_logger$info5 = logger.info) === null || _logger$info5 === void 0 ? void 0 : _logger$info5.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo', {
+            nickname,
+            profileUrl
+          });
+          newSdk.updateCurrentUserInfo({
+            nickname: nickname || user.nickname,
+            profileUrl: profileUrl || user.profileUrl
+          }).then(namedUser => {
+            var _logger$info6;
+            logger === null || logger === void 0 ? void 0 : (_logger$info6 = logger.info) === null || _logger$info6 === void 0 ? void 0 : _logger$info6.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {
+              nickname,
+              profileUrl
+            });
+            userDispatcher({
+              type: UPDATE_USER_INFO,
+              payload: namedUser
+            });
+          }).finally(() => {
+            resolve();
+          });
+        } else {
+          resolve();
+        }
+      };
+      const connectCbError = e => {
+        var _logger$error;
+        const errorMessage = getConnectSbError(e);
+        logger === null || logger === void 0 ? void 0 : (_logger$error = logger.error) === null || _logger$error === void 0 ? void 0 : _logger$error.call(logger, errorMessage, {
+          e,
+          appId,
+          userId
+        });
+        sdkDispatcher({
+          type: RESET_SDK
+        });
+        userDispatcher({
+          type: RESET_USER
+        });
+        sdkDispatcher({
+          type: SDK_ERROR
+        });
+        // exit promise with error
+        reject(errorMessage);
+      };
+      if (accessToken) {
+        var _logger$info7;
+        logger === null || logger === void 0 ? void 0 : (_logger$info7 = logger.info) === null || _logger$info7 === void 0 ? void 0 : _logger$info7.call(logger, 'SendbirdProvider | useConnect/setupConnection/connect connecting using accessToken');
+        newSdk.connect(userId, accessToken).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
+      } else {
+        var _logger$info8;
+        logger === null || logger === void 0 ? void 0 : (_logger$info8 = logger.info) === null || _logger$info8 === void 0 ? void 0 : _logger$info8.call(logger, 'SendbirdProvider | useConnect/setupConnection/connect connecting using userId');
+        newSdk.connect(userId).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
+      }
+    } else {
+      var _logger$error2;
+      const errorMessage = getMissingParamError({
+        userId,
+        appId
+      });
+      sdkDispatcher({
+        type: SDK_ERROR
+      });
+      logger === null || logger === void 0 ? void 0 : (_logger$error2 = logger.error) === null || _logger$error2 === void 0 ? void 0 : _logger$error2.call(logger, errorMessage);
+      // exit promise with error
+      reject(errorMessage);
+    }
+  });
+}
+
+async function connect(_ref) {
+  let {
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    userId,
+    appId,
+    customApiHost,
+    customWebSocketHost,
+    configureSession,
+    nickname,
+    profileUrl,
+    accessToken,
+    sdk
+  } = _ref;
+  await disconnectSdk({
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    sdk
+  });
+  await setUpConnection({
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    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
+  } = 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
+      });
+    } 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
+      });
+    } 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));
-var LOG_LEVELS = {
+const LOG_LEVELS = {
   DEBUG: 'debug',
   WARNING: 'warning',
   ERROR: 'error',
   INFO: 'info',
   ALL: 'all'
 };
-var colorLog = function (level) {
+const colorLog = level => {
   switch (level) {
     case LOG_LEVELS.WARNING:
       return 'color: Orange';
@@ -450,61 +643,57 @@ var colorLog = function (level) {
       return 'color: Gray';
   }
 };
-var printLog = function (_a) {
-  var level = _a.level,
-    title = _a.title,
-    _b = _a.description,
-    description = _b === void 0 ? '' : _b;
+const printLog = _ref => {
+  let {
+    level,
+    title,
+    description = ''
+  } = _ref;
   // eslint-disable-next-line no-console
-  console.log("%c SendbirdUIKit | ".concat(level, " | ").concat(new Date().toISOString(), " | ").concat(title, " ").concat(description && '|'), colorLog(level), description);
+  console.log(`%c SendbirdUIKit | ${level} | ${new Date().toISOString()} | ${title} ${description && '|'}`, colorLog(level), description);
 };
-var noop = function () {};
-var getDefaultLogger = function () {
-  return {
-    info: noop,
-    error: noop,
-    warning: 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) {
-      return logInterface({
-        level: lgLvl,
-        title: title,
-        description: description
-      });
-    };
-  };
-  var logger = lvlArray.reduce(function (accumulator, currentLvl) {
+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) => {
     if (currentLvl === LOG_LEVELS.DEBUG || currentLvl === LOG_LEVELS.ALL) {
-      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
+      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
         info: applyLog(LOG_LEVELS.INFO),
         error: applyLog(LOG_LEVELS.ERROR),
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
     if (currentLvl === LOG_LEVELS.INFO) {
-      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
+      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
         info: applyLog(LOG_LEVELS.INFO)
       });
     }
     if (currentLvl === LOG_LEVELS.ERROR) {
-      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
+      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
         error: applyLog(LOG_LEVELS.ERROR)
       });
     }
     if (currentLvl === LOG_LEVELS.WARNING) {
-      return tslib_es6.__assign(tslib_es6.__assign({}, accumulator), {
+      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, accumulator), {}, {
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
-    return tslib_es6.__assign({}, accumulator);
+    return _rollupPluginBabelHelpers._objectSpread2({}, accumulator);
   }, getDefaultLogger());
   return logger;
 };
+
 // TODO: Make this to hook, useLogger
 
 // https://davidwalsh.name/pubsub-javascript
@@ -512,34 +701,36 @@ var LoggerFactory = function (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
-var pubSubFactory = function () {
-  var topics = {};
-  var hOP = topics.hasOwnProperty;
+
+const pubSubFactory = () => {
+  const topics = {};
+  const hOP = topics.hasOwnProperty;
   return {
-    __getTopics: function () {
-      return topics;
-    },
-    subscribe: function (topic, listener) {
+    __getTopics: () => topics,
+    subscribe: (topic, listener) => {
       // Create the topic's object if not yet created
       if (!hOP.call(topics, topic)) {
         topics[topic] = [];
       }
+
       // Add the listener to queue
-      var index = topics[topic].push(listener) - 1;
+      const index = topics[topic].push(listener) - 1;
+
       // Provide handle back for removal of topic
       return {
-        remove: function () {
+        remove: () => {
           delete topics[topic][index];
         }
       };
     },
-    publish: function (topic, info) {
+    publish: (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(function (item) {
+      topics[topic].forEach(item => {
         item(info !== undefined ? info : {});
       });
     }
@@ -567,24 +758,23 @@ function useAppendDomNode() {
   }, []);
 }
 
-var VoiceMessageProvider = function (_a) {
-  var children = _a.children,
-    _b = _a.isVoiceMessageEnabled,
-    isVoiceMessageEnabled = _b === void 0 ? true : _b;
+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));
 };
 
-var TIMEOUT = 5000;
-var schedulerFactory = function (logger, timeout) {
-  var queue = [];
-  var interval = null;
-  var push = function (channel) {
-    var channelPresent = queue.find(function (c) {
-      return c.url === channel.url;
-    });
+const TIMEOUT = 5000;
+const schedulerFactory = (logger, timeout) => {
+  let queue = [];
+  let interval = null;
+  const push = channel => {
+    const channelPresent = queue.find(c => c.url === channel.url);
     if (!channelPresent) {
       queue.push(channel);
     } else {
@@ -594,13 +784,13 @@ var schedulerFactory = function (logger, timeout) {
     if (interval) {
       return;
     }
-    interval = setInterval(function () {
+    interval = setInterval(() => {
       if (queue.length === 0) {
         clearInterval(interval);
         interval = null;
         return;
       }
-      var channel = queue.shift();
+      const channel = queue.shift();
       if (channel) {
         try {
           channel.markAsRead();
@@ -610,7 +800,7 @@ var schedulerFactory = function (logger, timeout) {
       }
     }, timeout || TIMEOUT);
   };
-  var clear = function () {
+  const clear = () => {
     queue = [];
     if (interval) {
       clearInterval(interval);
@@ -618,20 +808,20 @@ var schedulerFactory = function (logger, timeout) {
     }
   };
   return {
-    push: push,
-    clear: clear,
-    getQueue: function () {
-      return queue;
-    }
+    push,
+    clear,
+    getQueue: () => queue
   };
 };
-function useMarkAsReadScheduler(_a, _b) {
-  var isConnected = _a.isConnected;
-  var logger = _b.logger;
-  var markAsReadScheduler = React.useMemo(function () {
-    return schedulerFactory(logger);
-  }, []);
-  React.useEffect(function () {
+function useMarkAsReadScheduler(_ref, _ref2) {
+  let {
+    isConnected
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  const markAsReadScheduler = React.useMemo(() => schedulerFactory(logger), []);
+  React.useEffect(() => {
     // for simplicity, we clear the queue when the connection is lost
     if (!isConnected) {
       markAsReadScheduler.clear();
@@ -641,209 +831,160 @@ function useMarkAsReadScheduler(_a, _b) {
   return markAsReadScheduler;
 }
 
-var Sendbird = function (_a) {
-  var appId = _a.appId,
-    userId = _a.userId,
-    children = _a.children,
-    _b = _a.accessToken,
-    accessToken = _b === void 0 ? '' : _b,
-    _c = _a.customApiHost,
-    customApiHost = _c === void 0 ? '' : _c,
-    _d = _a.customWebSocketHost,
-    customWebSocketHost = _d === void 0 ? '' : _d,
-    _e = _a.configureSession,
-    configureSession = _e === void 0 ? null : _e,
-    _f = _a.theme,
-    theme = _f === void 0 ? 'light' : _f,
-    _g = _a.config,
-    config = _g === void 0 ? {} : _g,
-    _h = _a.nickname,
-    nickname = _h === void 0 ? '' : _h,
-    _j = _a.colorSet,
-    colorSet = _j === void 0 ? null : _j,
-    _k = _a.stringSet,
-    stringSet$1 = _k === void 0 ? null : _k,
-    _l = _a.replyType,
-    replyType = _l === void 0 ? 'NONE' : _l,
-    _m = _a.dateLocale,
-    dateLocale = _m === void 0 ? null : _m,
-    _o = _a.profileUrl,
-    profileUrl = _o === void 0 ? '' : _o,
-    _p = _a.voiceRecord,
-    voiceRecord = _p === void 0 ? {
+const Sendbird = _ref => {
+  let {
+    appId,
+    userId,
+    children,
+    accessToken = '',
+    customApiHost = '',
+    customWebSocketHost = '',
+    configureSession = null,
+    theme = 'light',
+    config = {},
+    nickname = '',
+    colorSet = null,
+    stringSet: stringSet$1 = null,
+    replyType = 'NONE',
+    dateLocale = null,
+    profileUrl = '',
+    voiceRecord = {
       maxRecordingTime: consts.VOICE_RECORDER_DEFAULT_MAX,
       minRecordingTime: consts.VOICE_RECORDER_DEFAULT_MIN
-    } : _p,
-    _q = _a.userListQuery,
-    userListQuery = _q === void 0 ? null : _q,
-    _r = _a.imageCompression,
-    imageCompression = _r === void 0 ? {} : _r,
-    _s = _a.allowProfileEdit,
-    allowProfileEdit = _s === void 0 ? false : _s,
-    _t = _a.isMentionEnabled,
-    isMentionEnabled = _t === void 0 ? false : _t,
-    _u = _a.isReactionEnabled,
-    isReactionEnabled = _u === void 0 ? true : _u,
-    _v = _a.disableUserProfile,
-    disableUserProfile = _v === void 0 ? false : _v,
-    _w = _a.isVoiceMessageEnabled,
-    isVoiceMessageEnabled = _w === void 0 ? true : _w,
-    _x = _a.disableMarkAsDelivered,
-    disableMarkAsDelivered = _x === void 0 ? false : _x,
-    _y = _a.isTypingIndicatorEnabledOnChannelList,
-    isTypingIndicatorEnabledOnChannelList = _y === void 0 ? false : _y,
-    _z = _a.isMessageReceiptStatusEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList = _z === void 0 ? false : _z,
-    _0 = _a.renderUserProfile,
-    renderUserProfile = _0 === void 0 ? null : _0,
-    _1 = _a.onUserProfileMessage,
-    onUserProfileMessage = _1 === void 0 ? null : _1;
-  var mediaQueryBreakPoint = false;
-  var _2 = config.logLevel,
-    logLevel = _2 === void 0 ? '' : _2,
-    _3 = config.userMention,
-    userMention = _3 === void 0 ? {} : _3,
-    _4 = config.isREMUnitEnabled,
-    isREMUnitEnabled = _4 === void 0 ? false : _4;
-  var _5 = React.useState(LoggerFactory(logLevel)),
-    logger = _5[0],
-    setLogger = _5[1];
-  var pubSub = React.useState(pubSubFactory())[0];
-  var _6 = React.useReducer(reducer$1, initialState$1),
-    sdkStore = _6[0],
-    sdkDispatcher = _6[1];
-  var _7 = React.useReducer(reducer, initialState),
-    userStore = _7[0],
-    userDispatcher = _7[1];
+    },
+    userListQuery = null,
+    imageCompression = {},
+    allowProfileEdit = false,
+    isMentionEnabled = false,
+    isReactionEnabled = true,
+    disableUserProfile = false,
+    isVoiceMessageEnabled = true,
+    disableMarkAsDelivered = false,
+    isTypingIndicatorEnabledOnChannelList = false,
+    isMessageReceiptStatusEnabledOnChannelList = false,
+    renderUserProfile = null,
+    onUserProfileMessage = null
+  } = _ref;
+  const mediaQueryBreakPoint = false;
+  const {
+    logLevel = '',
+    userMention = {},
+    isREMUnitEnabled = false
+  } = config;
+  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);
   useTheme(colorSet);
-  React.useEffect(function () {
-    logger.info('App Init');
-    // dispatch action
-    handleConnection({
-      userId: userId,
-      appId: appId,
-      accessToken: accessToken,
-      sdkStore: sdkStore,
-      nickname: nickname,
-      profileUrl: profileUrl,
-      configureSession: configureSession,
-      customApiHost: customApiHost,
-      customWebSocketHost: customWebSocketHost,
-      sdk: sdkStore.sdk,
-      logger: logger
-    }, {
-      sdkDispatcher: sdkDispatcher,
-      userDispatcher: userDispatcher
-    });
-  }, [userId, appId, accessToken]);
+  const reconnect = useConnect({
+    appId,
+    userId,
+    accessToken
+  }, {
+    logger,
+    nickname,
+    profileUrl,
+    configureSession,
+    customApiHost,
+    customWebSocketHost,
+    sdk: sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk,
+    sdkDispatcher,
+    userDispatcher
+  });
+
   // to create a pubsub to communicate between parent and child
-  React.useEffect(function () {
+  React.useEffect(() => {
     setLogger(LoggerFactory(logLevel));
   }, [logLevel]);
   useAppendDomNode(['sendbird-modal-root', 'sendbird-dropdown-portal', 'sendbird-emoji-list-portal'], 'body');
+
   // should move to reducer
-  var _8 = React.useState(theme),
-    currenttheme = _8[0],
-    setCurrenttheme = _8[1];
-  React.useEffect(function () {
+  const [currenttheme, setCurrenttheme] = React.useState(theme);
+  React.useEffect(() => {
     setCurrenttheme(theme);
   }, [theme]);
-  React.useEffect(function () {
-    var body = document.querySelector('body');
+  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
-  React.useEffect(function () {
-    logger.info('Setup theme', "Theme: ".concat(currenttheme));
+  React.useEffect(() => {
+    logger.info('Setup theme', `Theme: ${currenttheme}`);
     try {
-      var body = document.querySelector('body');
+      const body = document.querySelector('body');
       body.classList.remove('sendbird-theme--light');
       body.classList.remove('sendbird-theme--dark');
-      body.classList.add("sendbird-theme--".concat(currenttheme || 'light'));
+      body.classList.add(`sendbird-theme--${currenttheme || 'light'}`);
       logger.info('Finish setup theme');
       // eslint-disable-next-line no-empty
     } catch (e) {
-      logger.warning('Setup theme failed', "".concat(e));
+      logger.warning('Setup theme failed', `${e}`);
     }
-    return function () {
+    return () => {
       try {
-        var body = document.querySelector('body');
+        const body = document.querySelector('body');
         body.classList.remove('sendbird-theme--light');
         body.classList.remove('sendbird-theme--dark');
         // eslint-disable-next-line no-empty
-      } catch (_a) {}
+      } catch (_unused) {}
     };
   }, [currenttheme]);
-  var isOnline = useConnectionStatus(sdkStore.sdk, logger);
-  var markAsReadScheduler = useMarkAsReadScheduler({
+  const isOnline = useConnectionStatus(sdkStore.sdk, logger);
+  const markAsReadScheduler = useMarkAsReadScheduler({
     isConnected: isOnline
   }, {
-    logger: logger
+    logger
   });
-  var localeStringSet = React__default["default"].useMemo(function () {
+  const localeStringSet = React__default["default"].useMemo(() => {
     if (!stringSet$1) {
       return stringSet.getStringSet('en');
     }
-    return tslib_es6.__assign(tslib_es6.__assign({}, stringSet.getStringSet('en')), stringSet$1);
+    return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, stringSet.getStringSet('en')), stringSet$1);
   }, [stringSet$1]);
   return /*#__PURE__*/React__default["default"].createElement(withSendbird.SendbirdSdkContext.Provider, {
     value: {
       stores: {
-        sdkStore: sdkStore,
-        userStore: userStore
+        sdkStore,
+        userStore
       },
       dispatchers: {
-        sdkDispatcher: sdkDispatcher,
-        userDispatcher: userDispatcher,
-        reconnect: function () {
-          handleConnection({
-            userId: userId,
-            appId: appId,
-            accessToken: accessToken,
-            sdkStore: sdkStore,
-            nickname: nickname,
-            profileUrl: profileUrl,
-            logger: logger,
-            sdk: sdkStore.sdk
-          }, {
-            sdkDispatcher: sdkDispatcher,
-            userDispatcher: userDispatcher
-          });
-        }
+        sdkDispatcher,
+        userDispatcher,
+        reconnect
       },
       config: {
-        disableUserProfile: disableUserProfile,
-        disableMarkAsDelivered: disableMarkAsDelivered,
-        renderUserProfile: renderUserProfile,
-        onUserProfileMessage: onUserProfileMessage,
-        allowProfileEdit: allowProfileEdit,
-        isOnline: isOnline,
-        userId: userId,
-        appId: appId,
-        accessToken: accessToken,
+        disableUserProfile,
+        disableMarkAsDelivered,
+        renderUserProfile,
+        onUserProfileMessage,
+        allowProfileEdit,
+        isOnline,
+        userId,
+        appId,
+        accessToken,
         theme: currenttheme,
-        setCurrenttheme: setCurrenttheme,
-        userListQuery: userListQuery,
-        logger: logger,
-        pubSub: pubSub,
-        imageCompression: tslib_es6.__assign({
+        setCurrenttheme,
+        userListQuery,
+        logger,
+        pubSub,
+        imageCompression: _rollupPluginBabelHelpers._objectSpread2({
           compressionRate: 0.7
         }, imageCompression),
-        isReactionEnabled: isReactionEnabled,
+        isReactionEnabled,
         isMentionEnabled: isMentionEnabled || false,
-        isVoiceMessageEnabled: isVoiceMessageEnabled,
-        voiceRecord: voiceRecord,
+        isVoiceMessageEnabled,
+        voiceRecord,
         userMention: {
           maxMentionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || 10,
           maxSuggestionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15
         },
-        isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList,
-        isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList,
-        replyType: replyType,
-        markAsReadScheduler: markAsReadScheduler
+        isTypingIndicatorEnabledOnChannelList,
+        isMessageReceiptStatusEnabledOnChannelList,
+        replyType,
+        markAsReadScheduler
       }
     }
   }, /*#__PURE__*/React__default["default"].createElement(MediaQueryContext.MediaQueryProvider, {