stream-chat-react 12.8.1 → 12.9.0

package/dist/index.browser.cjs

@@ -2757,9 +2757,9 @@ var require_unified = __commonJS({
       return typeof value === "function" && value.prototype && // A function with keys in its prototype is probably a constructor.
       // Classes’ prototype methods are not enumerable, so we check if some value
       // exists in the prototype.
-      (keys2(value.prototype) || name in value.prototype);
+      (keys3(value.prototype) || name in value.prototype);
     }
-    function keys2(value) {
+    function keys3(value) {
       var key;
       for (key in value) {
         return true;
@@ -16321,14 +16321,14 @@ var init_mml_react_esm = __esm({
           this.reset(true);
         }
         exports.keys = function(object) {
-          var keys2 = [];
+          var keys3 = [];
           for (var key in object) {
-            keys2.push(key);
+            keys3.push(key);
           }
-          keys2.reverse();
+          keys3.reverse();
           return function next() {
-            while (keys2.length) {
-              var key2 = keys2.pop();
+            while (keys3.length) {
+              var key2 = keys3.pop();
               if (key2 in object) {
                 next.value = key2;
                 next.done = false;
@@ -17622,6 +17622,7 @@ __export(src_exports, {
   enTranslations: () => en_default,
   esTranslations: () => es_default,
   escapeRegExp: () => escapeRegExp,
+  extractSortValue: () => extractSortValue,
   findLastPinnedChannelIndex: () => findLastPinnedChannelIndex,
   frTranslations: () => fr_default,
   getChannel: () => getChannel,
@@ -17630,6 +17631,7 @@ __export(src_exports, {
   getGroupChannelDisplayInfo: () => getGroupChannelDisplayInfo,
   getGroupStyles: () => getGroupStyles,
   getImages: () => getImages,
+  getIsFirstUnreadMessage: () => getIsFirstUnreadMessage,
   getLastReceived: () => getLastReceived,
   getLatestMessagePreview: () => getLatestMessagePreview,
   getMessageActions: () => getMessageActions,
@@ -18084,16 +18086,16 @@ var import_react7 = require("react");
 
 // src/store/hooks/useStateStore.ts
 var import_react6 = require("react");
-function useStateStore(store, selector6) {
+function useStateStore(store, selector7) {
   const [state, setState] = (0, import_react6.useState)(() => {
     if (!store) return void 0;
-    return selector6(store.getLatestValue());
+    return selector7(store.getLatestValue());
   });
   (0, import_react6.useEffect)(() => {
     if (!store) return;
-    const unsubscribe = store.subscribeWithSelector(selector6, setState);
+    const unsubscribe = store.subscribeWithSelector(selector7, setState);
     return unsubscribe;
-  }, [store, selector6]);
+  }, [store, selector7]);
   return state;
 }
 
@@ -39960,7 +39962,10 @@ var moveChannelUpwards = ({
   const targetChannelExistsWithinList = targetChannelIndex >= 0;
   const targetChannelAlreadyAtTheTop = targetChannelIndex === 0;
   const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-  if (targetChannelAlreadyAtTheTop) return channels;
+  const isTargetChannelPinned = isChannelPinned(channelToMove);
+  if (targetChannelAlreadyAtTheTop || considerPinnedChannels && isTargetChannelPinned) {
+    return channels;
+  }
   const newChannels = [...channels];
   if (targetChannelExistsWithinList) {
     newChannels.splice(targetChannelIndex, 1);
@@ -39977,25 +39982,48 @@ var moveChannelUpwards = ({
   return newChannels;
 };
 var shouldConsiderPinnedChannels = (sort) => {
-  if (!sort) return false;
-  if (!Array.isArray(sort)) return false;
-  const [option] = sort;
-  if (!option?.pinned_at) return false;
-  return Math.abs(option.pinned_at) === 1;
+  const value = extractSortValue({ atIndex: 0, sort, targetKey: "pinned_at" });
+  if (typeof value !== "number") return false;
+  return Math.abs(value) === 1;
+};
+var extractSortValue = ({
+  atIndex,
+  sort,
+  targetKey
+}) => {
+  if (!sort) return null;
+  let option = null;
+  if (Array.isArray(sort)) {
+    option = sort[atIndex] ?? null;
+  } else {
+    let index3 = 0;
+    for (const key in sort) {
+      if (index3 !== atIndex) {
+        index3++;
+        continue;
+      }
+      if (key !== targetKey) {
+        return null;
+      }
+      option = sort;
+      break;
+    }
+  }
+  return option?.[targetKey] ?? null;
 };
 var shouldConsiderArchivedChannels = (filters) => {
   if (!filters) return false;
-  return !filters.archived;
+  return typeof filters.archived === "boolean";
 };
 var isChannelPinned = (channel) => {
   if (!channel) return false;
-  const member = channel.state.membership;
-  return !!member?.pinned_at;
+  const membership = channel.state.membership;
+  return typeof membership.pinned_at === "string";
 };
 var isChannelArchived = (channel) => {
   if (!channel) return false;
-  const member = channel.state.membership;
-  return !!member?.archived_at;
+  const membership = channel.state.membership;
+  return typeof membership.archived_at === "string";
 };
 
 // src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -40858,33 +40886,33 @@ var useChannelListShapeDefaults = () => {
       if (typeof customHandler === "function") {
         return customHandler(setChannels, event);
       }
-      setChannels((channels) => {
-        const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
+      const channelType = event.channel_type;
+      const channelId = event.channel_id;
+      if (!channelType || !channelId) return;
+      setChannels((currentChannels) => {
+        const targetChannel = client.channel(channelType, channelId);
+        const targetChannelIndex = currentChannels.indexOf(targetChannel);
         const targetChannelExistsWithinList = targetChannelIndex >= 0;
-        const targetChannel = channels[targetChannelIndex];
         const isTargetChannelPinned = isChannelPinned(targetChannel);
         const isTargetChannelArchived = isChannelArchived(targetChannel);
         const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
         const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
         if (
-          // target channel is archived
-          isTargetChannelArchived && considerArchivedChannels || // target channel is pinned
-          isTargetChannelPinned && considerPinnedChannels || // list order is locked
+          // filter is defined, target channel is archived and filter option is set to false
+          considerArchivedChannels && isTargetChannelArchived && !filters.archived || // filter is defined, target channel isn't archived and filter option is set to true
+          considerArchivedChannels && !isTargetChannelArchived && filters.archived || // sort option is defined, target channel is pinned
+          considerPinnedChannels && isTargetChannelPinned || // list order is locked
           lockChannelOrder || // target channel is not within the loaded list and loading from cache is disallowed
           !targetChannelExistsWithinList && !allowNewMessagesFromUnfilteredChannels
         ) {
-          return channels;
-        }
-        const channelToMove = channels[targetChannelIndex] ?? (allowNewMessagesFromUnfilteredChannels && event.channel_type ? client.channel(event.channel_type, event.channel_id) : null);
-        if (channelToMove) {
-          return moveChannelUpwards({
-            channels,
-            channelToMove,
-            channelToMoveIndexWithinChannels: targetChannelIndex,
-            sort
-          });
+          return currentChannels;
         }
-        return channels;
+        return moveChannelUpwards({
+          channels: currentChannels,
+          channelToMove: targetChannel,
+          channelToMoveIndexWithinChannels: targetChannelIndex,
+          sort
+        });
       });
     },
     [client]
@@ -40910,7 +40938,7 @@ var useChannelListShapeDefaults = () => {
         type: event.channel.type
       });
       const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
-      if (isChannelArchived(channel) && considerArchivedChannels) {
+      if (isChannelArchived(channel) && considerArchivedChannels && !filters.archived) {
         return;
       }
       if (!allowNewMessagesFromUnfilteredChannels) {
@@ -40932,26 +40960,33 @@ var useChannelListShapeDefaults = () => {
       allowNewMessagesFromUnfilteredChannels,
       customHandler,
       event,
-      setChannels
+      setChannels,
+      sort
     }) => {
       if (typeof customHandler === "function") {
         return customHandler(setChannels, event);
       }
-      if (allowNewMessagesFromUnfilteredChannels && event.channel?.type) {
-        const channel = await getChannel({
-          client,
-          id: event.channel.id,
-          members: event.channel.members?.reduce((acc, { user, user_id }) => {
-            const userId = user_id || user?.id;
-            if (userId) {
-              acc.push(userId);
-            }
-            return acc;
-          }, []),
-          type: event.channel.type
-        });
-        setChannels((channels) => (0, import_lodash11.default)([channel, ...channels], "cid"));
+      if (!event.channel || !allowNewMessagesFromUnfilteredChannels) {
+        return;
       }
+      const channel = await getChannel({
+        client,
+        id: event.channel.id,
+        members: event.channel.members?.reduce((newMembers, { user, user_id }) => {
+          const userId = user_id || user?.id;
+          if (userId) newMembers.push(userId);
+          return newMembers;
+        }, []),
+        type: event.channel.type
+      });
+      setChannels(
+        (channels) => moveChannelUpwards({
+          channels,
+          channelToMove: channel,
+          channelToMoveIndexWithinChannels: -1,
+          sort
+        })
+      );
     },
     [client]
   );
@@ -40969,29 +41004,37 @@ var useChannelListShapeDefaults = () => {
     []
   );
   const handleMemberUpdated = (0, import_react101.useCallback)(
-    ({ event, lockChannelOrder, setChannels, sort }) => {
+    ({
+      event,
+      filters,
+      lockChannelOrder,
+      setChannels,
+      sort
+    }) => {
       if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
         return;
       }
-      const member = event.member;
       const channelType = event.channel_type;
       const channelId = event.channel_id;
       const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
-      const pinnedAtSort = Array.isArray(sort) ? sort[0]?.pinned_at ?? null : null;
+      const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+      const pinnedAtSort = extractSortValue({ atIndex: 0, sort, targetKey: "pinned_at" });
       setChannels((currentChannels) => {
         const targetChannel = client.channel(channelType, channelId);
         const targetChannelIndex = currentChannels.indexOf(targetChannel);
         const targetChannelExistsWithinList = targetChannelIndex >= 0;
+        const isTargetChannelArchived = isChannelArchived(targetChannel);
+        const isTargetChannelPinned = isChannelPinned(targetChannel);
         if (!considerPinnedChannels || lockChannelOrder) return currentChannels;
         const newChannels = [...currentChannels];
         if (targetChannelExistsWithinList) {
           newChannels.splice(targetChannelIndex, 1);
         }
-        if (typeof member.archived_at === "string") {
+        if (considerArchivedChannels && isTargetChannelArchived && !filters.archived || considerArchivedChannels && !isTargetChannelArchived && filters.archived) {
           return newChannels;
         }
         let lastPinnedChannelIndex = null;
-        if (pinnedAtSort === 1 || pinnedAtSort === -1 && !member.pinned_at) {
+        if (pinnedAtSort === 1 || pinnedAtSort === -1 && !isTargetChannelPinned) {
           lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
         }
         const newTargetChannelIndex = typeof lastPinnedChannelIndex === "number" ? lastPinnedChannelIndex + 1 : 0;
@@ -41192,6 +41235,7 @@ var usePrepareShapeHandlers = ({
       case "member.updated":
         defaults.handleMemberUpdated({
           event,
+          filters,
           lockChannelOrder,
           setChannels,
           sort
@@ -41675,24 +41719,41 @@ var useUserPresenceChangedListener = (setChannels) => {
   }, [client, setChannels]);
 };
 
-// src/components/ChannelList/hooks/useChannelMembershipState.ts
+// src/components/ChannelList/hooks/useSelectedChannelState.ts
 var import_react113 = require("react");
-var useChannelMembershipState = (channel) => {
-  const [membership, setMembership] = (0, import_react113.useState)(
-    channel?.state.membership || {}
-  );
-  const { client } = useChatContext();
-  (0, import_react113.useEffect)(() => {
-    if (!channel) return;
-    const subscriptions = ["member.updated"].map(
-      (v) => client.on(v, () => {
-        setMembership(channel.state.membership);
-      })
-    );
-    return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
-  }, [client, channel]);
-  return membership;
+var import_shim = require("use-sync-external-store/shim");
+var noop = () => {
 };
+function useSelectedChannelState({
+  channel,
+  stateChangeEventKeys = ["all"],
+  selector: selector7
+}) {
+  const subscribe = (0, import_react113.useCallback)(
+    (onStoreChange) => {
+      if (!channel) return noop;
+      const subscriptions = stateChangeEventKeys.map(
+        (et) => channel.on(et, () => {
+          onStoreChange(selector7(channel));
+        })
+      );
+      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    },
+    [channel, selector7, stateChangeEventKeys]
+  );
+  const getSnapshot = (0, import_react113.useCallback)(() => {
+    if (!channel) return void 0;
+    return selector7(channel);
+  }, [channel, selector7]);
+  return (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot);
+}
+
+// src/components/ChannelList/hooks/useChannelMembershipState.ts
+var selector = (c) => c.state.membership;
+var keys2 = ["member.updated"];
+function useChannelMembershipState(channel) {
+  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys2 });
+}
 
 // src/components/ChannelPreview/icons.tsx
 var import_react114 = __toESM(require("react"));
@@ -42177,12 +42238,12 @@ var ThreadAdapter = ({ children }) => {
   useActiveThread({ activeThread });
   return /* @__PURE__ */ import_react122.default.createElement(ThreadProvider, { thread: activeThread }, children);
 };
-var selector = ({ unreadThreadCount }) => ({
+var selector2 = ({ unreadThreadCount }) => ({
   unreadThreadCount
 });
 var ChatViewSelector = () => {
   const { client } = useChatContext();
-  const { unreadThreadCount } = useStateStore(client.threads.state, selector);
+  const { unreadThreadCount } = useStateStore(client.threads.state, selector2);
   const { activeChatView, setActiveChatView } = (0, import_react122.useContext)(ChatViewContext);
   return /* @__PURE__ */ import_react122.default.createElement("div", { className: "str-chat__chat-view__selector" }, /* @__PURE__ */ import_react122.default.createElement(
     "button",
@@ -42244,7 +42305,7 @@ var getTitleFromMessage = ({
 var ThreadListItemUI = (props) => {
   const { client } = useChatContext();
   const thread = useThreadListItemContext();
-  const selector6 = (0, import_react123.useCallback)(
+  const selector7 = (0, import_react123.useCallback)(
     (nextValue) => ({
       channel: nextValue.channel,
       deletedAt: nextValue.deletedAt,
@@ -42256,7 +42317,7 @@ var ThreadListItemUI = (props) => {
   );
   const { channel, deletedAt, latestReply, ownUnreadMessageCount, parentMessage } = useStateStore(
     thread.state,
-    selector6
+    selector7
   );
   const { displayTitle: channelDisplayTitle } = useChannelPreviewInfo({ channel });
   const { activeThread, setActiveThread } = useThreadsViewContext();
@@ -42293,12 +42354,12 @@ var ThreadListEmptyPlaceholder = () => /* @__PURE__ */ import_react125.default.c
 
 // src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx
 var import_react126 = __toESM(require("react"));
-var selector2 = (nextValue) => ({
+var selector3 = (nextValue) => ({
   unseenThreadIds: nextValue.unseenThreadIds
 });
 var ThreadListUnseenThreadsBanner = () => {
   const { client } = useChatContext();
-  const { unseenThreadIds } = useStateStore(client.threads.state, selector2);
+  const { unseenThreadIds } = useStateStore(client.threads.state, selector3);
   if (!unseenThreadIds.length) return null;
   return /* @__PURE__ */ import_react126.default.createElement("div", { className: "str-chat__unseen-threads-banner" }, unseenThreadIds.length, " unread threads", /* @__PURE__ */ import_react126.default.createElement(
     "button",
@@ -42312,19 +42373,19 @@ var ThreadListUnseenThreadsBanner = () => {
 
 // src/components/Threads/ThreadList/ThreadListLoadingIndicator.tsx
 var import_react127 = __toESM(require("react"));
-var selector3 = (nextValue) => ({
+var selector4 = (nextValue) => ({
   isLoadingNext: nextValue.pagination.isLoadingNext
 });
 var ThreadListLoadingIndicator = () => {
   const { LoadingIndicator: LoadingIndicator2 = LoadingIndicator } = useComponentContext();
   const { client } = useChatContext();
-  const { isLoadingNext } = useStateStore(client.threads.state, selector3);
+  const { isLoadingNext } = useStateStore(client.threads.state, selector4);
   if (!isLoadingNext) return null;
   return /* @__PURE__ */ import_react127.default.createElement("div", { className: "str-chat__thread-list-loading-indicator" }, /* @__PURE__ */ import_react127.default.createElement(LoadingIndicator2, null));
 };
 
 // src/components/Threads/ThreadList/ThreadList.tsx
-var selector4 = (nextValue) => ({ threads: nextValue.threads });
+var selector5 = (nextValue) => ({ threads: nextValue.threads });
 var computeItemKey = (_, item2) => item2.id;
 var useThreadList = () => {
   const { client } = useChatContext();
@@ -42353,7 +42414,7 @@ var ThreadList = ({ virtuosoProps }) => {
     ThreadListLoadingIndicator: ThreadListLoadingIndicator2 = ThreadListLoadingIndicator,
     ThreadListUnseenThreadsBanner: ThreadListUnseenThreadsBanner2 = ThreadListUnseenThreadsBanner
   } = useComponentContext();
-  const { threads } = useStateStore(client.threads.state, selector4);
+  const { threads } = useStateStore(client.threads.state, selector5);
   useThreadList();
   return /* @__PURE__ */ import_react128.default.createElement("div", { className: "str-chat__thread-list-container" }, /* @__PURE__ */ import_react128.default.createElement(ThreadListUnseenThreadsBanner2, null), /* @__PURE__ */ import_react128.default.createElement(
     import_react_virtuoso.Virtuoso,
@@ -46571,7 +46632,7 @@ var UnMemoizedChatAutoComplete = (props) => {
       closeCommandsList: messageInput.closeCommandsList,
       closeMentionsList: messageInput.closeMentionsList,
       containerClassName: "str-chat__textarea str-chat__message-textarea-react-host",
-      disabled: disabled || !!cooldownRemaining,
+      disabled: (props.disabled ?? disabled) || !!cooldownRemaining,
       disableMentions: messageInput.disableMentions,
       grow: messageInput.grow,
       handleSubmit: props.handleSubmit || messageInput.handleSubmit,
@@ -47819,6 +47880,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) => {
@@ -48175,7 +48251,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;
@@ -48193,17 +48268,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);
     };
   }, [
@@ -48638,6 +48713,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)) {
@@ -48665,16 +48741,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],
@@ -48683,8 +48760,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;
@@ -49284,15 +49362,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,
@@ -49315,7 +49394,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
@@ -50792,7 +50871,7 @@ var useChat = ({
     if (!client) return;
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
-      client.setUserAgent(`stream-chat-react-12.8.1-${userAgent}`);
+      client.setUserAgent(`stream-chat-react-12.9.0-${userAgent}`);
     }
     client.threads.registerSubscriptions();
     client.polls.registerSubscriptions();
@@ -51082,7 +51161,7 @@ var Thread = (props) => {
     /* @__PURE__ */ import_react270.default.createElement(ThreadInner, { ...props, key: `thread-${(thread ?? threadInstance)?.id}-${channel?.cid}` })
   );
 };
-var selector5 = (nextValue) => ({
+var selector6 = (nextValue) => ({
   isLoadingNext: nextValue.pagination.isLoadingNext,
   isLoadingPrev: nextValue.pagination.isLoadingPrev,
   parentMessage: nextValue.parentMessage,
@@ -51102,7 +51181,7 @@ var ThreadInner = (props) => {
     virtualized
   } = props;
   const threadInstance = useThreadContext();
-  const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector5) ?? {};
+  const { isLoadingNext, isLoadingPrev, parentMessage, replies } = useStateStore(threadInstance?.state, selector6) ?? {};
   const {
     thread,
     threadHasMore,