bug: MessageNotification unread messages number is not updated

[MrMole96]

Describe the bug

MessageNotification is not updated after await channel.markRead() func

To Reproduce

Steps to reproduce the behavior:

MessageNotification property

 <Channel
 ...
 MessageNotification={(props: MessageNotificationProps) => {
    console.log("props", props);
          return (
            <div>
              <ScrollToBottomButton {...props} />
            </div>
          );
        }}    

and then inside of SCrollToBottomButton

  const ScrollToBottomButton = ({
  unreadCount,
  isMessageListScrolledToBottom,
  onClick,
}: MessageNotificationProps) => {
  const [isReportModal] = useAtom(isReportModalOpenAtom);
  const [clickedMessage] = useAtom(isMessageClicked);
  const { channel } = useChannelStateContext();
  if (isMessageListScrolledToBottom || clickedMessage || isReportModal) {
    return null;
  }
  return (
    <button
      onClick={async (e) => {
        console.log("chhannel", channel);
        await channel.markRead();
        onClick(e);
      }}
    >
      {!!unreadCount && unreadCount > 0 && (
        <span>
          {unreadCount > 99 ? "+99" : unreadCount}
        </span>
      )}
      <ChevronDown />
    </button>
  );
};

To fetch number of unread_messages on left side (ChannelPreview) I have this function

const unreadMessageNumber = () => {
    if (channel?.state.read[client.user?.id ?? 0].unread_messages) {
      const unreadMessages =
        channel?.state.read[client.user?.id ?? 0].unread_messages;
      if (unreadMessages > 99) {
        return "+99";
      } else if (unreadMessages > 0) {
        return unreadMessages;
      }
    }
    return 0;
  };        

Expected behavior

MessageNotification should be updated and number of unread messages in ScrollToBottomButton component should be 0

Screenshots

https://github.com/user-attachments/assets/7e5972aa-a674-46ee-9b2e-bc81b468666b

Package version

• stream-chat-react: 11.23.0

Desktop (please complete the following information):

• OS: All
• Browser Chrome
• Version 127.0.6533.89 (Official Build) (arm64)

Smartphone (please complete the following information):

• Device: All

Additional context

Add any other context about the problem here.

[MartinCupela]

Hey @MrMole96 , the video you attached is not reproducible and not downloadable. I could not reproduce your issue in the sandbox. I have used your ScrollToBottomButton component removing the useAtom hooks. I expect that you want to see Count 0 on the button once it is clicked.

What I see in your code is that you re-create MessageNotification component on each re-render. This could contribute to your problems. The components should be declared outside the parent component scope or at least memoized inside the parent component if it is necessary to create them inside.

Please see the attached video of my demo showing the unread count is passed correctly.

custom-scroll-to-bottom-mark-read.webm

[MrMole96]

Hey @MartinCupela thanks for quick response! Yes, your example for very helpful and it started working. I noticed also two things.

1. If I open chat with unread messages, I can see label "unread messages" button with number of unread messages count but in channel preview (left side) I don't see anymore number because this channel is tagged as read. Is it intended behaviour?

2. Is it possible to decrease number of unread messages during scrolling? For example I have big number like 100 messages and I would like to see 90->80->70 when I scroll down screen.

https://github.com/user-attachments/assets/c722a97b-0c17-4db6-a92e-248f5980afab

[MartinCupela]

@MrMole96 to your questions:

1. Yes that is expected behavior - same as Slack
2. The read/unread logic is based on marking a channel read at a given point in time. It is not based on marking read of every single message in every single channel by every single user. I believe you can appreciate how poorly performant such a approach would be.

I will go ahead and close this issue as solved