stream-chat-react 10.1.2 → 10.3.0

package/dist/browser.full-bundle.js

@@ -10643,7 +10643,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedGallery = function (props) {
-        var images = props.images;
+        var images = props.images, innerRefs = props.innerRefs;
         var _a = React.useState(0), index = _a[0], setIndex = _a[1];
         var _b = React.useState(false), modalOpen = _b[0], setModalOpen = _b[1];
         var _c = useComponentContext('Gallery').ModalGallery, ModalGallery$1 = _c === void 0 ? ModalGallery : _c;
@@ -10660,13 +10660,13 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             }
         };
         var renderImages = images.slice(0, countImagesDisplayedInPreview).map(function (image, i) {
-            return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React__default["default"].createElement("button", { className: 'str-chat__gallery-placeholder', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); }, style: {
-                    backgroundImage: "url(".concat(images[lastImageIndexInPreview].image_url, ")"),
-                } },
+            return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React__default["default"].createElement("button", __assign$8({ className: 'str-chat__gallery-placeholder', "data-testid": 'gallery-image-last', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); }, style: __assign$8({ backgroundImage: "url(".concat(images[lastImageIndexInPreview].previewUrl ||
+                        images[lastImageIndexInPreview].image_url ||
+                        images[lastImageIndexInPreview].thumb_url, ")") }, image.style) }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })),
                 React__default["default"].createElement("p", null, t('{{ imageCount }} more', {
                     imageCount: images.length - countImagesDisplayedInPreview,
                 })))) : (React__default["default"].createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); } },
-                React__default["default"].createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url })));
+                React__default["default"].createElement("img", __assign$8({ alt: 'User uploaded content', src: image.previewUrl || image.image_url || image.thumb_url, style: image.style }, ((innerRefs === null || innerRefs === void 0 ? void 0 : innerRefs.current) && { ref: function (r) { return (innerRefs.current[i] = r); } })))));
         });
         var className = clsx('str-chat__gallery', {
             'str-chat__gallery--square': images.length > lastImageIndexInPreview,
@@ -10686,13 +10686,13 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
      * A simple component that displays an image.
      */
     var ImageComponent = function (props) {
-        var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url;
+        var _a = props.dimensions, dimensions = _a === void 0 ? {} : _a, fallback = props.fallback, image_url = props.image_url, thumb_url = props.thumb_url, innerRef = props.innerRef, previewUrl = props.previewUrl, style = props.style;
         var _b = React.useState(false), modalIsOpen = _b[0], setModalIsOpen = _b[1];
         var _c = useComponentContext('ImageComponent').ModalGallery, ModalGallery$1 = _c === void 0 ? ModalGallery : _c;
-        var imageSrc = dist_1(image_url || thumb_url);
+        var imageSrc = dist_1(previewUrl || image_url || thumb_url);
         var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("img", __assign$8({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, tabIndex: 0 }, dimensions)),
+            React__default["default"].createElement("img", __assign$8({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0 }, dimensions, (innerRef && { ref: innerRef }))),
             React__default["default"].createElement(Modal, { onClose: toggleModal, open: modalIsOpen },
                 React__default["default"].createElement(ModalGallery$1, { images: [props], index: 0 }))));
     };
@@ -13516,7 +13516,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                         ? 'actions'
                         : '';
         }
-        var classNames = clsx('str-chat__message-attachment', (_b = {},
+        var classNames = clsx('str-chat__message-attachment str-chat__message-attachment-dynamic-size', (_b = {},
             _b["str-chat__message-attachment--".concat(componentType)] = componentType,
             _b["str-chat__message-attachment--".concat(attachment === null || attachment === void 0 ? void 0 : attachment.type)] = attachment === null || attachment === void 0 ? void 0 : attachment.type,
             _b["str-chat__message-attachment--".concat(componentType, "--").concat(extra)] = componentType && extra,
@@ -13532,22 +13532,68 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             return null;
         return (React__default["default"].createElement(AttachmentActions$1, __assign$8({}, attachment, { actionHandler: actionHandler, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' })));
     };
+    function getCssDimensionsVariables(url) {
+        var _a;
+        var cssVars = (_a = {},
+            _a['--original-height'] = 1000000,
+            _a['--original-width'] = 1000000,
+            _a);
+        if (url) {
+            var urlParams = new URL(url).searchParams;
+            var oh = Number(urlParams.get('oh'));
+            var ow = Number(urlParams.get('ow'));
+            var originalHeight = oh > 1 ? oh : 1000000;
+            var originalWidth = ow > 1 ? ow : 1000000;
+            cssVars['--original-width'] = originalWidth;
+            cssVars['--original-height'] = originalHeight;
+        }
+        return cssVars;
+    }
     var GalleryContainer = function (_a) {
         var attachment = _a.attachment, _b = _a.Gallery, Gallery$1 = _b === void 0 ? Gallery : _b;
+        var imageElements = React.useRef([]);
+        var imageAttachmentSizeHandler = useChannelStateContext().imageAttachmentSizeHandler;
+        var _c = React.useState([]), attachmentConfigurations = _c[0], setAttachmentConfigurations = _c[1];
+        React.useLayoutEffect(function () {
+            if (imageElements.current &&
+                imageElements.current.every(function (element) { return !!element; }) &&
+                imageAttachmentSizeHandler) {
+                var newConfigurations_1 = [];
+                imageElements.current.forEach(function (element, i) {
+                    var config = imageAttachmentSizeHandler(attachment.images[i], element);
+                    newConfigurations_1.push(config);
+                });
+                setAttachmentConfigurations(newConfigurations_1);
+            }
+        }, [imageElements, imageAttachmentSizeHandler, attachment]);
+        var images = attachment.images.map(function (image, i) {
+            var _a, _b, _c;
+            return (__assign$8(__assign$8({}, image), { previewUrl: ((_a = attachmentConfigurations[i]) === null || _a === void 0 ? void 0 : _a.url) || 'about:blank', style: getCssDimensionsVariables(((_b = attachment.images[i]) === null || _b === void 0 ? void 0 : _b.image_url) || ((_c = attachment.images[i]) === null || _c === void 0 ? void 0 : _c.thumb_url) || '') }));
+        });
         return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'gallery' },
-            React__default["default"].createElement(Gallery$1, { images: attachment.images || [], key: 'gallery' })));
+            React__default["default"].createElement(Gallery$1, { images: images || [], innerRefs: imageElements, key: 'gallery' })));
     };
     var ImageContainer = function (props) {
         var attachment = props.attachment, _a = props.Image, Image = _a === void 0 ? ImageComponent : _a;
         var componentType = 'image';
+        var imageElement = React.useRef(null);
+        var imageAttachmentSizeHandler = useChannelStateContext().imageAttachmentSizeHandler;
+        var _b = React.useState(undefined), attachmentConfiguration = _b[0], setAttachmentConfiguration = _b[1];
+        React.useLayoutEffect(function () {
+            if (imageElement.current && imageAttachmentSizeHandler) {
+                var config = imageAttachmentSizeHandler(attachment, imageElement.current);
+                setAttachmentConfiguration(config);
+            }
+        }, [imageElement, imageAttachmentSizeHandler, attachment]);
+        var imageConfig = __assign$8(__assign$8({}, attachment), { previewUrl: (attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.url) || 'about:blank', style: getCssDimensionsVariables(attachment.image_url || attachment.thumb_url || '') });
         if (attachment.actions && attachment.actions.length) {
             return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
                 React__default["default"].createElement("div", { className: 'str-chat__attachment' },
-                    React__default["default"].createElement(Image, __assign$8({}, attachment)),
+                    React__default["default"].createElement(Image, __assign$8({}, imageConfig, { innerRef: imageElement })),
                     React__default["default"].createElement(AttachmentActionsContainer, __assign$8({}, props)))));
         }
         return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-            React__default["default"].createElement(Image, __assign$8({}, attachment))));
+            React__default["default"].createElement(Image, __assign$8({}, imageConfig, { innerRef: imageElement }))));
     };
     var CardContainer = function (props) {
         var attachment = props.attachment, _a = props.Card, Card = _a === void 0 ? Card$1 : _a;
@@ -13578,16 +13624,21 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var _a;
         var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer : _b;
         var componentType = 'media';
-        if ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) {
-            return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-                React__default["default"].createElement("div", { className: 'str-chat__attachment str-chat__attachment-media' },
-                    React__default["default"].createElement("div", { className: 'str-chat__player-wrapper' },
-                        React__default["default"].createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' })),
-                    React__default["default"].createElement(AttachmentActionsContainer, __assign$8({}, props)))));
-        }
-        return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-            React__default["default"].createElement("div", { className: 'str-chat__player-wrapper' },
-                React__default["default"].createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' }))));
+        var _c = useChannelStateContext(), shouldGenerateVideoThumbnail = _c.shouldGenerateVideoThumbnail, videoAttachmentSizeHandler = _c.videoAttachmentSizeHandler;
+        var videoElement = React.useRef(null);
+        var _d = React.useState(), attachmentConfiguration = _d[0], setAttachmentConfiguration = _d[1];
+        React.useLayoutEffect(function () {
+            if (videoElement.current && videoAttachmentSizeHandler) {
+                var config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);
+                setAttachmentConfiguration(config);
+            }
+        }, [videoElement, videoAttachmentSizeHandler, attachment]);
+        var content = (React__default["default"].createElement("div", { className: 'str-chat__player-wrapper', "data-testid": 'video-wrapper', ref: videoElement, style: getCssDimensionsVariables(attachment.thumb_url || '') },
+            React__default["default"].createElement(Media, { className: 'react-player', config: { file: { attributes: { poster: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.thumbUrl } } }, controls: true, height: '100%', url: attachmentConfiguration === null || attachmentConfiguration === void 0 ? void 0 : attachmentConfiguration.url, width: '100%' })));
+        return ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) ? (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+            React__default["default"].createElement("div", { className: 'str-chat__attachment str-chat__attachment-media' },
+                content,
+                React__default["default"].createElement(AttachmentActionsContainer, __assign$8({}, props))))) : (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CONTAINER_MAP = {
@@ -40285,7 +40336,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCreateChannelStateContext = function (value) {
         var _a;
-        var acceptedFiles = value.acceptedFiles, channel = value.channel, _b = value.channelCapabilitiesArray, channelCapabilitiesArray = _b === void 0 ? [] : _b, channelConfig = value.channelConfig, dragAndDropWindow = value.dragAndDropWindow, giphyVersion = value.giphyVersion, error = value.error, hasMore = value.hasMore, hasMoreNewer = value.hasMoreNewer, suppressAutoscroll = value.suppressAutoscroll, highlightedMessageId = value.highlightedMessageId, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _c = value.messages, messages = _c === void 0 ? [] : _c, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _d = value.read, read = _d === void 0 ? {} : _d, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _e = value.threadMessages, threadMessages = _e === void 0 ? [] : _e, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
+        var acceptedFiles = value.acceptedFiles, channel = value.channel, _b = value.channelCapabilitiesArray, channelCapabilitiesArray = _b === void 0 ? [] : _b, channelConfig = value.channelConfig, dragAndDropWindow = value.dragAndDropWindow, giphyVersion = value.giphyVersion, error = value.error, hasMore = value.hasMore, hasMoreNewer = value.hasMoreNewer, imageAttachmentSizeHandler = value.imageAttachmentSizeHandler, suppressAutoscroll = value.suppressAutoscroll, highlightedMessageId = value.highlightedMessageId, loading = value.loading, loadingMore = value.loadingMore, maxNumberOfFiles = value.maxNumberOfFiles, members = value.members, _c = value.messages, messages = _c === void 0 ? [] : _c, multipleUploads = value.multipleUploads, mutes = value.mutes, notifications = value.notifications, pinnedMessages = value.pinnedMessages, quotedMessage = value.quotedMessage, _d = value.read, read = _d === void 0 ? {} : _d, shouldGenerateVideoThumbnail = value.shouldGenerateVideoThumbnail, skipMessageDataMemoization = value.skipMessageDataMemoization, thread = value.thread, threadHasMore = value.threadHasMore, threadLoadingMore = value.threadLoadingMore, _e = value.threadMessages, threadMessages = _e === void 0 ? [] : _e, videoAttachmentSizeHandler = value.videoAttachmentSizeHandler, watcherCount = value.watcherCount, watcher_count = value.watcher_count, watchers = value.watchers;
         var channelId = channel.cid;
         var lastRead = channel.initialized && ((_a = channel.lastRead()) === null || _a === void 0 ? void 0 : _a.getTime());
         var membersLength = Object.keys(members || []).length;
@@ -40336,6 +40387,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             hasMore: hasMore,
             hasMoreNewer: hasMoreNewer,
             highlightedMessageId: highlightedMessageId,
+            imageAttachmentSizeHandler: imageAttachmentSizeHandler,
             loading: loading,
             loadingMore: loadingMore,
             maxNumberOfFiles: maxNumberOfFiles,
@@ -40347,11 +40399,13 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             pinnedMessages: pinnedMessages,
             quotedMessage: quotedMessage,
             read: read,
+            shouldGenerateVideoThumbnail: shouldGenerateVideoThumbnail,
             suppressAutoscroll: suppressAutoscroll,
             thread: thread,
             threadHasMore: threadHasMore,
             threadLoadingMore: threadLoadingMore,
             threadMessages: threadMessages,
+            videoAttachmentSizeHandler: videoAttachmentSizeHandler,
             watcher_count: watcher_count,
             watcherCount: watcherCount,
             watchers: watchers,
@@ -40371,6 +40425,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             quotedMessage,
             readUsersLength,
             readUsersLastReads,
+            shouldGenerateVideoThumbnail,
             skipMessageDataMemoization,
             suppressAutoscroll,
             thread,
@@ -40552,7 +40607,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useUserRole = function (message, onlySenderCanEdit, disableQuotedMessages) {
         var _a, _b, _c;
-        var _d = useChannelStateContext('useUserRole'), channel = _d.channel, _e = _d.channelCapabilities, channelCapabilities = _e === void 0 ? {} : _e, channelConfig = _d.channelConfig;
+        var _d = useChannelStateContext('useUserRole'), channel = _d.channel, _e = _d.channelCapabilities, channelCapabilities = _e === void 0 ? {} : _e;
         var client = useChatContext('useUserRole').client;
         /**
          * @deprecated as it relies on `membership.role` check which is already deprecated and shouldn't be used anymore.
@@ -40578,11 +40633,11 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             (isMyMessage && channelCapabilities['update-own-message']);
         var canDelete = channelCapabilities['delete-any-message'] ||
             (isMyMessage && channelCapabilities['delete-own-message']);
-        var canFlag = !isMyMessage;
-        var canMute = !isMyMessage && (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.mutes);
+        var canFlag = !isMyMessage && channelCapabilities['flag-message'];
+        var canMute = !isMyMessage && channelCapabilities['mute-channel'];
         var canQuote = !disableQuotedMessages && channelCapabilities['quote-message'];
-        var canReact = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.reactions) !== false && channelCapabilities['send-reaction'];
-        var canReply = (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.replies) !== false && channelCapabilities['send-reply'];
+        var canReact = channelCapabilities['send-reaction'];
+        var canReply = channelCapabilities['send-reply'];
         return {
             canDelete: canDelete,
             canEdit: canEdit,
@@ -45865,6 +45920,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                             dispatch({
                                 id: id,
                                 state: 'finished',
+                                thumb_url: response.thumb_url,
                                 type: 'setFileUpload',
                                 url: response.file,
                             });
@@ -46129,6 +46185,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 asset_url: upload.url,
                 file_size: upload.file.size,
                 mime_type: upload.file.type,
+                thumb_url: upload.thumb_url,
                 title: upload.file.name,
                 type: getAttachmentTypeFromMime(upload.file.type || ''),
             }); });
@@ -46315,7 +46372,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             var type = _a.type;
             return type === 'file';
         }).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 asset_url = _a.asset_url, file_size = _a.file_size, mime_type = _a.mime_type, thumb_url = _a.thumb_url, _b = _a.title, title = _b === void 0 ? '' : _b;
             var id = nanoid();
             acc[id] = {
                 file: {
@@ -46325,6 +46382,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 },
                 id: id,
                 state: 'finished',
+                thumb_url: thumb_url,
                 url: asset_url,
             };
             return acc;
@@ -46857,12 +46915,27 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
      */
     var ReactionsList = React__default["default"].memo(UnMemoizedReactionsList);
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedSimpleReactionsList = function (props) {
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};// todo: merge with ReactionsList/ButtonWithTooltip
+    // avoiding breaking change of replacing <span> with <button>
+    var WithTooltip = function (_a) {
+        var children = _a.children, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, title = _a.title;
+        var _b = React.useState(null), referenceElement = _b[0], setReferenceElement = _b[1];
+        var _c = useEnterLeaveHandlers({
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+        }), handleEnter = _c.handleEnter, handleLeave = _c.handleLeave, tooltipVisible = _c.tooltipVisible;
+        var themeVersion = useChatContext('WithTooltip').themeVersion;
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            themeVersion === '2' && (React__default["default"].createElement(PopperTooltip, { referenceElement: referenceElement, visible: tooltipVisible }, title)),
+            React__default["default"].createElement("span", { onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement }, children)));
+    };
+    var UnMemoizedSimpleReactionsList = function (props) {
         var propHandleReaction = props.handleReaction, rest = __rest$4(props, ["handleReaction"]);
         var _a = useEmojiContext('SimpleReactionsList'), Emoji = _a.Emoji, emojiConfig = _a.emojiConfig;
         var contextHandleReaction = useMessageContext('SimpleReactionsList').handleReaction;
         var _b = useProcessReactions(__assign$8({ emojiConfig: emojiConfig }, rest)), additionalEmojiProps = _b.additionalEmojiProps, emojiData = _b.emojiData, getEmojiByReactionType = _b.getEmojiByReactionType, iHaveReactedWithReaction = _b.iHaveReactedWithReaction, latestReactions = _b.latestReactions, latestReactionTypes = _b.latestReactionTypes, supportedReactionsArePresent = _b.supportedReactionsArePresent, totalReactionCount = _b.totalReactionCount;
         var _c = React.useState(undefined), tooltipReactionType = _c[0], setTooltipReactionType = _c[1];
+        var themeVersion = useChatContext('SimpleReactionsList').themeVersion;
         var handleReaction = propHandleReaction || contextHandleReaction;
         if (!latestReactions.length)
             return null;
@@ -46872,7 +46945,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             return latestReactions
                 .map(function (reaction) {
                 var _a, _b;
-                if (reaction.type === type) {
+                if (type && reaction.type === type) {
                     return ((_a = reaction.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = reaction.user) === null || _b === void 0 ? void 0 : _b.id);
                 }
                 return null;
@@ -46885,16 +46958,18 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                     var _a;
                     var emojiObject = getEmojiByReactionType(reactionType);
                     var isOwnReaction = iHaveReactedWithReaction(reactionType);
+                    var tooltipVisible = emojiObject && tooltipReactionType === (emojiObject === null || emojiObject === void 0 ? void 0 : emojiObject.id);
+                    var tooltipContent = (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 : _a.join(', ');
                     return emojiObject ? (React__default["default"].createElement("li", { className: clsx('str-chat__simple-reactions-list-item', {
                             'str-chat__message-reaction-own': isOwnReaction,
                         }), key: "".concat(emojiObject.id, "-").concat(i), onClick: function (event) { return handleReaction(reactionType, event); }, onKeyUp: function (event) { return handleReaction(reactionType, event); } },
-                        React__default["default"].createElement("span", { onMouseEnter: function () { return setTooltipReactionType(reactionType); } },
+                        React__default["default"].createElement(WithTooltip, { onMouseEnter: function () { return setTooltipReactionType(reactionType); }, onMouseLeave: function () { return setTooltipReactionType(undefined); }, title: tooltipContent },
                             React__default["default"].createElement(React.Suspense, { fallback: null },
                                 React__default["default"].createElement(Emoji, __assign$8({ data: emojiData, emoji: emojiObject, size: 13 }, additionalEmojiProps))),
-                            "\u00A0"),
-                        tooltipReactionType === emojiObject.id && (React__default["default"].createElement("div", { className: 'str-chat__simple-reactions-list-tooltip str-chat__tooltip' },
-                            React__default["default"].createElement("div", { className: 'arrow' }), (_a = getUsersPerReactionType(tooltipReactionType)) === null || _a === void 0 ? void 0 :
-                            _a.join(', '))))) : null;
+                            "\u00A0",
+                            tooltipVisible && themeVersion === '1' && (React__default["default"].createElement("div", { className: 'str-chat__simple-reactions-list-tooltip' },
+                                React__default["default"].createElement("div", { className: 'arrow' }),
+                                tooltipContent))))) : null;
                 }),
                 React__default["default"].createElement("li", { className: 'str-chat__simple-reactions-list-item--last-number' }, totalReactionCount))));
     };
@@ -47237,6 +47312,79 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         };
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var getImageAttachmentConfiguration = function (attachment, element) {
+        var url = new URL((attachment.image_url || attachment.thumb_url || ''));
+        var resizeDimensions = getSizingRestrictions(url, element);
+        if (resizeDimensions) {
+            // Apply 2x for retina displays
+            resizeDimensions.height *= 2;
+            resizeDimensions.width *= 2;
+            addResizingParamsToUrl(resizeDimensions, url);
+        }
+        return {
+            url: url.href,
+        };
+    };
+    var getVideoAttachmentConfiguration = function (attachment, element, shouldGenerateVideoThumbnail) {
+        var thumbUrl = undefined;
+        if (attachment.thumb_url && shouldGenerateVideoThumbnail) {
+            var url = new URL(attachment.thumb_url);
+            var resizeDimensions = getSizingRestrictions(url, element);
+            if (resizeDimensions) {
+                // Apply 2x for retina displays
+                resizeDimensions.height *= 2;
+                resizeDimensions.width *= 2;
+                addResizingParamsToUrl(resizeDimensions, url);
+            }
+            thumbUrl = url.href;
+        }
+        return {
+            thumbUrl: thumbUrl,
+            url: attachment.asset_url || '',
+        };
+    };
+    var getSizingRestrictions = function (url, htmlElement) {
+        var urlParams = url.searchParams;
+        var originalHeight = Number(urlParams.get('oh')) || 1;
+        var originalWidth = Number(urlParams.get('ow')) || 1;
+        var cssSizeRestriction = getCSSSizeRestrictions(htmlElement);
+        var resizeDimensions;
+        if ((cssSizeRestriction.maxHeight || cssSizeRestriction.height) && cssSizeRestriction.maxWidth) {
+            resizeDimensions = getResizeDimensions(originalHeight, originalWidth, 
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+            cssSizeRestriction.maxHeight || cssSizeRestriction.height, cssSizeRestriction.maxWidth);
+        }
+        else {
+            resizeDimensions = undefined;
+        }
+        return resizeDimensions;
+    };
+    var getResizeDimensions = function (originalHeight, originalWidth, maxHeight, maxWidth) { return ({
+        height: Math.round(Math.max(maxHeight, (maxWidth / originalWidth) * originalHeight)),
+        width: Math.round(Math.max(maxHeight, (maxWidth / originalHeight) * originalWidth)),
+    }); };
+    var getCSSSizeRestrictions = function (htmlElement) {
+        var computedStylesheet = getComputedStyle(htmlElement);
+        var height = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('height'));
+        var maxHeight = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-height'));
+        var maxWidth = getValueRepresentationOfCSSProperty(computedStylesheet.getPropertyValue('max-width'));
+        if (!((height || maxHeight) && maxWidth)) {
+            console.warn("Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/react/message-components/attachment/#image-and-video-sizing");
+        }
+        return { height: height, maxHeight: maxHeight, maxWidth: maxWidth };
+    };
+    var getValueRepresentationOfCSSProperty = function (property) {
+        if (!property.endsWith('px')) {
+            return undefined;
+        }
+        var number = parseFloat(property);
+        return isNaN(number) ? undefined : number;
+    };
+    var addResizingParamsToUrl = function (resizeDimensions, url) {
+        url.searchParams.set('h', resizeDimensions.height.toString());
+        url.searchParams.set('w', resizeDimensions.width.toString());
+    };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=streamChat.logChatPromiseExecution;window.StreamChat.Channel=Channel$1;window.ICAL=window.ICAL||{};var UnMemoizedChannel = function (props) {
         var propsChannel = props.channel, _a = props.EmptyPlaceholder, EmptyPlaceholder = _a === void 0 ? null : _a, LoadingErrorIndicator = props.LoadingErrorIndicator, _b = props.LoadingIndicator, LoadingIndicator = _b === void 0 ? LoadingChannel : _b;
         var _c = useChatContext('Channel'), contextChannel = _c.channel, channelsQueryState = _c.channelsQueryState, customClasses = _c.customClasses, theme = _c.theme;
@@ -47723,7 +47871,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var onMentionsHoverOrClick = useMentionsHandlers(onMentionsHover, onMentionsClick);
         var editMessage = useEditMessageHandler(doUpdateMessageRequest);
         var typing = state.typing, restState = __rest$4(state, ["typing"]);
-        var channelStateContextValue = useCreateChannelStateContext(__assign$8(__assign$8({}, restState), { acceptedFiles: acceptedFiles, channel: channel, channelCapabilitiesArray: channelCapabilitiesArray, channelConfig: channelConfig, dragAndDropWindow: dragAndDropWindow, giphyVersion: props.giphyVersion || 'fixed_height', maxNumberOfFiles: maxNumberOfFiles, multipleUploads: multipleUploads, mutes: mutes, notifications: notifications, quotedMessage: quotedMessage, watcher_count: state.watcherCount }));
+        var channelStateContextValue = useCreateChannelStateContext(__assign$8(__assign$8({}, restState), { acceptedFiles: acceptedFiles, channel: channel, channelCapabilitiesArray: channelCapabilitiesArray, channelConfig: channelConfig, dragAndDropWindow: dragAndDropWindow, giphyVersion: props.giphyVersion || 'fixed_height', imageAttachmentSizeHandler: props.imageAttachmentSizeHandler || getImageAttachmentConfiguration, maxNumberOfFiles: maxNumberOfFiles, multipleUploads: multipleUploads, mutes: mutes, notifications: notifications, quotedMessage: quotedMessage, shouldGenerateVideoThumbnail: props.shouldGenerateVideoThumbnail || true, videoAttachmentSizeHandler: props.videoAttachmentSizeHandler || getVideoAttachmentConfiguration, watcher_count: state.watcherCount }));
         var channelActionContextValue = React.useMemo(function () { return ({
             addNotification: addNotification,
             closeThread: closeThread,
@@ -47982,8 +48130,8 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         if (loading) {
             return React__default["default"].createElement(LoadingIndicator, null);
         }
-        return (React__default["default"].createElement("div", { className: 'str-chat__channel-list-messenger' },
-            React__default["default"].createElement("div", { "aria-label": 'Channel list', className: 'str-chat__channel-list-messenger__main', role: 'listbox' }, children)));
+        return (React__default["default"].createElement("div", { className: 'str-chat__channel-list-messenger str-chat__channel-list-messenger-react' },
+            React__default["default"].createElement("div", { "aria-label": 'Channel list', className: 'str-chat__channel-list-messenger__main str-chat__channel-list-messenger-react__main', role: 'listbox' }, children)));
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChannelDeletedListener = function (setChannels, customHandler) {
@@ -48836,18 +48984,39 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedLoadMoreButton = function (props) {
-        var _a = props.children, children = _a === void 0 ? 'Load more' : _a, onClick = props.onClick, refreshing = props.refreshing;
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var deprecationAndReplacementWarning = function (pairs, component) {
+        pairs.forEach(function (data) {
+            var _a = [
+                Object.entries(data[0])[0],
+                Object.entries(data[1])[0],
+            ], _b = _a[0], oldName = _b[0], oldValue = _b[1], _c = _a[1], newName = _c[0], newValue = _c[1];
+            if ((typeof oldValue !== 'undefined' && typeof newValue === 'undefined') ||
+                (typeof oldValue !== 'undefined' && typeof newValue !== 'undefined')) {
+                console.warn("[Deprecation notice (".concat(component, ")]: prefer using prop ").concat(newName, " instead of ").concat(oldName));
+            }
+        });
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedLoadMoreButton = function (_a) {
+        var _b = _a.children, children = _b === void 0 ? 'Load more' : _b, isLoading = _a.isLoading, onClick = _a.onClick, refreshing = _a.refreshing;
+        var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
+        React.useEffect(function () {
+            deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMoreButton');
+        }, []);
         return (React__default["default"].createElement("div", { className: 'str-chat__load-more-button' },
-            React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: refreshing, onClick: onClick }, refreshing ? React__default["default"].createElement(LoadingIndicator, null) : children)));
+            React__default["default"].createElement("button", { "aria-label": 'Load More Channels', className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React__default["default"].createElement(LoadingIndicator, null) : children)));
     };
     var LoadMoreButton = React__default["default"].memo(UnMemoizedLoadMoreButton);
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedLoadMorePaginator = function (props) {
-        var children = props.children, hasNextPage = props.hasNextPage, _a = props.LoadMoreButton, LoadMoreButton$1 = _a === void 0 ? LoadMoreButton : _a, loadNextPage = props.loadNextPage, refreshing = props.refreshing, reverse = props.reverse;
+        var children = props.children, hasNextPage = props.hasNextPage, isLoading = props.isLoading, _a = props.LoadMoreButton, LoadMoreButton$1 = _a === void 0 ? LoadMoreButton : _a, loadNextPage = props.loadNextPage, refreshing = props.refreshing, reverse = props.reverse;
+        var loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
+        React.useEffect(function () {
+            deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMorePaginator');
+        }, []);
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             !reverse && children,
-            hasNextPage && React__default["default"].createElement(LoadMoreButton$1, { onClick: loadNextPage, refreshing: refreshing }),
+            hasNextPage && React__default["default"].createElement(LoadMoreButton$1, { isLoading: loadingState, onClick: loadNextPage }),
             reverse && children));
     };
     var LoadMorePaginator = React__default["default"].memo(UnMemoizedLoadMorePaginator);
@@ -48962,7 +49131,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             };
             return React__default["default"].createElement(ChannelPreview, __assign$8({}, previewProps));
         };
-        var className = clsx((_a = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) !== null && _a !== void 0 ? _a : 'str-chat', theme, (_b = customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) !== null && _b !== void 0 ? _b : 'str-chat-channel-list str-chat__channel-list', {
+        var className = clsx((_a = customClasses === null || customClasses === void 0 ? void 0 : customClasses.chat) !== null && _a !== void 0 ? _a : 'str-chat', theme, (_b = customClasses === null || customClasses === void 0 ? void 0 : customClasses.channelList) !== null && _b !== void 0 ? _b : 'str-chat-channel-list str-chat__channel-list str-chat__channel-list-react', {
             'str-chat--windows-flags': useImageFlagEmojisOnWindows && navigator.userAgent.match(/Win/),
             'str-chat-channel-list--open': navOpen,
         });
@@ -48970,7 +49139,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement("div", { className: className, ref: channelListRef },
                 showChannelSearch && (React__default["default"].createElement(ChannelSearch$1, __assign$8({ onSearch: onSearch, onSearchExit: onSearchExit, setChannels: setChannels }, additionalChannelSearchProps))),
-                showChannelList && (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
+                showChannelList && (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, isLoading: channelsQueryState.queryInProgress === 'load-more', loadNextPage: loadNextPage }, renderChannels
                     ? renderChannels(loadedChannels, renderChannel)
                     : loadedChannels.map(function (channel) { return renderChannel(channel); }))))))));
     };
@@ -48985,7 +49154,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '10.1.2';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '10.3.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -49274,7 +49443,11 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         }
     };
     var InfiniteScroll = function (props) {
-        var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, _b = props.hasMore, hasMore = _b === void 0 ? false : _b, _c = props.hasMoreNewer, hasMoreNewer = _c === void 0 ? false : _c, head = props.head, _d = props.initialLoad, initialLoad = _d === void 0 ? true : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, _f = props.threshold, threshold = _f === void 0 ? 250 : _f, _g = props.useCapture, useCapture = _g === void 0 ? false : _g, elementProps = __rest$4(props, ["children", "element", "hasMore", "hasMoreNewer", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "threshold", "useCapture"]);
+        var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, hasNextPage = props.hasNextPage, hasPreviousPage = props.hasPreviousPage, head = props.head, _b = props.initialLoad, initialLoad = _b === void 0 ? true : _b, isLoading = props.isLoading, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, loadNextPage = props.loadNextPage, loadPreviousPage = props.loadPreviousPage, _c = props.threshold, threshold = _c === void 0 ? 250 : _c, _d = props.useCapture, useCapture = _d === void 0 ? false : _d, elementProps = __rest$4(props, ["children", "element", "hasMore", "hasMoreNewer", "hasNextPage", "hasPreviousPage", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "loadNextPage", "loadPreviousPage", "threshold", "useCapture"]);
+        var loadNextPageFn = loadNextPage || loadMoreNewer;
+        var loadPreviousPageFn = loadPreviousPage || loadMore;
+        var hasNextPageFlag = hasNextPage || hasMoreNewer;
+        var hasPreviousPageFlag = hasPreviousPage || hasMore;
         var scrollComponent = React.useRef();
         var scrollListener = React.useCallback(function () {
             var element = scrollComponent.current;
@@ -49288,13 +49461,30 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             if (listenToScroll) {
                 listenToScroll(offset, reverseOffset, threshold);
             }
-            if (reverseOffset < Number(threshold) && typeof loadMore === 'function' && hasMore) {
-                loadMore();
+            if (reverseOffset < Number(threshold) &&
+                typeof loadPreviousPageFn === 'function' &&
+                hasPreviousPageFlag) {
+                loadPreviousPageFn();
             }
-            if (offset < Number(threshold) && typeof loadMoreNewer === 'function' && hasMoreNewer) {
-                loadMoreNewer();
+            if (offset < Number(threshold) && typeof loadNextPageFn === 'function' && hasNextPageFlag) {
+                loadNextPageFn();
             }
-        }, [hasMore, hasMoreNewer, threshold, listenToScroll, loadMore, loadMoreNewer]);
+        }, [
+            hasPreviousPageFlag,
+            hasNextPageFlag,
+            threshold,
+            listenToScroll,
+            loadPreviousPageFn,
+            loadNextPageFn,
+        ]);
+        React.useEffect(function () {
+            deprecationAndReplacementWarning([
+                [{ hasMoreNewer: hasMoreNewer }, { hasNextPage: hasNextPage }],
+                [{ loadMoreNewer: loadMoreNewer }, { loadNextPage: loadNextPage }],
+                [{ hasMore: hasMore }, { hasPreviousPage: hasPreviousPage }],
+                [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
+            ], 'InfiniteScroll');
+        }, []);
         React.useEffect(function () {
             var _a;
             var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
@@ -50062,7 +50252,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
     };
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useMessageListElements = function (props) {
-        var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, onMessageLoadCaptured = props.onMessageLoadCaptured, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
+        var enrichedMessages = props.enrichedMessages, internalMessageProps = props.internalMessageProps, messageGroupStyles = props.messageGroupStyles, read = props.read, returnAllReadData = props.returnAllReadData, threadList = props.threadList;
         var _a = useChatContext('useMessageListElements'), client = _a.client, customClasses = _a.customClasses;
         var _b = useComponentContext('useMessageListElements'), _c = _b.DateSeparator, DateSeparator$1 = _c === void 0 ? DateSeparator : _c, HeaderComponent = _b.HeaderComponent, _d = _b.MessageSystem, MessageSystem = _d === void 0 ? EventComponent : _d;
         // get the readData, but only for messages submitted by the user themselves
@@ -50094,7 +50284,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 }
                 var groupStyles = messageGroupStyles[message.id] || '';
                 var messageClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.message) || "str-chat__li str-chat__li--".concat(groupStyles);
-                return (React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at, onLoadCapture: onMessageLoadCaptured },
+                return (React__default["default"].createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass, key: message.id || message.created_at },
                     React__default["default"].createElement(Message, __assign$8({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
             });
         }, [
@@ -50102,7 +50292,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             internalMessageProps,
             lastReceivedId,
             messageGroupStyles,
-            onMessageLoadCaptured,
             readData,
             threadList,
         ]);
@@ -50221,19 +50410,9 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 setIsMessageListScrolledToBottom(true);
             }
         }, [updateScrollTop, closeToTop, closeToBottom, scrolledUpThreshold]);
-        var onMessageLoadCaptured = React.useCallback(function () {
-            /**
-             * A load event (emitted by e.g. an <img>) was captured on a message.
-             * In some cases, the loaded asset is larger than the placeholder, which means we have to scroll down.
-             */
-            if (closeToBottom.current) {
-                scrollToBottom();
-            }
-        }, [closeToTop, closeToBottom, scrollToBottom]);
         return {
             hasNewMessages: hasNewMessages,
             isMessageListScrolledToBottom: isMessageListScrolledToBottom,
-            onMessageLoadCaptured: onMessageLoadCaptured,
             onScroll: onScroll,
             scrollToBottom: scrollToBottom,
             wrapperRect: wrapperRect,
@@ -50363,7 +50542,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             messages: messages,
             scrolledUpThreshold: props.scrolledUpThreshold,
             suppressAutoscroll: suppressAutoscroll,
-        }), hasNewMessages = _x.hasNewMessages, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, onMessageLoadCaptured = _x.onMessageLoadCaptured, onScroll = _x.onScroll, scrollToBottom = _x.scrollToBottom, wrapperRect = _x.wrapperRect;
+        }), hasNewMessages = _x.hasNewMessages, isMessageListScrolledToBottom = _x.isMessageListScrolledToBottom, onScroll = _x.onScroll, scrollToBottom = _x.scrollToBottom, wrapperRect = _x.wrapperRect;
         var _y = useEnrichedMessages({
             channel: channel,
             disableDateSeparator: disableDateSeparator,
@@ -50403,7 +50582,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 unsafeHTML: unsafeHTML,
             },
             messageGroupStyles: messageGroupStyles,
-            onMessageLoadCaptured: onMessageLoadCaptured,
             read: read,
             returnAllReadData: returnAllReadData,
             threadList: threadList,
@@ -50447,7 +50625,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var showEmptyStateIndicator = elements.length === 0 && !threadList;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement(MessageListMainPanel, null,
-                React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator$1, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, __assign$8({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasMore: props.hasMore, hasMoreNewer: props.hasMoreNewer, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator$1, { size: 20 })), loadMore: loadMore, loadMoreNewer: loadMoreNewer }, props.internalInfiniteScrollProps),
+                React__default["default"].createElement("div", { className: "".concat(messageListClass, " ").concat(threadListClass), onScroll: onScroll, ref: setListElement, tabIndex: 0 }, showEmptyStateIndicator ? (React__default["default"].createElement(EmptyStateIndicator$1, { key: 'empty-state-indicator', listType: threadList ? 'thread' : 'message' })) : (React__default["default"].createElement(InfiniteScroll, __assign$8({ className: 'str-chat__reverse-infinite-scroll  str-chat__message-list-scroll', "data-testid": 'reverse-infinite-scroll', hasNextPage: props.hasMoreNewer, hasPreviousPage: props.hasMore, head: props.head, isLoading: props.loadingMore, loader: React__default["default"].createElement("div", { className: 'str-chat__list__loading', key: 'loading-indicator' }, props.loadingMore && React__default["default"].createElement(LoadingIndicator$1, { size: 20 })), loadNextPage: loadMoreNewer, loadPreviousPage: loadMore }, props.internalInfiniteScrollProps),
                     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' }))))),
@@ -52056,7 +52234,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             return Item;
         }, [
             customClasses === null || customClasses === void 0 ? void 0 : customClasses.virtualMessage,
-            messageGroupStyles,
             numItemsPrepended,
             // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
             processedMessages.length,
@@ -52198,9 +52375,13 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         }, []);
         if (!thread)
             return null;
-        var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) || 'str-chat__thread-container str-chat__thread';
+        var threadClass = (customClasses === null || customClasses === void 0 ? void 0 : customClasses.thread) ||
+            clsx('str-chat__thread-container str-chat__thread', {
+                'str-chat__thread--full': fullWidth,
+                'str-chat__thread--virtualized': virtualized,
+            });
         var head = (React__default["default"].createElement(ThreadHead$1, __assign$8({ key: thread.id, message: thread, Message: MessageUIComponent }, additionalParentMessageProps)));
-        return (React__default["default"].createElement("div", { className: "".concat(threadClass, " ").concat(fullWidth ? 'str-chat__thread--full' : '') },
+        return (React__default["default"].createElement("div", { className: threadClass },
             React__default["default"].createElement(ThreadHeader$1, { closeThread: closeThread, thread: thread }),
             React__default["default"].createElement(ThreadMessageList, __assign$8({ disableDateSeparator: !enableDateSeparator, hasMore: threadHasMore, head: head, loadingMore: threadLoadingMore, loadMore: loadMoreThread, Message: MessageUIComponent, messageActions: messageActions, messages: threadMessages || [], suppressAutoscroll: threadSuppressAutoscroll, threadList: true }, (virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps))),
             React__default["default"].createElement(MessageInput, __assign$8({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));