@sendbird/uikit-react 3.7.0 → 3.8.0

package/cjs/App.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var SendbirdProvider = require('./SendbirdProvider.js');
-var MediaQueryContext = require('./MediaQueryContext-6141d955.js');
+var MediaQueryContext = require('./chunks/bundle-Y9TkHVI5.js');
 var ChannelList = require('./ChannelList.js');
 var Channel = require('./Channel.js');
 var ChannelSettings = require('./ChannelSettings.js');
@@ -10,39 +10,35 @@ 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-9a117e16.js');
-var VoicePlayer_context = require('./index-a95c4ab4.js');
-require('./tslib.es6-c74b513f.js');
+var uuid = require('./chunks/bundle-gMxOq93o.js');
+var VoicePlayer_context = require('./chunks/bundle-BJe68nS0.js');
+require('./chunks/bundle-hK4x7nmG.js');
 require('@sendbird/uikit-tools');
 require('./withSendbird.js');
 require('css-vars-ponyfill');
-require('./index-54279ec2.js');
-require('./actionTypes-327123b5.js');
+require('./chunks/bundle-I_9_5a8a.js');
+require('./chunks/bundle-ELeM0_1Y.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
-require('./index-dbe8dd84.js');
+require('./chunks/bundle-FHx0K-3z.js');
 require('./utils/message/getOutgoingMessageState.js');
-require('./utils-eb6d90e0.js');
+require('./chunks/bundle-1yOirqug.js');
 require('./VoiceRecorder/context.js');
-require('./LocalizationContext-58b6ed7c.js');
-require('./stringSet-1539ac47.js');
-require('./index-e8928da6.js');
-require('./ui/Modal.js');
+require('./chunks/bundle-QmSa90PC.js');
+require('./chunks/bundle-z-Bvsn0B.js');
+require('./chunks/bundle-n1yh-qDb.js');
+require('./chunks/bundle-UooP2IDU.js');
 require('react-dom');
-require('./index-b8ba4548.js');
 require('./ui/IconButton.js');
 require('./ui/Button.js');
-require('./index-b5a9b4b7.js');
-require('prop-types');
-require('./types-d0d770c3.js');
+require('./chunks/bundle-6ziaqiUd.js');
 require('./ui/Icon.js');
-require('./consts-f54b15c2.js');
-require('./resolvedReplyType-c4564ebe.js');
+require('./chunks/bundle-L9ushBZQ.js');
+require('./chunks/bundle-g_OXBrgT.js');
 require('./hooks/useModal.js');
-require('./_rollupPluginBabelHelpers-f5b0dfb9.js');
-require('./ChannelListProvider-d0ad5a84.js');
+require('./chunks/bundle-Dwrq46Xb.js');
 require('./pubSub/topics.js');
-require('./UserProfileContext-c6d7abb7.js');
+require('./chunks/bundle-4bb_98h6.js');
 require('./ChannelList/components/ChannelListUI.js');
 require('./ChannelList/components/ChannelListHeader.js');
 require('./ui/Avatar.js');
@@ -50,7 +46,7 @@ require('./ui/ImageRenderer.js');
 require('./ChannelList/components/AddChannel.js');
 require('./CreateChannel.js');
 require('./CreateChannel/components/CreateChannelUI.js');
-require('./CreateChannelProvider-c3c843e4.js');
+require('./chunks/bundle-kWUEW1ZN.js');
 require('./sendbirdSelectors.js');
 require('./CreateChannel/components/InviteUsers.js');
 require('./ui/UserListItem.js');
@@ -62,25 +58,27 @@ require('./ui/SortByRow.js');
 require('./CreateChannel/components/SelectChannelType.js');
 require('./ChannelList/components/ChannelPreview.js');
 require('./ui/ChannelAvatar.js');
-require('./utils-98441ba6.js');
+require('./chunks/bundle-e-fvbugV.js');
 require('./ui/Badge.js');
-require('./index-520e12b8.js');
-require('./index-3448df64.js');
+require('./chunks/bundle-11ybpGNN.js');
+require('./chunks/bundle-28p7K0N-.js');
 require('./ui/Loader.js');
-require('./index-7627b546.js');
-require('./index-134e9852.js');
+require('./chunks/bundle-CUP2x37z.js');
+require('./chunks/bundle-4rFcKXQa.js');
 require('./ui/MentionUserLabel.js');
-require('./consts-b3c4f548.js');
+require('./chunks/bundle-gS0bojlA.js');
 require('./ui/TextButton.js');
-require('./color-5bf5a8f5.js');
+require('./chunks/bundle-B2MaAm21.js');
 require('./Channel/components/TypingIndicator.js');
-require('./ChannelProvider-fc111e5f.js');
-require('./const-c9e7a340.js');
-require('./utils-9193a195.js');
+require('./chunks/bundle-4DATo50q.js');
+require('./chunks/bundle-P_B0eyVT.js');
+require('./chunks/bundle-4q81wd8X.js');
 require('@sendbird/chat/message');
-require('./useSendMultipleFilesMessage-d6a3d5cf.js');
-require('./compareIds-28c6af62.js');
-require('./useLongPress-18b7af79.js');
+require('./chunks/bundle-c6O8NjZI.js');
+require('./chunks/bundle-tmB_l3Q9.js');
+require('./Channel/hooks/useInitialMessagesFetch.js');
+require('./chunks/bundle-6o4fw0w0.js');
+require('./chunks/bundle-tywVawyg.js');
 require('./ChannelList/components/ChannelPreviewAction.js');
 require('./EditUserProfile.js');
 require('./EditUserProfile/context.js');
@@ -90,23 +88,23 @@ require('./ui/PlaceHolder.js');
 require('./Channel/components/ChannelUI.js');
 require('./ui/ConnectionStatus.js');
 require('./Channel/components/ChannelHeader.js');
-require('./utils-e6c4b2b0.js');
+require('./chunks/bundle-zr9ZXBrm.js');
 require('./Channel/components/MessageList.js');
 require('./Channel/components/Message.js');
 require('./Channel/components/SuggestedMentionList.js');
-require('./const-876980e8.js');
+require('./chunks/bundle-dXhGOQQM.js');
 require('./Thread/context.js');
 require('./Thread/context/types.js');
 require('./ui/DateSeparator.js');
 require('./ui/MessageInput.js');
-require('./index-cc2e05a4.js');
+require('./chunks/bundle-b4fiCQuI.js');
 require('dompurify');
-require('./consts-61d83828.js');
-require('./consts-b711321c.js');
-require('./tokenize-d5286fa8.js');
+require('./chunks/bundle-g0lpRY8_.js');
+require('./chunks/bundle-RaQV-Bpr.js');
+require('./chunks/bundle-FLCJVplO.js');
 require('./ui/MessageContent.js');
 require('./ui/MessageItemMenu.js');
-require('./types-feda9656.js');
+require('./chunks/bundle-lii4Ueh3.js');
 require('./ui/MessageItemReactionMenu.js');
 require('./ui/ReactionButton.js');
 require('./ui/EmojiReactions.js');
@@ -117,27 +115,27 @@ require('./ui/TooltipWrapper.js');
 require('./Message/context.js');
 require('./ui/AdminMessage.js');
 require('./ui/TextMessageItemBody.js');
-require('./index-ce07a2a3.js');
+require('./chunks/bundle-iwsbhMUN.js');
 require('./ui/MentionLabel.js');
 require('./ui/LinkLabel.js');
 require('./ui/FileMessageItemBody.js');
 require('./ui/ThumbnailMessageItemBody.js');
-require('./utils-93ca9d57.js');
+require('./chunks/bundle-p1cCW0sH.js');
 require('./ui/OGMessageItemBody.js');
 require('./ui/UnknownMessageItemBody.js');
 require('./ui/QuoteMessage.js');
-require('./index-e5e6d9b0.js');
+require('./chunks/bundle-41ZfOrRZ.js');
 require('./ui/ThreadReplies.js');
 require('./ui/VoiceMessageItemBody.js');
 require('./ui/ProgressBar.js');
 require('./VoicePlayer/useVoicePlayer.js');
 require('./ui/PlaybackTime.js');
-require('./useStatefulFileInfoList-c510792f.js');
-require('./index-bc6623d7.js');
+require('./chunks/bundle-RlFjml8m.js');
+require('./chunks/bundle-JggdKsJa.js');
 require('./Channel/components/FileViewer.js');
 require('./Channel/components/RemoveMessageModal.js');
-require('./stringFormatterUtils-92dbef3c.js');
-require('./index-692ea6aa.js');
+require('./chunks/bundle-6OOGDxxE.js');
+require('./chunks/bundle-TEIqVGqn.js');
 require('./Message/hooks/useDirtyGetMentions.js');
 require('./Channel/utils/getMessagePartsInfo.js');
 require('./Channel/utils/compareMessagesForGrouping.js');
@@ -145,9 +143,9 @@ require('./Channel/components/UnreadCount.js');
 require('./Channel/components/FrozenNotification.js');
 require('./Channel/components/MessageInput.js');
 require('./ui/QuoteMessageInput.js');
-require('./useHandleUploadFiles-39e8d107.js');
+require('./chunks/bundle-e0il9C3T.js');
 require('./VoiceRecorder/useVoiceRecorder.js');
-require('./index-4c378655.js');
+require('./chunks/bundle-tRBVL0r6.js');
 require('./ChannelSettings/components/ChannelSettingsUI.js');
 require('./ChannelSettings/context.js');
 require('./ChannelSettings/components/ChannelProfile.js');
@@ -155,10 +153,10 @@ require('./ChannelSettings/components/EditDetailsModal.js');
 require('./ChannelSettings/components/ModerationPanel.js');
 require('./ui/Accordion.js');
 require('./ui/AccordionGroup.js');
-require('./context-6684538e.js');
+require('./chunks/bundle-YNHu-c84.js');
 require('./ui/Toggle.js');
 require('./ChannelSettings/components/UserListItem.js');
-require('./MemberList-2bd3db33.js');
+require('./chunks/bundle-_fjTT1-g.js');
 require('./ChannelSettings/components/LeaveChannel.js');
 require('./ChannelSettings/components/UserPanel.js');
 require('./MessageSearch/components/MessageSearchUI.js');
@@ -167,7 +165,7 @@ require('./ui/MessageSearchItem.js');
 require('./ui/MessageSearchFileItem.js');
 require('./Thread/components/ThreadUI.js');
 require('./Thread/components/ParentMessageInfo.js');
-require('./RemoveMessageModal-afc3e268.js');
+require('./chunks/bundle-DZeKHvMp.js');
 require('./Thread/components/ParentMessageInfoItem.js');
 require('./Thread/components/ThreadHeader.js');
 require('./Thread/components/ThreadList.js');
@@ -175,517 +173,247 @@ require('./Thread/components/ThreadListItem.js');
 require('date-fns');
 require('./Thread/components/ThreadMessageInput.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var DesktopLayout = function (props) {
-  var isReactionEnabled = props.isReactionEnabled,
-    replyType = props.replyType,
-    isMessageGroupingEnabled = props.isMessageGroupingEnabled,
-    isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled,
-    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];
-  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 || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
-      setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
-      if (channel) {
-        setCurrentChannel(channel);
-      } else {
-        setCurrentChannel(null);
-      }
-    }
-  })), /*#__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        ")
-  }, /*#__PURE__*/React__default["default"].createElement(Channel, {
-    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onChatHeaderActionClick: function () {
-      setShowSearch(false);
-      setShowThread(false);
-      setShowSettings(!showSettings);
-    },
-    onSearchClick: function () {
-      setShowSettings(false);
-      setShowThread(false);
-      setShowSearch(!showSearch);
-    },
-    onReplyInThread: function (_a) {
-      var message = _a.message;
-      setShowSettings(false);
-      setShowSearch(false);
-      if (replyType === 'THREAD') {
-        setThreadTargetMessage(message);
-        setShowThread(true);
-      }
-    },
-    onQuoteMessageClick: function (_a) {
-      var message = _a.message;
-      setShowSettings(false);
-      setShowSearch(false);
-      if (replyType === 'THREAD') {
-        setThreadTargetMessage(message);
-        setShowThread(true);
-      }
-    },
-    onMessageAnimated: function () {
-      setAnimatedMessageId(null);
-    },
-    onMessageHighlighted: function () {
-      setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
-    },
-    showSearchIcon: showSearchIcon,
-    startingPoint: startingPoint,
-    animatedMessage: animatedMessageId,
-    highlightedMessage: highlightedMessage,
-    isReactionEnabled: isReactionEnabled,
-    replyType: replyType,
-    isMessageGroupingEnabled: isMessageGroupingEnabled,
-    isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled
-  })), showSettings && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-app__settingspanel-wrap"
-  }, /*#__PURE__*/React__default["default"].createElement(ChannelSettings, {
-    className: "sendbird-channel-settings",
-    channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-    onCloseClick: function () {
-      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) {
-      if (message.messageId === highlightedMessage) {
-        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
-        setTimeout(function () {
-          setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
-        });
-      } else {
-        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message.createdAt);
-        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
-      }
-    },
-    onCloseClick: function () {
-      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 () {
-      setShowThread(false);
-    },
-    onMoveToParentMessage: function (_a) {
-      var message = _a.message,
-        channel = _a.channel;
-      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 === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
-      }
-      setTimeout(function () {
-        setAnimatedMessageId(message === null || message === void 0 ? void 0 : message.messageId);
-      }, 500);
-    }
-  }));
+var DesktopLayout = function (props) {
+    var isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, isMessageGroupingEnabled = props.isMessageGroupingEnabled, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, 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];
+    return (React.createElement("div", { className: "sendbird-app__wrap" },
+        React.createElement("div", { className: "sendbird-app__channellist-wrap" },
+            React.createElement(ChannelList, { allowProfileEdit: allowProfileEdit, activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, onChannelSelect: function (channel) {
+                    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
+                    setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
+                    if (channel) {
+                        setCurrentChannel(channel);
+                    }
+                    else {
+                        setCurrentChannel(null);
+                    }
+                } })),
+        React.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        ") },
+            React.createElement(Channel, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onChatHeaderActionClick: function () {
+                    setShowSearch(false);
+                    setShowThread(false);
+                    setShowSettings(!showSettings);
+                }, onSearchClick: function () {
+                    setShowSettings(false);
+                    setShowThread(false);
+                    setShowSearch(!showSearch);
+                }, onReplyInThread: function (_a) {
+                    var message = _a.message;
+                    setShowSettings(false);
+                    setShowSearch(false);
+                    if (replyType === 'THREAD') {
+                        setThreadTargetMessage(message);
+                        setShowThread(true);
+                    }
+                }, onQuoteMessageClick: function (_a) {
+                    var message = _a.message;
+                    setShowSettings(false);
+                    setShowSearch(false);
+                    if (replyType === 'THREAD') {
+                        setThreadTargetMessage(message);
+                        setShowThread(true);
+                    }
+                }, onMessageAnimated: function () {
+                    setAnimatedMessageId(null);
+                }, onMessageHighlighted: function () {
+                    setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
+                }, showSearchIcon: showSearchIcon, startingPoint: startingPoint, animatedMessage: animatedMessageId, highlightedMessage: highlightedMessage, isReactionEnabled: isReactionEnabled, replyType: replyType, isMessageGroupingEnabled: isMessageGroupingEnabled, isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled })),
+        showSettings && (React.createElement("div", { className: "sendbird-app__settingspanel-wrap" },
+            React.createElement(ChannelSettings, { className: "sendbird-channel-settings", channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
+                    setShowSettings(false);
+                } }))),
+        showSearch && (React.createElement("div", { className: "sendbird-app__searchpanel-wrap" },
+            React.createElement(MessageSearch, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onResultClick: function (message) {
+                    if (message.messageId === highlightedMessage) {
+                        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
+                        setTimeout(function () {
+                            setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
+                        });
+                    }
+                    else {
+                        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message.createdAt);
+                        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
+                    }
+                }, onCloseClick: function () {
+                    setShowSearch(false);
+                } }))),
+        showThread && (React.createElement(Thread, { className: "sendbird-app__thread", channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', message: threadTargetMessage, onHeaderActionClick: function () {
+                setShowThread(false);
+            }, onMoveToParentMessage: function (_a) {
+                var message = _a.message, channel = _a.channel;
+                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 === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
+                }
+                setTimeout(function () {
+                    setAnimatedMessageId(message === null || message === void 0 ? void 0 : message.messageId);
+                }, 500);
+            } }))));
 };
 
-var PANELS;
-(function (PANELS) {
-  PANELS["CHANNEL_LIST"] = "CHANNEL_LIST";
-  PANELS["CHANNEL"] = "CHANNEL";
-  PANELS["CHANNEL_SETTINGS"] = "CHANNEL_SETTINGS";
-  PANELS["MESSAGE_SEARCH"] = "MESSAGE_SEARCH";
-  PANELS["THREAD"] = "THREAD";
-})(PANELS || (PANELS = {}));
-var MobileLayout = function (props) {
-  var _a, _b, _c;
-  var replyType = props.replyType,
-    isMessageGroupingEnabled = props.isMessageGroupingEnabled,
-    isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled,
-    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,
-    threadTargetMessage = props.threadTargetMessage,
-    setThreadTargetMessage = props.setThreadTargetMessage;
-  var _d = React.useState(PANELS.CHANNEL_LIST),
-    panel = _d[0],
-    setPanel = _d[1];
-  var _e = React.useState(null),
-    animatedMessageId = _e[0],
-    setAnimatedMessageId = _e[1];
-  var store = useSendbirdStateContext.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 pause = VoicePlayer_context.useVoicePlayerContext().pause;
-  var goToMessage = function (message, timeoutCb) {
-    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint((message === null || message === void 0 ? void 0 : message.createdAt) || null);
-    setTimeout(function () {
-      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.CHANNEL) {
-      goToMessage(null, function () {
-        return 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) {
-          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) {
-          if (channelUrl === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
-            setPanel(PANELS.CHANNEL_LIST);
-          }
-        },
-        onUserLeft: function (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);
-    }
-    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);
-    };
-  }, [sdk, currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
-  // if currentChannel is changed while on Thread
-  // then change panel type to CHANNEL
-  React.useEffect(function () {
-    if (panel === PANELS.THREAD) {
-      setPanel(PANELS.CHANNEL);
-    }
-  }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sb_mobile"
-  }, 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) {
-      setCurrentChannel(channel);
-      setPanel(PANELS.CHANNEL);
-    },
-    allowProfileEdit: allowProfileEdit
-    // this condition must be true for mobile
-    ,
-    disableAutoSelect: true
-  })), 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 () {
-      setPanel(PANELS.MESSAGE_SEARCH);
-    },
-    onBackClick: function () {
-      setPanel(PANELS.CHANNEL_LIST);
-      pause(VoicePlayer_context.ALL);
-    },
-    isReactionEnabled: isReactionEnabled,
-    showSearchIcon: showSearchIcon,
-    isMessageGroupingEnabled: isMessageGroupingEnabled,
-    isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
-    startingPoint: startingPoint,
-    animatedMessage: animatedMessageId,
-    highlightedMessage: highlightedMessage,
-    onChatHeaderActionClick: function () {
-      setPanel(PANELS.CHANNEL_SETTINGS);
-    },
-    onReplyInThread: function (_a) {
-      var message = _a.message;
-      if (replyType === 'THREAD') {
-        setPanel(PANELS.THREAD);
-        setThreadTargetMessage(message);
-      }
-    },
-    onQuoteMessageClick: function (_a) {
-      var message = _a.message;
-      if (replyType === 'THREAD') {
-        setThreadTargetMessage(message);
-        setPanel(PANELS.THREAD);
-      }
-    }
-  })), 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 () {
-      setPanel(PANELS.CHANNEL);
-    },
-    onLeaveChannel: function () {
-      setPanel(PANELS.CHANNEL_LIST);
-    }
-  })), 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 () {
-      setPanel(PANELS.CHANNEL);
-    },
-    onResultClick: function (message) {
-      setPanel(PANELS.CHANNEL);
-      goToMessage(message, function (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: function () {
-      setPanel(PANELS.CHANNEL);
-      pause(VoicePlayer_context.ALL);
-    },
-    onMoveToParentMessage: function (_a) {
-      var message = _a.message,
-        channel = _a.channel;
-      setCurrentChannel(channel);
-      goToMessage(message, function (messageId) {
-        setPanel(PANELS.CHANNEL);
-        setAnimatedMessageId(messageId);
-      });
-    }
-  })));
+var PANELS;
+(function (PANELS) {
+    PANELS["CHANNEL_LIST"] = "CHANNEL_LIST";
+    PANELS["CHANNEL"] = "CHANNEL";
+    PANELS["CHANNEL_SETTINGS"] = "CHANNEL_SETTINGS";
+    PANELS["MESSAGE_SEARCH"] = "MESSAGE_SEARCH";
+    PANELS["THREAD"] = "THREAD";
+})(PANELS || (PANELS = {}));
+var MobileLayout = function (props) {
+    var _a, _b, _c;
+    var replyType = props.replyType, isMessageGroupingEnabled = props.isMessageGroupingEnabled, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, 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, threadTargetMessage = props.threadTargetMessage, setThreadTargetMessage = props.setThreadTargetMessage;
+    var _d = React.useState(PANELS.CHANNEL_LIST), panel = _d[0], setPanel = _d[1];
+    var _e = React.useState(null), animatedMessageId = _e[0], setAnimatedMessageId = _e[1];
+    var store = useSendbirdStateContext.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 pause = VoicePlayer_context.useVoicePlayerContext().pause;
+    var goToMessage = function (message, timeoutCb) {
+        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint((message === null || message === void 0 ? void 0 : message.createdAt) || null);
+        setTimeout(function () {
+            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.CHANNEL) {
+            goToMessage(null, function () { return 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) {
+                    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) {
+                    if (channelUrl === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
+                        setPanel(PANELS.CHANNEL_LIST);
+                    }
+                },
+                onUserLeft: function (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);
+        }
+        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);
+        };
+    }, [sdk, currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+    // if currentChannel is changed while on Thread
+    // then change panel type to CHANNEL
+    React.useEffect(function () {
+        if (panel === PANELS.THREAD) {
+            setPanel(PANELS.CHANNEL);
+        }
+    }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+    return (React.createElement("div", { className: 'sb_mobile' },
+        panel === PANELS.CHANNEL_LIST && (React.createElement("div", { className: 'sb_mobile__panelwrap' },
+            React.createElement(ChannelList, { onProfileEditSuccess: onProfileEditSuccess, onChannelSelect: function (channel) {
+                    setCurrentChannel(channel);
+                    setPanel(PANELS.CHANNEL);
+                }, allowProfileEdit: allowProfileEdit, 
+                // this condition must be true for mobile
+                disableAutoSelect: true }))),
+        panel === PANELS.CHANNEL && (React.createElement("div", { className: 'sb_mobile__panelwrap' },
+            React.createElement(Channel, { replyType: replyType, channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onSearchClick: function () {
+                    setPanel(PANELS.MESSAGE_SEARCH);
+                }, onBackClick: function () {
+                    setPanel(PANELS.CHANNEL_LIST);
+                    pause(VoicePlayer_context.ALL);
+                }, isReactionEnabled: isReactionEnabled, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled, startingPoint: startingPoint, animatedMessage: animatedMessageId, highlightedMessage: highlightedMessage, onChatHeaderActionClick: function () {
+                    setPanel(PANELS.CHANNEL_SETTINGS);
+                }, onReplyInThread: function (_a) {
+                    var message = _a.message;
+                    if (replyType === 'THREAD') {
+                        setPanel(PANELS.THREAD);
+                        setThreadTargetMessage(message);
+                    }
+                }, onQuoteMessageClick: function (_a) {
+                    var message = _a.message;
+                    if (replyType === 'THREAD') {
+                        setThreadTargetMessage(message);
+                        setPanel(PANELS.THREAD);
+                    }
+                } }))),
+        panel === PANELS.CHANNEL_SETTINGS && (React.createElement("div", { className: 'sb_mobile__panelwrap' },
+            React.createElement(ChannelSettings, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
+                    setPanel(PANELS.CHANNEL);
+                }, onLeaveChannel: function () {
+                    setPanel(PANELS.CHANNEL_LIST);
+                } }))),
+        panel === PANELS.MESSAGE_SEARCH && (React.createElement("div", { className: 'sb_mobile__panelwrap' },
+            React.createElement(MessageSearch, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
+                    setPanel(PANELS.CHANNEL);
+                }, onResultClick: function (message) {
+                    setPanel(PANELS.CHANNEL);
+                    goToMessage(message, function (messageId) {
+                        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
+                    });
+                } }))),
+        panel === PANELS.THREAD && (React.createElement("div", { className: 'sb_mobile__panelwrap' },
+            React.createElement(Thread, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', message: threadTargetMessage, onHeaderActionClick: function () {
+                    setPanel(PANELS.CHANNEL);
+                    pause(VoicePlayer_context.ALL);
+                }, onMoveToParentMessage: function (_a) {
+                    var message = _a.message, channel = _a.channel;
+                    setCurrentChannel(channel);
+                    goToMessage(message, function (messageId) {
+                        setPanel(PANELS.CHANNEL);
+                        setAnimatedMessageId(messageId);
+                    });
+                } })))));
 };
 
-var AppLayout = function (props) {
-  var _a, _b, _c;
-  var isMessageGroupingEnabled = props.isMessageGroupingEnabled,
-    allowProfileEdit = props.allowProfileEdit,
-    onProfileEditSuccess = props.onProfileEditSuccess,
-    disableAutoSelect = props.disableAutoSelect,
-    currentChannel = props.currentChannel,
-    setCurrentChannel = props.setCurrentChannel;
-  var globalStore = useSendbirdStateContext.useSendbirdStateContext();
-  var globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
-  var _d = React.useState(false),
-    showThread = _d[0],
-    setShowThread = _d[1];
-  var _e = React.useState(null),
-    threadTargetMessage = _e[0],
-    setThreadTargetMessage = _e[1];
-  var _f = React.useState(false),
-    showSettings = _f[0],
-    setShowSettings = _f[1];
-  var _g = React.useState(false),
-    showSearch = _g[0],
-    setShowSearch = _g[1];
-  var _h = React.useState(null),
-    highlightedMessage = _h[0],
-    setHighlightedMessage = _h[1];
-  var _j = React.useState(null),
-    startingPoint = _j[0],
-    setStartingPoint = _j[1];
-  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-  /**
-   * Below configs can be set via Dashboard UIKit config setting but as a lower priority than App props.
-   * So need to be have fallback value \w global configs even though each prop values are undefined
-   */
-  var replyType = (_a = props.replyType) !== null && _a !== void 0 ? _a : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.replyType;
-  var isReactionEnabled = (_b = props.isReactionEnabled) !== null && _b !== void 0 ? _b : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.isReactionEnabled;
-  var showSearchIcon = (_c = props.showSearchIcon) !== null && _c !== void 0 ? _c : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.showSearchIcon;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileLayout, {
-    replyType: replyType,
-    showSearchIcon: showSearchIcon,
-    isReactionEnabled: isReactionEnabled,
-    isMessageGroupingEnabled: isMessageGroupingEnabled,
-    allowProfileEdit: allowProfileEdit,
-    onProfileEditSuccess: onProfileEditSuccess,
-    currentChannel: currentChannel,
-    setCurrentChannel: setCurrentChannel,
-    highlightedMessage: highlightedMessage,
-    setHighlightedMessage: setHighlightedMessage,
-    startingPoint: startingPoint,
-    setStartingPoint: setStartingPoint,
-    threadTargetMessage: threadTargetMessage,
-    setThreadTargetMessage: setThreadTargetMessage
-  }) : /*#__PURE__*/React__default["default"].createElement(DesktopLayout, {
-    replyType: replyType,
-    isReactionEnabled: isReactionEnabled,
-    showSearchIcon: showSearchIcon,
-    isMessageGroupingEnabled: isMessageGroupingEnabled,
-    allowProfileEdit: allowProfileEdit,
-    onProfileEditSuccess: onProfileEditSuccess,
-    disableAutoSelect: disableAutoSelect,
-    currentChannel: currentChannel,
-    setCurrentChannel: setCurrentChannel,
-    showThread: showThread,
-    setShowThread: setShowThread,
-    threadTargetMessage: threadTargetMessage,
-    setThreadTargetMessage: setThreadTargetMessage,
-    showSettings: showSettings,
-    setShowSettings: setShowSettings,
-    showSearch: showSearch,
-    setShowSearch: setShowSearch,
-    highlightedMessage: highlightedMessage,
-    setHighlightedMessage: setHighlightedMessage,
-    startingPoint: startingPoint,
-    setStartingPoint: setStartingPoint
-  }));
+var AppLayout = function (props) {
+    var _a, _b, _c;
+    var isMessageGroupingEnabled = props.isMessageGroupingEnabled, allowProfileEdit = props.allowProfileEdit, onProfileEditSuccess = props.onProfileEditSuccess, disableAutoSelect = props.disableAutoSelect, currentChannel = props.currentChannel, setCurrentChannel = props.setCurrentChannel;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
+    var _d = React.useState(false), showThread = _d[0], setShowThread = _d[1];
+    var _e = React.useState(null), threadTargetMessage = _e[0], setThreadTargetMessage = _e[1];
+    var _f = React.useState(false), showSettings = _f[0], setShowSettings = _f[1];
+    var _g = React.useState(false), showSearch = _g[0], setShowSearch = _g[1];
+    var _h = React.useState(null), highlightedMessage = _h[0], setHighlightedMessage = _h[1];
+    var _j = React.useState(null), startingPoint = _j[0], setStartingPoint = _j[1];
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    /**
+     * Below configs can be set via Dashboard UIKit config setting but as a lower priority than App props.
+     * So need to be have fallback value \w global configs even though each prop values are undefined
+     */
+    var replyType = (_a = props.replyType) !== null && _a !== void 0 ? _a : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.replyType;
+    var isReactionEnabled = (_b = props.isReactionEnabled) !== null && _b !== void 0 ? _b : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.isReactionEnabled;
+    var showSearchIcon = (_c = props.showSearchIcon) !== null && _c !== void 0 ? _c : globalConfigs === null || globalConfigs === void 0 ? void 0 : globalConfigs.showSearchIcon;
+    return (React.createElement(React.Fragment, null, isMobile
+        ? (React.createElement(MobileLayout, { replyType: replyType, showSearchIcon: showSearchIcon, isReactionEnabled: isReactionEnabled, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, highlightedMessage: highlightedMessage, setHighlightedMessage: setHighlightedMessage, startingPoint: startingPoint, setStartingPoint: setStartingPoint, threadTargetMessage: threadTargetMessage, setThreadTargetMessage: setThreadTargetMessage }))
+        : (React.createElement(DesktopLayout, { replyType: replyType, isReactionEnabled: isReactionEnabled, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, showThread: showThread, setShowThread: setShowThread, threadTargetMessage: threadTargetMessage, setThreadTargetMessage: setThreadTargetMessage, showSettings: showSettings, setShowSettings: setShowSettings, showSearch: showSearch, setShowSearch: setShowSearch, highlightedMessage: highlightedMessage, setHighlightedMessage: setHighlightedMessage, startingPoint: startingPoint, setStartingPoint: setStartingPoint }))));
 };
 
-/**
- * This is a drop in Chat solution
- * Can also be used as an example for creating
- * default chat apps
- */
-function App(props) {
-  var appId = props.appId,
-    userId = props.userId,
-    _a = props.accessToken,
-    accessToken = _a === void 0 ? '' : _a,
-    _b = props.customApiHost,
-    customApiHost = _b === void 0 ? '' : _b,
-    _c = props.customWebSocketHost,
-    customWebSocketHost = _c === void 0 ? '' : _c,
-    _d = props.breakpoint,
-    breakpoint = _d === void 0 ? null : _d,
-    _e = props.theme,
-    theme = _e === void 0 ? 'light' : _e,
-    _f = props.userListQuery,
-    userListQuery = _f === void 0 ? null : _f,
-    _g = props.nickname,
-    nickname = _g === void 0 ? '' : _g,
-    _h = props.profileUrl,
-    profileUrl = _h === void 0 ? '' : _h,
-    _j = props.dateLocale,
-    dateLocale = _j === void 0 ? null : _j,
-    _k = props.config,
-    config = _k === void 0 ? {} : _k,
-    voiceRecord = props.voiceRecord,
-    _l = props.isMessageGroupingEnabled,
-    isMessageGroupingEnabled = _l === void 0 ? true : _l,
-    _m = props.colorSet,
-    colorSet = _m === void 0 ? null : _m,
-    _o = props.stringSet,
-    stringSet = _o === void 0 ? null : _o,
-    _p = props.allowProfileEdit,
-    allowProfileEdit = _p === void 0 ? false : _p,
-    _q = props.disableMarkAsDelivered,
-    disableMarkAsDelivered = _q === void 0 ? false : _q,
-    _r = props.renderUserProfile,
-    renderUserProfile = _r === void 0 ? null : _r,
-    _s = props.onProfileEditSuccess,
-    onProfileEditSuccess = _s === void 0 ? null : _s,
-    _t = props.imageCompression,
-    imageCompression = _t === void 0 ? {} : _t,
-    _u = props.disableAutoSelect,
-    disableAutoSelect = _u === void 0 ? false : _u,
-    sdkInitParams = props.sdkInitParams,
-    customExtensionParams = props.customExtensionParams,
-    eventHandlers = props.eventHandlers,
-    uikitOptions = props.uikitOptions,
-    // 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 = props.showSearchIcon,
-    isMentionEnabled = props.isMentionEnabled,
-    isReactionEnabled = props.isReactionEnabled,
-    replyType = props.replyType,
-    disableUserProfile = props.disableUserProfile,
-    isVoiceMessageEnabled = props.isVoiceMessageEnabled,
-    isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled,
-    isTypingIndicatorEnabledOnChannelList = props.isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList = props.isMessageReceiptStatusEnabledOnChannelList,
-    _v = props.isUserIdUsedForNickname,
-    isUserIdUsedForNickname = _v === void 0 ? true : _v;
-  var _w = React.useState(null),
-    currentChannel = _w[0],
-    setCurrentChannel = _w[1];
-  return /*#__PURE__*/React__default["default"].createElement(SendbirdProvider.SendbirdProvider, {
-    stringSet: stringSet,
-    appId: appId,
-    userId: userId,
-    accessToken: accessToken,
-    customApiHost: customApiHost,
-    customWebSocketHost: customWebSocketHost,
-    breakpoint: breakpoint,
-    theme: theme,
-    nickname: nickname,
-    profileUrl: profileUrl,
-    dateLocale: dateLocale,
-    userListQuery: userListQuery,
-    config: config,
-    colorSet: colorSet,
-    disableUserProfile: disableUserProfile,
-    disableMarkAsDelivered: disableMarkAsDelivered,
-    renderUserProfile: renderUserProfile,
-    imageCompression: imageCompression,
-    isReactionEnabled: isReactionEnabled,
-    isMentionEnabled: isMentionEnabled,
-    isVoiceMessageEnabled: isVoiceMessageEnabled,
-    isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
-    voiceRecord: voiceRecord,
-    onUserProfileMessage: function (channel) {
-      setCurrentChannel(channel);
-    },
-    isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList,
-    replyType: replyType,
-    showSearchIcon: showSearchIcon,
-    uikitOptions: uikitOptions,
-    isUserIdUsedForNickname: isUserIdUsedForNickname,
-    sdkInitParams: sdkInitParams,
-    customExtensionParams: customExtensionParams,
-    eventHandlers: eventHandlers
-  }, /*#__PURE__*/React__default["default"].createElement(AppLayout, {
-    isReactionEnabled: isReactionEnabled,
-    replyType: replyType,
-    showSearchIcon: showSearchIcon,
-    isMessageGroupingEnabled: isMessageGroupingEnabled,
-    allowProfileEdit: allowProfileEdit,
-    onProfileEditSuccess: onProfileEditSuccess,
-    disableAutoSelect: disableAutoSelect,
-    currentChannel: currentChannel,
-    setCurrentChannel: setCurrentChannel
-  }));
+/**
+ * This is a drop in Chat solution
+ * Can also be used as an example for creating
+ * default chat apps
+ */
+function App(props) {
+    var appId = props.appId, userId = props.userId, _a = props.accessToken, accessToken = _a === void 0 ? '' : _a, _b = props.customApiHost, customApiHost = _b === void 0 ? '' : _b, _c = props.customWebSocketHost, customWebSocketHost = _c === void 0 ? '' : _c, _d = props.breakpoint, breakpoint = _d === void 0 ? null : _d, _e = props.theme, theme = _e === void 0 ? 'light' : _e, _f = props.userListQuery, userListQuery = _f === void 0 ? null : _f, _g = props.nickname, nickname = _g === void 0 ? '' : _g, _h = props.profileUrl, profileUrl = _h === void 0 ? '' : _h, _j = props.dateLocale, dateLocale = _j === void 0 ? null : _j, _k = props.config, config = _k === void 0 ? {} : _k, voiceRecord = props.voiceRecord, _l = props.isMessageGroupingEnabled, isMessageGroupingEnabled = _l === void 0 ? true : _l, _m = props.colorSet, colorSet = _m === void 0 ? null : _m, _o = props.stringSet, stringSet = _o === void 0 ? null : _o, _p = props.allowProfileEdit, allowProfileEdit = _p === void 0 ? false : _p, _q = props.disableMarkAsDelivered, disableMarkAsDelivered = _q === void 0 ? false : _q, _r = props.renderUserProfile, renderUserProfile = _r === void 0 ? null : _r, _s = props.onProfileEditSuccess, onProfileEditSuccess = _s === void 0 ? null : _s, _t = props.imageCompression, imageCompression = _t === void 0 ? {} : _t, _u = props.disableAutoSelect, disableAutoSelect = _u === void 0 ? false : _u, sdkInitParams = props.sdkInitParams, customExtensionParams = props.customExtensionParams, eventHandlers = props.eventHandlers, uikitOptions = props.uikitOptions, 
+    // 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 = props.showSearchIcon, isMentionEnabled = props.isMentionEnabled, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, disableUserProfile = props.disableUserProfile, isVoiceMessageEnabled = props.isVoiceMessageEnabled, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, isTypingIndicatorEnabledOnChannelList = props.isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = props.isMessageReceiptStatusEnabledOnChannelList, _v = props.isUserIdUsedForNickname, isUserIdUsedForNickname = _v === void 0 ? true : _v;
+    var _w = React.useState(null), currentChannel = _w[0], setCurrentChannel = _w[1];
+    return (React.createElement(SendbirdProvider.SendbirdProvider, { stringSet: stringSet, appId: appId, userId: userId, accessToken: accessToken, customApiHost: customApiHost, customWebSocketHost: customWebSocketHost, breakpoint: breakpoint, theme: theme, nickname: nickname, profileUrl: profileUrl, dateLocale: dateLocale, userListQuery: userListQuery, config: config, colorSet: colorSet, disableUserProfile: disableUserProfile, disableMarkAsDelivered: disableMarkAsDelivered, renderUserProfile: renderUserProfile, imageCompression: imageCompression, isReactionEnabled: isReactionEnabled, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled, isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled, voiceRecord: voiceRecord, onUserProfileMessage: function (channel) {
+            setCurrentChannel(channel);
+        }, isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList, replyType: replyType, showSearchIcon: showSearchIcon, uikitOptions: uikitOptions, isUserIdUsedForNickname: isUserIdUsedForNickname, sdkInitParams: sdkInitParams, customExtensionParams: customExtensionParams, eventHandlers: eventHandlers },
+        React.createElement(AppLayout, { isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel })));
 }
 
 module.exports = App;