stream-chat-react 10.1.0 → 10.1.2

package/dist/index.cjs.js

@@ -6832,6 +6832,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 +7389,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 +9190,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;
@@ -12648,7 +12648,7 @@ var UnMemoizedChannelList = function (props) {
  */
 var ChannelList = React__default["default"].memo(UnMemoizedChannelList);
 
-var version = '10.1.0';
+var version = '10.1.2';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -13224,7 +13224,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 +13239,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 +13255,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();
@@ -14226,16 +14224,17 @@ function useNewMessageNotification(messages, currentUserId, hasMoreNewer) {
 }
 
 function usePrependedMessagesCount(messages, hasDateSeparator) {
-    var _a;
     var firstRealMessageIndex = hasDateSeparator ? 1 : 0;
-    var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex]) === null || _a === void 0 ? void 0 : _a.id;
-    var firstMessageId = React.useRef(currentFirstMessageId);
-    var earliestMessageId = React.useRef(currentFirstMessageId);
+    var firstMessageId = React.useRef();
+    var earliestMessageId = React.useRef();
     var previousNumItemsPrepended = React.useRef(0);
     var numItemsPrepended = React.useMemo(function () {
+        var _a;
         if (!messages || !messages.length) {
+            previousNumItemsPrepended.current = 0;
             return 0;
         }
+        var currentFirstMessageId = (_a = messages === null || messages === void 0 ? void 0 : messages[firstRealMessageIndex]) === null || _a === void 0 ? void 0 : _a.id;
         // if no new messages were prepended, return early (same amount as before)
         if (currentFirstMessageId === earliestMessageId.current) {
             return previousNumItemsPrepended.current;
@@ -14252,8 +14251,9 @@ function usePrependedMessagesCount(messages, hasDateSeparator) {
                 return i;
             }
         }
-        // if no match has found, we have jumped
+        // if no match has found, we have jumped - reset the prepend item count.
         firstMessageId.current = currentFirstMessageId;
+        previousNumItemsPrepended.current = 0;
         return 0;
         // TODO: there's a bug here, the messages prop is the same array instance (something mutates it)
         // that's why the second dependency is necessary
@@ -14659,6 +14659,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;
@@ -14873,6 +14874,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;