@sendbird/uikit-react 3.10.1 → 3.11.0

package/App.js

@@ -1,131 +1,122 @@
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useRef, useState, useContext, useEffect } from 'react';
 import { SendbirdProvider } from './SendbirdProvider.js';
-import { u as useMediaQueryContext } from './chunks/bundle-KmauOTrg.js';
-import ChannelList from './ChannelList.js';
+import { u as useMediaQueryContext } from './chunks/bundle-SbHFlBY0.js';
+import { _ as __assign, b as __awaiter, c as __generator } from './chunks/bundle-fgwje9pW.js';
+import { u as useGroupChannelContext, G as GroupChannelProvider } from './chunks/bundle-7jAH-Rav.js';
+import { G as GroupChannelUIView, M as MessageInputWrapper } from './chunks/bundle-82c4Z7tx.js';
+import { u as useGroupChannelListContext, G as GroupChannelListItemView, a as GroupChannelListProvider } from './chunks/bundle-AnoUW9yQ.js';
+import { G as GroupChannelListUIView } from './chunks/bundle-vBXnDJn4.js';
+import { L as LocalizationContext, u as useLocalization } from './chunks/bundle-hOV701rb.js';
+import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
+import IconButton from './ui/IconButton.js';
+import Icon, { IconTypes, IconColors } from './ui/Icon.js';
+import { L as LeaveGroupChannel } from './chunks/bundle-zuRObww2.js';
+import { useSendbirdStateContext } from './useSendbirdStateContext.js';
+import { d as getChannelTitle } from './chunks/bundle-rgUMi-vG.js';
+import { a as AddGroupChannelView } from './chunks/bundle-oszCig8K.js';
 import Channel from './Channel.js';
+import ChannelList from './ChannelList.js';
 import ChannelSettings from './ChannelSettings.js';
 import MessageSearchPannel from './MessageSearch.js';
 import Thread from './Thread.js';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
-import { useSendbirdStateContext } from './useSendbirdStateContext.js';
-import { u as uuidv4 } from './chunks/bundle-aeQZ5WsP.js';
-import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-J_erGfOo.js';
-import './chunks/bundle-GKopZh-T.js';
+import { u as uuidv4 } from './chunks/bundle-4IsRvL2E.js';
+import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-eHUDbnaD.js';
 import '@sendbird/uikit-tools';
 import './withSendbird.js';
 import 'css-vars-ponyfill';
-import './chunks/bundle-kfNTRju0.js';
-import './chunks/bundle-H2Il__gY.js';
+import './chunks/bundle-n9wVwJwL.js';
+import './chunks/bundle-zLlQw-jW.js';
+import './chunks/bundle-W8as0zrL.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './chunks/bundle-uk2Y0AQu.js';
+import './chunks/bundle-GQt7EDbt.js';
 import './utils/message/getOutgoingMessageState.js';
-import './chunks/bundle-WpHDilD_.js';
+import './chunks/bundle-tOpyp2TM.js';
+import './chunks/bundle-byix4-_Z.js';
 import './VoiceRecorder/context.js';
-import './chunks/bundle-y_LgB6DS.js';
-import './chunks/bundle-YmIrZYPF.js';
-import './chunks/bundle-TV4-nyqN.js';
-import './chunks/bundle-VPanFdbf.js';
+import './chunks/bundle-K0s-Ect1.js';
 import 'react-dom';
-import './ui/IconButton.js';
 import './ui/Button.js';
-import './chunks/bundle-dWJnfDPH.js';
-import './ui/Icon.js';
-import './chunks/bundle-ZKM9Qk_j.js';
-import './chunks/bundle-zpSxKsxM.js';
+import './chunks/bundle-kVopRZZG.js';
+import './chunks/bundle-oRyfuopS.js';
+import './chunks/bundle-zpdae5WH.js';
+import './chunks/bundle-b6xyPdyj.js';
+import './chunks/bundle-WK57RaQR.js';
 import './hooks/useModal.js';
-import './chunks/bundle-ipC2A4Tb.js';
-import './chunks/bundle-ku6CEjGk.js';
-import './chunks/bundle-cXqs96Pt.js';
-import './ChannelList/components/ChannelListUI.js';
-import './ChannelList/components/ChannelListHeader.js';
-import './chunks/bundle-X3h4GiLa.js';
-import './ui/ImageRenderer.js';
-import './chunks/bundle-Kv4GXRTs.js';
-import './ChannelList/components/AddChannel.js';
-import './CreateChannel.js';
-import './CreateChannel/components/CreateChannelUI.js';
-import './chunks/bundle-ZcE3JzW_.js';
-import './sendbirdSelectors.js';
-import './CreateChannel/components/InviteUsers.js';
-import './ui/UserListItem.js';
-import './ui/MutedAvatarOverlay.js';
-import './ui/Checkbox.js';
-import './ui/UserProfile.js';
-import './ui/ContextMenu.js';
-import './ui/SortByRow.js';
-import './CreateChannel/components/SelectChannelType.js';
-import './ChannelList/components/ChannelPreview.js';
-import './ui/ChannelAvatar.js';
-import './chunks/bundle-lmXvuxOb.js';
-import './ui/Badge.js';
-import './chunks/bundle-MyYphU00.js';
-import './chunks/bundle-WDOQg3ty.js';
-import './ui/Loader.js';
-import './chunks/bundle-PZta2LmS.js';
-import './chunks/bundle-VCZsMdpB.js';
-import './ui/MentionUserLabel.js';
-import './chunks/bundle-_-2NCsYr.js';
-import './ui/TextButton.js';
-import './chunks/bundle-OZZH5fXZ.js';
-import './Channel/components/TypingIndicator.js';
-import './chunks/bundle-J79McRkg.js';
-import './chunks/bundle-f9mkey82.js';
-import './chunks/bundle-xsV7pD8p.js';
 import '@sendbird/chat/message';
-import './chunks/bundle-pWIkt9Ng.js';
-import './chunks/bundle-yur9nm4N.js';
+import './chunks/bundle-NQlEMhhs.js';
+import './chunks/bundle-NeB2uoNn.js';
+import './chunks/bundle-2mo18Chz.js';
+import './chunks/bundle-143lYf48.js';
+import './chunks/bundle-BbdMr4SL.js';
+import './chunks/bundle-l3_ubbH6.js';
+import './chunks/bundle-pfcIdF14.js';
+import './Channel/context.js';
+import './chunks/bundle-ZcOjo_4l.js';
+import './chunks/bundle-GpRTDFGV.js';
+import './chunks/bundle-yE5T9BpV.js';
+import './chunks/bundle-nA9SX_Hi.js';
+import './chunks/bundle-T9LQyh_7.js';
 import './Channel/hooks/useInitialMessagesFetch.js';
-import './chunks/bundle-cHbX4Rxo.js';
-import './chunks/bundle-W8t7rR3H.js';
-import './ChannelList/components/ChannelPreviewAction.js';
-import './EditUserProfile.js';
-import './EditUserProfile/context.js';
-import './EditUserProfile/components/EditUserProfileUI.js';
-import './ui/Input.js';
+import './chunks/bundle-NxSCk3As.js';
+import './chunks/bundle-qLmDwx8F.js';
+import './chunks/bundle-aaseqnuB.js';
+import './ui/ChannelAvatar.js';
+import './chunks/bundle-2QckWBqt.js';
+import './ui/ImageRenderer.js';
+import './chunks/bundle-Rq3p335Q.js';
+import './chunks/bundle-kTQOM0SQ.js';
+import './chunks/bundle-7MnAkGtU.js';
+import './chunks/bundle-wsahaI_Z.js';
 import './ui/PlaceHolder.js';
-import './Channel/components/ChannelUI.js';
-import './ui/ConnectionStatus.js';
-import './Channel/components/ChannelHeader.js';
-import './chunks/bundle-JbVZ1Tsw.js';
-import './chunks/bundle-NYZlEPQ4.js';
-import './Channel/components/Message.js';
-import './Channel/components/SuggestedMentionList.js';
-import './chunks/bundle-1WAo3loP.js';
-import './Thread/context.js';
-import './Thread/context/types.js';
+import './ui/Loader.js';
+import './chunks/bundle-qGLQQXlH.js';
+import './chunks/bundle-QOv6Bgtw.js';
+import './chunks/bundle-ueo2Sf-L.js';
+import './Message/hooks/useDirtyGetMentions.js';
 import './ui/DateSeparator.js';
+import './chunks/bundle-j8bOxoFa.js';
 import './ui/MessageInput.js';
-import './chunks/bundle-ETZY-eQc.js';
+import './chunks/bundle-qXA8wWBC.js';
 import 'dompurify';
-import './chunks/bundle-Jp5g4YZl.js';
-import './chunks/bundle-KSjFhl4l.js';
-import './chunks/bundle-Gkl7Q1IK.js';
+import './chunks/bundle-4l6RpXkL.js';
+import './chunks/bundle-qvDlYEM_.js';
+import './chunks/bundle-JHAEGHwc.js';
+import './chunks/bundle-dVzhcuE8.js';
 import './ui/MessageContent.js';
 import './ui/MessageItemMenu.js';
-import './chunks/bundle-iYCB6XN2.js';
+import './chunks/bundle-WdOdwp-Y.js';
+import './ui/SortByRow.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/ReactionButton.js';
+import './chunks/bundle-jXtqc1kU.js';
 import './ui/EmojiReactions.js';
 import './ui/ReactionBadge.js';
 import './ui/BottomSheet.js';
+import './ui/UserListItem.js';
+import './ui/MutedAvatarOverlay.js';
+import './ui/Checkbox.js';
+import './ui/UserProfile.js';
+import './sendbirdSelectors.js';
 import './ui/Tooltip.js';
 import './ui/TooltipWrapper.js';
 import './Message/context.js';
 import './ui/AdminMessage.js';
 import './ui/QuoteMessage.js';
-import './chunks/bundle-aVVX2zHR.js';
-import './chunks/bundle-d6R6m9-9.js';
+import './chunks/bundle-thvveea5.js';
+import './chunks/bundle-zJNJlM2H.js';
 import './ui/ThreadReplies.js';
 import './ui/OGMessageItemBody.js';
-import './chunks/bundle-GbC4a59M.js';
+import './chunks/bundle-0v0L0TbZ.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
 import './ui/TextMessageItemBody.js';
 import './ui/FileMessageItemBody.js';
-import './chunks/bundle-ucXG1Py7.js';
-import './chunks/bundle-DeRyZP32.js';
-import './chunks/bundle-xgiw36M5.js';
+import './ui/TextButton.js';
+import './chunks/bundle-o1VHRKp9.js';
+import './chunks/bundle-bTljiK8B.js';
+import './chunks/bundle-9lUB2eTP.js';
 import './ui/VoiceMessageItemBody.js';
 import './ui/ProgressBar.js';
 import './VoicePlayer/useVoicePlayer.js';
@@ -135,23 +126,38 @@ import './ui/UnknownMessageItemBody.js';
 import './ui/FeedbackIconButton.js';
 import './ui/MobileFeedbackMenu.js';
 import './Channel/components/MessageFeedbackModal.js';
-import './Channel/components/FileViewer.js';
-import './Channel/components/RemoveMessageModal.js';
-import './chunks/bundle-Lt8mReNU.js';
-import './Message/hooks/useDirtyGetMentions.js';
+import './ui/Input.js';
+import './chunks/bundle-3cuuQsdK.js';
+import './chunks/bundle-QaBTXAtO.js';
+import './chunks/bundle-8CxBlReU.js';
+import './chunks/bundle-1nyUxr-Z.js';
+import './chunks/bundle-KWJtSpuF.js';
 import './Channel/utils/getMessagePartsInfo.js';
 import './Channel/utils/compareMessagesForGrouping.js';
-import './Channel/components/UnreadCount.js';
-import './Channel/components/FrozenNotification.js';
-import './chunks/bundle-Fkv6nKcy.js';
+import './chunks/bundle-HRsLD2CW.js';
+import './chunks/bundle-xkOWTTW1.js';
+import './chunks/bundle-MGkFgiJm.js';
 import './ui/TypingIndicatorBubble.js';
-import './Channel/components/MessageInput.js';
+import './chunks/bundle-2jWyEzHg.js';
+import './ui/ConnectionStatus.js';
+import './chunks/bundle-b1IOVyYG.js';
 import './ui/QuoteMessageInput.js';
-import './chunks/bundle-gEwUSFTG.js';
 import './VoiceRecorder/useVoiceRecorder.js';
-import './chunks/bundle-ldRkCosA.js';
-import './Channel/hooks/useHandleUploadFiles.js';
-import './chunks/bundle-LEanaSuB.js';
+import './chunks/bundle-lxPqhWGY.js';
+import './chunks/bundle-2d4_n6Eh.js';
+import './Channel/components/MessageInput.js';
+import './chunks/bundle-areDE3aT.js';
+import './ui/Badge.js';
+import './ui/MentionUserLabel.js';
+import './chunks/bundle-IbFVsltH.js';
+import './EditUserProfile.js';
+import './EditUserProfile/context.js';
+import './EditUserProfile/components/EditUserProfileUI.js';
+import './CreateChannel.js';
+import './CreateChannel/components/CreateChannelUI.js';
+import './chunks/bundle-wBOLbuH7.js';
+import './CreateChannel/components/InviteUsers.js';
+import './CreateChannel/components/SelectChannelType.js';
 import './ChannelSettings/components/ChannelSettingsUI.js';
 import './ChannelSettings/context.js';
 import './ChannelSettings/components/ChannelProfile.js';
@@ -159,70 +165,204 @@ import './ChannelSettings/components/EditDetailsModal.js';
 import './ChannelSettings/components/ModerationPanel.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';
-import './chunks/bundle-tca5p7Pl.js';
+import './chunks/bundle-x1NoGtpJ.js';
 import './ui/Toggle.js';
 import './ChannelSettings/components/UserListItem.js';
-import './chunks/bundle-MzSKVbUQ.js';
+import './chunks/bundle-rCo3Zf4a.js';
 import './ChannelSettings/components/LeaveChannel.js';
 import './ChannelSettings/components/UserPanel.js';
 import './MessageSearch/components/MessageSearchUI.js';
 import './MessageSearch/context.js';
 import './ui/MessageSearchItem.js';
 import './ui/MessageSearchFileItem.js';
+import './Thread/context.js';
+import './Thread/context/types.js';
 import './Thread/components/ThreadUI.js';
 import './Thread/components/ParentMessageInfo.js';
-import './chunks/bundle-mTQPBbmZ.js';
+import './chunks/bundle-2vQfu2KQ.js';
 import './Thread/components/ParentMessageInfoItem.js';
+import './chunks/bundle-MvpO_S_k.js';
 import './Thread/components/ThreadHeader.js';
 import './Thread/components/ThreadList.js';
 import './Thread/components/ThreadListItem.js';
 import 'date-fns';
 import './Thread/components/ThreadMessageInput.js';
+import './Channel/hooks/useHandleUploadFiles.js';
+
+var GroupChannelUI = function (props) {
+    var context = useGroupChannelContext();
+    var currentChannel = context.currentChannel, channelUrl = context.channelUrl, loading = context.loading;
+    return (React__default.createElement(GroupChannelUIView, __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__default.createElement(MessageInputWrapper, __assign({}, props)));
+        } })));
+};
+
+var GroupChannel = function (props) {
+    return (React__default.createElement(GroupChannelProvider, __assign({}, props),
+        React__default.createElement(GroupChannelUI, __assign({}, props))));
+};
+
+function GroupChannelPreviewAction(_a) {
+    var channel = _a.channel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onLeaveChannel = _a.onLeaveChannel;
+    var parentRef = useRef(null);
+    var parentContainerRef = useRef(null);
+    var _c = useState(false), showModal = _c[0], setShowModal = _c[1];
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.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__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement(IconButton, { ref: parentRef, onClick: toggleDropdown, height: "32px", width: "32px" },
+                React__default.createElement(Icon, { type: IconTypes.MORE, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }))); }, menuItems: function (closeDropdown) { return (React__default.createElement(MenuItems, { parentRef: parentRef, parentContainRef: parentContainerRef, closeDropdown: closeDropdown },
+                React__default.createElement(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__default.createElement(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().config;
+    var userId = config.userId;
+    var stringSet = useLocalization().stringSet;
+    var _e = 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 = getChannelTitle(channel, userId, stringSet);
+    return (React__default.createElement(GroupChannelListItemView, { channel: channel, tabIndex: tabIndex, channelName: channelName, isTyping: isTypingChannel, isSelected: isSelectedChannel, isMessageStatusEnabled: isMessageStatusEnabled, onClick: onClick, onLeaveChannel: onLeaveChannel, renderChannelAction: renderChannelAction }));
+};
+
+var AddGroupChannel = function () {
+    var _a = useState(false), createChannelVisible = _a[0], setCreateChannelVisible = _a[1];
+    var _b = useGroupChannelListContext(), onChannelCreated = _b.onChannelCreated, onBeforeCreateChannel = _b.onBeforeCreateChannel, onCreateChannelClick = _b.onCreateChannelClick;
+    return (React__default.createElement(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 = 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(), 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 __awaiter(void 0, void 0, void 0, function () {
+            return __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__default.createElement("div", { key: channel.url, onClick: onClick }, renderChannelPreview({ channel: channel, onLeaveChannel: onLeaveChannel })));
+        }
+        return (React__default.createElement(GroupChannelListItem, { key: channel.url, tabIndex: index, onClick: onClick, channel: channel, onLeaveChannel: function () { return onLeaveChannel(channel, null); }, renderChannelAction: function () { return (React__default.createElement(GroupChannelPreviewAction, { channel: channel, disabled: !isOnline, onLeaveChannel: function () { return onLeaveChannel(channel, null); } })); } }));
+    };
+    return (React__default.createElement(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__default.createElement(AddGroupChannel, null); } }));
+};
+
+var GroupChannelList = function (props) {
+    return (React__default.createElement(GroupChannelListProvider, __assign({}, props),
+        React__default.createElement(GroupChannelListUI, __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__default.createElement("div", { className: "sendbird-app__wrap" },
-        React__default.createElement("div", { className: "sendbird-app__channellist-wrap" },
-            React__default.createElement(ChannelList, { allowProfileEdit: allowProfileEdit, activeChannelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, onChannelSelect: function (channel) {
-                    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
-                    setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
-                    if (channel) {
-                        setCurrentChannel(channel);
-                    }
-                    else {
-                        setCurrentChannel(null);
-                    }
-                } })),
-        React__default.createElement("div", { className: "\n          ".concat(showSettings ? 'sendbird-app__conversation--settings-open' : '', "\n          ").concat(showSearch ? 'sendbird-app__conversation--search-open' : '', "\n          sendbird-app__conversation-wrap\n        ") },
-            React__default.createElement(Channel, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onChatHeaderActionClick: function () {
-                    setShowSearch(false);
-                    setShowThread(false);
-                    setShowSettings(!showSettings);
-                }, onSearchClick: function () {
-                    setShowSettings(false);
-                    setShowThread(false);
-                    setShowSearch(!showSearch);
-                }, onReplyInThread: function (_a) {
-                    var message = _a.message;
-                    setShowSettings(false);
-                    setShowSearch(false);
-                    if (replyType === 'THREAD') {
-                        setThreadTargetMessage(message);
-                        setShowThread(true);
-                    }
-                }, onQuoteMessageClick: function (_a) {
-                    var message = _a.message;
-                    setShowSettings(false);
-                    setShowSearch(false);
-                    if (replyType === 'THREAD') {
-                        setThreadTargetMessage(message);
-                        setShowThread(true);
-                    }
-                }, onMessageAnimated: function () {
-                    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__default.createElement("div", { className: "sendbird-app__channellist-wrap" }, enableLegacyChannelModules ? React__default.createElement(ChannelList, __assign({}, channelListProps)) : React__default.createElement(GroupChannelList, __assign({}, channelListProps))),
+        React__default.createElement("div", { className: "\n          ".concat(showSettings ? 'sendbird-app__conversation--settings-open' : '', "\n          ").concat(showSearch ? 'sendbird-app__conversation--search-open' : '', "\n          sendbird-app__conversation-wrap\n        ") }, enableLegacyChannelModules ? React__default.createElement(Channel, __assign({}, channelProps)) : React__default.createElement(GroupChannel, __assign({}, channelProps))),
         showSettings && (React__default.createElement("div", { className: "sendbird-app__settingspanel-wrap" },
             React__default.createElement(ChannelSettings, { className: "sendbird-channel-settings", channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
                     setShowSettings(false);
@@ -253,7 +393,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);
             } }))));
 };
@@ -268,7 +409,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 = useState(PANELS.CHANNEL_LIST), panel = _d[0], setPanel = _d[1];
     var store = useSendbirdStateContext();
     var sdk = (_b = (_a = store === null || store === void 0 ? void 0 : store.stores) === null || _a === void 0 ? void 0 : _a.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk;
@@ -320,47 +461,81 @@ var MobileLayout = function (props) {
             setPanel(PANELS.CHANNEL);
         }
     }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
-    return (React__default.createElement("div", { className: 'sb_mobile' },
-        panel === PANELS.CHANNEL_LIST && (React__default.createElement("div", { className: 'sb_mobile__panelwrap' },
-            React__default.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__default.createElement("div", { className: 'sb_mobile__panelwrap' },
-            React__default.createElement(Channel, { replyType: replyType, channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onSearchClick: function () {
-                    setPanel(PANELS.MESSAGE_SEARCH);
-                }, onBackClick: function () {
-                    setPanel(PANELS.CHANNEL_LIST);
-                    pause(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__default.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(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__default.createElement("div", { className: "sb_mobile" },
+        panel === PANELS.CHANNEL_LIST && (React__default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.createElement(ChannelList, __assign({}, channelListProps)) : React__default.createElement(GroupChannelList, __assign({}, channelListProps)))),
+        panel === PANELS.CHANNEL && (React__default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.createElement(Channel, __assign({}, channelProps)) : React__default.createElement(GroupChannel, __assign({}, channelProps)))),
+        panel === PANELS.CHANNEL_SETTINGS && (React__default.createElement("div", { className: "sb_mobile__panelwrap" },
             React__default.createElement(ChannelSettings, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
                     setPanel(PANELS.CHANNEL);
                 }, onLeaveChannel: function () {
                     setPanel(PANELS.CHANNEL_LIST);
                 } }))),
-        panel === PANELS.MESSAGE_SEARCH && (React__default.createElement("div", { className: 'sb_mobile__panelwrap' },
+        panel === PANELS.MESSAGE_SEARCH && (React__default.createElement("div", { className: "sb_mobile__panelwrap" },
             React__default.createElement(MessageSearchPannel, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
                     setPanel(PANELS.CHANNEL);
                 }, onResultClick: function (message) {
@@ -369,7 +544,7 @@ var MobileLayout = function (props) {
                         setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
                     });
                 } }))),
-        panel === PANELS.THREAD && (React__default.createElement("div", { className: 'sb_mobile__panelwrap' },
+        panel === PANELS.THREAD && (React__default.createElement("div", { className: "sb_mobile__panelwrap" },
             React__default.createElement(Thread, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', message: threadTargetMessage, onHeaderActionClick: function () {
                     setPanel(PANELS.CHANNEL);
                     pause(ALL);
@@ -385,7 +560,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();
     var globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
     var _d = useState(false), showThread = _d[0], setShowThread = _d[1];
@@ -403,8 +578,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__default.createElement(React__default.Fragment, null, isMobile
-        ? (React__default.createElement(MobileLayout, { replyType: replyType, showSearchIcon: showSearchIcon, isReactionEnabled: isReactionEnabled, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, highlightedMessage: highlightedMessage, setHighlightedMessage: setHighlightedMessage, startingPoint: startingPoint, setStartingPoint: setStartingPoint, threadTargetMessage: threadTargetMessage, setThreadTargetMessage: setThreadTargetMessage }))
-        : (React__default.createElement(DesktopLayout, { replyType: replyType, isReactionEnabled: isReactionEnabled, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, showThread: showThread, setShowThread: setShowThread, threadTargetMessage: threadTargetMessage, setThreadTargetMessage: setThreadTargetMessage, showSettings: showSettings, setShowSettings: setShowSettings, showSearch: showSearch, setShowSearch: setShowSearch, highlightedMessage: highlightedMessage, setHighlightedMessage: setHighlightedMessage, startingPoint: startingPoint, setStartingPoint: setStartingPoint }))));
+        ? (React__default.createElement(MobileLayout, { replyType: replyType, showSearchIcon: showSearchIcon, isReactionEnabled: isReactionEnabled, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, highlightedMessage: highlightedMessage, setHighlightedMessage: setHighlightedMessage, startingPoint: startingPoint, setStartingPoint: setStartingPoint, threadTargetMessage: threadTargetMessage, setThreadTargetMessage: setThreadTargetMessage, enableLegacyChannelModules: enableLegacyChannelModules }))
+        : (React__default.createElement(DesktopLayout, { replyType: replyType, isReactionEnabled: isReactionEnabled, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, showThread: showThread, setShowThread: setShowThread, threadTargetMessage: threadTargetMessage, setThreadTargetMessage: setThreadTargetMessage, showSettings: showSettings, setShowSettings: setShowSettings, showSearch: showSearch, setShowSearch: setShowSearch, highlightedMessage: highlightedMessage, setHighlightedMessage: setHighlightedMessage, startingPoint: startingPoint, setStartingPoint: setStartingPoint, enableLegacyChannelModules: enableLegacyChannelModules }))));
 };
 
 /**
@@ -417,12 +592,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 = 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 = useState(null), currentChannel = _x[0], setCurrentChannel = _x[1];
     return (React__default.createElement(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__default.createElement(AppLayout, { isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel })));
+        React__default.createElement(AppLayout, { isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, enableLegacyChannelModules: enableLegacyChannelModules })));
 }
 
 export { App as default };