@sendbird/uikit-react 3.10.1 → 3.11.0

package/cjs/App.js

@@ -2,132 +2,123 @@
 
 var React = require('react');
 var SendbirdProvider = require('./SendbirdProvider.js');
-var MediaQueryContext = require('./chunks/bundle-WzrocC57.js');
-var ChannelList = require('./ChannelList.js');
+var MediaQueryContext = require('./chunks/bundle-2ToiwW-_.js');
+var _tslib = require('./chunks/bundle-RVs527mS.js');
+var GroupChannelProvider = require('./chunks/bundle-85DGianx.js');
+var Channel_components_ChannelUI = require('./chunks/bundle-oTDe-k6e.js');
+var ChannelList_components_ChannelPreview = require('./chunks/bundle-plE_NeWt.js');
+var ChannelList_components_ChannelListUI = require('./chunks/bundle-g2rKMwnQ.js');
+var LocalizationContext = require('./chunks/bundle-WLD9KKbn.js');
+var ui_ContextMenu = require('./ui/ContextMenu.js');
+var ui_IconButton = require('./ui/IconButton.js');
+var ui_Icon = require('./ui/Icon.js');
+var ChannelList_components_ChannelPreviewAction = require('./chunks/bundle-9fFxVdSK.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+var ui_MessageStatus = require('./chunks/bundle-8XyvQRnm.js');
+var ChannelList_components_AddChannel = require('./chunks/bundle-5cpSg7Yt.js');
 var Channel = require('./Channel.js');
+var ChannelList = require('./ChannelList.js');
 var ChannelSettings = require('./ChannelSettings.js');
 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-INJtS58R.js');
-var VoicePlayer_context = require('./chunks/bundle-rgxTgHrK.js');
-require('./chunks/bundle-bXLZZTmP.js');
+var uuid = require('./chunks/bundle-sW6CpN9W.js');
+var VoicePlayer_context = require('./chunks/bundle-_apVcG-_.js');
 require('@sendbird/uikit-tools');
 require('./withSendbird.js');
 require('css-vars-ponyfill');
-require('./chunks/bundle-65IwoStx.js');
-require('./chunks/bundle-JOBLCwk9.js');
+require('./chunks/bundle--RWWGoZo.js');
+require('./chunks/bundle-rPjvPmtP.js');
+require('./chunks/bundle-vFjv8pGX.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
-require('./chunks/bundle-p6kWiWDv.js');
+require('./chunks/bundle-fnv2bNo-.js');
 require('./utils/message/getOutgoingMessageState.js');
-require('./chunks/bundle-LRCFL23q.js');
+require('./chunks/bundle-nQDclaWr.js');
+require('./chunks/bundle-YyXY-feT.js');
 require('./VoiceRecorder/context.js');
-require('./chunks/bundle-qtXdbPNE.js');
-require('./chunks/bundle-kSScygqj.js');
-require('./chunks/bundle-RSklGv-u.js');
-require('./chunks/bundle-Oc2T5_VP.js');
+require('./chunks/bundle-lnLwvZ7H.js');
 require('react-dom');
-require('./ui/IconButton.js');
 require('./ui/Button.js');
-require('./chunks/bundle-7J3nX_hP.js');
-require('./ui/Icon.js');
-require('./chunks/bundle-JbxviE94.js');
-require('./chunks/bundle-VB_a0u7i.js');
+require('./chunks/bundle-JaD2Ao-u.js');
+require('./chunks/bundle-OBj337Le.js');
+require('./chunks/bundle-SggLEV_z.js');
+require('./chunks/bundle-ZL4COF6I.js');
+require('./chunks/bundle-60IjeSgc.js');
 require('./hooks/useModal.js');
-require('./chunks/bundle-Jcrboe06.js');
-require('./chunks/bundle-135pRm7i.js');
-require('./chunks/bundle-7AS0Rcch.js');
-require('./ChannelList/components/ChannelListUI.js');
-require('./ChannelList/components/ChannelListHeader.js');
-require('./chunks/bundle-7VJjqIPJ.js');
-require('./ui/ImageRenderer.js');
-require('./chunks/bundle--d5w7FVF.js');
-require('./ChannelList/components/AddChannel.js');
-require('./CreateChannel.js');
-require('./CreateChannel/components/CreateChannelUI.js');
-require('./chunks/bundle-r8Z3GYqh.js');
-require('./sendbirdSelectors.js');
-require('./CreateChannel/components/InviteUsers.js');
-require('./ui/UserListItem.js');
-require('./ui/MutedAvatarOverlay.js');
-require('./ui/Checkbox.js');
-require('./ui/UserProfile.js');
-require('./ui/ContextMenu.js');
-require('./ui/SortByRow.js');
-require('./CreateChannel/components/SelectChannelType.js');
-require('./ChannelList/components/ChannelPreview.js');
-require('./ui/ChannelAvatar.js');
-require('./chunks/bundle-vphYV1gz.js');
-require('./ui/Badge.js');
-require('./chunks/bundle-ptZslG_m.js');
-require('./chunks/bundle-6ZegaDWX.js');
-require('./ui/Loader.js');
-require('./chunks/bundle-J_ooPKgS.js');
-require('./chunks/bundle-2gCdAlxv.js');
-require('./ui/MentionUserLabel.js');
-require('./chunks/bundle-Dax6YIIr.js');
-require('./ui/TextButton.js');
-require('./chunks/bundle-7J-qpEzM.js');
-require('./Channel/components/TypingIndicator.js');
-require('./chunks/bundle-Ue5GkT2H.js');
-require('./chunks/bundle-zrsbDQGp.js');
-require('./chunks/bundle-XaLiuh0L.js');
 require('@sendbird/chat/message');
-require('./chunks/bundle--MJd6Gw1.js');
-require('./chunks/bundle-UaSM_xZY.js');
+require('./chunks/bundle-3S8jBmCV.js');
+require('./chunks/bundle-wQUBcS0L.js');
+require('./chunks/bundle-C42WLw1z.js');
+require('./chunks/bundle-_TBSquwd.js');
+require('./chunks/bundle-a1nOrOrG.js');
+require('./chunks/bundle-guyZxs5x.js');
+require('./chunks/bundle-K8ngPNTR.js');
+require('./Channel/context.js');
+require('./chunks/bundle-yf5herNq.js');
+require('./chunks/bundle-w4VdLYPs.js');
+require('./chunks/bundle-7sO7MuTY.js');
+require('./chunks/bundle-duGLRUrw.js');
+require('./chunks/bundle-1n4GnjYf.js');
 require('./Channel/hooks/useInitialMessagesFetch.js');
-require('./chunks/bundle-3K153hLM.js');
-require('./chunks/bundle-TFo3Eb8z.js');
-require('./ChannelList/components/ChannelPreviewAction.js');
-require('./EditUserProfile.js');
-require('./EditUserProfile/context.js');
-require('./EditUserProfile/components/EditUserProfileUI.js');
-require('./ui/Input.js');
+require('./chunks/bundle-4hsD0CCh.js');
+require('./chunks/bundle-iRjY_BU4.js');
+require('./chunks/bundle-LmzJA_0-.js');
+require('./ui/ChannelAvatar.js');
+require('./chunks/bundle-rUpy0DGt.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-wU4qxzey.js');
+require('./chunks/bundle-lXjDRYAu.js');
+require('./chunks/bundle-4OXJViEd.js');
+require('./chunks/bundle-le086Dbq.js');
 require('./ui/PlaceHolder.js');
-require('./Channel/components/ChannelUI.js');
-require('./ui/ConnectionStatus.js');
-require('./Channel/components/ChannelHeader.js');
-require('./chunks/bundle-BH9aeaqG.js');
-require('./chunks/bundle-AbGazomk.js');
-require('./Channel/components/Message.js');
-require('./Channel/components/SuggestedMentionList.js');
-require('./chunks/bundle-zgoic8x9.js');
-require('./Thread/context.js');
-require('./Thread/context/types.js');
+require('./ui/Loader.js');
+require('./chunks/bundle-JwSYMgZa.js');
+require('./chunks/bundle-WuJcM_O3.js');
+require('./chunks/bundle-L5q_NWiq.js');
+require('./Message/hooks/useDirtyGetMentions.js');
 require('./ui/DateSeparator.js');
+require('./chunks/bundle-Og0K_sLb.js');
 require('./ui/MessageInput.js');
-require('./chunks/bundle-hEYmMlZe.js');
+require('./chunks/bundle-RC4m8KcZ.js');
 require('dompurify');
-require('./chunks/bundle-hXzxY0NJ.js');
-require('./chunks/bundle-OVfymd1y.js');
-require('./chunks/bundle-9iE0HY96.js');
+require('./chunks/bundle-ZqkDqz4X.js');
+require('./chunks/bundle-dLwo2XPj.js');
+require('./chunks/bundle-7IKA03Ad.js');
+require('./chunks/bundle-JReI_QbA.js');
 require('./ui/MessageContent.js');
 require('./ui/MessageItemMenu.js');
-require('./chunks/bundle-GsUulypb.js');
+require('./chunks/bundle-L9oXX97B.js');
+require('./ui/SortByRow.js');
 require('./ui/MessageItemReactionMenu.js');
 require('./ui/ReactionButton.js');
+require('./chunks/bundle-rmOQxjwa.js');
 require('./ui/EmojiReactions.js');
 require('./ui/ReactionBadge.js');
 require('./ui/BottomSheet.js');
+require('./ui/UserListItem.js');
+require('./ui/MutedAvatarOverlay.js');
+require('./ui/Checkbox.js');
+require('./ui/UserProfile.js');
+require('./sendbirdSelectors.js');
 require('./ui/Tooltip.js');
 require('./ui/TooltipWrapper.js');
 require('./Message/context.js');
 require('./ui/AdminMessage.js');
 require('./ui/QuoteMessage.js');
-require('./chunks/bundle-aoIToceJ.js');
-require('./chunks/bundle-s82XYT1Q.js');
+require('./chunks/bundle-JVylXDBB.js');
+require('./chunks/bundle-3VBtozeG.js');
 require('./ui/ThreadReplies.js');
 require('./ui/OGMessageItemBody.js');
-require('./chunks/bundle-TxdziCwH.js');
+require('./chunks/bundle-28M_gXGl.js');
 require('./ui/MentionLabel.js');
 require('./ui/LinkLabel.js');
 require('./ui/TextMessageItemBody.js');
 require('./ui/FileMessageItemBody.js');
-require('./chunks/bundle-JVe1J2FX.js');
-require('./chunks/bundle-68NdNRjR.js');
-require('./chunks/bundle-n6iwTZAo.js');
+require('./ui/TextButton.js');
+require('./chunks/bundle-Bx0FCMKL.js');
+require('./chunks/bundle-3GWdY_5G.js');
+require('./chunks/bundle-_QsPNZ6J.js');
 require('./ui/VoiceMessageItemBody.js');
 require('./ui/ProgressBar.js');
 require('./VoicePlayer/useVoicePlayer.js');
@@ -137,23 +128,38 @@ require('./ui/UnknownMessageItemBody.js');
 require('./ui/FeedbackIconButton.js');
 require('./ui/MobileFeedbackMenu.js');
 require('./Channel/components/MessageFeedbackModal.js');
-require('./Channel/components/FileViewer.js');
-require('./Channel/components/RemoveMessageModal.js');
-require('./chunks/bundle-5Nd6zn0d.js');
-require('./Message/hooks/useDirtyGetMentions.js');
+require('./ui/Input.js');
+require('./chunks/bundle-RPY1irFl.js');
+require('./chunks/bundle-KUtVpakA.js');
+require('./chunks/bundle-nTv23k8q.js');
+require('./chunks/bundle-p7twnCCD.js');
+require('./chunks/bundle-7zgRAH2f.js');
 require('./Channel/utils/getMessagePartsInfo.js');
 require('./Channel/utils/compareMessagesForGrouping.js');
-require('./Channel/components/UnreadCount.js');
-require('./Channel/components/FrozenNotification.js');
-require('./chunks/bundle-tad4_cNF.js');
+require('./chunks/bundle-fvz26Ije.js');
+require('./chunks/bundle-GRS8tlu-.js');
+require('./chunks/bundle-Oti8UWhr.js');
 require('./ui/TypingIndicatorBubble.js');
-require('./Channel/components/MessageInput.js');
+require('./chunks/bundle-ziLsN5lV.js');
+require('./ui/ConnectionStatus.js');
+require('./chunks/bundle-W1vXanLo.js');
 require('./ui/QuoteMessageInput.js');
-require('./chunks/bundle-y_gkwZqM.js');
 require('./VoiceRecorder/useVoiceRecorder.js');
-require('./chunks/bundle-Dz3ncvS3.js');
-require('./Channel/hooks/useHandleUploadFiles.js');
-require('./chunks/bundle-v02q7K8T.js');
+require('./chunks/bundle-Z-IXQ2N3.js');
+require('./chunks/bundle-aAOHT0Qv.js');
+require('./Channel/components/MessageInput.js');
+require('./chunks/bundle-9ZxGYXTj.js');
+require('./ui/Badge.js');
+require('./ui/MentionUserLabel.js');
+require('./chunks/bundle-Mq0jUvZk.js');
+require('./EditUserProfile.js');
+require('./EditUserProfile/context.js');
+require('./EditUserProfile/components/EditUserProfileUI.js');
+require('./CreateChannel.js');
+require('./CreateChannel/components/CreateChannelUI.js');
+require('./chunks/bundle-BRRuC2D3.js');
+require('./CreateChannel/components/InviteUsers.js');
+require('./CreateChannel/components/SelectChannelType.js');
 require('./ChannelSettings/components/ChannelSettingsUI.js');
 require('./ChannelSettings/context.js');
 require('./ChannelSettings/components/ChannelProfile.js');
@@ -161,70 +167,204 @@ require('./ChannelSettings/components/EditDetailsModal.js');
 require('./ChannelSettings/components/ModerationPanel.js');
 require('./ui/Accordion.js');
 require('./ui/AccordionGroup.js');
-require('./chunks/bundle-y8EiLlDT.js');
+require('./chunks/bundle-QCo3MNRk.js');
 require('./ui/Toggle.js');
 require('./ChannelSettings/components/UserListItem.js');
-require('./chunks/bundle-GDX6wyym.js');
+require('./chunks/bundle-XNa54U87.js');
 require('./ChannelSettings/components/LeaveChannel.js');
 require('./ChannelSettings/components/UserPanel.js');
 require('./MessageSearch/components/MessageSearchUI.js');
 require('./MessageSearch/context.js');
 require('./ui/MessageSearchItem.js');
 require('./ui/MessageSearchFileItem.js');
+require('./Thread/context.js');
+require('./Thread/context/types.js');
 require('./Thread/components/ThreadUI.js');
 require('./Thread/components/ParentMessageInfo.js');
-require('./chunks/bundle-CUa6Hz7c.js');
+require('./chunks/bundle-Z2aMvN9Y.js');
 require('./Thread/components/ParentMessageInfoItem.js');
+require('./chunks/bundle-v2kRYowu.js');
 require('./Thread/components/ThreadHeader.js');
 require('./Thread/components/ThreadList.js');
 require('./Thread/components/ThreadListItem.js');
 require('date-fns');
 require('./Thread/components/ThreadMessageInput.js');
+require('./Channel/hooks/useHandleUploadFiles.js');
+
+var GroupChannelUI = function (props) {
+    var context = GroupChannelProvider.useGroupChannelContext();
+    var currentChannel = context.currentChannel, channelUrl = context.channelUrl, loading = context.loading;
+    return (React.createElement(Channel_components_ChannelUI.GroupChannelUIView, _tslib.__assign({}, props, context, { requestedChannelUrl: channelUrl, loading: loading, isInvalid: channelUrl && !currentChannel, renderMessageInput: function () {
+            var _a, _b;
+            return ((_b = (_a = props.renderMessageInput) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : React.createElement(Channel_components_ChannelUI.MessageInputWrapper, _tslib.__assign({}, props)));
+        } })));
+};
+
+var GroupChannel = function (props) {
+    return (React.createElement(GroupChannelProvider.GroupChannelProvider, _tslib.__assign({}, props),
+        React.createElement(GroupChannelUI, _tslib.__assign({}, props))));
+};
+
+function GroupChannelPreviewAction(_a) {
+    var channel = _a.channel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onLeaveChannel = _a.onLeaveChannel;
+    var parentRef = React.useRef(null);
+    var parentContainerRef = React.useRef(null);
+    var _c = React.useState(false), showModal = _c[0], setShowModal = _c[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { ref: parentContainerRef, tabIndex: 0, role: "button", style: { display: 'inline-block' }, onKeyDown: function (e) { return e.stopPropagation(); }, onClick: function (e) { return e.stopPropagation(); } },
+        React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { ref: parentRef, onClick: toggleDropdown, height: "32px", width: "32px" },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentRef: parentRef, parentContainRef: parentContainerRef, closeDropdown: closeDropdown },
+                React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                        if (disabled) {
+                            return;
+                        }
+                        setShowModal(true);
+                        closeDropdown();
+                    }, dataSbId: "channel_list_item_context_menu_leave_channel" }, stringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE))); } }),
+        showModal && (React.createElement(ChannelList_components_ChannelPreviewAction.LeaveGroupChannel, { channel: channel, onSubmit: function () {
+                setShowModal(false);
+                onLeaveChannel();
+            }, onCancel: function () { return setShowModal(false); } }))));
+}
+
+var GroupChannelListItem = function (_a) {
+    var _b, _c, _d;
+    var channel = _a.channel, isSelected = _a.isSelected, isTyping = _a.isTyping, renderChannelAction = _a.renderChannelAction, onLeaveChannel = _a.onLeaveChannel, onClick = _a.onClick, tabIndex = _a.tabIndex;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var userId = config.userId;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _e = ChannelList_components_ChannelPreview.useGroupChannelListContext(), selectedChannelUrl = _e.selectedChannelUrl, typingChannelUrls = _e.typingChannelUrls, _f = _e.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _f === void 0 ? false : _f, _g = _e.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _g === void 0 ? false : _g;
+    var isSelectedChannel = isSelected || (channel.url === selectedChannelUrl);
+    var isTypingChannel = isTypingIndicatorEnabled && (isTyping || (typingChannelUrls.includes(channel.url)));
+    var isMessageStatusEnabled = isMessageReceiptStatusEnabled
+        && (!((_b = channel.lastMessage) === null || _b === void 0 ? void 0 : _b.isAdminMessage()))
+        && ((_d = (_c = channel.lastMessage) === null || _c === void 0 ? void 0 : _c.sender) === null || _d === void 0 ? void 0 : _d.userId) === userId;
+    var channelName = ui_MessageStatus.getChannelTitle(channel, userId, stringSet);
+    return (React.createElement(ChannelList_components_ChannelPreview.GroupChannelListItemView, { channel: channel, tabIndex: tabIndex, channelName: channelName, isTyping: isTypingChannel, isSelected: isSelectedChannel, isMessageStatusEnabled: isMessageStatusEnabled, onClick: onClick, onLeaveChannel: onLeaveChannel, renderChannelAction: renderChannelAction }));
+};
+
+var AddGroupChannel = function () {
+    var _a = React.useState(false), createChannelVisible = _a[0], setCreateChannelVisible = _a[1];
+    var _b = ChannelList_components_ChannelPreview.useGroupChannelListContext(), onChannelCreated = _b.onChannelCreated, onBeforeCreateChannel = _b.onBeforeCreateChannel, onCreateChannelClick = _b.onCreateChannelClick;
+    return (React.createElement(ChannelList_components_AddChannel.AddGroupChannelView, { createChannelVisible: createChannelVisible, onChangeCreateChannelVisible: setCreateChannelVisible, onCreateChannelClick: onCreateChannelClick, onBeforeCreateChannel: onBeforeCreateChannel, onChannelCreated: onChannelCreated }));
+};
+
+var GroupChannelListUI = function (props) {
+    var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
+    var _a = ChannelList_components_ChannelPreview.useGroupChannelListContext(), onChannelSelect = _a.onChannelSelect, onThemeChange = _a.onThemeChange, allowProfileEdit = _a.allowProfileEdit, groupChannels = _a.groupChannels, initialized = _a.initialized, loadMore = _a.loadMore, onUserProfileUpdated = _a.onUserProfileUpdated;
+    var _b = useSendbirdStateContext.useSendbirdStateContext(), stores = _b.stores, config = _b.config;
+    var logger = config.logger, isOnline = config.isOnline;
+    var sdk = stores.sdkStore.sdk;
+    var renderListItem = function (renderProps) {
+        var channel = renderProps.item, index = renderProps.index;
+        var onLeaveChannel = function (targetChannel, cb) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        logger.info('ChannelList: Leaving channel', targetChannel);
+                        return [4 /*yield*/, targetChannel.leave()];
+                    case 1:
+                        _a.sent();
+                        logger.info('ChannelList: Leaving channel success');
+                        if (cb && typeof cb === 'function')
+                            cb(targetChannel);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        var onClick = function () {
+            if (isOnline || (sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
+                logger.info('ChannelList: Clicked on channel:', channel);
+                onChannelSelect(channel);
+            }
+            else {
+                logger.warning('ChannelList: Inactivated clicking channel item during offline.');
+            }
+        };
+        if (renderChannelPreview) {
+            return (React.createElement("div", { key: channel.url, onClick: onClick }, renderChannelPreview({ channel: channel, onLeaveChannel: onLeaveChannel })));
+        }
+        return (React.createElement(GroupChannelListItem, { key: channel.url, tabIndex: index, onClick: onClick, channel: channel, onLeaveChannel: function () { return onLeaveChannel(channel, null); }, renderChannelAction: function () { return (React.createElement(GroupChannelPreviewAction, { channel: channel, disabled: !isOnline, onLeaveChannel: function () { return onLeaveChannel(channel, null); } })); } }));
+    };
+    return (React.createElement(ChannelList_components_ChannelListUI.GroupChannelListUIView, { renderHeader: renderHeader, renderChannel: renderListItem, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, onChangeTheme: onThemeChange, allowProfileEdit: allowProfileEdit, onUserProfileUpdated: onUserProfileUpdated, channels: groupChannels, onLoadMore: loadMore, initialized: initialized, renderAddChannel: function () { return React.createElement(AddGroupChannel, null); } }));
+};
+
+var GroupChannelList = function (props) {
+    return (React.createElement(ChannelList_components_ChannelPreview.GroupChannelListProvider, _tslib.__assign({}, props),
+        React.createElement(GroupChannelListUI, _tslib.__assign({}, props))));
+};
 
 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 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" },
-            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 () {
-                    setHighlightedMessage(null);
-                }, onMessageHighlighted: function () {
-                    setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
-                }, showSearchIcon: showSearchIcon, startingPoint: startingPoint, animatedMessage: highlightedMessage, isReactionEnabled: isReactionEnabled, replyType: replyType, isMessageGroupingEnabled: isMessageGroupingEnabled, isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled })),
+        React.createElement("div", { className: "sendbird-app__channellist-wrap" }, enableLegacyChannelModules ? React.createElement(ChannelList, _tslib.__assign({}, channelListProps)) : React.createElement(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, _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);
@@ -255,7 +395,8 @@ var DesktopLayout = function (props) {
                     setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
                 }
                 setTimeout(function () {
-                    setHighlightedMessage(message === null || message === void 0 ? void 0 : message.messageId);
+                    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);
             } }))));
 };
@@ -270,7 +411,7 @@ var PANELS;
 })(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;
+    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;
@@ -322,47 +463,81 @@ var MobileLayout = function (props) {
             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);
-                    if (channel) {
-                        setPanel(PANELS.CHANNEL);
-                    }
-                    else {
-                        setPanel(PANELS.CHANNEL_LIST);
-                    }
-                }, 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: 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' },
+    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, _tslib.__assign({}, channelListProps)))),
+        panel === PANELS.CHANNEL && (React.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React.createElement(Channel, _tslib.__assign({}, channelProps)) : React.createElement(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' },
+        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) {
@@ -371,7 +546,7 @@ var MobileLayout = function (props) {
                         setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
                     });
                 } }))),
-        panel === PANELS.THREAD && (React.createElement("div", { className: 'sb_mobile__panelwrap' },
+        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);
@@ -387,7 +562,7 @@ var MobileLayout = function (props) {
 
 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 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];
@@ -405,8 +580,8 @@ var AppLayout = function (props) {
     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 }))));
+        ? (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 }))));
 };
 
 /**
@@ -419,12 +594,16 @@ function App(props) {
     // 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];
+    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, 
+    // FIXME: Flag change is required when deploying the collection module.
+    _w = props.enableLegacyChannelModules, 
+    // FIXME: Flag change is required when deploying the collection module.
+    enableLegacyChannelModules = _w === void 0 ? true : _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 })));
+        React.createElement(AppLayout, { isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, enableLegacyChannelModules: enableLegacyChannelModules })));
 }
 
 module.exports = App;