stream-chat-react 10.1.1 → 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,
@@ -6832,6 +6887,159 @@ var CUSTOM_MESSAGE_TYPE = {
     intro: 'channel.intro',
 };
 
+var useFileState = function (file) {
+    return React.useMemo(function () { return ({
+        failed: file.state === 'failed',
+        finished: file.state === 'finished',
+        uploading: file.state === 'uploading',
+    }); }, [file.state]);
+};
+
+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.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(_a, ["sendMessage"]);
+    var themeVersion = useChatContext('SendButton').themeVersion;
+    return (React__default["default"].createElement("button", __assign({ "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)));
+};
+
+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(reactFileUtils.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 }))));
+};
+
+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));
+};
+
 var useCommandTrigger = function () {
     var themeVersion = useChatContext('useCommandTrigger').themeVersion;
     var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
@@ -7236,78 +7444,6 @@ var EmojiPicker = function (_a) {
             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 }))));
 };
 
-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.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(_a, ["sendMessage"]);
-    var themeVersion = useChatContext('SendButton').themeVersion;
-    return (React__default["default"].createElement("button", __assign({ "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)));
-};
-
 /**
  * @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)
@@ -9109,87 +9245,6 @@ var QuotedMessagePreview = function (_a) {
                     themeVersion === '1' && React__default["default"].createElement(React__default["default"].Fragment, null, quotedMessageText))))));
 };
 
-var useFileState = function (file) {
-    return React.useMemo(function () { return ({
-        failed: file.state === 'failed',
-        finished: file.state === 'finished',
-        uploading: file.state === 'uploading',
-    }); }, [file.state]);
-};
-
-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(reactFileUtils.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 }))));
-};
-
-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));
-};
-
 var MessageInputFlat = function () {
     var quotedMessage = useChannelStateContext('MessageInputFlat').quotedMessage;
     var setQuotedMessage = useChannelActionContext('MessageInputFlat').setQuotedMessage;
@@ -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.1';
+var version = '10.2.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -13224,7 +13355,7 @@ notifications) {
     var t = useTranslationContext('usePinHandler').t;
     var canPin = !!channelCapabilities['pin-message'];
     var handlePin = function (event) { return __awaiter$1(void 0, void 0, void 0, function () {
-        var optimisticMessage, messageResponse, errorMessage, optimisticMessage, messageResponse, errorMessage;
+        var optimisticMessage, errorMessage, optimisticMessage, errorMessage;
         return __generator$1(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -13239,8 +13370,7 @@ notifications) {
                     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();
@@ -13256,8 +13386,7 @@ notifications) {
                     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();
@@ -13703,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
@@ -13735,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))));
         });
     }, [
@@ -13743,7 +13872,6 @@ var useMessageListElements = function (props) {
         internalMessageProps,
         lastReceivedId,
         messageGroupStyles,
-        onMessageLoadCaptured,
         readData,
         threadList,
     ]);
@@ -13862,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,
@@ -14002,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,
@@ -14042,7 +14160,6 @@ var MessageListWithContext = function (props) {
             unsafeHTML: unsafeHTML,
         },
         messageGroupStyles: messageGroupStyles,
-        onMessageLoadCaptured: onMessageLoadCaptured,
         read: read,
         returnAllReadData: returnAllReadData,
         threadList: threadList,
@@ -14486,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,
@@ -14624,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))));
@@ -14661,6 +14781,7 @@ exports.ActionsIcon = ActionsIcon;
 exports.Attachment = Attachment;
 exports.AttachmentActions = AttachmentActions;
 exports.AttachmentActionsContainer = AttachmentActionsContainer;
+exports.AttachmentPreviewList = AttachmentPreviewList;
 exports.AttachmentWithinContainer = AttachmentWithinContainer;
 exports.Audio = Audio;
 exports.AudioContainer = AudioContainer;
@@ -14875,6 +14996,7 @@ exports.useChannelDeletedListener = useChannelDeletedListener;
 exports.useChannelEditMessageHandler = useEditMessageHandler;
 exports.useChannelHiddenListener = useChannelHiddenListener;
 exports.useChannelMentionsHandler = useMentionsHandlers;
+exports.useChannelPreviewInfo = useChannelPreviewInfo;
 exports.useChannelStateContext = useChannelStateContext;
 exports.useChannelTruncatedListener = useChannelTruncatedListener;
 exports.useChannelUpdatedListener = useChannelUpdatedListener;