@sendbird/uikit-react 3.14.3-rc.1 → 3.14.4

package/cjs/App.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var SendbirdProvider = require('./SendbirdProvider.js');
-var MediaQueryContext = require('./chunks/bundle-xpQ8gY1k.js');
-var _tslib = require('./chunks/bundle-BwzMNAFs.js');
+var MediaQueryContext = require('./chunks/bundle-BwQ4BJif.js');
+var _tslib = require('./chunks/bundle-HGbi-rCv.js');
 var GroupChannel = require('./GroupChannel.js');
 var GroupChannelList = require('./GroupChannelList.js');
 var Channel = require('./Channel.js');
@@ -13,84 +13,84 @@ var MessageSearch = require('./MessageSearch.js');
 var Thread = require('./Thread.js');
 var groupChannel = require('@sendbird/chat/groupChannel');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-var uuid = require('./chunks/bundle-B0Cl8cKp.js');
-var VoicePlayer_context = require('./chunks/bundle-CZ-C_W9P.js');
+var uuid = require('./chunks/bundle-1XtsxT8L.js');
+var VoicePlayer_context = require('./chunks/bundle-L3FEqZsK.js');
+var resolvedReplyType = require('./chunks/bundle-BjgfoBVC.js');
 require('@sendbird/uikit-tools');
 require('./withSendbird.js');
 require('css-vars-ponyfill');
-require('./chunks/bundle-CN-HA7zS.js');
-require('./chunks/bundle-BACbqv7X.js');
-require('./chunks/bundle-DZl6cYvA.js');
+require('./chunks/bundle-wl1uuzU7.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('./chunks/bundle-qI5gnScC.js');
+require('./chunks/bundle-BrNoc2XZ.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
-require('./chunks/bundle-BTEk9dhT.js');
-require('./utils/message/getOutgoingMessageState.js');
-require('./chunks/bundle-_VH8bxGE.js');
-require('./chunks/bundle-BZcKIqEO.js');
-require('./VoiceRecorder/context.js');
-require('./chunks/bundle-Cg6exdly.js');
-require('./chunks/bundle-DXrpp6AJ.js');
-require('./chunks/bundle-XPPVGabQ.js');
-require('./chunks/bundle-BhbVr0qd.js');
+require('./chunks/bundle-BoLhr7Ko.js');
+require('./chunks/bundle-BOkZUm8a.js');
+require('./chunks/bundle-CZfcXYaX.js');
 require('react-dom');
+require('./chunks/bundle-oeWNUdCB.js');
+require('./chunks/bundle-gtkPlUrw.js');
+require('./chunks/bundle-BWGOXLHb.js');
 require('./ui/IconButton.js');
 require('./ui/Button.js');
-require('./chunks/bundle-Cm_quRwQ.js');
+require('./chunks/bundle-5_kPn4wU.js');
 require('./ui/Icon.js');
-require('./chunks/bundle-BgJJI84U.js');
-require('./chunks/bundle-CYFSAQ2T.js');
-require('./hooks/useModal.js');
+require('./chunks/bundle-DfcEln0Z.js');
+require('./chunks/bundle-BTU876jx.js');
 require('./ui/ContextMenu.js');
 require('./ui/SortByRow.js');
 require('./GroupChannel/context.js');
 require('@sendbird/chat/message');
-require('./chunks/bundle-CT33owD4.js');
-require('./chunks/bundle-DTzDEbe0.js');
-require('./chunks/bundle-BWtc6aAL.js');
-require('./chunks/bundle-Dc_hFK8U.js');
-require('./chunks/bundle-oEFvi6H_.js');
-require('./chunks/bundle-DxeOzVdw.js');
-require('./chunks/bundle-CqfYJ2-A.js');
-require('./chunks/bundle-DU2DrCMu.js');
+require('./chunks/bundle-CAUMYdVU.js');
+require('./chunks/bundle-BaQc9oOW.js');
+require('./chunks/bundle-DQy218lT.js');
+require('./chunks/bundle-C1XVsHlE.js');
+require('./chunks/bundle-CE6bFQmu.js');
+require('./chunks/bundle-Com-Z-XI.js');
+require('./chunks/bundle-Dehhi1FZ.js');
+require('./chunks/bundle-Dww6fCVQ.js');
 require('./GroupChannel/components/GroupChannelUI.js');
-require('./chunks/bundle-DRneqmmM.js');
+require('./chunks/bundle-CQ34zxiR.js');
 require('./GroupChannel/components/TypingIndicator.js');
 require('./ui/ConnectionStatus.js');
 require('./ui/PlaceHolder.js');
 require('./ui/Loader.js');
 require('./GroupChannel/components/GroupChannelHeader.js');
-require('./chunks/bundle-Cc053_Sp.js');
+require('./chunks/bundle-DmX69_-l.js');
 require('./ui/ChannelAvatar.js');
-require('./chunks/bundle-BjHWj0YM.js');
+require('./chunks/bundle-DxSB9NRz.js');
 require('./ui/ImageRenderer.js');
-require('./chunks/bundle-D1gE5kRR.js');
-require('./chunks/bundle-CGNRfqfQ.js');
-require('./chunks/bundle-LJi0Ftvu.js');
+require('./chunks/bundle-C93-onMF.js');
+require('./chunks/bundle-DRp9IuV2.js');
+require('./chunks/bundle-Tjx9wNAv.js');
+require('./ui/Header.js');
+require('./ui/TextButton.js');
+require('./chunks/bundle-DAxedY0T.js');
 require('./GroupChannel/components/MessageList.js');
 require('./GroupChannel/components/Message.js');
-require('./chunks/bundle-DYU6eNDJ.js');
-require('./chunks/bundle-BEDFWZBT.js');
-require('./chunks/bundle-CUue3xhm.js');
+require('./chunks/bundle-ByyccRIt.js');
+require('./chunks/bundle-DAj-1QVM.js');
+require('./chunks/bundle-CR04Yhbr.js');
 require('./Message/hooks/useDirtyGetMentions.js');
 require('./ui/DateSeparator.js');
-require('./chunks/bundle-Bu7SLdLc.js');
 require('./ui/MessageInput.js');
-require('./chunks/bundle-xkYrx6pX.js');
-require('./chunks/bundle-DTZwXpbk.js');
+require('./chunks/bundle-CmpLg1_S.js');
+require('./chunks/bundle-BLc7P6Sp.js');
 require('dompurify');
-require('./chunks/bundle-BSV6l3PT.js');
-require('./chunks/bundle-DpiYQ60c.js');
-require('./chunks/bundle-eHc2IloF.js');
-require('./chunks/bundle-DF9nQRmT.js');
+require('./chunks/bundle-D4aDRH9m.js');
+require('./chunks/bundle-8VyIP0TE.js');
+require('./chunks/bundle-DdxJqNSP.js');
+require('./chunks/bundle-CLOaQmX9.js');
 require('./ui/MessageContent.js');
-require('./chunks/bundle-Dnrc5q_J.js');
-require('./chunks/bundle-tVtQpJ4n.js');
-require('./chunks/bundle-m2yaPSNj.js');
+require('./chunks/bundle-N_CwOE5a.js');
+require('./chunks/bundle-B_51Svr9.js');
+require('./chunks/bundle-wMKhbE3c.js');
 require('./ui/MessageItemMenu.js');
-require('./chunks/bundle-B5nh0Mif.js');
+require('./chunks/bundle-BaAUvjl9.js');
 require('./ui/MessageItemReactionMenu.js');
 require('./ui/ReactionButton.js');
-require('./chunks/bundle-C0Gtok_c.js');
+require('./chunks/bundle-miB6ue8g.js');
 require('./ui/EmojiReactions.js');
 require('./ui/ReactionBadge.js');
 require('./ui/BottomSheet.js');
@@ -104,19 +104,18 @@ require('./ui/TooltipWrapper.js');
 require('./Message/context.js');
 require('./ui/AdminMessage.js');
 require('./ui/QuoteMessage.js');
-require('./chunks/bundle-Amd_tEFX.js');
-require('./chunks/bundle-V3DBpR8B.js');
+require('./chunks/bundle-DcSTnNI0.js');
+require('./chunks/bundle-Cgl5e8xs.js');
 require('./ui/ThreadReplies.js');
 require('./ui/OGMessageItemBody.js');
-require('./chunks/bundle-Dfqk1zRa.js');
+require('./chunks/bundle-C3DKUT4Q.js');
 require('./ui/MentionLabel.js');
 require('./ui/LinkLabel.js');
 require('./ui/TextMessageItemBody.js');
 require('./ui/FileMessageItemBody.js');
-require('./ui/TextButton.js');
-require('./chunks/bundle-waMogQH7.js');
-require('./chunks/bundle-DYdwn7HI.js');
-require('./chunks/bundle-B1UxSAT6.js');
+require('./chunks/bundle-DTCz0BH1.js');
+require('./chunks/bundle-C6a-umLQ.js');
+require('./chunks/bundle-bqRlVm3u.js');
 require('./ui/VoiceMessageItemBody.js');
 require('./ui/ProgressBar.js');
 require('./VoicePlayer/useVoicePlayer.js');
@@ -124,7 +123,7 @@ require('./ui/PlaybackTime.js');
 require('./ui/ThumbnailMessageItemBody.js');
 require('./ui/UnknownMessageItemBody.js');
 require('./ui/TemplateMessageItemBody.js');
-require('./chunks/bundle-COwRojr8.js');
+require('./chunks/bundle-CDIVI7bT.js');
 require('./ui/FallbackTemplateMessageItemBody.tsx.js');
 require('./ui/LoadingTemplateMessageItemBody.tsx.js');
 require('./ui/FeedbackIconButton.js');
@@ -133,58 +132,58 @@ require('./ui/MessageFeedbackModal.js');
 require('./ui/Input.js');
 require('./ui/MessageFeedbackFailedModal.js');
 require('./GroupChannel/components/SuggestedReplies.js');
-require('./chunks/bundle-tBlsssMV.js');
+require('./chunks/bundle-BaM5Ed34.js');
 require('./GroupChannel/components/FileViewer.js');
-require('./chunks/bundle-COM-Vp38.js');
+require('./chunks/bundle-X03vJTEw.js');
 require('./GroupChannel/components/RemoveMessageModal.js');
-require('./chunks/bundle-ROscI12S.js');
-require('./chunks/bundle-Bcgo-8Wz.js');
+require('./chunks/bundle-BBoPpUMg.js');
+require('./chunks/bundle-D8gia2Hg.js');
 require('./Channel/utils/getMessagePartsInfo.js');
 require('./Channel/utils/compareMessagesForGrouping.js');
 require('./GroupChannel/components/UnreadCount.js');
 require('./GroupChannel/components/FrozenNotification.js');
 require('./ui/TypingIndicatorBubble.js');
 require('./GroupChannel/components/MessageInputWrapper.js');
-require('./chunks/bundle-CFZ-HdZV.js');
+require('./chunks/bundle-DMGpM9Ye.js');
 require('./GroupChannel/components/SuggestedMentionList.js');
 require('./ui/QuoteMessageInput.js');
 require('./VoiceRecorder/useVoiceRecorder.js');
-require('./chunks/bundle-xeBPrPlZ.js');
-require('./chunks/bundle-CGKSHSXZ.js');
+require('./chunks/bundle-BTod-EOk.js');
+require('./chunks/bundle-Q4icQ1qH.js');
 require('./GroupChannelList/context.js');
 require('./GroupChannelList/components/GroupChannelListUI.js');
-require('./chunks/bundle-CRtD-LF2.js');
+require('./chunks/bundle-JtgSY0zB.js');
 require('./GroupChannelList/components/GroupChannelListHeader.js');
 require('./EditUserProfile.js');
 require('./EditUserProfile/context.js');
 require('./EditUserProfile/components/EditUserProfileUI.js');
 require('./GroupChannelList/components/GroupChannelPreviewAction.js');
 require('./GroupChannelList/components/GroupChannelListItem.js');
-require('./chunks/bundle-Vfq24KlC.js');
+require('./chunks/bundle-DeQZn8GZ.js');
 require('./ui/Badge.js');
 require('./ui/MentionUserLabel.js');
 require('./GroupChannelList/components/AddGroupChannel.js');
-require('./chunks/bundle-BrrYIsp-.js');
+require('./chunks/bundle-BhCAlWKP.js');
 require('./CreateChannel.js');
 require('./CreateChannel/components/CreateChannelUI.js');
-require('./chunks/bundle-DiMvAbrw.js');
+require('./chunks/bundle-DAIf7fWo.js');
 require('./CreateChannel/components/InviteUsers.js');
 require('./CreateChannel/components/SelectChannelType.js');
 require('./Channel/context.js');
-require('./chunks/bundle-CkBOTPET.js');
-require('./chunks/bundle-C-sGYQWV.js');
-require('./chunks/bundle-DhgoVGKx.js');
-require('./chunks/bundle-DhB9bJf0.js');
-require('./chunks/bundle-BVXtMOiP.js');
+require('./chunks/bundle-T4lp5F85.js');
+require('./chunks/bundle-DRy7eNJ0.js');
+require('./chunks/bundle-7UHC8ujA.js');
+require('./chunks/bundle-_ekaw3iI.js');
+require('./chunks/bundle-BXEGf4g2.js');
 require('./Channel/components/ChannelUI.js');
 require('./Channel/components/ChannelHeader.js');
 require('./Channel/components/MessageList.js');
 require('./Channel/components/Message.js');
 require('./Channel/components/FileViewer.js');
 require('./Channel/components/RemoveMessageModal.js');
-require('./chunks/bundle-C1XDY35t.js');
+require('./chunks/bundle-D-qAbZhp.js');
 require('./Channel/components/MessageInput.js');
-require('./chunks/bundle-CMhCS1lF.js');
+require('./chunks/bundle-BSAWCcb_.js');
 require('./ChannelList/components/ChannelListUI.js');
 require('./ChannelList/components/ChannelPreview.js');
 require('./ChannelList/components/AddChannel.js');
@@ -198,7 +197,7 @@ require('./ui/Accordion.js');
 require('./ui/AccordionGroup.js');
 require('./ui/Toggle.js');
 require('./ChannelSettings/components/UserListItem.js');
-require('./chunks/bundle-DEOaRh_m.js');
+require('./chunks/bundle-Bi-soOXA.js');
 require('./ChannelSettings/components/LeaveChannel.js');
 require('./ChannelSettings/components/UserPanel.js');
 require('./MessageSearch/components/MessageSearchUI.js');
@@ -209,9 +208,9 @@ require('./Thread/context.js');
 require('./Thread/context/types.js');
 require('./Thread/components/ThreadUI.js');
 require('./Thread/components/ParentMessageInfo.js');
-require('./chunks/bundle-BGhSB8RW.js');
+require('./chunks/bundle-4vdy6J5u.js');
 require('./Thread/components/ParentMessageInfoItem.js');
-require('./chunks/bundle-Chvgl0tl.js');
+require('./chunks/bundle-Dnq2YP_l.js');
 require('./Thread/components/ThreadHeader.js');
 require('./Thread/components/ThreadList.js');
 require('./Thread/components/ThreadListItem.js');
@@ -219,312 +218,312 @@ require('date-fns');
 require('./Thread/components/ThreadMessageInput.js');
 require('./Channel/hooks/useHandleUploadFiles.js');
 
-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, enableLegacyChannelModules = props.enableLegacyChannelModules;
-    var updateFocusedChannel = 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);
-        }
-    };
-    var onClickThreadReply = function (_a) {
-        var message = _a.message;
-        // parent message
-        setShowSettings(false);
-        setShowSearch(false);
-        if (replyType === 'THREAD') {
-            setThreadTargetMessage(message);
-            setShowThread(true);
-        }
-    };
-    var channelListProps = {
-        allowProfileEdit: allowProfileEdit,
-        activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
-        onProfileEditSuccess: onProfileEditSuccess,
-        disableAutoSelect: disableAutoSelect,
-        onChannelSelect: updateFocusedChannel,
-        // for GroupChannelList
-        selectedChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
-        onChannelCreated: updateFocusedChannel,
-        onUserProfileUpdated: onProfileEditSuccess,
-    };
-    var channelProps = {
-        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: onClickThreadReply,
-        onQuoteMessageClick: function (_a) {
-            var message = _a.message;
-            // thread message
-            setShowSettings(false);
-            setShowSearch(false);
-            if (replyType === 'THREAD') {
-                setThreadTargetMessage(message);
-                setShowThread(true);
-            }
-        },
-        animatedMessage: highlightedMessage,
-        onMessageAnimated: function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); },
-        showSearchIcon: showSearchIcon,
-        startingPoint: startingPoint,
-        isReactionEnabled: isReactionEnabled,
-        replyType: replyType,
-        isMessageGroupingEnabled: isMessageGroupingEnabled,
-        isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
-        // for GroupChannel
-        animatedMessageId: highlightedMessage,
-        onReplyInThreadClick: onClickThreadReply,
-    };
-    return (React.createElement("div", { className: "sendbird-app__wrap" },
-        React.createElement("div", { className: "sendbird-app__channellist-wrap" }, enableLegacyChannelModules ? React.createElement(ChannelList, _tslib.__assign({}, channelListProps)) : React.createElement(GroupChannelList.GroupChannelList, _tslib.__assign({}, channelListProps))),
-        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        ") }, enableLegacyChannelModules ? React.createElement(Channel, _tslib.__assign({}, channelProps)) : React.createElement(GroupChannel.GroupChannel, _tslib.__assign({}, channelProps))),
-        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) !== highlightedMessage) {
-                    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
-                }
-                setTimeout(function () {
-                    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
-                    setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(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, enableLegacyChannelModules = props.enableLegacyChannelModules;
+    var updateFocusedChannel = 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);
+        }
+    };
+    var onClickThreadReply = function (_a) {
+        var message = _a.message;
+        // parent message
+        setShowSettings(false);
+        setShowSearch(false);
+        if (replyType === 'THREAD') {
+            setThreadTargetMessage(message);
+            setShowThread(true);
+        }
+    };
+    var channelListProps = {
+        allowProfileEdit: allowProfileEdit,
+        activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
+        onProfileEditSuccess: onProfileEditSuccess,
+        disableAutoSelect: disableAutoSelect,
+        onChannelSelect: updateFocusedChannel,
+        // for GroupChannelList
+        selectedChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
+        onChannelCreated: updateFocusedChannel,
+        onUserProfileUpdated: onProfileEditSuccess,
+    };
+    var channelProps = {
+        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: onClickThreadReply,
+        onQuoteMessageClick: function (_a) {
+            var message = _a.message;
+            // thread message
+            setShowSettings(false);
+            setShowSearch(false);
+            if (replyType === 'THREAD') {
+                setThreadTargetMessage(message);
+                setShowThread(true);
+            }
+        },
+        animatedMessage: highlightedMessage,
+        onMessageAnimated: function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); },
+        showSearchIcon: showSearchIcon,
+        startingPoint: startingPoint,
+        isReactionEnabled: isReactionEnabled,
+        replyType: replyType,
+        isMessageGroupingEnabled: isMessageGroupingEnabled,
+        isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
+        // for GroupChannel
+        animatedMessageId: highlightedMessage,
+        onReplyInThreadClick: onClickThreadReply,
+    };
+    return (React.createElement("div", { className: "sendbird-app__wrap" },
+        React.createElement("div", { className: "sendbird-app__channellist-wrap" }, enableLegacyChannelModules ? React.createElement(ChannelList, _tslib.__assign({}, channelListProps)) : React.createElement(GroupChannelList.GroupChannelList, _tslib.__assign({}, channelListProps))),
+        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        ") }, enableLegacyChannelModules ? React.createElement(Channel, _tslib.__assign({}, channelProps)) : React.createElement(GroupChannel.GroupChannel, _tslib.__assign({}, channelProps))),
+        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) !== highlightedMessage) {
+                    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
+                }
+                setTimeout(function () {
+                    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
+                    setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(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, startingPoint = props.startingPoint, setStartingPoint = props.setStartingPoint, threadTargetMessage = props.threadTargetMessage, setThreadTargetMessage = props.setThreadTargetMessage, highlightedMessage = props.highlightedMessage, setHighlightedMessage = props.setHighlightedMessage, enableLegacyChannelModules = props.enableLegacyChannelModules;
-    var _d = React.useState(PANELS.CHANNEL_LIST), panel = _d[0], setPanel = _d[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 setHighlightedMessage(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]);
-    var channelListProps = {
-        allowProfileEdit: allowProfileEdit,
-        onProfileEditSuccess: onProfileEditSuccess,
-        disableAutoSelect: true,
-        onChannelSelect: function (channel) {
-            setCurrentChannel(channel);
-            if (channel) {
-                setPanel(PANELS.CHANNEL);
-            }
-            else {
-                setPanel(PANELS.CHANNEL_LIST);
-            }
-        },
-        // for GroupChannelList
-        onChannelCreated: function (channel) {
-            setCurrentChannel(channel);
-            setPanel(PANELS.CHANNEL);
-        },
-        onUserProfileUpdated: onProfileEditSuccess,
-    };
-    var channelProps = {
-        channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
-        onChatHeaderActionClick: function () {
-            setPanel(PANELS.CHANNEL_SETTINGS);
-        },
-        onBackClick: function () {
-            setPanel(PANELS.CHANNEL_LIST);
-            pause(VoicePlayer_context.ALL);
-        },
-        onSearchClick: function () {
-            setPanel(PANELS.MESSAGE_SEARCH);
-        },
-        onReplyInThread: function (_a) {
-            var message = _a.message;
-            if (replyType === 'THREAD') {
-                setPanel(PANELS.THREAD);
-                setThreadTargetMessage(message);
-            }
-        },
-        onQuoteMessageClick: function (_a) {
-            var message = _a.message;
-            // thread message
-            if (replyType === 'THREAD') {
-                setThreadTargetMessage(message);
-                setPanel(PANELS.THREAD);
-            }
-        },
-        animatedMessage: highlightedMessage,
-        onMessageAnimated: function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); },
-        showSearchIcon: showSearchIcon,
-        startingPoint: startingPoint,
-        isReactionEnabled: isReactionEnabled,
-        replyType: replyType,
-        isMessageGroupingEnabled: isMessageGroupingEnabled,
-        isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
-        // for GroupChannel
-        animatedMessageId: highlightedMessage,
-        onReplyInThreadClick: function (_a) {
-            var message = _a.message;
-            if (replyType === 'THREAD') {
-                setPanel(PANELS.THREAD);
-                setThreadTargetMessage(message);
-            }
-        },
-    };
-    return (React.createElement("div", { className: "sb_mobile" },
-        panel === PANELS.CHANNEL_LIST && (React.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React.createElement(ChannelList, _tslib.__assign({}, channelListProps)) : React.createElement(GroupChannelList.GroupChannelList, _tslib.__assign({}, channelListProps)))),
-        panel === PANELS.CHANNEL && (React.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React.createElement(Channel, _tslib.__assign({}, channelProps)) : React.createElement(GroupChannel.GroupChannel, _tslib.__assign({}, channelProps)))),
-        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);
-                        setHighlightedMessage(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, startingPoint = props.startingPoint, setStartingPoint = props.setStartingPoint, threadTargetMessage = props.threadTargetMessage, setThreadTargetMessage = props.setThreadTargetMessage, highlightedMessage = props.highlightedMessage, setHighlightedMessage = props.setHighlightedMessage, enableLegacyChannelModules = props.enableLegacyChannelModules;
+    var _d = React.useState(PANELS.CHANNEL_LIST), panel = _d[0], setPanel = _d[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 setHighlightedMessage(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]);
+    var channelListProps = {
+        allowProfileEdit: allowProfileEdit,
+        onProfileEditSuccess: onProfileEditSuccess,
+        disableAutoSelect: true,
+        onChannelSelect: function (channel) {
+            setCurrentChannel(channel);
+            if (channel) {
+                setPanel(PANELS.CHANNEL);
+            }
+            else {
+                setPanel(PANELS.CHANNEL_LIST);
+            }
+        },
+        // for GroupChannelList
+        onChannelCreated: function (channel) {
+            setCurrentChannel(channel);
+            setPanel(PANELS.CHANNEL);
+        },
+        onUserProfileUpdated: onProfileEditSuccess,
+    };
+    var channelProps = {
+        channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+        onChatHeaderActionClick: function () {
+            setPanel(PANELS.CHANNEL_SETTINGS);
+        },
+        onBackClick: function () {
+            setPanel(PANELS.CHANNEL_LIST);
+            pause(VoicePlayer_context.ALL);
+        },
+        onSearchClick: function () {
+            setPanel(PANELS.MESSAGE_SEARCH);
+        },
+        onReplyInThread: function (_a) {
+            var message = _a.message;
+            if (replyType === 'THREAD') {
+                setPanel(PANELS.THREAD);
+                setThreadTargetMessage(message);
+            }
+        },
+        onQuoteMessageClick: function (_a) {
+            var message = _a.message;
+            // thread message
+            if (replyType === 'THREAD') {
+                setThreadTargetMessage(message);
+                setPanel(PANELS.THREAD);
+            }
+        },
+        animatedMessage: highlightedMessage,
+        onMessageAnimated: function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); },
+        showSearchIcon: showSearchIcon,
+        startingPoint: startingPoint,
+        isReactionEnabled: isReactionEnabled,
+        replyType: replyType,
+        isMessageGroupingEnabled: isMessageGroupingEnabled,
+        isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
+        // for GroupChannel
+        animatedMessageId: highlightedMessage,
+        onReplyInThreadClick: function (_a) {
+            var message = _a.message;
+            if (replyType === 'THREAD') {
+                setPanel(PANELS.THREAD);
+                setThreadTargetMessage(message);
+            }
+        },
+    };
+    return (React.createElement("div", { className: "sb_mobile" },
+        panel === PANELS.CHANNEL_LIST && (React.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React.createElement(ChannelList, _tslib.__assign({}, channelListProps)) : React.createElement(GroupChannelList.GroupChannelList, _tslib.__assign({}, channelListProps)))),
+        panel === PANELS.CHANNEL && (React.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React.createElement(Channel, _tslib.__assign({}, channelProps)) : React.createElement(GroupChannel.GroupChannel, _tslib.__assign({}, channelProps)))),
+        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);
+                        setHighlightedMessage(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, enableLegacyChannelModules = props.enableLegacyChannelModules;
-    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, enableLegacyChannelModules: enableLegacyChannelModules }))
-        : (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, enableLegacyChannelModules: enableLegacyChannelModules }))));
+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, enableLegacyChannelModules = props.enableLegacyChannelModules;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var globalConfigs = 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 : resolvedReplyType.getCaseResolvedReplyType(globalConfigs.groupChannel.replyType).upperCase;
+    var isReactionEnabled = (_b = props.isReactionEnabled) !== null && _b !== void 0 ? _b : globalConfigs.groupChannel.enableReactions;
+    var showSearchIcon = (_c = props.showSearchIcon) !== null && _c !== void 0 ? _c : globalConfigs.groupChannelSettings.enableMessageSearch;
+    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, enableLegacyChannelModules: enableLegacyChannelModules }))
+        : (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, enableLegacyChannelModules: enableLegacyChannelModules }))));
 };
 
-/**
- * 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, _w = props.enableLegacyChannelModules, enableLegacyChannelModules = _w === void 0 ? false : _w;
-    var _x = React.useState(null), currentChannel = _x[0], setCurrentChannel = _x[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, enableLegacyChannelModules: enableLegacyChannelModules })));
+/**
+ * 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, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, _v = props.isUserIdUsedForNickname, isUserIdUsedForNickname = _v === void 0 ? true : _v, _w = props.enableLegacyChannelModules, enableLegacyChannelModules = _w === void 0 ? false : _w, 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, isTypingIndicatorEnabledOnChannelList = props.isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = props.isMessageReceiptStatusEnabledOnChannelList;
+    var _x = React.useState(null), currentChannel = _x[0], setCurrentChannel = _x[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, disableMarkAsDelivered: disableMarkAsDelivered, renderUserProfile: renderUserProfile, imageCompression: imageCompression, isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled, voiceRecord: voiceRecord, onUserProfileMessage: function (channel) {
+            setCurrentChannel(channel);
+        }, uikitOptions: uikitOptions, isUserIdUsedForNickname: isUserIdUsedForNickname, sdkInitParams: sdkInitParams, customExtensionParams: customExtensionParams, eventHandlers: eventHandlers, isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList, replyType: replyType, showSearchIcon: showSearchIcon, disableUserProfile: disableUserProfile, isReactionEnabled: isReactionEnabled, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled },
+        React.createElement(AppLayout, { isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, enableLegacyChannelModules: enableLegacyChannelModules, isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon })));
 }
 
 module.exports = App;