feat: rename ChannelPaginatorsOrchestrator to ChannelManager

ai-docs/ai-migration-v14-v15.md

@@ -59,7 +59,7 @@ There is no `setActiveChannel` on `ChatContext`. Bind a channel by:
 - passing it directly as the `channel` prop: `<Channel channel={channel}>…</Channel>` (the `Channel` component takes `channel` as a prop; it no longer reads it from context), and/or
 - opening it in a `ChatView` layout slot — e.g. `open({ key: channel.cid, kind: 'channel', source: channel })` — the mechanism `ChannelListItemUI` uses on selection.
 
-To ingest an ad-hoc channel (e.g. navigating to a DM or search result) into the paginators, use `channelPaginatorsOrchestrator.ingestChannel(channel)`. Confirm the exact `open()` / orchestrator signatures against the installed source.
+To ingest an ad-hoc channel (e.g. navigating to a DM or search result) into the paginators, use `channelManager.ingestChannel(channel)`. Confirm the exact `open()` / orchestrator signatures against the installed source.
 
 ### `ChatContext.channelsQueryState` → removed
 

examples/tutorial/package.json

@@ -16,7 +16,7 @@
     "emoji-mart": "^5.6.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "10.0.0-rc.1",
+    "stream-chat": "10.0.0-rc.2",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {

examples/tutorial/src/2-core-component-setup/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import type { Channel as StreamChannel } from 'stream-chat';
-import { type User } from 'stream-chat';
+import { type ClientUser } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
@@ -15,7 +15,7 @@ import 'stream-chat-react/dist/css/index.css';
 import './layout.css';
 import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
 
-const user: User = {
+const user: ClientUser = {
   id: userId,
   name: userName,
   image: `https://getstream.io/random_png/?name=${userName}`,
@@ -33,9 +33,12 @@ const App = () => {
     if (!client) return;
 
     const channel = client.channel('messaging', 'custom_channel_id', {
-      image: 'https://getstream.io/random_png/?name=react',
-      name: 'Talk about React',
       members: [userId],
+      // custom channel fields live under `custom` since v10
+      custom: {
+        image: 'https://getstream.io/random_png/?name=react',
+        name: 'Talk about React',
+      },
     });
 
     setChannel(channel);

examples/tutorial/src/3-channel-list/App.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
-import type { ChannelFilters, ChannelSort, User } from 'stream-chat';
-import { ChannelPaginator, ChannelPaginatorsOrchestrator } from 'stream-chat';
+import { useEffect } from 'react';
+import type { ChannelFilters, ChannelSort, ClientUser } from 'stream-chat';
+import { ChannelPaginator } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
@@ -16,7 +16,7 @@ import { ChatView, useSlotChannels } from 'stream-chat-react/slot-layout';
 import './layout.css';
 import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
 
-const user: User = {
+const user: ClientUser = {
   id: userId,
   name: userName,
   image: `https://getstream.io/random_png/?name=${userName}`,
@@ -60,29 +60,28 @@ const App = () => {
     userData: user,
   });
 
-  // Channel-list query config (filters/sort) now lives on a `ChannelPaginator`,
-  // coordinated by the `ChannelPaginatorsOrchestrator` passed to `<Chat>`.
-  const channelPaginatorsOrchestrator = useMemo(
-    () =>
-      client &&
-      new ChannelPaginatorsOrchestrator({
-        client,
-        paginators: [
-          new ChannelPaginator({ client, filters, id: 'channels:default', sort }),
-        ],
-      }),
-    [client],
-  );
+  // Channel-list query config (filters/sort) lives on a `ChannelPaginator`. The list is registered
+  // on `client.channelManager` — the orchestrator instantiated together with the client, which
+  // keeps every registered list in sync with WS events. `<ChannelNavigation>` renders one list per
+  // registered paginator.
+  useEffect(() => {
+    if (!client) return;
+    const paginator = new ChannelPaginator({
+      client,
+      filters,
+      id: 'channels:default',
+      sort,
+    });
+    client.channelManager.insertPaginator({ paginator });
+    return () => {
+      client.channelManager.removePaginator(paginator);
+    };
+  }, [client]);
 
-  if (!client || !channelPaginatorsOrchestrator)
-    return <div>Setting up client & connection...</div>;
+  if (!client) return <div>Setting up client & connection...</div>;
 
   return (
-    <Chat
-      channelPaginatorsOrchestrator={channelPaginatorsOrchestrator}
-      client={client}
-      theme='custom-theme'
-    >
+    <Chat client={client} theme='custom-theme'>
       <ChatView layouts={chatViewLayouts} views={{ channels: <ChannelsWorkspace /> }} />
     </Chat>
   );

examples/tutorial/src/4-custom-ui-components/App.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import type { User } from 'stream-chat';
+import { useEffect, useState } from 'react';
+import type { ClientUser } from 'stream-chat';
 import {
   Channel,
   ChannelAvatar,
@@ -9,6 +9,7 @@ import {
   Chat,
   MessageComposer,
   MessageList,
+  SummarizedMessagePreview,
   Thread,
   useCreateChatClient,
   useMessageContext,
@@ -23,7 +24,7 @@ import {
 import './layout.css';
 import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
 
-const user: User = {
+const user: ClientUser = {
   id: userId,
   name: userName,
   image: `https://getstream.io/random_png/?name=${userName}`,
@@ -34,7 +35,7 @@ const CustomChannelListItem = ({
   channel,
   displayImage,
   displayTitle,
-  latestMessagePreview,
+  previewedMessage,
 }: ChannelListItemUIProps) => {
   // Selection is one navigation model: open the channel into a layout slot.
   const { open } = useChatViewNavigation();
@@ -59,14 +60,16 @@ const CustomChannelListItem = ({
       type='button'
     >
       <ChannelAvatar
-        imageUrl={displayImage ?? channel.data?.image}
+        imageUrl={displayImage ?? channel.data?.custom?.image}
         size='xl'
-        userName={displayTitle ?? channel.data?.name ?? 'Channel'}
+        userName={displayTitle ?? channel.data?.custom?.name ?? 'Channel'}
       />
       <div style={{ flex: 1 }}>
-        <div>{displayTitle ?? channel.data?.name ?? 'Unnamed Channel'}</div>
-        {latestMessagePreview ? (
-          <div style={{ fontSize: '14px', opacity: 0.75 }}>{latestMessagePreview}</div>
+        <div>{displayTitle ?? channel.data?.custom?.name ?? 'Unnamed Channel'}</div>
+        {previewedMessage ? (
+          <div style={{ fontSize: '14px', opacity: 0.75 }}>
+            <SummarizedMessagePreview latestMessage={previewedMessage} />
+          </div>
         ) : null}
       </div>
     </button>
@@ -137,9 +140,12 @@ const App = () => {
 
     const initChannel = async () => {
       const channel = client.channel('messaging', 'react-tutorial', {
-        image: 'https://getstream.io/random_png/?name=react-v14',
-        name: 'Talk about React',
         members: [userId],
+        // custom channel fields live under `custom` since v10
+        custom: {
+          image: 'https://getstream.io/random_png/?name=react-v14',
+          name: 'Talk about React',
+        },
       });
 
       await channel.watch();

examples/tutorial/src/5-custom-attachment-type/App.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import type {
   Attachment as AttachmentType,
+  ClientUser,
   Channel as StreamChannel,
-  User,
 } from 'stream-chat';
 import {
   Attachment,
@@ -20,18 +20,22 @@ import {
 import './layout.css';
 import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
 
-const user: User = {
+const user: ClientUser = {
   id: userId,
   name: userName,
   image: `https://getstream.io/random_png/?name=${userName}`,
 };
 
 const attachments: AttachmentType[] = [
   {
-    image: 'https://images-na.ssl-images-amazon.com/images/I/71k0cry-ceL._SL1500_.jpg',
-    name: 'iPhone',
     type: 'product',
-    url: 'https://goo.gl/ppFmcR',
+    // fields that are not part of the Attachment API go under `custom` — this example declares them
+    // through module augmentation in ./stream-chat.d.ts
+    custom: {
+      image: 'https://images-na.ssl-images-amazon.com/images/I/71k0cry-ceL._SL1500_.jpg',
+      name: 'iPhone',
+      url: 'https://goo.gl/ppFmcR',
+    },
   },
 ];
 
@@ -55,14 +59,16 @@ const CustomAttachment = (props: AttachmentProps) => {
         <div style={{ color: '#0f172a', fontSize: '12px', fontWeight: 700 }}>
           Product recommendation
         </div>
-        <a href={attachment.url} rel='noreferrer' target='_blank'>
+        <a href={attachment.custom?.url} rel='noreferrer' target='_blank'>
           <img
             alt='custom-attachment'
             height='120'
-            src={attachment.image}
+            src={attachment.custom?.image}
             style={{ borderRadius: '18px', marginTop: '8px', objectFit: 'cover' }}
           />
-          <div style={{ color: '#334155', marginTop: '8px' }}>{attachment.name}</div>
+          <div style={{ color: '#334155', marginTop: '8px' }}>
+            {attachment.custom?.name}
+          </div>
         </a>
       </div>
     );
@@ -84,21 +90,27 @@ const App = () => {
 
     const initChannel = async () => {
       const channel = client.channel('messaging', 'react-tutorial-products', {
-        image: 'https://getstream.io/random_png/?name=products',
-        name: 'Product recommendations',
         members: [userId],
+        custom: {
+          image: 'https://getstream.io/random_png/?name=products',
+          name: 'Product recommendations',
+        },
       });
 
       await channel.watch();
 
-      const hasProductMessage = channel.state.messages.some((message) =>
+      // messages are no longer kept on channel.state — the paginator owns the list
+      const hasProductMessage = (channel.messagePaginator.items ?? []).some((message) =>
         message.attachments?.some(isProductAttachment),
       );
 
       if (!hasProductMessage) {
+        // the message payload is nested under `message` since v10
         await channel.sendMessage({
-          text: 'Your selected product is out of stock, would you like to select one of these alternatives?',
-          attachments,
+          message: {
+            text: 'Your selected product is out of stock, would you like to select one of these alternatives?',
+            attachments,
+          },
         });
       }
 

examples/tutorial/src/6-emoji-picker/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { User } from 'stream-chat';
+import type { ClientUser } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
@@ -20,7 +20,7 @@ import data from '@emoji-mart/data';
 import './layout.css';
 import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
 
-const user: User = {
+const user: ClientUser = {
   id: userId,
   name: userName,
   image: `https://getstream.io/random_png/?name=${userName}`,
@@ -62,9 +62,12 @@ const App = () => {
 
     const initChannel = async () => {
       const channel = client.channel('messaging', 'react-tutorial', {
-        image: 'https://getstream.io/random_png/?name=react-v14',
-        name: 'Talk about React',
         members: [userId],
+        // custom channel fields live under `custom` since v10
+        custom: {
+          image: 'https://getstream.io/random_png/?name=react-v14',
+          name: 'Talk about React',
+        },
       });
 
       await channel.watch();

examples/tutorial/src/7-livestream/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { Channel as StreamChannel, User } from 'stream-chat';
+import type { ClientUser, Channel as StreamChannel } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
@@ -12,7 +12,7 @@ import {
 import './layout.css';
 import { apiKey, tokenProvider, userId, userName } from '../1-client-setup/credentials';
 
-const user: User = {
+const user: ClientUser = {
   id: userId,
   name: userName,
   image: `https://getstream.io/random_png/?name=${userName}`,
@@ -31,8 +31,11 @@ const App = () => {
 
     const initChannel = async () => {
       const spaceChannel = chatClient.channel('livestream', 'spacex', {
-        image: 'https://goo.gl/Zefkbx',
-        name: 'SpaceX launch discussion',
+        // custom channel fields live under `custom` since v10
+        custom: {
+          image: 'https://goo.gl/Zefkbx',
+          name: 'SpaceX launch discussion',
+        },
       });
 
       await spaceChannel.watch();

examples/vite/package.json

@@ -16,7 +16,7 @@
     "modern-normalize": "^3.0.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "10.0.0-rc.1",
+    "stream-chat": "10.0.0-rc.2",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {