stream-chat-react 12.8.0 → 12.8.2

package/dist/index.browser.cjs

@@ -17630,6 +17630,7 @@ __export(src_exports, {
   getGroupChannelDisplayInfo: () => getGroupChannelDisplayInfo,
   getGroupStyles: () => getGroupStyles,
   getImages: () => getImages,
+  getIsFirstUnreadMessage: () => getIsFirstUnreadMessage,
   getLastReceived: () => getLastReceived,
   getLatestMessagePreview: () => getLatestMessagePreview,
   getMessageActions: () => getMessageActions,
@@ -17976,6 +17977,7 @@ var DialogManager = class {
         open: () => {
           this.open({ id });
         },
+        removalTimeout: void 0,
         remove: () => {
           this.remove(id);
         },
@@ -17988,6 +17990,21 @@ var DialogManager = class {
         ...{ dialogsById: { ...current.dialogsById, [id]: dialog } }
       }));
     }
+    if (dialog.removalTimeout) {
+      clearTimeout(dialog.removalTimeout);
+      this.state.next((current) => ({
+        ...current,
+        ...{
+          dialogsById: {
+            ...current.dialogsById,
+            [id]: {
+              ...dialog,
+              removalTimeout: void 0
+            }
+          }
+        }
+      }));
+    }
     return dialog;
   }
   open(params, closeRest) {
@@ -18023,6 +18040,9 @@ var DialogManager = class {
     const state = this.state.getLatestValue();
     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];
@@ -18032,6 +18052,29 @@ var DialogManager = class {
       };
     });
   }
+  /**
+   * 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)
+        }
+      }
+    }));
+  }
 };
 
 // src/components/Dialog/DialogPortal.tsx
@@ -18060,7 +18103,7 @@ var useDialog = ({ id }) => {
   const { dialogManager } = useDialogManager();
   (0, import_react7.useEffect)(
     () => () => {
-      dialogManager.remove(id);
+      dialogManager.markForRemoval(id);
     },
     [dialogManager, id]
   );
@@ -47777,6 +47820,21 @@ var hasNotMoreMessages = (returnedCountMessages, limit) => returnedCountMessages
 function isDateSeparatorMessage(message) {
   return message.customType === CUSTOM_MESSAGE_TYPE.date && !!message.date && isDate(message.date);
 }
+var 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);
+};
 
 // src/components/MessageList/hooks/MessageList/useEnrichedMessages.ts
 var useEnrichedMessages = (args) => {
@@ -48133,7 +48191,6 @@ var useMarkRead = ({
       if (shouldMarkRead(channel.countUnread())) 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) return;
@@ -48151,17 +48208,17 @@ var useMarkRead = ({
             unread_messages: previousUnreadCount + 1
           };
         });
-      } 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;
     if (hasScrolledToBottom && shouldMarkRead(channel.countUnread())) markRead();
     previousRenderMessageListScrolledToBottom.current = isMessageListScrolledToBottom;
     return () => {
-      client.off("message.new", handleMessageNew);
+      channel.off("message.new", handleMessageNew);
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
   }, [
@@ -48596,6 +48653,7 @@ function defaultRenderMessages({
   } = components;
   const renderedMessages = [];
   let firstMessage;
+  let previousMessage = void 0;
   for (let index3 = 0; index3 < messages.length; index3++) {
     const message = messages[index3];
     if (isDateSeparatorMessage(message)) {
@@ -48623,16 +48681,17 @@ function defaultRenderMessages({
       }
       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 = index3 === 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);
+      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(
-        /* @__PURE__ */ import_react246.default.createElement(import_react246.Fragment, { key: message.id || message.created_at }, showUnreadSeparatorAbove && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react246.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react246.default.createElement(UnreadMessagesSeparator2, { unreadCount: channelUnreadUiState?.unread_messages })), /* @__PURE__ */ import_react246.default.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass }, /* @__PURE__ */ import_react246.default.createElement(
+        /* @__PURE__ */ import_react246.default.createElement(import_react246.Fragment, { key: message.id || message.created_at }, isFirstUnreadMessage && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react246.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react246.default.createElement(UnreadMessagesSeparator2, { unreadCount: channelUnreadUiState?.unread_messages })), /* @__PURE__ */ import_react246.default.createElement("li", { className: messageClass, "data-message-id": message.id, "data-testid": messageClass }, /* @__PURE__ */ import_react246.default.createElement(
           Message,
           {
             groupStyles: [groupStyles],
@@ -48641,8 +48700,9 @@ function defaultRenderMessages({
             readBy: readData[message.id] || [],
             ...messageProps
           }
-        )), showUnreadSeparatorBelow && UnreadMessagesSeparator2 && /* @__PURE__ */ import_react246.default.createElement("li", { className: "str-chat__li str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react246.default.createElement(UnreadMessagesSeparator2, { unreadCount: channelUnreadUiState?.unread_messages })))
+        )))
       );
+      previousMessage = message;
     }
   }
   return renderedMessages;
@@ -49242,15 +49302,16 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
   const maybeNextMessage = messageList[streamMessageIndex + 1];
   const firstOfGroup = shouldGroupByUser && (message.user?.id !== maybePrevMessage?.user?.id || 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);
-  return /* @__PURE__ */ import_react256.default.createElement(import_react256.default.Fragment, null, showUnreadSeparatorAbove && /* @__PURE__ */ import_react256.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react256.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })), /* @__PURE__ */ import_react256.default.createElement(
+  const isFirstUnreadMessage = getIsFirstUnreadMessage({
+    firstUnreadMessageId,
+    isFirstMessage: streamMessageIndex === 0,
+    lastReadDate,
+    lastReadMessageId,
+    message,
+    previousMessage: streamMessageIndex ? messageList[streamMessageIndex - 1] : void 0,
+    unreadMessageCount
+  });
+  return /* @__PURE__ */ import_react256.default.createElement(import_react256.default.Fragment, null, isFirstUnreadMessage && /* @__PURE__ */ import_react256.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react256.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })), /* @__PURE__ */ import_react256.default.createElement(
     Message,
     {
       additionalMessageInputProps,
@@ -49273,7 +49334,7 @@ var messageRenderer = (virtuosoIndex, _data, virtuosoContext) => {
       sortReactions,
       threadList
     }
-  ), showUnreadSeparatorBelow && /* @__PURE__ */ import_react256.default.createElement("div", { className: "str-chat__unread-messages-separator-wrapper" }, /* @__PURE__ */ import_react256.default.createElement(UnreadMessagesSeparator2, { unreadCount: unreadMessageCount })));
+  ));
 };
 
 // src/components/MessageList/VirtualizedMessageList.tsx
@@ -50750,7 +50811,7 @@ var useChat = ({
     if (!client) return;
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
-      client.setUserAgent(`stream-chat-react-12.8.0-${userAgent}`);
+      client.setUserAgent(`stream-chat-react-12.8.2-${userAgent}`);
     }
     client.threads.registerSubscriptions();
     client.polls.registerSubscriptions();