GetStream / stream-chat-js

JS / Browser Client - Build Chat with GetStream.io
https://getstream.io/chat/
Other
178 stars 77 forks source link

feat: threads 2.0 #1330

Closed arnautov-anton closed 2 weeks ago

arnautov-anton commented 1 month ago

This PR adds two new classes: ThreadManager and Thread. These classes are designed to be used as "component backends" - the components being ThreadList and Thread respectively. To achieve easy integration with the UI framework, these classes expose state - a reactive state store you can subscribe to. Ideally, components contain no business logic and just subscribe to relevant parts of the state.

StateStore

This is an immutable store you can subscribe to. Get the latest value with getLatestValue(), update value with next or partialNext, subscribe with subscribe or subscribeWithSelector.

Thread

Thread loads, stores and paginates thread replies. It also keeps track of read states.

For some level of consistency with channel messages pagination indicators, we have a pagination object which stores cursors and loading indicators.

After calling registerSubscriptions, Thread instance starts listening to channel events. See a list of subscribe... methods to see which exact events we are listening to.

Thread can be active or inactive. This is a UI state - an integrator should mark visible/opened threads as active. Active thread immediately marks all the incoming messages as read.

Although backend supports a lot of query options for thread replies, we only support querying latest replies in chronological order, and then paginating through them. If we were to support all query options, we'd have to:

  1. Support message sets for replies like Channel does
  2. Implement complex pagination indicator logic

You are not likely to construct a Thread instance by yourself - you get by calling channel.getThread() instead.

ThreadManager

Loads, stores and paginates threads.

ThreadManager does its best to keep the order of threads in a list stable (which is a business requirement for the ThreadList component). So when a reply arrives in a thread which is not currently in a list, we don't load the thread - instead, we add it to the list of "unseen threads". The UI should then prompt user to reload the list if they require so.

Similarly, when a reply arrives in a thread which is already in the list, we don't reorder the list, but set a isThreadOrderStale flag.

ThreadManager makes sure that all Thread instances it stores are as up-to-date as possible.

github-actions[bot] commented 1 month ago

Size Change: +33.5 kB (+8.57%) πŸ”

Total Size: 425 kB

Filename Size Change
dist/browser.es.js 92.2 kB +7.4 kB (+8.73%) πŸ”
dist/browser.full-bundle.min.js 54 kB +3.72 kB (+7.41%) πŸ”
dist/browser.js 93.3 kB +7.5 kB (+8.75%) πŸ”
dist/index.es.js 92.2 kB +7.41 kB (+8.73%) πŸ”
dist/index.js 93.4 kB +7.5 kB (+8.74%) πŸ”

compressed-size-action