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/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 type { ChannelFilters, ChannelSort, ClientUser } from 'stream-chat';
+import { ChannelManager, 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}`,
@@ -61,11 +61,11 @@ const App = () => {
   });
 
   // Channel-list query config (filters/sort) now lives on a `ChannelPaginator`,
-  // coordinated by the `ChannelPaginatorsOrchestrator` passed to `<Chat>`.
-  const channelPaginatorsOrchestrator = useMemo(
+  // coordinated by the `ChannelManager` passed to `<Chat>`.
+  const channelManager = useMemo(
     () =>
       client &&
-      new ChannelPaginatorsOrchestrator({
+      new ChannelManager({
         client,
         paginators: [
           new ChannelPaginator({ client, filters, id: 'channels:default', sort }),
@@ -74,15 +74,10 @@ const App = () => {
     [client],
   );
 
-  if (!client || !channelPaginatorsOrchestrator)
-    return <div>Setting up client & connection...</div>;
+  if (!client || !channelManager) return <div>Setting up client & connection...</div>;
 
   return (
-    <Chat
-      channelPaginatorsOrchestrator={channelPaginatorsOrchestrator}
-      client={client}
-      theme='custom-theme'
-    >
+    <Chat channelManager={channelManager} 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 { Channel as StreamChannel, ClientUser } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
@@ -12,7 +12,7 @@
 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 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/src/App.tsx

@@ -14,8 +14,8 @@ import type {
   TextComposerMiddleware,
 } from 'stream-chat';
 import {
+  ChannelManager,
   ChannelPaginator,
-  ChannelPaginatorsOrchestrator,
   ChannelSearchSource,
   createActiveCommandGuardMiddleware,
   createCommandInjectionMiddleware,
@@ -379,7 +379,7 @@ const App = () => {
   // (archived > muted > default > opened), so e.g. an archived channel stays out of the main list.
   // `orchestrator.ingestChannel` (search/DM open, and the mute handler below) re-evaluates a
   // channel against every list and routes it accordingly.
-  const channelPaginatorsOrchestrator = useMemo(() => {
+  const channelManager = useMemo(() => {
     if (!chatClient) return undefined;
     const main = new ChannelPaginator({
       client: chatClient,
@@ -413,24 +413,24 @@ const App = () => {
     // between lists on its own. Enrich the default handlers: when the user's channel mutes change,
     // re-route every loaded channel (ingestChannel re-evaluates ownership per channel, so a newly
     // muted channel leaves the main list for the muted one and an unmuted channel returns).
-    const eventHandlers = ChannelPaginatorsOrchestrator.getDefaultHandlers();
+    const eventHandlers = ChannelManager.getDefaultHandlers();
     eventHandlers['notification.channel_mutes_updated'] = [
       {
         id: 'example:channel-mutes-updated',
-        handle: ({ ctx: { orchestrator } }) => {
+        handle: ({ ctx: { channelManager } }) => {
           const seen = new Set<string>();
-          orchestrator.paginators.forEach((paginator) => {
+          channelManager.paginators.forEach((paginator) => {
             (paginator.items ?? []).forEach((channel) => {
               if (seen.has(channel.cid)) return;
               seen.add(channel.cid);
-              orchestrator.ingestChannel(channel);
+              channelManager.ingestChannel(channel);
             });
           });
         },
       },
     ];
 
-    return new ChannelPaginatorsOrchestrator({
+    return new ChannelManager({
       client: chatClient,
       eventHandlers,
       ownershipResolver: [
@@ -567,7 +567,7 @@ const App = () => {
     >
       <SidebarProvider initialOpen={initialSidebarOpen}>
         <Chat
-          channelPaginatorsOrchestrator={channelPaginatorsOrchestrator}
+          channelManager={channelManager}
           client={chatClient}
           i18nInstance={i18nInstance}
           isMessageAIGenerated={isMessageAIGenerated}
@@ -631,7 +631,7 @@ const App = () => {
               channel={resolveSingleChannel({
                 channelKey: singleChannelCid,
                 client: chatClient,
-                orchestrator: channelPaginatorsOrchestrator,
+                orchestrator: channelManager,
               })}
               referenceElement={singleChannelAnchor}
             />