demo: add split-pane mode with per-view send

Adds a "Split Pane" toggle to the header that renders two side-by-side
chat panes sharing the same transport but with independent views. Each
pane has its own InputBar and MessageQueue, and uses view.send() so
messages chain off that pane's selected branch.

New ChatPane component encapsulates a labeled pane with its own message
list, input bar, and queue. Uses ViewHandle.send/regenerate/edit directly
— no manual parent workaround needed since View owns the write path.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: mschristensen

demo/vercel/react/use-client-transport/src/app/components/chat-pane.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { UIMessage, UIMessageChunk } from 'ai';
+import type { ViewHandle } from '@ably/ai-transport/react';
+import type { ClientTransport } from '@ably/ai-transport';
+import { MessageList } from './message-list';
+import { InputBar } from './input-bar';
+import { MessageQueue } from './message-queue';
+import { useMessageQueue } from '../hooks/use-message-queue';
+import { userMessage } from '../helpers';
+
+interface ChatPaneProps {
+  label: string;
+  transport: ClientTransport<UIMessageChunk, UIMessage>;
+  view: ViewHandle<UIMessageChunk, UIMessage>;
+  activeTurns: Map<string, Set<string>>;
+  clientId: string | undefined;
+}
+
+export function ChatPane({ label, transport, view, activeTurns, clientId }: ChatPaneProps) {
+  const queue = useMessageQueue(transport, view.send);
+
+  return (
+    <div className="flex flex-1 flex-col min-w-0">
+      <div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-1.5">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</span>
+      </div>
+      <MessageList
+        view={view}
+        onRegenerate={(id) => view.regenerate(id)}
+        onEdit={(id, text) => view.edit(id, [userMessage(text)])}
+      />
+      <MessageQueue queue={queue} />
+      <InputBar
+        transport={transport}
+        send={view.send}
+        activeTurns={activeTurns}
+        clientId={clientId}
+        queue={queue}
+      />
+    </div>
+  );
+}

demo/vercel/react/use-client-transport/src/app/components/chat.tsx

@@ -1,15 +1,8 @@
 'use client';
 
+import { useState, useMemo } from 'react';
 import { useChannel } from 'ably/react';
-import {
-  useClientTransport,
-  useSend,
-  useRegenerate,
-  useEdit,
-  useActiveTurns,
-  useView,
-  useAblyMessages,
-} from '@ably/ai-transport/react';
+import { useClientTransport, useActiveTurns, useView, useAblyMessages } from '@ably/ai-transport/react';
 import { UIMessageCodec } from '@ably/ai-transport/vercel';
 
 import { userMessage } from '../helpers';
@@ -19,6 +12,7 @@ import { MessageList } from './message-list';
 import { MessageQueue } from './message-queue';
 import { InputBar } from './input-bar';
 import { DebugPane } from './debug-pane';
+import { ChatPane } from './chat-pane';
 
 interface ChatProps {
   chatId: string;
@@ -28,6 +22,7 @@ interface ChatProps {
 
 export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
   const { channel } = useChannel({ channelName: chatId });
+  const [split, setSplit] = useState(false);
 
   const transport = useClientTransport({
     channel,
@@ -37,30 +32,56 @@ export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
   });
 
   const view = useView(transport, { limit: historyLimit ?? 30 });
-  const send = useSend(transport);
-  const regenerate = useRegenerate(transport);
-  const edit = useEdit(transport);
+  const secondView = useMemo(() => transport.createView(), [transport]);
+  const view2 = useView(secondView, { limit: historyLimit ?? 30 });
+
   const activeTurns = useActiveTurns(transport);
   const ablyMessages = useAblyMessages(transport);
-  const queue = useMessageQueue(transport, send);
+  const queue = useMessageQueue(transport, view.send);
 
   return (
     <div className="flex h-dvh">
       <div className="flex flex-1 flex-col">
-        <Header clientId={clientId} />
-        <MessageList
-          view={view}
-          onRegenerate={(id) => regenerate(id)}
-          onEdit={(id, text) => edit(id, [userMessage(text)])}
-        />
-        <MessageQueue queue={queue} />
-        <InputBar
-          transport={transport}
-          send={send}
-          activeTurns={activeTurns}
+        <Header
           clientId={clientId}
-          queue={queue}
+          split={split}
+          onToggleSplit={() => setSplit((s) => !s)}
         />
+        {split ? (
+          <div className="flex flex-1 min-h-0">
+            <ChatPane
+              label="View A"
+              transport={transport}
+              view={view}
+              activeTurns={activeTurns}
+              clientId={clientId}
+            />
+            <div className="w-px bg-zinc-800" />
+            <ChatPane
+              label="View B"
+              transport={transport}
+              view={view2}
+              activeTurns={activeTurns}
+              clientId={clientId}
+            />
+          </div>
+        ) : (
+          <>
+            <MessageList
+              view={view}
+              onRegenerate={(id) => view.regenerate(id)}
+              onEdit={(id, text) => view.edit(id, [userMessage(text)])}
+            />
+            <MessageQueue queue={queue} />
+            <InputBar
+              transport={transport}
+              send={view.send}
+              activeTurns={activeTurns}
+              clientId={clientId}
+              queue={queue}
+            />
+          </>
+        )}
       </div>
       <DebugPane
         messages={view.nodes.map((n) => n.message)}

demo/vercel/react/use-client-transport/src/app/components/header.tsx

@@ -1,10 +1,27 @@
 'use client';
 
-export function Header({ clientId }: { clientId?: string }) {
+interface HeaderProps {
+  clientId?: string;
+  split?: boolean;
+  onToggleSplit?: () => void;
+}
+
+export function Header({ clientId, split, onToggleSplit }: HeaderProps) {
   return (
     <header className="flex items-center gap-2 border-b border-zinc-800 px-4 py-3">
       <div className="h-2 w-2 rounded-full bg-emerald-500" />
       <h1 className="text-sm font-medium text-zinc-300">Ably AI — Client Transport Demo</h1>
+      {onToggleSplit && (
+        <button
+          type="button"
+          onClick={onToggleSplit}
+          className={`ml-4 rounded px-2 py-1 text-xs font-medium transition-colors ${
+            split ? 'bg-zinc-600 text-zinc-100' : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-300'
+          }`}
+        >
+          {split ? 'Single Pane' : 'Split Pane'}
+        </button>
+      )}
       {clientId && <span className="ml-auto text-xs text-zinc-600 font-mono">{clientId}</span>}
     </header>
   );