@ai-sdk/react 0.0.52 → 0.0.53

package/src/use-completion.ts

@@ -1,213 +0,0 @@
-import {
-  JSONValue,
-  RequestOptions,
-  UseCompletionOptions,
-  callCompletionApi,
-} from '@ai-sdk/ui-utils';
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import useSWR from 'swr';
-
-export type { UseCompletionOptions };
-
-export type UseCompletionHelpers = {
-  /** The current completion result */
-  completion: string;
-  /**
-   * Send a new prompt to the API endpoint and update the completion state.
-   */
-  complete: (
-    prompt: string,
-    options?: RequestOptions,
-  ) => Promise<string | null | undefined>;
-  /** The error object of the API request */
-  error: undefined | Error;
-  /**
-   * Abort the current API request but keep the generated tokens.
-   */
-  stop: () => void;
-  /**
-   * Update the `completion` state locally.
-   */
-  setCompletion: (completion: string) => void;
-  /** The current value of the input */
-  input: string;
-  /** setState-powered method to update the input value */
-  setInput: React.Dispatch<React.SetStateAction<string>>;
-  /**
-   * An input/textarea-ready onChange handler to control the value of the input
-   * @example
-   * ```jsx
-   * <input onChange={handleInputChange} value={input} />
-   * ```
-   */
-  handleInputChange: (
-    event:
-      | React.ChangeEvent<HTMLInputElement>
-      | React.ChangeEvent<HTMLTextAreaElement>,
-  ) => void;
-
-  /**
-   * Form submission handler to automatically reset input and append a user message
-   * @example
-   * ```jsx
-   * <form onSubmit={handleSubmit}>
-   *  <input onChange={handleInputChange} value={input} />
-   * </form>
-   * ```
-   */
-  handleSubmit: (event?: { preventDefault?: () => void }) => void;
-
-  /** Whether the API request is in progress */
-  isLoading: boolean;
-  /** Additional data added on the server via StreamData */
-  data?: JSONValue[];
-};
-
-export function useCompletion({
-  api = '/api/completion',
-  id,
-  initialCompletion = '',
-  initialInput = '',
-  credentials,
-  headers,
-  body,
-  streamMode,
-  streamProtocol,
-  fetch,
-  onResponse,
-  onFinish,
-  onError,
-}: UseCompletionOptions = {}): UseCompletionHelpers {
-  // streamMode is deprecated, use streamProtocol instead.
-  if (streamMode) {
-    streamProtocol ??= streamMode === 'text' ? 'text' : undefined;
-  }
-
-  // Generate an unique id for the completion if not provided.
-  const hookId = useId();
-  const completionId = id || hookId;
-
-  // Store the completion state in SWR, using the completionId as the key to share states.
-  const { data, mutate } = useSWR<string>([api, completionId], null, {
-    fallbackData: initialCompletion,
-  });
-
-  const { data: isLoading = false, mutate: mutateLoading } = useSWR<boolean>(
-    [completionId, 'loading'],
-    null,
-  );
-
-  const { data: streamData, mutate: mutateStreamData } = useSWR<
-    JSONValue[] | undefined
-  >([completionId, 'streamData'], null);
-
-  const [error, setError] = useState<undefined | Error>(undefined);
-  const completion = data!;
-
-  // Abort controller to cancel the current API call.
-  const [abortController, setAbortController] =
-    useState<AbortController | null>(null);
-
-  const extraMetadataRef = useRef({
-    credentials,
-    headers,
-    body,
-  });
-  useEffect(() => {
-    extraMetadataRef.current = {
-      credentials,
-      headers,
-      body,
-    };
-  }, [credentials, headers, body]);
-
-  const triggerRequest = useCallback(
-    async (prompt: string, options?: RequestOptions) =>
-      callCompletionApi({
-        api,
-        prompt,
-        credentials: extraMetadataRef.current.credentials,
-        headers: { ...extraMetadataRef.current.headers, ...options?.headers },
-        body: {
-          ...extraMetadataRef.current.body,
-          ...options?.body,
-        },
-        streamProtocol,
-        fetch,
-        setCompletion: completion => mutate(completion, false),
-        setLoading: mutateLoading,
-        setError,
-        setAbortController,
-        onResponse,
-        onFinish,
-        onError,
-        onData: data => {
-          mutateStreamData([...(streamData || []), ...(data || [])], false);
-        },
-      }),
-    [
-      mutate,
-      mutateLoading,
-      api,
-      extraMetadataRef,
-      setAbortController,
-      onResponse,
-      onFinish,
-      onError,
-      setError,
-      streamData,
-      streamProtocol,
-      fetch,
-      mutateStreamData,
-    ],
-  );
-
-  const stop = useCallback(() => {
-    if (abortController) {
-      abortController.abort();
-      setAbortController(null);
-    }
-  }, [abortController]);
-
-  const setCompletion = useCallback(
-    (completion: string) => {
-      mutate(completion, false);
-    },
-    [mutate],
-  );
-
-  const complete = useCallback<UseCompletionHelpers['complete']>(
-    async (prompt, options) => {
-      return triggerRequest(prompt, options);
-    },
-    [triggerRequest],
-  );
-
-  const [input, setInput] = useState(initialInput);
-
-  const handleSubmit = useCallback(
-    (event?: { preventDefault?: () => void }) => {
-      event?.preventDefault?.();
-      return input ? complete(input) : undefined;
-    },
-    [input, complete],
-  );
-
-  const handleInputChange = (e: any) => {
-    setInput(e.target.value);
-  };
-
-  return {
-    completion,
-    complete,
-    error,
-    setCompletion,
-    stop,
-    input,
-    setInput,
-    handleInputChange,
-    handleSubmit,
-    isLoading,
-    data: streamData,
-  };
-}

package/src/use-completion.ui.test.tsx

@@ -1,166 +0,0 @@
-import {
-  mockFetchDataStream,
-  mockFetchDataStreamWithGenerator,
-  mockFetchError,
-} from '@ai-sdk/ui-utils/test';
-import '@testing-library/jest-dom/vitest';
-import { cleanup, findByText, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useCompletion } from './use-completion';
-
-describe('stream data stream', () => {
-  let onFinishResult:
-    | {
-        prompt: string;
-        completion: string;
-      }
-    | undefined;
-
-  const TestComponent = () => {
-    const {
-      completion,
-      handleSubmit,
-      error,
-      handleInputChange,
-      input,
-      isLoading,
-    } = useCompletion({
-      onFinish(prompt, completion) {
-        onFinishResult = { prompt, completion };
-      },
-    });
-
-    return (
-      <div>
-        <div data-testid="loading">{isLoading.toString()}</div>
-        <div data-testid="error">{error?.toString()}</div>
-        <div data-testid="completion">{completion}</div>
-        <form onSubmit={handleSubmit}>
-          <input
-            data-testid="input"
-            value={input}
-            placeholder="Say something..."
-            onChange={handleInputChange}
-          />
-        </form>
-      </div>
-    );
-  };
-
-  beforeEach(() => {
-    render(<TestComponent />);
-    onFinishResult = undefined;
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    cleanup();
-  });
-
-  describe('render simple stream', () => {
-    beforeEach(async () => {
-      mockFetchDataStream({
-        url: 'https://example.com/api/completion',
-        chunks: ['0:"Hello"\n', '0:","\n', '0:" world"\n', '0:"."\n'],
-      });
-
-      await userEvent.type(screen.getByTestId('input'), 'hi{enter}');
-    });
-
-    it('should render stream', async () => {
-      await screen.findByTestId('completion');
-      expect(screen.getByTestId('completion')).toHaveTextContent(
-        'Hello, world.',
-      );
-    });
-
-    it("should call 'onFinish' callback", async () => {
-      await screen.findByTestId('completion');
-      expect(onFinishResult).toEqual({
-        prompt: 'hi',
-        completion: 'Hello, world.',
-      });
-    });
-  });
-
-  describe('loading state', () => {
-    it('should show loading state', async () => {
-      let finishGeneration: ((value?: unknown) => void) | undefined;
-      const finishGenerationPromise = new Promise(resolve => {
-        finishGeneration = resolve;
-      });
-
-      mockFetchDataStreamWithGenerator({
-        url: 'https://example.com/api/chat',
-        chunkGenerator: (async function* generate() {
-          const encoder = new TextEncoder();
-          yield encoder.encode('0:"Hello"\n');
-          await finishGenerationPromise;
-        })(),
-      });
-
-      await userEvent.type(screen.getByTestId('input'), 'hi{enter}');
-
-      await screen.findByTestId('loading');
-      expect(screen.getByTestId('loading')).toHaveTextContent('true');
-
-      finishGeneration?.();
-
-      await findByText(await screen.findByTestId('loading'), 'false');
-      expect(screen.getByTestId('loading')).toHaveTextContent('false');
-    });
-
-    it('should reset loading state on error', async () => {
-      mockFetchError({ statusCode: 404, errorMessage: 'Not found' });
-
-      await userEvent.type(screen.getByTestId('input'), 'hi{enter}');
-
-      await screen.findByTestId('loading');
-      expect(screen.getByTestId('loading')).toHaveTextContent('false');
-    });
-  });
-});
-
-describe('text stream', () => {
-  const TestComponent = () => {
-    const { completion, handleSubmit, handleInputChange, input } =
-      useCompletion({ streamProtocol: 'text' });
-
-    return (
-      <div>
-        <div data-testid="completion-text-stream">{completion}</div>
-        <form onSubmit={handleSubmit}>
-          <input
-            data-testid="input-text-stream"
-            value={input}
-            placeholder="Say something..."
-            onChange={handleInputChange}
-          />
-        </form>
-      </div>
-    );
-  };
-
-  beforeEach(() => {
-    render(<TestComponent />);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    cleanup();
-  });
-
-  it('should render stream', async () => {
-    mockFetchDataStream({
-      url: 'https://example.com/api/completion',
-      chunks: ['Hello', ',', ' world', '.'],
-    });
-
-    await userEvent.type(screen.getByTestId('input-text-stream'), 'hi{enter}');
-
-    await screen.findByTestId('completion-text-stream');
-    expect(screen.getByTestId('completion-text-stream')).toHaveTextContent(
-      'Hello, world.',
-    );
-  });
-});

package/src/use-object.ts

@@ -1,229 +0,0 @@
-import {
-  FetchFunction,
-  isAbortError,
-  safeValidateTypes,
-} from '@ai-sdk/provider-utils';
-import {
-  asSchema,
-  DeepPartial,
-  isDeepEqualData,
-  parsePartialJson,
-  Schema,
-} from '@ai-sdk/ui-utils';
-import { useCallback, useId, useRef, useState } from 'react';
-import useSWR from 'swr';
-import z from 'zod';
-
-// use function to allow for mocking in tests:
-const getOriginalFetch = () => fetch;
-
-export type Experimental_UseObjectOptions<RESULT> = {
-  /**
-   * The API endpoint. It should stream JSON that matches the schema as chunked text.
-   */
-  api: string;
-
-  /**
-   * A Zod schema that defines the shape of the complete object.
-   */
-  schema: z.Schema<RESULT, z.ZodTypeDef, any> | Schema<RESULT>;
-
-  /**
-   * An unique identifier. If not provided, a random one will be
-   * generated. When provided, the `useObject` hook with the same `id` will
-   * have shared states across components.
-   */
-  id?: string;
-
-  /**
-   * An optional value for the initial object.
-   */
-  initialValue?: DeepPartial<RESULT>;
-
-  /**
-Custom fetch implementation. You can use it as a middleware to intercept requests,
-or to provide a custom fetch implementation for e.g. testing.
-    */
-  fetch?: FetchFunction;
-
-  /**
-Callback that is called when the stream has finished.
-     */
-  onFinish?: (event: {
-    /**
-The generated object (typed according to the schema).
-Can be undefined if the final object does not match the schema.
-   */
-    object: RESULT | undefined;
-
-    /**
-Optional error object. This is e.g. a TypeValidationError when the final object does not match the schema.
- */
-    error: Error | undefined;
-  }) => Promise<void> | void;
-
-  /**
-   * Callback function to be called when an error is encountered.
-   */
-  onError?: (error: Error) => void;
-};
-
-export type Experimental_UseObjectHelpers<RESULT, INPUT> = {
-  /**
-   * @deprecated Use `submit` instead.
-   */
-  setInput: (input: INPUT) => void;
-
-  /**
-   * Calls the API with the provided input as JSON body.
-   */
-  submit: (input: INPUT) => void;
-
-  /**
-   * The current value for the generated object. Updated as the API streams JSON chunks.
-   */
-  object: DeepPartial<RESULT> | undefined;
-
-  /**
-   * The error object of the API request if any.
-   */
-  error: undefined | unknown;
-
-  /**
-   * Flag that indicates whether an API request is in progress.
-   */
-  isLoading: boolean;
-
-  /**
-   * Abort the current request immediately, keep the current partial object if any.
-   */
-  stop: () => void;
-};
-
-function useObject<RESULT, INPUT = any>({
-  api,
-  id,
-  schema, // required, in the future we will use it for validation
-  initialValue,
-  fetch,
-  onError,
-  onFinish,
-}: Experimental_UseObjectOptions<RESULT>): Experimental_UseObjectHelpers<
-  RESULT,
-  INPUT
-> {
-  // Generate an unique id if not provided.
-  const hookId = useId();
-  const completionId = id ?? hookId;
-
-  // Store the completion state in SWR, using the completionId as the key to share states.
-  const { data, mutate } = useSWR<DeepPartial<RESULT>>(
-    [api, completionId],
-    null,
-    { fallbackData: initialValue },
-  );
-
-  const [error, setError] = useState<undefined | unknown>(undefined);
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Abort controller to cancel the current API call.
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const stop = useCallback(() => {
-    try {
-      abortControllerRef.current?.abort();
-    } catch (ignored) {
-    } finally {
-      setIsLoading(false);
-      abortControllerRef.current = null;
-    }
-  }, []);
-
-  const submit = async (input: INPUT) => {
-    try {
-      mutate(undefined); // reset the data
-      setIsLoading(true);
-      setError(undefined);
-
-      const abortController = new AbortController();
-      abortControllerRef.current = abortController;
-
-      const actualFetch = fetch ?? getOriginalFetch();
-      const response = await actualFetch(api, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        signal: abortController.signal,
-        body: JSON.stringify(input),
-      });
-
-      if (!response.ok) {
-        throw new Error(
-          (await response.text()) ?? 'Failed to fetch the response.',
-        );
-      }
-
-      if (response.body == null) {
-        throw new Error('The response body is empty.');
-      }
-
-      let accumulatedText = '';
-      let latestObject: DeepPartial<RESULT> | undefined = undefined;
-
-      await response.body.pipeThrough(new TextDecoderStream()).pipeTo(
-        new WritableStream<string>({
-          write(chunk) {
-            accumulatedText += chunk;
-
-            const { value } = parsePartialJson(accumulatedText);
-            const currentObject = value as DeepPartial<RESULT>;
-
-            if (!isDeepEqualData(latestObject, currentObject)) {
-              latestObject = currentObject;
-
-              mutate(currentObject);
-            }
-          },
-
-          close() {
-            setIsLoading(false);
-            abortControllerRef.current = null;
-
-            if (onFinish != null) {
-              const validationResult = safeValidateTypes({
-                value: latestObject,
-                schema: asSchema(schema),
-              });
-
-              onFinish(
-                validationResult.success
-                  ? { object: validationResult.value, error: undefined }
-                  : { object: undefined, error: validationResult.error },
-              );
-            }
-          },
-        }),
-      );
-    } catch (error) {
-      if (isAbortError(error)) {
-        return;
-      }
-
-      if (onError && error instanceof Error) {
-        onError(error);
-      }
-
-      setError(error);
-    }
-  };
-
-  return {
-    setInput: submit, // Deprecated
-    submit,
-    object: data,
-    error,
-    isLoading,
-    stop,
-  };
-}
-
-export const experimental_useObject = useObject;