@ai-sdk/rsc 2.0.45 → 2.0.47

package/src/shared-client/context.tsx

@@ -0,0 +1,226 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import * as React from 'react';
+
+import * as jsondiffpatch from 'jsondiffpatch';
+import { isFunction } from '../util/is-function';
+import type {
+  AIProvider,
+  InferActions,
+  InferAIState,
+  InferUIState,
+  InternalAIProviderProps,
+  ValueOrUpdater,
+} from '../types';
+
+const InternalUIStateProvider = React.createContext<null | any>(null);
+const InternalAIStateProvider = React.createContext<undefined | any>(undefined);
+const InternalActionProvider = React.createContext<null | any>(null);
+const InternalSyncUIStateProvider = React.createContext<null | any>(null);
+
+export function InternalAIProvider({
+  children,
+  initialUIState,
+  initialAIState,
+  initialAIStatePatch,
+  wrappedActions,
+  wrappedSyncUIState,
+}: InternalAIProviderProps) {
+  if (!('use' in React)) {
+    throw new Error('Unsupported React version.');
+  }
+
+  const uiState = React.useState(initialUIState);
+  const setUIState = uiState[1];
+
+  const resolvedInitialAIStatePatch = initialAIStatePatch
+    ? (React as any).use(initialAIStatePatch)
+    : undefined;
+  initialAIState = React.useMemo(() => {
+    if (resolvedInitialAIStatePatch) {
+      return jsondiffpatch.patch(
+        jsondiffpatch.clone(initialAIState),
+        resolvedInitialAIStatePatch,
+      );
+    }
+    return initialAIState;
+  }, [initialAIState, resolvedInitialAIStatePatch]);
+
+  const aiState = React.useState(initialAIState);
+  const setAIState = aiState[1];
+  const aiStateRef = React.useRef(aiState[0]);
+
+  React.useEffect(() => {
+    aiStateRef.current = aiState[0];
+  }, [aiState[0]]);
+
+  const clientWrappedActions = React.useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(wrappedActions).map(([key, action]) => [
+          key,
+          async (...args: any) => {
+            const aiStateSnapshot = aiStateRef.current;
+            const [aiStateDelta, result] = await action(
+              aiStateSnapshot,
+              ...args,
+            );
+            (async () => {
+              const delta = await aiStateDelta;
+              if (delta !== undefined) {
+                aiState[1](
+                  jsondiffpatch.patch(
+                    jsondiffpatch.clone(aiStateSnapshot),
+                    delta,
+                  ),
+                );
+              }
+            })();
+            return result;
+          },
+        ]),
+      ),
+    [wrappedActions],
+  );
+
+  const clientWrappedSyncUIStateAction = React.useMemo(() => {
+    if (!wrappedSyncUIState) {
+      return () => {};
+    }
+
+    return async () => {
+      const aiStateSnapshot = aiStateRef.current;
+      const [aiStateDelta, uiState] =
+        await wrappedSyncUIState!(aiStateSnapshot);
+
+      if (uiState !== undefined) {
+        setUIState(uiState);
+      }
+
+      const delta = await aiStateDelta;
+      if (delta !== undefined) {
+        const patchedAiState = jsondiffpatch.patch(
+          jsondiffpatch.clone(aiStateSnapshot),
+          delta,
+        );
+        setAIState(patchedAiState);
+      }
+    };
+  }, [wrappedSyncUIState]);
+
+  return (
+    <InternalAIStateProvider.Provider value={aiState}>
+      <InternalUIStateProvider.Provider value={uiState}>
+        <InternalActionProvider.Provider value={clientWrappedActions}>
+          <InternalSyncUIStateProvider.Provider
+            value={clientWrappedSyncUIStateAction}
+          >
+            {children}
+          </InternalSyncUIStateProvider.Provider>
+        </InternalActionProvider.Provider>
+      </InternalUIStateProvider.Provider>
+    </InternalAIStateProvider.Provider>
+  );
+}
+
+export function useUIState<AI extends AIProvider = any>() {
+  type T = InferUIState<AI, any>;
+
+  const state = React.useContext<
+    [T, (v: T | ((v_: T) => T)) => void] | null | undefined
+  >(InternalUIStateProvider);
+  if (state === null) {
+    throw new Error('`useUIState` must be used inside an <AI> provider.');
+  }
+  if (!Array.isArray(state)) {
+    throw new Error('Invalid state');
+  }
+  if (state[0] === undefined) {
+    throw new Error(
+      '`initialUIState` must be provided to `createAI` or `<AI>`',
+    );
+  }
+  return state;
+}
+
+// TODO: How do we avoid causing a re-render when the AI state changes but you
+// are only listening to a specific key? We need useSES perhaps?
+function useAIState<AI extends AIProvider = any>(): [
+  InferAIState<AI, any>,
+  (newState: ValueOrUpdater<InferAIState<AI, any>>) => void,
+];
+function useAIState<AI extends AIProvider = any>(
+  key: keyof InferAIState<AI, any>,
+): [
+  InferAIState<AI, any>[typeof key],
+  (newState: ValueOrUpdater<InferAIState<AI, any>[typeof key]>) => void,
+];
+function useAIState<AI extends AIProvider = any>(
+  ...args: [] | [keyof InferAIState<AI, any>]
+) {
+  type T = InferAIState<AI, any>;
+
+  const state = React.useContext<
+    [T, (newState: ValueOrUpdater<T>) => void] | null | undefined
+  >(InternalAIStateProvider);
+  if (state === null) {
+    throw new Error('`useAIState` must be used inside an <AI> provider.');
+  }
+  if (!Array.isArray(state)) {
+    throw new Error('Invalid state');
+  }
+  if (state[0] === undefined) {
+    throw new Error(
+      '`initialAIState` must be provided to `createAI` or `<AI>`',
+    );
+  }
+  if (args.length >= 1 && typeof state[0] !== 'object') {
+    throw new Error(
+      'When using `useAIState` with a key, the AI state must be an object.',
+    );
+  }
+
+  const key = args[0];
+  const setter = React.useCallback(
+    typeof key === 'undefined'
+      ? state[1]
+      : (newState: ValueOrUpdater<T>) => {
+          if (isFunction(newState)) {
+            return state[1](s => {
+              return { ...s, [key]: newState(s[key]) };
+            });
+          } else {
+            return state[1]({ ...state[0], [key]: newState });
+          }
+        },
+    [key],
+  );
+
+  if (args.length === 0) {
+    return state;
+  } else {
+    return [state[0][args[0]], setter];
+  }
+}
+
+export function useActions<AI extends AIProvider = any>() {
+  type T = InferActions<AI, any>;
+
+  const actions = React.useContext<T>(InternalActionProvider);
+  return actions;
+}
+
+export function useSyncUIState() {
+  const syncUIState = React.useContext<() => Promise<void>>(
+    InternalSyncUIStateProvider,
+  );
+
+  if (syncUIState === null) {
+    throw new Error('`useSyncUIState` must be used inside an <AI> provider.');
+  }
+
+  return syncUIState;
+}
+
+export { useAIState };

package/src/shared-client/index.ts

@@ -0,0 +1,11 @@
+'use client';
+
+export { readStreamableValue } from '../streamable-value/read-streamable-value';
+export { useStreamableValue } from '../streamable-value/use-streamable-value';
+export {
+  InternalAIProvider,
+  useAIState,
+  useActions,
+  useSyncUIState,
+  useUIState,
+} from './context';

package/src/stream-ui/__snapshots__/render.ui.test.tsx.snap

@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should emit React Nodes with async render function 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": true,
+          "value": <div>
+            Weather
+          </div>,
+        },
+        "value": <div>
+          Weather
+        </div>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`should emit React Nodes with generator render function 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": false,
+          "next": {
+            "done": true,
+            "value": <div>
+              Weather
+            </div>,
+          },
+          "value": <div>
+            Weather
+          </div>,
+        },
+        "value": <div>
+          Loading...
+        </div>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`should emit React Nodes with sync render function 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": true,
+          "value": <div>
+            Weather
+          </div>,
+        },
+        "value": <div>
+          Weather
+        </div>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;

package/src/stream-ui/__snapshots__/stream-ui.ui.test.tsx.snap

@@ -0,0 +1,213 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`options.headers > should pass headers to model 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": true,
+          "value": "{ "content": "headers test" }",
+        },
+        "value": "{ "content": "headers test" }",
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`options.providerMetadata > should pass provider metadata to model 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": true,
+          "value": "{ "content": "provider metadata test" }",
+        },
+        "value": "{ "content": "provider metadata test" }",
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should render text 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": false,
+          "next": {
+            "done": false,
+            "next": {
+              "done": false,
+              "next": {
+                "done": false,
+                "next": {
+                  "done": false,
+                  "next": {
+                    "done": true,
+                    "value": "{ "content": "Hello, world!" }",
+                  },
+                  "value": "{ "content": "Hello, world!" }",
+                },
+                "value": "{ "content": "Hello, world!"",
+              },
+              "value": "{ "content": "Hello, world",
+            },
+            "value": "{ "content": "Hello, ",
+          },
+          "value": "{ "content": ",
+        },
+        "value": "{ ",
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should render text function returned ui 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": false,
+          "next": {
+            "done": false,
+            "next": {
+              "done": false,
+              "next": {
+                "done": false,
+                "next": {
+                  "done": false,
+                  "next": {
+                    "done": true,
+                    "value": <h1>
+                      { "content": "Hello, world!" }
+                    </h1>,
+                  },
+                  "value": <h1>
+                    { "content": "Hello, world!" }
+                  </h1>,
+                },
+                "value": <h1>
+                  { "content": "Hello, world!"
+                </h1>,
+              },
+              "value": <h1>
+                { "content": "Hello, world
+              </h1>,
+            },
+            "value": <h1>
+              { "content": "Hello, 
+            </h1>,
+          },
+          "value": <h1>
+            { "content": 
+          </h1>,
+        },
+        "value": <h1>
+          { 
+        </h1>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should render tool call results 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": true,
+        "value": <div>
+          tool1: 
+          value
+        </div>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should render tool call results with generator render function 1`] = `
+{
+  "children": {
+    "children": {},
+    "props": {
+      "c": undefined,
+      "n": {
+        "done": false,
+        "next": {
+          "done": true,
+          "value": <div>
+            tool: 
+            value
+          </div>,
+        },
+        "value": <div>
+          Loading...
+        </div>,
+      },
+    },
+    "type": "",
+  },
+  "props": {
+    "fallback": undefined,
+  },
+  "type": "Symbol(react.suspense)",
+}
+`;
+
+exports[`result.value > should show better error messages if legacy options are passed 1`] = `[Error: Tool definition in \`streamUI\` should not have \`render\` property. Use \`generate\` instead. Found in tool: tool1]`;
+
+exports[`rsc - streamUI() onFinish callback > should contain final React node 1`] = `
+<React.Suspense>
+  <Unknown
+    n={Promise {}}
+  />
+</React.Suspense>
+`;

package/src/stream-ui/index.tsx

@@ -0,0 +1 @@
+export { streamUI } from './stream-ui';