@sendbird/uikit-react 3.10.1 → 3.10.2-alpha.0

package/cjs/chunks/bundle-Y86Tvf8p.js

@@ -0,0 +1,204 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var ChannelList_context = require('./bundle-zGSEOOdl.js');
+var ui_MessageStatus = require('./bundle-Pzvqu5yR.js');
+var _tslib = require('./bundle-DhtZdKsr.js');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var uikitTools = require('@sendbird/uikit-tools');
+var UserProfileContext = require('./bundle-TPy0gj60.js');
+var useMarkAsDeliveredScheduler = require('./bundle-fzSiKesI.js');
+var utils = require('./bundle-Y-_KhZFq.js');
+var useLongPress = require('./bundle-2hJhRu5W.js');
+var MediaQueryContext = require('./bundle-6zBNmPOP.js');
+var index = require('./bundle-nox41MG6.js');
+var TypingIndicator = require('./bundle-5UyAossc.js');
+var ui_Badge = require('../ui/Badge.js');
+var ui_ChannelAvatar = require('../ui/ChannelAvatar.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-VxcYXhwp.js');
+var ui_MentionUserLabel = require('../ui/MentionUserLabel.js');
+var ui_Modal = require('./bundle-6L4HCLmb.js');
+var ui_TextButton = require('../ui/TextButton.js');
+
+var GroupChannelListContext = React.createContext(null);
+var GroupChannelListProvider = function (props) {
+    var 
+    // Default
+    children = props.children, _a = props.className, className = _a === void 0 ? '' : _a, selectedChannelUrl = props.selectedChannelUrl, 
+    // Flags
+    _b = props.allowProfileEdit, 
+    // Flags
+    allowProfileEdit = _b === void 0 ? true : _b, _c = props.disableAutoSelect, disableAutoSelect = _c === void 0 ? false : _c, _d = props.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _d === void 0 ? false : _d, _e = props.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _e === void 0 ? false : _e, 
+    // Custom
+    channelListQueryParams = props.channelListQueryParams, onThemeChange = props.onThemeChange, _f = props.onChannelSelect, onChannelSelect = _f === void 0 ? utils.noop : _f, _g = props.onChannelCreated, onChannelCreated = _g === void 0 ? utils.noop : _g, onCreateChannelClick = props.onCreateChannelClick, onBeforeCreateChannel = props.onBeforeCreateChannel, onUserProfileUpdated = props.onUserProfileUpdated, 
+    // UserProfile
+    disableUserProfile = props.disableUserProfile, renderUserProfile = props.renderUserProfile, onUserProfileMessage = props.onUserProfileMessage;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var config = globalStore.config, stores = globalStore.stores;
+    var sdkStore = stores.sdkStore;
+    var _h = config.isTypingIndicatorEnabledOnChannelList, isTypingIndicatorEnabledOnChannelList = _h === void 0 ? false : _h, _j = config.isMessageReceiptStatusEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = _j === void 0 ? false : _j;
+    var sdk = sdkStore.sdk;
+    var isConnected = useMarkAsDeliveredScheduler.useOnlineStatus(sdk, config.logger);
+    var scheduler = useMarkAsDeliveredScheduler.useMarkAsDeliveredScheduler({ isConnected: isConnected }, config);
+    var channelListDataSource = uikitTools.useGroupChannelList(sdk, {
+        collectionCreator: getCollectionCreator(sdk, channelListQueryParams),
+        markAsDelivered: function (channels) { return channels.forEach(scheduler.push); },
+        onChannelsDeleted: function (channelUrls) {
+            channelUrls.forEach(function (url) {
+                if (url === selectedChannelUrl)
+                    onChannelSelect(null);
+            });
+        },
+    });
+    var refreshing = channelListDataSource.refreshing, initialized = channelListDataSource.initialized, groupChannels = channelListDataSource.groupChannels, refresh = channelListDataSource.refresh, loadMore = channelListDataSource.loadMore;
+    // SideEffect: Auto select channel
+    React.useEffect(function () {
+        var _a;
+        if (!disableAutoSelect && stores.sdkStore.initialized && initialized) {
+            if (!selectedChannelUrl)
+                onChannelSelect((_a = groupChannels[0]) !== null && _a !== void 0 ? _a : null);
+        }
+    }, [disableAutoSelect, stores.sdkStore.initialized, initialized, selectedChannelUrl]);
+    var _k = React.useState([]), typingChannelUrls = _k[0], setTypingChannelUrls = _k[1];
+    uikitTools.useGroupChannelHandler(sdk, {
+        onTypingStatusUpdated: function (channel) {
+            var _a;
+            var channelList = typingChannelUrls.filter(function (channelUrl) { return channelUrl !== channel.url; });
+            if (((_a = channel.getTypingUsers()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                setTypingChannelUrls(channelList.concat(channel.url));
+            }
+            else {
+                setTypingChannelUrls(channelList);
+            }
+        },
+    });
+    return (React.createElement(GroupChannelListContext.Provider, { value: {
+            // Default
+            className: className,
+            selectedChannelUrl: selectedChannelUrl,
+            // Flags
+            allowProfileEdit: allowProfileEdit !== null && allowProfileEdit !== void 0 ? allowProfileEdit : config === null || config === void 0 ? void 0 : config.allowProfileEdit,
+            disableAutoSelect: disableAutoSelect,
+            isTypingIndicatorEnabled: isTypingIndicatorEnabled !== null && isTypingIndicatorEnabled !== void 0 ? isTypingIndicatorEnabled : isTypingIndicatorEnabledOnChannelList,
+            isMessageReceiptStatusEnabled: isMessageReceiptStatusEnabled !== null && isMessageReceiptStatusEnabled !== void 0 ? isMessageReceiptStatusEnabled : isMessageReceiptStatusEnabledOnChannelList,
+            // Essential
+            onChannelSelect: onChannelSelect,
+            onChannelCreated: onChannelCreated,
+            // Partial props
+            onThemeChange: onThemeChange,
+            onCreateChannelClick: onCreateChannelClick,
+            onBeforeCreateChannel: onBeforeCreateChannel,
+            onUserProfileUpdated: onUserProfileUpdated,
+            // Internal
+            typingChannelUrls: typingChannelUrls,
+            // ReturnType<UseGroupChannelList>
+            refreshing: refreshing,
+            initialized: initialized,
+            groupChannels: groupChannels,
+            refresh: refresh,
+            loadMore: loadMore,
+        } },
+        React.createElement(UserProfileContext.UserProfileProvider, { disableUserProfile: disableUserProfile !== null && disableUserProfile !== void 0 ? disableUserProfile : config === null || config === void 0 ? void 0 : config.disableUserProfile, renderUserProfile: renderUserProfile !== null && renderUserProfile !== void 0 ? renderUserProfile : config === null || config === void 0 ? void 0 : config.renderUserProfile, onUserProfileMessage: onUserProfileMessage !== null && onUserProfileMessage !== void 0 ? onUserProfileMessage : config === null || config === void 0 ? void 0 : config.onUserProfileMessage },
+            React.createElement("div", { className: "sendbird-channel-list ".concat(className) }, children))));
+};
+var useGroupChannelListContext = function () {
+    var context = React.useContext(GroupChannelListContext);
+    if (!context)
+        throw new Error('GroupChannelListContext not found. Use within the GroupChannelList module.');
+    return context;
+};
+function getCollectionCreator(sdk, channelListQueryParams) {
+    return function (defaultParams) {
+        var params = _tslib.__assign(_tslib.__assign({}, defaultParams), channelListQueryParams);
+        return sdk.groupChannel.createGroupChannelCollection(_tslib.__assign(_tslib.__assign({}, params), { filter: new groupChannel.GroupChannelFilter(params) }));
+    };
+}
+
+var GroupChannelListItemView = function (_a) {
+    var channel = _a.channel, tabIndex = _a.tabIndex, isTyping = _a.isTyping, isSelected = _a.isSelected, channelName = _a.channelName, _b = _a.isMessageStatusEnabled, isMessageStatusEnabled = _b === void 0 ? true : _b, _c = _a.onClick, onClick = _c === void 0 ? utils.noop : _c, _d = _a.onLeaveChannel, onLeaveChannel = _d === void 0 ? utils.noop : _d, renderChannelAction = _a.renderChannelAction;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var theme = config.theme, isMentionEnabled = config.isMentionEnabled, userId = config.userId;
+    var _e = LocalizationContext.useLocalization(), dateLocale = _e.dateLocale, stringSet = _e.stringSet;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var _f = React.useState(false), showMobileLeave = _f[0], setShowMobileLeave = _f[1];
+    var onLongPress = useLongPress.useLongPress({
+        onLongPress: function () {
+            if (isMobile) {
+                setShowMobileLeave(true);
+            }
+        },
+        onClick: onClick,
+    }, {
+        delay: 1000,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", _tslib.__assign({ className: [
+                'sendbird-channel-preview',
+                isSelected ? 'sendbird-channel-preview--active' : '',
+            ].join(' '), role: "link", tabIndex: tabIndex }, (isMobile ? _tslib.__assign({}, onLongPress) : { onClick: onClick })),
+            React.createElement("div", { className: "sendbird-channel-preview__avatar" },
+                React.createElement(ui_ChannelAvatar, { channel: channel, userId: userId, theme: theme })),
+            React.createElement("div", { className: "sendbird-channel-preview__content" },
+                React.createElement("div", { className: "sendbird-channel-preview__content__upper" },
+                    React.createElement("div", { className: "sendbird-channel-preview__content__upper__header" },
+                        (channel.isBroadcast || false) && (React.createElement("div", { className: "sendbird-channel-preview__content__upper__header__broadcast-icon" },
+                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.SECONDARY, height: "16px", width: "16px" }))),
+                        React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__upper__header__channel-name", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, channelName),
+                        React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__upper__header__total-members", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ui_MessageStatus.getTotalMembers(channel)),
+                        (channel.isFrozen) && (React.createElement("div", { title: "Frozen", className: "sendbird-channel-preview__content__upper__header__frozen-icon" },
+                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.FREEZE, fillColor: ui_Icon.IconColors.PRIMARY, height: 12, width: 12 })))),
+                    !channel.isEphemeral && isMessageStatusEnabled && (React.createElement(ui_MessageStatus.MessageStatus, { className: "sendbird-channel-preview__content__upper__last-message-at", channel: channel, message: channel.lastMessage, isDateSeparatorConsidered: false })),
+                    !channel.isEphemeral && !isMessageStatusEnabled && (React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__upper__last-message-at", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ui_MessageStatus.getLastMessageCreatedAt({
+                        channel: channel,
+                        locale: dateLocale,
+                        stringSet: stringSet,
+                    })))),
+                React.createElement("div", { className: "sendbird-channel-preview__content__lower" },
+                    React.createElement(ui_Label.Label, { className: "sendbird-channel-preview__content__lower__last-message", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_3 },
+                        isTyping && (React.createElement(TypingIndicator.TypingIndicatorText, { members: channel.getTypingUsers() })),
+                        !isTyping
+                            && !index.isVoiceMessage(channel.lastMessage)
+                            && ui_MessageStatus.getLastMessage(channel, stringSet),
+                        !isTyping
+                            && index.isVoiceMessage(channel.lastMessage)
+                            && stringSet.VOICE_MESSAGE),
+                    /**
+                     * Do not show unread count for focused channel. This is because of the limitation where
+                     * isScrollBottom and hasNext states needs to be added globally but they are from channel context
+                     * so channel list cannot see them with the current architecture.
+                     */
+                    !isSelected && !channel.isEphemeral && (React.createElement("div", { className: "sendbird-channel-preview__content__lower__unread-message-count" },
+                        isMentionEnabled && channel.unreadMentionCount > 0 ? (React.createElement(ui_MentionUserLabel, { className: "sendbird-channel-preview__content__lower__unread-message-count__mention", color: "purple" }, '@')) : null,
+                        ui_MessageStatus.getChannelUnreadMessageCount(channel) ? ( // return number
+                        React.createElement(ui_Badge, { count: ui_MessageStatus.getChannelUnreadMessageCount(channel) })) : null)))),
+            !isMobile && (React.createElement("div", { className: "sendbird-channel-preview__action" }, renderChannelAction({ channel: channel })))),
+        showMobileLeave && isMobile && (React.createElement(ui_Modal.Modal, { className: "sendbird-channel-preview__leave--mobile", titleText: channelName, hideFooter: true, isCloseOnClickOutside: true, onCancel: function () { return setShowMobileLeave(false); } },
+            React.createElement(ui_TextButton, { onClick: function () {
+                    onLeaveChannel();
+                    setShowMobileLeave(false);
+                }, className: "sendbird-channel-preview__leave-label--mobile" },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_PREVIEW_MOBILE_LEAVE))))));
+};
+
+var ChannelPreview = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var channel = _a.channel, _j = _a.isActive, isActive = _j === void 0 ? false : _j, _k = _a.isTyping, isTyping = _k === void 0 ? false : _k, renderChannelAction = _a.renderChannelAction, onLeaveChannel = _a.onLeaveChannel, onClick = _a.onClick, tabIndex = _a.tabIndex;
+    var sbState = useSendbirdStateContext.useSendbirdStateContext();
+    var _l = ChannelList_context.useChannelListContext(), _m = _l.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _m === void 0 ? false : _m, _o = _l.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _o === void 0 ? false : _o;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var userId = (_d = (_c = (_b = sbState === null || sbState === void 0 ? void 0 : sbState.stores) === null || _b === void 0 ? void 0 : _b.userStore) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.userId;
+    var isMessageStatusEnabled = isMessageReceiptStatusEnabled
+        && (((_e = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _e === void 0 ? void 0 : _e.messageType) === 'user' || ((_f = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _f === void 0 ? void 0 : _f.messageType) === 'file')
+        && ((_h = (_g = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _g === void 0 ? void 0 : _g.sender) === null || _h === void 0 ? void 0 : _h.userId) === userId;
+    var channelName = ui_MessageStatus.getChannelTitle(channel, userId, stringSet);
+    return (React.createElement(GroupChannelListItemView, { channel: channel, tabIndex: tabIndex, isTyping: isTypingIndicatorEnabled && isTyping, isSelected: isActive, channelName: channelName, isMessageStatusEnabled: isMessageStatusEnabled, onClick: onClick, onLeaveChannel: onLeaveChannel, renderChannelAction: renderChannelAction }));
+};
+
+exports.ChannelPreview = ChannelPreview;
+exports.GroupChannelListItemView = GroupChannelListItemView;
+exports.GroupChannelListProvider = GroupChannelListProvider;
+exports.useGroupChannelListContext = useGroupChannelListContext;
+//# sourceMappingURL=bundle-Y86Tvf8p.js.map

package/cjs/chunks/bundle-Y86Tvf8p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-Y86Tvf8p.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-VB_a0u7i.js → bundle-YjNFrYVt.js}

@@ -29,4 +29,4 @@ function getCaseResolvedThreadReplySelectType(threadReplySelectType) {
 
 exports.getCaseResolvedReplyType = getCaseResolvedReplyType;
 exports.getCaseResolvedThreadReplySelectType = getCaseResolvedThreadReplySelectType;
-//# sourceMappingURL=bundle-VB_a0u7i.js.map
+//# sourceMappingURL=bundle-YjNFrYVt.js.map

package/cjs/chunks/bundle-YjNFrYVt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-YjNFrYVt.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/bundle-ZvLEz_GA.js

@@ -0,0 +1,391 @@
+'use strict';
+
+var _tslib = require('./bundle-DhtZdKsr.js');
+var React = require('react');
+var utils = require('./bundle-jcgWT1ad.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-6SzyBwQ5.js');
+var SuggestedMentionListView = require('./bundle--QPuGnli.js');
+var Message_hooks_useDirtyGetMentions = require('../Message/hooks/useDirtyGetMentions.js');
+var ui_QuoteMessageInput = require('../ui/QuoteMessageInput.js');
+var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
+var VoiceRecorder_useVoiceRecorder = require('../VoiceRecorder/useVoiceRecorder.js');
+var ui_VoiceMessageInput = require('./bundle-zLoe4MOM.js');
+var ui_Modal = require('./bundle-6L4HCLmb.js');
+var ui_Button = require('../ui/Button.js');
+var consts = require('./bundle-UAspU0bH.js');
+var VoicePlayer_context = require('./bundle-zAQuo6rI.js');
+var uuid = require('./bundle-TB_UEIPg.js');
+var ui_MessageInput = require('../ui/MessageInput.js');
+var MediaQueryContext = require('./bundle-6zBNmPOP.js');
+var _const = require('./bundle--tki3Ejh.js');
+var index = require('./bundle-nox41MG6.js');
+var hooks_useModal = require('../hooks/useModal.js');
+require('./bundle-VxcYXhwp.js');
+var compressImages = require('./bundle-PSEoX-EH.js');
+
+var SuggestedMentionList = function (props) {
+    return (React.createElement(SuggestedMentionListView.SuggestedMentionListView, _tslib.__assign({}, props)));
+};
+
+var VoiceMessageInputWrapper = function (_a) {
+    var _b;
+    var channel = _a.channel, onCancelClick = _a.onCancelClick, onSubmitClick = _a.onSubmitClick;
+    var uuid$1 = React.useRef(uuid.uuidv4()).current;
+    var _c = React.useState(null), audioFile = _c[0], setAudioFile = _c[1];
+    var _d = React.useState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD), voiceInputState = _d[0], setVoiceInputState = _d[1];
+    var _e = React.useState(false), isSubmitted = _e[0], setSubmit = _e[1];
+    var _f = React.useState(false), isDisabled = _f[0], setDisabled = _f[1];
+    var _g = React.useState(false), showModal = _g[0], setShowModal = _g[1];
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var minRecordingTime = ((_b = config === null || config === void 0 ? void 0 : config.voiceRecord) === null || _b === void 0 ? void 0 : _b.minRecordingTime) || consts.VOICE_RECORDER_DEFAULT_MIN;
+    var _h = VoiceRecorder_useVoiceRecorder.useVoiceRecorder({
+        onRecordingStarted: function () {
+            setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.RECORDING);
+        },
+        onRecordingEnded: function (audioFile) {
+            setAudioFile(audioFile);
+        },
+    }), start = _h.start, stop = _h.stop, cancel = _h.cancel, recordingTime = _h.recordingTime, recordingStatus = _h.recordingStatus, recordingLimit = _h.recordingLimit;
+    var voicePlayer = VoicePlayer_useVoicePlayer.useVoicePlayer({
+        channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
+        key: uuid$1,
+        audioFile: audioFile,
+    });
+    var play = voicePlayer.play, pause = voicePlayer.pause, playbackTime = voicePlayer.playbackTime, playingStatus = voicePlayer.playingStatus;
+    var stopVoicePlayer = voicePlayer.stop;
+    // disabled state: muted & frozen
+    React.useEffect(function () {
+        if (utils.isDisabledBecauseFrozen(channel) || utils.isDisabledBecauseMuted(channel)) {
+            setDisabled(true);
+        }
+        else {
+            setDisabled(false);
+        }
+    }, [channel === null || channel === void 0 ? void 0 : channel.myRole, channel === null || channel === void 0 ? void 0 : channel.isFrozen, channel === null || channel === void 0 ? void 0 : channel.myMutedState]);
+    // call onSubmitClick when submit button is clicked and recorded audio file is created
+    React.useEffect(function () {
+        if (isSubmitted && audioFile) {
+            onSubmitClick(audioFile, recordingTime);
+            setSubmit(false);
+            setAudioFile(null);
+        }
+    }, [isSubmitted, audioFile, recordingTime]);
+    // operate which control button should be displayed
+    React.useEffect(function () {
+        if (audioFile) {
+            if (recordingTime < minRecordingTime) {
+                setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                setAudioFile(null);
+            }
+            else if (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING) {
+                setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.PLAYING);
+            }
+            else {
+                setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_PLAY);
+            }
+        }
+    }, [audioFile, recordingTime, playingStatus]);
+    return (React.createElement("div", { className: "sendbird-voice-message-input-wrapper" },
+        React.createElement(ui_VoiceMessageInput.VoiceMessageInput, { currentValue: recordingStatus === VoiceRecorder_useVoiceRecorder.VoiceRecorderStatus.COMPLETED ? playbackTime : recordingTime, maximumValue: recordingStatus === VoiceRecorder_useVoiceRecorder.VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit, currentType: voiceInputState, onCancelClick: function () {
+                onCancelClick();
+                cancel();
+                stopVoicePlayer();
+            }, onSubmitClick: function () {
+                if (isDisabled) {
+                    setShowModal(true);
+                    setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                }
+                else {
+                    stop();
+                    pause();
+                    setSubmit(true);
+                }
+            }, onControlClick: function (type) {
+                switch (type) {
+                    case ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD: {
+                        stopVoicePlayer();
+                        start();
+                        break;
+                    }
+                    case ui_VoiceMessageInput.VoiceMessageInputStatus.RECORDING: {
+                        if (recordingTime >= minRecordingTime && !isDisabled) {
+                            stop();
+                        }
+                        else if (isDisabled) {
+                            cancel();
+                            setShowModal(true);
+                            setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        else {
+                            cancel();
+                            setVoiceInputState(ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        break;
+                    }
+                    case ui_VoiceMessageInput.VoiceMessageInputStatus.READY_TO_PLAY: {
+                        play();
+                        break;
+                    }
+                    case ui_VoiceMessageInput.VoiceMessageInputStatus.PLAYING: {
+                        pause();
+                        break;
+                    }
+                }
+            } }),
+        showModal && (React.createElement(ui_Modal.Modal, { className: "sendbird-voice-message-input-wrapper-alert", titleText: utils.isDisabledBecauseMuted(channel)
+                ? stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED
+                : stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN, hideFooter: true, isCloseOnClickOutside: true, onCancel: function () {
+                setShowModal(false);
+                onCancelClick();
+            } },
+            React.createElement("div", { className: "sendbird-voice-message-input-wrapper-alert__body" },
+                React.createElement(ui_Button.default, { className: "sendbird-voice-message-input-wrapper-alert__body__ok-button", type: ui_Button.ButtonTypes.PRIMARY, size: ui_Button.ButtonSizes.BIG, onClick: function () {
+                        setShowModal(false);
+                        onCancelClick();
+                    } }, stringSet.BUTTON__OK))))));
+};
+
+var useHandleUploadFiles = function (_a, _b) {
+    var sendFileMessage = _a.sendFileMessage, sendMultipleFilesMessage = _a.sendMultipleFilesMessage, quoteMessage = _a.quoteMessage;
+    var logger = _b.logger;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var imageCompression = config.imageCompression;
+    var uikitUploadSizeLimit = config === null || config === void 0 ? void 0 : config.uikitUploadSizeLimit;
+    var uikitMultipleFilesMessageLimit = config === null || config === void 0 ? void 0 : config.uikitMultipleFilesMessageLimit;
+    var openModal = hooks_useModal.useGlobalModalContext().openModal;
+    return React.useCallback(function (files) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+        var ONE_MiB, compressedFiles, sendingFiles, file, imageFiles_1, otherFiles_1;
+        return _tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (files.length === 0) {
+                        logger.warning('Channel|useHandleUploadFiles: given file list is empty.', { files: files });
+                        return [2 /*return*/];
+                    }
+                    if (files.length > uikitMultipleFilesMessageLimit) {
+                        logger.info("Channel|useHandleUploadFiles: Cannot upload files more than ".concat(uikitMultipleFilesMessageLimit));
+                        openModal({
+                            modalProps: {
+                                titleText: "Up to ".concat(uikitMultipleFilesMessageLimit, " files can be attached."),
+                                hideFooter: true,
+                            },
+                            childElement: function (_a) {
+                                var closeModal = _a.closeModal;
+                                return (React.createElement(ui_Modal.ModalFooter, { type: ui_Button.ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
+                            },
+                        });
+                        return [2 /*return*/];
+                    }
+                    // Validate file sizes
+                    if (files.some(function (file) { return file.size > uikitUploadSizeLimit; })) {
+                        // The default value of uikitUploadSizeLimit is 26MB
+                        logger.info("Channel|useHandleUploadFiles: Cannot upload file size exceeding ".concat(uikitUploadSizeLimit));
+                        ONE_MiB = 1024 * 1024;
+                        openModal({
+                            modalProps: {
+                                titleText: "The maximum size per file is ".concat(Math.floor(uikitUploadSizeLimit / ONE_MiB), " MB."),
+                                hideFooter: true,
+                            },
+                            childElement: function (_a) {
+                                var closeModal = _a.closeModal;
+                                return (React.createElement(ui_Modal.ModalFooter, { type: ui_Button.ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
+                            },
+                        });
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, compressImages.compressImages({
+                            files: files,
+                            imageCompression: imageCompression,
+                            logger: logger,
+                        })];
+                case 1:
+                    compressedFiles = (_a.sent()).compressedFiles;
+                    sendingFiles = compressedFiles;
+                    // Send File Message
+                    if (sendingFiles.length === 1) {
+                        logger.info('Channel|useHandleUploadFiles: sending one file.');
+                        file = sendingFiles[0];
+                        return [2 /*return*/, sendFileMessage({ file: file, parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId })];
+                    }
+                    else if (sendingFiles.length > 1) {
+                        logger.info('Channel|useHandleUploadFiles: sending multiple files.');
+                        imageFiles_1 = [];
+                        otherFiles_1 = [];
+                        sendingFiles.forEach(function (file) {
+                            if (index.isImage(file.type)) {
+                                imageFiles_1.push(file);
+                            }
+                            else {
+                                otherFiles_1.push(file);
+                            }
+                        });
+                        return [2 /*return*/, otherFiles_1.reduce(function (previousPromise, item) {
+                                return previousPromise.then(function () {
+                                    return sendFileMessage({ file: item, parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId });
+                                });
+                            }, (function () {
+                                if (imageFiles_1.length === 0) {
+                                    return Promise.resolve();
+                                }
+                                else if (imageFiles_1.length === 1) {
+                                    return sendFileMessage({ file: imageFiles_1[0] });
+                                }
+                                else {
+                                    return sendMultipleFilesMessage({
+                                        fileInfoList: imageFiles_1.map(function (file) { return ({
+                                            file: file,
+                                            fileName: file.name,
+                                            fileSize: file.size,
+                                            mimeType: file.type,
+                                        }); }),
+                                        parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId,
+                                    });
+                                }
+                            })())];
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [sendFileMessage, sendMultipleFilesMessage, quoteMessage]);
+};
+
+var MessageInputWrapperView = React.forwardRef(function (props, ref) {
+    // Props
+    var currentChannel = props.currentChannel, localIsMFMEnabled = props.isMultipleFilesMessageEnabled, loading = props.loading, quoteMessage = props.quoteMessage, setQuoteMessage = props.setQuoteMessage, messageInputRef = props.messageInputRef, sendUserMessage = props.sendUserMessage, sendFileMessage = props.sendFileMessage, sendVoiceMessage = props.sendVoiceMessage, sendMultipleFilesMessage = props.sendMultipleFilesMessage, 
+    // render
+    renderUserMentionItem = props.renderUserMentionItem, renderFileUploadIcon = props.renderFileUploadIcon, renderVoiceMessageIcon = props.renderVoiceMessageIcon, renderSendMessageIcon = props.renderSendMessageIcon, acceptableMimeTypes = props.acceptableMimeTypes;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var _a = useSendbirdStateContext.useSendbirdStateContext(), stores = _a.stores, config = _a.config;
+    var isOnline = config.isOnline, isMentionEnabled = config.isMentionEnabled, isVoiceMessageEnabled = config.isVoiceMessageEnabled, globalIsMFMenabled = config.isMultipleFilesMessageEnabled, userMention = config.userMention, logger = config.logger;
+    var sdk = stores.sdkStore.sdk;
+    var maxMentionCount = userMention.maxMentionCount, maxSuggestionCount = userMention.maxSuggestionCount;
+    var isBroadcast = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast;
+    var isOperator = (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === 'operator';
+    // States
+    var _b = React.useState(''), mentionNickname = _b[0], setMentionNickname = _b[1];
+    var _c = React.useState([]), mentionedUsers = _c[0], setMentionedUsers = _c[1];
+    var _d = React.useState([]), mentionedUserIds = _d[0], setMentionedUserIds = _d[1];
+    var _e = React.useState(null), selectedUser = _e[0], setSelectedUser = _e[1];
+    var _f = React.useState([]), mentionSuggestedUsers = _f[0], setMentionSuggestedUsers = _f[1];
+    var _g = React.useState(null), messageInputEvent = _g[0], setMessageInputEvent = _g[1];
+    var _h = React.useState(false), showVoiceMessageInput = _h[0], setShowVoiceMessageInput = _h[1];
+    // Conditions
+    var isMessageInputDisabled = loading
+        || !currentChannel
+        || utils.isDisabledBecauseFrozen(currentChannel)
+        || utils.isDisabledBecauseMuted(currentChannel)
+        || (!isOnline && !(sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled));
+    var showSuggestedMentionList = !isMessageInputDisabled
+        && isMentionEnabled
+        && mentionNickname.length > 0
+        && !isBroadcast;
+    var isMultipleFilesMessageEnabled = localIsMFMEnabled !== null && localIsMFMEnabled !== void 0 ? localIsMFMEnabled : globalIsMFMenabled;
+    var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: ref || messageInputRef }, { logger: logger });
+    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxMentionCount;
+    // Operate states
+    React.useEffect(function () {
+        setMentionNickname('');
+        setMentionedUsers([]);
+        setMentionedUserIds([]);
+        setSelectedUser(null);
+        setMentionSuggestedUsers([]);
+        setMessageInputEvent(null);
+        setShowVoiceMessageInput(false);
+    }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+    React.useEffect(function () {
+        setMentionedUsers(mentionedUsers.filter(function (_a) {
+            var userId = _a.userId;
+            var i = mentionedUserIds.indexOf(userId);
+            if (i < 0) {
+                return false;
+            }
+            else {
+                mentionedUserIds.splice(i, 1);
+                return true;
+            }
+        }));
+    }, [mentionedUserIds]);
+    // Callbacks
+    var handleUploadFiles = useHandleUploadFiles({
+        sendFileMessage: sendFileMessage,
+        sendMultipleFilesMessage: sendMultipleFilesMessage,
+        quoteMessage: quoteMessage,
+    }, { logger: logger });
+    if (isBroadcast && !isOperator) {
+        /* Only `Operator` can send messages in the Broadcast channel */
+        return null;
+    }
+    // other conditions
+    return (React.createElement("div", { className: "sendbird-message-input-wrapper".concat(showVoiceMessageInput ? '--voice-message' : '') },
+        showSuggestedMentionList && (React.createElement(SuggestedMentionList, { currentChannel: currentChannel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
+                if (user) {
+                    setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
+                }
+                setMentionNickname('');
+                setSelectedUser(user);
+                setMessageInputEvent(null);
+            }, onFocusItemChange: function () {
+                setMessageInputEvent(null);
+            }, onFetchUsers: function (users) {
+                setMentionSuggestedUsers(users);
+            }, ableAddMention: ableMention, maxMentionCount: maxMentionCount, maxSuggestionCount: maxSuggestionCount })),
+        quoteMessage && (React.createElement("div", { className: "sendbird-message-input-wrapper__quote-message-input" },
+            React.createElement(ui_QuoteMessageInput, { replyingMessage: quoteMessage, onClose: function () { return setQuoteMessage(null); } }))),
+        showVoiceMessageInput ? (React.createElement(VoiceMessageInputWrapper, { channel: currentChannel, onSubmitClick: function (recordedFile, duration) {
+                sendVoiceMessage({ file: recordedFile, parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId }, duration);
+                setQuoteMessage(null);
+                setShowVoiceMessageInput(false);
+            }, onCancelClick: function () {
+                setShowVoiceMessageInput(false);
+            } })) : (React.createElement(ui_MessageInput, { className: "sendbird-message-input-wrapper__message-input", channel: currentChannel, channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, acceptableMimeTypes: acceptableMimeTypes, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled, isSelectingMultipleFilesEnabled: isMultipleFilesMessageEnabled, onVoiceMessageIconClick: function () {
+                setShowVoiceMessageInput(true);
+            }, setMentionedUsers: setMentionedUsers, placeholder: (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)
+                || (utils.isDisabledBecauseFrozen(currentChannel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)
+                || (utils.isDisabledBecauseMuted(currentChannel)
+                    && (isMobile ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED)), ref: ref || messageInputRef, disabled: isMessageInputDisabled, renderFileUploadIcon: renderFileUploadIcon, renderSendMessageIcon: renderSendMessageIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, onStartTyping: function () {
+                currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping();
+            }, onSendMessage: function (_a) {
+                var _b;
+                var message = _a.message, mentionTemplate = _a.mentionTemplate;
+                sendUserMessage({
+                    message: message,
+                    mentionedUsers: mentionedUsers,
+                    mentionedMessageTemplate: mentionTemplate,
+                    parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId,
+                });
+                setMentionNickname('');
+                setMentionedUsers([]);
+                setQuoteMessage(null);
+                (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
+            }, onFileUpload: function (fileList) {
+                handleUploadFiles(fileList);
+                setQuoteMessage(null);
+            }, onUserMentioned: function (user) {
+                if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
+                    setSelectedUser(null);
+                    setMentionNickname('');
+                }
+            }, onMentionStringChange: function (mentionText) {
+                setMentionNickname(mentionText);
+            }, onMentionedUserIdsUpdated: function (userIds) {
+                setMentionedUserIds(userIds);
+            }, onKeyDown: function (e) {
+                if (showSuggestedMentionList
+                    && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
+                    && ((e.key === _const.MessageInputKeys.Enter && ableMention)
+                        || e.key === _const.MessageInputKeys.ArrowUp
+                        || e.key === _const.MessageInputKeys.ArrowDown)) {
+                    setMessageInputEvent(e);
+                    return true;
+                }
+                return false;
+            } }))));
+});
+
+exports.MessageInputWrapperView = MessageInputWrapperView;
+exports.VoiceMessageInputWrapper = VoiceMessageInputWrapper;
+//# sourceMappingURL=bundle-ZvLEz_GA.js.map

package/cjs/chunks/bundle-ZvLEz_GA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-ZvLEz_GA.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}