stream-chat-react 10.1.1 → 10.2.0

package/dist/components/Attachment/AttachmentContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/AttachmentContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AASjD,OAAO,EACL,wBAAwB,EAGxB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,yBAAyB,oNA4BrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,wMAkBtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,qKAS5B,CAAC;AAEF,eAAO,MAAM,cAAc,qJAwB1B,CAAC;AAEF,eAAO,MAAM,aAAa,qJAwBzB,CAAC;AAEF,eAAO,MAAM,aAAa,4KAazB,CAAC;AACF,eAAO,MAAM,cAAc,sKAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,qJAwC1B,CAAC"}
+{"version":3,"file":"AttachmentContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/AttachmentContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AASpF,OAAO,EACL,wBAAwB,EAGxB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAIjB,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,yBAAyB,oNA+BrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,wMAkBtC,CAAC;AAoBF,eAAO,MAAM,gBAAgB,qKAwC5B,CAAC;AAEF,eAAO,MAAM,cAAc,qJA0C1B,CAAC;AAEF,eAAO,MAAM,aAAa,qJAwBzB,CAAC;AAEF,eAAO,MAAM,aAAa,4KAazB,CAAC;AACF,eAAO,MAAM,cAAc,sKAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,qJAuD1B,CAAC"}

package/dist/components/Attachment/AttachmentContainer.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 import clsx from 'clsx';
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
@@ -18,6 +18,7 @@ import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Ga
 import { Card as DefaultCard } from './Card';
 import { FileAttachment as DefaultFile } from './FileAttachment';
 import { isGalleryAttachmentType, isSvgAttachment, } from './utils';
+import { useChannelStateContext } from '../../context/ChannelStateContext';
 export var AttachmentWithinContainer = function (_a) {
     var _b;
     var _c;
@@ -32,7 +33,7 @@ export 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,
@@ -48,22 +49,68 @@ export var AttachmentActionsContainer = function (_a) {
         return null;
     return (React.createElement(AttachmentActions, __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;
+}
 export var GalleryContainer = function (_a) {
     var attachment = _a.attachment, _b = _a.Gallery, Gallery = _b === void 0 ? DefaultGallery : _b;
+    var imageElements = useRef([]);
+    var imageAttachmentSizeHandler = useChannelStateContext().imageAttachmentSizeHandler;
+    var _c = useState([]), attachmentConfigurations = _c[0], setAttachmentConfigurations = _c[1];
+    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.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'gallery' },
-        React.createElement(Gallery, { images: attachment.images || [], key: 'gallery' })));
+        React.createElement(Gallery, { images: images || [], innerRefs: imageElements, key: 'gallery' })));
 };
 export var ImageContainer = function (props) {
     var attachment = props.attachment, _a = props.Image, Image = _a === void 0 ? DefaultImage : _a;
     var componentType = 'image';
+    var imageElement = useRef(null);
+    var imageAttachmentSizeHandler = useChannelStateContext().imageAttachmentSizeHandler;
+    var _b = useState(undefined), attachmentConfiguration = _b[0], setAttachmentConfiguration = _b[1];
+    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.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
             React.createElement("div", { className: 'str-chat__attachment' },
-                React.createElement(Image, __assign({}, attachment)),
+                React.createElement(Image, __assign({}, imageConfig, { innerRef: imageElement })),
                 React.createElement(AttachmentActionsContainer, __assign({}, props)))));
     }
     return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React.createElement(Image, __assign({}, attachment))));
+        React.createElement(Image, __assign({}, imageConfig, { innerRef: imageElement }))));
 };
 export var CardContainer = function (props) {
     var attachment = props.attachment, _a = props.Card, Card = _a === void 0 ? DefaultCard : _a;
@@ -94,14 +141,19 @@ export var MediaContainer = function (props) {
     var _a;
     var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer : _b;
     var componentType = 'media';
-    if ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) {
-        return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-            React.createElement("div", { className: 'str-chat__attachment str-chat__attachment-media' },
-                React.createElement("div", { className: 'str-chat__player-wrapper' },
-                    React.createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' })),
-                React.createElement(AttachmentActionsContainer, __assign({}, props)))));
-    }
-    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
-        React.createElement("div", { className: 'str-chat__player-wrapper' },
-            React.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 = useRef(null);
+    var _d = useState(), attachmentConfiguration = _d[0], setAttachmentConfiguration = _d[1];
+    useLayoutEffect(function () {
+        if (videoElement.current && videoAttachmentSizeHandler) {
+            var config = videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail);
+            setAttachmentConfiguration(config);
+        }
+    }, [videoElement, videoAttachmentSizeHandler, attachment]);
+    var content = (React.createElement("div", { className: 'str-chat__player-wrapper', "data-testid": 'video-wrapper', ref: videoElement, style: getCssDimensionsVariables(attachment.thumb_url || '') },
+        React.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.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+        React.createElement("div", { className: 'str-chat__attachment str-chat__attachment-media' },
+            content,
+            React.createElement(AttachmentActionsContainer, __assign({}, props))))) : (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType }, content));
 };

package/dist/components/Attachment/attachment-sizing.d.ts

@@ -0,0 +1,9 @@
+import type { Attachment } from 'stream-chat';
+export declare const getImageAttachmentConfiguration: (attachment: Attachment, element: HTMLElement) => {
+    url: string;
+};
+export declare const getVideoAttachmentConfiguration: (attachment: Attachment, element: HTMLElement, shouldGenerateVideoThumbnail: boolean) => {
+    thumbUrl: string | undefined;
+    url: string;
+};
+//# sourceMappingURL=attachment-sizing.d.ts.map

package/dist/components/Attachment/attachment-sizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-sizing.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/attachment-sizing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,eAAO,MAAM,+BAA+B,eAAgB,UAAU,WAAW,WAAW;;CAc3F,CAAC;AAEF,eAAO,MAAM,+BAA+B,eAC9B,UAAU,WACb,WAAW,gCACU,OAAO;;;CAoBtC,CAAC"}

package/dist/components/Attachment/attachment-sizing.js

@@ -0,0 +1,72 @@
+export 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,
+    };
+};
+export 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());
+};

package/dist/components/Channel/Channel.d.ts

@@ -7,7 +7,7 @@ import { EmojiContextValue } from '../../context/EmojiContext';
 import type { Data as EmojiMartData } from 'emoji-mart';
 import type { MessageProps } from '../Message/types';
 import type { MessageInputProps } from '../MessageInput/MessageInput';
-import type { CustomTrigger, DefaultStreamChatGenerics, GiphyVersions } from '../../types/types';
+import type { CustomTrigger, DefaultStreamChatGenerics, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
 export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
     /** List of accepted file types */
     acceptedFiles?: string[];
@@ -61,6 +61,8 @@ export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGen
     giphyVersion?: GiphyVersions;
     /** Custom UI component to render at the top of the `MessageList` */
     HeaderComponent?: ComponentContextValue<StreamChatGenerics>['HeaderComponent'];
+    /** A custom function to provide size configuration for image attachments */
+    imageAttachmentSizeHandler?: ImageAttachmentSizeHandler;
     /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
     Input?: ComponentContextValue<StreamChatGenerics>['Input'];
     /** Custom UI component to be shown if the channel query fails, defaults to and accepts same props as: [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Loading/LoadingErrorIndicator.tsx) */
@@ -109,6 +111,8 @@ export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGen
     ReactionsList?: ComponentContextValue<StreamChatGenerics>['ReactionsList'];
     /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
     SendButton?: ComponentContextValue<StreamChatGenerics>['SendButton'];
+    /** You can turn on/off thumbnail generation for video attachments */
+    shouldGenerateVideoThumbnail?: boolean;
     /** If true, skips the message data string comparison used to memoize the current channel messages (helpful for channels with 1000s of messages) */
     skipMessageDataMemoization?: boolean;
     /** Custom UI component that displays thread's parent or other message at the top of the `MessageList`, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
@@ -121,6 +125,8 @@ export declare type ChannelProps<StreamChatGenerics extends DefaultStreamChatGen
     TriggerProvider?: ComponentContextValue<StreamChatGenerics>['TriggerProvider'];
     /** Custom UI component for the typing indicator, defaults to and accepts same props as: [TypingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TypingIndicator/TypingIndicator.tsx) */
     TypingIndicator?: ComponentContextValue<StreamChatGenerics>['TypingIndicator'];
+    /** A custom function to provide size configuration for video attachments */
+    videoAttachmentSizeHandler?: VideoAttachmentSizeHandler;
     /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
     VirtualMessage?: ComponentContextValue<StreamChatGenerics>['VirtualMessage'];
 };

package/dist/components/Channel/Channel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Channel.d.ts","sourceRoot":"","sources":["../../../src/components/Channel/Channel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Channel.d.ts","sourceRoot":"","sources":["../../../src/components/Channel/Channel.tsx"],"names":[],"mappings":"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"}

package/dist/components/Channel/Channel.js

@@ -86,6 +86,7 @@ import { hasMoreMessagesProbably, hasNotMoreMessages } from '../MessageList/util
 import defaultEmojiData from '../../stream-emoji.json';
 import { makeAddNotifications } from './utils';
 import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
+import { getImageAttachmentConfiguration, getVideoAttachmentConfiguration, } from '../Attachment/attachment-sizing';
 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 ? DefaultLoadingIndicator : _b;
     var _c = useChatContext('Channel'), contextChannel = _c.channel, channelsQueryState = _c.channelsQueryState, customClasses = _c.customClasses, theme = _c.theme;
@@ -572,7 +573,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 = useMemo(function () { return ({
         addNotification: addNotification,
         closeThread: closeThread,

package/dist/components/Channel/hooks/useCreateChannelStateContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateChannelStateContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Channel/hooks/useCreateChannelStateContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAErF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,4BAA4B;8BAIX,MAAM,EAAE;;kDA2IrC,CAAC"}
+{"version":3,"file":"useCreateChannelStateContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Channel/hooks/useCreateChannelStateContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAErF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEtE,eAAO,MAAM,4BAA4B;8BAIX,MAAM,EAAE;;kDAkJrC,CAAC"}

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { isDate, isDayOrMoment } from '../../../context/TranslationContext';
 export 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;
@@ -53,6 +53,7 @@ export var useCreateChannelStateContext = function (value) {
         hasMore: hasMore,
         hasMoreNewer: hasMoreNewer,
         highlightedMessageId: highlightedMessageId,
+        imageAttachmentSizeHandler: imageAttachmentSizeHandler,
         loading: loading,
         loadingMore: loadingMore,
         maxNumberOfFiles: maxNumberOfFiles,
@@ -64,11 +65,13 @@ export 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,
@@ -88,6 +91,7 @@ export var useCreateChannelStateContext = function (value) {
         quotedMessage,
         readUsersLength,
         readUsersLastReads,
+        shouldGenerateVideoThumbnail,
         skipMessageDataMemoization,
         suppressAutoscroll,
         thread,

package/dist/components/ChannelPreview/ChannelPreview.d.ts

@@ -15,8 +15,6 @@ export declare type ChannelPreviewUIComponentProps<StreamChatGenerics extends De
     lastMessage?: StreamMessage<StreamChatGenerics>;
     /** Latest message preview to display, will be a string or JSX element supporting markdown. */
     latestMessage?: string | JSX.Element;
-    /** Custom ChannelPreview click handler function */
-    onSelect?: (event: React.MouseEvent) => void;
     /** Number of unread Messages */
     unread?: number;
 };

package/dist/components/ChannelPreview/ChannelPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAG7E,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JAyE1B,CAAC"}
+{"version":3,"file":"ChannelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/ChannelPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,gBAAgB,EAAkB,MAAM,2BAA2B,CAAC;AAG7E,OAAO,KAAK,EAAE,OAAO,EAAS,MAAM,aAAa,CAAC;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,8BAA8B,CACxC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,CAAC,kBAAkB,CAAC,GAAG;IAC5C,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAChD,8FAA8F;IAC9F,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,6MAA6M;IAC7M,OAAO,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,sCAAsC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5C,+LAA+L;IAC/L,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C,6PAA6P;IAC7P,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClF,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC5E,2CAA2C;IAC3C,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,0JAyE1B,CAAC"}

package/dist/components/ChannelPreview/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useChannelPreviewInfo } from './useChannelPreviewInfo';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelPreview/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ChannelPreview/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/ChannelPreview/hooks/index.js

@@ -0,0 +1 @@
+export { useChannelPreviewInfo } from './useChannelPreviewInfo';

package/dist/components/ChannelPreview/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ChannelPreview';
 export * from './ChannelPreviewMessenger';
+export * from './hooks';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ChannelPreview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChannelPreview/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/components/ChannelPreview/index.js

@@ -1,3 +1,4 @@
 export * from './ChannelPreview';
 export * from './ChannelPreviewMessenger';
+export * from './hooks';
 export * from './utils';

package/dist/components/Gallery/Gallery.d.ts

@@ -1,10 +1,15 @@
+import { CSSProperties, MutableRefObject } from 'react';
 import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type GalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    images: {
+    images: (({
         image_url?: string | undefined;
         thumb_url?: string | undefined;
-    }[] | Attachment<StreamChatGenerics>[];
+    } | Attachment<StreamChatGenerics>) & {
+        previewUrl?: string;
+        style?: CSSProperties;
+    })[];
+    innerRefs?: MutableRefObject<(HTMLElement | null)[]>;
 };
 /**
  * Displays images in a simple responsive grid with a light box to view the images.

package/dist/components/Gallery/Gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EACF;QACE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAChC,EAAE,GACH,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;CACtC,CAAC;AAsEF;;GAEG;AACH,eAAO,MAAM,OAAO,4IAA4D,CAAC"}
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,gBAAgB,EAAY,MAAM,OAAO,CAAC;AASzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,YAAY,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EAAE,CAAC,CACL;QACE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAChC,GACD,UAAU,CAAC,kBAAkB,CAAC,CACjC,GAAG;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAE,CAAC,EAAE,CAAC;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;CACtD,CAAC;AAkFF;;GAEG;AACH,eAAO,MAAM,OAAO,4IAA4D,CAAC"}

package/dist/components/Gallery/Gallery.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import { Modal } from '../Modal';
@@ -5,7 +16,7 @@ import { ModalGallery as DefaultModalGallery } from './ModalGallery';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 var UnMemoizedGallery = function (props) {
-    var images = props.images;
+    var images = props.images, innerRefs = props.innerRefs;
     var _a = useState(0), index = _a[0], setIndex = _a[1];
     var _b = useState(false), modalOpen = _b[0], setModalOpen = _b[1];
     var _c = useComponentContext('Gallery').ModalGallery, ModalGallery = _c === void 0 ? DefaultModalGallery : _c;
@@ -22,13 +33,13 @@ var UnMemoizedGallery = function (props) {
         }
     };
     var renderImages = images.slice(0, countImagesDisplayedInPreview).map(function (image, i) {
-        return i === lastImageIndexInPreview && images.length > countImagesDisplayedInPreview ? (React.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.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.createElement("p", null, t('{{ imageCount }} more', {
                 imageCount: images.length - countImagesDisplayedInPreview,
             })))) : (React.createElement("button", { className: 'str-chat__gallery-image', "data-testid": 'gallery-image', key: "gallery-image-".concat(i), onClick: function () { return toggleModal(i); } },
-            React.createElement("img", { alt: 'User uploaded content', src: image.image_url || image.thumb_url })));
+            React.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,

package/dist/components/Gallery/Image.d.ts

@@ -1,7 +1,11 @@
+import { CSSProperties, MutableRefObject } from 'react';
 import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics, Dimensions } from '../../types/types';
 export declare type ImageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     dimensions?: Dimensions;
+    innerRef?: MutableRefObject<HTMLImageElement | null>;
+    previewUrl?: string;
+    style?: CSSProperties;
 } & ({
     /** The text fallback for the image */
     fallback?: string;

package/dist/components/Gallery/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Image.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/E,oBAAY,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IAAE,UAAU,CAAC,EAAE,UAAU,CAAA;CAAE,GAAG,CAC9B;IACE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD,UAAU,CAAC,kBAAkB,CAAC,CACjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,0IA8B1B,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Image.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,gBAAgB,EAAY,MAAM,OAAO,CAAC;AAOzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/E,oBAAY,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,CACA;IACE,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GACD,UAAU,CAAC,kBAAkB,CAAC,CACjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,0IAgC1B,CAAC"}

package/dist/components/Gallery/Image.js

@@ -18,13 +18,13 @@ import { useComponentContext } from '../../context';
  * A simple component that displays an image.
  */
 export 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 = useState(false), modalIsOpen = _b[0], setModalIsOpen = _b[1];
     var _c = useComponentContext('ImageComponent').ModalGallery, ModalGallery = _c === void 0 ? DefaultModalGallery : _c;
-    var imageSrc = sanitizeUrl(image_url || thumb_url);
+    var imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);
     var toggleModal = function () { return setModalIsOpen(function (modalIsOpen) { return !modalIsOpen; }); };
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", __assign({ alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, tabIndex: 0 }, dimensions)),
+        React.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.createElement(Modal, { onClose: toggleModal, open: modalIsOpen },
             React.createElement(ModalGallery, { images: [props], index: 0 }))));
 };

package/dist/components/LoadMore/LoadMorePaginator.d.ts

@@ -3,10 +3,13 @@ import { LoadMoreButtonProps } from './LoadMoreButton';
 export declare type LoadMorePaginatorProps = {
     /** callback to load the next page */
     loadNextPage: () => void;
+    /** Boolean for if there is a next page to load */
     hasNextPage?: boolean;
+    /** A UI button component that handles pagination logic */
     LoadMoreButton?: React.ComponentType<LoadMoreButtonProps>;
-    /** indicates if there there's currently any refreshing taking place */
+    /** indicates if there's currently any refreshing taking place */
     refreshing?: boolean;
+    /** indicates if the `LoadMoreButton` should be displayed at the top of the list of channels instead of the bottom of the list (the default) */
     reverse?: boolean;
 };
 export declare const UnMemoizedLoadMorePaginator: (props: PropsWithChildren<LoadMorePaginatorProps>) => JSX.Element;

package/dist/components/LoadMore/LoadMorePaginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMorePaginator.d.ts","sourceRoot":"","sources":["../../../src/components/LoadMore/LoadMorePaginator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAA2C,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEhG,oBAAY,sBAAsB,GAAG;IACnC,qCAAqC;IACrC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC1D,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,kBAAkB,sBAAsB,CAAC,gBAiB3F,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAnBqB,kBAAkB,sBAAsB,CAAC,gBAqBrD,CAAC"}
+{"version":3,"file":"LoadMorePaginator.d.ts","sourceRoot":"","sources":["../../../src/components/LoadMore/LoadMorePaginator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAA2C,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEhG,oBAAY,sBAAsB,GAAG;IACnC,qCAAqC;IACrC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC1D,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+IAA+I;IAC/I,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,kBAAkB,sBAAsB,CAAC,gBAiB3F,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAnBqB,kBAAkB,sBAAsB,CAAC,gBAqBrD,CAAC"}

package/dist/components/Message/hooks/usePinHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePinHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/usePinHandler.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAI7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAGtE,oBAAY,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAGF,oBAAY,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACxF,MAAM,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAClC,GAAG;IACF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;CAC/B,CAAC;AAEF,oBAAY,uBAAuB,CACjC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,KAAK,MAAM,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,eAAO,MAAM,aAAa,gJAKV,cAAc;;;CAgE7B,CAAC"}
+{"version":3,"file":"usePinHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/Message/hooks/usePinHandler.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAA0B,MAAM,sCAAsC,CAAC;AAI7F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAGtE,oBAAY,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAGF,oBAAY,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACxF,MAAM,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAClC,GAAG;IACF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;CAC/B,CAAC;AAEF,oBAAY,uBAAuB,CACjC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,KAAK,MAAM,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC;CACxE,CAAC;AAEF,eAAO,MAAM,aAAa,gJAKV,cAAc;;;CA4D7B,CAAC"}

package/dist/components/Message/hooks/usePinHandler.js

@@ -63,7 +63,7 @@ notifications) {
     var t = useTranslationContext('usePinHandler').t;
     var canPin = !!channelCapabilities['pin-message'];
     var handlePin = function (event) { return __awaiter(void 0, void 0, void 0, function () {
-        var optimisticMessage, messageResponse, e_1, errorMessage, optimisticMessage, messageResponse, e_2, errorMessage;
+        var optimisticMessage, e_1, errorMessage, optimisticMessage, e_2, errorMessage;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -78,8 +78,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:
                     e_1 = _a.sent();
@@ -95,8 +94,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:
                     e_2 = _a.sent();

package/dist/components/MessageInput/hooks/useFileUploads.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFileUploads.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useFileUploads.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,cAAc;qBAoBW,MAAM;qBAJN,MAAM;CAiF3C,CAAC"}
+{"version":3,"file":"useFileUploads.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useFileUploads.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,cAAc;qBAoBW,MAAM;qBAJN,MAAM;CAkF3C,CAAC"}

package/dist/components/MessageInput/hooks/useFileUploads.js

@@ -116,6 +116,7 @@ export var useFileUploads = function (props, state, dispatch) {
                         dispatch({
                             id: id,
                             state: 'finished',
+                            thumb_url: response.thumb_url,
                             type: 'setFileUpload',
                             url: response.file,
                         });