feat: add channel messages pagination indicators #1332

MartinCupela · 2024-08-06T15:39:19Z

Description of the changes, What, Why and How?

The React SDK (and probably other SDKs using stream-chat) performs redundant channel queries to retrieve more non-existent messages.
Also, as the SDK components do not know, whether there are more messages to be loaded after the initial client.queryChannels() call, the SDK's flag determining if there are more messages to load (hasMore) is optimistically set to true. This breaks customer UIs, which would like to display components based on the value of hasMore when it is false in channels with few messages (show component if hasMore is false).

It makes sense to keep the pagination information in the client instead of the component SDK as the client performs the queries and knows the query options.

The pagination information has to be stored for every message set separately. The pagination is determined separately for created_at_around, id_around and the rest of the query params. If the query options object contains multiple params, then the pagination is determined as if there was only one of them in the following order: 1. created_at_around, 2. id_around and 3. the rest of the query params.

Usage in components SDK:

const hasMore = channel.state.messagesPagination.hasPrev;
const hasMoreNewer = channel.state.messagesPagination.hasNext;

Questions I could not answer

Why the thread messages are not stored in message sets as it is done for channel messages even though they are queried with MessagePaginationOptions? Probably jumping to a reply is not possible?
Why pinned messages are not stored in message sets as it is done for channel messages even though they are queried with PinnedMessagePaginationOptions? Probably jumping to a pinned message is not possible?

github-actions · 2024-08-06T15:41:12Z

Size Change: +9.77 kB (+2.56%)

Total Size: 392 kB

Filename	Size	Change
`dist/browser.es.js`	84.8 kB	+2.18 kB (+2.63%)
`dist/browser.full-bundle.min.js`	50.3 kB	+1.1 kB (+2.23%)
`dist/browser.js`	85.8 kB	+2.17 kB (+2.59%)
`dist/index.es.js`	84.8 kB	+2.17 kB (+2.63%)
`dist/index.js`	85.9 kB	+2.16 kB (+2.58%)

_{compressed-size-action}

szuperaz · 2024-08-07T07:40:15Z

"Why the thread messages are not stored in message sets as it is done for channel messages even though they are queried with MessagePaginationOptions? Probably jumping to a reply is not possible?" -> Thread replies should be stored in message sets, this is a bug. You can jump to thread replies, we have a public method for this, jumping will work fine, but due to the lack of message sets scrolling won't work in a lot of cases. This was an oversight from me when I implemented this years ago, I'm pretty sure I had this reported somewhere before, but I couldn't find it, so created a new issue for it: https://stream-io.atlassian.net/jira/software/c/projects/PBE/boards/168?selectedIssue=PBE-5451

"Why pinned messages are not stored in message sets as it is done for channel messages even though they are queried with PinnedMessagePaginationOptions? Probably jumping to a pinned message is not possible?" -> There are two things here: jumping to a pinned message is possible, it's works just like jumping to any channel/thread message. The message set would be necessary if someone were to build a message list that only contains pinned messages, and want to jump inside that list, that is not possible, nor do I think we ever wanted to support that, so it's fine that pinned messages don't have a message sets.

oliverlaz

It looks good from my side as well.
One nitpick I have is, that I believe the prettier settings were not picked up by your IDE and the formatting is a bit non-standard. Can you please fix this?

myandrienko · 2024-08-07T09:33:16Z

src/types.ts

+  isCurrent: boolean;
+  isLatest: boolean;
+  messages: FormatMessageResponse<StreamChatGenerics>[];
+  pagination: { hasNext?: boolean; hasPrev?: boolean };


If I understand the semantics correctly:

true means there's maybe more to load

false means there's definitely nothing else to load

undefined means nothing has been queried yet

Because both true and undefined mean "try querying", an easy mistake to make will be writing if (messages.pagination.hasNext) { ... }. Maybe we can make this type a bit more verbose:

pagination: { maybeHasNext: boolean; maybeHasPrev: boolean }

And always initialize with { maybeHasNext: true; maybeHasPrev: true }

Oh, and just as a suggestion, hasOlder and hasNewer are probably more accurate, right? Because next and prev are subjective in this case :)

Makes sense to keep it true. But I would keep maybe out of the name as it reveals our internals that can change in the future (maybe once this will be fixed on the BE side and each response will provide information about the next page availability :)).

hasOlder - I am not sure whether the messages have to be always ordered by creation date. Also if we wanted to paginate other types of items, they may not be sorted by date - that is why I think it does not give us added value and the integrators should know, how they sort their items.

…tion

MartinCupela · 2024-08-20T09:59:15Z

src/channel_state.ts

@@ -846,6 +854,14 @@ export class ChannelState<StreamChatGenerics extends ExtendableGenerics = Defaul
        sources.forEach((messageSet) => {
          target.isLatest = target.isLatest || messageSet.isLatest;
          target.isCurrent = target.isCurrent || messageSet.isCurrent;
+          target.pagination.hasPrev =


Merging pagination objects when merging message sets.

MartinCupela · 2024-08-20T09:59:53Z

src/client.ts

@@ -1601,7 +1603,7 @@ export class StreamChat<StreamChatGenerics extends ExtendableGenerics = DefaultG
      },
    });

-    return this.hydrateActiveChannels(data.channels, stateOptions);
+    return this.hydrateActiveChannels(data.channels, stateOptions, options);


Spaghetti code architecture forced me to do this.

MartinCupela · 2024-08-20T10:00:52Z

src/client.ts

+      }
+
+      if (updatedMessagesSet) {
+        updatedMessagesSet.pagination = {


Pagination indicators are calculated once the requested page is merged into the parent message set.

MartinCupela · 2024-08-20T10:01:50Z

src/utils.ts

+    return params.parentSet.pagination;
+  }
+
+  if (params.messagePaginationOptions?.created_at_around) {


If the query options object contains multiple params, then the pagination is determined as if there was only one of them in the following order: 1. created_at_around, 2. id_around and 3. the rest of the query params.

src/utils.ts

feat: add channel messages pagination indicators

87c951a

szuperaz previously approved these changes Aug 7, 2024

View reviewed changes

oliverlaz previously approved these changes Aug 7, 2024

View reviewed changes

style: apply prettier rules

a7e63d7

MartinCupela dismissed stale reviews from oliverlaz and szuperaz via a7e63d7 August 7, 2024 09:08

myandrienko reviewed Aug 7, 2024

View reviewed changes

MartinCupela added 2 commits August 7, 2024 16:19

feat: keep message pagination enabled by default

6759d2a

test: add tests for messageSetPagination

f9431b2

MartinCupela force-pushed the feat/messages-pagination-indicators branch from 3324d44 to f9431b2 Compare August 7, 2024 14:22

MartinCupela added 2 commits August 7, 2024 16:33

feat: return default message set pagination if not available

eec3cd7

test: return default message set pagination if not available

a16f267

MartinCupela marked this pull request as ready for review August 7, 2024 14:45

MartinCupela requested review from vishalnarkhede, santhoshvai, khushal87 and arnautov-anton as code owners August 7, 2024 14:45

MartinCupela requested review from myandrienko, oliverlaz and szuperaz August 7, 2024 14:48

myandrienko previously approved these changes Aug 7, 2024

View reviewed changes

MartinCupela dismissed myandrienko’s stale review via f2f46bf August 19, 2024 13:51

MartinCupela requested a review from myandrienko August 19, 2024 13:51

feat: update message set pagination indicators with any pagination op…

a6d9a10

…tion

MartinCupela force-pushed the feat/messages-pagination-indicators branch from f2f46bf to a6d9a10 Compare August 19, 2024 13:53

MartinCupela added 2 commits August 20, 2024 11:11

fix: page mid point is calculated as Math.floor

90082b4

feat: update messageSet pagination on merge

9dfea3e

MartinCupela force-pushed the feat/messages-pagination-indicators branch from 369f108 to 9dfea3e Compare August 20, 2024 09:55

MartinCupela commented Aug 20, 2024

View reviewed changes

MartinCupela mentioned this pull request Aug 20, 2024

fix: use the client pagination indicators for ChannelStateContext's hasMore and hasMoreNewer flags GetStream/stream-chat-react#2478

Merged

Merge branch 'master' into feat/messages-pagination-indicators

146f070

MartinCupela commented Aug 22, 2024

View reviewed changes

src/utils.ts Outdated Show resolved Hide resolved

oliverlaz previously approved these changes Aug 22, 2024

View reviewed changes

feat: use client logger to log pagination state error

1e1c610

MartinCupela dismissed oliverlaz’s stale review via 1e1c610 August 22, 2024 11:58

MartinCupela requested a review from oliverlaz August 22, 2024 12:34

oliverlaz approved these changes Aug 22, 2024

View reviewed changes

Merge branch 'master' into feat/messages-pagination-indicators

1b63fda

MartinCupela merged commit 2ce6059 into master Aug 22, 2024
5 checks passed

MartinCupela deleted the feat/messages-pagination-indicators branch August 22, 2024 14:16

github-actions bot mentioned this pull request Aug 22, 2024

chore: release v8.39.0 #1342

Merged

myandrienko mentioned this pull request Aug 29, 2024

feat: threads 2.0 #1330

Merged

This was referenced Sep 24, 2024

[Snyk] Upgrade stream-chat from 8.31.0 to 8.40.0 issam-seghir/VipeTrip#78

Open

[Snyk] Upgrade stream-chat from 8.31.0 to 8.40.1 issam-seghir/VipeTrip#86

Open

[Snyk] Upgrade stream-chat from 8.31.0 to 8.40.2 issam-seghir/VipeTrip#89

Open

This was referenced Oct 2, 2024

[Snyk] Upgrade stream-chat from 8.31.0 to 8.40.4 issam-seghir/VipeTrip#91

Open

[Snyk] Upgrade stream-chat from 8.31.0 to 8.40.6 issam-seghir/VipeTrip#93

Open

[Snyk] Upgrade stream-chat from 8.31.0 to 8.40.7 issam-seghir/VipeTrip#95

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add channel messages pagination indicators #1332

feat: add channel messages pagination indicators #1332

MartinCupela commented Aug 6, 2024 •

edited

Loading

github-actions bot commented Aug 6, 2024 •

edited

Loading

szuperaz commented Aug 7, 2024

oliverlaz left a comment

myandrienko Aug 7, 2024

myandrienko Aug 7, 2024

MartinCupela Aug 7, 2024

MartinCupela Aug 7, 2024

MartinCupela Aug 20, 2024

MartinCupela Aug 20, 2024

MartinCupela Aug 20, 2024

MartinCupela Aug 20, 2024

feat: add channel messages pagination indicators #1332

feat: add channel messages pagination indicators #1332

Conversation

MartinCupela commented Aug 6, 2024 • edited Loading

Description of the changes, What, Why and How?

Usage in components SDK:

Questions I could not answer

github-actions bot commented Aug 6, 2024 • edited Loading

szuperaz commented Aug 7, 2024

oliverlaz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinCupela commented Aug 6, 2024 •

edited

Loading

github-actions bot commented Aug 6, 2024 •

edited

Loading