feat: migrate components from ChannelActionContext and ChannelState context to dedicated StateStore instances and add layout control API

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

@@ -9,7 +9,6 @@ import {
   MessageList,
   Thread,
   useCreateChatClient,
-  Window,
 } from 'stream-chat-react';
 
 import 'stream-chat-react/dist/css/index.css';
@@ -47,11 +46,9 @@ const App = () => {
   return (
     <Chat client={client}>
       <Channel channel={channel}>
-        <Window>
-          <ChannelHeader />
-          <MessageList />
-          <MessageComposer />
-        </Window>
+        <ChannelHeader />
+        <MessageList />
+        <MessageComposer />
         <Thread />
       </Channel>
     </Chat>

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

@@ -1,14 +1,17 @@
-import type { ChannelFilters, ChannelOptions, ChannelSort, User } from 'stream-chat';
+import { useMemo } from 'react';
+import type { ChannelFilters, ChannelSort, User } from 'stream-chat';
+import { ChannelPaginator, ChannelPaginatorsOrchestrator } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
-  ChannelList,
+  ChannelNavigation,
   Chat,
+  ChatView,
   MessageComposer,
   MessageList,
   Thread,
   useCreateChatClient,
-  Window,
+  useSlotChannels,
 } from 'stream-chat-react';
 
 import './layout.css';
@@ -25,8 +28,30 @@ const filters: ChannelFilters = {
   type: 'messaging',
   members: { $in: [userId] },
 };
-const options: ChannelOptions = {
-  limit: 10,
+
+// One view ("channels") with a single channel slot. Module-scoped so the reference is
+// stable (it feeds the ChatView layout controller).
+const chatViewLayouts = [{ id: 'channels' as const, slots: ['main-channel'] }];
+
+// Renders the channel navigation (list + search) and the channel(s) currently open in
+// a layout slot. Selecting a channel in the list binds it into a slot via ChatView
+// navigation; `useSlotChannels` reads back the open channel(s).
+const ChannelsWorkspace = () => {
+  const channelSlots = useSlotChannels();
+
+  return (
+    <>
+      <ChannelNavigation />
+      {channelSlots.map(({ channel, slot }) => (
+        <Channel channel={channel} key={slot}>
+          <ChannelHeader />
+          <MessageList />
+          <MessageComposer />
+          <Thread />
+        </Channel>
+      ))}
+    </>
+  );
 };
 
 const App = () => {
@@ -36,19 +61,30 @@ const App = () => {
     userData: user,
   });
 
-  if (!client) return <div>Setting up client & connection...</div>;
+  // 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],
+  );
+
+  if (!client || !channelPaginatorsOrchestrator)
+    return <div>Setting up client & connection...</div>;
 
   return (
-    <Chat client={client} theme='custom-theme'>
-      <ChannelList filters={filters} options={options} sort={sort} />
-      <Channel>
-        <Window>
-          <ChannelHeader />
-          <MessageList />
-          <MessageComposer />
-        </Window>
-        <Thread />
-      </Channel>
+    <Chat
+      channelPaginatorsOrchestrator={channelPaginatorsOrchestrator}
+      client={client}
+      theme='custom-theme'
+    >
+      <ChatView layouts={chatViewLayouts} views={{ channels: <ChannelsWorkspace /> }} />
     </Chat>
   );
 };

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

@@ -1,18 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import type { ChannelFilters, ChannelOptions, ChannelSort, User } from 'stream-chat';
+import type { User } from 'stream-chat';
 import {
   Channel,
   ChannelAvatar,
   ChannelHeader,
-  ChannelList,
   type ChannelListItemUIProps,
+  ChannelNavigation,
   Chat,
+  ChatView,
   MessageComposer,
   MessageList,
   Thread,
+  useChatViewNavigation,
   useCreateChatClient,
   useMessageContext,
-  Window,
+  useSlotChannels,
   WithComponents,
 } from 'stream-chat-react';
 
@@ -25,37 +27,22 @@ const user: User = {
   image: `https://getstream.io/random_png/?name=${userName}`,
 };
 
-const sort: ChannelSort = { last_message_at: -1 };
-const filters: ChannelFilters = {
-  type: 'messaging',
-  members: { $in: [userId] },
-};
-const options: ChannelOptions = {
-  limit: 10,
-};
-
 const CustomChannelListItem = ({
   active,
   channel,
   displayImage,
   displayTitle,
   latestMessagePreview,
-  onSelect,
-  setActiveChannel,
 }: ChannelListItemUIProps) => {
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (onSelect) {
-      onSelect(event);
-      return;
-    }
-
-    setActiveChannel?.(channel, undefined, event);
-  };
+  // Selection is one navigation model: open the channel into a layout slot.
+  const { open } = useChatViewNavigation();
 
   return (
     <button
       aria-pressed={active}
-      onClick={handleClick}
+      onClick={() =>
+        open({ key: channel.cid ?? undefined, kind: 'channel', source: channel })
+      }
       style={{
         width: '100%',
         padding: '12px',
@@ -114,6 +101,27 @@ const CustomMessage = () => {
   );
 };
 
+// One view ("channels") with a single channel slot. Module-scoped for a stable reference.
+const chatViewLayouts = [{ id: 'channels' as const, slots: ['main-channel'] }];
+
+const ChannelsWorkspace = () => {
+  const channelSlots = useSlotChannels();
+
+  return (
+    <>
+      <ChannelNavigation />
+      {channelSlots.map(({ channel, slot }) => (
+        <Channel channel={channel} key={slot}>
+          <ChannelHeader />
+          <MessageList />
+          <MessageComposer />
+          <Thread />
+        </Channel>
+      ))}
+    </>
+  );
+};
+
 const App = () => {
   const [isReady, setIsReady] = useState(false);
   const client = useCreateChatClient({
@@ -152,15 +160,7 @@ const App = () => {
       }}
     >
       <Chat client={client} theme='custom-theme'>
-        <ChannelList filters={filters} options={options} sort={sort} />
-        <Channel>
-          <Window>
-            <ChannelHeader />
-            <MessageList />
-            <MessageComposer />
-          </Window>
-          <Thread />
-        </Channel>
+        <ChatView layouts={chatViewLayouts} views={{ channels: <ChannelsWorkspace /> }} />
       </Chat>
     </WithComponents>
   );

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

@@ -14,7 +14,6 @@ import {
   MessageList,
   Thread,
   useCreateChatClient,
-  Window,
   WithComponents,
 } from 'stream-chat-react';
 
@@ -118,11 +117,9 @@ const App = () => {
     <WithComponents overrides={{ Attachment: CustomAttachment }}>
       <Chat client={client} theme='custom-theme'>
         <Channel channel={channel}>
-          <Window>
-            <ChannelHeader />
-            <MessageList />
-            <MessageComposer />
-          </Window>
+          <ChannelHeader />
+          <MessageList />
+          <MessageComposer />
           <Thread />
         </Channel>
       </Chat>

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

@@ -1,15 +1,16 @@
 import { useEffect, useState } from 'react';
-import type { ChannelFilters, ChannelSort, User } from 'stream-chat';
+import type { User } from 'stream-chat';
 import {
   Channel,
   ChannelHeader,
-  ChannelList,
+  ChannelNavigation,
   Chat,
+  ChatView,
   MessageComposer,
   MessageList,
   Thread,
   useCreateChatClient,
-  Window,
+  useSlotChannels,
   WithComponents,
 } from 'stream-chat-react';
 import { EmojiPicker } from 'stream-chat-react/emojis';
@@ -26,14 +27,29 @@ const user: User = {
   image: `https://getstream.io/random_png/?name=${userName}`,
 };
 
-const sort: ChannelSort = { last_message_at: -1 };
-const filters: ChannelFilters = {
-  type: 'messaging',
-  members: { $in: [userId] },
-};
-
 init({ data });
 
+// One view ("channels") with a single channel slot. Module-scoped for a stable reference.
+const chatViewLayouts = [{ id: 'channels' as const, slots: ['main-channel'] }];
+
+const ChannelsWorkspace = () => {
+  const channelSlots = useSlotChannels();
+
+  return (
+    <>
+      <ChannelNavigation />
+      {channelSlots.map(({ channel, slot }) => (
+        <Channel channel={channel} key={slot}>
+          <ChannelHeader />
+          <MessageList />
+          <MessageComposer emojiSearchIndex={SearchIndex} />
+          <Thread />
+        </Channel>
+      ))}
+    </>
+  );
+};
+
 const App = () => {
   const [isReady, setIsReady] = useState(false);
   const client = useCreateChatClient({
@@ -67,15 +83,7 @@ const App = () => {
   return (
     <Chat client={client}>
       <WithComponents overrides={{ EmojiPicker }}>
-        <ChannelList filters={filters} sort={sort} />
-        <Channel>
-          <Window>
-            <ChannelHeader />
-            <MessageList />
-            <MessageComposer emojiSearchIndex={SearchIndex} />
-          </Window>
-          <Thread />
-        </Channel>
+        <ChatView layouts={chatViewLayouts} views={{ channels: <ChannelsWorkspace /> }} />
       </WithComponents>
     </Chat>
   );

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

@@ -7,7 +7,6 @@ import {
   MessageComposer,
   useCreateChatClient,
   VirtualizedMessageList,
-  Window,
 } from 'stream-chat-react';
 
 import './layout.css';
@@ -51,11 +50,9 @@ const App = () => {
   return (
     <Chat client={chatClient} theme='str-chat__theme-dark'>
       <Channel channel={channel}>
-        <Window>
-          <ChannelHeader />
-          <VirtualizedMessageList />
-          <MessageComposer focus />
-        </Window>
+        <ChannelHeader />
+        <VirtualizedMessageList />
+        <MessageComposer focus />
       </Channel>
     </Chat>
   );