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

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

package/dist/components/MessageList/utils.js

@@ -16,7 +16,7 @@ import { isDate } from '../../i18n';
  *
  * 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 const processMessages = (params) => {
     const { messages, reviewProcessedMessage, setGiphyPreviewMessage, ...context } = params;
@@ -70,7 +70,7 @@ export const processMessages = (params) => {
                 (hideDeletedMessages &&
                     previousMessage?.type === 'deleted' &&
                     lastDateSeparator !== messageDate)) &&
-            changes[changes.length - 1]?.customType !== CUSTOM_MESSAGE_TYPE.date // do not show two date separators in a row)
+            !isDateSeparatorMessage(changes[changes.length - 1]) // do not show two date separators in a row)
         ) {
             lastDateSeparator = messageDate;
             changes.push({
@@ -96,6 +96,10 @@ export const processMessages = (params) => {
     }
     return newMessages;
 };
+export const makeIntroMessage = () => ({
+    customType: CUSTOM_MESSAGE_TYPE.intro,
+    id: nanoid(),
+});
 export const makeDateMessageId = (date) => {
     let idSuffix;
     try {
@@ -147,9 +151,7 @@ export const getReadStates = (messages, read = {}, returnAllReadData) => {
 };
 export const insertIntro = (messages, headerPosition) => {
     const newMessages = messages;
-    const intro = {
-        customType: CUSTOM_MESSAGE_TYPE.intro,
-    };
+    const intro = makeIntroMessage();
     // if no headerPosition is set, HeaderComponent will go at the top
     if (!headerPosition) {
         newMessages.unshift(intro);
@@ -162,19 +164,17 @@ export const insertIntro = (messages, headerPosition) => {
     }
     // else loop over the messages
     for (let i = 0; i < messages.length; i += 1) {
-        const message = messages[i];
-        const messageTime = message.created_at && isDate(message.created_at)
-            ? message.created_at.getTime()
+        const messageTime = isDate(messages[i].created_at)
+            ? messages[i].created_at.getTime()
             : null;
-        const nextMessage = messages[i + 1];
-        const nextMessageTime = nextMessage.created_at && isDate(nextMessage.created_at)
-            ? nextMessage.created_at.getTime()
+        const nextMessageTime = isDate(messages[i + 1].created_at)
+            ? messages[i + 1].created_at.getTime()
             : null;
         // header position is smaller than message time so comes after;
         if (messageTime && messageTime < headerPosition) {
             // if header position is also smaller than message time continue;
             if (nextMessageTime && nextMessageTime < headerPosition) {
-                if (messages[i + 1] && messages[i + 1].customType === CUSTOM_MESSAGE_TYPE.date)
+                if (messages[i + 1] && isDateSeparatorMessage(messages[i + 1]))
                     continue;
                 if (!nextMessageTime) {
                     newMessages.push(intro);
@@ -190,15 +190,13 @@ export const insertIntro = (messages, headerPosition) => {
     return newMessages;
 };
 export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser, maxTimeBetweenGroupedMessages) => {
-    if (message.customType === CUSTOM_MESSAGE_TYPE.date)
-        return '';
-    if (message.customType === CUSTOM_MESSAGE_TYPE.intro)
+    if (isDateSeparatorMessage(message) || isIntroMessage(message))
         return '';
     if (noGroupByUser || message.attachments?.length !== 0)
         return 'single';
     const isTopMessage = !previousMessage ||
-        previousMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
-        previousMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
+        isIntroMessage(previousMessage) ||
+        isDateSeparatorMessage(previousMessage) ||
         previousMessage.type === 'system' ||
         previousMessage.type === 'error' ||
         previousMessage.attachments?.length !== 0 ||
@@ -213,8 +211,8 @@ export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByU
                 new Date(previousMessage.created_at).getTime() >
                 maxTimeBetweenGroupedMessages);
     const isBottomMessage = !nextMessage ||
-        nextMessage.customType === CUSTOM_MESSAGE_TYPE.intro ||
-        nextMessage.customType === CUSTOM_MESSAGE_TYPE.date ||
+        isIntroMessage(nextMessage) ||
+        isDateSeparatorMessage(nextMessage) ||
         nextMessage.type === 'system' ||
         nextMessage.type === 'error' ||
         nextMessage.attachments?.length !== 0 ||
@@ -251,11 +249,18 @@ export const getGroupStyles = (message, previousMessage, nextMessage, noGroupByU
 export const hasMoreMessagesProbably = (returnedCountMessages, limit) => returnedCountMessages >= limit;
 // @deprecated
 export const hasNotMoreMessages = (returnedCountMessages, limit) => returnedCountMessages < limit;
+export function isIntroMessage(message) {
+    return message.customType === CUSTOM_MESSAGE_TYPE.intro;
+}
 export function isDateSeparatorMessage(message) {
-    return (message.customType === CUSTOM_MESSAGE_TYPE.date &&
-        !!message.date &&
+    return (message !== null &&
+        typeof message === 'object' &&
+        message.customType === CUSTOM_MESSAGE_TYPE.date &&
         isDate(message.date));
 }
+export function isLocalMessage(message) {
+    return !isDateSeparatorMessage(message) && !isIntroMessage(message);
+}
 export const getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount = 0, }) => {
     // prevent showing unread indicator in threads
     if (message.parent_id)

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 export type ModalProps = {
     /** If true, modal is opened or visible. */
     open: boolean;

package/dist/components/Poll/Poll.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Poll as PollClass } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types';
-export declare const Poll: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ isQuoted, poll, }: {
-    poll: PollClass<StreamChatGenerics>;
+export declare const Poll: ({ isQuoted, poll }: {
+    poll: PollClass;
     isQuoted?: boolean;
 }) => React.JSX.Element | null;

package/dist/components/Poll/Poll.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { PollContent as DefaultPollContent } from './PollContent';
 import { QuotedPoll as DefaultQuotedPoll } from './QuotedPoll';
 import { PollProvider, useComponentContext } from '../../context';
-export const Poll = ({ isQuoted, poll, }) => {
+export const Poll = ({ isQuoted, poll }) => {
     const { PollContent = DefaultPollContent, QuotedPoll = DefaultQuotedPoll } = useComponentContext();
     return poll ? (React.createElement(PollProvider, { poll: poll }, isQuoted ? React.createElement(QuotedPoll, null) : React.createElement(PollContent, null))) : null;
 };

package/dist/components/Poll/PollActions/AddCommentForm.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../../types';
 export type AddCommentFormProps = {
     close: () => void;
     messageId: string;
 };
-export declare const AddCommentForm: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ close, messageId, }: AddCommentFormProps) => React.JSX.Element;
+export declare const AddCommentForm: ({ close, messageId }: AddCommentFormProps) => React.JSX.Element;

package/dist/components/Poll/PollActions/AddCommentForm.js

@@ -2,8 +2,10 @@ import React from 'react';
 import { FormDialog } from '../../Dialog/FormDialog';
 import { useStateStore } from '../../../store';
 import { usePollContext, useTranslationContext } from '../../../context';
-const pollStateSelector = (nextValue) => ({ ownAnswer: nextValue.ownAnswer });
-export const AddCommentForm = ({ close, messageId, }) => {
+const pollStateSelector = (nextValue) => ({
+    ownAnswer: nextValue.ownAnswer,
+});
+export const AddCommentForm = ({ close, messageId }) => {
     const { t } = useTranslationContext('AddCommentForm');
     const { poll } = usePollContext();
     const { ownAnswer } = useStateStore(poll.state, pollStateSelector);