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

package/App.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Sendbird from './SendbirdProvider.js';
-import { u as useMediaQueryContext } from './MediaQueryContext-17146a37.js';
+import { u as useMediaQueryContext } from './MediaQueryContext-1988a4bc.js';
 import ChannelList from './ChannelList.js';
 import Channel from './Channel.js';
 import ChannelSettings from './ChannelSettings.js';
@@ -9,30 +9,29 @@ import MessageSearchPannel from './MessageSearch.js';
 import Thread from './Thread.js';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
 import useSendbirdStateContext from './useSendbirdStateContext.js';
-import { u as uuidv4 } from './uuid-39d923b9.js';
-import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-96859f90.js';
-import './tslib.es6-85bcd95d.js';
+import { u as uuidv4 } from './uuid-48baadaf.js';
+import { V as VOICE_RECORDER_DEFAULT_MAX, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-c9746f2b.js';
+import './_rollupPluginBabelHelpers-b2d9bfc5.js';
 import './withSendbird.js';
+import 'css-vars-ponyfill';
+import './index.module-ab8289c1.js';
+import './actionTypes-e436fe6c.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './actionTypes-9badb1b4.js';
-import './index-1db30515.js';
+import './index-dbe0e004.js';
 import './utils/message/getOutgoingMessageState.js';
-import 'css-vars-ponyfill';
-import './index.module-a2145ffe.js';
-import './index-47ba6604.js';
+import './index-38a78d99.js';
 import './VoiceRecorder/context.js';
-import './LocalizationContext-62966630.js';
-import './stringSet-e0fd81b2.js';
-import './index-6574e8fd.js';
-import './ChannelListProvider-32bd4597.js';
-import './topics-bc5fee43.js';
-import './utils-7dc80efd.js';
-import './UserProfileContext-7083bd82.js';
-import './_rollupPluginBabelHelpers-48b56150.js';
+import './LocalizationContext-9c54e783.js';
+import './stringSet-1f18348a.js';
+import './index-a9ddd0f5.js';
+import './ChannelListProvider-c1d2f942.js';
+import './topics-d8d10f83.js';
+import './utils-0c09801e.js';
+import './UserProfileContext-a8aa4c0f.js';
 import './ChannelList/components/ChannelListUI.js';
 import './ChannelList/components/ChannelListHeader.js';
-import './index-538fa479.js';
+import './index-4111594a.js';
 import './ui/Avatar.js';
 import './ui/ImageRenderer.js';
 import './ui/Icon.js';
@@ -40,12 +39,12 @@ import './ChannelList/components/AddChannel.js';
 import './ui/IconButton.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './CreateChannelProvider-96aa4ed0.js';
+import './CreateChannelProvider-d2188082.js';
 import './sendbirdSelectors.js';
 import './CreateChannel/components/InviteUsers.js';
 import './ui/Modal.js';
 import 'react-dom';
-import './index-6f66895e.js';
+import './index-2a938266.js';
 import './ui/Button.js';
 import './ui/UserListItem.js';
 import './ui/MutedAvatarOverlay.js';
@@ -56,48 +55,48 @@ import './ui/SortByRow.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './ChannelList/components/ChannelPreview.js';
 import './ui/ChannelAvatar.js';
-import './utils-4aea6ebc.js';
+import './utils-447a922e.js';
 import './ui/Badge.js';
-import './index-77a24725.js';
-import './index-5cfaecc9.js';
+import './index-51bd074f.js';
+import './index-f48cfdf7.js';
 import './ui/Loader.js';
-import './index-c4ff34e4.js';
-import './index-adfdd634.js';
+import './index-3062a861.js';
+import './index-1a3c0d72.js';
 import './ui/MentionUserLabel.js';
-import './consts-81c7d9ed.js';
+import './consts-d4c78cc0.js';
 import './ui/TextButton.js';
-import './color-4ecee870.js';
+import './color-3bac434a.js';
 import './Channel/components/TypingIndicator.js';
-import './ChannelProvider-4e33aa60.js';
-import './compareIds-bc4cf9bf.js';
-import './const-34b3294d.js';
+import './ChannelProvider-4ab3a851.js';
+import './compareIds-1e0e668f.js';
+import './const-5f722b91.js';
 import '@sendbird/chat/message';
 import './ui/ReactionButton.js';
-import './useLongPress-08d9369b.js';
+import './useLongPress-8acf717c.js';
 import './ChannelList/components/ChannelPreviewAction.js';
 import './EditUserProfile.js';
-import './index-e5062739.js';
+import './index-59bd3da1.js';
 import './ui/Input.js';
-import './index-af95f2b0.js';
+import './index-77f3d9b0.js';
 import './Channel/components/ChannelUI.js';
 import './ui/ConnectionStatus.js';
 import './Channel/components/ChannelHeader.js';
-import './utils-13ac01f0.js';
+import './utils-b57bff14.js';
 import './Channel/components/MessageList.js';
 import './Channel/components/Message.js';
 import './Channel/components/SuggestedMentionList.js';
-import './const-8a7444d1.js';
-import './ThreadProvider-1798360b.js';
+import './const-6a07b718.js';
+import './ThreadProvider-0a3c5f37.js';
 import './Thread/context/types.js';
 import './ui/DateSeparator.js';
 import './ui/MessageInput.js';
 import 'dompurify';
-import './consts-165100af.js';
-import './consts-7a61df9f.js';
-import './tokenize-22d48b61.js';
+import './consts-aadaccca.js';
+import './consts-790ae3a9.js';
+import './tokenize-63d895d3.js';
 import './ui/MessageContent.js';
 import './ui/MessageItemMenu.js';
-import './types-84207ac4.js';
+import './types-a85de720.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/EmojiReactions.js';
 import './ui/Tooltip.js';
@@ -105,7 +104,7 @@ import './ui/TooltipWrapper.js';
 import './ui/ReactionBadge.js';
 import './ui/AdminMessage.js';
 import './ui/TextMessageItemBody.js';
-import './index-f5d419ec.js';
+import './index-8df6bff0.js';
 import './Message/context.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
@@ -122,14 +121,14 @@ import './VoicePlayer/useVoicePlayer.js';
 import './ui/PlaybackTime.js';
 import './Channel/components/FileViewer.js';
 import './Channel/components/RemoveMessageModal.js';
-import './index-2ea26b17.js';
+import './index-cfd0e4c4.js';
 import './Channel/components/UnreadCount.js';
 import './Channel/components/FrozenNotification.js';
 import './Channel/components/MessageInput.js';
 import './ui/QuoteMessageInput.js';
-import './VoiceMessageInputWrapper-4479a1bd.js';
+import './VoiceMessageInputWrapper-ff160b51.js';
 import './VoiceRecorder/useVoiceRecorder.js';
-import './index-3ac8a689.js';
+import './index-83600696.js';
 import './ChannelSettings/components/ChannelSettingsUI.js';
 import './ChannelSettings/context.js';
 import './ChannelSettings/components/ChannelProfile.js';
@@ -137,9 +136,10 @@ import './ChannelSettings/components/EditDetailsModal.js';
 import './ChannelSettings/components/ModerationPanel.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';
-import './context-c54bc9b4.js';
+import './context-fcbabe23.js';
+import './ui/Toggle.js';
 import './ChannelSettings/components/UserListItem.js';
-import './MemberList-ef0a35ad.js';
+import './MemberList-80ea8604.js';
 import './ChannelSettings/components/LeaveChannel.js';
 import './ChannelSettings/components/UserPanel.js';
 import './MessageSearch/components/MessageSearchUI.js';
@@ -148,7 +148,7 @@ import './ui/MessageSearchItem.js';
 import './ui/MessageSearchFileItem.js';
 import './Thread/components/ThreadUI.js';
 import './Thread/components/ParentMessageInfo.js';
-import './RemoveMessageModal-0efd9201.js';
+import './RemoveMessageModal-99b5bab4.js';
 import './Thread/components/ParentMessageInfoItem.js';
 import './ui/FileViewer.js';
 import './Thread/components/ThreadHeader.js';
@@ -157,31 +157,31 @@ import './Thread/components/ThreadListItem.js';
 import 'date-fns';
 import './Thread/components/ThreadMessageInput.js';
 
-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 = 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] = useState(null);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-app__wrap"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -191,7 +191,7 @@ var DesktopLayout = function (props) {
     activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
     onProfileEditSuccess: onProfileEditSuccess,
     disableAutoSelect: disableAutoSelect,
-    onChannelSelect: function (channel) {
+    onChannelSelect: channel => {
       setStartingPoint(null);
       setHighlightedMessage(null);
       if (channel) {
@@ -201,21 +201,28 @@ var DesktopLayout = function (props) {
       }
     }
   })), /*#__PURE__*/React__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.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') {
@@ -223,8 +230,11 @@ var DesktopLayout = function (props) {
         setShowThread(true);
       }
     },
-    onQuoteMessageClick: function (_a) {
-      var message = _a.message;
+    onQuoteMessageClick: _ref2 => {
+      let {
+        message
+      } = _ref2;
+      // thread message
       setShowSettings(false);
       setShowSearch(false);
       if (replyType === 'THREAD') {
@@ -232,10 +242,10 @@ var DesktopLayout = function (props) {
         setShowThread(true);
       }
     },
-    onMessageAnimated: function () {
+    onMessageAnimated: () => {
       setAnimatedMessageId(null);
     },
-    onMessageHighlighted: function () {
+    onMessageHighlighted: () => {
       setHighlightedMessage(null);
     },
     showSearchIcon: showSearchIcon,
@@ -250,17 +260,17 @@ var DesktopLayout = function (props) {
   }, /*#__PURE__*/React__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.createElement("div", {
     className: "sendbird-app__searchpanel-wrap"
   }, /*#__PURE__*/React__default.createElement(MessageSearchPannel, {
     channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onResultClick: function (message) {
+    onResultClick: message => {
       if (message.messageId === highlightedMessage) {
         setHighlightedMessage(null);
-        setTimeout(function () {
+        setTimeout(() => {
           setHighlightedMessage(message.messageId);
         });
       } else {
@@ -268,103 +278,106 @@ var DesktopLayout = function (props) {
         setHighlightedMessage(message.messageId);
       }
     },
-    onCloseClick: function () {
+    onCloseClick: () => {
       setShowSearch(false);
     }
   })), showThread && /*#__PURE__*/React__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);
       }
-      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 = 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) {
+  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
+  } = props;
+  const [panel, setPanel] = useState(PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL_LIST);
+  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 goToMessage = message => {
     setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
-    setTimeout(function () {
+    setTimeout(() => {
       setHighlightedMessage(message === null || message === void 0 ? void 0 : message.messageId);
     });
   };
-  useEffect(function () {
+  useEffect(() => {
     if (panel !== (PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL)) {
       goToMessage();
     }
   }, [panel]);
-  useEffect(function () {
-    var _a, _b;
-    var handlerId = uuidv4();
-    if ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
-      var handler = new GroupChannelHandler({
-        onUserBanned: function (groupChannel, user) {
+  useEffect(() => {
+    var _sdk$groupChannel;
+    const handlerId = 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 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.createElement("div", null, panel === (PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL_LIST) && /*#__PURE__*/React__default.createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default.createElement(ChannelList, {
     onProfileEditSuccess: onProfileEditSuccess,
-    onChannelSelect: function (channel) {
+    onChannelSelect: channel => {
       setCurrentChannel(channel);
       setPanel(PANELS.CHANNEL);
     },
@@ -376,11 +389,11 @@ var MobileLayout = function (props) {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__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);
     },
     isReactionEnabled: isReactionEnabled,
@@ -388,62 +401,54 @@ var MobileLayout = function (props) {
     isMessageGroupingEnabled: isMessageGroupingEnabled,
     startingPoint: startingPoint,
     highlightedMessage: highlightedMessage,
-    onChatHeaderActionClick: function () {
+    onChatHeaderActionClick: () => {
       setPanel(PANELS.CHANNEL_SETTINGS);
     }
   })), panel === (PANELS === null || PANELS === void 0 ? void 0 : PANELS.CHANNEL_SETTINGS) && /*#__PURE__*/React__default.createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__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.createElement("div", {
     className: "sb_mobile__panelwrap"
   }, /*#__PURE__*/React__default.createElement(MessageSearchPannel, {
-    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);
     }
   })));
 };
 
-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 = useState(false),
-    showThread = _a[0],
-    setShowThread = _a[1];
-  var _b = useState(null),
-    threadTargetMessage = _b[0],
-    setThreadTargetMessage = _b[1];
-  var _c = useState(false),
-    showSettings = _c[0],
-    setShowSettings = _c[1];
-  var _d = useState(false),
-    showSearch = _d[0],
-    setShowSearch = _d[1];
-  var _e = useState(null),
-    highlightedMessage = _e[0],
-    setHighlightedMessage = _e[1];
-  var _f = useState(null),
-    startingPoint = _f[0],
-    setStartingPoint = _f[1];
-  var isMobile = useMediaQueryContext().isMobile;
+const AppLayout = props => {
+  const {
+    isReactionEnabled,
+    replyType,
+    isMessageGroupingEnabled,
+    allowProfileEdit,
+    showSearchIcon,
+    onProfileEditSuccess,
+    disableAutoSelect,
+    currentChannel,
+    setCurrentChannel
+  } = props;
+  const [showThread, setShowThread] = useState(false);
+  const [threadTargetMessage, setThreadTargetMessage] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+  const [highlightedMessage, setHighlightedMessage] = useState(null);
+  const [startingPoint, setStartingPoint] = useState(null);
+  const {
+    isMobile
+  } = useMediaQueryContext();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isMobile ? /*#__PURE__*/React__default.createElement(MobileLayout, {
     replyType: replyType,
     isMessageGroupingEnabled: isMessageGroupingEnabled,
@@ -551,15 +556,15 @@ function App(props) {
     isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList,
     replyType: replyType
   }, /*#__PURE__*/React__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 = {