stream-chat-react 8.2.0 → 9.1.0

package/dist/index.cjs.js

@@ -53,6 +53,7 @@ var throttle = require('lodash.throttle');
 var streamChat = require('stream-chat');
 var deepequal = require('react-fast-compare');
 var DefaultEmojiIndex = require('emoji-mart/dist/utils/emoji-index/nimble-emoji-index.js');
+var resizeObserver = require('@juggle/resize-observer');
 var reactVirtuoso = require('react-virtuoso');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1028,26 +1029,21 @@ var Modal = function (props) {
     var innerRef = React.useRef(null);
     var closeRef = React.useRef(null);
     var handleClick = function (event) {
-        var _a, _b;
-        if ((event.target instanceof HTMLDivElement &&
-            !((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
-            onClose) ||
-            (event.target instanceof HTMLButtonElement &&
-                ((_b = closeRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) &&
-                onClose)) {
-            onClose();
-        }
+        var target = event.target;
+        if (!innerRef.current || !closeRef.current)
+            return;
+        if (!innerRef.current.contains(target) || closeRef.current.contains(target))
+            onClose === null || onClose === void 0 ? void 0 : onClose();
     };
     React.useEffect(function () {
         if (!open)
-            return function () { return null; };
+            return;
         var handleEscKey = function (event) {
-            if (event instanceof KeyboardEvent && event.key === 'Escape' && onClose) {
-                onClose();
-            }
+            if (event.key === 'Escape')
+                onClose === null || onClose === void 0 ? void 0 : onClose();
         };
-        document.addEventListener('keypress', handleEscKey);
-        return function () { return document.removeEventListener('keypress', handleEscKey); };
+        document.addEventListener('keydown', handleEscKey);
+        return function () { return document.removeEventListener('keydown', handleEscKey); };
     }, [onClose, open]);
     var openClasses = open ? 'str-chat__modal--open' : 'str-chat__modal--closed';
     return (React__default['default'].createElement("div", { className: "str-chat__modal " + openClasses, onClick: handleClick },
@@ -2569,7 +2565,7 @@ var channelReducer = function (state, action) {
         }
         case 'setLoadingMore': {
             var loadingMore = action.loadingMore;
-            // supporess the autoscroll behavior
+            // suppress the autoscroll behavior
             return __assign(__assign({}, state), { loadingMore: loadingMore, suppressAutoscroll: true });
         }
         case 'setLoadingMoreNewer': {
@@ -4702,7 +4698,9 @@ var UploadsPreview = function () {
     var _a = useChannelStateContext('UploadsPreview'), maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
     var messageInput = useMessageInputContext('UploadsPreview');
     var fileOrder = messageInput.fileOrder, fileUploads = messageInput.fileUploads, imageOrder = messageInput.imageOrder, imageUploads = messageInput.imageUploads, numberOfUploads = messageInput.numberOfUploads, removeFile = messageInput.removeFile, removeImage = messageInput.removeImage, uploadFile = messageInput.uploadFile, uploadImage = messageInput.uploadImage, uploadNewFiles = messageInput.uploadNewFiles;
-    var imagesToPreview = imageOrder.map(function (id) { return imageUploads[id]; });
+    var imagesToPreview = imageOrder
+        .map(function (id) { return imageUploads[id]; })
+        .filter(function (image) { return !image.og_scrape_url; });
     var filesToPreview = fileOrder.map(function (id) { return fileUploads[id]; });
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         imageOrder.length > 0 && (React__default['default'].createElement(reactFileUtils.ImagePreviewer, { disabled: !multipleUploads ||
@@ -4747,8 +4745,8 @@ var EditMessageForm = function () {
     var _c = useComponentContext('EditMessageForm'), _d = _c.EmojiIcon, EmojiIcon = _d === void 0 ? EmojiIconSmall : _d, _e = _c.FileUploadIcon, FileUploadIcon$1 = _e === void 0 ? FileUploadIcon : _e;
     React.useEffect(function () {
         var onKeyDown = function (event) {
-            if (event.key === 'Escape' && clearEditingState)
-                clearEditingState();
+            if (event.key === 'Escape')
+                clearEditingState === null || clearEditingState === void 0 ? void 0 : clearEditingState();
         };
         document.addEventListener('keydown', onKeyDown);
         return function () { return document.removeEventListener('keydown', onKeyDown); };
@@ -5048,11 +5046,11 @@ var useAttachments = function (props, state, dispatch, textareaRef) {
     // Number of files that the user can still add. Should never be more than the amount allowed by the API.
     // If multipleUploads is false, we only want to allow a single upload.
     var maxFilesAllowed = !multipleUploads ? 1 : maxNumberOfFiles || apiMaxNumberOfFiles;
+    // OG attachments should not be counted towards "numberOfImages"
     var numberOfImages = Object.values(imageUploads).filter(function (_a) {
-        var state = _a.state;
-        return state !== 'failed';
-    })
-        .length;
+        var og_scrape_url = _a.og_scrape_url, state = _a.state;
+        return state !== 'failed' && !og_scrape_url;
+    }).length;
     var numberOfFiles = Object.values(fileUploads).filter(function (_a) {
         var state = _a.state;
         return state !== 'failed';
@@ -5238,6 +5236,14 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
     var channel = useChannelStateContext('useSubmitHandler').channel;
     var _a = useChannelActionContext('useSubmitHandler'), addNotification = _a.addNotification, editMessage = _a.editMessage, sendMessage = _a.sendMessage;
     var t = useTranslationContext('useSubmitHandler').t;
+    var textReference = React.useRef({ hasChanged: false, initialText: text });
+    React.useEffect(function () {
+        if (!textReference.current.initialText.length) {
+            textReference.current.initialText = text;
+            return;
+        }
+        textReference.current.hasChanged = text !== textReference.current.initialText;
+    }, [text]);
     var getAttachmentsFromUploads = function () {
         var imageAttachments = imageOrder
             .map(function (id) { return imageUploads[id]; })
@@ -5246,25 +5252,36 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
             var id = _a.id, url = _a.url;
             return self.every(function (upload) { return upload.id === id || upload.url !== url; });
         })
-            .map(function (upload) {
+            .filter(function (upload) {
+            // keep the OG attachments in case the text has not changed as the BE
+            // won't re-enrich the message when only attachments have changed
+            if (!textReference.current.hasChanged)
+                return true;
+            return !upload.og_scrape_url;
+        })
+            .map(function (_a) {
+            var name = _a.file.name, url = _a.url, rest = __rest(_a, ["file", "url"]);
             return ({
-                fallback: upload.file.name,
-                image_url: upload.url,
+                author_name: rest.author_name,
+                fallback: name,
+                image_url: url,
+                og_scrape_url: rest.og_scrape_url,
+                text: rest.text,
+                title: rest.title,
+                title_link: rest.title_link,
                 type: 'image',
             });
         });
         var fileAttachments = fileOrder
             .map(function (id) { return fileUploads[id]; })
             .filter(function (upload) { return upload.state !== 'failed'; })
-            .map(function (upload) {
-            return ({
-                asset_url: upload.url,
-                file_size: upload.file.size,
-                mime_type: upload.file.type,
-                title: upload.file.name,
-                type: getAttachmentTypeFromMime(upload.file.type || ''),
-            });
-        });
+            .map(function (upload) { return ({
+            asset_url: upload.url,
+            file_size: upload.file.size,
+            mime_type: upload.file.type,
+            title: upload.file.name,
+            type: getAttachmentTypeFromMime(upload.file.type || ''),
+        }); });
         return __spreadArray(__spreadArray(__spreadArray([], attachments), imageAttachments), fileAttachments);
     };
     var handleSubmit = function (event, customMessageData) { return __awaiter(void 0, void 0, void 0, function () {
@@ -5307,8 +5324,7 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                     return [4 /*yield*/, editMessage(__assign(__assign({}, message), updatedMessage))];
                 case 2:
                     _a.sent();
-                    if (clearEditingState)
-                        clearEditingState();
+                    clearEditingState === null || clearEditingState === void 0 ? void 0 : clearEditingState();
                     dispatch({ type: 'clear' });
                     return [3 /*break*/, 4];
                 case 3:
@@ -5341,11 +5357,9 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
                         getNewText: function () { return text; },
                         type: 'setText',
                     });
-                    if (actualMentionedUsers.length) {
-                        actualMentionedUsers.forEach(function (user) {
-                            dispatch({ type: 'addMentionedUser', user: user });
-                        });
-                    }
+                    actualMentionedUsers === null || actualMentionedUsers === void 0 ? void 0 : actualMentionedUsers.forEach(function (user) {
+                        dispatch({ type: 'addMentionedUser', user: user });
+                    });
                     addNotification(t('Send message request failed'), 'error');
                     return [3 /*break*/, 13];
                 case 13: return [2 /*return*/];
@@ -5406,15 +5420,13 @@ var usePasteHandler = function (uploadNewFiles, insertText, isUploadEnabled) {
     return { onPaste: onPaste };
 };
 
-var emptyFileUploads = {};
-var emptyImageUploads = {};
 var makeEmptyMessageInputState = function () { return ({
     attachments: [],
     emojiPickerIsOpen: false,
     fileOrder: [],
-    fileUploads: __assign({}, emptyFileUploads),
+    fileUploads: {},
     imageOrder: [],
-    imageUploads: __assign({}, emptyImageUploads),
+    imageUploads: {},
     mentioned_users: [],
     setText: function () { return null; },
     text: '',
@@ -5423,46 +5435,53 @@ var makeEmptyMessageInputState = function () { return ({
  * Initializes the state. Empty if the message prop is falsy.
  */
 var initState = function (message) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!message) {
         return makeEmptyMessageInputState();
     }
     // if message prop is defined, get image uploads, file uploads, text, etc.
-    var imageUploads = ((_a = message.attachments) === null || _a === void 0 ? void 0 : _a.filter(function (_a) {
+    var imageUploads = (_b = (_a = message.attachments) === null || _a === void 0 ? void 0 : _a.filter(function (_a) {
         var type = _a.type;
         return type === 'image';
-    }).reduce(function (acc, attachment) {
+    }).reduce(function (acc, _a) {
+        var author_name = _a.author_name, _b = _a.fallback, fallback = _b === void 0 ? '' : _b, image_url = _a.image_url, og_scrape_url = _a.og_scrape_url, text = _a.text, title = _a.title, title_link = _a.title_link;
         var id = nanoid.nanoid();
         acc[id] = {
+            author_name: author_name,
             file: {
-                name: attachment.fallback || '',
+                name: fallback,
             },
             id: id,
+            og_scrape_url: og_scrape_url,
             state: 'finished',
-            url: attachment.image_url,
+            text: text,
+            title: title,
+            title_link: title_link,
+            url: image_url,
         };
         return acc;
-    }, {})) || {};
-    var imageOrder = Object.keys(imageUploads);
-    var fileUploads = ((_b = message.attachments) === null || _b === void 0 ? void 0 : _b.filter(function (_a) {
+    }, {})) !== null && _b !== void 0 ? _b : {};
+    var fileUploads = (_d = (_c = message.attachments) === null || _c === void 0 ? void 0 : _c.filter(function (_a) {
         var type = _a.type;
         return type === 'file';
-    }).reduce(function (acc, attachment) {
+    }).reduce(function (acc, _a) {
+        var asset_url = _a.asset_url, file_size = _a.file_size, mime_type = _a.mime_type, _b = _a.title, title = _b === void 0 ? '' : _b;
         var id = nanoid.nanoid();
         acc[id] = {
             file: {
-                name: attachment.title || '',
-                size: attachment.file_size,
-                type: attachment.mime_type,
+                name: title,
+                size: file_size,
+                type: mime_type,
             },
             id: id,
             state: 'finished',
-            url: attachment.asset_url,
+            url: asset_url,
         };
         return acc;
-    }, {})) || {};
+    }, {})) !== null && _d !== void 0 ? _d : {};
+    var imageOrder = Object.keys(imageUploads);
     var fileOrder = Object.keys(fileUploads);
-    var attachments = ((_c = message.attachments) === null || _c === void 0 ? void 0 : _c.filter(function (_a) {
+    var attachments = ((_e = message.attachments) === null || _e === void 0 ? void 0 : _e.filter(function (_a) {
         var type = _a.type;
         return type !== 'file' && type !== 'image';
     })) || [];
@@ -6151,9 +6170,15 @@ var makeAddNotifications = function (setNotifications, notificationTimeouts) { r
 
 var JUMP_MESSAGE_PAGE_SIZE = 25;
 var UnMemoizedChannel = function (props) {
-    var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a;
-    var contextChannel = useChatContext('Channel').channel;
+    var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a, LoadingErrorIndicator = props.LoadingErrorIndicator, LoadingIndicator = props.LoadingIndicator;
+    var _b = useChatContext('Channel'), contextChannel = _b.channel, channelsQueryState = _b.channelsQueryState;
     var channel = propsChannel || contextChannel;
+    if (channelsQueryState.queryInProgress === 'reload' && LoadingIndicator) {
+        return React__default['default'].createElement(LoadingIndicator, { size: 25 });
+    }
+    if (channelsQueryState.error && LoadingErrorIndicator) {
+        return React__default['default'].createElement(LoadingErrorIndicator, { error: channelsQueryState.error });
+    }
     if (!(channel === null || channel === void 0 ? void 0 : channel.cid))
         return EmptyPlaceholder;
     return React__default['default'].createElement(ChannelInner, __assign({}, props, { channel: channel, key: channel.cid }));
@@ -6167,7 +6192,7 @@ var ChannelInner = function (props) {
     var _k = React.useState([]), notifications = _k[0], setNotifications = _k[1];
     var _l = React.useState(), quotedMessage = _l[0], setQuotedMessage = _l[1];
     var notificationTimeouts = [];
-    var _m = React.useReducer(channelReducer, initialState), state = _m[0], dispatch = _m[1];
+    var _m = React.useReducer(channelReducer, __assign(__assign({}, initialState), { loading: !channel.initialized })), state = _m[0], dispatch = _m[1];
     var isMounted = useIsMounted();
     var originalTitle = React.useRef('');
     var lastRead = React.useRef(new Date());
@@ -6501,7 +6526,7 @@ var ChannelInner = function (props) {
                     error_1 = _b.sent();
                     stringError = JSON.stringify(error_1);
                     parsedError = stringError ? JSON.parse(stringError) : {};
-                    updateMessage(__assign(__assign({}, message), { errorStatusCode: parsedError.status || undefined, status: 'failed' }));
+                    updateMessage(__assign(__assign({}, message), { error: parsedError, errorStatusCode: parsedError.status || undefined, status: 'failed' }));
                     return [3 /*break*/, 7];
                 case 7: return [2 /*return*/];
             }
@@ -6770,7 +6795,6 @@ var UnMemoizedChatDown = function (_a) {
     var _b = _a.image, image = _b === void 0 ? React__default['default'].createElement(ConnectionErrorIcon, null) : _b, text = _a.text, _c = _a.type, type = _c === void 0 ? 'Error' : _c;
     var t = useTranslationContext('ChatDown').t;
     return (React__default['default'].createElement("div", { className: 'str-chat__down' },
-        React__default['default'].createElement(LoadingChannels, null),
         React__default['default'].createElement("div", { className: 'str-chat__down-main' },
             typeof image === 'string' ? (React__default['default'].createElement("img", { alt: 'Connection error', "data-testid": 'chatdown-img', src: image })) : (image),
             React__default['default'].createElement("h1", null, type),
@@ -6785,7 +6809,7 @@ var ChatDown = React__default['default'].memo(UnMemoizedChatDown);
  * A preview list of channels, allowing you to select the channel you want to open
  */
 var ChannelListMessenger = function (props) {
-    var children = props.children, _a = props.error, error = _a === void 0 ? false : _a, loading = props.loading, _b = props.LoadingErrorIndicator, LoadingErrorIndicator = _b === void 0 ? ChatDown : _b, _c = props.LoadingIndicator, LoadingIndicator = _c === void 0 ? LoadingChannels : _c;
+    var children = props.children, _a = props.error, error = _a === void 0 ? null : _a, loading = props.loading, _b = props.LoadingErrorIndicator, LoadingErrorIndicator = _b === void 0 ? ChatDown : _b, _c = props.LoadingIndicator, LoadingIndicator = _c === void 0 ? LoadingChannels : _c;
     if (error) {
         return React__default['default'].createElement(LoadingErrorIndicator, { type: 'Connection Error' });
     }
@@ -7084,11 +7108,9 @@ var useNotificationRemovedFromChannelListener = function (setChannels, customHan
 };
 
 var usePaginatedChannels = function (client, filters, sort, options, activeChannelHandler) {
-    var _a = React.useState([]), channels = _a[0], setChannels = _a[1];
-    var _b = React.useState(false), error = _b[0], setError = _b[1];
+    var _a = useChatContext('usePaginatedChannels').channelsQueryState, 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 _d = React.useState(true), loadingChannels = _d[0], setLoadingChannels = _d[1];
-    var _e = React.useState(true), refreshing = _e[0], setRefreshing = _e[1];
     var filterString = React.useMemo(function () { return JSON.stringify(filters); }, [filters]);
     var sortString = React.useMemo(function () { return JSON.stringify(sort); }, [sort]);
     var queryChannels = function (queryType) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7097,12 +7119,14 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    setError(false);
+                    setError(null);
                     if (queryType === 'reload') {
                         setChannels([]);
-                        setLoadingChannels(true);
+                        setQueryInProgress('reload');
+                    }
+                    else {
+                        setQueryInProgress('load-more');
                     }
-                    setRefreshing(true);
                     offset = queryType === 'reload' ? 0 : channels.length;
                     newOptions = __assign({ limit: (_a = options === null || options === void 0 ? void 0 : options.limit) !== null && _a !== void 0 ? _a : MAX_QUERY_CHANNELS_LIMIT, offset: offset }, options);
                     _b.label = 1;
@@ -7122,11 +7146,10 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
                 case 3:
                     err_1 = _b.sent();
                     console.warn(err_1);
-                    setError(true);
+                    setError(err_1);
                     return [3 /*break*/, 4];
                 case 4:
-                    setLoadingChannels(false);
-                    setRefreshing(false);
+                    setQueryInProgress(null);
                     return [2 /*return*/];
             }
         });
@@ -7142,11 +7165,6 @@ var usePaginatedChannels = function (client, filters, sort, options, activeChann
         hasNextPage: hasNextPage,
         loadNextPage: loadNextPage,
         setChannels: setChannels,
-        status: {
-            error: error,
-            loadingChannels: loadingChannels,
-            refreshing: refreshing,
-        },
     };
 };
 
@@ -7553,8 +7571,8 @@ var DEFAULT_FILTERS = {};
 var DEFAULT_OPTIONS = {};
 var DEFAULT_SORT = {};
 var UnMemoizedChannelList = function (props) {
-    var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, _h = props.sendChannelsToList, sendChannelsToList = _h === void 0 ? false : _h, _j = props.setActiveChannelOnMount, setActiveChannelOnMount = _j === void 0 ? true : _j, _k = props.showChannelSearch, showChannelSearch = _k === void 0 ? false : _k, _l = props.sort, sort = _l === void 0 ? DEFAULT_SORT : _l, _m = props.watchers, watchers = _m === void 0 ? {} : _m;
-    var _o = useChatContext('ChannelList'), channel = _o.channel, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
+    var additionalChannelSearchProps = props.additionalChannelSearchProps, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar : _a, allowNewMessagesFromUnfilteredChannels = props.allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn = props.channelRenderFilterFn, _b = props.ChannelSearch, ChannelSearch$1 = _b === void 0 ? ChannelSearch : _b, customActiveChannel = props.customActiveChannel, _c = props.EmptyStateIndicator, EmptyStateIndicator$1 = _c === void 0 ? EmptyStateIndicator : _c, filters = props.filters, _d = props.LoadingErrorIndicator, LoadingErrorIndicator = _d === void 0 ? ChatDown : _d, _e = props.LoadingIndicator, LoadingIndicator = _e === void 0 ? LoadingChannels : _e, _f = props.List, List = _f === void 0 ? ChannelListMessenger : _f, lockChannelOrder = props.lockChannelOrder, onAddedToChannel = props.onAddedToChannel, onChannelDeleted = props.onChannelDeleted, onChannelHidden = props.onChannelHidden, onChannelTruncated = props.onChannelTruncated, onChannelUpdated = props.onChannelUpdated, onChannelVisible = props.onChannelVisible, onMessageNew = props.onMessageNew, onRemovedFromChannel = props.onRemovedFromChannel, options = props.options, _g = props.Paginator, Paginator = _g === void 0 ? LoadMorePaginator : _g, Preview = props.Preview, renderChannels = props.renderChannels, _h = props.sendChannelsToList, sendChannelsToList = _h === void 0 ? false : _h, _j = props.setActiveChannelOnMount, setActiveChannelOnMount = _j === void 0 ? true : _j, _k = props.showChannelSearch, showChannelSearch = _k === void 0 ? false : _k, _l = props.sort, sort = _l === void 0 ? DEFAULT_SORT : _l, _m = props.watchers, watchers = _m === void 0 ? {} : _m;
+    var _o = useChatContext('ChannelList'), channel = _o.channel, channelsQueryState = _o.channelsQueryState, client = _o.client, closeMobileNav = _o.closeMobileNav, customClasses = _o.customClasses, _p = _o.navOpen, navOpen = _p === void 0 ? false : _p, setActiveChannel = _o.setActiveChannel, theme = _o.theme, useImageFlagEmojisOnWindows = _o.useImageFlagEmojisOnWindows;
     var channelListRef = React.useRef(null);
     var _q = React.useState(0), channelUpdateCount = _q[0], setChannelUpdateCount = _q[1];
     /**
@@ -7601,7 +7619,7 @@ var UnMemoizedChannelList = function (props) {
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
     var forceUpdate = function () { return setChannelUpdateCount(function (count) { return count + 1; }); };
-    var _r = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _r.channels, hasNextPage = _r.hasNextPage, loadNextPage = _r.loadNextPage, setChannels = _r.setChannels, status = _r.status;
+    var _r = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler), channels = _r.channels, hasNextPage = _r.hasNextPage, loadNextPage = _r.loadNextPage, setChannels = _r.setChannels;
     var loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
     useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
@@ -7651,14 +7669,16 @@ var UnMemoizedChannelList = function (props) {
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement("div", { className: chatClass + " " + channelListClass + " " + theme + " " + navigationClass + " " + windowsEmojiClass, ref: channelListRef },
             showChannelSearch && React__default['default'].createElement(ChannelSearch$1, __assign({}, additionalChannelSearchProps)),
-            React__default['default'].createElement(List, { error: status.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: status.loadingChannels, LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default['default'].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: status.refreshing }, loadedChannels.map(renderChannel)))))));
+            React__default['default'].createElement(List, { error: channelsQueryState.error, loadedChannels: sendChannelsToList ? loadedChannels : undefined, loading: channelsQueryState.queryInProgress === 'reload', LoadingErrorIndicator: LoadingErrorIndicator, LoadingIndicator: LoadingIndicator, setChannels: setChannels }, !(loadedChannels === null || loadedChannels === void 0 ? void 0 : loadedChannels.length) ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'channel' })) : (React__default['default'].createElement(Paginator, { hasNextPage: hasNextPage, loadNextPage: loadNextPage, refreshing: channelsQueryState.queryInProgress === 'load-more' }, renderChannels
+                ? renderChannels(loadedChannels, renderChannel)
+                : loadedChannels.map(renderChannel)))))));
 };
 /**
  * Renders a preview list of Channels, allowing you to select the Channel you want to open
  */
 var ChannelList = React__default['default'].memo(UnMemoizedChannelList);
 
-var version = '8.2.0';
+var version = '9.1.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -7755,12 +7775,15 @@ var useChat = function (_a) {
 
 var useCreateChatContext = function (value) {
     var _a;
-    var channel = value.channel, 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, 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, useImageFlagEmojisOnWindows = value.useImageFlagEmojisOnWindows;
     var channelCid = channel === null || channel === void 0 ? void 0 : channel.cid;
+    var channelsQueryError = channelsQueryState.error;
+    var channelsQueryInProgress = channelsQueryState.queryInProgress;
     var clientValues = "" + client.clientID + Object.keys(client.activeChannels).length + Object.keys(client.listeners).length + client.mutedChannels.length + "\n  " + ((_a = client.user) === null || _a === void 0 ? void 0 : _a.id);
     var mutedUsersLength = mutes.length;
     var chatContext = React.useMemo(function () { return ({
         channel: channel,
+        channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
         customClasses: customClasses,
@@ -7772,10 +7795,29 @@ var useCreateChatContext = function (value) {
         setActiveChannel: setActiveChannel,
         theme: theme,
         useImageFlagEmojisOnWindows: useImageFlagEmojisOnWindows,
-    }); }, [channelCid, clientValues, getAppSettings, mutedUsersLength, navOpen]);
+    }); }, [
+        channelCid,
+        channelsQueryError,
+        channelsQueryInProgress,
+        clientValues,
+        getAppSettings,
+        mutedUsersLength,
+        navOpen,
+    ]);
     return chatContext;
 };
 
+var useChannelsQueryState = function () {
+    var _a = React.useState(null), error = _a[0], setError = _a[1];
+    var _b = React.useState(null), queryInProgress = _b[0], setQueryInProgress = _b[1];
+    return {
+        error: error,
+        queryInProgress: queryInProgress,
+        setError: setError,
+        setQueryInProgress: setQueryInProgress,
+    };
+};
+
 var darkModeTheme = {
     '--bg-gradient-end': '#101214',
     '--bg-gradient-start': '#070a0d',
@@ -7813,9 +7855,11 @@ 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, 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();
     useCustomStyles(darkMode ? darkModeTheme : customStyles);
     var chatContextValue = useCreateChatContext({
         channel: channel,
+        channelsQueryState: channelsQueryState,
         client: client,
         closeMobileNav: closeMobileNav,
         customClasses: customClasses,
@@ -7926,9 +7970,6 @@ var InfiniteScroll = function (props) {
         }
         scrollElement.addEventListener('scroll', scrollListener, useCapture);
         scrollElement.addEventListener('resize', scrollListener, useCapture);
-        if (initialLoad) {
-            scrollListener();
-        }
         return function () {
             scrollElement.removeEventListener('scroll', scrollListener, useCapture);
             scrollElement.removeEventListener('resize', scrollListener, useCapture);
@@ -8692,9 +8733,6 @@ function useMessageListScrollManager(params) {
     });
     var messages = React.useRef();
     var scrollTop = React.useRef(0);
-    React.useEffect(function () {
-        scrollToBottom();
-    }, []);
     React.useEffect(function () {
         var _a, _b, _c;
         var prevMeasures = measures.current;
@@ -8740,49 +8778,62 @@ function useMessageListScrollManager(params) {
     };
 }
 
+var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
 var useScrollLocationLogic = function (params) {
-    var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll;
+    var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, listElement = params.listElement, ulElement = params.ulElement;
     var _c = React.useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
     var _d = React.useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
     var closeToBottom = React.useRef(false);
     var closeToTop = React.useRef(false);
-    var listRef = React.useRef(null);
+    var scrollCounter = React.useRef({ autoScroll: 0, scroll: 0 });
     var scrollToBottom = React.useCallback(function () {
-        var _a, _b;
-        if (!((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo) || hasMoreNewer || suppressAutoscroll) {
+        if (!(listElement === null || listElement === void 0 ? void 0 : listElement.scrollTo) || hasMoreNewer || suppressAutoscroll) {
             return;
         }
-        (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-            top: listRef.current.scrollHeight,
+        scrollCounter.current.autoScroll += 1;
+        listElement.scrollTo({
+            top: listElement.scrollHeight,
         });
         setHasNewMessages(false);
-        // this is hacky and unreliable, but that was the current implementation so not breaking it
-        setTimeout(function () {
-            var _a;
-            (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-                top: listRef.current.scrollHeight,
-            });
-        }, 200);
-    }, [listRef, hasMoreNewer, suppressAutoscroll]);
+    }, [listElement, hasMoreNewer, suppressAutoscroll]);
+    React.useEffect(function () {
+        if (!listElement)
+            return;
+        var observer = new ResizeObserver(scrollToBottom);
+        var cancelObserverOnUserScroll = function () {
+            scrollCounter.current.scroll += 1;
+            var userScrolled = scrollCounter.current.autoScroll < scrollCounter.current.scroll;
+            if (ulElement && userScrolled) {
+                observer.unobserve(ulElement);
+                listElement === null || listElement === void 0 ? void 0 : listElement.removeEventListener('scroll', cancelObserverOnUserScroll);
+            }
+        };
+        if (ulElement) {
+            observer.observe(ulElement);
+        }
+        listElement.addEventListener('scroll', cancelObserverOnUserScroll);
+        return function () {
+            observer.disconnect();
+            if (listElement) {
+                listElement.removeEventListener('scroll', cancelObserverOnUserScroll);
+            }
+        };
+    }, [ulElement, scrollToBottom]);
     React.useLayoutEffect(function () {
-        if (listRef === null || listRef === void 0 ? void 0 : listRef.current) {
-            setWrapperRect(listRef.current.getBoundingClientRect());
+        if (listElement) {
+            setWrapperRect(listElement.getBoundingClientRect());
             scrollToBottom();
         }
-    }, [listRef, hasMoreNewer]);
+    }, [listElement, hasMoreNewer]);
     var updateScrollTop = useMessageListScrollManager({
         messages: messages,
         onScrollBy: function (scrollBy) {
-            var _a;
-            (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({ top: scrollBy });
-        },
-        scrollContainerMeasures: function () {
-            var _a, _b;
-            return ({
-                offsetHeight: ((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0,
-                scrollHeight: ((_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0,
-            });
+            listElement === null || listElement === void 0 ? void 0 : listElement.scrollBy({ top: scrollBy });
         },
+        scrollContainerMeasures: function () { return ({
+            offsetHeight: (listElement === null || listElement === void 0 ? void 0 : listElement.offsetHeight) || 0,
+            scrollHeight: (listElement === null || listElement === void 0 ? void 0 : listElement.scrollHeight) || 0,
+        }); },
         scrolledUpThreshold: scrolledUpThreshold,
         scrollToBottom: scrollToBottom,
         showNewMessages: function () { return setHasNewMessages(true); },
@@ -8810,7 +8861,7 @@ var useScrollLocationLogic = function (params) {
     }, [closeToTop, closeToBottom, scrollToBottom]);
     return {
         hasNewMessages: hasNewMessages,
-        listRef: listRef,
+        listElement: listElement,
         onMessageLoadCaptured: onMessageLoadCaptured,
         onScroll: onScroll,
         scrollToBottom: scrollToBottom,
@@ -8886,15 +8937,19 @@ var MessageListWithContext = function (props) {
     var channel = props.channel, _a = props.disableDateSeparator, disableDateSeparator = _a === void 0 ? false : _a, groupStyles = props.groupStyles, _b = props.hideDeletedMessages, hideDeletedMessages = _b === void 0 ? false : _b, _c = props.hideNewMessageSeparator, hideNewMessageSeparator = _c === void 0 ? false : _c, _d = props.messageActions, messageActions = _d === void 0 ? Object.keys(MESSAGE_ACTIONS) : _d, _e = props.messages, messages = _e === void 0 ? [] : _e, notifications = props.notifications, _f = props.noGroupByUser, noGroupByUser = _f === void 0 ? false : _f, _g = props.pinPermissions, pinPermissions = _g === void 0 ? defaultPinPermissions : _g, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _h = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     returnAllReadData = _h === void 0 ? false : _h, _j = props.threadList, threadList = _j === void 0 ? false : _j, _k = props.unsafeHTML, unsafeHTML = _k === void 0 ? false : _k, headerPosition = props.headerPosition, read = props.read, _l = props.messageLimit, messageLimit = _l === void 0 ? 100 : _l, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _m = props.hasMoreNewer, hasMoreNewer = _m === void 0 ? false : _m, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _o = props.jumpToLatestMessage, jumpToLatestMessage = _o === void 0 ? function () { return Promise.resolve(); } : _o;
+    var _p = React__default['default'].useState(null), listElement = _p[0], setListElement = _p[1];
+    var _q = React__default['default'].useState(null), ulElement = _q[0], setUlElement = _q[1];
     var customClasses = useChatContext('MessageList').customClasses;
-    var _p = useComponentContext('MessageList'), _q = _p.EmptyStateIndicator, EmptyStateIndicator$1 = _q === void 0 ? EmptyStateIndicator : _q, _r = _p.MessageListNotifications, MessageListNotifications$1 = _r === void 0 ? MessageListNotifications : _r, _s = _p.MessageNotification, MessageNotification$1 = _s === void 0 ? MessageNotification : _s, _t = _p.TypingIndicator, TypingIndicator$1 = _t === void 0 ? TypingIndicator : _t;
-    var _u = useScrollLocationLogic({
+    var _r = useComponentContext('MessageList'), _s = _r.EmptyStateIndicator, EmptyStateIndicator$1 = _s === void 0 ? EmptyStateIndicator : _s, _t = _r.MessageListNotifications, MessageListNotifications$1 = _t === void 0 ? MessageListNotifications : _t, _u = _r.MessageNotification, MessageNotification$1 = _u === void 0 ? MessageNotification : _u, _v = _r.TypingIndicator, TypingIndicator$1 = _v === void 0 ? TypingIndicator : _v;
+    var _w = useScrollLocationLogic({
         hasMoreNewer: hasMoreNewer,
+        listElement: listElement,
         messages: messages,
         scrolledUpThreshold: props.scrolledUpThreshold,
         suppressAutoscroll: suppressAutoscroll,
-    }), hasNewMessages = _u.hasNewMessages, listRef = _u.listRef, onMessageLoadCaptured = _u.onMessageLoadCaptured, onScroll = _u.onScroll, scrollToBottom = _u.scrollToBottom, wrapperRect = _u.wrapperRect;
-    var _v = useEnrichedMessages({
+        ulElement: ulElement,
+    }), hasNewMessages = _w.hasNewMessages, onMessageLoadCaptured = _w.onMessageLoadCaptured, onScroll = _w.onScroll, scrollToBottom = _w.scrollToBottom, wrapperRect = _w.wrapperRect;
+    var _x = useEnrichedMessages({
         channel: channel,
         disableDateSeparator: disableDateSeparator,
         groupStyles: groupStyles,
@@ -8903,7 +8958,7 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
-    }), messageGroupStyles = _v.messageGroupStyles, enrichedMessages = _v.messages;
+    }), messageGroupStyles = _x.messageGroupStyles, enrichedMessages = _x.messages;
     var elements = useMessageListElements({
         enrichedMessages: enrichedMessages,
         internalMessageProps: {
@@ -8938,7 +8993,7 @@ var MessageListWithContext = function (props) {
         returnAllReadData: returnAllReadData,
         threadList: threadList,
     });
-    var _w = useComponentContext('useInternalInfiniteScrollProps').LoadingIndicator, LoadingIndicator$1 = _w === void 0 ? LoadingIndicator : _w;
+    var _y = useComponentContext('useInternalInfiniteScrollProps').LoadingIndicator, LoadingIndicator$1 = _y === void 0 ? LoadingIndicator : _y;
     var messageListClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.messageList) || 'str-chat__list';
     var threadListClass = threadList ? (customClasses === null || customClasses === void 0 ? void 0 : customClasses.threadList) || 'str-chat__list--thread' : '';
     var loadMore = React__default['default'].useCallback(function () {
@@ -8967,18 +9022,16 @@ var MessageListWithContext = function (props) {
             }
         });
     }); }, [scrollToBottom, hasMoreNewer]);
-    var ulRef = React__default['default'].useRef(null);
     React__default['default'].useLayoutEffect(function () {
-        var _a;
         if (highlightedMessageId) {
-            var element = (_a = ulRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-message-id='" + highlightedMessageId + "']");
+            var element = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector("[data-message-id='" + highlightedMessageId + "']");
             element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
         }
     }, [highlightedMessageId]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: listRef }, !elements.length ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'message' })) : (React__default['default'].createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, isLoading: props.loadingMore, loader: React__default['default'].createElement(Center, { key: 'loadingindicator' },
+        React__default['default'].createElement("div", { className: messageListClass + " " + threadListClass, onScroll: onScroll, ref: setListElement, tabIndex: 0 }, !elements.length ? (React__default['default'].createElement(EmptyStateIndicator$1, { listType: 'message' })) : (React__default['default'].createElement(InfiniteScroll, __assign({ className: 'str-chat__reverse-infinite-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, isLoading: props.loadingMore, loader: React__default['default'].createElement(Center, { key: 'loadingindicator' },
                 React__default['default'].createElement(LoadingIndicator$1, { size: 20 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, props.internalInfiniteScrollProps),
-            React__default['default'].createElement("ul", { className: 'str-chat__ul', ref: ulRef }, elements),
+            React__default['default'].createElement("ul", { className: 'str-chat__ul', ref: setUlElement }, elements),
             React__default['default'].createElement(TypingIndicator$1, { threadList: threadList }),
             React__default['default'].createElement("div", { key: 'bottom' })))),
         React__default['default'].createElement(MessageListNotifications$1, { hasNewMessages: hasNewMessages, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, notifications: notifications, scrollToBottom: scrollToBottomFromNotification })));