feat: threads 2.0 #1330

arnautov-anton · 2024-07-25T23:42:26Z

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:

Support message sets for replies like Channel does
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 · 2024-07-25T23:44:00Z

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}

src/thread.ts

src/store.ts

src/thread_manager.ts

🚂 GetStream/stream-chat-js#1330 This PR adds components for implementing a thread list view: ThreadList and ChatView. It also adds support for reactive state stores, like the ones that handle the thread list logic in the client. ## useStateStore Implements a binding from the reactive state store in the client to React components. ## ThreadList Implements a thread list. The component itself consists mostly of binding to the `ThreadManager` instance in the client. ## Thread The Thread component was modified to optionally use a reactive `Thread` instance from the `ThreadContext`. The component checks if `ThreadContext` is provided, and if so uses the thread instance from that context. Otherwise, it falls back to the `ChannelContext` as usual. Currently, we use `ThreadContext` in the thread list view, where it is provided by the `ChatView.ThreadAdapter` component. Note that even when `ThreadContext` is used, `ChannelContext` also must be provided. Most our components, including the ones used in threads, still expect the channel context to be there. ## ChatView A set of components implementing a simple in-memory router to switch between channel view and thread list view. Using it is totally optional. Most integrations will probably use their own router instead. Still, nice to have something out-of-the-box. ## WithComponents A new way to provide component overrides. Previously we allowed passing component overrides as props to `Channel` component, and then in some nested components as well, although not consistently. `WithComponents` is a new recommended way to provide component overrides, which requires far less prop drilling and nests nicely. --------- Co-authored-by: Matvei Andrienko <m.y.andrienko@outlook.com>

🚂 GetStream/stream-chat-js#1330 This PR adds components for implementing a thread list view: ThreadList and ChatView. It also adds support for reactive state stores, like the ones that handle the thread list logic in the client. Implements a binding from the reactive state store in the client to React components. Implements a thread list. The component itself consists mostly of binding to the `ThreadManager` instance in the client. The Thread component was modified to optionally use a reactive `Thread` instance from the `ThreadContext`. The component checks if `ThreadContext` is provided, and if so uses the thread instance from that context. Otherwise, it falls back to the `ChannelContext` as usual. Currently, we use `ThreadContext` in the thread list view, where it is provided by the `ChatView.ThreadAdapter` component. Note that even when `ThreadContext` is used, `ChannelContext` also must be provided. Most our components, including the ones used in threads, still expect the channel context to be there. A set of components implementing a simple in-memory router to switch between channel view and thread list view. Using it is totally optional. Most integrations will probably use their own router instead. Still, nice to have something out-of-the-box. A new way to provide component overrides. Previously we allowed passing component overrides as props to `Channel` component, and then in some nested components as well, although not consistently. `WithComponents` is a new recommended way to provide component overrides, which requires far less prop drilling and nests nicely. --------- Co-authored-by: Matvei Andrienko <m.y.andrienko@outlook.com> BREAKING CHANGE: ComponentContext no longer provides any defaults

🚂 GetStream/stream-chat-js#1330 This PR adds components for implementing a thread list view: ThreadList and ChatView. It also adds support for reactive state stores, like the ones that handle the thread list logic in the client. Implements a binding from the reactive state store in the client to React components. Implements a thread list. The component itself consists mostly of binding to the `ThreadManager` instance in the client. The Thread component was modified to optionally use a reactive `Thread` instance from the `ThreadContext`. The component checks if `ThreadContext` is provided, and if so uses the thread instance from that context. Otherwise, it falls back to the `ChannelContext` as usual. Currently, we use `ThreadContext` in the thread list view, where it is provided by the `ChatView.ThreadAdapter` component. Note that even when `ThreadContext` is used, `ChannelContext` also must be provided. Most our components, including the ones used in threads, still expect the channel context to be there. A set of components implementing a simple in-memory router to switch between channel view and thread list view. Using it is totally optional. Most integrations will probably use their own router instead. Still, nice to have something out-of-the-box. A new way to provide component overrides. Previously we allowed passing component overrides as props to `Channel` component, and then in some nested components as well, although not consistently. `WithComponents` is a new recommended way to provide component overrides, which requires far less prop drilling and nests nicely. BREAKING CHANGE: ComponentContext no longer provides any defaults --------- Co-authored-by: Matvei Andrienko <m.y.andrienko@outlook.com>

arnautov-anton force-pushed the feat/threads-v2 branch 3 times, most recently from 4867084 to 6629c1d Compare August 1, 2024 08:59

arnautov-anton added 19 commits August 7, 2024 14:09

Initial commit

7192054

First MVP

6c51d69

Adjustments to state handlers

23bf70a

Add loadUnreadThreads and adjust logic

c2350c2

New handlers and extending storage options

501b8c1

New handlers and fixes to existing ones

f5b272f

Upgrade TS, adjust conf and code, add lodash/throttle

2c26384

New handlers and fixes

ab49e93

New fixes, handlers and adjustments

ab16fda

New fixes, handlers and adjustments

ba57e0a

Added some ThreadManager tests

462eca3

Finalize ThreadManager tests

7b20568

Added new tests and fixes

f8a9ea3

Drop lodash.throttle, use own implementation

69fdaef

Adjust tests and package.json

ff29795

Rename next/previous parameters to "cursors", adjust tests

fbc6361

Upgrade Mocha

d547870

Replace unsupported Array.toSpliced

7590add

Adjust insertion index API

0e5d673

myandrienko force-pushed the feat/threads-v2 branch from 18f7bd3 to 0e5d673 Compare August 7, 2024 12:11

Remove subscription registration from constructor

bfd5ed5

myandrienko reviewed Aug 13, 2024

View reviewed changes

src/thread.ts Show resolved Hide resolved

myandrienko added 3 commits August 14, 2024 15:28

chore: thread and thread manager into separate file (#1336)

6c50a9e

feat: do not store channelData in thread state (#1337)

a08ffb1

fix: updates for state store

2916a21

arnautov-anton commented Aug 21, 2024

View reviewed changes

src/store.ts Outdated Show resolved Hide resolved

myandrienko marked this pull request as ready for review August 29, 2024 14:22

myandrienko requested review from vishalnarkhede, santhoshvai, khushal87, szuperaz and oliverlaz as code owners August 29, 2024 14:22

fix: optimize subscribeManageThreadSubscriptions

656860a

myandrienko requested a review from MartinCupela August 29, 2024 15:39

myandrienko previously approved these changes Aug 29, 2024

View reviewed changes

src/thread_manager.ts Outdated Show resolved Hide resolved

refactor: lazy lookup table

a6d69ef

arnautov-anton dismissed myandrienko’s stale review via a6d69ef August 29, 2024 17:21

arnautov-anton force-pushed the feat/threads-v2 branch from 4567993 to a6d69ef Compare August 29, 2024 17:21

arnautov-anton and others added 4 commits August 30, 2024 12:55

Remove threadData from the Channel instantiation step

082769f

Fix missing initial unreadThreadCount

ea02306

fix: latest replies are always the last page

23b70aa

Fix tests, add missing TM test

5e0f99a

myandrienko previously approved these changes Sep 2, 2024

View reviewed changes

oliverlaz previously approved these changes Sep 2, 2024

View reviewed changes

fix: pagination tests

226c03d

myandrienko dismissed stale reviews from oliverlaz and themself via 226c03d September 2, 2024 15:05

myandrienko approved these changes Sep 2, 2024

View reviewed changes

arnautov-anton merged commit 4b1ffe8 into master Sep 2, 2024
5 checks passed

arnautov-anton deleted the feat/threads-v2 branch September 2, 2024 15:09

github-actions bot mentioned this pull request Sep 2, 2024

chore: release v8.40.0 #1349

Merged

myandrienko mentioned this pull request Sep 4, 2024

feat: add ThreadList and ThreadProvider (Threads 2.0) GetStream/stream-chat-react#2407

Merged

myandrienko mentioned this pull request Sep 11, 2024

fix: adding message to an empty message list #1356

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: threads 2.0 #1330

feat: threads 2.0 #1330

arnautov-anton commented Jul 25, 2024 •

edited

Loading

github-actions bot commented Jul 25, 2024 •

edited

Loading

feat: threads 2.0 #1330

feat: threads 2.0 #1330

Conversation

arnautov-anton commented Jul 25, 2024 • edited Loading

StateStore

Thread

ThreadManager

github-actions bot commented Jul 25, 2024 • edited Loading

arnautov-anton commented Jul 25, 2024 •

edited

Loading

github-actions bot commented Jul 25, 2024 •

edited

Loading