stream-chat-react 10.1.2 → 10.2.0

package/dist/index.cjs.js

@@ -1345,7 +1345,7 @@ var ModalGallery = function (props) {
 };
 
 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;
@@ -1362,13 +1362,13 @@ var UnMemoizedGallery = function (props) {
         }
     };
     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({ className: 'str-chat__gallery-placeholder', "data-testid": 'gallery-image-last', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); }, style: __assign({ 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({ 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,
@@ -1388,13 +1388,13 @@ var Gallery = React__default["default"].memo(UnMemoizedGallery);
  * 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 = sanitizeUrl.sanitizeUrl(image_url || thumb_url);
+    var imageSrc = sanitizeUrl.sanitizeUrl(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({ 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({ 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 }))));
 };
@@ -1713,7 +1713,7 @@ var AttachmentWithinContainer = function (_a) {
                     ? '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,
@@ -1729,22 +1729,68 @@ var AttachmentActionsContainer = function (_a) {
         return null;
     return (React__default["default"].createElement(AttachmentActions$1, __assign({}, 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(__assign({}, 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(__assign({}, 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({}, attachment)),
+                React__default["default"].createElement(Image, __assign({}, imageConfig, { innerRef: imageElement })),
                 React__default["default"].createElement(AttachmentActionsContainer, __assign({}, props)))));
     }
     return (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React__default["default"].createElement(Image, __assign({}, attachment))));
+        React__default["default"].createElement(Image, __assign({}, imageConfig, { innerRef: imageElement }))));
 };
 var CardContainer = function (props) {
     var attachment = props.attachment, _a = props.Card, Card$1 = _a === void 0 ? Card : _a;
@@ -1775,16 +1821,21 @@ var MediaContainer = function (props) {
     var _a;
     var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer__default["default"] : _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({}, 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({}, props))))) : (React__default["default"].createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
 };
 
 var CONTAINER_MAP = {
@@ -3961,7 +4012,7 @@ var getStrippedEmojiData = function (data) { return (__assign(__assign({}, data)
 
 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;
@@ -4012,6 +4063,7 @@ var useCreateChannelStateContext = function (value) {
         hasMore: hasMore,
         hasMoreNewer: hasMoreNewer,
         highlightedMessageId: highlightedMessageId,
+        imageAttachmentSizeHandler: imageAttachmentSizeHandler,
         loading: loading,
         loadingMore: loadingMore,
         maxNumberOfFiles: maxNumberOfFiles,
@@ -4023,11 +4075,13 @@ var useCreateChannelStateContext = function (value) {
         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,
@@ -4047,6 +4101,7 @@ var useCreateChannelStateContext = function (value) {
         quotedMessage,
         readUsersLength,
         readUsersLastReads,
+        shouldGenerateVideoThumbnail,
         skipMessageDataMemoization,
         suppressAutoscroll,
         thread,
@@ -9552,6 +9607,7 @@ var useFileUploads = function (props, state, dispatch) {
                         dispatch({
                             id: id,
                             state: 'finished',
+                            thumb_url: response.thumb_url,
                             type: 'setFileUpload',
                             url: response.file,
                         });
@@ -9816,6 +9872,7 @@ var useSubmitHandler = function (props, state, dispatch, numberOfUploads) {
             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 || ''),
         }); });
@@ -10002,7 +10059,7 @@ var initState = function (message) {
         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.nanoid();
         acc[id] = {
             file: {
@@ -10012,6 +10069,7 @@ var initState = function (message) {
             },
             id: id,
             state: 'finished',
+            thumb_url: thumb_url,
             url: asset_url,
         };
         return acc;
@@ -10916,6 +10974,79 @@ var useChannelContainerClasses = function (_a) {
     };
 };
 
+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());
+};
+
 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;
@@ -11402,7 +11533,7 @@ var ChannelInner = function (props) {
     var onMentionsHoverOrClick = useMentionsHandlers(onMentionsHover, onMentionsClick);
     var editMessage = useEditMessageHandler(doUpdateMessageRequest);
     var typing = state.typing, restState = __rest(state, ["typing"]);
-    var channelStateContextValue = useCreateChannelStateContext(__assign(__assign({}, 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(__assign({}, 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,
@@ -12648,7 +12779,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.1.2';
+var version = '10.2.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -13701,7 +13832,7 @@ var useLastReadData = function (props) {
 };
 
 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
@@ -13733,7 +13864,7 @@ var useMessageListElements = function (props) {
             }
             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({ groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], threadList: threadList }, internalMessageProps))));
         });
     }, [
@@ -13741,7 +13872,6 @@ var useMessageListElements = function (props) {
         internalMessageProps,
         lastReceivedId,
         messageGroupStyles,
-        onMessageLoadCaptured,
         readData,
         threadList,
     ]);
@@ -13860,19 +13990,9 @@ var useScrollLocationLogic = function (params) {
             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,
@@ -14000,7 +14120,7 @@ var MessageListWithContext = function (props) {
         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,
@@ -14040,7 +14160,6 @@ var MessageListWithContext = function (props) {
             unsafeHTML: unsafeHTML,
         },
         messageGroupStyles: messageGroupStyles,
-        onMessageLoadCaptured: onMessageLoadCaptured,
         read: read,
         returnAllReadData: returnAllReadData,
         threadList: threadList,
@@ -14484,7 +14603,6 @@ var VirtualizedMessageListWithContext = function (props) {
         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,
@@ -14622,9 +14740,13 @@ var ThreadInner = function (props) {
     }, []);
     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({ 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({ 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({ focus: autoFocus, Input: ThreadInput, parent: thread, publishTypingEvent: false }, additionalMessageInputProps))));