Chris Tate 5 месяцев назад
Родитель
Сommit
39fcc192e9
2 измененных файлов с 17 добавлено и 13 удалено
  1. 6 6
      apps/web/app/(main)/docs/api/react/page.tsx
  2. 11 7
      apps/web/app/(main)/docs/streaming/page.tsx

+ 6 - 6
apps/web/app/(main)/docs/api/react/page.tsx

@@ -94,15 +94,15 @@ type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;`}</Co
 
 
       <h3 className="text-lg font-semibold mt-8 mb-4">useUIStream</h3>
       <h3 className="text-lg font-semibold mt-8 mb-4">useUIStream</h3>
       <Code lang="typescript">{`const {
       <Code lang="typescript">{`const {
-  spec,         // Spec - current UI state
+  spec,         // Spec | null - current UI state
   isStreaming,  // boolean - true while streaming
   isStreaming,  // boolean - true while streaming
   error,        // Error | null
   error,        // Error | null
-  send,         // (prompt: string) => void
-  abort,        // () => void
+  send,         // (prompt: string, context?: Record<string, unknown>) => Promise<void>
+  clear,        // () => void - reset spec and error
 } = useUIStream({
 } = useUIStream({
-  api: string,                       // API endpoint URL
-  onChunk?: (chunk: string) => void, // Called for each chunk
-  onFinish?: (spec: Spec) => void,   // Called when streaming completes
+  api: string,                         // API endpoint URL
+  onComplete?: (spec: Spec) => void,   // Called when streaming completes
+  onError?: (error: Error) => void,    // Called when an error occurs
 });`}</Code>
 });`}</Code>
 
 
       <h3 className="text-lg font-semibold mt-8 mb-4">useData</h3>
       <h3 className="text-lg font-semibold mt-8 mb-4">useData</h3>

+ 11 - 7
apps/web/app/(main)/docs/streaming/page.tsx

@@ -34,11 +34,11 @@ function App() {
     isStreaming,   // True while streaming
     isStreaming,   // True while streaming
     error,         // Any error that occurred
     error,         // Any error that occurred
     send,          // Function to start generation
     send,          // Function to start generation
-    abort,         // Function to cancel streaming
+    clear,         // Function to reset spec and error
   } = useUIStream({
   } = useUIStream({
     api: '/api/generate',
     api: '/api/generate',
-    onChunk: (chunk) => {},   // Optional: called for each chunk
-    onFinish: (spec) => {},   // Optional: called when complete
+    onComplete: (spec) => {},  // Optional: called when streaming completes
+    onError: (error) => {},    // Optional: called when an error occurs
   });
   });
 }`}</Code>
 }`}</Code>
 
 
@@ -112,8 +112,14 @@ export async function POST(req: Request) {
 }`}</Code>
 }`}</Code>
 
 
       <h2 className="text-xl font-semibold mt-12 mb-4">Aborting Streams</h2>
       <h2 className="text-xl font-semibold mt-12 mb-4">Aborting Streams</h2>
+      <p className="text-sm text-muted-foreground mb-4">
+        Calling <code className="text-foreground">send</code> again
+        automatically aborts the previous request. Use{" "}
+        <code className="text-foreground">clear</code> to reset the spec and
+        error state:
+      </p>
       <Code lang="tsx">{`function App() {
       <Code lang="tsx">{`function App() {
-  const { isStreaming, send, abort } = useUIStream({
+  const { isStreaming, send, clear } = useUIStream({
     api: '/api/generate',
     api: '/api/generate',
   });
   });
 
 
@@ -122,9 +128,7 @@ export async function POST(req: Request) {
       <button onClick={() => send('Create dashboard')}>
       <button onClick={() => send('Create dashboard')}>
         Generate
         Generate
       </button>
       </button>
-      {isStreaming && (
-        <button onClick={abort}>Cancel</button>
-      )}
+      <button onClick={clear}>Reset</button>
     </div>
     </div>
   );
   );
 }`}</Code>
 }`}</Code>