stream-chat-react 12.8.0 → 12.8.2

package/dist/components/Chat/hooks/useChat.js

@@ -28,7 +28,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
             // the upper-case text between double underscores is replaced with the actual semantic version of the library
-            client.setUserAgent(`stream-chat-react-12.8.0-${userAgent}`);
+            client.setUserAgent(`stream-chat-react-12.8.2-${userAgent}`);
         }
         client.threads.registerSubscriptions();
         client.polls.registerSubscriptions();

package/dist/components/Dialog/DialogManager.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { StateStore } from 'stream-chat';
 export type GetOrCreateDialogParams = {
     id: DialogId;
@@ -8,6 +9,7 @@ export type Dialog = {
     id: DialogId;
     isOpen: boolean | undefined;
     open: (zIndex?: number) => void;
+    removalTimeout: NodeJS.Timeout | undefined;
     remove: () => void;
     toggle: (closeAll?: boolean) => void;
 };
@@ -39,5 +41,11 @@ export declare class DialogManager {
     closeAll(): void;
     toggle(params: GetOrCreateDialogParams, closeAll?: boolean): void;
     remove(id: DialogId): void;
+    /**
+     * Marks the dialog state as unused. If the dialog id is referenced again quickly,
+     * the state will not be removed. Otherwise, the state will be removed after
+     * a short timeout.
+     */
+    markForRemoval(id: DialogId): void;
 }
 export {};

package/dist/components/Dialog/DialogManager.js

@@ -35,6 +35,7 @@ export class DialogManager {
                 open: () => {
                     this.open({ id });
                 },
+                removalTimeout: undefined,
                 remove: () => {
                     this.remove(id);
                 },
@@ -47,6 +48,21 @@ export class DialogManager {
                 ...{ dialogsById: { ...current.dialogsById, [id]: dialog } },
             }));
         }
+        if (dialog.removalTimeout) {
+            clearTimeout(dialog.removalTimeout);
+            this.state.next((current) => ({
+                ...current,
+                ...{
+                    dialogsById: {
+                        ...current.dialogsById,
+                        [id]: {
+                            ...dialog,
+                            removalTimeout: undefined,
+                        },
+                    },
+                },
+            }));
+        }
         return dialog;
     }
     open(params, closeRest) {
@@ -86,6 +102,9 @@ export class DialogManager {
         const dialog = state.dialogsById[id];
         if (!dialog)
             return;
+        if (dialog.removalTimeout) {
+            clearTimeout(dialog.removalTimeout);
+        }
         this.state.next((current) => {
             const newDialogs = { ...current.dialogsById };
             delete newDialogs[id];
@@ -95,4 +114,27 @@ export class DialogManager {
             };
         });
     }
+    /**
+     * Marks the dialog state as unused. If the dialog id is referenced again quickly,
+     * the state will not be removed. Otherwise, the state will be removed after
+     * a short timeout.
+     */
+    markForRemoval(id) {
+        const dialog = this.state.getLatestValue().dialogsById[id];
+        if (!dialog) {
+            return;
+        }
+        this.state.next((current) => ({
+            ...current,
+            dialogsById: {
+                ...current.dialogsById,
+                [id]: {
+                    ...dialog,
+                    removalTimeout: setTimeout(() => {
+                        this.remove(id);
+                    }, 16),
+                },
+            },
+        }));
+    }
 }

package/dist/components/Dialog/hooks/useDialog.js

@@ -4,7 +4,11 @@ import { useStateStore } from '../../../store';
 export const useDialog = ({ id }) => {
     const { dialogManager } = useDialogManager();
     useEffect(() => () => {
-        dialogManager.remove(id);
+        // Since this cleanup can run even if the component is still mounted
+        // and dialog id is unchanged (e.g. in <StrictMode />), it's safer to
+        // mark state as unused and only remove it after a timeout, rather than
+        // to remove it immediately.
+        dialogManager.markForRemoval(id);
     }, [dialogManager, id]);
     return dialogManager.getOrCreate({ id });
 };

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 { isDateSeparatorMessage } from './utils';
+import { getIsFirstUnreadMessage, isDateSeparatorMessage } from './utils';
 const PREPEND_OFFSET = 10 ** 7;
 export function calculateItemIndex(virtuosoIndex, numItemsPrepended) {
     return virtuosoIndex + numItemsPrepended - PREPEND_OFFSET;
@@ -72,24 +72,17 @@ export const messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
             (maybePrevMessage && isMessageEdited(maybePrevMessage)));
     const endOfGroup = shouldGroupByUser &&
         (message.user?.id !== maybeNextMessage?.user?.id || isMessageEdited(message));
-    const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-    const lastReadTimestamp = lastReadDate?.getTime();
-    const isFirstMessage = streamMessageIndex === 0;
-    const isNewestMessage = lastReadMessageId === lastReceivedMessageId;
-    const isLastReadMessage = message.id === lastReadMessageId ||
-        (!unreadMessageCount && createdAtTimestamp === lastReadTimestamp);
-    const isFirstUnreadMessage = firstUnreadMessageId === message.id ||
-        (!!unreadMessageCount &&
-            createdAtTimestamp &&
-            lastReadTimestamp &&
-            createdAtTimestamp > lastReadTimestamp &&
-            isFirstMessage);
-    const showUnreadSeparatorAbove = !lastReadMessageId && isFirstUnreadMessage;
-    const showUnreadSeparatorBelow = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || !!unreadMessageCount);
+    const isFirstUnreadMessage = getIsFirstUnreadMessage({
+        firstUnreadMessageId,
+        isFirstMessage: streamMessageIndex === 0,
+        lastReadDate,
+        lastReadMessageId,
+        message,
+        previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : undefined,
+        unreadMessageCount,
+    });
     return (React.createElement(React.Fragment, null,
-        showUnreadSeparatorAbove && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
+        isFirstUnreadMessage && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount }))),
-        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList }),
-        showUnreadSeparatorBelow && (React.createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
-            React.createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
+        React.createElement(Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: virtuosoRef.current?.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, formatDate: formatDate, groupedByUser: groupedByUser, groupStyles: [messageGroupStyles[message.id] ?? ''], lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, openThread: openThread, reactionDetailsSort: reactionDetailsSort, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: threadList })));
 };

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

@@ -26,7 +26,6 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
                 markRead();
         };
         const handleMessageNew = (event) => {
-            const newMessageToCurrentChannel = event.cid === channel.cid;
             const isOwnMessage = event.user?.id && event.user.id === client.user?.id;
             const mainChannelUpdated = !event.message?.parent_id || event.message?.show_in_channel;
             if (isOwnMessage)
@@ -45,13 +44,11 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
                     };
                 });
             }
-            else if (newMessageToCurrentChannel &&
-                mainChannelUpdated &&
-                shouldMarkRead(channel.countUnread())) {
+            else if (mainChannelUpdated && shouldMarkRead(channel.countUnread())) {
                 markRead();
             }
         };
-        client.on('message.new', handleMessageNew);
+        channel.on('message.new', handleMessageNew);
         document.addEventListener('visibilitychange', onVisibilityChange);
         const hasScrolledToBottom = previousRenderMessageListScrolledToBottom.current !== isMessageListScrolledToBottom &&
             isMessageListScrolledToBottom;
@@ -59,7 +56,7 @@ export const useMarkRead = ({ isMessageListScrolledToBottom, messageListIsThread
             markRead();
         previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
         return () => {
-            client.off('message.new', handleMessageNew);
+            channel.off('message.new', handleMessageNew);
             document.removeEventListener('visibilitychange', onVisibilityChange);
         };
     }, [

package/dist/components/MessageList/renderMessages.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { isDateSeparatorMessage } from './utils';
+import { getIsFirstUnreadMessage, isDateSeparatorMessage } from './utils';
 import { Message } from '../Message';
 import { DateSeparator as DefaultDateSeparator } from '../DateSeparator';
 import { EventComponent as DefaultMessageSystem } from '../EventComponent';
@@ -9,6 +9,7 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
     const { DateSeparator = DefaultDateSeparator, HeaderComponent, MessageSystem = DefaultMessageSystem, UnreadMessagesSeparator = DefaultUnreadMessagesSeparator, } = components;
     const renderedMessages = [];
     let firstMessage;
+    let previousMessage = undefined;
     for (let index = 0; index < messages.length; index++) {
         const message = messages[index];
         if (isDateSeparatorMessage(message)) {
@@ -29,29 +30,21 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
             }
             const groupStyles = messageGroupStyles[message.id] || '';
             const messageClass = customClasses?.message || `str-chat__li str-chat__li--${groupStyles}`;
-            const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
-            const lastReadTimestamp = channelUnreadUiState?.last_read.getTime();
-            const isFirstMessage = firstMessage?.id && firstMessage.id === message.id;
-            const isNewestMessage = index === messages.length - 1;
-            const isLastReadMessage = channelUnreadUiState?.last_read_message_id === message.id ||
-                (!channelUnreadUiState?.unread_messages && createdAtTimestamp === lastReadTimestamp);
-            const isFirstUnreadMessage = channelUnreadUiState?.first_unread_message_id === message.id ||
-                (!!channelUnreadUiState?.unread_messages &&
-                    !!createdAtTimestamp &&
-                    !!lastReadTimestamp &&
-                    createdAtTimestamp > lastReadTimestamp &&
-                    isFirstMessage);
-            const showUnreadSeparatorAbove = !channelUnreadUiState?.last_read_message_id && isFirstUnreadMessage;
-            const showUnreadSeparatorBelow = isLastReadMessage &&
-                !isNewestMessage &&
-                (channelUnreadUiState?.first_unread_message_id || !!channelUnreadUiState?.unread_messages); // this part has to be here as we do not mark channel read when sending a message
+            const isFirstUnreadMessage = getIsFirstUnreadMessage({
+                firstUnreadMessageId: channelUnreadUiState?.first_unread_message_id,
+                isFirstMessage: !!firstMessage?.id && firstMessage.id === message.id,
+                lastReadDate: channelUnreadUiState?.last_read,
+                lastReadMessageId: channelUnreadUiState?.last_read_message_id,
+                message,
+                previousMessage,
+                unreadMessageCount: channelUnreadUiState?.unread_messages,
+            });
             renderedMessages.push(React.createElement(Fragment, { key: message.id || message.created_at },
-                showUnreadSeparatorAbove && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
+                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 },
-                    React.createElement(Message, { groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps })),
-                showUnreadSeparatorBelow && UnreadMessagesSeparator && (React.createElement("li", { className: 'str-chat__li str-chat__unread-messages-separator-wrapper' },
-                    React.createElement(UnreadMessagesSeparator, { unreadCount: channelUnreadUiState?.unread_messages })))));
+                    React.createElement(Message, { groupStyles: [groupStyles], lastReceivedId: lastReceivedId, message: message, readBy: readData[message.id] || [], ...messageProps }))));
+            previousMessage = message;
         }
     }
     return renderedMessages;

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

@@ -68,4 +68,13 @@ type DateSeparatorMessage = {
     unread: boolean;
 };
 export declare function isDateSeparatorMessage<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message: StreamMessage<StreamChatGenerics>): message is DateSeparatorMessage;
+export declare const getIsFirstUnreadMessage: ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount, }: {
+    isFirstMessage: boolean;
+    message: StreamMessage;
+    firstUnreadMessageId?: string;
+    lastReadDate?: Date;
+    lastReadMessageId?: string;
+    previousMessage?: StreamMessage;
+    unreadMessageCount?: number;
+}) => boolean;
 export {};

package/dist/components/MessageList/utils.js

@@ -241,3 +241,11 @@ export const hasNotMoreMessages = (returnedCountMessages, limit) => returnedCoun
 export function isDateSeparatorMessage(message) {
     return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
 }
+export const getIsFirstUnreadMessage = ({ firstUnreadMessageId, isFirstMessage, lastReadDate, lastReadMessageId, message, previousMessage, unreadMessageCount = 0, }) => {
+    const createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+    const lastReadTimestamp = lastReadDate?.getTime();
+    const messageIsUnread = !!createdAtTimestamp && !!lastReadTimestamp && createdAtTimestamp > lastReadTimestamp;
+    const previousMessageIsLastRead = !!lastReadMessageId && lastReadMessageId === previousMessage?.id;
+    return (firstUnreadMessageId === message.id ||
+        (!!unreadMessageCount && messageIsUnread && (isFirstMessage || previousMessageIsLastRead)));
+};

package/dist/experimental/index.browser.cjs

@@ -122,7 +122,7 @@ var useDialog = ({ id }) => {
   const { dialogManager } = useDialogManager();
   (0, import_react6.useEffect)(
     () => () => {
-      dialogManager.remove(id);
+      dialogManager.markForRemoval(id);
     },
     [dialogManager, id]
   );