@sendbird/uikit-react 3.10.1 → 3.11.0

package/chunks/{bundle-ipC2A4Tb.js → bundle-areDE3aT.js}

@@ -1,14 +1,15 @@
-import { _ as __assign, a as __spreadArray, b as __awaiter, c as __generator } from './bundle-GKopZh-T.js';
+import { _ as __assign, a as __spreadArray, b as __awaiter, c as __generator } from './bundle-fgwje9pW.js';
 import React__default, { useEffect, useCallback, useReducer, useState, useMemo, useContext } from 'react';
-import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
-import { p as pubSubTopics } from './bundle-ku6CEjGk.js';
-import { u as uuidv4 } from './bundle-aeQZ5WsP.js';
-import { n as noop } from './bundle-WpHDilD_.js';
-import { D as DELIVERY_RECEIPT$1 } from './bundle-ZKM9Qk_j.js';
-import { U as UserProfileProvider } from './bundle-cXqs96Pt.js';
+import { GroupChannelHandler, GroupChannelListOrder } from '@sendbird/chat/groupChannel';
+import { p as pubSubTopics } from './bundle-pfcIdF14.js';
+import { u as uuidv4 } from './bundle-4IsRvL2E.js';
+import { n as noop } from './bundle-tOpyp2TM.js';
+import { D as DELIVERY_RECEIPT$1 } from './bundle-zpdae5WH.js';
+import { U as UserProfileProvider } from './bundle-NQlEMhhs.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { K, S } from './bundle-kfNTRju0.js';
-import { T as filterChannelListParams, V as getChannelsWithUpsertedChannel } from './bundle-uk2Y0AQu.js';
+import { K, S } from './bundle-n9wVwJwL.js';
+import { R as filterChannelListParams, T as getChannelsWithUpsertedChannel } from './bundle-GQt7EDbt.js';
+import { u as useReconnectOnIdle } from './bundle-NxSCk3As.js';
 
 var RESET_CHANNEL_LIST = 'RESET_CHANNEL_LIST';
 var CREATE_CHANNEL = 'CREATE_CHANNEL';
@@ -19,6 +20,7 @@ var FETCH_CHANNELS_SUCCESS = 'FETCH_CHANNELS_SUCCESS';
 var FETCH_CHANNELS_FAILURE = 'FETCH_CHANNELS_FAILURE';
 var INIT_CHANNELS_START = 'INIT_CHANNELS_START';
 var INIT_CHANNELS_SUCCESS = 'INIT_CHANNELS_SUCCESS';
+var REFRESH_CHANNELS_SUCCESS = 'REFRESH_CHANNELS_SUCCESS';
 var INIT_CHANNELS_FAILURE = 'INIT_CHANNELS_FAILURE';
 var ON_USER_JOINED = 'ON_USER_JOINED';
 var ON_CHANNEL_DELETED = 'ON_CHANNEL_DELETED';
@@ -138,7 +140,7 @@ var createChannelListQuery = function (_a) {
     var params = {
         includeEmpty: false,
         limit: 20,
-        order: 'latest_last_message', // 'chronological', 'latest_last_message', 'channel_name_alphabetical', and 'metadata_value_alphabetical'
+        order: GroupChannelListOrder.LATEST_LAST_MESSAGE,
     };
     if (userFilledChannelListQuery) {
         Object.keys(userFilledChannelListQuery).forEach(function (key) {
@@ -303,10 +305,16 @@ function channelListReducer(state, action) {
         var payload = _a.payload;
         return (__assign(__assign({}, state), { loading: true, currentUserId: payload.currentUserId }));
     })
-        .with({ type: RESET_CHANNEL_LIST }, function () { return initialState; })
+        .with({ type: RESET_CHANNEL_LIST }, function () {
+        return initialState;
+    })
         .with({ type: INIT_CHANNELS_SUCCESS }, function (action) {
         var _a = action.payload, channelList = _a.channelList, disableAutoSelect = _a.disableAutoSelect;
-        return __assign(__assign({}, state), { initialized: true, loading: false, allChannels: channelList, disableAutoSelect: disableAutoSelect, currentChannel: !disableAutoSelect && channelList && channelList.length && channelList.length > 0 ? channelList[0] : null });
+        return __assign(__assign({}, state), { initialized: true, loading: false, allChannels: channelList, disableAutoSelect: disableAutoSelect, currentChannel: !disableAutoSelect && channelList && channelList.length && channelList.length > 0 ? channelList[0] : state.currentChannel });
+    })
+        .with({ type: REFRESH_CHANNELS_SUCCESS }, function (action) {
+        var _a = action.payload, channelList = _a.channelList, currentChannel = _a.currentChannel;
+        return __assign(__assign({}, state), { loading: false, allChannels: channelList, currentChannel: currentChannel });
     })
         .with({ type: FETCH_CHANNELS_SUCCESS }, function (action) {
         var currentChannels = state.allChannels.map(function (c) { return c.url; });
@@ -371,22 +379,41 @@ function channelListReducer(state, action) {
         var _a;
         var _b = action.payload, channel = _b.channel, isMe = _b.isMe;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
-        var nextChannels = allChannels.filter(function (ch) { return ch.url !== channel.url; });
-        var nextChannel = null;
-        if (channelListQuery) {
-            if (filterChannelListParams(channelListQuery, channel, currentUserId)) {
-                // Good to [add to/keep in] the ChannelList
-                nextChannels = getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order);
+        var nextChannels = __spreadArray([], allChannels, true);
+        var nextChannel = channel;
+        /**
+         * 1. If I left channel:
+         *   - Remove the channel from channel list
+         *   - Replace currentChannel with the next ordered channel
+         * 2. If other member left channel:
+         *   2-1. If query is given:
+         *     2-1-1. If channel no longer matches the query
+         *       - Same as step 1
+         *     2-1-2. If channel matches the query:
+         *       - Upsert channel list with the channel
+         *       - Replace currentChannel IFF url is same
+         *   2-2. If query is not given,
+         *     - Same as step 2-1-2
+         */
+        /* `1` and `2-1-1` */
+        if (isMe || (channelListQuery && !filterChannelListParams(channelListQuery, channel, currentUserId))) {
+            var channelAt = allChannels.findIndex(function (ch) { return ch.url === channel.url; });
+            if (channelAt > -1) {
+                nextChannels.splice(channelAt, 1);
+                nextChannel = getNextChannel({
+                    channel: channel,
+                    currentChannel: currentChannel,
+                    allChannels: allChannels,
+                    disableAutoSelect: disableAutoSelect,
+                });
             }
         }
-        // Replace the currentChannel if I left the currentChannel
-        if (isMe) {
-            nextChannel = getNextChannel({
-                channel: channel,
-                currentChannel: currentChannel,
-                allChannels: allChannels,
-                disableAutoSelect: disableAutoSelect,
-            });
+        else {
+            /* `2-1-2` and `2-2` */
+            nextChannels = getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order);
+            if ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) === channel.url) {
+                nextChannel = channel;
+            }
         }
         return __assign(__assign({}, state), { currentChannel: nextChannel, allChannels: nextChannels });
     })
@@ -590,6 +617,86 @@ var useFetchChannelList = function (_a, _b) {
     ]);
 };
 
+function useHandleReconnectForChannelList(_a) {
+    var isOnline = _a.isOnline, reconnectOnIdle = _a.reconnectOnIdle, logger = _a.logger, sdk = _a.sdk, currentGroupChannel = _a.currentGroupChannel, channelListDispatcher = _a.channelListDispatcher, setChannelSource = _a.setChannelSource, userFilledChannelListQuery = _a.userFilledChannelListQuery, sortChannelList = _a.sortChannelList, disableAutoSelect = _a.disableAutoSelect, markAsDeliveredScheduler = _a.markAsDeliveredScheduler, disableMarkAsDelivered = _a.disableMarkAsDelivered;
+    var shouldReconnect = useReconnectOnIdle(isOnline, currentGroupChannel, reconnectOnIdle).shouldReconnect;
+    useEffect(function () {
+        return function () {
+            var _a, _b, _c, _d;
+            // state changed from offline to online AND tab is visible
+            if (shouldReconnect) {
+                logger.info('ChannelList refresh - creating query', { userFilledChannelListQuery: userFilledChannelListQuery });
+                var channelListQuery = createChannelListQuery({ sdk: sdk, userFilledChannelListQuery: userFilledChannelListQuery });
+                logger.info('ChannelList refresh - created query', channelListQuery);
+                setChannelSource(channelListQuery);
+                channelListDispatcher({
+                    type: INIT_CHANNELS_START,
+                    payload: {
+                        currentUserId: (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId) !== null && _b !== void 0 ? _b : '',
+                    },
+                });
+                if (userFilledChannelListQuery) {
+                    logger.info('ChannelList refresh - setting up channelListQuery', channelListQuery);
+                    channelListDispatcher({
+                        type: CHANNEL_LIST_PARAMS_UPDATED,
+                        payload: {
+                            channelListQuery: channelListQuery,
+                            currentUserId: (_d = (_c = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _c === void 0 ? void 0 : _c.userId) !== null && _d !== void 0 ? _d : '',
+                        },
+                    });
+                }
+                logger.info('ChannelList refresh - fetching channels');
+                if (channelListQuery.hasNext) {
+                    channelListQuery
+                        .next()
+                        .then(function (channelList) {
+                        var _a, _b;
+                        logger.info('ChannelList refresh - fetched channels', channelList);
+                        var sortedChannelList = channelList;
+                        if (sortChannelList && typeof sortChannelList === 'function') {
+                            sortedChannelList = sortChannelList(channelList);
+                            logger.info('ChannelList refresh - channel list sorted', sortedChannelList);
+                        }
+                        // select first channel
+                        var newCurrentChannel = !disableAutoSelect ? sortedChannelList[0] : null;
+                        if (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) {
+                            var foundChannel = sortedChannelList.find(function (channel) { return (channel.url === currentGroupChannel.url); });
+                            if (foundChannel) {
+                                newCurrentChannel = foundChannel;
+                            }
+                        }
+                        logger.info('ChannelList refresh - highlight channel', newCurrentChannel);
+                        channelListDispatcher({
+                            type: REFRESH_CHANNELS_SUCCESS,
+                            payload: {
+                                channelList: sortedChannelList,
+                                currentChannel: newCurrentChannel,
+                            },
+                        });
+                        var canSetMarkAsDelivered = (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.premiumFeatureList) === null || _b === void 0 ? void 0 : _b.find(function (feature) { return feature === DELIVERY_RECEIPT$1; });
+                        if (canSetMarkAsDelivered && !disableMarkAsDelivered) {
+                            sortedChannelList.forEach(function (channel) {
+                                markAsDeliveredScheduler.push(channel);
+                            });
+                        }
+                    })
+                        .catch(function (err) {
+                        if (err) {
+                            logger.error('ChannelList refresh - could not fetch channels', err);
+                            channelListDispatcher({
+                                type: INIT_CHANNELS_FAILURE,
+                            });
+                        }
+                    });
+                }
+                else {
+                    logger.info('ChannelList refresh - there are no more channels');
+                }
+            }
+        };
+    }, [shouldReconnect]);
+}
+
 var ChannelListContext = React__default.createContext({
     disableUserProfile: true,
     allowProfileEdit: true,
@@ -609,11 +716,12 @@ var ChannelListContext = React__default.createContext({
     channelSource: null,
     typingChannels: [],
     fetchChannelList: noop,
+    reconnectOnIdle: true,
 });
 var ChannelListProvider = function (props) {
     var _a, _b;
     // destruct props
-    var children = props.children, className = props.className, disableUserProfile = props.disableUserProfile, allowProfileEdit = props.allowProfileEdit, queries = props.queries, onProfileEditSuccess = props.onProfileEditSuccess, onThemeChange = props.onThemeChange, onBeforeCreateChannel = props.onBeforeCreateChannel, sortChannelList = props.sortChannelList, overrideInviteUser = props.overrideInviteUser, activeChannelUrl = props.activeChannelUrl, _c = props.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _c === void 0 ? null : _c, _d = props.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _d === void 0 ? null : _d;
+    var children = props.children, className = props.className, disableUserProfile = props.disableUserProfile, allowProfileEdit = props.allowProfileEdit, queries = props.queries, onProfileEditSuccess = props.onProfileEditSuccess, onThemeChange = props.onThemeChange, onBeforeCreateChannel = props.onBeforeCreateChannel, sortChannelList = props.sortChannelList, overrideInviteUser = props.overrideInviteUser, activeChannelUrl = props.activeChannelUrl, _c = props.isTypingIndicatorEnabled, isTypingIndicatorEnabled = _c === void 0 ? null : _c, _d = props.isMessageReceiptStatusEnabled, isMessageReceiptStatusEnabled = _d === void 0 ? null : _d, reconnectOnIdle = props.reconnectOnIdle;
     // disable autoselect, if activeChannelUrl is provided
     // useActiveChannelUrl should be executed when activeChannelUrl is present
     var disableAutoSelect = (props === null || props === void 0 ? void 0 : props.disableAutoSelect) || !!activeChannelUrl;
@@ -623,7 +731,7 @@ var ChannelListProvider = function (props) {
     var config = globalStore.config, stores = globalStore.stores;
     var sdkStore = stores.sdkStore;
     var pubSub = config.pubSub, logger = config.logger, onUserProfileMessage = config.onUserProfileMessage;
-    var markAsDeliveredScheduler = config.markAsDeliveredScheduler, _e = config.disableMarkAsDelivered, disableMarkAsDelivered = _e === void 0 ? false : _e, _f = config.isTypingIndicatorEnabledOnChannelList, isTypingIndicatorEnabledOnChannelList = _f === void 0 ? false : _f, _g = config.isMessageReceiptStatusEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = _g === void 0 ? false : _g;
+    var markAsDeliveredScheduler = config.markAsDeliveredScheduler, _e = config.disableMarkAsDelivered, disableMarkAsDelivered = _e === void 0 ? false : _e, _f = config.isTypingIndicatorEnabledOnChannelList, isTypingIndicatorEnabledOnChannelList = _f === void 0 ? false : _f, _g = config.isMessageReceiptStatusEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = _g === void 0 ? false : _g, isOnline = config.isOnline;
     var sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
     var _h = ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) !== null && _a !== void 0 ? _a : {}).premiumFeatureList, premiumFeatureList = _h === void 0 ? [] : _h;
     // derive some variables
@@ -801,6 +909,20 @@ var ChannelListProvider = function (props) {
         logger: logger,
         channelListDispatcher: channelListDispatcher,
     });
+    useHandleReconnectForChannelList({
+        isOnline: isOnline,
+        reconnectOnIdle: reconnectOnIdle,
+        logger: logger,
+        sdk: sdk,
+        currentGroupChannel: currentChannel,
+        channelListDispatcher: channelListDispatcher,
+        setChannelSource: setChannelSource,
+        userFilledChannelListQuery: userFilledChannelListQuery,
+        sortChannelList: sortChannelList,
+        disableAutoSelect: disableAutoSelect,
+        markAsDeliveredScheduler: markAsDeliveredScheduler,
+        disableMarkAsDelivered: disableMarkAsDelivered,
+    });
     var fetchChannelList = useFetchChannelList({
         channelSource: channelSource,
         disableMarkAsDelivered: disableMarkAsDelivered || !premiumFeatureList.some(function (feature) { return feature === DELIVERY_RECEIPT$1; }),
@@ -821,4 +943,4 @@ function useChannelListContext() {
 }
 
 export { ChannelListProvider as C, LEAVE_CHANNEL_SUCCESS as L, SET_CURRENT_CHANNEL as S, useChannelListContext as u };
-//# sourceMappingURL=bundle-ipC2A4Tb.js.map
+//# sourceMappingURL=bundle-areDE3aT.js.map

package/{cjs/chunks/bundle-Jcrboe06.js.map → chunks/bundle-areDE3aT.js.map}

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

package/chunks/bundle-b1IOVyYG.js

@@ -0,0 +1,389 @@
+import { _ as __assign, b as __awaiter, c as __generator, a as __spreadArray } from './bundle-fgwje9pW.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { i as isDisabledBecauseFrozen, a as isDisabledBecauseMuted } from './bundle-2mo18Chz.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { u as useLocalization } from './bundle-hOV701rb.js';
+import { S as SuggestedMentionListView } from './bundle-QOv6Bgtw.js';
+import { useDirtyGetMentions } from '../Message/hooks/useDirtyGetMentions.js';
+import QuoteMessageInput from '../ui/QuoteMessageInput.js';
+import { useVoicePlayer } from '../VoicePlayer/useVoicePlayer.js';
+import { useVoiceRecorder, VoiceRecorderStatus } from '../VoiceRecorder/useVoiceRecorder.js';
+import { V as VoiceMessageInputStatus, a as VoiceMessageInput } from './bundle-lxPqhWGY.js';
+import { M as Modal, c as ModalFooter } from './bundle-K0s-Ect1.js';
+import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
+import { f as VOICE_RECORDER_DEFAULT_MIN } from './bundle-zpdae5WH.js';
+import { V as VOICE_PLAYER_STATUS } from './bundle-eHUDbnaD.js';
+import { u as uuidv4 } from './bundle-4IsRvL2E.js';
+import MessageInput from '../ui/MessageInput.js';
+import { u as useMediaQueryContext } from './bundle-SbHFlBY0.js';
+import { M as MessageInputKeys } from './bundle-ueo2Sf-L.js';
+import { v as isImage } from './bundle-GQt7EDbt.js';
+import { useGlobalModalContext } from '../hooks/useModal.js';
+import './bundle-kVopRZZG.js';
+import { c as compressImages } from './bundle-2d4_n6Eh.js';
+
+var SuggestedMentionList = function (props) {
+    return (React__default.createElement(SuggestedMentionListView, __assign({}, props)));
+};
+
+var VoiceMessageInputWrapper = function (_a) {
+    var _b;
+    var channel = _a.channel, onCancelClick = _a.onCancelClick, onSubmitClick = _a.onSubmitClick;
+    var uuid = useRef(uuidv4()).current;
+    var _c = useState(null), audioFile = _c[0], setAudioFile = _c[1];
+    var _d = useState(VoiceMessageInputStatus.READY_TO_RECORD), voiceInputState = _d[0], setVoiceInputState = _d[1];
+    var _e = useState(false), isSubmitted = _e[0], setSubmit = _e[1];
+    var _f = useState(false), isDisabled = _f[0], setDisabled = _f[1];
+    var _g = useState(false), showModal = _g[0], setShowModal = _g[1];
+    var stringSet = useLocalization().stringSet;
+    var config = useSendbirdStateContext().config;
+    var minRecordingTime = ((_b = config === null || config === void 0 ? void 0 : config.voiceRecord) === null || _b === void 0 ? void 0 : _b.minRecordingTime) || VOICE_RECORDER_DEFAULT_MIN;
+    var _h = useVoiceRecorder({
+        onRecordingStarted: function () {
+            setVoiceInputState(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 = useVoicePlayer({
+        channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
+        key: uuid,
+        audioFile: audioFile,
+    });
+    var play = voicePlayer.play, pause = voicePlayer.pause, playbackTime = voicePlayer.playbackTime, playingStatus = voicePlayer.playingStatus;
+    var stopVoicePlayer = voicePlayer.stop;
+    // disabled state: muted & frozen
+    useEffect(function () {
+        if (isDisabledBecauseFrozen(channel) || 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
+    useEffect(function () {
+        if (isSubmitted && audioFile) {
+            onSubmitClick(audioFile, recordingTime);
+            setSubmit(false);
+            setAudioFile(null);
+        }
+    }, [isSubmitted, audioFile, recordingTime]);
+    // operate which control button should be displayed
+    useEffect(function () {
+        if (audioFile) {
+            if (recordingTime < minRecordingTime) {
+                setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                setAudioFile(null);
+            }
+            else if (playingStatus === VOICE_PLAYER_STATUS.PLAYING) {
+                setVoiceInputState(VoiceMessageInputStatus.PLAYING);
+            }
+            else {
+                setVoiceInputState(VoiceMessageInputStatus.READY_TO_PLAY);
+            }
+        }
+    }, [audioFile, recordingTime, playingStatus]);
+    return (React__default.createElement("div", { className: "sendbird-voice-message-input-wrapper" },
+        React__default.createElement(VoiceMessageInput, { currentValue: recordingStatus === VoiceRecorderStatus.COMPLETED ? playbackTime : recordingTime, maximumValue: recordingStatus === VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit, currentType: voiceInputState, onCancelClick: function () {
+                onCancelClick();
+                cancel();
+                stopVoicePlayer();
+            }, onSubmitClick: function () {
+                if (isDisabled) {
+                    setShowModal(true);
+                    setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                }
+                else {
+                    stop();
+                    pause();
+                    setSubmit(true);
+                }
+            }, onControlClick: function (type) {
+                switch (type) {
+                    case VoiceMessageInputStatus.READY_TO_RECORD: {
+                        stopVoicePlayer();
+                        start();
+                        break;
+                    }
+                    case VoiceMessageInputStatus.RECORDING: {
+                        if (recordingTime >= minRecordingTime && !isDisabled) {
+                            stop();
+                        }
+                        else if (isDisabled) {
+                            cancel();
+                            setShowModal(true);
+                            setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        else {
+                            cancel();
+                            setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        break;
+                    }
+                    case VoiceMessageInputStatus.READY_TO_PLAY: {
+                        play();
+                        break;
+                    }
+                    case VoiceMessageInputStatus.PLAYING: {
+                        pause();
+                        break;
+                    }
+                }
+            } }),
+        showModal && (React__default.createElement(Modal, { className: "sendbird-voice-message-input-wrapper-alert", titleText: 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__default.createElement("div", { className: "sendbird-voice-message-input-wrapper-alert__body" },
+                React__default.createElement(Button, { className: "sendbird-voice-message-input-wrapper-alert__body__ok-button", type: ButtonTypes.PRIMARY, size: 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 = useLocalization().stringSet;
+    var config = 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 = useGlobalModalContext().openModal;
+    return useCallback(function (files) { return __awaiter(void 0, void 0, void 0, function () {
+        var ONE_MiB, compressedFiles, sendingFiles, file, imageFiles_1, otherFiles_1;
+        return __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__default.createElement(ModalFooter, { type: 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__default.createElement(ModalFooter, { type: ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
+                            },
+                        });
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, 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 (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__default.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, disabled = props.disabled;
+    var stringSet = useLocalization().stringSet;
+    var isMobile = useMediaQueryContext().isMobile;
+    var _a = 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 = useState(''), mentionNickname = _b[0], setMentionNickname = _b[1];
+    var _c = useState([]), mentionedUsers = _c[0], setMentionedUsers = _c[1];
+    var _d = useState([]), mentionedUserIds = _d[0], setMentionedUserIds = _d[1];
+    var _e = useState(null), selectedUser = _e[0], setSelectedUser = _e[1];
+    var _f = useState([]), mentionSuggestedUsers = _f[0], setMentionSuggestedUsers = _f[1];
+    var _g = useState(null), messageInputEvent = _g[0], setMessageInputEvent = _g[1];
+    var _h = useState(false), showVoiceMessageInput = _h[0], setShowVoiceMessageInput = _h[1];
+    // Conditions
+    var isMessageInputDisabled = loading
+        || !currentChannel
+        || isDisabledBecauseFrozen(currentChannel)
+        || isDisabledBecauseMuted(currentChannel)
+        || (!isOnline && !(sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled))
+        || disabled;
+    var showSuggestedMentionList = !isMessageInputDisabled
+        && isMentionEnabled
+        && mentionNickname.length > 0
+        && !isBroadcast;
+    var isMultipleFilesMessageEnabled = localIsMFMEnabled !== null && localIsMFMEnabled !== void 0 ? localIsMFMEnabled : globalIsMFMenabled;
+    var mentionNodes = useDirtyGetMentions({ ref: ref || messageInputRef }, { logger: logger });
+    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxMentionCount;
+    // Operate states
+    useEffect(function () {
+        setMentionNickname('');
+        setMentionedUsers([]);
+        setMentionedUserIds([]);
+        setSelectedUser(null);
+        setMentionSuggestedUsers([]);
+        setMessageInputEvent(null);
+        setShowVoiceMessageInput(false);
+    }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+    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__default.createElement("div", { className: "sendbird-message-input-wrapper".concat(showVoiceMessageInput ? '--voice-message' : '') },
+        showSuggestedMentionList && (React__default.createElement(SuggestedMentionList, { currentChannel: currentChannel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
+                if (user) {
+                    setMentionedUsers(__spreadArray(__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__default.createElement("div", { className: "sendbird-message-input-wrapper__quote-message-input" },
+            React__default.createElement(QuoteMessageInput, { replyingMessage: quoteMessage, onClose: function () { return setQuoteMessage(null); } }))),
+        showVoiceMessageInput ? (React__default.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__default.createElement(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)
+                || ((disabled || isDisabledBecauseFrozen(currentChannel)) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)
+                || (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 === MessageInputKeys.Enter && ableMention)
+                        || e.key === MessageInputKeys.ArrowUp
+                        || e.key === MessageInputKeys.ArrowDown)) {
+                    setMessageInputEvent(e);
+                    return true;
+                }
+                return false;
+            } }))));
+});
+
+export { MessageInputWrapperView as M, VoiceMessageInputWrapper as V };
+//# sourceMappingURL=bundle-b1IOVyYG.js.map