stream-chat-react 12.15.0 → 13.0.0-rc.2

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

@@ -1,28 +1 @@
-import type { UserResponse } from 'stream-chat';
-import type { ChannelActionContextValue } from '../../../context/ChannelActionContext';
-import type { ChatContextValue } from '../../../context/ChatContext';
-import type { TranslationContextValue } from '../../../context/TranslationContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const accentsMap: {
-    [key: string]: string;
-};
-export declare const removeDiacritics: (text?: string) => string;
-export declare const calculateLevenshtein: (query: string, name: string) => number;
-export type SearchLocalUserParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    ownUserId: string | undefined;
-    query: string;
-    text: string;
-    users: UserResponse<StreamChatGenerics>[];
-    useMentionsTransliteration?: boolean;
-};
-export declare const searchLocalUsers: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: SearchLocalUserParams<StreamChatGenerics>) => UserResponse<StreamChatGenerics>[];
-type CheckUploadPermissionsParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    addNotification: ChannelActionContextValue<StreamChatGenerics>['addNotification'];
-    file: File;
-    getAppSettings: ChatContextValue<StreamChatGenerics>['getAppSettings'];
-    t: TranslationContextValue['t'];
-    uploadType: 'image' | 'file';
-};
-export declare const checkUploadPermissions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: CheckUploadPermissionsParams<StreamChatGenerics>) => Promise<boolean>;
 export declare function prettifyFileSize(bytes: number, precision?: number): string;
-export {};

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

@@ -1,127 +1,3 @@
-import { DEFAULT_UPLOAD_SIZE_LIMIT_BYTES } from '../../../constants/limits';
-export const accentsMap = {
-    a: 'á|à|ã|â|À|Á|Ã|Â',
-    c: 'ç|Ç',
-    e: 'é|è|ê|É|È|Ê',
-    i: 'í|ì|î|Í|Ì|Î',
-    n: 'ñ|Ñ',
-    o: 'ó|ò|ô|ő|õ|Ó|Ò|Ô|Õ',
-    u: 'ú|ù|û|ü|Ú|Ù|Û|Ü',
-};
-export const removeDiacritics = (text) => {
-    if (!text)
-        return '';
-    return Object.keys(accentsMap).reduce((acc, current) => acc.replace(new RegExp(accentsMap[current], 'g'), current), text);
-};
-export const calculateLevenshtein = (query, name) => {
-    if (query.length === 0)
-        return name.length;
-    if (name.length === 0)
-        return query.length;
-    const matrix = [];
-    let i;
-    for (i = 0; i <= name.length; i++) {
-        matrix[i] = [i];
-    }
-    let j;
-    for (j = 0; j <= query.length; j++) {
-        matrix[0][j] = j;
-    }
-    for (i = 1; i <= name.length; i++) {
-        for (j = 1; j <= query.length; j++) {
-            if (name.charAt(i - 1) === query.charAt(j - 1)) {
-                matrix[i][j] = matrix[i - 1][j - 1];
-            }
-            else {
-                matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
-                Math.min(matrix[i][j - 1] + 1, // insertion
-                matrix[i - 1][j] + 1)); // deletion
-            }
-        }
-    }
-    return matrix[name.length][query.length];
-};
-export const searchLocalUsers = (params) => {
-    const { ownUserId, query, text, useMentionsTransliteration, users } = params;
-    const matchingUsers = users.filter((user) => {
-        if (user.id === ownUserId)
-            return false;
-        if (!query)
-            return true;
-        let updatedId = removeDiacritics(user.id).toLowerCase();
-        let updatedName = removeDiacritics(user.name).toLowerCase();
-        let updatedQuery = removeDiacritics(query).toLowerCase();
-        if (useMentionsTransliteration) {
-            (async () => {
-                // eslint-disable-next-line import/no-extraneous-dependencies
-                const { default: transliterate } = await import('@stream-io/transliterate');
-                updatedName = transliterate(user.name || '').toLowerCase();
-                updatedQuery = transliterate(query).toLowerCase();
-                updatedId = transliterate(user.id).toLowerCase();
-            })();
-        }
-        const maxDistance = 3;
-        const lastDigits = text.slice(-(maxDistance + 1)).includes('@');
-        if (updatedName) {
-            const levenshtein = calculateLevenshtein(updatedQuery, updatedName);
-            if (updatedName.includes(updatedQuery) ||
-                (levenshtein <= maxDistance && lastDigits)) {
-                return true;
-            }
-        }
-        const levenshtein = calculateLevenshtein(updatedQuery, updatedId);
-        return updatedId.includes(updatedQuery) || (levenshtein <= maxDistance && lastDigits);
-    });
-    return matchingUsers;
-};
-export const checkUploadPermissions = async (params) => {
-    const { addNotification, file, getAppSettings, t, uploadType } = params;
-    let appSettings = null;
-    appSettings = await getAppSettings();
-    const { allowed_file_extensions, allowed_mime_types, blocked_file_extensions, blocked_mime_types, size_limit, } = (uploadType === 'image'
-        ? appSettings?.app?.image_upload_config
-        : appSettings?.app?.file_upload_config) || {};
-    const sendNotAllowedErrorNotification = () => addNotification(t(`Upload type: "{{ type }}" is not allowed`, {
-        type: file.type || 'unknown type',
-    }), 'error');
-    if (allowed_file_extensions?.length) {
-        const allowed = allowed_file_extensions.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
-        if (!allowed) {
-            sendNotAllowedErrorNotification();
-            return false;
-        }
-    }
-    if (blocked_file_extensions?.length) {
-        const blocked = blocked_file_extensions.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
-        if (blocked) {
-            sendNotAllowedErrorNotification();
-            return false;
-        }
-    }
-    if (allowed_mime_types?.length) {
-        const allowed = allowed_mime_types.some((type) => type.toLowerCase() === file.type?.toLowerCase());
-        if (!allowed) {
-            sendNotAllowedErrorNotification();
-            return false;
-        }
-    }
-    if (blocked_mime_types?.length) {
-        const blocked = blocked_mime_types.some((type) => type.toLowerCase() === file.type?.toLowerCase());
-        if (blocked) {
-            sendNotAllowedErrorNotification();
-            return false;
-        }
-    }
-    const sizeLimit = size_limit || DEFAULT_UPLOAD_SIZE_LIMIT_BYTES;
-    if (file.size && file.size > sizeLimit) {
-        addNotification(t('File is too large: {{ size }}, maximum upload size is {{ limit }}', {
-            limit: prettifyFileSize(sizeLimit),
-            size: prettifyFileSize(file.size),
-        }), 'error');
-        return false;
-    }
-    return true;
-};
 export function prettifyFileSize(bytes, precision = 3) {
     const units = ['B', 'kB', 'MB', 'GB'];
     const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);

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

@@ -2,7 +2,6 @@ export * from './AttachmentSelector';
 export { AttachmentPreviewList } from './AttachmentPreviewList';
 export type { AttachmentPreviewListProps, FileAttachmentPreviewProps, ImageAttachmentPreviewProps, AttachmentPreviewProps, UnsupportedAttachmentPreviewProps, VoiceRecordingPreviewProps, } from './AttachmentPreviewList';
 export * from './CooldownTimer';
-export * from './DefaultTriggerProvider';
 export * from './EditMessageForm';
 export * from './hooks';
 export * from './icons';
@@ -12,4 +11,3 @@ export * from './MessageInputFlat';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
 export { WithDragAndDropUpload } from './WithDragAndDropUpload';
-export * from './types';

package/dist/components/MessageInput/index.js

@@ -1,7 +1,6 @@
 export * from './AttachmentSelector';
 export { AttachmentPreviewList } from './AttachmentPreviewList';
 export * from './CooldownTimer';
-export * from './DefaultTriggerProvider';
 export * from './EditMessageForm';
 export * from './hooks';
 export * from './icons';
@@ -11,4 +10,3 @@ export * from './MessageInputFlat';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
 export { WithDragAndDropUpload } from './WithDragAndDropUpload';
-export * from './types';

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

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const ConnectionStatus: React.MemoExoticComponent<(<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element)>;
+export declare const ConnectionStatus: React.MemoExoticComponent<() => React.JSX.Element>;

package/dist/components/MessageList/ConnectionStatus.js

@@ -6,7 +6,7 @@ const UnMemoizedConnectionStatus = () => {
     const { t } = useTranslationContext('ConnectionStatus');
     const [online, setOnline] = useState(true);
     useEffect(() => {
-        const connectionChanged = ({ online: onlineStatus = false, }) => {
+        const connectionChanged = ({ online: onlineStatus = false }) => {
             if (online !== onlineStatus) {
                 setOnline(onlineStatus);
             }

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

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type CustomNotificationProps = {
     type: string;
     active?: boolean;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { StreamMessage } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type GiphyPreviewMessageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    message: StreamMessage<StreamChatGenerics>;
+import type { LocalMessage } from 'stream-chat';
+export type GiphyPreviewMessageProps = {
+    message: LocalMessage;
 };
-export declare const GiphyPreviewMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: GiphyPreviewMessageProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const GiphyPreviewMessage: (props: GiphyPreviewMessageProps) => React.JSX.Element;

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

@@ -1,17 +1,16 @@
 import React from 'react';
-import { ChannelActionContextValue } from '../../context/ChannelActionContext';
-import { InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';
-import { MessageRenderer } from './renderMessages';
-import type { GroupStyle, ProcessMessagesParams } from './utils';
+import type { ChannelActionContextValue } from '../../context/ChannelActionContext';
+import type { InfiniteScrollProps } from '../InfiniteScrollPaginator/InfiniteScroll';
+import type { LocalMessage } from 'stream-chat';
+import type { MessageRenderer } from './renderMessages';
+import type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';
 import type { MessageProps } from '../Message/types';
-import type { StreamMessage } from '../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 type PropsDrilledToMessage = 'additionalMessageInputProps' | 'closeReactionSelectorOnClick' | 'customMessageActions' | 'disableQuotedMessages' | 'formatDate' | 'getDeleteMessageErrorNotification' | 'getFlagMessageErrorNotification' | 'getFlagMessageSuccessNotification' | 'getMarkMessageUnreadErrorNotification' | 'getMarkMessageUnreadSuccessNotification' | 'getMuteUserErrorNotification' | 'getMuteUserSuccessNotification' | 'getPinMessageErrorNotification' | 'Message' | 'messageActions' | 'onlySenderCanEdit' | 'onMentionsClick' | 'onMentionsHover' | 'onUserClick' | 'onUserHover' | 'openThread' | 'pinPermissions' | 'reactionDetailsSort' | 'renderText' | 'retrySendMessage' | 'sortReactions' | 'sortReactionDetails' | 'unsafeHTML';
-export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
+export type MessageListProps = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {
     /** 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, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
+    groupStyles?: (message: RenderedMessage, previousMessage: RenderedMessage, nextMessage: RenderedMessage, 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 */
@@ -39,18 +38,18 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
     /** 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/) */
-    messages?: StreamMessage<StreamChatGenerics>[];
+    messages?: LocalMessage[];
     /** If true, turns off message UI grouping by user */
     noGroupByUser?: boolean;
     /** Overrides the way MessageList renders messages */
-    renderMessages?: MessageRenderer<StreamChatGenerics>;
+    renderMessages?: MessageRenderer;
     /** If true, `readBy` data supplied to the `Message` components will include all user read states per sent message */
     returnAllReadData?: boolean;
     /**
      * Allows to review changes introduced to messages array on per message basis (e.g. date separator injection before a message).
      * The array returned from the function is appended to the array of messages that are later rendered into React elements in the `MessageList`.
      */
-    reviewProcessedMessage?: ProcessMessagesParams<StreamChatGenerics>['reviewProcessedMessage'];
+    reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];
     /**
      * The pixel threshold under which the message list is considered to be so near to the bottom,
      * so that if a new message is delivered, the list will be scrolled to the absolute bottom.
@@ -74,5 +73,5 @@ export type MessageListProps<StreamChatGenerics extends DefaultStreamChatGeneric
  * - [ComponentContext](https://getstream.io/chat/docs/sdk/react/contexts/component_context/)
  * - [TypingContext](https://getstream.io/chat/docs/sdk/react/contexts/typing_context/)
  */
-export declare const MessageList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageListProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const MessageList: (props: MessageListProps) => React.JSX.Element;
 export {};

package/dist/components/MessageList/MessageList.js

@@ -5,14 +5,14 @@ import { useMarkRead } from './hooks/useMarkRead';
 import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
 import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
 import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
-import { useChannelActionContext, } from '../../context/ChannelActionContext';
-import { useChannelStateContext, } from '../../context/ChannelStateContext';
+import { useChannelActionContext } from '../../context/ChannelActionContext';
+import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { DialogManagerProvider } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { MessageListContextProvider } from '../../context/MessageListContext';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
-import { InfiniteScroll, } from '../InfiniteScrollPaginator/InfiniteScroll';
+import { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { defaultPinPermissions, MESSAGE_ACTIONS } from '../Message/utils';
 import { TypingIndicator as DefaultTypingIndicator } from '../TypingIndicator';
@@ -30,7 +30,7 @@ const MessageListWithContext = (props) => {
         hasMoreNewer,
         listElement,
         loadMoreScrollThreshold,
-        messages,
+        messages, // todo: is it correct to base the scroll logic on an array that does not contain date separators or intro?
         scrolledUpThreshold: props.scrolledUpThreshold,
         suppressAutoscroll,
     });

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

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type MessageNotificationProps = PropsWithChildren<{
     /** button click event handler */
     onClick: React.MouseEventHandler;

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

@@ -1,19 +1,20 @@
-import React, { RefObject } from 'react';
-import { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
-import { GroupStyle, ProcessMessagesParams } from './utils';
-import { MessageProps, MessageUIComponentProps } from '../Message';
-import { ChannelActionContextValue } from '../../context/ChannelActionContext';
-import { ChannelStateContextValue, StreamMessage } from '../../context/ChannelStateContext';
-import { ChatContextValue } from '../../context/ChatContext';
-import { ComponentContextValue } from '../../context/ComponentContext';
-import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { RefObject } from 'react';
+import React from 'react';
+import type { ScrollSeekConfiguration, ScrollSeekPlaceholderProps, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
+import type { GroupStyle, ProcessMessagesParams, RenderedMessage } from './utils';
+import type { MessageProps, MessageUIComponentProps } from '../Message';
+import type { ChannelActionContextValue } from '../../context/ChannelActionContext';
+import type { ChannelStateContextValue } from '../../context/ChannelStateContext';
+import type { ChatContextValue } from '../../context/ChatContext';
+import type { ComponentContextValue } from '../../context/ComponentContext';
+import type { LocalMessage, UserResponse } from 'stream-chat';
+import type { UnknownType } from '../../types/types';
 type PropsDrilledToMessage = 'additionalMessageInputProps' | 'customMessageActions' | 'formatDate' | 'messageActions' | 'openThread' | 'reactionDetailsSort' | 'sortReactions' | 'sortReactionDetails';
 type VirtualizedMessageListPropsForContext = PropsDrilledToMessage | 'closeReactionSelectorOnClick' | 'customMessageRenderer' | 'head' | 'loadingMore' | 'Message' | 'shouldGroupByUser' | 'threadList';
 /**
  * Context object provided to some Virtuoso props that are functions (components rendered by Virtuoso and other functions)
  */
-export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Required<Pick<ComponentContextValue<StreamChatGenerics>, 'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'>> & Pick<VirtualizedMessageListProps<StreamChatGenerics>, VirtualizedMessageListPropsForContext> & Pick<ChatContextValue<StreamChatGenerics>, 'customClasses'> & {
+export type VirtuosoContext = Required<Pick<ComponentContextValue, 'DateSeparator' | 'MessageSystem' | 'UnreadMessagesSeparator'>> & Pick<VirtualizedMessageListProps, VirtualizedMessageListPropsForContext> & Pick<ChatContextValue, 'customClasses'> & {
     /** Latest received message id in the current channel */
     lastReceivedMessageId: string | null | undefined;
     /** Object mapping between the message ID and a string representing the position in the group of a sequence of messages posted by the same user. */
@@ -21,9 +22,9 @@ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics
     /** Number of messages prepended before the first page of messages. This is needed to calculate the virtual position in the virtual list. */
     numItemsPrepended: number;
     /** Mapping of message ID of own messages to the array of users, who read the given message */
-    ownMessagesReadByOthers: Record<string, UserResponse<StreamChatGenerics>[]>;
+    ownMessagesReadByOthers: Record<string, UserResponse[]>;
     /** The original message list enriched with date separators, omitted deleted messages or giphy previews. */
-    processedMessages: StreamMessage<StreamChatGenerics>[];
+    processedMessages: RenderedMessage[];
     /** Instance of VirtuosoHandle object providing the API to navigate in the virtualized list by various scroll actions. */
     virtuosoRef: RefObject<VirtuosoHandle | null>;
     /** Message id which was marked as unread. ALl the messages following this message are considered unrea.  */
@@ -37,14 +38,14 @@ export type VirtuosoContext<StreamChatGenerics extends DefaultStreamChatGenerics
     /** The number of unread messages in the current channel. */
     unreadMessageCount?: number;
 };
-export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageProps<StreamChatGenerics>, PropsDrilledToMessage>> & {
+export type VirtualizedMessageListProps = Partial<Pick<MessageProps, PropsDrilledToMessage>> & {
     /** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
-    additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext<StreamChatGenerics>>;
+    additionalVirtuosoProps?: VirtuosoProps<UnknownType, VirtuosoContext>;
     channelUnreadUiState?: ChannelStateContextValue['channelUnreadUiState'];
     /** If true, picking a reaction from the `ReactionSelector` component will close the selector */
     closeReactionSelectorOnClick?: boolean;
     /** Custom render function, if passed, certain UI props are ignored */
-    customMessageRenderer?: (messageList: StreamMessage<StreamChatGenerics>[], index: number) => React.ReactElement;
+    customMessageRenderer?: (messageList: RenderedMessage[], index: number) => React.ReactElement;
     /** @deprecated Use additionalVirtuosoProps.defaultItemHeight instead. Will be removed with next major release - `v11.0.0`.
      * If set, the default item height is used for the calculation of the total list height. Use if you expect messages with a lot of height variance
      * */
@@ -52,7 +53,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, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
+    groupStyles?: (message: RenderedMessage, previousMessage: RenderedMessage, nextMessage: RenderedMessage, 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 */
@@ -79,11 +80,11 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
     /** 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>>;
+    Message?: React.ComponentType<MessageUIComponentProps>;
     /** The limit to use when paginating messages */
     messageLimit?: number;
     /** Optional prop to override the messages available from [ChannelStateContext](https://getstream.io/chat/docs/sdk/react/contexts/channel_state_context/) */
-    messages?: StreamMessage<StreamChatGenerics>[];
+    messages?: LocalMessage[];
     /**
      * @deprecated Use additionalVirtuosoProps.overscan instead. Will be removed with next major release - `v11.0.0`.
      * The amount of extra content the list should render in addition to what's necessary to fill in the viewport
@@ -95,7 +96,7 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
      * Allows to review changes introduced to messages array on per message basis (e.g. date separator injected before a message).
      * The array returned from the function is appended to the array of messages that are later rendered into React elements in the `VirtualizedMessageList`.
      */
-    reviewProcessedMessage?: ProcessMessagesParams<StreamChatGenerics>['reviewProcessedMessage'];
+    reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];
     /**
      * @deprecated Pass additionalVirtuosoProps.scrollSeekConfiguration and specify the placeholder in additionalVirtuosoProps.components.ScrollSeekPlaceholder instead.  Will be removed with next major release - `v11.0.0`.
      * Performance improvement by showing placeholders if user scrolls fast through list.
@@ -135,5 +136,5 @@ export type VirtualizedMessageListProps<StreamChatGenerics extends DefaultStream
  * The VirtualizedMessageList component renders a list of messages in a virtualized list.
  * It is a consumer of the React contexts set in [Channel](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel/Channel.tsx).
  */
-export declare function VirtualizedMessageList<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: VirtualizedMessageListProps<StreamChatGenerics>): React.JSX.Element;
+export declare function VirtualizedMessageList(props: VirtualizedMessageListProps): React.JSX.Element;
 export {};

package/dist/components/MessageList/VirtualizedMessageList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Virtuoso, } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
 import { GiphyPreviewMessage as DefaultGiphyPreviewMessage } from './GiphyPreviewMessage';
 import { useLastReadData } from './hooks';
 import { useGiphyPreview, useMessageSetKey, useNewMessageNotification, usePrependedMessagesCount, useScrollToBottomOnNewMessage, useShouldForceScrollToBottom, useUnreadMessagesNotificationVirtualized, } from './hooks/VirtualizedMessageList';
@@ -7,7 +7,7 @@ import { useMarkRead } from './hooks/useMarkRead';
 import { MessageNotification as DefaultMessageNotification } from './MessageNotification';
 import { MessageListNotifications as DefaultMessageListNotifications } from './MessageListNotifications';
 import { MessageListMainPanel as DefaultMessageListMainPanel } from './MessageListMainPanel';
-import { getGroupStyles, getLastReceived, processMessages, } from './utils';
+import { getGroupStyles, getLastReceived, processMessages } from './utils';
 import { MessageSimple } from '../Message';
 import { UnreadMessagesNotification as DefaultUnreadMessagesNotification } from './UnreadMessagesNotification';
 import { calculateFirstItemIndex, calculateItemIndex, EmptyPlaceholder, Header, Item, makeItemsRenderedHandler, messageRenderer, } from './VirtualizedMessageListComponents';
@@ -15,10 +15,10 @@ import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from '../Me
 import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
 import { DialogManagerProvider } from '../../context';
-import { useChannelActionContext, } from '../../context/ChannelActionContext';
-import { useChannelStateContext, } from '../../context/ChannelStateContext';
+import { useChannelActionContext } from '../../context/ChannelActionContext';
+import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
-import { useComponentContext, } from '../../context/ComponentContext';
+import { useComponentContext } from '../../context/ComponentContext';
 import { VirtualizedMessageListContextProvider } from '../../context/VirtualizedMessageListContext';
 import { DEFAULT_NEXT_CHANNEL_PAGE_SIZE } from '../../constants/limits';
 function captureResizeObserverExceededError(e) {
@@ -110,7 +110,7 @@ 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, maxTimeBetweenGroupedMessages);
-        if (style)
+        if (style && message.id)
             acc[message.id] = style;
         return acc;
     }, {}), 

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

@@ -1,17 +1,17 @@
 /// <reference types="lodash" />
 import React from 'react';
-import { ItemProps, ListItem } from 'react-virtuoso';
-import { StreamMessage } from '../../context';
+import type { ItemProps, ListItem } from 'react-virtuoso';
+import type { RenderedMessage } from './utils';
 import type { VirtuosoContext } from './VirtualizedMessageList';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { UnknownType } from '../../types/types';
 export declare function calculateItemIndex(virtuosoIndex: number, numItemsPrepended: number): number;
 export declare function calculateFirstItemIndex(numItemsPrepended: number): number;
-export declare const makeItemsRenderedHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(renderedItemsActions: Array<(msg: StreamMessage<StreamChatGenerics>[]) => void>, processedMessages: StreamMessage<StreamChatGenerics>[]) => import("lodash").DebouncedFunc<(items: ListItem<UnknownType>[]) => void>;
-type CommonVirtuosoComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    context?: VirtuosoContext<StreamChatGenerics>;
+export declare const makeItemsRenderedHandler: (renderedItemsActions: Array<(msg: RenderedMessage[]) => void>, processedMessages: RenderedMessage[]) => import("lodash").DebouncedFunc<(items: ListItem<UnknownType>[]) => void>;
+type CommonVirtuosoComponentProps = {
+    context?: VirtuosoContext;
 };
-export declare const Item: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, ...props }: ItemProps & CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const Header: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const EmptyPlaceholder: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ context, }: CommonVirtuosoComponentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const messageRenderer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const Item: ({ context, ...props }: ItemProps & CommonVirtuosoComponentProps) => React.JSX.Element;
+export declare const Header: ({ context }: CommonVirtuosoComponentProps) => React.JSX.Element;
+export declare const EmptyPlaceholder: ({ context }: CommonVirtuosoComponentProps) => React.JSX.Element;
+export declare const messageRenderer: (virtuosoIndex: number, _data: UnknownType, virtuosoContext: VirtuosoContext) => React.JSX.Element | null;
 export {};

package/dist/components/MessageList/VirtualizedMessageListComponents.js

@@ -5,7 +5,7 @@ import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyState
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
 import { isMessageEdited, Message } from '../Message';
 import { useComponentContext } from '../../context';
-import { getIsFirstUnreadMessage, isDateSeparatorMessage } from './utils';
+import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';
 const PREPEND_OFFSET = 10 ** 7;
 export function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
     return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
@@ -35,14 +35,14 @@ export const Item = ({ context, ...props }) => {
                 [`str-chat__li--${groupStyles}`]: groupStyles,
             }) }));
 };
-export const Header = ({ context, }) => {
+export const Header = ({ context }) => {
     const { LoadingIndicator = DefaultLoadingIndicator } = useComponentContext('VirtualizedMessageListHeader');
     return (React.createElement(React.Fragment, null,
         context?.head,
         context?.loadingMore && LoadingIndicator && (React.createElement("div", { className: 'str-chat__virtual-list__loading' },
             React.createElement(LoadingIndicator, { size: 20 })))));
 };
-export const EmptyPlaceholder = ({ context, }) => {
+export const EmptyPlaceholder = ({ context }) => {
     const { EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext('VirtualizedMessageList');
     return (React.createElement(React.Fragment, null, EmptyStateIndicator && (React.createElement(EmptyStateIndicator, { listType: context?.threadList ? 'thread' : 'message' }))));
 };
@@ -53,7 +53,7 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
         return customMessageRenderer(messageList, streamMessageIndex);
     }
     const message = messageList[streamMessageIndex];
-    if (!message)
+    if (!message || isIntroMessage(message))
         return React.createElement("div", { style: { height: '1px' } }); // returning null or zero height breaks the virtuoso
     if (isDateSeparatorMessage(message)) {
         return DateSeparator ? (React.createElement(DateSeparator, { date: message.date, unread: message.unread })) : null;
@@ -61,11 +61,11 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
     if (message.type === 'system') {
         return MessageSystem ? React.createElement(MessageSystem, { message: message }) : null;
     }
-    const groupedByUser = shouldGroupByUser &&
-        streamMessageIndex > 0 &&
-        message.user?.id === messageList[streamMessageIndex - 1].user?.id;
     const maybePrevMessage = messageList[streamMessageIndex - 1];
     const maybeNextMessage = messageList[streamMessageIndex + 1];
+    const groupedByUser = shouldGroupByUser &&
+        streamMessageIndex > 0 &&
+        message.user?.id === maybePrevMessage?.user?.id;
     // FIXME: firstOfGroup & endOfGroup should be derived from groupStyles which apply a more complex logic
     const firstOfGroup = shouldGroupByUser &&
         (message.user?.id !== maybePrevMessage?.user?.id ||

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

@@ -1,19 +1,17 @@
-import { GroupStyle, ProcessMessagesParams } from '../../utils';
-import type { Channel } from 'stream-chat';
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-export declare const useEnrichedMessages: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(args: {
-    channel: Channel<StreamChatGenerics>;
+import type { GroupStyle, ProcessMessagesParams, RenderedMessage } from '../../utils';
+import type { Channel, LocalMessage } from 'stream-chat';
+export declare const useEnrichedMessages: (args: {
+    channel: Channel;
     disableDateSeparator: boolean;
     hideDeletedMessages: boolean;
     hideNewMessageSeparator: boolean;
-    messages: StreamMessage<StreamChatGenerics>[];
+    messages: LocalMessage[];
     noGroupByUser: boolean;
-    groupStyles?: (message: StreamMessage<StreamChatGenerics>, previousMessage: StreamMessage<StreamChatGenerics>, nextMessage: StreamMessage<StreamChatGenerics>, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
+    groupStyles?: (message: RenderedMessage, previousMessage: RenderedMessage, nextMessage: RenderedMessage, noGroupByUser: boolean, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
     headerPosition?: number;
     maxTimeBetweenGroupedMessages?: number;
-    reviewProcessedMessage?: ProcessMessagesParams<StreamChatGenerics>['reviewProcessedMessage'];
+    reviewProcessedMessage?: ProcessMessagesParams['reviewProcessedMessage'];
 }) => {
     messageGroupStyles: Record<string, GroupStyle>;
-    messages: StreamMessage<StreamChatGenerics>[];
+    messages: RenderedMessage[];
 };

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { getGroupStyles, insertIntro, processMessages, } from '../../utils';
+import { getGroupStyles, insertIntro, processMessages } from '../../utils';
 import { useChatContext } from '../../../../context/ChatContext';
 import { useComponentContext } from '../../../../context/ComponentContext';
 export const useEnrichedMessages = (args) => {

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

@@ -1,18 +1,17 @@
-import React from 'react';
-import { GroupStyle } from '../../utils';
+import type React from 'react';
 import type { ChannelState as StreamChannelState } from 'stream-chat';
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { ChannelUnreadUiState, DefaultStreamChatGenerics } from '../../../../types/types';
-import { MessageRenderer, SharedMessageProps } from '../../renderMessages';
-type UseMessageListElementsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    enrichedMessages: StreamMessage<StreamChatGenerics>[];
-    internalMessageProps: SharedMessageProps<StreamChatGenerics>;
+import type { GroupStyle, RenderedMessage } from '../../utils';
+import type { ChannelUnreadUiState } from '../../../../types/types';
+import type { MessageRenderer, SharedMessageProps } from '../../renderMessages';
+type UseMessageListElementsProps = {
+    enrichedMessages: RenderedMessage[];
+    internalMessageProps: SharedMessageProps;
     messageGroupStyles: Record<string, GroupStyle>;
-    renderMessages: MessageRenderer<StreamChatGenerics>;
+    renderMessages: MessageRenderer;
     returnAllReadData: boolean;
     threadList: boolean;
-    channelUnreadUiState?: ChannelUnreadUiState<StreamChatGenerics>;
-    read?: StreamChannelState<StreamChatGenerics>['read'];
+    channelUnreadUiState?: ChannelUnreadUiState;
+    read?: StreamChannelState['read'];
 };
-export declare const useMessageListElements: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseMessageListElementsProps<StreamChatGenerics>) => React.ReactNode[];
+export declare const useMessageListElements: (props: UseMessageListElementsProps) => React.ReactNode[];
 export {};