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

package/chunks/{bundle-pnJu3fWb.js → bundle-otzUyFE_.js}

@@ -1,14 +1,15 @@
-import { _ as __assign, a as __spreadArray, b as __awaiter, c as __generator } from './bundle-Dv_OpODB.js';
+import { _ as __assign, a as __spreadArray, b as __awaiter, c as __generator } from './bundle-BA7tv0JB.js';
 import React__default, { useEffect, useCallback, useReducer, useState, useMemo, useContext } from 'react';
-import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
-import { p as pubSubTopics } from './bundle-tD8xAWw2.js';
-import { u as uuidv4 } from './bundle-mccz6DbW.js';
-import { n as noop } from './bundle-kHH52OEM.js';
-import { D as DELIVERY_RECEIPT$1 } from './bundle-QjcHKpDK.js';
-import { U as UserProfileProvider } from './bundle-8XAFqDsw.js';
+import { GroupChannelHandler, GroupChannelListOrder } from '@sendbird/chat/groupChannel';
+import { p as pubSubTopics } from './bundle-nlOgiAcu.js';
+import { u as uuidv4 } from './bundle-YoWLsJ0C.js';
+import { n as noop } from './bundle-cA_r9HRx.js';
+import { D as DELIVERY_RECEIPT$1 } from './bundle-MBrlu_LK.js';
+import { U as UserProfileProvider } from './bundle-vOT5acXc.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { K, S } from './bundle-rQ1k1Cpu.js';
-import { T as filterChannelListParams, V as getChannelsWithUpsertedChannel } from './bundle-aD4V4aI8.js';
+import { K, S } from './bundle-aKXnhi3A.js';
+import { R as filterChannelListParams, T as getChannelsWithUpsertedChannel } from './bundle-N9hMnIRl.js';
+import { u as useReconnectOnIdle } from './bundle-D1V3P366.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';
@@ -30,7 +32,6 @@ var ON_CHANNEL_FROZEN = 'ON_CHANNEL_FROZEN';
 var ON_CHANNEL_UNFROZEN = 'ON_CHANNEL_UNFROZEN';
 var ON_READ_RECEIPT_UPDATED = 'ON_READ_RECEIPT_UPDATED';
 var ON_DELIVERY_RECEIPT_UPDATED = 'ON_DELIVERY_RECEIPT_UPDATED';
-var CHANNEL_REPLACED_TO_TOP = 'CHANNEL_REPLACED_TO_TOP';
 var CHANNEL_LIST_PARAMS_UPDATED = 'CHANNEL_LIST_PARAMS_UPDATED';
 
 var DELIVERY_RECEIPT = 'delivery_receipt';
@@ -139,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) {
@@ -265,15 +266,6 @@ var pubSubHandler = function (pubSub, channelListDispatcher) {
             payload: channel === null || channel === void 0 ? void 0 : channel.url,
         });
     }));
-    subscriber.set(pubSubTopics.SEND_MESSAGE_START, pubSub.subscribe(pubSubTopics.SEND_MESSAGE_START, function (_a) {
-        var channel = _a.channel;
-        if (channel.isGroupChannel()) {
-            channelListDispatcher({
-                type: CHANNEL_REPLACED_TO_TOP,
-                payload: channel,
-            });
-        }
-    }));
     return subscriber;
 };
 
@@ -313,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; });
@@ -327,12 +325,13 @@ function channelListReducer(state, action) {
         return __assign(__assign({}, state), { allChannels: __spreadArray(__spreadArray([], state.allChannels, true), filteredChannels, true) });
     })
         .with({ type: CREATE_CHANNEL }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, channelListQuery = state.channelListQuery;
         if (channelListQuery) {
             if (filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to add to the ChannelList
-                return __assign(__assign({}, state), { currentChannel: channel, allChannels: getChannelsWithUpsertedChannel(allChannels, channel) });
+                return __assign(__assign({}, state), { currentChannel: channel, allChannels: getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Do not add to the ChannelList
             return __assign(__assign({}, state), { currentChannel: channel });
@@ -343,12 +342,13 @@ function channelListReducer(state, action) {
     })
         // A hidden channel will be unhidden when getting new message
         .with({ type: ON_CHANNEL_ARCHIVED }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         if (channelListQuery) {
             if (filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel) });
+                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // * Remove the channel from the ChannelList: because the channel is filtered
         }
@@ -376,38 +376,58 @@ function channelListReducer(state, action) {
         return __assign(__assign({}, state), { currentChannel: channelUrl === ((_a = state.currentChannel) === null || _a === void 0 ? void 0 : _a.url) ? allChannels[0] : state.currentChannel, allChannels: allChannels });
     })
         .with({ type: ON_USER_LEFT }, function (action) {
-        var _a = action.payload, channel = _a.channel, isMe = _a.isMe;
+        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);
+        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 });
     })
         .with({
         type: S.union(ON_USER_JOINED, ON_CHANNEL_CHANGED, ON_READ_RECEIPT_UPDATED, ON_DELIVERY_RECEIPT_UPDATED),
     }, function (action) {
-        var _a, _b;
+        var _a, _b, _c;
         var channel = action.payload;
-        var _c = state.allChannels, allChannels = _c === void 0 ? [] : _c, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
+        var _d = state.allChannels, allChannels = _d === void 0 ? [] : _d, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         var unreadMessageCount = channel.unreadMessageCount;
         if (channelListQuery) {
             if (filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel) });
+                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Filter the channel from the ChannelList
             // Replace the currentChannel if it's filtered channel
@@ -426,7 +446,7 @@ function channelListReducer(state, action) {
         // When marking as read the channel
         unreadMessageCount === 0
             // @ts-ignore - When sending a message by the current peer
-            && ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _a === void 0 ? void 0 : _a.sender) === null || _b === void 0 ? void 0 : _b.userId) !== currentUserId) {
+            && ((_c = (_b = channel === null || channel === void 0 ? void 0 : channel.lastMessage) === null || _b === void 0 ? void 0 : _b.sender) === null || _c === void 0 ? void 0 : _c.userId) !== currentUserId) {
             // Don't move to the top
             return __assign(__assign({}, state), { allChannels: allChannels.map(function (ch) { return (ch.url === (channel === null || channel === void 0 ? void 0 : channel.url) ? channel : ch); }) });
         }
@@ -443,12 +463,13 @@ function channelListReducer(state, action) {
         return __assign(__assign({}, state), { allChannels: state.allChannels.map(function (channel) { return (channel === null || channel === void 0 ? void 0 : channel.url) === action.payload.url ? action.payload : channel; }) });
     })
         .with({ type: ON_CHANNEL_FROZEN }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         if (channelListQuery) {
             if (filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel) });
+                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Filter the channel from the ChannelList
             // Replace the currentChannel if it's filtered channel
@@ -473,12 +494,13 @@ function channelListReducer(state, action) {
             }) });
     })
         .with({ type: ON_CHANNEL_UNFROZEN }, function (action) {
+        var _a;
         var channel = action.payload;
         var allChannels = state.allChannels, currentUserId = state.currentUserId, currentChannel = state.currentChannel, channelListQuery = state.channelListQuery, disableAutoSelect = state.disableAutoSelect;
         if (channelListQuery) {
             if (filterChannelListParams(channelListQuery, channel, currentUserId)) {
                 // Good to [add to/keep in] the ChannelList
-                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel) });
+                return __assign(__assign({}, state), { allChannels: getChannelsWithUpsertedChannel(allChannels, channel, (_a = state.channelListQuery) === null || _a === void 0 ? void 0 : _a.order) });
             }
             // Filter the channel from the ChannelList
             // Replace the currentChannel if it's filtered channel
@@ -502,17 +524,6 @@ function channelListReducer(state, action) {
                 }
                 return ch;
             }) });
-    })
-        .with({ type: CHANNEL_REPLACED_TO_TOP }, function (action) {
-        if (state.channelListQuery) {
-            if (filterChannelListParams(state.channelListQuery, action.payload, state.currentUserId)) {
-                return __assign(__assign({}, state), { allChannels: __spreadArray([
-                        action.payload
-                    ], state.allChannels.filter(function (channel) { return (channel === null || channel === void 0 ? void 0 : channel.url) !== action.payload.url; }), true) });
-            }
-            return state;
-        }
-        return __assign(__assign({}, state), { allChannels: __spreadArray([action.payload], state.allChannels.filter(function (channel) { return (channel === null || channel === void 0 ? void 0 : channel.url) !== action.payload.url; }), true) });
     })
         .with({ type: CHANNEL_LIST_PARAMS_UPDATED }, function (action) { return (__assign(__assign({}, state), { channelListQuery: action.payload.channelListQuery, currentUserId: action.payload.currentUserId })); })
         .otherwise(function () { return state; }));
@@ -606,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,
@@ -625,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;
@@ -639,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
@@ -817,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; }),
@@ -837,4 +943,4 @@ function useChannelListContext() {
 }
 
 export { ChannelListProvider as C, LEAVE_CHANNEL_SUCCESS as L, SET_CURRENT_CHANNEL as S, useChannelListContext as u };
-//# sourceMappingURL=bundle-pnJu3fWb.js.map
+//# sourceMappingURL=bundle-otzUyFE_.js.map

package/{cjs/chunks/bundle-2_VQBtF9.js.map → chunks/bundle-otzUyFE_.js.map}

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

package/chunks/{bundle-zx8iuoIh.js → bundle-poK2Vr1v.js}

@@ -1,7 +1,5 @@
 var PREV_RESULT_SIZE = 30;
 var NEXT_RESULT_SIZE = 15;
-var MAX_USER_MENTION_COUNT = 10;
-var MAX_USER_SUGGESTION_COUNT = 15;
 var USER_MENTION_TEMP_CHAR = '@';
 var ThreadReplySelectType;
 (function (ThreadReplySelectType) {
@@ -9,5 +7,5 @@ var ThreadReplySelectType;
     ThreadReplySelectType["THREAD"] = "THREAD";
 })(ThreadReplySelectType || (ThreadReplySelectType = {}));
 
-export { MAX_USER_MENTION_COUNT as M, NEXT_RESULT_SIZE as N, PREV_RESULT_SIZE as P, ThreadReplySelectType as T, USER_MENTION_TEMP_CHAR as U, MAX_USER_SUGGESTION_COUNT as a };
-//# sourceMappingURL=bundle-zx8iuoIh.js.map
+export { NEXT_RESULT_SIZE as N, PREV_RESULT_SIZE as P, ThreadReplySelectType as T, USER_MENTION_TEMP_CHAR as U };
+//# sourceMappingURL=bundle-poK2Vr1v.js.map

package/chunks/bundle-poK2Vr1v.js.map

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

package/chunks/bundle-qAc60kip.js

@@ -0,0 +1,48 @@
+import React__default, { useRef, useState, useContext } from 'react';
+import { u as useLocalization, L as LocalizationContext } from './bundle-BBjosDA0.js';
+import ContextMenu, { MenuItems, MenuItem } from '../ui/ContextMenu.js';
+import IconButton from '../ui/IconButton.js';
+import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
+import { M as Modal } from './bundle-cvTUkQV_.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+
+var LeaveGroupChannel = function (_a) {
+    var channel = _a.channel, onSubmit = _a.onSubmit, onCancel = _a.onCancel;
+    var config = useSendbirdStateContext().config;
+    var logger = config.logger, isOnline = config.isOnline;
+    var stringSet = useLocalization().stringSet;
+    if (channel) {
+        return (React__default.createElement(Modal, { disabled: !isOnline, onCancel: onCancel, onSubmit: function () {
+                logger.info('LeaveGroupChannel: Leaving channel', channel);
+                channel.leave().then(function () {
+                    logger.info('LeaveGroupChannel: Leaving channel successful!', channel);
+                    onSubmit();
+                });
+            }, submitText: stringSet.MODAL__LEAVE_CHANNEL__FOOTER, titleText: stringSet.MODAL__LEAVE_CHANNEL__TITLE }));
+    }
+};
+
+function ChannelPreviewAction(_a) {
+    var channel = _a.channel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onLeaveChannel = _a.onLeaveChannel;
+    var parentRef = useRef(null);
+    var parentContainerRef = useRef(null);
+    var _c = useState(false), showModal = _c[0], setShowModal = _c[1];
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.createElement("div", { ref: parentContainerRef, tabIndex: 0, role: "button", style: { display: 'inline-block' }, onKeyDown: function (e) { return e.stopPropagation(); }, onClick: function (e) { return e.stopPropagation(); } },
+        React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement(IconButton, { ref: parentRef, onClick: toggleDropdown, height: "32px", width: "32px" },
+                React__default.createElement(Icon, { type: IconTypes.MORE, fillColor: IconColors.PRIMARY, width: "24px", height: "24px" }))); }, menuItems: function (closeDropdown) { return (React__default.createElement(MenuItems, { parentRef: parentRef, parentContainRef: parentContainerRef, closeDropdown: closeDropdown },
+                React__default.createElement(MenuItem, { onClick: function () {
+                        if (disabled) {
+                            return;
+                        }
+                        setShowModal(true);
+                        closeDropdown();
+                    }, dataSbId: "channel_list_item_context_menu_leave_channel" }, stringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE))); } }),
+        showModal && (React__default.createElement(LeaveGroupChannel, { channel: channel, onSubmit: function () {
+                setShowModal(false);
+                onLeaveChannel();
+            }, onCancel: function () { return setShowModal(false); } }))));
+}
+
+export { ChannelPreviewAction as C, LeaveGroupChannel as L };
+//# sourceMappingURL=bundle-qAc60kip.js.map

package/chunks/bundle-qAc60kip.js.map

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

package/chunks/{bundle-Uw736N77.js → bundle-r9j_eCHc.js}

@@ -73,4 +73,4 @@ var MediaQueryProvider = function (props) {
 var useMediaQueryContext = function () { return React__default.useContext(MediaQueryContext); };
 
 export { MediaQueryProvider as M, useMediaQueryContext as u };
-//# sourceMappingURL=bundle-Uw736N77.js.map
+//# sourceMappingURL=bundle-r9j_eCHc.js.map

package/chunks/bundle-r9j_eCHc.js.map

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

package/chunks/bundle-tPCzzoc1.js

@@ -0,0 +1,34 @@
+function getComponentKeyFromMessage(message) {
+    if ('sendingStatus' in message) {
+        if (message.sendingStatus === 'succeeded')
+            return String(message.messageId);
+        return message.reqId;
+    }
+    return String(message.messageId);
+}
+function isContextMenuClosed() {
+    var _a, _b;
+    return (((_a = document.getElementById('sendbird-dropdown-portal')) === null || _a === void 0 ? void 0 : _a.childElementCount) === 0
+        && ((_b = document.getElementById('sendbird-emoji-list-portal')) === null || _b === void 0 ? void 0 : _b.childElementCount) === 0);
+}
+function getMessageTopOffset(messageCreatedAt) {
+    var _a;
+    var element = (_a = document.querySelectorAll("[data-sb-created-at=\"".concat(messageCreatedAt, "\"]"))) === null || _a === void 0 ? void 0 : _a[0];
+    if (element instanceof HTMLElement) {
+        return element.offsetTop;
+    }
+    return null;
+}
+var isDisabledBecauseFrozen = function (groupChannel) {
+    if (!groupChannel)
+        return false;
+    return groupChannel.isFrozen && groupChannel.myRole !== 'operator';
+};
+var isDisabledBecauseMuted = function (groupChannel) {
+    if (!groupChannel)
+        return false;
+    return groupChannel.myMutedState === 'muted';
+};
+
+export { isDisabledBecauseMuted as a, isContextMenuClosed as b, getComponentKeyFromMessage as c, getMessageTopOffset as g, isDisabledBecauseFrozen as i };
+//# sourceMappingURL=bundle-tPCzzoc1.js.map

package/chunks/bundle-tPCzzoc1.js.map

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

package/chunks/bundle-uIetzCLw.js

@@ -0,0 +1,64 @@
+import React__default, { useState, useEffect, useContext } from 'react';
+import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-I8JFwttJ.js';
+import { L as LocalizationContext } from './bundle-BBjosDA0.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { u as uuidv4 } from './bundle-YoWLsJ0C.js';
+
+var TypingIndicatorText = function (_a) {
+    var members = _a.members;
+    function getText() {
+        var stringSet = useContext(LocalizationContext).stringSet;
+        if (!members || members.length === 0) {
+            return '';
+        }
+        if (members && members.length === 1) {
+            return "".concat(members[0].nickname, " ").concat(stringSet.TYPING_INDICATOR__IS_TYPING);
+        }
+        if (members && members.length === 2) {
+            return "".concat(members[0].nickname, " ").concat(stringSet.TYPING_INDICATOR__AND, " ").concat(members[1].nickname, " ").concat(stringSet.TYPING_INDICATOR__ARE_TYPING);
+        }
+        return stringSet.TYPING_INDICATOR__MULTIPLE_TYPING;
+    }
+    return React__default.createElement(React__default.Fragment, null, getText());
+};
+var TypingIndicator = function (_a) {
+    var _b, _c, _d;
+    var channelUrl = _a.channelUrl;
+    var globalStore = useSendbirdStateContext();
+    var sb = (_c = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
+    var logger = (_d = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _d === void 0 ? void 0 : _d.logger;
+    var _e = useState(uuidv4()), handlerId = _e[0], setHandlerId = _e[1];
+    var _f = useState([]), typingMembers = _f[0], setTypingMembers = _f[1];
+    useEffect(function () {
+        var _a;
+        if ((_a = sb === null || sb === void 0 ? void 0 : sb.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
+            sb.groupChannel.removeGroupChannelHandler(handlerId);
+            var newHandlerId = uuidv4();
+            var handler = new GroupChannelHandler({
+                onTypingStatusUpdated: function (groupChannel) {
+                    // there is a possible warning in here - setState called after unmount
+                    logger.info('Channel > Typing Indicator: onTypingStatusUpdated', groupChannel);
+                    if (groupChannel.url === channelUrl) {
+                        var members = groupChannel.getTypingUsers();
+                        setTypingMembers(members);
+                    }
+                },
+            });
+            sb.groupChannel.addGroupChannelHandler(newHandlerId, handler);
+            setHandlerId(newHandlerId);
+        }
+        return function () {
+            var _a;
+            setTypingMembers([]);
+            if ((_a = sb === null || sb === void 0 ? void 0 : sb.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) {
+                sb.groupChannel.removeGroupChannelHandler(handlerId);
+            }
+        };
+    }, [channelUrl]);
+    return (React__default.createElement(Label, { className: "sendbird-conversation__footer__typing-indicator__text", type: LabelTypography.CAPTION_2, color: LabelColors.ONBACKGROUND_2 },
+        React__default.createElement(TypingIndicatorText, { members: typingMembers })));
+};
+
+export { TypingIndicator as T, TypingIndicatorText as a };
+//# sourceMappingURL=bundle-uIetzCLw.js.map

package/chunks/bundle-uIetzCLw.js.map

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

package/chunks/bundle-v3WxYU8s.js

@@ -0,0 +1,30 @@
+// we use pubsub to sync events between multiple components(example - ChannelList, Channel)
+// for example, if customer sends a message from their custom component
+// without pubsub,we would not be able to listen to it
+// in our ChannelList or Conversation
+var pubSubFactory = function () {
+    var topics = {};
+    return {
+        __getTopics: function () { return topics; },
+        subscribe: function (topic, listener) {
+            var _a;
+            (_a = topics[topic]) !== null && _a !== void 0 ? _a : (topics[topic] = new Set());
+            topics[topic].add(listener);
+            return {
+                remove: function () {
+                    topics[topic].delete(listener);
+                },
+            };
+        },
+        publish: function (topic, info) {
+            if (topics[topic]) {
+                topics[topic].forEach(function (fn) {
+                    setTimeout(function () { return fn(info !== undefined ? info : {}); }, 0);
+                });
+            }
+        },
+    };
+};
+
+export { pubSubFactory as p };
+//# sourceMappingURL=bundle-v3WxYU8s.js.map

package/chunks/bundle-v3WxYU8s.js.map

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

package/chunks/{bundle-8XAFqDsw.js → bundle-vOT5acXc.js}

@@ -21,4 +21,4 @@ var UserProfileProvider = function (_a) {
 };
 
 export { UserProfileProvider as U, UserProfileContext as a };
-//# sourceMappingURL=bundle-8XAFqDsw.js.map
+//# sourceMappingURL=bundle-vOT5acXc.js.map

package/chunks/bundle-vOT5acXc.js.map

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