@sendbird/uikit-react 3.5.0-rc.1 → 3.5.1

package/SendbirdProvider.js

@@ -1,182 +1,50 @@
-import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-519f674b.js';
-import React__default, { useLayoutEffect, useState, useEffect, useReducer } from 'react';
-import PropTypes from 'prop-types';
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-1be219c2.js';
+import React__default, { useLayoutEffect, useState, useEffect, useCallback, useMemo, useReducer } from 'react';
 import { SendbirdSdkContext } from './withSendbird.js';
+import cssVars from 'css-vars-ponyfill';
+import { K } from './index.module-1ba8586e.js';
+import { U as USER_ACTIONS } from './actionTypes-a8140d53.js';
 import SendbirdChat, { ConnectionHandler } from '@sendbird/chat';
+import { u as uuidv4 } from './uuid-8c96bee0.js';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
-import { R as RESET_USER, I as INIT_USER, U as UPDATE_USER_INFO } from './actionTypes-9f87e87f.js';
-import { i as isTextuallyNull } from './index-855ef33d.js';
-import { _ as __assign } from './tslib.es6-72df3331.js';
-import cssVars from 'css-vars-ponyfill';
-import { u as uuidv4 } from './uuid-7e004f47.js';
-import { L as LocalizationProvider } from './LocalizationContext-289c1917.js';
-import { M as MediaQueryProvider } from './MediaQueryContext-273d29f6.js';
-import { g as getStringSet } from './stringSet-9ae71b7d.js';
+import { i as isTextuallyNull } from './index-c589f349.js';
+import { UIKitConfigProvider, useUIKitConfig } from '@sendbird/uikit-tools';
+import { V as VoicePlayerProvider } from './index-f4374646.js';
+import { VoiceRecorderProvider } from './VoiceRecorder/context.js';
+import { L as LocalizationProvider } from './LocalizationContext-25d6694d.js';
+import { M as MediaQueryProvider } from './MediaQueryContext-94c9086a.js';
+import { g as getStringSet } from './stringSet-3649b375.js';
+import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-e6fdc559.js';
+import { g as getCaseResolvedReplyType, a as getCaseResolvedThreadReplySelectType } from './resolvedReplyType-94a089b3.js';
 import './utils/message/getOutgoingMessageState.js';
-import './index-4ebfc7a7.js';
-
-const INIT_SDK = 'INIT_SDK';
-const SET_SDK_LOADING = 'SET_SDK_LOADING';
-const RESET_SDK = 'RESET_SDK';
-const SDK_ERROR = 'SDK_ERROR';
-
-const APP_VERSION_STRING = '3.5.0-rc.1';
-const disconnectSdk = _ref => {
-  let {
-    sdkDispatcher,
-    userDispatcher,
-    sdk,
-    onDisconnect
-  } = _ref;
-  sdkDispatcher({
-    type: SET_SDK_LOADING,
-    payload: true
-  });
-
-  if (sdk && sdk.disconnect) {
-    sdk.disconnect().then(() => {
-      sdkDispatcher({
-        type: RESET_SDK
-      });
-      userDispatcher({
-        type: RESET_USER
-      });
-    }).finally(() => {
-      onDisconnect();
-    });
-  } else {
-    onDisconnect();
-  }
-};
-const handleConnection = (_ref2, dispatchers) => {
-  let {
-    userId,
-    appId,
-    nickname,
-    profileUrl,
-    accessToken,
-    configureSession,
-    customApiHost,
-    customWebSocketHost,
-    sdk,
-    logger
-  } = _ref2;
-  const {
-    sdkDispatcher,
-    userDispatcher
-  } = dispatchers;
-  disconnectSdk({
-    sdkDispatcher,
-    userDispatcher,
-    sdk,
-    logger,
-    onDisconnect: () => {
-      logger.info('Setup connection');
-      let sessionHandler = null;
-      sdkDispatcher({
-        type: SET_SDK_LOADING,
-        payload: true
-      });
-
-      if (userId && appId) {
-        const params = {
-          appId,
-          modules: [new GroupChannelModule(), new OpenChannelModule()]
-        };
-
-        if (customApiHost) {
-          params.customApiHost = customApiHost;
-        }
-
-        if (customWebSocketHost) {
-          params.customWebSocketHost = customWebSocketHost;
-        }
-
-        const newSdk = SendbirdChat.init(params);
-
-        if (configureSession && typeof configureSession === 'function') {
-          sessionHandler = configureSession(newSdk);
-          newSdk.setSessionHandler(sessionHandler);
-        } // to check if code is released version from rollup and *not from storybook*
-        // see rollup config file
-
-
-        {
-          newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
-        }
-
-        const connectCbSucess = user => {
-          sdkDispatcher({
-            type: INIT_SDK,
-            payload: newSdk
-          });
-          userDispatcher({
-            type: INIT_USER,
-            payload: user
-          }); // use nickname/profileUrl if provided
-          // or set userID as nickname
-
-          if ((nickname !== user.nickname || profileUrl !== user.profileUrl) && !(isTextuallyNull(nickname) && isTextuallyNull(profileUrl))) {
-            newSdk.updateCurrentUserInfo({
-              nickname: nickname || user.nickname,
-              profileUrl: profileUrl || user.profileUrl
-            }).then(namedUser => {
-              userDispatcher({
-                type: UPDATE_USER_INFO,
-                payload: namedUser
-              });
-            });
-          }
-        };
-
-        const connectCbError = e => {
-          logger.error('Connection failed', `${e}`);
-          sdkDispatcher({
-            type: RESET_SDK
-          });
-          sdkDispatcher({
-            type: RESET_USER
-          });
-          sdkDispatcher({
-            type: SDK_ERROR
-          });
-        };
-
-        if (accessToken) {
-          newSdk.connect(userId, accessToken).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
-        } else {
-          newSdk.connect(userId).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
-        }
-      } else {
-        sdkDispatcher({
-          type: SDK_ERROR
-        });
-        logger.warning('Connection failed', 'UserId or appId missing');
-      }
-    }
-  });
-};
-
-var isEmpty = function (obj) {
+import './useSendbirdStateContext.js';
+import './ui/Modal.js';
+import 'react-dom';
+import './index-5819e39d.js';
+import './ui/Button.js';
+import './index-d88e3ef9.js';
+import 'prop-types';
+import './ui/Icon.js';
+import './ui/IconButton.js';
+import './index-a4552c13.js';
+
+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) {
-  useLayoutEffect(function () {
+const useTheme = overrides => {
+  useLayoutEffect(() => {
     if (!isEmpty(overrides)) {
       cssVars({
-        variables: __assign({
+        variables: _objectSpread2(_objectSpread2({}, {
           '--sendbird-dark-primary-500': '#4d2aa6',
           '--sendbird-dark-primary-400': '#6440C4',
           '--sendbird-dark-primary-300': '#7B53EF',
@@ -253,13 +121,20 @@ var useTheme = function (overrides) {
           '--sendbird-light-shadow-03': '0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12)',
           '--sendbird-light-shadow-04': '0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12)',
           '--sendbird-light-shadow-message-input': '0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)'
-        }, overrides)
+        }), overrides)
       });
     }
   }, [overrides]);
 };
 
-var sdkInitialState = {
+const SDK_ACTIONS = {
+  INIT_SDK: 'INIT_SDK',
+  SET_SDK_LOADING: 'SET_SDK_LOADING',
+  RESET_SDK: 'RESET_SDK',
+  SDK_ERROR: 'SDK_ERROR'
+};
+
+const initialState$1 = {
   initialized: false,
   loading: false,
   sdk: {},
@@ -267,112 +142,124 @@ var sdkInitialState = {
 };
 
 function reducer$1(state, action) {
-  switch (action.type) {
-    case SET_SDK_LOADING:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        initialized: false,
-        loading: action.payload
-      });
-
-    case SDK_ERROR:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        initialized: false,
-        loading: false,
-        error: true
-      });
-
-    case INIT_SDK:
-      return {
-        sdk: action.payload,
-        initialized: true,
-        loading: false,
-        error: false
-      };
-
-    case RESET_SDK:
-      return sdkInitialState;
-
-    default:
-      return state;
-  }
+  return K(action).with({
+    type: SDK_ACTIONS.SET_SDK_LOADING
+  }, _ref => {
+    let {
+      payload
+    } = _ref;
+    return _objectSpread2(_objectSpread2({}, state), {}, {
+      initialized: false,
+      loading: payload
+    });
+  }).with({
+    type: SDK_ACTIONS.SDK_ERROR
+  }, () => {
+    return _objectSpread2(_objectSpread2({}, state), {}, {
+      initialized: false,
+      loading: false,
+      error: true
+    });
+  }).with({
+    type: SDK_ACTIONS.INIT_SDK
+  }, _ref2 => {
+    let {
+      payload
+    } = _ref2;
+    return {
+      sdk: payload,
+      initialized: true,
+      loading: false,
+      error: false
+    };
+  }).with({
+    type: SDK_ACTIONS.RESET_SDK
+  }, () => {
+    return initialState$1;
+  }).otherwise(() => {
+    return state;
+  });
 }
 
-var userInitialState = {
+const initialState = {
   initialized: false,
   loading: false,
   user: {}
 };
 
 function reducer(state, action) {
-  switch (action.type) {
-    case INIT_USER:
-      return {
-        initialized: true,
-        loading: false,
-        user: action.payload
-      };
-
-    case RESET_USER:
-      return userInitialState;
-
-    case UPDATE_USER_INFO:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        user: action.payload
-      });
-
-    default:
-      return state;
-  }
+  return K(action).with({
+    type: USER_ACTIONS.INIT_USER
+  }, _ref => {
+    let {
+      payload
+    } = _ref;
+    return {
+      initialized: true,
+      loading: false,
+      user: payload
+    };
+  }).with({
+    type: USER_ACTIONS.RESET_USER
+  }, () => {
+    return initialState;
+  }).with({
+    type: USER_ACTIONS.UPDATE_USER_INFO
+  }, _ref2 => {
+    let {
+      payload
+    } = _ref2;
+    return _objectSpread2(_objectSpread2({}, state), {}, {
+      user: payload
+    });
+  }).otherwise(() => {
+    return state;
+  });
 }
 
 function useConnectionStatus(sdk, logger) {
   const [isOnline, setIsOnline] = useState(true);
   useEffect(() => {
     const uniqueHandlerId = uuidv4();
-
     try {
       logger.warning('sdk changed', uniqueHandlerId);
       const handler = new ConnectionHandler();
-
       handler.onDisconnected = () => {
         logger.warning('onDisconnected', {
           isOnline
         });
       };
-
       handler.onReconnectStarted = () => {
         setIsOnline(false);
         logger.warning('onReconnectStarted', {
           isOnline
         });
       };
-
       handler.onReconnectSucceeded = () => {
         setIsOnline(true);
         logger.warning('onReconnectSucceeded', {
           isOnline
         });
       };
-
       handler.onReconnectFailed = () => {
         sdk.reconnect();
         logger.warning('onReconnectFailed');
       };
-
-      logger.info('Added ConnectionHandler', uniqueHandlerId); // workaround -> addConnectionHandler invalidates session handler
+      logger.info('Added ConnectionHandler', uniqueHandlerId);
+      // workaround -> addConnectionHandler invalidates session handler
       // provided through configureSession
-
       if (sdk !== null && sdk !== void 0 && sdk.addConnectionHandler) {
         sdk.addConnectionHandler(uniqueHandlerId, handler);
       }
-    } catch (_unused) {//
+    } catch (_unused) {
+      //
     }
-
     return () => {
       try {
         sdk.removeConnectionHandler(uniqueHandlerId);
         logger.info('Removed ConnectionHandler', uniqueHandlerId);
-      } catch (_unused2) {//
+      } catch (_unused2) {
+        //
       }
     };
   }, [sdk]);
@@ -380,44 +267,374 @@ function useConnectionStatus(sdk, logger) {
     const tryReconnect = () => {
       try {
         logger.warning('Try reconnecting SDK');
-
         if (sdk.connectionState !== 'OPEN') {
           // connection is not broken yet
           sdk.reconnect();
         }
-      } catch (_unused3) {//
+      } catch (_unused3) {
+        //
       }
-    }; // addEventListener version
-
-
+    };
+    // addEventListener version
     window.addEventListener('online', tryReconnect);
     return () => {
       window.removeEventListener('online', tryReconnect);
     };
-  }, [sdk]); // add offline-class to body
+  }, [sdk]);
 
+  // add offline-class to body
   useEffect(() => {
     const body = document.querySelector('body');
-
     if (!isOnline) {
       try {
         body.classList.add('sendbird__offline');
         logger.info('Added class sendbird__offline to body');
-      } catch (e) {//
+      } catch (e) {
+        //
       }
     } else {
       try {
         body.classList.remove('sendbird__offline');
         logger.info('Removed class sendbird__offline from body');
-      } catch (e) {//
+      } catch (e) {
+        //
       }
     }
   }, [isOnline]);
   return isOnline;
 }
 
+async function disconnectSdk(_ref) {
+  let {
+    sdkDispatcher,
+    userDispatcher,
+    sdk
+  } = _ref;
+  return new Promise(resolve => {
+    sdkDispatcher({
+      type: SDK_ACTIONS.SET_SDK_LOADING,
+      payload: true
+    });
+    if (sdk !== null && sdk !== void 0 && sdk.disconnect) {
+      sdk.disconnect().then(() => {
+        sdkDispatcher({
+          type: SDK_ACTIONS.RESET_SDK
+        });
+        userDispatcher({
+          type: USER_ACTIONS.RESET_USER
+        });
+      }).finally(() => {
+        resolve(true);
+      });
+    } else {
+      resolve(true);
+    }
+  });
+}
+
+const APP_VERSION_STRING = '3.5.1';
+const {
+  INIT_SDK,
+  SET_SDK_LOADING,
+  RESET_SDK,
+  SDK_ERROR
+} = SDK_ACTIONS;
+const {
+  INIT_USER,
+  UPDATE_USER_INFO,
+  RESET_USER
+} = USER_ACTIONS;
+function getMissingParamError(_ref) {
+  let {
+    userId,
+    appId
+  } = _ref;
+  return `SendbirdProvider | useConnect/setupConnection/Connection failed UserId: ${userId} or appId: ${appId} missing`;
+}
+function getConnectSbError(error) {
+  return `SendbirdProvider | useConnect/setupConnection/Connection failed. ${(error === null || error === void 0 ? void 0 : error.code) || ''} ${(error === null || error === void 0 ? void 0 : error.message) || ''}`;
+}
+function setUpParams(_ref2) {
+  let {
+    appId,
+    customApiHost,
+    customWebSocketHost
+  } = _ref2;
+  const params = {
+    appId,
+    modules: [new GroupChannelModule(), new OpenChannelModule()]
+  };
+  if (customApiHost) {
+    params['customApiHost'] = customApiHost;
+  }
+  if (customWebSocketHost) {
+    params['customWebSocketHost'] = customWebSocketHost;
+  }
+  const newSdk = SendbirdChat.init(params);
+  return newSdk;
+}
+
+// Steps
+// 1. Check if minimum userID/appID is provided
+//  1.a. If not, throw error > !reject
+//  1.b. If yes, continue
+// 2. Set up params with custom host if provided
+// 3. Set up session handler if provided
+// 4. Set up version
+// 5. Connect to Sendbird -> either using user ID or (user ID + access token)
+// 6. If connected, connectCbSucess
+//  6.a check if nickname is to be updated -> no > !resolve immediately
+//  6.b check if nickname is to be updated -> yes > update nickname > !resolve
+// 7. If not connected, connectCbError > !reject
+async function setUpConnection(_ref3) {
+  let {
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs,
+    userId,
+    appId,
+    customApiHost,
+    customWebSocketHost,
+    configureSession,
+    nickname,
+    profileUrl,
+    accessToken
+  } = _ref3;
+  return new Promise((resolve, reject) => {
+    var _logger$info;
+    logger === null || logger === void 0 ? void 0 : (_logger$info = logger.info) === null || _logger$info === void 0 ? void 0 : _logger$info.call(logger, 'SendbirdProvider | useConnect/setupConnection/init', {
+      userId,
+      appId
+    });
+    sdkDispatcher({
+      type: SET_SDK_LOADING,
+      payload: true
+    });
+    if (userId && appId) {
+      var _logger$info3, _logger$info8;
+      const newSdk = setUpParams({
+        appId,
+        customApiHost,
+        customWebSocketHost
+      });
+      if (configureSession && typeof configureSession === 'function') {
+        var _logger$info2;
+        const sessionHandler = configureSession(newSdk);
+        logger === null || logger === void 0 ? void 0 : (_logger$info2 = logger.info) === null || _logger$info2 === void 0 ? void 0 : _logger$info2.call(logger, 'SendbirdProvider | useConnect/setupConnection/configureSession', sessionHandler);
+        newSdk.setSessionHandler(sessionHandler);
+      }
+      logger === null || logger === void 0 ? void 0 : (_logger$info3 = logger.info) === null || _logger$info3 === void 0 ? void 0 : _logger$info3.call(logger, 'SendbirdProvider | useConnect/setupConnection/setVersion', {
+        version: APP_VERSION_STRING
+      });
+      newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
+      const connectCbSucess = async user => {
+        var _logger$info4;
+        logger === null || logger === void 0 ? void 0 : (_logger$info4 = logger.info) === null || _logger$info4 === void 0 ? void 0 : _logger$info4.call(logger, 'SendbirdProvider | useConnect/setupConnection/connectCbSucess', user);
+        sdkDispatcher({
+          type: INIT_SDK,
+          payload: newSdk
+        });
+        userDispatcher({
+          type: INIT_USER,
+          payload: user
+        });
+        initDashboardConfigs(newSdk).then(config => {
+          var _logger$info5;
+          logger === null || logger === void 0 ? void 0 : (_logger$info5 = logger.info) === null || _logger$info5 === void 0 ? void 0 : _logger$info5.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration success', {
+            config
+          });
+        }).catch(error => {
+          var _logger$error;
+          logger === null || logger === void 0 ? void 0 : (_logger$error = logger.error) === null || _logger$error === void 0 ? void 0 : _logger$error.call(logger, 'SendbirdProvider | useConnect/setupConnection/getUIKitConfiguration failed', {
+            error
+          });
+        });
+
+        // use nickname/profileUrl if provided
+        // or set userID as nickname
+        if ((nickname !== user.nickname || profileUrl !== user.profileUrl) && !(isTextuallyNull(nickname) && isTextuallyNull(profileUrl))) {
+          var _logger$info6;
+          logger === null || logger === void 0 ? void 0 : (_logger$info6 = logger.info) === null || _logger$info6 === void 0 ? void 0 : _logger$info6.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo', {
+            nickname,
+            profileUrl
+          });
+          newSdk.updateCurrentUserInfo({
+            nickname: nickname || user.nickname,
+            profileUrl: profileUrl || user.profileUrl
+          }).then(namedUser => {
+            var _logger$info7;
+            logger === null || logger === void 0 ? void 0 : (_logger$info7 = logger.info) === null || _logger$info7 === void 0 ? void 0 : _logger$info7.call(logger, 'SendbirdProvider | useConnect/setupConnection/updateCurrentUserInfo success', {
+              nickname,
+              profileUrl
+            });
+            userDispatcher({
+              type: UPDATE_USER_INFO,
+              payload: namedUser
+            });
+          }).finally(() => {
+            resolve();
+          });
+        } else {
+          resolve();
+        }
+      };
+      const connectCbError = e => {
+        var _logger$error2;
+        const errorMessage = getConnectSbError(e);
+        logger === null || logger === void 0 ? void 0 : (_logger$error2 = logger.error) === null || _logger$error2 === void 0 ? void 0 : _logger$error2.call(logger, errorMessage, {
+          e,
+          appId,
+          userId
+        });
+        sdkDispatcher({
+          type: RESET_SDK
+        });
+        userDispatcher({
+          type: RESET_USER
+        });
+        sdkDispatcher({
+          type: SDK_ERROR
+        });
+        // exit promise with error
+        reject(errorMessage);
+      };
+      logger === null || logger === void 0 ? void 0 : (_logger$info8 = logger.info) === null || _logger$info8 === void 0 ? void 0 : _logger$info8.call(logger, `SendbirdProvider | useConnect/setupConnection/connect connecting using ${accessToken !== null && accessToken !== void 0 ? accessToken : userId}`);
+      newSdk.connect(userId, accessToken).then(res => connectCbSucess(res)).catch(err => connectCbError(err));
+    } else {
+      var _logger$error3;
+      const errorMessage = getMissingParamError({
+        userId,
+        appId
+      });
+      sdkDispatcher({
+        type: SDK_ERROR
+      });
+      logger === null || logger === void 0 ? void 0 : (_logger$error3 = logger.error) === null || _logger$error3 === void 0 ? void 0 : _logger$error3.call(logger, errorMessage);
+      // exit promise with error
+      reject(errorMessage);
+    }
+  });
+}
+
+async function connect(_ref) {
+  let {
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs,
+    userId,
+    appId,
+    customApiHost,
+    customWebSocketHost,
+    configureSession,
+    nickname,
+    profileUrl,
+    accessToken,
+    sdk
+  } = _ref;
+  await disconnectSdk({
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    sdk
+  });
+  await setUpConnection({
+    logger,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs,
+    userId,
+    appId,
+    customApiHost,
+    customWebSocketHost,
+    configureSession,
+    nickname,
+    profileUrl,
+    accessToken
+  });
+}
+
+function useConnect(triggerTypes, staticTypes) {
+  var _logger$info;
+  const {
+    userId,
+    appId,
+    accessToken
+  } = triggerTypes;
+  const {
+    logger,
+    nickname,
+    profileUrl,
+    configureSession,
+    customApiHost,
+    customWebSocketHost,
+    sdk,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs
+  } = staticTypes;
+  logger === null || logger === void 0 ? void 0 : (_logger$info = logger.info) === null || _logger$info === void 0 ? void 0 : _logger$info.call(logger, 'SendbirdProvider | useConnect', _objectSpread2(_objectSpread2({}, triggerTypes), staticTypes));
+  useEffect(() => {
+    var _logger$info2;
+    logger === null || logger === void 0 ? void 0 : (_logger$info2 = logger.info) === null || _logger$info2 === void 0 ? void 0 : _logger$info2.call(logger, 'SendbirdProvider | useConnect/useEffect', {
+      userId,
+      appId,
+      accessToken
+    });
+    try {
+      connect({
+        userId,
+        appId,
+        accessToken,
+        logger,
+        nickname,
+        profileUrl,
+        configureSession,
+        customApiHost,
+        customWebSocketHost,
+        sdk,
+        sdkDispatcher,
+        userDispatcher,
+        initDashboardConfigs
+      });
+    } catch (error) {
+      var _logger$error;
+      logger === null || logger === void 0 ? void 0 : (_logger$error = logger.error) === null || _logger$error === void 0 ? void 0 : _logger$error.call(logger, 'SendbirdProvider | useConnect/useEffect', error);
+    }
+  }, [userId, appId, accessToken]);
+  const reconnect = useCallback(() => {
+    var _logger$info3;
+    logger === null || logger === void 0 ? void 0 : (_logger$info3 = logger.info) === null || _logger$info3 === void 0 ? void 0 : _logger$info3.call(logger, 'SendbirdProvider | useConnect/reconnect/useCallback', {
+      sdk
+    });
+    try {
+      connect({
+        userId,
+        appId,
+        accessToken,
+        logger,
+        nickname,
+        profileUrl,
+        configureSession,
+        customApiHost,
+        customWebSocketHost,
+        sdk,
+        sdkDispatcher,
+        userDispatcher,
+        initDashboardConfigs
+      });
+    } catch (error) {
+      var _logger$error2;
+      logger === null || logger === void 0 ? void 0 : (_logger$error2 = logger.error) === null || _logger$error2 === void 0 ? void 0 : _logger$error2.call(logger, 'SendbirdProvider | useConnect/reconnect/useCallback', error);
+    }
+  }, [sdk]);
+  return reconnect;
+}
+
 // Logger, pretty much explains it
 // in SendbirdProvider
+
 // const [logger, setLogger] = useState(LoggerFactory(logLevel));
 const LOG_LEVELS = {
   DEBUG: 'debug',
@@ -426,20 +643,16 @@ const LOG_LEVELS = {
   INFO: 'info',
   ALL: 'all'
 };
-
 const colorLog = level => {
   switch (level) {
     case LOG_LEVELS.WARNING:
       return 'color: Orange';
-
     case LOG_LEVELS.ERROR:
       return 'color: Red';
-
     default:
       return 'color: Gray';
   }
 };
-
 const printLog = _ref => {
   let {
     level,
@@ -449,21 +662,20 @@ const printLog = _ref => {
   // eslint-disable-next-line no-console
   console.log(`%c SendbirdUIKit | ${level} | ${new Date().toISOString()} | ${title} ${description && '|'}`, colorLog(level), description);
 };
+const noop = () => {/* noop */};
 const getDefaultLogger = () => ({
-  info: () => {},
-  error: () => {},
-  warning: () => {}
+  info: noop,
+  error: noop,
+  warning: noop
 });
 const LoggerFactory = (lvl, customInterface) => {
   const logInterface = customInterface || printLog;
   const lvlArray = Array.isArray(lvl) ? lvl : [lvl];
-
   const applyLog = lgLvl => (title, description) => logInterface({
     level: lgLvl,
     title,
     description
   });
-
   const logger = lvlArray.reduce((accumulator, currentLvl) => {
     if (currentLvl === LOG_LEVELS.DEBUG || currentLvl === LOG_LEVELS.ALL) {
       return _objectSpread2(_objectSpread2({}, accumulator), {}, {
@@ -472,36 +684,35 @@ const LoggerFactory = (lvl, customInterface) => {
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
-
     if (currentLvl === LOG_LEVELS.INFO) {
       return _objectSpread2(_objectSpread2({}, accumulator), {}, {
         info: applyLog(LOG_LEVELS.INFO)
       });
     }
-
     if (currentLvl === LOG_LEVELS.ERROR) {
       return _objectSpread2(_objectSpread2({}, accumulator), {}, {
         error: applyLog(LOG_LEVELS.ERROR)
       });
     }
-
     if (currentLvl === LOG_LEVELS.WARNING) {
       return _objectSpread2(_objectSpread2({}, accumulator), {}, {
         warning: applyLog(LOG_LEVELS.WARNING)
       });
     }
-
     return _objectSpread2({}, accumulator);
   }, getDefaultLogger());
   return logger;
 };
 
+// TODO: Make this to hook, useLogger
+
 // https://davidwalsh.name/pubsub-javascript
 // we use pubsub to sync events between multiple components(example - ChannelList, Channel)
 // for example, if customer sends a message from their custom component
 // without pubsub,we would not be able to listen to it
 // in our ChannelList or Conversation
-var pubSubFactory = (() => {
+
+const pubSubFactory = () => {
   const topics = {};
   const hOP = topics.hasOwnProperty;
   return {
@@ -510,11 +721,12 @@ var pubSubFactory = (() => {
       // Create the topic's object if not yet created
       if (!hOP.call(topics, topic)) {
         topics[topic] = [];
-      } // Add the listener to queue
-
+      }
 
-      const index = topics[topic].push(listener) - 1; // Provide handle back for removal of topic
+      // Add the listener to queue
+      const index = topics[topic].push(listener) - 1;
 
+      // Provide handle back for removal of topic
       return {
         remove: () => {
           delete topics[topic][index];
@@ -525,16 +737,17 @@ var pubSubFactory = (() => {
       // If the topic doesn't exist, or there's no listeners in queue, just leave
       if (!hOP.call(topics, topic)) {
         return;
-      } // Cycle through topics queue, fire!
-
+      }
 
+      // Cycle through topics queue, fire!
       topics[topic].forEach(item => {
         item(info !== undefined ? info : {});
       });
     }
   };
-});
+};
 
+/* eslint-disable default-param-last */
 function useAppendDomNode() {
   let ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let rootSelector = arguments.length > 1 ? arguments[1] : undefined;
@@ -548,7 +761,6 @@ function useAppendDomNode() {
     return () => {
       ids.forEach(id => {
         const target = document.getElementById(id);
-
         if (target) {
           root.removeChild(target);
         }
@@ -557,76 +769,263 @@ function useAppendDomNode() {
   }, []);
 }
 
+const VoiceMessageProvider = _ref => {
+  let {
+    children,
+    isVoiceMessageEnabled = true
+  } = _ref;
+  if (!isVoiceMessageEnabled) {
+    return /*#__PURE__*/React__default.createElement(VoicePlayerProvider, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(VoiceRecorderProvider, null, /*#__PURE__*/React__default.createElement(VoicePlayerProvider, null, children));
+};
+
+const TIMEOUT = 2000;
+
+/*
+  * This is a factory function that returns a scheduler.
+  * The scheduler is a queue that calls the callback function on intervals.
+  * If interval is empty, the callback function is called immediately.
+  * If interval is not empty, the callback function is called after the interval.
+*/
+function schedulerFactory(_ref) {
+  let {
+    logger,
+    timeout,
+    cb
+  } = _ref;
+  let queue = [];
+  let interval = null;
+  const push = channel => {
+    const channelPresent = queue.find(c => c.url === channel.url);
+    if (!channelPresent) {
+      queue.push(channel);
+    } else {
+      logger.info('Channel: Mark as read already in queue', {
+        channel
+      });
+    }
+    // start the interval if it's not already running
+    if (interval) {
+      return;
+    }
+    const item = queue.shift();
+    if (item) {
+      cb(item);
+    }
+    interval = setInterval(() => {
+      if (queue.length === 0 && interval) {
+        clearInterval(interval);
+        interval = null;
+        return;
+      }
+      const item = queue.shift();
+      if (item) {
+        cb(item);
+      }
+    }, timeout || TIMEOUT);
+  };
+  const clear = () => {
+    queue = [];
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+  };
+  return {
+    push,
+    clear,
+    getQueue: () => queue
+  };
+}
+
+// this hook accepts a callback to run component is unmounted
+function useUnmount(callback) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  useLayoutEffect(() => {
+    return () => {
+      callback();
+    };
+  }, deps);
+}
+
+function useMarkAsReadScheduler(_ref, _ref2) {
+  let {
+    isConnected
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  const markAsReadScheduler = useMemo(() => schedulerFactory({
+    logger,
+    cb: channel => {
+      try {
+        channel.markAsRead();
+      } catch (error) {
+        logger.warning('Channel: Mark as delivered failed', {
+          channel,
+          error
+        });
+      }
+    }
+  }), []);
+  useEffect(() => {
+    // for simplicity, we clear the queue when the connection is lost
+    if (!isConnected) {
+      markAsReadScheduler.clear();
+    }
+  }, [isConnected]);
+  useUnmount(() => {
+    markAsReadScheduler.clear();
+  });
+  return markAsReadScheduler;
+}
+
+function useMarkAsDeliveredScheduler(_ref, _ref2) {
+  let {
+    isConnected
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  const markAsDeliveredScheduler = useMemo(() => schedulerFactory({
+    logger,
+    cb: channel => {
+      try {
+        channel.markAsDelivered();
+      } catch (error) {
+        logger.warning('Channel: Mark as delivered failed', {
+          channel,
+          error
+        });
+      }
+    }
+  }), []);
+  useEffect(() => {
+    // for simplicity, we clear the queue when the connection is lost
+    if (!isConnected) {
+      markAsDeliveredScheduler.clear();
+    }
+  }, [isConnected]);
+  useUnmount(() => {
+    markAsDeliveredScheduler.clear();
+  });
+  return markAsDeliveredScheduler;
+}
+
 function Sendbird(props) {
   const {
-    userId,
-    dateLocale,
-    appId,
-    accessToken,
-    configureSession,
-    // mediaQueryBreakPoint,
-    customApiHost,
-    customWebSocketHost,
-    children,
-    disableUserProfile,
-    disableMarkAsDelivered,
-    renderUserProfile,
-    onUserProfileMessage,
-    allowProfileEdit,
-    theme,
-    nickname,
-    profileUrl,
-    userListQuery,
-    config = {},
-    colorSet,
-    stringSet,
-    imageCompression,
-    isReactionEnabled,
+    replyType,
     isMentionEnabled,
+    isReactionEnabled,
+    disableUserProfile,
+    isVoiceMessageEnabled,
     isTypingIndicatorEnabledOnChannelList,
     isMessageReceiptStatusEnabledOnChannelList,
-    replyType
+    showSearchIcon
   } = props;
-  const mediaQueryBreakPoint = false;
+  return /*#__PURE__*/React__default.createElement(UIKitConfigProvider, {
+    localConfigs: {
+      common: {
+        enableUsingDefaultUserProfile: typeof disableUserProfile === 'boolean' ? !disableUserProfile : undefined
+      },
+      groupChannel: {
+        channel: {
+          enableReactions: isReactionEnabled,
+          enableMention: isMentionEnabled,
+          enableVoiceMessage: isVoiceMessageEnabled,
+          replyType: replyType != null ? getCaseResolvedReplyType(replyType).lowerCase : undefined
+        },
+        channelList: {
+          enableTypingIndicator: isTypingIndicatorEnabledOnChannelList,
+          enableMessageReceiptStatus: isMessageReceiptStatusEnabledOnChannelList
+        },
+        setting: {
+          enableMessageSearch: showSearchIcon
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(SendbirdSDK, props));
+}
+const SendbirdSDK = _ref => {
+  let {
+    appId,
+    userId,
+    children,
+    accessToken = '',
+    customApiHost = '',
+    customWebSocketHost = '',
+    configureSession = null,
+    theme = 'light',
+    config = {},
+    nickname = '',
+    colorSet = null,
+    stringSet = null,
+    dateLocale = null,
+    profileUrl = '',
+    voiceRecord = {
+      maxRecordingTime: VOICE_RECORDER_DEFAULT_MAX,
+      minRecordingTime: VOICE_RECORDER_DEFAULT_MIN
+    },
+    userListQuery = null,
+    imageCompression = {},
+    allowProfileEdit = false,
+    disableMarkAsDelivered = false,
+    renderUserProfile = null,
+    onUserProfileMessage = null,
+    breakpoint = false
+  } = _ref;
   const {
     logLevel = '',
     userMention = {},
     isREMUnitEnabled = false
   } = config;
   const [logger, setLogger] = useState(LoggerFactory(logLevel));
-  const [pubSub, setPubSub] = useState();
-  const [sdkStore, sdkDispatcher] = useReducer(reducer$1, sdkInitialState);
-  const [userStore, userDispatcher] = useReducer(reducer, userInitialState);
+  const [pubSub] = useState(pubSubFactory());
+  const [sdkStore, sdkDispatcher] = useReducer(reducer$1, initialState$1);
+  const [userStore, userDispatcher] = useReducer(reducer, initialState);
+  const {
+    configs,
+    configsWithAppAttr,
+    initDashboardConfigs
+  } = useUIKitConfig();
+  const sdkInitialized = sdkStore.initialized;
+  const sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
   useTheme(colorSet);
-  useEffect(() => {
-    setPubSub(pubSubFactory());
-  }, []);
-  useEffect(() => {
-    logger.info('App Init'); // dispatch action
-
-    handleConnection({
-      userId,
-      appId,
-      accessToken,
-      sdkStore,
-      nickname,
-      profileUrl,
-      configureSession,
-      customApiHost,
-      customWebSocketHost,
-      sdk: sdkStore.sdk,
-      logger
-    }, {
-      sdkDispatcher,
-      userDispatcher
-    });
-  }, [userId, appId, accessToken]); // to create a pubsub to communicate between parent and child
+  const reconnect = useConnect({
+    appId,
+    userId,
+    accessToken
+  }, {
+    logger,
+    nickname,
+    profileUrl,
+    configureSession,
+    customApiHost,
+    customWebSocketHost,
+    sdk,
+    sdkDispatcher,
+    userDispatcher,
+    initDashboardConfigs
+  });
+  useUnmount(() => {
+    if (typeof sdk.disconnect === 'function') {
+      disconnectSdk({
+        logger,
+        sdkDispatcher,
+        userDispatcher,
+        sdk
+      });
+    }
+  }, [sdk.disconnect]);
 
+  // to create a pubsub to communicate between parent and child
   useEffect(() => {
     setLogger(LoggerFactory(logLevel));
   }, [logLevel]);
-  useAppendDomNode(['sendbird-modal-root', 'sendbird-dropdown-portal', 'sendbird-emoji-list-portal'], 'body'); // should move to reducer
+  useAppendDomNode(['sendbird-modal-root', 'sendbird-dropdown-portal', 'sendbird-emoji-list-portal'], 'body');
 
+  // should move to reducer
   const [currenttheme, setCurrenttheme] = useState(theme);
   useEffect(() => {
     setCurrenttheme(theme);
@@ -634,39 +1033,47 @@ function Sendbird(props) {
   useEffect(() => {
     const body = document.querySelector('body');
     body.classList.remove('sendbird-experimental__rem__units');
-
     if (isREMUnitEnabled) {
       body.classList.add('sendbird-experimental__rem__units');
     }
-  }, [isREMUnitEnabled]); // add-remove theme from body
-
+  }, [isREMUnitEnabled]);
+  // add-remove theme from body
   useEffect(() => {
     logger.info('Setup theme', `Theme: ${currenttheme}`);
-
     try {
       const body = document.querySelector('body');
       body.classList.remove('sendbird-theme--light');
       body.classList.remove('sendbird-theme--dark');
       body.classList.add(`sendbird-theme--${currenttheme || 'light'}`);
-      logger.info('Finish setup theme'); // eslint-disable-next-line no-empty
+      logger.info('Finish setup theme');
+      // eslint-disable-next-line no-empty
     } catch (e) {
       logger.warning('Setup theme failed', `${e}`);
     }
-
     return () => {
       try {
         const body = document.querySelector('body');
         body.classList.remove('sendbird-theme--light');
-        body.classList.remove('sendbird-theme--dark'); // eslint-disable-next-line no-empty
+        body.classList.remove('sendbird-theme--dark');
+        // eslint-disable-next-line no-empty
       } catch (_unused) {}
     };
   }, [currenttheme]);
   const isOnline = useConnectionStatus(sdkStore.sdk, logger);
+  const markAsReadScheduler = useMarkAsReadScheduler({
+    isConnected: isOnline
+  }, {
+    logger
+  });
+  const markAsDeliveredScheduler = useMarkAsDeliveredScheduler({
+    isConnected: isOnline
+  }, {
+    logger
+  });
   const localeStringSet = React__default.useMemo(() => {
     if (!stringSet) {
       return getStringSet('en');
     }
-
     return _objectSpread2(_objectSpread2({}, getStringSet('en')), stringSet);
   }, [stringSet]);
   return /*#__PURE__*/React__default.createElement(SendbirdSdkContext.Provider, {
@@ -678,24 +1085,9 @@ function Sendbird(props) {
       dispatchers: {
         sdkDispatcher,
         userDispatcher,
-        reconnect: () => {
-          handleConnection({
-            userId,
-            appId,
-            accessToken,
-            sdkStore,
-            nickname,
-            profileUrl,
-            logger,
-            sdk: sdkStore.sdk
-          }, {
-            sdkDispatcher,
-            userDispatcher
-          });
-        }
+        reconnect
       },
       config: {
-        disableUserProfile,
         disableMarkAsDelivered,
         renderUserProfile,
         onUserProfileMessage,
@@ -712,95 +1104,44 @@ function Sendbird(props) {
         imageCompression: _objectSpread2({
           compressionRate: 0.7
         }, imageCompression),
-        isReactionEnabled,
-        isMentionEnabled: isMentionEnabled || false,
+        voiceRecord,
         userMention: {
           maxMentionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || 10,
           maxSuggestionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15
         },
-        isTypingIndicatorEnabledOnChannelList,
-        isMessageReceiptStatusEnabledOnChannelList,
-        replyType
+        markAsReadScheduler,
+        markAsDeliveredScheduler,
+        // From UIKitConfigProvider.localConfigs
+        disableUserProfile: !configs.common.enableUsingDefaultUserProfile,
+        isReactionEnabled: sdkInitialized && configsWithAppAttr(sdk).groupChannel.channel.enableReactions,
+        isMentionEnabled: configs.groupChannel.channel.enableMention,
+        isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage,
+        replyType: getCaseResolvedReplyType(configs.groupChannel.channel.replyType).upperCase,
+        isTypingIndicatorEnabledOnChannelList: configs.groupChannel.channelList.enableTypingIndicator,
+        isMessageReceiptStatusEnabledOnChannelList: configs.groupChannel.channelList.enableMessageReceiptStatus,
+        showSearchIcon: sdkInitialized && configsWithAppAttr(sdk).groupChannel.setting.enableMessageSearch,
+        // Remote configs set from dashboard by UIKit feature configuration
+        groupChannel: {
+          enableOgtag: sdkInitialized && configsWithAppAttr(sdk).groupChannel.channel.enableOgtag,
+          enableTypingIndicator: configs.groupChannel.channel.enableTypingIndicator,
+          enableDocument: configs.groupChannel.channel.input.enableDocument,
+          threadReplySelectType: getCaseResolvedThreadReplySelectType(configs.groupChannel.channel.threadReplySelectType).upperCase
+        },
+        openChannel: {
+          enableOgtag: sdkInitialized && configsWithAppAttr(sdk).openChannel.channel.enableOgtag,
+          enableDocument: configs.openChannel.channel.input.enableDocument
+        }
       }
     }
   }, /*#__PURE__*/React__default.createElement(MediaQueryProvider, {
     logger: logger,
-    mediaQueryBreakPoint: mediaQueryBreakPoint
+    breakpoint: breakpoint
   }, /*#__PURE__*/React__default.createElement(LocalizationProvider, {
     stringSet: localeStringSet,
     dateLocale: dateLocale
-  }, children)));
-}
-Sendbird.propTypes = {
-  userId: PropTypes.string.isRequired,
-  appId: PropTypes.string.isRequired,
-  accessToken: PropTypes.string,
-  customApiHost: PropTypes.string,
-  customWebSocketHost: PropTypes.string,
-  // mediaQueryBreakPoint: PropTypes.string,
-  configureSession: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element), PropTypes.any]).isRequired,
-  theme: PropTypes.string,
-  nickname: PropTypes.string,
-  dateLocale: PropTypes.shape({}),
-  profileUrl: PropTypes.string,
-  disableUserProfile: PropTypes.bool,
-  disableMarkAsDelivered: PropTypes.bool,
-  renderUserProfile: PropTypes.func,
-  onUserProfileMessage: PropTypes.func,
-  allowProfileEdit: PropTypes.bool,
-  userListQuery: PropTypes.func,
-  config: PropTypes.shape({
-    // None Error Warning Info 'All/Debug'
-    logLevel: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    pubSub: PropTypes.shape({
-      subscribe: PropTypes.func,
-      publish: PropTypes.func
-    }),
-    userMention: PropTypes.shape({
-      maxMentionCount: PropTypes.number,
-      maxSuggestionCount: PropTypes.number
-    }),
-    isREMUnitEnabled: PropTypes.bool
-  }),
-  stringSet: PropTypes.objectOf(PropTypes.string),
-  colorSet: PropTypes.objectOf(PropTypes.string),
-  isReactionEnabled: PropTypes.bool,
-  isMentionEnabled: PropTypes.bool,
-  imageCompression: PropTypes.shape({
-    compressionRate: PropTypes.number,
-    resizingWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    resizingHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  }),
-  isTypingIndicatorEnabledOnChannelList: PropTypes.bool,
-  isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
-  replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD'])
-};
-Sendbird.defaultProps = {
-  accessToken: '',
-  customApiHost: null,
-  customWebSocketHost: null,
-  configureSession: null,
-  theme: 'light',
-  // mediaQueryBreakPoint: null,
-  nickname: '',
-  dateLocale: null,
-  profileUrl: '',
-  disableUserProfile: false,
-  disableMarkAsDelivered: false,
-  renderUserProfile: null,
-  onUserProfileMessage: null,
-  allowProfileEdit: false,
-  userListQuery: null,
-  config: {},
-  stringSet: null,
-  colorSet: null,
-  imageCompression: {},
-  isReactionEnabled: true,
-  isMentionEnabled: false,
-  isTypingIndicatorEnabledOnChannelList: false,
-  isMessageReceiptStatusEnabledOnChannelList: false,
-  replyType: 'NONE'
+  }, /*#__PURE__*/React__default.createElement(VoiceMessageProvider, {
+    isVoiceMessageEnabled: configs.groupChannel.channel.enableVoiceMessage
+  }, children))));
 };
 
 export { Sendbird as default };