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

package/cjs/App.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var SendbirdProvider = require('./SendbirdProvider.js');
-var MediaQueryContext = require('./MediaQueryContext-4711a81f.js');
+var MediaQueryContext = require('./MediaQueryContext-33fc3b17.js');
 var ChannelList = require('./ChannelList.js');
 var Channel = require('./Channel.js');
 var ChannelSettings = require('./ChannelSettings.js');
@@ -11,40 +11,45 @@ var MessageSearch = require('./MessageSearch.js');
 var Thread = require('./Thread.js');
 var groupChannel = require('@sendbird/chat/groupChannel');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-var uuid = require('./uuid-2475ef6c.js');
-require('./_rollupPluginBabelHelpers-fed1e122.js');
+var uuid = require('./uuid-12b01f73.js');
+var VoicePlayer_context = require('./index-648c06ed.js');
+var consts = require('./consts-5e0f96b3.js');
+require('./_rollupPluginBabelHelpers-c89f311a.js');
 require('./withSendbird.js');
+require('css-vars-ponyfill');
+require('./index.module-0585715f.js');
+require('./actionTypes-0fa2943d.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
-require('./actionTypes-2f90e726.js');
-require('./index-62c1bdfc.js');
-require('./tslib.es6-b8ba50ef.js');
+require('./index-5231fde8.js');
 require('./utils/message/getOutgoingMessageState.js');
-require('css-vars-ponyfill');
-require('./LocalizationContext-bddc5c2b.js');
-require('./stringSet-3e6167ef.js');
-require('./index-d14a43c4.js');
-require('./ChannelListProvider-0de52d2b.js');
-require('./topics-56842e14.js');
-require('./utils-374d57b4.js');
-require('./UserProfileContext-8d0dee57.js');
+require('@sendbird/uikit-tools');
+require('./VoiceRecorder/context.js');
+require('./LocalizationContext-0e429c3d.js');
+require('./stringSet-106da549.js');
+require('./index-016f7106.js');
+require('./ui/Modal.js');
+require('react-dom');
+require('./index-f570d25c.js');
+require('./ui/Button.js');
+require('./index-6cb0d040.js');
+require('./ui/Icon.js');
+require('./ui/IconButton.js');
+require('./resolvedReplyType-67e78c63.js');
+require('./ChannelListProvider-e0ce316a.js');
+require('./topics-b384e6b3.js');
+require('./utils-ad7b5b82.js');
+require('./UserProfileContext-87580795.js');
 require('./ChannelList/components/ChannelListUI.js');
 require('./ChannelList/components/ChannelListHeader.js');
-require('./index-5d5497c2.js');
 require('./ui/Avatar.js');
 require('./ui/ImageRenderer.js');
-require('./ui/Icon.js');
 require('./ChannelList/components/AddChannel.js');
-require('./ui/IconButton.js');
 require('./CreateChannel.js');
 require('./CreateChannel/components/CreateChannelUI.js');
-require('./CreateChannelProvider-a82d20f4.js');
+require('./CreateChannelProvider-c0fca0a5.js');
 require('./sendbirdSelectors.js');
 require('./CreateChannel/components/InviteUsers.js');
-require('./ui/Modal.js');
-require('react-dom');
-require('./index-c5cd589d.js');
-require('./ui/Button.js');
 require('./ui/UserListItem.js');
 require('./ui/MutedAvatarOverlay.js');
 require('./ui/Checkbox.js');
@@ -54,67 +59,82 @@ require('./ui/SortByRow.js');
 require('./CreateChannel/components/SelectChannelType.js');
 require('./ChannelList/components/ChannelPreview.js');
 require('./ui/ChannelAvatar.js');
-require('./utils-9adfd244.js');
+require('./utils-2edcddc8.js');
 require('./ui/Badge.js');
-require('./index-3a4f8219.js');
-require('./index-8de8f28a.js');
+require('./index-7f6bbe0c.js');
+require('./index-869e9a94.js');
 require('./ui/Loader.js');
-require('./index-abbc8024.js');
-require('./index-343cd84a.js');
-require('./index-40e4653a.js');
+require('./index-8affdde5.js');
+require('./index-7d125728.js');
 require('./ui/MentionUserLabel.js');
+require('./consts-1c3020ad.js');
 require('./ui/TextButton.js');
-require('./color-f47044b3.js');
+require('./color-bada0fc7.js');
 require('./Channel/components/TypingIndicator.js');
-require('./ChannelProvider-fc58e60e.js');
-require('./compareIds-4124b297.js');
-require('./const-015e5589.js');
+require('./ChannelProvider-0df75472.js');
+require('./const-a85f3364.js');
+require('./compareIds-ccccfe86.js');
 require('@sendbird/chat/message');
-require('./ui/ReactionButton.js');
-require('./useLongPress-99c66f7f.js');
+require('./useLongPress-8037894e.js');
 require('./ChannelList/components/ChannelPreviewAction.js');
 require('./EditUserProfile.js');
-require('./index-c475c3c8.js');
+require('./index-71fdaa1b.js');
 require('./ui/Input.js');
-require('./index-9ca07037.js');
+require('./index-1613ae03.js');
 require('./Channel/components/ChannelUI.js');
 require('./ui/ConnectionStatus.js');
 require('./Channel/components/ChannelHeader.js');
-require('./utils-f6a96ebf.js');
+require('./utils-5ac3db44.js');
 require('./Channel/components/MessageList.js');
 require('./Channel/components/Message.js');
 require('./Channel/components/SuggestedMentionList.js');
-require('./const-fd64914b.js');
-require('./ThreadProvider-389f5031.js');
+require('./const-d8cece19.js');
+require('./ThreadProvider-8ee179c2.js');
 require('./Thread/context/types.js');
 require('./ui/DateSeparator.js');
 require('./ui/MessageInput.js');
-require('react-dom/server');
+require('dompurify');
+require('./consts-1d94dc61.js');
+require('./consts-740f60b8.js');
+require('./tokenize-2aa0f876.js');
 require('./ui/MessageContent.js');
 require('./ui/MessageItemMenu.js');
+require('./types-e0b77c8c.js');
 require('./ui/MessageItemReactionMenu.js');
+require('./ui/ReactionButton.js');
 require('./ui/EmojiReactions.js');
+require('./ui/ReactionBadge.js');
+require('./ui/BottomSheet.js');
 require('./ui/Tooltip.js');
 require('./ui/TooltipWrapper.js');
-require('./ui/ReactionBadge.js');
+require('./Message/context.js');
 require('./ui/AdminMessage.js');
 require('./ui/TextMessageItemBody.js');
-require('./ui/Word.js');
-require('./ui/LinkLabel.js');
+require('./index-2be14d85.js');
 require('./ui/MentionLabel.js');
+require('./ui/LinkLabel.js');
 require('./ui/FileMessageItemBody.js');
 require('./ui/ThumbnailMessageItemBody.js');
 require('./ui/OGMessageItemBody.js');
 require('./ui/UnknownMessageItemBody.js');
 require('./ui/QuoteMessage.js');
-require('./ui/BottomSheet.js');
+require('./index-89d81dad.js');
 require('./ui/ThreadReplies.js');
+require('./ui/VoiceMessageItemBody.js');
+require('./ui/ProgressBar.js');
+require('./VoicePlayer/useVoicePlayer.js');
+require('./ui/PlaybackTime.js');
 require('./Channel/components/FileViewer.js');
 require('./Channel/components/RemoveMessageModal.js');
-require('./Channel/components/FrozenNotification.js');
+require('./index-3b30939e.js');
+require('./useDirtyGetMentions-b8ca5675.js');
 require('./Channel/components/UnreadCount.js');
+require('./Channel/components/FrozenNotification.js');
 require('./Channel/components/MessageInput.js');
 require('./ui/QuoteMessageInput.js');
+require('./VoiceMessageInputWrapper-4fdc8ef1.js');
+require('./VoiceRecorder/useVoiceRecorder.js');
+require('./index-e8c0080f.js');
 require('./ChannelSettings/components/ChannelSettingsUI.js');
 require('./ChannelSettings/context.js');
 require('./ChannelSettings/components/ChannelProfile.js');
@@ -122,9 +142,10 @@ require('./ChannelSettings/components/EditDetailsModal.js');
 require('./ChannelSettings/components/ModerationPanel.js');
 require('./ui/Accordion.js');
 require('./ui/AccordionGroup.js');
-require('./context-7a0e057b.js');
+require('./context-8e7e8457.js');
+require('./ui/Toggle.js');
 require('./ChannelSettings/components/UserListItem.js');
-require('./MemberList-b2623166.js');
+require('./MemberList-a45a51c4.js');
 require('./ChannelSettings/components/LeaveChannel.js');
 require('./ChannelSettings/components/UserPanel.js');
 require('./MessageSearch/components/MessageSearchUI.js');
@@ -133,7 +154,7 @@ require('./ui/MessageSearchItem.js');
 require('./ui/MessageSearchFileItem.js');
 require('./Thread/components/ThreadUI.js');
 require('./Thread/components/ParentMessageInfo.js');
-require('./RemoveMessageModal-9169766a.js');
+require('./RemoveMessageModal-5903f232.js');
 require('./Thread/components/ParentMessageInfoItem.js');
 require('./ui/FileViewer.js');
 require('./Thread/components/ThreadHeader.js');
@@ -147,45 +168,43 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var DesktopLayout = function (props) {
-  var isReactionEnabled = props.isReactionEnabled,
-      replyType = props.replyType,
-      isMessageGroupingEnabled = props.isMessageGroupingEnabled,
-      allowProfileEdit = props.allowProfileEdit,
-      showSearchIcon = props.showSearchIcon,
-      onProfileEditSuccess = props.onProfileEditSuccess,
-      disableAutoSelect = props.disableAutoSelect,
-      currentChannel = props.currentChannel,
-      setCurrentChannel = props.setCurrentChannel,
-      showSettings = props.showSettings,
-      setShowSettings = props.setShowSettings,
-      showSearch = props.showSearch,
-      setShowSearch = props.setShowSearch,
-      highlightedMessage = props.highlightedMessage,
-      setHighlightedMessage = props.setHighlightedMessage,
-      startingPoint = props.startingPoint,
-      setStartingPoint = props.setStartingPoint,
-      showThread = props.showThread,
-      setShowThread = props.setShowThread,
-      threadTargetMessage = props.threadTargetMessage,
-      setThreadTargetMessage = props.setThreadTargetMessage;
-
-  var _a = React.useState(null),
-      animatedMessageId = _a[0],
-      setAnimatedMessageId = _a[1];
-
+const DesktopLayout = props => {
+  const {
+    isReactionEnabled,
+    replyType,
+    isMessageGroupingEnabled,
+    allowProfileEdit,
+    showSearchIcon,
+    onProfileEditSuccess,
+    disableAutoSelect,
+    currentChannel,
+    setCurrentChannel,
+    showSettings,
+    setShowSettings,
+    showSearch,
+    setShowSearch,
+    highlightedMessage,
+    setHighlightedMessage,
+    startingPoint,
+    setStartingPoint,
+    showThread,
+    setShowThread,
+    threadTargetMessage,
+    setThreadTargetMessage
+  } = props;
+  const [animatedMessageId, setAnimatedMessageId] = React.useState(null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-app__wrap"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-app__channellist-wrap"
   }, /*#__PURE__*/React__default["default"].createElement(ChannelList, {
     allowProfileEdit: allowProfileEdit,
+    activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
     onProfileEditSuccess: onProfileEditSuccess,
     disableAutoSelect: disableAutoSelect,
-    onChannelSelect: function (channel) {
-      setStartingPoint(null);
-      setHighlightedMessage(null);
-
+    onChannelSelect: channel => {
+      setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
+      setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
       if (channel) {
         setCurrentChannel(channel);
       } else {
@@ -193,47 +212,52 @@ var DesktopLayout = function (props) {
       }
     }
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "\n          ".concat(showSettings ? 'sendbird-app__conversation--settings-open' : '', "\n          ").concat(showSearch ? 'sendbird-app__conversation--search-open' : '', "\n          sendbird-app__conversation-wrap\n        ")
+    className: `
+          ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}
+          ${showSearch ? 'sendbird-app__conversation--search-open' : ''}
+          sendbird-app__conversation-wrap
+        `
   }, /*#__PURE__*/React__default["default"].createElement(Channel, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onChatHeaderActionClick: function () {
+    onChatHeaderActionClick: () => {
       setShowSearch(false);
       setShowThread(false);
       setShowSettings(!showSettings);
     },
-    onSearchClick: function () {
+    onSearchClick: () => {
       setShowSettings(false);
       setShowThread(false);
       setShowSearch(!showSearch);
     },
-    onReplyInThread: function (_a) {
-      var message = _a.message;
+    onReplyInThread: _ref => {
+      let {
+        message
+      } = _ref;
+      // parent message
       setShowSettings(false);
       setShowSearch(false);
-
       if (replyType === 'THREAD') {
-        setThreadTargetMessage({
-          parentMessage: message,
-          parentMessageId: message === null || message === void 0 ? void 0 : message.messageId
-        });
+        setThreadTargetMessage(message);
         setShowThread(true);
       }
     },
-    onQuoteMessageClick: function (_a) {
-      var message = _a.message;
+    onQuoteMessageClick: _ref2 => {
+      let {
+        message
+      } = _ref2;
+      // thread message
       setShowSettings(false);
       setShowSearch(false);
-
       if (replyType === 'THREAD') {
         setThreadTargetMessage(message);
         setShowThread(true);
       }
     },
-    onMessageAnimated: function () {
+    onMessageAnimated: () => {
       setAnimatedMessageId(null);
     },
-    onMessageHighlighted: function () {
-      setHighlightedMessage(null);
+    onMessageHighlighted: () => {
+      setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
     },
     showSearchIcon: showSearchIcon,
     startingPoint: startingPoint,
@@ -247,220 +271,253 @@ var DesktopLayout = function (props) {
   }, /*#__PURE__*/React__default["default"].createElement(ChannelSettings, {
     className: "sendbird-channel-settings",
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onCloseClick: function () {
+    onCloseClick: () => {
       setShowSettings(false);
     }
   })), showSearch && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-app__searchpanel-wrap"
   }, /*#__PURE__*/React__default["default"].createElement(MessageSearch, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onResultClick: function (message) {
+    onResultClick: message => {
       if (message.messageId === highlightedMessage) {
-        setHighlightedMessage(null);
-        setTimeout(function () {
-          setHighlightedMessage(message.messageId);
+        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
+        setTimeout(() => {
+          setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
         });
       } else {
-        setStartingPoint(message.createdAt);
-        setHighlightedMessage(message.messageId);
+        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message.createdAt);
+        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
       }
     },
-    onCloseClick: function () {
+    onCloseClick: () => {
       setShowSearch(false);
     }
   })), showThread && /*#__PURE__*/React__default["default"].createElement(Thread, {
     className: "sendbird-app__thread",
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
     message: threadTargetMessage,
-    onHeaderActionClick: function () {
+    onHeaderActionClick: () => {
       setShowThread(false);
     },
-    onMoveToParentMessage: function (_a) {
-      var message = _a.message,
-          channel = _a.channel;
-
+    onMoveToParentMessage: _ref3 => {
+      let {
+        message,
+        channel
+      } = _ref3;
       if ((channel === null || channel === void 0 ? void 0 : channel.url) !== (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
         setCurrentChannel(channel);
       }
-
       if ((message === null || message === void 0 ? void 0 : message.messageId) !== animatedMessageId) {
-        setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
+        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
       }
-
-      setTimeout(function () {
+      setTimeout(() => {
         setAnimatedMessageId(message === null || message === void 0 ? void 0 : message.messageId);
       }, 500);
     }
   }));
 };
 
-var PANELS;
-
-(function (PANELS) {
+var PANELS = /*#__PURE__*/function (PANELS) {
   PANELS["CHANNEL_LIST"] = "CHANNEL_LIST";
   PANELS["CHANNEL"] = "CHANNEL";
   PANELS["CHANNEL_SETTINGS"] = "CHANNEL_SETTINGS";
   PANELS["MESSAGE_SEARCH"] = "MESSAGE_SEARCH";
-})(PANELS || (PANELS = {}));
-
-var MobileLayout = function (props) {
-  var _a, _b, _c;
-
-  var replyType = props.replyType,
-      isMessageGroupingEnabled = props.isMessageGroupingEnabled,
-      allowProfileEdit = props.allowProfileEdit,
-      isReactionEnabled = props.isReactionEnabled,
-      showSearchIcon = props.showSearchIcon,
-      onProfileEditSuccess = props.onProfileEditSuccess,
-      currentChannel = props.currentChannel,
-      setCurrentChannel = props.setCurrentChannel,
-      highlightedMessage = props.highlightedMessage,
-      setHighlightedMessage = props.setHighlightedMessage,
-      startingPoint = props.startingPoint,
-      setStartingPoint = props.setStartingPoint;
-
-  var _d = React.useState(PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL_LIST),
-      panel = _d[0],
-      setPanel = _d[1];
-
-  var store = useSendbirdStateContext();
-  var sdk = (_b = (_a = store === null || store === void 0 ? void 0 : store.stores) === null || _a === void 0 ? void 0 : _a.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk;
-  var userId = (_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId;
-
-  var goToMessage = function (message) {
-    setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
-    setTimeout(function () {
-      setHighlightedMessage(message === null || message === void 0 ? void 0 : message.messageId);
-    });
+  PANELS["THREAD"] = "THREAD";
+  return PANELS;
+}(PANELS || {});
+const MobileLayout = props => {
+  var _store$stores, _store$stores$sdkStor, _store$config;
+  const {
+    replyType,
+    isMessageGroupingEnabled,
+    allowProfileEdit,
+    isReactionEnabled,
+    showSearchIcon,
+    onProfileEditSuccess,
+    currentChannel,
+    setCurrentChannel,
+    highlightedMessage,
+    setHighlightedMessage,
+    startingPoint,
+    setStartingPoint,
+    threadTargetMessage,
+    setThreadTargetMessage
+  } = props;
+  const [panel, setPanel] = React.useState(PANELS.CHANNEL_LIST);
+  const [animatedMessageId, setAnimatedMessageId] = React.useState(null);
+  const store = useSendbirdStateContext();
+  const sdk = store === null || store === void 0 ? void 0 : (_store$stores = store.stores) === null || _store$stores === void 0 ? void 0 : (_store$stores$sdkStor = _store$stores.sdkStore) === null || _store$stores$sdkStor === void 0 ? void 0 : _store$stores$sdkStor.sdk;
+  const userId = store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.userId;
+  const {
+    pause
+  } = VoicePlayer_context.useVoicePlayerContext();
+  const goToMessage = (message, timeoutCb) => {
+    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint((message === null || message === void 0 ? void 0 : message.createdAt) || null);
+    setTimeout(() => {
+      timeoutCb === null || timeoutCb === void 0 ? void 0 : timeoutCb((message === null || message === void 0 ? void 0 : message.messageId) || null);
+    }, 500);
   };
-
-  React.useEffect(function () {
-    if (panel !== (PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL)) {
-      goToMessage();
+  React.useEffect(() => {
+    if (panel !== PANELS.CHANNEL) {
+      goToMessage(null, () => setAnimatedMessageId(null));
     }
   }, [panel]);
-  React.useEffect(function () {
-    var _a, _b;
-
-    var handlerId = uuid.uuidv4();
-
-    if ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
-      var handler = new groupChannel.GroupChannelHandler({
-        onUserBanned: function (groupChannel, user) {
+  React.useEffect(() => {
+    var _sdk$groupChannel;
+    const handlerId = uuid.uuidv4();
+    if (sdk !== null && sdk !== void 0 && (_sdk$groupChannel = sdk.groupChannel) !== null && _sdk$groupChannel !== void 0 && _sdk$groupChannel.addGroupChannelHandler) {
+      var _sdk$groupChannel2;
+      const handler = new groupChannel.GroupChannelHandler({
+        onUserBanned: (groupChannel, user) => {
           if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
             setPanel(PANELS.CHANNEL_LIST);
           }
         },
-        onChannelDeleted: function (channelUrl) {
+        onChannelDeleted: channelUrl => {
           if (channelUrl === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
             setPanel(PANELS.CHANNEL_LIST);
           }
         },
-        onUserLeft: function (groupChannel, user) {
+        onUserLeft: (groupChannel, user) => {
           if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
             setPanel(PANELS.CHANNEL_LIST);
           }
         }
       });
-      (_b = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _b === void 0 ? void 0 : _b.addGroupChannelHandler(handlerId, handler);
+      sdk === null || sdk === void 0 ? void 0 : (_sdk$groupChannel2 = sdk.groupChannel) === null || _sdk$groupChannel2 === void 0 ? void 0 : _sdk$groupChannel2.addGroupChannelHandler(handlerId, handler);
     }
-
-    return function () {
-      var _a, _b;
-
-      (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) === null || _b === void 0 ? void 0 : _b.call(_a, handlerId);
+    return () => {
+      var _sdk$groupChannel3, _sdk$groupChannel3$re;
+      sdk === null || sdk === void 0 ? void 0 : (_sdk$groupChannel3 = sdk.groupChannel) === null || _sdk$groupChannel3 === void 0 ? void 0 : (_sdk$groupChannel3$re = _sdk$groupChannel3.removeGroupChannelHandler) === null || _sdk$groupChannel3$re === void 0 ? void 0 : _sdk$groupChannel3$re.call(_sdk$groupChannel3, handlerId);
     };
   }, [sdk]);
-  return /*#__PURE__*/React__default["default"].createElement("div", null, panel === (PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL_LIST) && /*#__PURE__*/React__default["default"].createElement("div", {
+
+  // if currentChannel is changed while on Thread
+  // then change panel type to CHANNEL
+  React.useEffect(() => {
+    if (panel === PANELS.THREAD) {
+      setPanel(PANELS.CHANNEL);
+    }
+  }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+  return /*#__PURE__*/React__default["default"].createElement("div", null, panel === PANELS.CHANNEL_LIST && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default["default"].createElement(ChannelList, {
     onProfileEditSuccess: onProfileEditSuccess,
-    onChannelSelect: function (channel) {
+    onChannelSelect: channel => {
       setCurrentChannel(channel);
       setPanel(PANELS.CHANNEL);
     },
-    allowProfileEdit: allowProfileEdit // this condition must be true for mobile
+    allowProfileEdit: allowProfileEdit
+    // this condition must be true for mobile
     ,
     disableAutoSelect: true
-  })), panel === (PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL) && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), panel === PANELS.CHANNEL && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default["default"].createElement(Channel, {
     replyType: replyType,
-    channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
-    onSearchClick: function () {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onSearchClick: () => {
       setPanel(PANELS.MESSAGE_SEARCH);
     },
-    onBackClick: function () {
+    onBackClick: () => {
       setPanel(PANELS.CHANNEL_LIST);
+      pause(VoicePlayer_context.ALL);
     },
     isReactionEnabled: isReactionEnabled,
     showSearchIcon: showSearchIcon,
     isMessageGroupingEnabled: isMessageGroupingEnabled,
     startingPoint: startingPoint,
+    animatedMessage: animatedMessageId,
     highlightedMessage: highlightedMessage,
-    onChatHeaderActionClick: function () {
+    onChatHeaderActionClick: () => {
       setPanel(PANELS.CHANNEL_SETTINGS);
+    },
+    onReplyInThread: _ref => {
+      let {
+        message
+      } = _ref;
+      if (replyType === 'THREAD') {
+        setPanel(PANELS.THREAD);
+        setThreadTargetMessage(message);
+      }
+    },
+    onQuoteMessageClick: _ref2 => {
+      let {
+        message
+      } = _ref2;
+      // thread message
+      if (replyType === 'THREAD') {
+        setThreadTargetMessage(message);
+        setPanel(PANELS.THREAD);
+      }
     }
-  })), panel === (PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL_SETTINGS) && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), panel === PANELS.CHANNEL_SETTINGS && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default["default"].createElement(ChannelSettings, {
-    channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
-    onCloseClick: function () {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onCloseClick: () => {
       setPanel(PANELS.CHANNEL);
     },
-    onLeaveChannel: function () {
+    onLeaveChannel: () => {
       setPanel(PANELS.CHANNEL_LIST);
     }
-  })), panel === (PANELS === null || PANELS === void 0 ? void 0 : PANELS.MESSAGE_SEARCH) && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), panel === PANELS.MESSAGE_SEARCH && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default["default"].createElement(MessageSearch, {
-    channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
-    onCloseClick: function () {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    onCloseClick: () => {
       setPanel(PANELS.CHANNEL);
     },
-    onResultClick: function (message) {
+    onResultClick: message => {
       setPanel(PANELS.CHANNEL);
-      goToMessage(message);
+      goToMessage(message, messageId => {
+        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
+      });
+    }
+  })), panel === PANELS.THREAD && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sb_mobile__panelwrap"
+  }, /*#__PURE__*/React__default["default"].createElement(Thread, {
+    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+    message: threadTargetMessage,
+    onHeaderActionClick: () => {
+      setPanel(PANELS.CHANNEL);
+      pause(VoicePlayer_context.ALL);
+    },
+    onMoveToParentMessage: _ref3 => {
+      let {
+        message,
+        channel
+      } = _ref3;
+      setCurrentChannel(channel);
+      goToMessage(message, messageId => {
+        setPanel(PANELS.CHANNEL);
+        setAnimatedMessageId(messageId);
+      });
     }
   })));
 };
 
-var AppLayout = function (props) {
-  var isReactionEnabled = props.isReactionEnabled,
-      replyType = props.replyType,
-      isMessageGroupingEnabled = props.isMessageGroupingEnabled,
-      allowProfileEdit = props.allowProfileEdit,
-      showSearchIcon = props.showSearchIcon,
-      onProfileEditSuccess = props.onProfileEditSuccess,
-      disableAutoSelect = props.disableAutoSelect,
-      currentChannel = props.currentChannel,
-      setCurrentChannel = props.setCurrentChannel;
-
-  var _a = React.useState(false),
-      showThread = _a[0],
-      setShowThread = _a[1];
-
-  var _b = React.useState(null),
-      threadTargetMessage = _b[0],
-      setThreadTargetMessage = _b[1];
-
-  var _c = React.useState(false),
-      showSettings = _c[0],
-      setShowSettings = _c[1];
-
-  var _d = React.useState(false),
-      showSearch = _d[0],
-      setShowSearch = _d[1];
-
-  var _e = React.useState(null),
-      highlightedMessage = _e[0],
-      setHighlightedMessage = _e[1];
-
-  var _f = React.useState(null),
-      startingPoint = _f[0],
-      setStartingPoint = _f[1];
-
-  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+const AppLayout = props => {
+  const {
+    isReactionEnabled,
+    replyType,
+    isMessageGroupingEnabled,
+    allowProfileEdit,
+    showSearchIcon,
+    onProfileEditSuccess,
+    disableAutoSelect,
+    currentChannel,
+    setCurrentChannel
+  } = props;
+  const [showThread, setShowThread] = React.useState(false);
+  const [threadTargetMessage, setThreadTargetMessage] = React.useState(null);
+  const [showSettings, setShowSettings] = React.useState(false);
+  const [showSearch, setShowSearch] = React.useState(false);
+  const [highlightedMessage, setHighlightedMessage] = React.useState(null);
+  const [startingPoint, setStartingPoint] = React.useState(null);
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileLayout, {
     replyType: replyType,
     isMessageGroupingEnabled: isMessageGroupingEnabled,
@@ -473,7 +530,9 @@ var AppLayout = function (props) {
     highlightedMessage: highlightedMessage,
     setHighlightedMessage: setHighlightedMessage,
     startingPoint: startingPoint,
-    setStartingPoint: setStartingPoint
+    setStartingPoint: setStartingPoint,
+    threadTargetMessage: threadTargetMessage,
+    setThreadTargetMessage: setThreadTargetMessage
   }) : /*#__PURE__*/React__default["default"].createElement(DesktopLayout, {
     isReactionEnabled: isReactionEnabled,
     replyType: replyType,
@@ -511,7 +570,7 @@ function App(props) {
     accessToken,
     customApiHost,
     customWebSocketHost,
-    mediaQueryBreakPoint,
+    breakpoint,
     theme,
     userListQuery,
     nickname,
@@ -520,6 +579,8 @@ function App(props) {
     config = {},
     isReactionEnabled,
     isMentionEnabled,
+    isVoiceMessageEnabled,
+    voiceRecord,
     replyType,
     isMessageGroupingEnabled,
     colorSet,
@@ -543,7 +604,7 @@ function App(props) {
     accessToken: accessToken,
     customApiHost: customApiHost,
     customWebSocketHost: customWebSocketHost,
-    mediaQueryBreakPoint: mediaQueryBreakPoint,
+    breakpoint: breakpoint,
     theme: theme,
     nickname: nickname,
     profileUrl: profileUrl,
@@ -557,22 +618,25 @@ function App(props) {
     imageCompression: imageCompression,
     isReactionEnabled: isReactionEnabled,
     isMentionEnabled: isMentionEnabled,
+    isVoiceMessageEnabled: isVoiceMessageEnabled,
+    voiceRecord: voiceRecord,
     onUserProfileMessage: channel => {
       setCurrentChannel(channel);
     },
     isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList,
     isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList,
-    replyType: replyType
+    replyType: replyType,
+    showSearchIcon: showSearchIcon
   }, /*#__PURE__*/React__default["default"].createElement(AppLayout, {
-    currentChannel: currentChannel,
-    setCurrentChannel: setCurrentChannel,
     isReactionEnabled: isReactionEnabled,
     replyType: replyType,
     isMessageGroupingEnabled: isMessageGroupingEnabled,
     allowProfileEdit: allowProfileEdit,
     showSearchIcon: showSearchIcon,
     onProfileEditSuccess: onProfileEditSuccess,
-    disableAutoSelect: disableAutoSelect
+    disableAutoSelect: disableAutoSelect,
+    currentChannel: currentChannel,
+    setCurrentChannel: setCurrentChannel
   }));
 }
 App.propTypes = {
@@ -585,7 +649,7 @@ App.propTypes = {
   userListQuery: PropTypes__default["default"].func,
   nickname: PropTypes__default["default"].string,
   profileUrl: PropTypes__default["default"].string,
-  mediaQueryBreakPoint: PropTypes__default["default"].string,
+  breakpoint: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].bool]),
   allowProfileEdit: PropTypes__default["default"].bool,
   disableUserProfile: PropTypes__default["default"].bool,
   disableMarkAsDelivered: PropTypes__default["default"].bool,
@@ -610,6 +674,11 @@ App.propTypes = {
   }),
   disableAutoSelect: PropTypes__default["default"].bool,
   isMentionEnabled: PropTypes__default["default"].bool,
+  isVoiceMessageEnabled: PropTypes__default["default"].bool,
+  voiceRecord: PropTypes__default["default"].shape({
+    maxRecordingTime: PropTypes__default["default"].number,
+    minRecordingTime: PropTypes__default["default"].number
+  }),
   isTypingIndicatorEnabledOnChannelList: PropTypes__default["default"].bool,
   isMessageReceiptStatusEnabledOnChannelList: PropTypes__default["default"].bool
 };
@@ -621,25 +690,33 @@ App.defaultProps = {
   nickname: '',
   profileUrl: '',
   userListQuery: null,
-  mediaQueryBreakPoint: null,
+  breakpoint: null,
   dateLocale: null,
   allowProfileEdit: false,
   onProfileEditSuccess: null,
-  disableUserProfile: false,
   disableMarkAsDelivered: false,
-  showSearchIcon: false,
   renderUserProfile: null,
   config: {},
-  isReactionEnabled: true,
-  isMentionEnabled: false,
-  replyType: 'NONE',
+  voiceRecord: {
+    maxRecordingTime: consts.VOICE_RECORDER_DEFAULT_MAX,
+    minRecordingTime: consts.VOICE_RECORDER_DEFAULT_MIN
+  },
   isMessageGroupingEnabled: true,
   stringSet: null,
   colorSet: null,
   imageCompression: {},
   disableAutoSelect: false,
-  isTypingIndicatorEnabledOnChannelList: false,
-  isMessageReceiptStatusEnabledOnChannelList: false
+  // The below configs are duplicates of the Dashboard UIKit Configs.
+  // Since their default values will be set in the Sendbird component,
+  // we don't need to set them here.
+  showSearchIcon: undefined,
+  isMentionEnabled: undefined,
+  isReactionEnabled: undefined,
+  replyType: undefined,
+  disableUserProfile: undefined,
+  isVoiceMessageEnabled: undefined,
+  isTypingIndicatorEnabledOnChannelList: undefined,
+  isMessageReceiptStatusEnabledOnChannelList: undefined
 };
 
 module.exports = App;