stream-chat-react 12.0.0-rc.1 → 12.0.0-rc.3

package/dist/components/MessageInput/hooks/utils.d.ts

@@ -1,4 +1,3 @@
-import type { ImageUpload } from '../../ReactFileUtilities';
 import type { UserResponse } from 'stream-chat';
 import type { ChannelActionContextValue } from '../../../context/ChannelActionContext';
 import type { ChatContextValue } from '../../../context/ChatContext';
@@ -19,7 +18,7 @@ export type SearchLocalUserParams<StreamChatGenerics extends DefaultStreamChatGe
 export declare const searchLocalUsers: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: SearchLocalUserParams<StreamChatGenerics>) => UserResponse<StreamChatGenerics>[];
 type CheckUploadPermissionsParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     addNotification: ChannelActionContextValue<StreamChatGenerics>['addNotification'];
-    file: ImageUpload['file'];
+    file: File;
     getAppSettings: ChatContextValue<StreamChatGenerics>['getAppSettings'];
     t: TranslationContextValue['t'];
     uploadType: 'image' | 'file';

package/dist/components/MessageInput/icons.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const EmojiPickerIcon: () => React.JSX.Element;
 export declare const LoadingIndicatorIcon: ({ size }: {
     size?: number;
 }) => React.JSX.Element;

package/dist/components/MessageInput/icons.js

@@ -1,9 +1,6 @@
 import React, { useMemo } from 'react';
 import { nanoid } from 'nanoid';
 import { useTranslationContext } from '../../context/TranslationContext';
-export const EmojiPickerIcon = () => (React.createElement("svg", { preserveAspectRatio: 'xMinYMin', viewBox: '0 0 28 28', width: '100%', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("g", { clipRule: 'evenodd', fillRule: 'evenodd' },
-        React.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' }))));
 export const LoadingIndicatorIcon = ({ size = 20 }) => {
     const id = useMemo(() => nanoid(), []);
     return (React.createElement("div", { className: 'str-chat__loading-indicator' },

package/dist/components/MessageInput/types.d.ts

@@ -1,36 +1,6 @@
 import type { Attachment, DefaultGenerics, ExtendableGenerics, OGAttachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export type AttachmentLoadingState = 'uploading' | 'finished' | 'failed';
-export type FileUpload = {
-    file: {
-        name: string;
-        lastModified?: number;
-        lastModifiedDate?: Date;
-        size?: number;
-        type?: string;
-        uri?: string;
-    };
-    id: string;
-    state: AttachmentLoadingState;
-    thumb_url?: string;
-    url?: string;
-};
-export type ImageUpload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    file: {
-        name: string;
-        height?: number;
-        lastModified?: number;
-        lastModifiedDate?: Date;
-        size?: number;
-        type?: string;
-        uri?: string;
-        width?: number;
-    };
-    id: string;
-    state: AttachmentLoadingState;
-    previewUri?: string;
-    url?: string;
-} & Pick<Attachment<StreamChatGenerics>, 'og_scrape_url' | 'title' | 'title_link' | 'author_name' | 'text'>;
 export declare enum LinkPreviewState {
     /** Link preview has been dismissed using MessageInputContextValue.dismissLinkPreview **/
     DISMISSED = "dismissed",
@@ -111,4 +81,7 @@ export type LocalImageAttachment<StreamChatGenerics extends DefaultStreamChatGen
 export type LocalFileAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = LocalAttachmentCast<FileAttachment<StreamChatGenerics>, LocalAttachmentUploadMetadata & CustomLocalMetadata>;
 export type AnyLocalAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = LocalAttachmentCast<Attachment<StreamChatGenerics>, LocalAttachmentMetadata<CustomLocalMetadata>>;
 export type LocalAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = AnyLocalAttachment<StreamChatGenerics> | LocalFileAttachment<StreamChatGenerics> | LocalImageAttachment<StreamChatGenerics> | LocalAudioAttachment<StreamChatGenerics> | LocalVideoAttachment<StreamChatGenerics> | LocalVoiceRecordingAttachment<StreamChatGenerics>;
+export type LocalAttachmentToUpload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, CustomLocalMetadata = Record<string, unknown>> = Partial<Attachment<StreamChatGenerics>> & {
+    localMetadata: Partial<BaseLocalAttachmentMetadata> & LocalAttachmentUploadMetadata & CustomLocalMetadata;
+};
 export {};

package/dist/components/MessageList/MessageList.d.ts

@@ -11,7 +11,7 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     /** Disables the injection of date separator components in MessageList, defaults to `false` */
     disableDateSeparator?: boolean;
     /** Callback function to set group styles for each message */
-    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
+    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
     /** Whether the list has more items to load */
     hasMore?: boolean;
     /** Element to be rendered at the top of the thread message list. By default, these are the Message and ThreadStart components */
@@ -34,6 +34,8 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
     /** Function called when newer messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     loadMoreNewer?: ChannelActionContextValue['loadMoreNewer'] | (() => Promise<void>);
+    /** Maximum time in milliseconds that should occur between messages to still consider them grouped together */
+    maxTimeBetweenGroupedMessages?: number;
     /** The limit to use when paginating messages */
     messageLimit?: number;
     /** The messages to render in the list, defaults to messages stored in [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */

package/dist/components/MessageList/MessageList.js

@@ -19,7 +19,7 @@ import { MessageListMainPanel } from './MessageListMainPanel';
 import { defaultRenderMessages } from './renderMessages';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, DEFAULT_NEXT_CHANNEL_PAGE_SIZE, } from '../../constants/limits';
 const MessageListWithContext = (props) => {
-    const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hideDeletedMessages = false, hideNewMessageSeparator = false, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, messageActions = Object.keys(MESSAGE_ACTIONS), messages = [], notifications, noGroupByUser = false, pinPermissions = defaultPinPermissions, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
+    const { channel, channelUnreadUiState, disableDateSeparator = false, groupStyles, hideDeletedMessages = false, hideNewMessageSeparator = false, internalInfiniteScrollProps: { threshold: loadMoreScrollThreshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, ...restInternalInfiniteScrollProps } = {}, maxTimeBetweenGroupedMessages, messageActions = Object.keys(MESSAGE_ACTIONS), messages = [], notifications, noGroupByUser = false, pinPermissions = defaultPinPermissions, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     returnAllReadData = false, threadList = false, unsafeHTML = false, headerPosition, read, renderMessages = defaultRenderMessages, reviewProcessedMessage, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, loadMore: loadMoreCallback, loadMoreNewer: loadMoreNewerCallback, hasMoreNewer = false, reactionDetailsSort, showUnreadNotificationAlways, sortReactionDetails, sortReactions, suppressAutoscroll, highlightedMessageId, jumpToLatestMessage = () => Promise.resolve(), } = props;
     const [listElement, setListElement] = React.useState(null);
     const [ulElement, setUlElement] = React.useState(null);
@@ -51,6 +51,7 @@ const MessageListWithContext = (props) => {
         headerPosition,
         hideDeletedMessages,
         hideNewMessageSeparator,
+        maxTimeBetweenGroupedMessages,
         messages,
         noGroupByUser,
         reviewProcessedMessage,

package/dist/components/MessageList/VirtualizedMessageList.d.ts

@@ -51,7 +51,7 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
     /** Disables the injection of date separator components in MessageList, defaults to `true` */
     disableDateSeparator?: boolean;
     /** Callback function to set group styles for each message */
-    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
+    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
     /** Whether or not the list has more items to load */
     hasMore?: boolean;
     /** Whether or not the list has newer items to load */
@@ -75,6 +75,8 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
     loadMore?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
     /** Function called when new messages are to be loaded, defaults to function stored in [ChannelActionContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_action_context/) */
     loadMoreNewer?: ChannelActionContextValue['loadMore'] | (() => Promise<void>);
+    /** Maximum time in milliseconds that should occur between messages to still consider them grouped together */
+    maxTimeBetweenGroupedMessages?: number;
     /** Custom UI component to display a message, defaults to and accepts same props as [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
     Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
     /** The limit to use when paginating messages */

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -46,7 +46,7 @@ function calculateInitialTopMostItemIndex(messages, highlightedMessageId) {
     return messages.length - 1;
 }
 const VirtualizedMessageListWithContext = (props) => {
-    const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, 
+    const { additionalMessageInputProps, additionalVirtuosoProps = {}, channel, channelUnreadUiState, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, defaultItemHeight, disableDateSeparator = true, formatDate, groupStyles, hasMoreNewer, head, hideDeletedMessages = false, hideNewMessageSeparator = false, highlightedMessageId, jumpToLatestMessage, loadingMore, loadMore, loadMoreNewer, maxTimeBetweenGroupedMessages, Message: MessageUIComponentFromProps, messageActions, messageLimit = DEFAULT_NEXT_CHANNEL_PAGE_SIZE, messages, notifications, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     overscan = 0, read, returnAllReadData = false, reviewProcessedMessage, scrollSeekPlaceHolder, scrollToLatestMessageOnFocus = false, separateGiphyPreview = false, shouldGroupByUser = false, showUnreadNotificationAlways, reactionDetailsSort, sortReactionDetails, sortReactions, stickToBottomScrollBehavior = 'smooth', suppressAutoscroll, threadList, } = props;
     const { components: virtuosoComponentsFromProps, ...overridingVirtuosoProps } = additionalVirtuosoProps;
@@ -106,14 +106,14 @@ const VirtualizedMessageListWithContext = (props) => {
     ]);
     const groupStylesFn = groupStyles || getGroupStyles;
     const messageGroupStyles = useMemo(() => processedMessages.reduce((acc, message, i) => {
-        const style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser);
+        const style = groupStylesFn(message, processedMessages[i - 1], processedMessages[i + 1], !shouldGroupByUser, maxTimeBetweenGroupedMessages);
         if (style)
             acc[message.id] = style;
         return acc;
     }, {}), 
     // processedMessages were incorrectly rebuilt with a new object identity at some point, hence the .length usage
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [processedMessages.length, shouldGroupByUser, groupStylesFn]);
+    [maxTimeBetweenGroupedMessages, processedMessages.length, shouldGroupByUser, groupStylesFn]);
     const { atBottom, isMessageListScrolledToBottom, newMessagesNotification, setIsMessageListScrolledToBottom, setNewMessagesNotification, } = useNewMessageNotification(processedMessages, client.userID, hasMoreNewer);
     useMarkRead({
         isMessageListScrolledToBottom,

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -47,7 +47,7 @@ export const EmptyPlaceholder = ({ context, }) => {
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
 export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
-    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
+    const { additionalMessageInputProps, closeReactionSelectorOnClick, customMessageActions, customMessageRenderer, DateSeparator, firstUnreadMessageId, formatDate, lastReadDate, lastReadMessageId, lastReceivedMessageId, Message: MessageUIComponent, messageActions, messageGroupStyles, MessageSystem, numItemsPrepended, ownMessagesReadByOthers, processedMessages: messageList, reactionDetailsSort, shouldGroupByUser, sortReactionDetails, sortReactions, unreadMessageCount = 0, UnreadMessagesSeparator, virtuosoRef, } = virtuosoContext;
     const streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -66,6 +66,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
         message.user?.id === messageList[streamMessageIndex - 1].user?.id;
     const maybePrevMessage = messageList[streamMessageIndex - 1];
     const maybeNextMessage = messageList[streamMessageIndex + 1];
+    // FIXME: firstOfGroup & endOfGroup should be derived from groupStyles which apply a more complex logic
     const firstOfGroup = shouldGroupByUser &&
         (message.user?.id !== maybePrevMessage?.user?.id ||
             (maybePrevMessage && isMessageEdited(maybePrevMessage)));
@@ -88,7 +89,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     return (React.createElement(React.Fragment, null,
         showUnreadSeparatorAbove && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };

package/dist/components/MessageList/hooks/MessageList/useEnrichedMessages.d.ts

@@ -9,8 +9,9 @@ export declare const useEnrichedMessages: <StreamChatGenerics extends DefaultStr
     hideNewMessageSeparator: boolean;
     messages: StreamMessage<StreamChatGenerics>[];
     noGroupByUser: boolean;
-    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
+    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
     headerPosition?: number;
+    maxTimeBetweenGroupedMessages?: number;
     reviewProcessedMessage?: ProcessMessagesParams<StreamChatGenerics>['reviewProcessedMessage'];
 }) => {
     messageGroupStyles: Record<string, GroupStyle>;

package/dist/components/MessageList/hooks/MessageList/useEnrichedMessages.js

@@ -3,7 +3,7 @@ import { getGroupStyles, insertIntro, processMessages, } from '../../utils';
 import { useChatContext } from '../../../../context/ChatContext';
 import { useComponentContext } from '../../../../context/ComponentContext';
 export const useEnrichedMessages = (args) => {
-    const { channel, disableDateSeparator, groupStyles, headerPosition, hideDeletedMessages, hideNewMessageSeparator, messages, noGroupByUser, reviewProcessedMessage, } = args;
+    const { channel, disableDateSeparator, groupStyles, headerPosition, hideDeletedMessages, hideNewMessageSeparator, maxTimeBetweenGroupedMessages, messages, noGroupByUser, reviewProcessedMessage, } = args;
     const { client } = useChatContext('useEnrichedMessages');
     const { HeaderComponent } = useComponentContext('useEnrichedMessages');
     const lastRead = useMemo(() => channel.lastRead?.(), [channel]);
@@ -24,12 +24,12 @@ export const useEnrichedMessages = (args) => {
     }
     const groupStylesFn = groupStyles || getGroupStyles;
     const messageGroupStyles = useMemo(() => messagesWithDates.reduce((acc, message, i) => {
-        const style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser);
+        const style = groupStylesFn(message, messagesWithDates[i - 1], messagesWithDates[i + 1], noGroupByUser, maxTimeBetweenGroupedMessages);
         if (style)
             acc[message.id] = style;
         return acc;
     }, {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [messagesWithDates, noGroupByUser]);
+    [maxTimeBetweenGroupedMessages, messagesWithDates, noGroupByUser]);
     return { messageGroupStyles, messages: messagesWithDates };
 };

package/dist/components/MessageList/utils.d.ts

@@ -57,7 +57,7 @@ export declare const getReadStates: <StreamChatGenerics extends DefaultStreamCha
 }> | undefined, returnAllReadData: boolean) => Record<string, UserResponse<StreamChatGenerics>[]>;
 export declare const insertIntro: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], headerPosition?: number) => StreamMessage<StreamChatGenerics>[];
 export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
-export declare const getGroupStyles: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean) => GroupStyle;
+export declare const getGroupStyles: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
 export declare const hasMoreMessagesProbably: (returnedCountMessages: number, limit: number) => boolean;
 export declare const hasNotMoreMessages: (returnedCountMessages: number, limit: number) => boolean;
 type DateSeparatorMessage = {

package/dist/components/MessageList/utils.js

@@ -179,7 +179,7 @@ export const insertIntro = (messages, headerPosition) => {
     }
     return newMessages;
 };
-export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser) => {
+export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser, maxTimeBetweenGroupedMessages) => {
     if (message.customType === CUSTOM_MESSAGE_TYPE.date)
         return '';
     if (message.customType === CUSTOM_MESSAGE_TYPE.intro)
@@ -190,22 +190,32 @@ export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByU
         previousMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
         previousMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
         previousMessage.type === 'system' ||
+        previousMessage.type === 'error' ||
         previousMessage.attachments?.length !== 0 ||
         message.user?.id !== previousMessage.user?.id ||
-        previousMessage.type === 'error' ||
         previousMessage.deleted_at ||
         (message.reaction_groups && Object.keys(message.reaction_groups).length > 0) ||
-        isMessageEdited(previousMessage);
+        isMessageEdited(previousMessage) ||
+        (maxTimeBetweenGroupedMessages !== undefined &&
+            previousMessage.created_at &&
+            message.created_at &&
+            new Date(message.created_at).getTime() - new Date(previousMessage.created_at).getTime() >
+                maxTimeBetweenGroupedMessages);
     const isBottomMessage = !nextMessage ||
+        nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
         nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
         nextMessage.type === 'system' ||
-        nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
+        nextMessage.type === 'error' ||
         nextMessage.attachments?.length !== 0 ||
         message.user?.id !== nextMessage.user?.id ||
-        nextMessage.type === 'error' ||
         nextMessage.deleted_at ||
         (nextMessage.reaction_groups && Object.keys(nextMessage.reaction_groups).length > 0) ||
-        isMessageEdited(message);
+        isMessageEdited(message) ||
+        (maxTimeBetweenGroupedMessages !== undefined &&
+            nextMessage.created_at &&
+            message.created_at &&
+            new Date(nextMessage.created_at).getTime() - new Date(message.created_at).getTime() >
+                maxTimeBetweenGroupedMessages);
     if (!isTopMessage && !isBottomMessage) {
         if (message.deleted_at || message.type === 'error')
             return 'single';

package/dist/components/ReactFileUtilities/types.d.ts

@@ -1,31 +1,2 @@
 export type RecordedMediaType = 'audio' | 'video';
-export type UploadState = 'uploading' | 'finished' | 'failed';
 export type FileLike = Blob | File;
-export type UploadInfo = {
-    id: string;
-    state: UploadState;
-    url?: string;
-};
-export type FileUpload = {
-    file: {
-        name: string;
-        lastModified?: number;
-        lastModifiedDate?: Date;
-        size?: number;
-        type?: string;
-        uri?: string;
-    };
-} & UploadInfo;
-export type ImageUpload = {
-    file: {
-        name: string;
-        height?: number;
-        lastModified?: number;
-        lastModifiedDate?: Date;
-        size?: number;
-        type?: string;
-        uri?: string;
-        width?: number;
-    };
-    previewUri?: string;
-} & UploadInfo;

package/dist/components/ReactFileUtilities/utils.d.ts

@@ -3,6 +3,7 @@ import { ChangeEvent } from 'react';
 export declare const useHandleFileChangeWrapper: (resetOnChange?: boolean, handler?: (files: Array<File>) => void) => ({ currentTarget }: ChangeEvent<HTMLInputElement>) => void;
 export declare function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean;
 export declare function dataTransferItemsToFiles(items?: DataTransferItem[]): Promise<FileLike[]>;
+export declare const isBlobButNotFile: (obj: unknown) => obj is Blob;
 export declare const createFileFromBlobs: ({ blobsArray, fileName, mimeType, }: {
     blobsArray: Blob[];
     fileName: string;
@@ -11,3 +12,4 @@ export declare const createFileFromBlobs: ({ blobsArray, fileName, mimeType, }:
 export declare const getExtensionFromMimeType: (mimeType: string) => string | null;
 export declare const getRecordedMediaTypeFromMimeType: (mimeType: string) => RecordedMediaType | null;
 export declare const readFileAsArrayBuffer: (file: File) => Promise<ArrayBuffer>;
+export declare const generateFileName: (mimeType: string) => string;

package/dist/components/ReactFileUtilities/utils.js

@@ -77,6 +77,7 @@ const extractImageSources = (s) => {
     const imageTags = new DOMParser().parseFromString(s, 'text/html').getElementsByTagName('img');
     return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
 };
+export const isBlobButNotFile = (obj) => obj instanceof Blob && !(obj instanceof File);
 export const createFileFromBlobs = ({ blobsArray, fileName, mimeType, }) => {
     const concatenatedBlob = new Blob(blobsArray, { type: mimeType });
     return new File([concatenatedBlob], fileName, { type: concatenatedBlob.type });
@@ -99,3 +100,4 @@ export const readFileAsArrayBuffer = (file) => new Promise((resolve, reject) =>
     };
     fileReader.readAsArrayBuffer(file);
 });
+export const generateFileName = (mimeType) => `file_${new Date().toISOString()}.${getExtensionFromMimeType(mimeType)}`;

package/dist/context/ChannelActionContext.d.ts

@@ -31,9 +31,9 @@ export type ChannelActionContextValue<StreamChatGenerics extends DefaultStreamCh
     deleteMessage: (message: StreamMessage<StreamChatGenerics>) => Promise<MessageResponse<StreamChatGenerics>>;
     dispatch: React.Dispatch<ChannelStateReducerAction<StreamChatGenerics>>;
     editMessage: (message: UpdatedMessage<StreamChatGenerics>, options?: UpdateMessageOptions) => Promise<UpdateMessageAPIResponse<StreamChatGenerics> | void>;
-    jumpToFirstUnreadMessage: (queryMessageLimit?: number) => Promise<void>;
+    jumpToFirstUnreadMessage: (queryMessageLimit?: number, highlightDuration?: number) => Promise<void>;
     jumpToLatestMessage: () => Promise<void>;
-    jumpToMessage: (messageId: string, limit?: number) => Promise<void>;
+    jumpToMessage: (messageId: string, limit?: number, highlightDuration?: number) => Promise<void>;
     loadMore: (limit?: number) => Promise<number>;
     loadMoreNewer: (limit?: number) => Promise<number>;
     loadMoreThread: () => Promise<void>;

package/dist/context/MessageInputContext.d.ts

@@ -17,14 +17,10 @@ export declare const MessageInputContext: React.Context<(MessageInputState & imp
     onSelectUser: (item: import("stream-chat").UserResponse<DefaultStreamChatGenerics>) => void;
     recordingController: import("..").RecordingController<DefaultStreamChatGenerics>;
     removeAttachments: (ids: string[]) => void;
-    removeFile: (id: string) => void;
-    removeImage: (id: string) => void;
     textareaRef: React.MutableRefObject<HTMLTextAreaElement | null | undefined>;
     uploadAttachment: (attachment: import("../components/MessageInput").LocalAttachment<DefaultStreamChatGenerics>) => Promise<import("../components/MessageInput").LocalAttachment<DefaultStreamChatGenerics> | undefined>;
-    uploadFile: (id: string) => void;
-    uploadImage: (id: string) => void;
     uploadNewFiles: (files: FileList | File[]) => void;
-    upsertAttachments: (attachments: (import("stream-chat").Attachment<DefaultStreamChatGenerics> | import("../components/MessageInput").LocalAttachment<DefaultStreamChatGenerics>)[]) => void;
+    upsertAttachments: (attachments: (import("../components/MessageInput").LocalAttachment<DefaultStreamChatGenerics> | import("stream-chat").Attachment<DefaultStreamChatGenerics>)[]) => void;
 }) | undefined>;
 export declare const MessageInputContextProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>({ children, value, }: PropsWithChildren<{
     value: MessageInputContextValue<StreamChatGenerics, V>;

package/dist/css/v2/emoji-replacement.css

@@ -1 +1 @@
-@font-face{font-family:ReplaceFlagEmojiPNG;src:url("../../assets/NotoColorEmoji-flags.woff2") format("woff2");unicode-range:U+1F1E6-1F1FF}@font-face{font-family:ReplaceFlagEmojiSVG;src:url("../../assets/EmojiOneColor.woff2") format("woff2");unicode-range:U+1F1E6-1F1FF}.str-chat--windows-flags .str-chat__textarea__textarea,.str-chat--windows-flags .str-chat__message-text-inner *,.str-chat--windows-flags .str-chat__emoji-item--entity,.str-chat--windows-flags .emoji-mart-emoji-native *{font-family:ReplaceFlagEmojiPNG,var(--str-chat__font-family),sans-serif;font-display:swap}@-moz-document url-prefix(""){.str-chat--windows-flags .str-chat__textarea__textarea,.str-chat--windows-flags .str-chat__message-text-inner *,.str-chat--windows-flags .str-chat__emoji-item--entity,.str-chat--windows-flags .emoji-mart-emoji-native *{font-family:ReplaceFlagEmojiSVG,var(--str-chat__font-family),sans-serif;font-display:swap}}
+@font-face{font-family:ReplaceFlagEmojiPNG;src:url("../../assets/NotoColorEmoji-flags.woff2") format("woff2");unicode-range:U+1F1E6-1F1FF}@font-face{font-family:ReplaceFlagEmojiSVG;src:url("../../assets/EmojiOneColor.woff2") format("woff2");unicode-range:U+1F1E6-1F1FF}.str-chat--windows-flags .str-chat__textarea__textarea,.str-chat--windows-flags .str-chat__message-textarea,.str-chat--windows-flags .str-chat__message-text-inner *,.str-chat--windows-flags .str-chat__emoji-item--entity,.str-chat--windows-flags .emoji-mart-emoji-native *{font-family:ReplaceFlagEmojiPNG,var(--str-chat__font-family),sans-serif;font-display:swap}@-moz-document url-prefix(""){.str-chat--windows-flags .str-chat__textarea__textarea,.str-chat--windows-flags .str-chat__message-textarea,.str-chat--windows-flags .str-chat__message-text-inner *,.str-chat--windows-flags .str-chat__emoji-item--entity,.str-chat--windows-flags .emoji-mart-emoji-native *{font-family:ReplaceFlagEmojiSVG,var(--str-chat__font-family),sans-serif;font-display:swap}}