@sendbird/uikit-react/App.js

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import React__default, { useState } from 'react';
import { SendbirdProvider } from './SendbirdProvider.js';
import { u as useMediaQueryContext } from './chunks/bundle-DWJPyrDa.js';
import { _ as __assign } from './chunks/bundle-DlZj_j5B.js';
import { GroupChannel } from './GroupChannel.js';
import { C as ChannelList, G as GroupChannelList, M as MobileLayout } from './chunks/bundle-OM2zkdQ7.js';
import Channel from './Channel.js';
import ChannelSettings from './ChannelSettings.js';
import MessageSearchPannel from './MessageSearch.js';
import Thread from './Thread.js';
import { c as classnames } from './chunks/bundle-CaW4IP0_.js';
import { A as APP_LAYOUT_ROOT } from './chunks/bundle-BRB1saAI.js';
import { g as getCaseResolvedReplyType } from './chunks/bundle-QUj4_z_2.js';
import { u as useSendbird } from './chunks/bundle-BnaoVUUl.js';
import '@sendbird/uikit-tools';
import './chunks/bundle-HafODWiq.js';
import './chunks/bundle-DaRQ4hYm.js';
import './chunks/bundle-C8kxBudB.js';
import './chunks/bundle-OJHU7Q3U.js';
import './VoiceRecorder/context.js';
import './chunks/bundle-DxLnjDoJ.js';
import './chunks/bundle-Dhutxl0X.js';
import './chunks/bundle-D89Qj0P4.js';
import './chunks/bundle-BDItDVZl.js';
import 'react-dom';
import './ui/IconButton.js';
import './ui/Button.js';
import './chunks/bundle-FZ_FdxZT.js';
import './ui/Icon.js';
import './chunks/bundle-CSjCAZib.js';
import './chunks/bundle-C1jTnXNH.js';
import '@sendbird/chat';
import '@sendbird/chat/groupChannel';
import '@sendbird/chat/openChannel';
import './hooks/useModal.js';
import './chunks/bundle-DZaN4z9l.js';
import './chunks/bundle-DPzvLwMf.js';
import './chunks/bundle-CV8jQmpY.js';
import 'css-vars-ponyfill';
import './chunks/bundle-D_XGc0fh.js';
import './chunks/bundle-CG0xn0QL.js';
import './chunks/bundle-CXBvqtFA.js';
import '@sendbird/chat/message';
import './chunks/bundle-tDk7wyaM.js';
import './chunks/bundle-lyBHlixS.js';
import './chunks/bundle-CVos_O7L.js';
import './chunks/bundle-yGY7tz0s.js';
import './chunks/bundle-D9lZlE3H.js';
import './GroupChannel/components/GroupChannelUI.js';
import './chunks/bundle-BgXiNq93.js';
import './GroupChannel/components/TypingIndicator.js';
import './chunks/bundle-BKAlZOYk.js';
import './ui/ConnectionStatus.js';
import './ui/PlaceHolder.js';
import './ui/Loader.js';
import './GroupChannel/components/GroupChannelHeader.js';
import './chunks/bundle-DvqGbGmO.js';
import './ui/ChannelAvatar.js';
import './chunks/bundle-Dgt7lb2O.js';
import './ui/ImageRenderer.js';
import './chunks/bundle-h43SVTxb.js';
import './chunks/bundle-DGOBflIQ.js';
import './chunks/bundle-DJzTnBLa.js';
import './chunks/bundle-C5Cl3Igw.js';
import './utils/message/getOutgoingMessageState.js';
import './chunks/bundle-0bJlK18Z.js';
import './ui/Header.js';
import './ui/TextButton.js';
import './chunks/bundle-Bv6iXkjg.js';
import './GroupChannel/components/MessageList.js';
import './GroupChannel/components/Message.js';
import './chunks/bundle-OopTFuBx.js';
import './chunks/bundle-DQG1nDod.js';
import './Message/hooks/useDirtyGetMentions.js';
import './ui/DateSeparator.js';
import './ui/MessageInput.js';
import './chunks/bundle-LDv-FNzw.js';
import './chunks/bundle-ZgaJ1zMw.js';
import 'dompurify';
import './chunks/bundle-BtgjnqNn.js';
import './chunks/bundle-Bmy70Etb.js';
import './chunks/bundle-Cii8q6Vf.js';
import './chunks/bundle-l40KXk4C.js';
import './ui/MessageContent.js';
import './chunks/bundle-CZv_p-rQ.js';
import './chunks/bundle-P0PyHY_w.js';
import './chunks/bundle-DqCu8NcC.js';
import './chunks/bundle-DM0GI2HV.js';
import './ui/MessageItemReactionMenu.js';
import './ui/ReactionButton.js';
import './chunks/bundle-B1FaeCoO.js';
import './ui/SortByRow.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-BQDrTbuZ.js';
import './ui/MobileMenu.js';
import './ui/ThreadReplies.js';
import './chunks/bundle-B6_pp1pT.js';
import './ui/OGMessageItemBody.js';
import './chunks/bundle-CR2Uxj3o.js';
import './ui/MentionLabel.js';
import './ui/LinkLabel.js';
import './ui/TextMessageItemBody.js';
import './ui/FileMessageItemBody.js';
import './chunks/bundle-4KIPG09a.js';
import './ui/FileViewer.js';
import './chunks/bundle-86aNeIDh.js';
import './ui/VoiceMessageItemBody.js';
import './ui/ProgressBar.js';
import './VoicePlayer/useVoicePlayer.js';
import './ui/PlaybackTime.js';
import './ui/ThumbnailMessageItemBody.js';
import './ui/UnknownMessageItemBody.js';
import './ui/TemplateMessageItemBody.js';
import './chunks/bundle-ChE9cvzN.js';
import './ui/FallbackTemplateMessageItemBody.tsx.js';
import './ui/LoadingTemplateMessageItemBody.tsx.js';
import './ui/MessageFeedbackFailedModal.js';
import './ui/FeedbackIconButton.js';
import './ui/MobileFeedbackMenu.js';
import './ui/MessageFeedbackModal.js';
import './ui/Input.js';
import './chunks/bundle-njmblZhI.js';
import './GroupChannel/components/SuggestedReplies.js';
import './chunks/bundle-DaZcJrxP.js';
import './GroupChannel/components/FileViewer.js';
import './chunks/bundle-BkqfWeVo.js';
import './GroupChannel/components/RemoveMessageModal.js';
import './chunks/bundle-C4ACF5XY.js';
import './chunks/bundle-s0NWd4qh.js';
import './GroupChannel/components/UnreadCount.js';
import './GroupChannel/components/FrozenNotification.js';
import './ui/TypingIndicatorBubble.js';
import './Channel/utils/getMessagePartsInfo.js';
import './Channel/utils/compareMessagesForGrouping.js';
import './chunks/bundle-Zll3bhLI.js';
import './GroupChannel/components/MessageInputWrapper.js';
import './chunks/bundle-CEoddlc-.js';
import './GroupChannel/components/SuggestedMentionList.js';
import './ui/QuoteMessageInput.js';
import './VoiceRecorder/useVoiceRecorder.js';
import './chunks/bundle-C7zjmXlk.js';
import './chunks/bundle-WQ_CLl_f.js';
import './chunks/bundle-CnjGDgns.js';
import './GroupChannelList/components/GroupChannelListHeader.js';
import './EditUserProfile.js';
import './EditUserProfile/context.js';
import './EditUserProfile/components/EditUserProfileUI.js';
import './chunks/bundle-BPJmy9tK.js';
import './chunks/bundle-Cpv_LYki.js';
import './GroupChannelList/components/GroupChannelPreviewAction.js';
import './GroupChannelList/components/GroupChannelListItem.js';
import './chunks/bundle-DUxOnJXn.js';
import './ui/Badge.js';
import './ui/MentionUserLabel.js';
import './Channel/context.js';
import './chunks/bundle-BMkG3rId.js';
import './chunks/bundle-CQBvCw9O.js';
import './chunks/bundle-BzVkhK-3.js';
import './chunks/bundle-CM15Zz-B.js';
import './chunks/bundle-DOFgIso-.js';
import './chunks/bundle-ab1EZFfD.js';
import './ChannelSettings/hooks/useMenuList.js';
import './chunks/bundle-DBk-n0aO.js';
import './chunks/bundle-DsDOqEEW.js';
import './chunks/bundle-DVaAtiJX.js';
import './ui/Toggle.js';
import './ChannelSettings/components/ChannelSettingsMenuItem.js';
import './chunks/bundle-B7KbaLkG.js';
import './chunks/bundle-D14uJuP3.js';
import './Thread/context/types.js';
import 'date-fns';
import './Thread/components/ThreadMessageInput.js';
import './chunks/bundle-CqUKQRuq.js';
import './chunks/bundle-dPnGsEg0.js';
import './Channel/hooks/useHandleUploadFiles.js';
import './ChannelList/components/ChannelPreview.js';
import './chunks/bundle-BQA9qYkO.js';
import './OpenChannel/components/OpenChannelInput.js';
import './OpenChannel/components/OpenChannelMessageList.js';
import './OpenChannel/components/OpenChannelMessage.js';
import './ui/OpenchannelUserMessage.js';
import './chunks/bundle-CjekBWOL.js';
import './chunks/bundle-8XssNFcq.js';
import './ui/OpenChannelAdminMessage.js';
import './ui/OpenchannelOGMessage.js';
import './ui/OpenchannelThumbnailMessage.js';
import './ui/OpenchannelFileMessage.js';
import './chunks/bundle-BC9fK4eQ.js';
import './OpenChannelSettings/context.js';
import './ui/AccordionGroup.js';
import './useSendbirdStateContext.js';
import './Channel/components/ChannelUI.js';
import './Channel/components/ChannelHeader.js';
import './Channel/components/MessageList.js';
import './Channel/components/Message.js';
import './Channel/components/FileViewer.js';
import './Channel/components/RemoveMessageModal.js';
import './Channel/components/MessageInput.js';
import './ChannelSettings/components/ChannelSettingsUI.js';
import './ChannelSettings/components/ChannelSettingsHeader.js';
import './ChannelSettings/components/ChannelProfile.js';
import './ChannelSettings/components/EditDetailsModal.js';
import './ChannelSettings/components/LeaveChannel.js';
import './ChannelSettings/components/ChannelSettingMenuList.js';
import './MessageSearch/components/MessageSearchUI.js';
import './ui/MessageSearchItem.js';
import './ui/MessageSearchFileItem.js';
import './Thread/components/ThreadUI.js';
import './Thread/components/ParentMessageInfo.js';
import './chunks/bundle-opK13Cg3.js';
import './Thread/components/ParentMessageInfoItem.js';
import './Thread/components/ThreadHeader.js';
import './Thread/components/ThreadList.js';
import './Thread/components/ThreadListItem.js';

var DesktopLayout = function (props) {
    var isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, isMessageGroupingEnabled = props.isMessageGroupingEnabled, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, autoscrollMessageOverflowToTop = props.autoscrollMessageOverflowToTop, 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(undefined);
        }
    };
    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(function (prev) { return !prev; });
        },
        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 !== null && startingPoint !== void 0 ? startingPoint : undefined,
        isReactionEnabled: isReactionEnabled,
        replyType: replyType,
        isMessageGroupingEnabled: isMessageGroupingEnabled,
        isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
        autoscrollMessageOverflowToTop: autoscrollMessageOverflowToTop,
        // for GroupChannel
        animatedMessageId: highlightedMessage,
        onReplyInThreadClick: onClickThreadReply,
    };
    return (React__default.createElement("div", { className: "sendbird-app__wrap", id: APP_LAYOUT_ROOT },
        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: classnames('sendbird-app__conversation-wrap', showSettings && 'sendbird-app__conversation--settings-open', showSearch && 'sendbird-app__conversation--search-open') }, 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);
                } }))),
        showSearch && (React__default.createElement("div", { className: "sendbird-app__searchpanel-wrap" },
            React__default.createElement(MessageSearchPannel, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onResultClick: function (message) {
                    if (message.messageId === highlightedMessage) {
                        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null);
                        setTimeout(function () {
                            setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
                        });
                    }
                    else {
                        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message.createdAt);
                        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message.messageId);
                    }
                }, onCloseClick: function () {
                    setShowSearch(false);
                } }))),
        showThread && (React__default.createElement(Thread, { className: "sendbird-app__thread", channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', message: threadTargetMessage, onHeaderActionClick: function () {
                setShowThread(false);
            }, onMoveToParentMessage: function (_a) {
                var message = _a.message, channel = _a.channel;
                if ((channel === null || channel === void 0 ? void 0 : channel.url) !== (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
                    setCurrentChannel(channel);
                }
                setTimeout(function () {
                    if ((message === null || message === void 0 ? void 0 : message.messageId) !== highlightedMessage) {
                        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(message === null || message === void 0 ? void 0 : message.createdAt);
                    }
                }, 200);
                setTimeout(function () {
                    setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint(null);
                    setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(message === null || message === void 0 ? void 0 : message.messageId);
                }, 500);
            } }))));
};

var AppLayout = function (props) {
    var _a, _b, _c;
    var isMessageGroupingEnabled = props.isMessageGroupingEnabled, autoscrollMessageOverflowToTop = props.autoscrollMessageOverflowToTop, allowProfileEdit = props.allowProfileEdit, onProfileEditSuccess = props.onProfileEditSuccess, disableAutoSelect = props.disableAutoSelect, currentChannel = props.currentChannel, setCurrentChannel = props.setCurrentChannel, enableLegacyChannelModules = props.enableLegacyChannelModules;
    var state = useSendbird().state;
    var globalConfigs = state.config;
    var _d = useState(false), showThread = _d[0], setShowThread = _d[1];
    var _e = useState(null), threadTargetMessage = _e[0], setThreadTargetMessage = _e[1];
    var _f = useState(false), showSettings = _f[0], setShowSettings = _f[1];
    var _g = useState(false), showSearch = _g[0], setShowSearch = _g[1];
    var _h = useState(null), highlightedMessage = _h[0], setHighlightedMessage = _h[1];
    var _j = useState(null), startingPoint = _j[0], setStartingPoint = _j[1];
    var isMobile = useMediaQueryContext().isMobile;
    /**
     * Below configs can be set via Dashboard UIKit config setting but as a lower priority than App props.
     * So need to be have fallback value \w global configs even though each prop values are undefined
     */
    var replyType = (_a = props.replyType) !== null && _a !== void 0 ? _a : getCaseResolvedReplyType(globalConfigs.groupChannel.replyType).upperCase;
    var isReactionEnabled = (_b = props.isReactionEnabled) !== null && _b !== void 0 ? _b : globalConfigs.groupChannel.enableReactions;
    var showSearchIcon = (_c = props.showSearchIcon) !== null && _c !== void 0 ? _c : globalConfigs.groupChannelSettings.enableMessageSearch;
    return (React__default.createElement(React__default.Fragment, null, isMobile
        ? (React__default.createElement(MobileLayout, { replyType: replyType, showSearchIcon: showSearchIcon, isReactionEnabled: isReactionEnabled, isMessageGroupingEnabled: isMessageGroupingEnabled, autoscrollMessageOverflowToTop: autoscrollMessageOverflowToTop, 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, autoscrollMessageOverflowToTop: autoscrollMessageOverflowToTop, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, showThread: showThread, setShowThread: setShowThread, threadTargetMessage: threadTargetMessage, setThreadTargetMessage: setThreadTargetMessage, showSettings: showSettings, setShowSettings: setShowSettings, showSearch: showSearch, setShowSearch: setShowSearch, highlightedMessage: highlightedMessage, setHighlightedMessage: setHighlightedMessage, startingPoint: startingPoint, setStartingPoint: setStartingPoint, enableLegacyChannelModules: enableLegacyChannelModules }))));
};

/**
 * This is a drop in Chat solution
 * Can also be used as an example for creating
 * default chat apps
 */
function App(props) {
    var appId = props.appId, userId = props.userId, _a = props.accessToken, accessToken = _a === void 0 ? '' : _a, _b = props.customApiHost, customApiHost = _b === void 0 ? '' : _b, _c = props.customWebSocketHost, customWebSocketHost = _c === void 0 ? '' : _c, breakpoint = props.breakpoint, _d = props.theme, theme = _d === void 0 ? 'light' : _d, userListQuery = props.userListQuery, _e = props.nickname, nickname = _e === void 0 ? '' : _e, _f = props.profileUrl, profileUrl = _f === void 0 ? '' : _f, dateLocale = props.dateLocale, _g = props.config, config = _g === void 0 ? {} : _g, voiceRecord = props.voiceRecord, _h = props.isMessageGroupingEnabled, isMessageGroupingEnabled = _h === void 0 ? true : _h, colorSet = props.colorSet, stringSet = props.stringSet, _j = props.allowProfileEdit, allowProfileEdit = _j === void 0 ? false : _j, _k = props.disableMarkAsDelivered, disableMarkAsDelivered = _k === void 0 ? false : _k, renderUserProfile = props.renderUserProfile, onProfileEditSuccess = props.onProfileEditSuccess, _l = props.imageCompression, imageCompression = _l === void 0 ? {} : _l, _m = props.disableAutoSelect, disableAutoSelect = _m === void 0 ? false : _m, sdkInitParams = props.sdkInitParams, customExtensionParams = props.customExtensionParams, eventHandlers = props.eventHandlers, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, _o = props.autoscrollMessageOverflowToTop, autoscrollMessageOverflowToTop = _o === void 0 ? false : _o, _p = props.isUserIdUsedForNickname, isUserIdUsedForNickname = _p === void 0 ? true : _p, _q = props.enableLegacyChannelModules, enableLegacyChannelModules = _q === void 0 ? false : _q, uikitOptions = props.uikitOptions, _r = props.htmlTextDirection, htmlTextDirection = _r === void 0 ? 'ltr' : _r, _s = props.forceLeftToRightMessageLayout, forceLeftToRightMessageLayout = _s === void 0 ? false : _s, 
    // The below configs are duplicates of the Dashboard UIKit Configs.
    // Since their default values will be set in the Sendbird component,
    // we don't need to set them here.
    showSearchIcon = props.showSearchIcon, isMentionEnabled = props.isMentionEnabled, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, disableUserProfile = props.disableUserProfile, isVoiceMessageEnabled = props.isVoiceMessageEnabled, isTypingIndicatorEnabledOnChannelList = props.isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = props.isMessageReceiptStatusEnabledOnChannelList;
    var _t = useState(), currentChannel = _t[0], setCurrentChannel = _t[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, disableMarkAsDelivered: disableMarkAsDelivered, renderUserProfile: renderUserProfile, imageCompression: imageCompression, isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled, autoscrollMessageOverflowToTop: autoscrollMessageOverflowToTop, voiceRecord: voiceRecord, onStartDirectMessage: function (channel) {
            setCurrentChannel(channel);
        }, uikitOptions: uikitOptions, isUserIdUsedForNickname: isUserIdUsedForNickname, sdkInitParams: sdkInitParams, customExtensionParams: customExtensionParams, eventHandlers: eventHandlers, isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList, replyType: replyType, showSearchIcon: showSearchIcon, disableUserProfile: disableUserProfile, isReactionEnabled: isReactionEnabled, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled, htmlTextDirection: htmlTextDirection, forceLeftToRightMessageLayout: forceLeftToRightMessageLayout },
        React__default.createElement(AppLayout, { autoscrollMessageOverflowToTop: autoscrollMessageOverflowToTop, isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, enableLegacyChannelModules: enableLegacyChannelModules, isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon })));
}

export { App as default };
//# sourceMappingURL=App.js.map