react: update hooks to support context-based transport fallback

- Updated hooks (`useView`, `useTree`, `useCreateView`, `useAblyMessages`, `useActiveTurns`, etc.) to use nearest transport for transport fallback when no explicit transport is provided.
- Modified `TransportProvider`
- Adjusted all affected hooks and types to align with the updated transport resolution mechanism via context.

Author: ttypic

README.md

@@ -144,12 +144,17 @@ export async function POST(req: Request) {
 
 import { useChat } from '@ai-sdk/react';
 import type * as AI from 'ai';
-import { TransportProvider, useClientTransport, useActiveTurns, useView } from '@ably/ai-transport/react';
+import { createTransportHooks } from '@ably/ai-transport/react';
 import { useChatTransport, useMessageSync } from '@ably/ai-transport/vercel/react';
 import { UIMessageCodec } from '@ably/ai-transport/vercel';
 
+const { TransportProvider, useClientTransport, useActiveTurns, useView } = createTransportHooks<
+  AI.UIMessageChunk,
+  AI.UIMessage
+>();
+
 function ChatInner({ chatId }: { chatId: string }) {
-  const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>();
+  const transport = useClientTransport();
   const chatTransport = useChatTransport(transport);
 
   const { messages, setMessages, sendMessage, stop } = useChat({
@@ -159,8 +164,8 @@ function ChatInner({ chatId }: { chatId: string }) {
 
   useMessageSync(transport, setMessages);
 
-  const activeTurns = useActiveTurns(transport);
-  useView(transport, { limit: 30 });
+  const activeTurns = useActiveTurns();
+  useView({ limit: 30 });
 
   return (
     <div>
@@ -174,7 +179,12 @@ function ChatInner({ chatId }: { chatId: string }) {
         }}
       >
         {activeTurns.size > 0 ? (
-          <button type="button" onClick={stop}>Stop</button>
+          <button
+            type="button"
+            onClick={stop}
+          >
+            Stop
+          </button>
         ) : (
           <button type="submit">Send</button>
         )}
@@ -185,7 +195,11 @@ function ChatInner({ chatId }: { chatId: string }) {
 
 function Chat({ chatId, clientId }: { chatId: string; clientId?: string }) {
   return (
-    <TransportProvider channelName={chatId} codec={UIMessageCodec} clientId={clientId}>
+    <TransportProvider
+      channelName={chatId}
+      codec={UIMessageCodec}
+      clientId={clientId}
+    >
       <ChatInner chatId={chatId} />
     </TransportProvider>
   );

demo/vercel/react/use-chat/src/app/chat.tsx

@@ -15,7 +15,7 @@ import { useClientTools } from './hooks/use-client-tools';
 
 export function Chat({ chatId, clientId, historyLimit }: { chatId: string; clientId?: string; historyLimit?: number }) {
   // Transport is created by TransportProvider in page.tsx
-  const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>();
+  const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>({ channelName: chatId });
   const chatTransport = useChatTransport(transport);
 
   const {
@@ -33,15 +33,15 @@ export function Chat({ chatId, clientId, historyLimit }: { chatId: string; clien
 
   useMessageSync(transport, setMessages);
 
-  const activeTurns = useActiveTurns(transport);
+  const activeTurns = useActiveTurns({ transport });
   const hasAnyTurns = activeTurns.size > 0;
 
-  // Auto-loads first page on mount (options provided = enabled)
-  const { nodes, hasOlder, loading, loadOlder } = useView(transport, { limit: historyLimit ?? 30 });
+  // Auto-loads first page on mount
+  const { nodes, hasOlder, loading, loadOlder } = useView({ transport, limit: historyLimit ?? 30 });
 
   useClientTools(chatMessages, addToolResult, nodes, clientId);
 
-  const ablyMessages = useAblyMessages(transport);
+  const ablyMessages = useAblyMessages({ transport });
 
   return (
     <div className="flex h-dvh">

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

@@ -30,17 +30,17 @@ interface ChatProps {
 
 export function Chat({ chatId, clientId, historyLimit }: ChatProps) {
   // Transport is created by TransportProvider in page.tsx
-  const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>(chatId);
+  const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>({ channelName: chatId });
   const [split, setSplit] = useState(false);
 
   const limit = historyLimit ?? 30;
-  const view = useView(transport, { limit });
-  const splitView = useCreateView(split ? transport : undefined, { limit });
+  const view = useView({ transport, limit });
+  const splitView = useCreateView({ transport, limit, skip: !split });
 
   useClientTools(view, clientId);
 
-  const activeTurns = useActiveTurns(transport);
-  const ablyMessages = useAblyMessages(transport);
+  const activeTurns = useActiveTurns({ transport });
+  const ablyMessages = useAblyMessages({ transport });
   const queue = useMessageQueue(transport, view.send);
 
   const handleToolApproved = useCallback(

docs/frameworks/vercel-ai-sdk.md

@@ -27,9 +27,13 @@ import { useChat } from '@ai-sdk/react';
 import type * as AI from 'ai';
 
 // Wrap your component tree with TransportProvider
-<TransportProvider channelName={chatId} codec={UIMessageCodec} clientId={clientId}>
+<TransportProvider
+  channelName={chatId}
+  codec={UIMessageCodec}
+  clientId={clientId}
+>
   <ChatInner chatId={chatId} />
-</TransportProvider>
+</TransportProvider>;
 
 // Inside ChatInner:
 const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>();
@@ -51,18 +55,18 @@ useMessageSync(transport, setMessages);
 Use the generic React hooks directly. You manage message state through the transport's conversation tree instead of `useChat()`.
 
 ```tsx
-import {
-  TransportProvider,
-  useClientTransport,
-  useView,
-  useActiveTurns} from '@ably/ai-transport/react';
+import { TransportProvider, useClientTransport, useView, useActiveTurns } from '@ably/ai-transport/react';
 import { UIMessageCodec } from '@ably/ai-transport/vercel';
 import type * as AI from 'ai';
 
 // Wrap your component tree with TransportProvider
-<TransportProvider channelName={chatId} codec={UIMessageCodec} clientId={clientId}>
+<TransportProvider
+  channelName={chatId}
+  codec={UIMessageCodec}
+  clientId={clientId}
+>
   <ChatInner />
-</TransportProvider>
+</TransportProvider>;
 
 // Inside ChatInner:
 const transport = useClientTransport<AI.UIMessageChunk, AI.UIMessage>();