refactor(MessageList): render thread messages from the thread unread snapshot

src/components/MessageList/__tests__/MessageList.test.tsx

@@ -809,6 +809,36 @@ describe('MessageList', () => {
       ).not.toBeInTheDocument();
     });
 
+    it('should render thread messages from the thread unread snapshot, not the channel one', async () => {
+      const thread = chatClient.threads.ensure({ channel, parentMessage: message1 });
+      const renderMessages = vi.fn(() => []);
+
+      await act(() => {
+        renderComponent({
+          channelProps: { channel },
+          chatClient,
+          msgListProps: fromPartial<MessageListProps>({ renderMessages }),
+          thread,
+        });
+      });
+
+      act(() => {
+        thread.messagePaginator.unreadStateSnapshot.partialNext({ unreadCount: 3 });
+      });
+      expect(renderMessages).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          channelUnreadUiState: expect.objectContaining({ unreadCount: 3 }),
+        }),
+      );
+
+      // the channel's snapshot belongs to the channel list: changing it must not re-render the thread
+      const renderCountBeforeChannelChange = renderMessages.mock.calls.length;
+      act(() => {
+        channel.messagePaginator.unreadStateSnapshot.partialNext({ unreadCount: 7 });
+      });
+      expect(renderMessages).toHaveBeenCalledTimes(renderCountBeforeChannelChange);
+    });
+
     it('should display custom unread messages separator when channel is marked unread', async () => {
       const customUnreadMessagesSeparatorText = 'CustomUnreadMessagesSeparator';
       const UnreadMessagesSeparator = () => (

src/components/MessageList/hooks/MessageList/useMessageListElements.tsx

@@ -11,6 +11,7 @@ import { useComponentContext } from '../../../../context/ComponentContext';
 import type { LocalMessage, UnreadSnapshotState } from 'stream-chat';
 import type { MessageRenderer, SharedMessageProps } from '../../renderMessages';
 import { useChannel } from '../../../../context';
+import { useMessagePaginator } from '../../../../hooks';
 import { useLastDeliveredData } from '../useLastDeliveredData';
 import { useStateStore } from '../../../../store';
 
@@ -41,9 +42,11 @@ export const useMessageListElements = (props: UseMessageListElementsProps) => {
 
   const { customClasses } = useChatContext();
   const channel = useChannel();
+  const messagePaginator = useMessagePaginator();
   const components = useComponentContext();
+  // The rendered list's own snapshot: in a thread that is the thread's, as for the rest of the list.
   const channelUnreadUiState = useStateStore(
-    channel.messagePaginator.unreadStateSnapshot,
+    messagePaginator.unreadStateSnapshot,
     unreadStateSnapshotSelector,
   );
   // get the readData, but only for messages submitted by the user themselves