stream-chat-react 10.1.1 → 10.2.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,
@@ -43181,6 +43236,159 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         intro: 'channel.intro',
     };
 
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useFileState = function (file) {
+        return React.useMemo(function () { return ({
+            failed: file.state === 'failed',
+            finished: file.state === 'finished',
+            uploading: file.state === 'uploading',
+        }); }, [file.state]);
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var EmojiIconLarge = function () {
+        var t = useTranslationContext('EmojiIconLarge').t;
+        return (React__default["default"].createElement("svg", { height: '28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("title", null, t('Open emoji picker')),
+            React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+                React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' }))));
+    };
+    var EmojiIconSmall = function () {
+        var t = useTranslationContext('EmojiIconSmall').t;
+        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("title", null, t('Open emoji picker')),
+            React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+                React__default["default"].createElement("path", { d: 'M6.7 1.42C3.73 1.42 1.42 3.73 1.42 6.7c0 2.97 2.31 5.28 5.28 5.28c2.97 0 5.28-2.31 5.28-5.28c0-2.97-2.31-5.28-5.28-5.28zM.1 6.7c0-3.63 2.97-6.6 6.6-6.6s6.6 2.97 6.6 6.6s-2.97 6.6-6.6 6.6s-6.6-2.97-6.6-6.6zM6.04 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM9.34 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM3.73 7.47c.33-.22.66-.11.88.11c.33.44.88.99 1.65 1.1c.66.22 1.54.11 2.64-1.1c.22-.22.66-.33.88 0c.22.22.33.66 0 .88c-1.21 1.43-2.64 1.87-3.85 1.65c-1.1-.22-1.98-.99-2.42-1.65c-.22-.33-.11-.66.22-.99z' }))));
+    };
+    // ThemingV2 icon
+    var EmojiPickerIcon = function () { return (React__default["default"].createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
+            React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' })))); };
+    var FileUploadIcon = function () {
+        var t = useTranslationContext('FileUploadIcon').t;
+        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("title", null, t('Attach files')),
+            React__default["default"].createElement("path", { d: 'M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z', fillRule: 'nonzero' })));
+    };
+    var FileUploadIconFlat = function () {
+        var t = useTranslationContext('FileUploadIconFlat').t;
+        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("title", null, t('Attach files')),
+            React__default["default"].createElement("path", { d: 'M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z', fillRule: 'nonzero' })));
+    };
+    var LoadingIndicatorIcon = function (_a) {
+        var _b = _a.size, size = _b === void 0 ? 20 : _b;
+        var id = React.useMemo(function () { return nanoid(); }, []);
+        return (React__default["default"].createElement("div", { className: 'str-chat__loading-indicator' },
+            React__default["default"].createElement("svg", { "data-testid": 'loading-indicator', height: size, viewBox: '0 0 30 30', width: size, xmlns: 'http://www.w3.org/2000/svg' },
+                React__default["default"].createElement("defs", null,
+                    React__default["default"].createElement("linearGradient", { id: "".concat(id, "-linear-gradient"), x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
+                        React__default["default"].createElement("stop", { offset: '0%', stopColor: '#FFF', stopOpacity: '0' }),
+                        React__default["default"].createElement("stop", { "data-testid": 'stop-color', offset: '100%', stopOpacity: '1' }))),
+                React__default["default"].createElement("path", { d: 'M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z', fill: "url(#".concat(id, "-linear-gradient)"), fillRule: 'evenodd' }))));
+    };
+    // ThemingV2 icon
+    var UploadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'attach', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("g", { clipPath: 'url(#clip0_10878_5)' },
+            React__default["default"].createElement("path", { d: 'M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z', fill: 'black' })),
+        React__default["default"].createElement("defs", null,
+            React__default["default"].createElement("clipPath", { id: 'clip0_10878_5' },
+                React__default["default"].createElement("rect", { fill: 'white', height: '24', width: '24' }))))); };
+    var CloseIcon$1 = function () { return (React__default["default"].createElement("svg", { "data-testid": 'close-no-outline', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("path", { d: 'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z', fill: 'black' }))); };
+    var RetryIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'retry', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("path", { d: 'M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z', fill: 'black' }))); };
+    var DownloadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'download', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React__default["default"].createElement("path", { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z', fill: 'black' }))); };
+    var SendIconV1 = function () {
+        var t = useTranslationContext('SendButton').t;
+        return (React__default["default"].createElement("svg", { height: '17', viewBox: '0 0 18 17', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("title", null, t('Send')),
+            React__default["default"].createElement("path", { d: 'M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z', fill: '#006cff', fillRule: 'evenodd' })));
+    };
+    var SendIconV2 = function () {
+        var t = useTranslationContext('SendButton').t;
+        return (React__default["default"].createElement("svg", { "data-testid": 'send', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+            React__default["default"].createElement("title", null, t('Send')),
+            React__default["default"].createElement("path", { d: 'M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z', fill: 'black' })));
+    };
+    var SendButton = function (_a) {
+        var sendMessage = _a.sendMessage, rest = __rest$4(_a, ["sendMessage"]);
+        var themeVersion = useChatContext('SendButton').themeVersion;
+        return (React__default["default"].createElement("button", __assign$8({ "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button' }, rest), themeVersion === '2' ? React__default["default"].createElement(SendIconV2, null) : React__default["default"].createElement(SendIconV1, null)));
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var AttachmentPreviewList = function () {
+        var _a = useMessageInputContext('AttachmentPreviewList'), fileOrder = _a.fileOrder, imageOrder = _a.imageOrder;
+        return (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-list' },
+            React__default["default"].createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' },
+                imageOrder.map(function (id) { return (React__default["default"].createElement(ImagePreviewItem, { id: id, key: id })); }),
+                fileOrder.map(function (id) { return (React__default["default"].createElement(FilePreviewItem, { id: id, key: id })); }))));
+    };
+    var ImagePreviewItem = function (_a) {
+        var _b;
+        var id = _a.id;
+        var _c = useMessageInputContext('ImagePreviewItem'), imageUploads = _c.imageUploads, removeImage = _c.removeImage, uploadImage = _c.uploadImage;
+        var handleRemove = React.useCallback(function (e) {
+            e.stopPropagation();
+            removeImage(id);
+        }, [removeImage, id]);
+        var handleRetry = React.useCallback(function () { return uploadImage(id); }, [uploadImage, id]);
+        var image = imageUploads[id];
+        var state = useFileState(image);
+        // do not display scraped attachments
+        if (!image || image.og_scrape_url)
+            return null;
+        return (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-image', "data-testid": 'attachment-preview-image' },
+            React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: state.uploading, onClick: handleRemove },
+                React__default["default"].createElement(CloseIcon$1, null)),
+            state.failed && (React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: handleRetry },
+                React__default["default"].createElement(RetryIcon, null))),
+            state.uploading && (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
+                React__default["default"].createElement(LoadingIndicatorIcon, { size: 17 }))),
+            (image.previewUri || image.url) && (React__default["default"].createElement("img", { alt: image.file.name, className: 'str-chat__attachment-preview-thumbnail', src: (_b = image.previewUri) !== null && _b !== void 0 ? _b : image.url }))));
+    };
+    var FilePreviewItem = function (_a) {
+        var id = _a.id;
+        var _b = useMessageInputContext('FilePreviewItem'), fileUploads = _b.fileUploads, removeFile = _b.removeFile, uploadFile = _b.uploadFile;
+        var handleRemove = React.useCallback(function (e) {
+            e.stopPropagation();
+            removeFile(id);
+        }, [removeFile, id]);
+        var handleRetry = React.useCallback(function () { return uploadFile(id); }, [uploadFile, id]);
+        var file = fileUploads[id];
+        var state = useFileState(file);
+        if (!file)
+            return null;
+        return (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
+            React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
+                React__default["default"].createElement(FileIcon, { filename: file.file.name, mimeType: file.file.type, version: '2' })),
+            React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: state.uploading, onClick: handleRemove },
+                React__default["default"].createElement(CloseIcon$1, null)),
+            state.failed && (React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: handleRetry },
+                React__default["default"].createElement(RetryIcon, null))),
+            React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file-end' },
+                React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file-name' }, file.file.name),
+                state.finished && (React__default["default"].createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: file.url, rel: 'noreferrer', target: '_blank' },
+                    React__default["default"].createElement(DownloadIcon, null))),
+                state.uploading && React__default["default"].createElement(LoadingIndicatorIcon, { size: 17 }))));
+    };
+
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CooldownTimer = function (_a) {
+        var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
+        var _b = React.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
+        React.useEffect(function () {
+            var countdownInterval = setInterval(function () {
+                if (seconds > 0) {
+                    setSeconds(seconds - 1);
+                }
+                else {
+                    setCooldownRemaining(0);
+                }
+            }, 1000);
+            return function () { return clearInterval(countdownInterval); };
+        });
+        return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
+    };
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useCommandTrigger = function () {
         var themeVersion = useChatContext('useCommandTrigger').themeVersion;
         var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
@@ -43585,78 +43793,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 React__default["default"].createElement(EmojiPickerComponent, { color: '#006CFF', data: emojiData, emoji: 'point_up', emojisToShowFilter: filterEmoji, native: true, onSelect: onSelectEmoji, set: 'facebook', showPreview: false, showSkinTones: false, title: t('Pick your emoji'), useButton: true }))));
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var EmojiIconLarge = function () {
-        var t = useTranslationContext('EmojiIconLarge').t;
-        return (React__default["default"].createElement("svg", { height: '28', width: '28', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("title", null, t('Open emoji picker')),
-            React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-                React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' }))));
-    };
-    var EmojiIconSmall = function () {
-        var t = useTranslationContext('EmojiIconSmall').t;
-        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("title", null, t('Open emoji picker')),
-            React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-                React__default["default"].createElement("path", { d: 'M6.7 1.42C3.73 1.42 1.42 3.73 1.42 6.7c0 2.97 2.31 5.28 5.28 5.28c2.97 0 5.28-2.31 5.28-5.28c0-2.97-2.31-5.28-5.28-5.28zM.1 6.7c0-3.63 2.97-6.6 6.6-6.6s6.6 2.97 6.6 6.6s-2.97 6.6-6.6 6.6s-6.6-2.97-6.6-6.6zM6.04 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM9.34 5.05c0 .55-.44.99-.99.99s-.99-.44-.99-.99s.44-.99.99-.99s.99.44.99.99zM3.73 7.47c.33-.22.66-.11.88.11c.33.44.88.99 1.65 1.1c.66.22 1.54.11 2.64-1.1c.22-.22.66-.33.88 0c.22.22.33.66 0 .88c-1.21 1.43-2.64 1.87-3.85 1.65c-1.1-.22-1.98-.99-2.42-1.65c-.22-.33-.11-.66.22-.99z' }))));
-    };
-    // ThemingV2 icon
-    var EmojiPickerIcon = function () { return (React__default["default"].createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-            React__default["default"].createElement("path", { d: 'M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z' })))); };
-    var FileUploadIcon = function () {
-        var t = useTranslationContext('FileUploadIcon').t;
-        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("title", null, t('Attach files')),
-            React__default["default"].createElement("path", { d: 'M7 .5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S.5 10.59.5 7 3.41.5 7 .5zm0 12c3.031 0 5.5-2.469 5.5-5.5S10.031 1.5 7 1.5A5.506 5.506 0 0 0 1.5 7c0 3.034 2.469 5.5 5.5 5.5zM7.506 3v3.494H11v1.05H7.506V11h-1.05V7.544H3v-1.05h3.456V3h1.05z', fillRule: 'nonzero' })));
-    };
-    var FileUploadIconFlat = function () {
-        var t = useTranslationContext('FileUploadIconFlat').t;
-        return (React__default["default"].createElement("svg", { height: '14', width: '14', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("title", null, t('Attach files')),
-            React__default["default"].createElement("path", { d: 'M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z', fillRule: 'nonzero' })));
-    };
-    var LoadingIndicatorIcon = function (_a) {
-        var _b = _a.size, size = _b === void 0 ? 20 : _b;
-        var id = React.useMemo(function () { return nanoid(); }, []);
-        return (React__default["default"].createElement("div", { className: 'str-chat__loading-indicator' },
-            React__default["default"].createElement("svg", { "data-testid": 'loading-indicator', height: size, viewBox: '0 0 30 30', width: size, xmlns: 'http://www.w3.org/2000/svg' },
-                React__default["default"].createElement("defs", null,
-                    React__default["default"].createElement("linearGradient", { id: "".concat(id, "-linear-gradient"), x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
-                        React__default["default"].createElement("stop", { offset: '0%', stopColor: '#FFF', stopOpacity: '0' }),
-                        React__default["default"].createElement("stop", { "data-testid": 'stop-color', offset: '100%', stopOpacity: '1' }))),
-                React__default["default"].createElement("path", { d: 'M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z', fill: "url(#".concat(id, "-linear-gradient)"), fillRule: 'evenodd' }))));
-    };
-    // ThemingV2 icon
-    var UploadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'attach', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("g", { clipPath: 'url(#clip0_10878_5)' },
-            React__default["default"].createElement("path", { d: 'M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z', fill: 'black' })),
-        React__default["default"].createElement("defs", null,
-            React__default["default"].createElement("clipPath", { id: 'clip0_10878_5' },
-                React__default["default"].createElement("rect", { fill: 'white', height: '24', width: '24' }))))); };
-    var CloseIcon$1 = function () { return (React__default["default"].createElement("svg", { "data-testid": 'close-no-outline', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("path", { d: 'M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z', fill: 'black' }))); };
-    var RetryIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'retry', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("path", { d: 'M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z', fill: 'black' }))); };
-    var DownloadIcon = function () { return (React__default["default"].createElement("svg", { "data-testid": 'download', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default["default"].createElement("path", { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z', fill: 'black' }))); };
-    var SendIconV1 = function () {
-        var t = useTranslationContext('SendButton').t;
-        return (React__default["default"].createElement("svg", { height: '17', viewBox: '0 0 18 17', width: '18', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("title", null, t('Send')),
-            React__default["default"].createElement("path", { d: 'M0 17.015l17.333-8.508L0 0v6.617l12.417 1.89L0 10.397z', fill: '#006cff', fillRule: 'evenodd' })));
-    };
-    var SendIconV2 = function () {
-        var t = useTranslationContext('SendButton').t;
-        return (React__default["default"].createElement("svg", { "data-testid": 'send', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
-            React__default["default"].createElement("title", null, t('Send')),
-            React__default["default"].createElement("path", { d: 'M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z', fill: 'black' })));
-    };
-    var SendButton = function (_a) {
-        var sendMessage = _a.sendMessage, rest = __rest$4(_a, ["sendMessage"]);
-        var themeVersion = useChatContext('SendButton').themeVersion;
-        return (React__default["default"].createElement("button", __assign$8({ "aria-label": 'Send', className: 'str-chat__send-button', "data-testid": 'send-button', onClick: sendMessage, type: 'button' }, rest), themeVersion === '2' ? React__default["default"].createElement(SendIconV2, null) : React__default["default"].createElement(SendIconV1, null)));
-    };
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};/**
      * @deprecated This component has been deprecated in favor of `AttachmentPreviewList` as this component
      * utilises outdated components from the package [`react-file-utils`](https://github.com/GetStream/react-file-utils)
@@ -45422,87 +45558,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                         themeVersion === '1' && React__default["default"].createElement(React__default["default"].Fragment, null, quotedMessageText))))));
     };
 
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useFileState = function (file) {
-        return React.useMemo(function () { return ({
-            failed: file.state === 'failed',
-            finished: file.state === 'finished',
-            uploading: file.state === 'uploading',
-        }); }, [file.state]);
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var AttachmentPreviewList = function () {
-        var _a = useMessageInputContext('AttachmentPreviewList'), fileOrder = _a.fileOrder, imageOrder = _a.imageOrder;
-        return (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-list' },
-            React__default["default"].createElement("div", { className: 'str-chat__attachment-list-scroll-container', "data-testid": 'attachment-list-scroll-container' },
-                imageOrder.map(function (id) { return (React__default["default"].createElement(ImagePreviewItem, { id: id, key: id })); }),
-                fileOrder.map(function (id) { return (React__default["default"].createElement(FilePreviewItem, { id: id, key: id })); }))));
-    };
-    var ImagePreviewItem = function (_a) {
-        var _b;
-        var id = _a.id;
-        var _c = useMessageInputContext('ImagePreviewItem'), imageUploads = _c.imageUploads, removeImage = _c.removeImage, uploadImage = _c.uploadImage;
-        var handleRemove = React.useCallback(function (e) {
-            e.stopPropagation();
-            removeImage(id);
-        }, [removeImage, id]);
-        var handleRetry = React.useCallback(function () { return uploadImage(id); }, [uploadImage, id]);
-        var image = imageUploads[id];
-        var state = useFileState(image);
-        // do not display scraped attachments
-        if (!image || image.og_scrape_url)
-            return null;
-        return (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-image', "data-testid": 'attachment-preview-image' },
-            React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'image-preview-item-delete-button', disabled: state.uploading, onClick: handleRemove },
-                React__default["default"].createElement(CloseIcon$1, null)),
-            state.failed && (React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-image', "data-testid": 'image-preview-item-retry-button', onClick: handleRetry },
-                React__default["default"].createElement(RetryIcon, null))),
-            state.uploading && (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-image-loading' },
-                React__default["default"].createElement(LoadingIndicatorIcon, { size: 17 }))),
-            (image.previewUri || image.url) && (React__default["default"].createElement("img", { alt: image.file.name, className: 'str-chat__attachment-preview-thumbnail', src: (_b = image.previewUri) !== null && _b !== void 0 ? _b : image.url }))));
-    };
-    var FilePreviewItem = function (_a) {
-        var id = _a.id;
-        var _b = useMessageInputContext('FilePreviewItem'), fileUploads = _b.fileUploads, removeFile = _b.removeFile, uploadFile = _b.uploadFile;
-        var handleRemove = React.useCallback(function (e) {
-            e.stopPropagation();
-            removeFile(id);
-        }, [removeFile, id]);
-        var handleRetry = React.useCallback(function () { return uploadFile(id); }, [uploadFile, id]);
-        var file = fileUploads[id];
-        var state = useFileState(file);
-        if (!file)
-            return null;
-        return (React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file', "data-testid": 'attachment-preview-file' },
-            React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file-icon' },
-                React__default["default"].createElement(FileIcon, { filename: file.file.name, mimeType: file.file.type, version: '2' })),
-            React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-delete', "data-testid": 'file-preview-item-delete-button', disabled: state.uploading, onClick: handleRemove },
-                React__default["default"].createElement(CloseIcon$1, null)),
-            state.failed && (React__default["default"].createElement("button", { className: 'str-chat__attachment-preview-error str-chat__attachment-preview-error-file', "data-testid": 'file-preview-item-retry-button', onClick: handleRetry },
-                React__default["default"].createElement(RetryIcon, null))),
-            React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file-end' },
-                React__default["default"].createElement("div", { className: 'str-chat__attachment-preview-file-name' }, file.file.name),
-                state.finished && (React__default["default"].createElement("a", { className: 'str-chat__attachment-preview-file-download', download: true, href: file.url, rel: 'noreferrer', target: '_blank' },
-                    React__default["default"].createElement(DownloadIcon, null))),
-                state.uploading && React__default["default"].createElement(LoadingIndicatorIcon, { size: 17 }))));
-    };
-
-    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var CooldownTimer = function (_a) {
-        var cooldownInterval = _a.cooldownInterval, setCooldownRemaining = _a.setCooldownRemaining;
-        var _b = React.useState(cooldownInterval), seconds = _b[0], setSeconds = _b[1];
-        React.useEffect(function () {
-            var countdownInterval = setInterval(function () {
-                if (seconds > 0) {
-                    setSeconds(seconds - 1);
-                }
-                else {
-                    setCooldownRemaining(0);
-                }
-            }, 1000);
-            return function () { return clearInterval(countdownInterval); };
-        });
-        return (React__default["default"].createElement("div", { className: 'str-chat__message-input-cooldown', "data-testid": 'cooldown-timer' }, seconds === 0 ? null : seconds));
-    };
-
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var MessageInputFlat = function () {
         var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
         var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
@@ -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;
@@ -47237,6 +47295,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 +47854,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,
@@ -48708,6 +48839,8 @@ 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||{};
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var DefaultSearchEmpty = function () {
         var t = useTranslationContext('SearchResults').t;
         return (React__default["default"].createElement("div", { "aria-live": 'polite', className: 'str-chat__channel-search-container-empty' },
@@ -48983,7 +49116,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.1';
+    window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var version = '10.2.0';
 
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var useChat = function (_a) {
         var _b, _c;
@@ -49201,6 +49334,8 @@ 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||{};
+
     window.StreamChat.StreamChat=StreamChat;window.StreamChat.logChatPromiseExecution=logChatPromiseExecution;window.StreamChat.Channel=Channel;window.ICAL=window.ICAL||{};var UnMemoizedDateSeparator = function (props) {
         var messageCreatedAt = props.date, formatDate = props.formatDate, _a = props.position, position = _a === void 0 ? 'right' : _a, unread = props.unread;
         var _b = useTranslationContext('DateSeparator'), t = _b.t, tDateTimeParser = _b.tDateTimeParser;
@@ -49575,7 +49710,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
         var t = useTranslationContext('usePinHandler').t;
         var canPin = !!channelCapabilities['pin-message'];
         var handlePin = function (event) { return __awaiter$3(void 0, void 0, void 0, function () {
-            var optimisticMessage, messageResponse, errorMessage, optimisticMessage, messageResponse, errorMessage;
+            var optimisticMessage, errorMessage, optimisticMessage, errorMessage;
             return __generator$3(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -49590,8 +49725,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                         updateMessage(optimisticMessage);
                         return [4 /*yield*/, client.pinMessage(message)];
                     case 2:
-                        messageResponse = _a.sent();
-                        updateMessage(messageResponse.message);
+                        _a.sent();
                         return [3 /*break*/, 4];
                     case 3:
                         _a.sent();
@@ -49607,8 +49741,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                         updateMessage(optimisticMessage);
                         return [4 /*yield*/, client.unpinMessage(message)];
                     case 6:
-                        messageResponse = _a.sent();
-                        updateMessage(messageResponse.message);
+                        _a.sent();
                         return [3 /*break*/, 8];
                     case 7:
                         _a.sent();
@@ -50060,7 +50193,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
@@ -50092,7 +50225,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))));
             });
         }, [
@@ -50100,7 +50233,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
             internalMessageProps,
             lastReceivedId,
             messageGroupStyles,
-            onMessageLoadCaptured,
             readData,
             threadList,
         ]);
@@ -50219,19 +50351,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,
@@ -50361,7 +50483,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,
@@ -50401,7 +50523,6 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
                 unsafeHTML: unsafeHTML,
             },
             messageGroupStyles: messageGroupStyles,
-            onMessageLoadCaptured: onMessageLoadCaptured,
             read: read,
             returnAllReadData: returnAllReadData,
             threadList: threadList,
@@ -52054,7 +52175,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,
@@ -52196,9 +52316,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))));
@@ -68727,6 +68851,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
     exports.Attachment = Attachment;
     exports.AttachmentActions = AttachmentActions;
     exports.AttachmentActionsContainer = AttachmentActionsContainer;
+    exports.AttachmentPreviewList = AttachmentPreviewList;
     exports.AttachmentWithinContainer = AttachmentWithinContainer;
     exports.Audio = Audio;
     exports.AudioContainer = AudioContainer;
@@ -68941,6 +69066,7 @@ var StreamChatReact = (function (exports, React, streamChat, ReactDOM) {
     exports.useChannelEditMessageHandler = useEditMessageHandler;
     exports.useChannelHiddenListener = useChannelHiddenListener;
     exports.useChannelMentionsHandler = useMentionsHandlers;
+    exports.useChannelPreviewInfo = useChannelPreviewInfo;
     exports.useChannelStateContext = useChannelStateContext;
     exports.useChannelTruncatedListener = useChannelTruncatedListener;
     exports.useChannelUpdatedListener = useChannelUpdatedListener;