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

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

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

@@ -1,16 +1,15 @@
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { LocalMessage } from 'stream-chat';
 export type ContainerMeasures = {
     offsetHeight: number;
     scrollHeight: number;
 };
-export type UseMessageListScrollManagerParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type UseMessageListScrollManagerParams = {
     loadMoreScrollThreshold: number;
-    messages: StreamMessage<StreamChatGenerics>[];
+    messages: LocalMessage[];
     onScrollBy: (scrollBy: number) => void;
     scrollContainerMeasures: () => ContainerMeasures;
     scrolledUpThreshold: number;
     scrollToBottom: () => void;
     showNewMessages: () => void;
 };
-export declare function useMessageListScrollManager<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseMessageListScrollManagerParams<StreamChatGenerics>): (scrollTopValue: number) => void;
+export declare function useMessageListScrollManager(params: UseMessageListScrollManagerParams): (scrollTopValue: number) => void;

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

@@ -1,15 +1,14 @@
-import React from 'react';
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-export type UseScrollLocationLogicParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import type React from 'react';
+import type { LocalMessage } from 'stream-chat';
+export type UseScrollLocationLogicParams = {
     hasMoreNewer: boolean;
     listElement: HTMLDivElement | null;
     loadMoreScrollThreshold: number;
     suppressAutoscroll: boolean;
-    messages?: StreamMessage<StreamChatGenerics>[];
+    messages?: LocalMessage[];
     scrolledUpThreshold?: number;
 };
-export declare const useScrollLocationLogic: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: UseScrollLocationLogicParams<StreamChatGenerics>) => {
+export declare const useScrollLocationLogic: (params: UseScrollLocationLogicParams) => {
     hasNewMessages: boolean;
     isMessageListScrolledToBottom: boolean;
     onScroll: (event: React.UIEvent<HTMLDivElement>) => void;

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-export declare const useGiphyPreview: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(separateGiphyPreview: boolean) => {
-    giphyPreviewMessage: StreamMessage<StreamChatGenerics> | undefined;
-    setGiphyPreviewMessage: import("react").Dispatch<import("react").SetStateAction<StreamMessage<StreamChatGenerics> | undefined>> | undefined;
+import type { LocalMessage } from 'stream-chat';
+export declare const useGiphyPreview: (separateGiphyPreview: boolean) => {
+    giphyPreviewMessage: LocalMessage | undefined;
+    setGiphyPreviewMessage: import("react").Dispatch<import("react").SetStateAction<LocalMessage | undefined>> | undefined;
 };

package/dist/components/MessageList/hooks/VirtualizedMessageList/useGiphyPreview.js

@@ -4,14 +4,15 @@ export const useGiphyPreview = (separateGiphyPreview) => {
     const [giphyPreviewMessage, setGiphyPreviewMessage] = useState();
     const { client } = useChatContext('useGiphyPreview');
     useEffect(() => {
+        if (!separateGiphyPreview)
+            return;
         const handleEvent = (event) => {
             const { message, user } = event;
             if (message?.command === 'giphy' && user?.id === client.userID) {
                 setGiphyPreviewMessage(undefined);
             }
         };
-        if (separateGiphyPreview)
-            client.on('message.new', handleEvent);
+        client.on('message.new', handleEvent);
         return () => client.off('message.new', handleEvent);
     }, [client, separateGiphyPreview]);
     return {

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

@@ -1,9 +1,8 @@
-import { StreamMessage } from '../../../../context';
-import { DefaultStreamChatGenerics } from '../../../../types/types';
-type UseMessageSetKeyParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    messages?: StreamMessage<StreamChatGenerics>[];
+import type { LocalMessage } from 'stream-chat';
+type UseMessageSetKeyParams = {
+    messages?: LocalMessage[];
 };
-export declare const useMessageSetKey: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ messages, }: UseMessageSetKeyParams<StreamChatGenerics>) => {
+export declare const useMessageSetKey: ({ messages }: UseMessageSetKeyParams) => {
     messageSetKey: number;
 };
 export {};

package/dist/components/MessageList/hooks/VirtualizedMessageList/useMessageSetKey.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-export const useMessageSetKey = ({ messages, }) => {
+export const useMessageSetKey = ({ messages }) => {
     /**
      * Logic to update the key of the virtuoso component when the list jumps to a new location.
      */

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-export declare function useNewMessageNotification<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId: string | undefined, hasMoreNewer?: boolean): {
+import type { RenderedMessage } from '../../utils';
+export declare function useNewMessageNotification(messages: RenderedMessage[], currentUserId: string | undefined, hasMoreNewer?: boolean): {
     atBottom: import("react").RefObject<boolean>;
     isMessageListScrolledToBottom: boolean;
     newMessagesNotification: boolean;

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

@@ -1,3 +1,2 @@
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-export declare function usePrependedMessagesCount<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], hasDateSeparator: boolean): number;
+import type { RenderedMessage } from '../../utils';
+export declare function usePrependedMessagesCount(messages: RenderedMessage[], hasDateSeparator: boolean): number;

package/dist/components/MessageList/hooks/VirtualizedMessageList/usePrependMessagesCount.js

@@ -1,4 +1,5 @@
 import { useMemo, useRef } from 'react';
+import { isLocalMessage } from '../../utils';
 const STATUSES_EXCLUDED_FROM_PREPEND = {
     failed: true,
     sending: true,
@@ -26,8 +27,11 @@ export function usePrependedMessagesCount(messages, hasDateSeparator) {
         // That in turn leads to incorrect index calculation in VirtualizedMessageList trying to access a message
         // at non-existent index. Therefore, we ignore messages of status "sending" / "failed" in order they are
         // not considered as prepended messages.
-        const firstMsgMovedAfterMessagesInExcludedStatus = !!(currentFirstMessage?.status &&
-            STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessage.status]);
+        const currentFirstMessageStatus = isLocalMessage(currentFirstMessage)
+            ? currentFirstMessage.status
+            : undefined;
+        const firstMsgMovedAfterMessagesInExcludedStatus = !!(currentFirstMessageStatus &&
+            STATUSES_EXCLUDED_FROM_PREPEND[currentFirstMessageStatus]);
         if (noNewMessages || firstMsgMovedAfterMessagesInExcludedStatus) {
             return previousNumItemsPrepended.current;
         }

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

@@ -1,10 +1,9 @@
-import { StreamMessage } from '../../../../context';
-import { DefaultStreamChatGenerics } from '../../../../types/types';
-type UseScrollToBottomOnNewMessageParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+import type { RenderedMessage } from '../../utils';
+type UseScrollToBottomOnNewMessageParams = {
     scrollToBottom: () => void;
-    messages?: StreamMessage<StreamChatGenerics>[];
+    messages?: RenderedMessage[];
     /** When `true`, the list will scroll to the latest message when the window regains focus */
     scrollToLatestMessageOnFocus?: boolean;
 };
-export declare const useScrollToBottomOnNewMessage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }: UseScrollToBottomOnNewMessageParams<StreamChatGenerics>) => void;
+export declare const useScrollToBottomOnNewMessage: ({ messages, scrollToBottom, scrollToLatestMessageOnFocus, }: UseScrollToBottomOnNewMessageParams) => void;
 export {};

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

@@ -1,3 +1,2 @@
-import type { StreamMessage } from '../../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-export declare function useShouldForceScrollToBottom<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], currentUserId?: string): () => boolean;
+import type { RenderedMessage } from '../../utils';
+export declare function useShouldForceScrollToBottom(messages: RenderedMessage[], currentUserId?: string): () => boolean;

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

@@ -1,5 +1,4 @@
-import { StreamMessage } from '../../../../context';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type { RenderedMessage } from '../../utils';
 export type UseUnreadMessagesNotificationParams = {
     showAlways: boolean;
     unreadCount: number;
@@ -17,7 +16,7 @@ export type UseUnreadMessagesNotificationParams = {
  * @param showAlways
  * @param unreadCount
  */
-export declare const useUnreadMessagesNotificationVirtualized: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ lastRead, showAlways, unreadCount, }: UseUnreadMessagesNotificationParams) => {
+export declare const useUnreadMessagesNotificationVirtualized: ({ lastRead, showAlways, unreadCount, }: UseUnreadMessagesNotificationParams) => {
     show: boolean;
-    toggleShowUnreadMessagesNotification: (renderedMessages: StreamMessage<StreamChatGenerics>[]) => void;
+    toggleShowUnreadMessagesNotification: (renderedMessages: RenderedMessage[]) => void;
 };

package/dist/components/MessageList/hooks/VirtualizedMessageList/useUnreadMessagesNotificationVirtualized.js

@@ -20,12 +20,11 @@ export const useUnreadMessagesNotificationVirtualized = ({ lastRead, showAlways,
         const lastRenderedMessage = renderedMessages.slice(-1)[0];
         if (!(firstRenderedMessage && lastRenderedMessage))
             return;
-        const scrolledBelowSeparator = !!lastRead &&
-            new Date(firstRenderedMessage.created_at).getTime() >
-                lastRead.getTime();
-        const scrolledAboveSeparator = !!lastRead &&
-            new Date(lastRenderedMessage.created_at).getTime() <
-                lastRead.getTime();
+        const firstRenderedMessageTime = new Date(firstRenderedMessage.created_at ?? 0).getTime();
+        const lastRenderedMessageTime = new Date(lastRenderedMessage.created_at ?? 0).getTime();
+        const lastReadTime = new Date(lastRead ?? 0).getTime();
+        const scrolledBelowSeparator = !!lastReadTime && firstRenderedMessageTime > lastReadTime;
+        const scrolledAboveSeparator = !!lastReadTime && lastRenderedMessageTime < lastReadTime;
         setShow(showAlways
             ? scrolledBelowSeparator || scrolledAboveSeparator
             : scrolledBelowSeparator);

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

@@ -1,14 +1,13 @@
 import type { UserResponse } from 'stream-chat';
-import type { StreamMessage } from '../../../context/ChannelStateContext';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-type UseLastReadDataParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    messages: StreamMessage<StreamChatGenerics>[];
+import type { RenderedMessage } from '../utils';
+type UseLastReadDataParams = {
+    messages: RenderedMessage[];
     returnAllReadData: boolean;
     userID: string | undefined;
     read?: Record<string, {
         last_read: Date;
-        user: UserResponse<StreamChatGenerics>;
+        user: UserResponse;
     }>;
 };
-export declare const useLastReadData: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: UseLastReadDataParams<StreamChatGenerics>) => Record<string, UserResponse<StreamChatGenerics>[]>;
+export declare const useLastReadData: (props: UseLastReadDataParams) => Record<string, UserResponse[]>;
 export {};

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

@@ -1,6 +1,10 @@
 import { useMemo } from 'react';
+import { isLocalMessage } from '../utils';
 import { getReadStates } from '../utils';
 export const useLastReadData = (props) => {
     const { messages, read, returnAllReadData, userID } = props;
-    return useMemo(() => getReadStates(messages.filter(({ user }) => user?.id === userID), read, returnAllReadData), [messages, read, returnAllReadData, userID]);
+    return useMemo(() => {
+        const ownLocalMessages = messages.filter((msg) => isLocalMessage(msg) && msg.user?.id === userID);
+        return getReadStates(ownLocalMessages, read, returnAllReadData);
+    }, [messages, read, returnAllReadData, userID]);
 };

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

@@ -1,4 +1,3 @@
-import type { DefaultStreamChatGenerics } from '../../../types';
 type UseMarkReadParams = {
     isMessageListScrolledToBottom: boolean;
     messageListIsThread: boolean;
@@ -13,5 +12,5 @@ type UseMarkReadParams = {
  * @param messageListIsThread
  * @param wasChannelMarkedUnread
  */
-export declare const useMarkRead: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread, }: UseMarkReadParams) => void;
+export declare const useMarkRead: ({ isMessageListScrolledToBottom, messageListIsThread, wasMarkedUnread, }: UseMarkReadParams) => void;
 export {};

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

@@ -1,33 +1,33 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import type { UserResponse } from 'stream-chat';
-import { GroupStyle } from './utils';
-import { ComponentContextValue, CustomClasses } from '../../context';
-import type { ChannelUnreadUiState, DefaultStreamChatGenerics } from '../../types';
-import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { GroupStyle, RenderedMessage } from './utils';
 import type { MessageProps } from '../Message';
-export interface RenderMessagesOptions<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
-    components: ComponentContextValue<StreamChatGenerics>;
+import type { ComponentContextValue, CustomClasses } from '../../context';
+import type { ChannelUnreadUiState } from '../../types';
+export interface RenderMessagesOptions {
+    components: ComponentContextValue;
     lastReceivedMessageId: string | null;
     messageGroupStyles: Record<string, GroupStyle>;
-    messages: Array<StreamMessage<StreamChatGenerics>>;
+    messages: Array<RenderedMessage>;
     /**
      * Object mapping message IDs of own messages to the users who read those messages.
      */
-    readData: Record<string, Array<UserResponse<StreamChatGenerics>>>;
+    readData: Record<string, Array<UserResponse>>;
     /**
      * Props forwarded to the Message component.
      */
-    sharedMessageProps: SharedMessageProps<StreamChatGenerics>;
+    sharedMessageProps: SharedMessageProps;
     /**
      * Current user's channel read state used to render components reflecting unread state.
      * It does not reflect the back-end state if a channel is marked read on mount.
      * This is in order to keep the unread UI when an unread channel is open.
      */
-    channelUnreadUiState?: ChannelUnreadUiState<StreamChatGenerics>;
+    channelUnreadUiState?: ChannelUnreadUiState;
     customClasses?: CustomClasses;
 }
-export type SharedMessageProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<MessageProps<StreamChatGenerics>, MessagePropsToOmit>;
-export type MessageRenderer<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (options: RenderMessagesOptions<StreamChatGenerics>) => Array<ReactNode>;
+export type SharedMessageProps = Omit<MessageProps, MessagePropsToOmit>;
+export type MessageRenderer = (options: RenderMessagesOptions) => Array<ReactNode>;
 type MessagePropsToOmit = 'channel' | 'groupStyles' | 'initialMessage' | 'lastReceivedId' | 'message' | 'readBy';
-export declare function defaultRenderMessages<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions<StreamChatGenerics>): React.JSX.Element[];
+export declare function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }: RenderMessagesOptions): React.JSX.Element[];
 export {};

package/dist/components/MessageList/renderMessages.js

@@ -1,10 +1,9 @@
 import React, { Fragment } from 'react';
-import { getIsFirstUnreadMessage, isDateSeparatorMessage } from './utils';
+import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';
 import { Message } from '../Message';
 import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
 import { UnreadMessagesSeparator as DefaultUnreadMessagesSeparator } from './UnreadMessagesSeparator';
-import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 export function defaultRenderMessages({ channelUnreadUiState, components, customClasses, lastReceivedMessageId: lastReceivedId, messageGroupStyles, messages, readData, sharedMessageProps: messageProps, }) {
     const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
@@ -16,12 +15,14 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
             renderedMessages.push(React.createElement("li", { key: `${message.date.toISOString()}-i` },
                 React.createElement(DateSeparator, { date: message.date, formatDate: messageProps.formatDate, unread: message.unread })));
         }
-        else if (message.customType === CUSTOM_MESSAGE_TYPE.intro && HeaderComponent) {
-            renderedMessages.push(React.createElement("li", { key: 'intro' },
-                React.createElement(HeaderComponent, null)));
+        else if (isIntroMessage(message)) {
+            if (HeaderComponent) {
+                renderedMessages.push(React.createElement("li", { key: 'intro' },
+                    React.createElement(HeaderComponent, null)));
+            }
         }
         else if (message.type === 'system') {
-            renderedMessages.push(React.createElement("li", { "data-message-id": message.id, key: message.id || message.created_at },
+            renderedMessages.push(React.createElement("li", { "data-message-id": message.id, key: message.id || message.created_at.toISOString() },
                 React.createElement(MessageSystem, { message: message })));
         }
         else {
@@ -39,7 +40,7 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
                 previousMessage,
                 unreadMessageCount: channelUnreadUiState?.unread_messages,
             });
-            renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at },
+            renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at.toISOString() },
                 isFirstUnreadMessage && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
                     React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages }))),
                 React.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass },

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

@@ -1,8 +1,18 @@
 /// <reference types="react" />
 import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
-import type { MessageLabel, UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { LocalMessage, MessageLabel, UserResponse } from 'stream-chat';
+type IntroMessage = {
+    customType: typeof CUSTOM_MESSAGE_TYPE.intro;
+    id: string;
+};
+type DateSeparatorMessage = {
+    customType: typeof CUSTOM_MESSAGE_TYPE.date;
+    date: Date;
+    id: string;
+    type: MessageLabel;
+    unread: boolean;
+};
+export type RenderedMessage = LocalMessage | DateSeparatorMessage | IntroMessage;
 type ProcessMessagesContext = {
     /** the connected user ID */
     userId: string;
@@ -15,22 +25,22 @@ type ProcessMessagesContext = {
     /** Sets the threshold after everything is considered unread */
     lastRead?: Date | null;
 };
-export type ProcessMessagesParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ProcessMessagesContext & {
-    messages: StreamMessage<StreamChatGenerics>[];
+export type ProcessMessagesParams = ProcessMessagesContext & {
+    messages: LocalMessage[];
     reviewProcessedMessage?: (params: {
         /** array of messages representing the changes applied around a given processed message */
-        changes: StreamMessage<StreamChatGenerics>[];
+        changes: RenderedMessage[];
         /** configuration params and information forwarded from `processMessages` */
         context: ProcessMessagesContext;
         /** index of the processed message in the original messages array */
         index: number;
         /** array of messages retrieved from the back-end */
-        messages: StreamMessage<StreamChatGenerics>[];
+        messages: LocalMessage[];
         /** newly built array of messages to be later rendered */
-        processedMessages: StreamMessage<StreamChatGenerics>[];
-    }) => StreamMessage<StreamChatGenerics>[];
+        processedMessages: RenderedMessage[];
+    }) => LocalMessage[];
     /** Signals whether to separate giphy preview as well as used to set the giphy preview state */
-    setGiphyPreviewMessage?: React.Dispatch<React.SetStateAction<StreamMessage<StreamChatGenerics> | undefined>>;
+    setGiphyPreviewMessage?: React.Dispatch<React.SetStateAction<LocalMessage | undefined>>;
 };
 /**
  * processMessages - Transform the input message list according to config parameters
@@ -46,35 +56,31 @@ export type ProcessMessagesParams<StreamChatGenerics extends DefaultStreamChatGe
  *
  * The only required params are messages and userId, the rest are config params:
  *
- * @return {StreamMessage<StreamChatGenerics>[]} Transformed list of messages
+ * @return {LocalMessage[]} Transformed list of messages
  */
-export declare const processMessages: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(params: ProcessMessagesParams<StreamChatGenerics>) => StreamMessage<StreamChatGenerics>[];
+export declare const processMessages: (params: ProcessMessagesParams) => RenderedMessage[];
+export declare const makeIntroMessage: () => IntroMessage;
 export declare const makeDateMessageId: (date?: string | Date) => string;
-export declare const getLastReceived: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[]) => string | null;
-export declare const getReadStates: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], read: Record<string, {
+export declare const getLastReceived: (messages: RenderedMessage[]) => string | null;
+export declare const getReadStates: (messages: LocalMessage[], read: Record<string, {
     last_read: Date;
-    user: UserResponse<StreamChatGenerics>;
-}> | undefined, returnAllReadData: boolean) => Record<string, UserResponse<StreamChatGenerics>[]>;
-export declare const insertIntro: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(messages: StreamMessage<StreamChatGenerics>[], headerPosition?: number) => StreamMessage<StreamChatGenerics>[];
+    user: UserResponse;
+}> | undefined, returnAllReadData: boolean) => Record<string, UserResponse[]>;
+export declare const insertIntro: (messages: RenderedMessage[], headerPosition?: number) => RenderedMessage[];
 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, maxTimeBetweenGroupedMessages?: number) => GroupStyle;
+export declare const getGroupStyles: (message: RenderedMessage, previousMessage: RenderedMessage, nextMessage: RenderedMessage, 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 = {
-    customType: typeof CUSTOM_MESSAGE_TYPE.date;
-    date: Date;
-    id: string;
-    type: MessageLabel;
-    unread: boolean;
-};
-export declare function isDateSeparatorMessage<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>): message is DateSeparatorMessage;
+export declare function isIntroMessage(message: unknown): message is IntroMessage;
+export declare function isDateSeparatorMessage(message: unknown): message is DateSeparatorMessage;
+export declare function isLocalMessage(message: unknown): message is LocalMessage;
 export declare const getIsFirstUnreadMessage: ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount, }: {
     isFirstMessage: boolean;
-    message: StreamMessage;
+    message: LocalMessage;
     firstUnreadMessageId?: string;
     lastReadDate?: Date;
     lastReadMessageId?: string;
-    previousMessage?: StreamMessage;
+    previousMessage?: RenderedMessage;
     unreadMessageCount?: number;
 }) => boolean;
 export {};