stream-chat-react 12.13.1 → 13.0.0-rc.1

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

@@ -1,91 +1,22 @@
-import { useEffect, useRef } from 'react';
+import { useCallback } from 'react';
+import { useMessageComposer } from './useMessageComposer';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';
-import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
-import { LinkPreviewState } from '../types';
-export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrichURLsController) => {
-    const { clearEditingState, message, overrideSubmitHandler, parent, publishTypingEvent, } = props;
-    const { attachments, linkPreviews, mentioned_users, text } = state;
-    const { cancelURLEnrichment, findAndEnqueueURLsToEnrich } = enrichURLsController;
-    const { channel } = useChannelStateContext('useSubmitHandler');
+export const useSubmitHandler = (props) => {
+    const { clearEditingState, overrideSubmitHandler } = props;
     const { addNotification, editMessage, sendMessage } = useChannelActionContext('useSubmitHandler');
     const { t } = useTranslationContext('useSubmitHandler');
-    const textReference = useRef({ hasChanged: false, initialText: text });
-    useEffect(() => {
-        if (!textReference.current.initialText.length) {
-            textReference.current.initialText = text;
-            return;
-        }
-        textReference.current.hasChanged = text !== textReference.current.initialText;
-    }, [text]);
-    const handleSubmit = async (event, customMessageData, options) => {
+    const messageComposer = useMessageComposer();
+    const handleSubmit = useCallback(async (event) => {
         event?.preventDefault();
-        const trimmedMessage = text.trim();
-        const isEmptyMessage = trimmedMessage === '' ||
-            trimmedMessage === '>' ||
-            trimmedMessage === '``````' ||
-            trimmedMessage === '``' ||
-            trimmedMessage === '**' ||
-            trimmedMessage === '____' ||
-            trimmedMessage === '__' ||
-            trimmedMessage === '****';
-        if (isEmptyMessage &&
-            numberOfUploads === 0 &&
-            attachments.length === 0 &&
-            !customMessageData?.poll_id)
+        const composition = await messageComposer.compose();
+        if (!composition || !composition.message)
             return;
-        const someAttachmentsUploading = attachments.some((att) => att.localMetadata?.uploadState === 'uploading');
-        if (someAttachmentsUploading) {
-            return addNotification(t('Wait until all attachments have uploaded'), 'error');
-        }
-        const attachmentsFromUploads = attachments
-            .filter((att) => att.localMetadata?.uploadState !== 'failed' ||
-            (findAndEnqueueURLsToEnrich && !att.og_scrape_url))
-            .map((localAttachment) => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { localMetadata: _, ...attachment } = localAttachment;
-            return attachment;
-        });
-        const sendOptions = { ...options };
-        let attachmentsFromLinkPreviews = [];
-        if (findAndEnqueueURLsToEnrich) {
-            // prevent showing link preview in MessageInput after the message has been sent
-            cancelURLEnrichment();
-            const someLinkPreviewsLoading = Array.from(linkPreviews.values()).some((linkPreview) => [LinkPreviewState.QUEUED, LinkPreviewState.LOADING].includes(linkPreview.state));
-            const someLinkPreviewsDismissed = Array.from(linkPreviews.values()).some((linkPreview) => linkPreview.state === LinkPreviewState.DISMISSED);
-            attachmentsFromLinkPreviews = someLinkPreviewsLoading
-                ? []
-                : Array.from(linkPreviews.values())
-                    .filter((linkPreview) => linkPreview.state === LinkPreviewState.LOADED &&
-                    !attachmentsFromUploads.find((attFromUpload) => attFromUpload.og_scrape_url === linkPreview.og_scrape_url))
-                    .map(
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                ({ state: linkPreviewState, ...ogAttachment }) => ogAttachment);
-            // scraped attachments are added only if all enrich queries has completed. Otherwise, the scraping has to be done server-side.
-            sendOptions.skip_enrich_url =
-                (!someLinkPreviewsLoading && attachmentsFromLinkPreviews.length > 0) ||
-                    someLinkPreviewsDismissed;
-        }
-        const newAttachments = [...attachmentsFromUploads, ...attachmentsFromLinkPreviews];
-        // Instead of checking if a user is still mentioned every time the text changes,
-        // just filter out non-mentioned users before submit, which is cheaper
-        // and allows users to easily undo any accidental deletion
-        const actualMentionedUsers = Array.from(new Set(mentioned_users.filter(({ id, name }) => text.includes(`@${id}`) || text.includes(`@${name}`))));
-        const updatedMessage = {
-            attachments: newAttachments,
-            mentioned_users: actualMentionedUsers,
-            text,
-        };
-        if (message && message.type !== 'error') {
-            delete message.i18n;
+        const { localMessage, message, sendOptions } = composition;
+        if (messageComposer.editedMessage && localMessage.type !== 'error') {
             try {
-                await editMessage({
-                    ...message,
-                    ...updatedMessage,
-                    ...customMessageData,
-                }, sendOptions);
+                await editMessage(localMessage, sendOptions);
                 clearEditingState?.();
-                dispatch({ type: 'clear' });
             }
             catch (err) {
                 addNotification(t('Edit message request failed'), 'error');
@@ -93,33 +24,34 @@ export const useSubmitHandler = (props, state, dispatch, numberOfUploads, enrich
         }
         else {
             try {
-                dispatch({ type: 'clear' });
+                // todo: get rid of overrideSubmitHandler once MessageComposer supports submission flow
                 if (overrideSubmitHandler) {
                     await overrideSubmitHandler({
-                        ...updatedMessage,
-                        parent,
-                    }, channel.cid, customMessageData, sendOptions);
+                        cid: messageComposer.channel.cid,
+                        localMessage,
+                        message,
+                        sendOptions,
+                    });
                 }
                 else {
-                    await sendMessage({
-                        ...updatedMessage,
-                        parent,
-                    }, customMessageData, sendOptions);
+                    await sendMessage({ localMessage, message, options: sendOptions });
                 }
-                if (publishTypingEvent)
-                    await channel.stopTyping();
+                messageComposer.clear();
+                if (messageComposer.config.text.publishTypingEvents)
+                    await messageComposer.channel.stopTyping();
             }
             catch (err) {
-                dispatch({
-                    getNewText: () => text,
-                    type: 'setText',
-                });
-                actualMentionedUsers?.forEach((user) => {
-                    dispatch({ type: 'addMentionedUser', user });
-                });
                 addNotification(t('Send message request failed'), 'error');
             }
         }
-    };
+    }, [
+        addNotification,
+        clearEditingState,
+        editMessage,
+        messageComposer,
+        overrideSubmitHandler,
+        sendMessage,
+        t,
+    ]);
     return { handleSubmit };
 };

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';
@@ -11,4 +10,4 @@ export * from './MessageInput';
 export * from './MessageInputFlat';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
-export * from './types';
+export { WithDragAndDropUpload } from './WithDragAndDropUpload';

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';
@@ -10,4 +9,4 @@ export * from './MessageInput';
 export * from './MessageInputFlat';
 export * from './QuotedMessagePreview';
 export * from './SendButton';
-export * from './types';
+export { WithDragAndDropUpload } from './WithDragAndDropUpload';

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;
     }, {}),