stream-chat-react 10.20.0 → 10.21.0

package/dist/index.cjs.js

@@ -259,6 +259,23 @@ var withChannelActionContext = function (Component) {
     return WithChannelActionContextComponent;
 };
 
+var ChannelListContext = React.createContext(undefined);
+/**
+ * Context provider for components rendered within the `ChannelList`
+ */
+var ChannelListContextProvider = function (_a) {
+    var children = _a.children, value = _a.value;
+    return (React__default["default"].createElement(ChannelListContext.Provider, { value: value }, children));
+};
+var useChannelListContext = function (componentName) {
+    var contextValue = React.useContext(ChannelListContext);
+    if (!contextValue) {
+        console.warn("The useChannelListContext hook was called outside of the ChannelListContext provider. Make sure this hook is called within the ChannelList component. The errored call is located in the ".concat(componentName, " component."));
+        return {};
+    }
+    return contextValue;
+};
+
 var ChannelStateContext = React__default["default"].createContext(undefined);
 var ChannelStateProvider = function (_a) {
     var children = _a.children, value = _a.value;
@@ -27341,8 +27358,8 @@ var channelReducer = function (state, action) {
             return __assign(__assign({}, state), { members: __assign({}, channel.state.members), messages: __spreadArray([], channel.state.messages, true), pinnedMessages: __spreadArray([], channel.state.pinnedMessages, true), read: __assign({}, channel.state.read), watcherCount: channel.state.watcher_count, watchers: __assign({}, channel.state.watchers) });
         }
         case 'initStateFromChannel': {
-            var channel = action.channel;
-            return __assign(__assign({}, state), { loading: false, members: __assign({}, channel.state.members), messages: __spreadArray([], channel.state.messages, true), pinnedMessages: __spreadArray([], channel.state.pinnedMessages, true), read: __assign({}, channel.state.read), watcherCount: channel.state.watcher_count, watchers: __assign({}, channel.state.watchers) });
+            var channel = action.channel, hasMore = action.hasMore;
+            return __assign(__assign({}, state), { hasMore: hasMore, loading: false, members: __assign({}, channel.state.members), messages: __spreadArray([], channel.state.messages, true), pinnedMessages: __spreadArray([], channel.state.pinnedMessages, true), read: __assign({}, channel.state.read), watcherCount: channel.state.watcher_count, watchers: __assign({}, channel.state.watchers) });
         }
         case 'jumpToLatestMessage': {
             return __assign(__assign({}, state), { hasMoreNewer: false, highlightedMessageId: undefined, loading: false, suppressAutoscroll: false });
@@ -32965,6 +32982,7 @@ var getGroupStyles = function (message, previousMessage, nextMessage, noGroupByU
 var hasMoreMessagesProbably = function (returnedCountMessages, limit) {
     return returnedCountMessages === limit;
 };
+// @deprecated
 var hasNotMoreMessages = function (returnedCountMessages, limit) {
     return returnedCountMessages < limit;
 };
@@ -33260,6 +33278,7 @@ var ChannelInner = function (props) {
                     /**
                      * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                      */
+                    // FIXME: we should use channelQueryOptions if they are available
                     return [4 /*yield*/, channel.query({
                             messages: { id_lt: oldestID, limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },
                             watchers: { limit: DEFAULT_NEXT_CHANNEL_PAGE_SIZE },
@@ -33268,6 +33287,7 @@ var ChannelInner = function (props) {
                     /**
                      * As the channel state is not normalized we re-fetch the channel data. Thus, we avoid having to search for user references in the channel state.
                      */
+                    // FIXME: we should use channelQueryOptions if they are available
                     _m.sent();
                     _m.label = 2;
                 case 2:
@@ -33286,14 +33306,14 @@ var ChannelInner = function (props) {
         };
         (function () { return __awaiter(void 0, void 0, void 0, function () {
             var members, _i, _a, member, userId, _b, user, user_id, config, e_1;
-            var _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+            var _c, _d, _e;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
                     case 0:
                         if (!(!channel.initialized && initializeOnMount)) return [3 /*break*/, 4];
-                        _d.label = 1;
+                        _f.label = 1;
                     case 1:
-                        _d.trys.push([1, 3, , 4]);
+                        _f.trys.push([1, 3, , 4]);
                         members = [];
                         if (!channel.id && ((_c = channel.data) === null || _c === void 0 ? void 0 : _c.members)) {
                             for (_i = 0, _a = channel.data.members; _i < _a.length; _i++) {
@@ -33313,12 +33333,12 @@ var ChannelInner = function (props) {
                         }
                         return [4 /*yield*/, getChannel({ channel: channel, client: client, members: members, options: channelQueryOptions })];
                     case 2:
-                        _d.sent();
+                        _f.sent();
                         config = channel.getConfig();
                         setChannelConfig(config);
                         return [3 /*break*/, 4];
                     case 3:
-                        e_1 = _d.sent();
+                        e_1 = _f.sent();
                         dispatch({ error: e_1, type: 'setError' });
                         errored = true;
                         return [3 /*break*/, 4];
@@ -33326,7 +33346,11 @@ var ChannelInner = function (props) {
                         done = true;
                         originalTitle.current = document.title;
                         if (!errored) {
-                            dispatch({ channel: channel, type: 'initStateFromChannel' });
+                            dispatch({
+                                channel: channel,
+                                hasMore: hasMoreMessagesProbably(channel.state.messages.length, (_e = (_d = channelQueryOptions === null || channelQueryOptions === void 0 ? void 0 : channelQueryOptions.messages) === null || _d === void 0 ? void 0 : _d.limit) !== null && _e !== void 0 ? _e : DEFAULT_INITIAL_CHANNEL_PAGE_SIZE),
+                                type: 'initStateFromChannel',
+                            });
                             if (channel.countUnread() > 0)
                                 markRead();
                             // The more complex sync logic is done in Chat
@@ -33381,22 +33405,17 @@ var ChannelInner = function (props) {
     var loadMore = function (limit) {
         if (limit === void 0) { limit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE; }
         return __awaiter(void 0, void 0, void 0, function () {
-            var oldestMessage, notHasMore, oldestID, perPage, queryResponse, e_2, hasMoreMessages;
+            var oldestMessage, oldestID, perPage, queryResponse, e_2, hasMoreMessages;
             var _a;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        if (!online.current || !window.navigator.onLine)
+                        if (!online.current || !window.navigator.onLine || !state.hasMore)
                             return [2 /*return*/, 0];
                         oldestMessage = (_a = state === null || state === void 0 ? void 0 : state.messages) === null || _a === void 0 ? void 0 : _a[0];
                         if (state.loadingMore || state.loadingMoreNewer || (oldestMessage === null || oldestMessage === void 0 ? void 0 : oldestMessage.status) !== 'received') {
                             return [2 /*return*/, 0];
                         }
-                        notHasMore = hasNotMoreMessages(channel.state.messages.length, DEFAULT_INITIAL_CHANNEL_PAGE_SIZE);
-                        if (notHasMore) {
-                            loadMoreFinished(false, channel.state.messages);
-                            return [2 /*return*/, channel.state.messages.length];
-                        }
                         dispatch({ loadingMore: true, type: 'setLoadingMore' });
                         oldestID = oldestMessage === null || oldestMessage === void 0 ? void 0 : oldestMessage.id;
                         perPage = limit;
@@ -33676,6 +33695,7 @@ var ChannelInner = function (props) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        // FIXME: should prevent loading more, if state.thread.reply_count === channel.state.threads[parentID].length
                         if (state.threadLoadingMore || !state.thread)
                             return [2 /*return*/];
                         dispatch({ type: 'startLoadingThread' });
@@ -34281,7 +34301,8 @@ var RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 5000;
 var MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS = 2000;
 var usePaginatedChannels = function (client, filters, sort, options, activeChannelHandler, recoveryThrottleIntervalMs) {
     if (recoveryThrottleIntervalMs === void 0) { recoveryThrottleIntervalMs = RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS; }
-    var _a = useChatContext('usePaginatedChannels'), channels = _a.channels, _b = _a.channelsQueryState, error = _b.error, setError = _b.setError, setQueryInProgress = _b.setQueryInProgress, setChannels = _a.setChannels;
+    var _a = useChatContext('usePaginatedChannels').channelsQueryState, error = _a.error, setError = _a.setError, setQueryInProgress = _a.setQueryInProgress;
+    var _b = React.useState([]), channels = _b[0], setChannels = _b[1];
     var _c = React.useState(true), hasNextPage = _c[0], setHasNextPage = _c[1];
     var lastRecoveryTimestamp = React.useRef();
     var recoveryThrottleInterval = recoveryThrottleIntervalMs < MIN_RECOVER_LOADED_CHANNELS_THROTTLE_INTERVAL_IN_MS
@@ -34361,7 +34382,6 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
     React.useEffect(function () {
         queryChannels('reload');
     }, [filterString, sortString]);
-    // FIXME: state refactor (breaking change) is needed - do not forward `channels` and `setChannel`
     return {
         channels: channels,
         hasNextPage: hasNextPage,
@@ -35103,7 +35123,7 @@ var UnMemoizedChannelList = function (props) {
         'str-chat-channel-list--open': navOpen,
     });
     var showChannelList = !searchActive || (additionalChannelSearchProps === null || additionalChannelSearchProps === void 0 ? void 0 : additionalChannelSearchProps.popupResults);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(ChannelListContextProvider, { value: { channels: channels, setChannels: setChannels } },
         React__default["default"].createElement("div", { className: className, ref: channelListRef },
             showChannelSearch && (React__default["default"].createElement(ChannelSearch$1, __assign({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
             showChannelList && (React__default["default"].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: !!channelsQueryState.queryInProgress &&
@@ -35116,7 +35136,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.20.0';
+var version = '10.21.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -35126,11 +35146,10 @@ var useChat = function (_a) {
         tDateTimeParser: defaultDateTimeParser,
         userLanguage: 'en',
     }), translators = _e[0], setTranslators = _e[1];
-    var _f = React.useState([]), channels = _f[0], setChannels = _f[1];
-    var _g = React.useState(), channel = _g[0], setChannel = _g[1];
-    var _h = React.useState([]), mutes = _h[0], setMutes = _h[1];
-    var _j = React.useState(initialNavOpen), navOpen = _j[0], setNavOpen = _j[1];
-    var _k = React.useState({}), latestMessageDatesByChannels = _k[0], setLatestMessageDatesByChannels = _k[1];
+    var _f = React.useState(), channel = _f[0], setChannel = _f[1];
+    var _g = React.useState([]), mutes = _g[0], setMutes = _g[1];
+    var _h = React.useState(initialNavOpen), navOpen = _h[0], setNavOpen = _h[1];
+    var _j = React.useState({}), latestMessageDatesByChannels = _j[0], setLatestMessageDatesByChannels = _j[1];
     var clientMutes = ((_b = client.user) === null || _b === void 0 ? void 0 : _b.mutes) || [];
     var closeMobileNav = function () { return setNavOpen(false); };
     var openMobileNav = function () { return setTimeout(function () { return setNavOpen(true); }, 100); };
@@ -35201,7 +35220,6 @@ var useChat = function (_a) {
     }, [(_c = client.user) === null || _c === void 0 ? void 0 : _c.id]);
     return {
         channel: channel,
-        channels: channels,
         closeMobileNav: closeMobileNav,
         getAppSettings: getAppSettings,
         latestMessageDatesByChannels: latestMessageDatesByChannels,
@@ -35209,14 +35227,13 @@ var useChat = function (_a) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
-        setChannels: setChannels,
         translators: translators,
     };
 };
 
 var useCreateChatContext = function (value) {
     var _a;
-    var channel = value.channel, channels = value.channels, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, setChannels = value.setChannels, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
+    var channel = value.channel, channelsQueryState = value.channelsQueryState, client = value.client, closeMobileNav = value.closeMobileNav, customClasses = value.customClasses, getAppSettings = value.getAppSettings, latestMessageDatesByChannels = value.latestMessageDatesByChannels, mutes = value.mutes, navOpen = value.navOpen, openMobileNav = value.openMobileNav, setActiveChannel = value.setActiveChannel, theme = value.theme, themeVersion = value.themeVersion, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
     var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
     var channelsQueryError = channelsQueryState.error;
     var channelsQueryInProgress = channelsQueryState.queryInProgress;
@@ -35224,7 +35241,6 @@ var useCreateChatContext = function (value) {
     var mutedUsersLength = mutes.length;
     var chatContext = React.useMemo(function () { return ({
         channel: channel,
-        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -35235,7 +35251,6 @@ var useCreateChatContext = function (value) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
-        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -35243,12 +35258,10 @@ var useCreateChatContext = function (value) {
         channelCid,
         channelsQueryError,
         channelsQueryInProgress,
-        channels,
         clientValues,
         getAppSettings,
         mutedUsersLength,
         navOpen,
-        setChannels,
     ]);
     return chatContext;
 };
@@ -35307,7 +35320,7 @@ var useCustomStyles = function (customStyles) {
  */
 var Chat = function (props) {
     var children = props.children, client = props.client, customClasses = props.customClasses, customStyles = props.customStyles, _a = props.darkMode, darkMode = _a === void 0 ? false : _a, defaultLanguage = props.defaultLanguage, i18nInstance = props.i18nInstance, _b = props.initialNavOpen, initialNavOpen = _b === void 0 ? true : _b, _c = props.theme, theme = _c === void 0 ? 'messaging light' : _c, _d = props.useImageFlagEmojisOnWindows, useImageFlagEmojisOnWindows = _d === void 0 ? false : _d;
-    var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, channels = _e.channels, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, setChannels = _e.setChannels, translators = _e.translators;
+    var _e = useChat({ client: client, defaultLanguage: defaultLanguage, i18nInstance: i18nInstance, initialNavOpen: initialNavOpen }), channel = _e.channel, closeMobileNav = _e.closeMobileNav, getAppSettings = _e.getAppSettings, latestMessageDatesByChannels = _e.latestMessageDatesByChannels, mutes = _e.mutes, navOpen = _e.navOpen, openMobileNav = _e.openMobileNav, setActiveChannel = _e.setActiveChannel, translators = _e.translators;
     var channelsQueryState = useChannelsQueryState();
     var themeVersion = typeof window !== 'undefined'
         ? (window
@@ -35318,7 +35331,6 @@ var Chat = function (props) {
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     var chatContextValue = useCreateChatContext({
         channel: channel,
-        channels: channels,
         channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
@@ -35329,7 +35341,6 @@ var Chat = function (props) {
         navOpen: navOpen,
         openMobileNav: openMobileNav,
         setActiveChannel: setActiveChannel,
-        setChannels: setChannels,
         theme: theme,
         themeVersion: themeVersion,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
@@ -35423,6 +35434,7 @@ var InfiniteScroll = function (props) {
         }
         if (isLoading)
             return;
+        // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container container expands
         if (reverseOffset < Number(threshold) &&
             typeof loadPreviousPageFn === 'function' &&
             hasPreviousPageFlag) {
@@ -37171,6 +37183,7 @@ var ThreadInner = function (props) {
     var ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
     React.useEffect(function () {
         if ((thread === null || thread === void 0 ? void 0 : thread.id) && (thread === null || thread === void 0 ? void 0 : thread.reply_count)) {
+            // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
             loadMoreThread();
         }
     }, []);
@@ -37238,6 +37251,8 @@ exports.ChannelActionContext = ChannelActionContext;
 exports.ChannelActionProvider = ChannelActionProvider;
 exports.ChannelHeader = ChannelHeader;
 exports.ChannelList = ChannelList;
+exports.ChannelListContext = ChannelListContext;
+exports.ChannelListContextProvider = ChannelListContextProvider;
 exports.ChannelListMessenger = ChannelListMessenger;
 exports.ChannelPreview = ChannelPreview;
 exports.ChannelPreviewMessenger = ChannelPreviewMessenger;
@@ -37285,6 +37300,7 @@ exports.ImageComponent = ImageComponent;
 exports.ImageContainer = ImageContainer;
 exports.InfiniteScroll = InfiniteScroll;
 exports.LinkIcon = LinkIcon;
+exports.LinkPreviewList = LinkPreviewList;
 exports.LoadMoreButton = LoadMoreButton;
 exports.LoadMorePaginator = LoadMorePaginator;
 exports.LoadingChannels = LoadingChannels;
@@ -37310,6 +37326,7 @@ exports.MessageInputSmall = MessageInputSmall;
 exports.MessageList = MessageList;
 exports.MessageListContext = MessageListContext;
 exports.MessageListContextProvider = MessageListContextProvider;
+exports.MessageListNotifications = MessageListNotifications;
 exports.MessageNotification = MessageNotification;
 exports.MessageOptions = MessageOptions;
 exports.MessageProvider = MessageProvider;
@@ -37449,6 +37466,7 @@ exports.useChannelActionContext = useChannelActionContext;
 exports.useChannelDeletedListener = useChannelDeletedListener;
 exports.useChannelEditMessageHandler = useEditMessageHandler;
 exports.useChannelHiddenListener = useChannelHiddenListener;
+exports.useChannelListContext = useChannelListContext;
 exports.useChannelMentionsHandler = useMentionsHandlers;
 exports.useChannelPreviewInfo = useChannelPreviewInfo;
 exports.useChannelStateContext = useChannelStateContext;