@ai-sdk/react 0.0.1

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

@@ -0,0 +1,209 @@
+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 React from 'react';
+import { useChat } from './use-chat';
+
+describe('stream data stream', () => {
+  const TestComponent = () => {
+    const [id, setId] = React.useState<string>('first-id');
+    const { messages, append, error, data, isLoading } = useChat({ id });
+
+    return (
+      <div>
+        <div data-testid="loading">{isLoading.toString()}</div>
+        {error && <div data-testid="error">{error.toString()}</div>}
+        {data && <div data-testid="data">{JSON.stringify(data)}</div>}
+        {messages.map((m, idx) => (
+          <div data-testid={`message-${idx}`} key={m.id}>
+            {m.role === 'user' ? 'User: ' : 'AI: '}
+            {m.content}
+          </div>
+        ))}
+
+        <button
+          data-testid="do-append"
+          onClick={() => {
+            append({ role: 'user', content: 'hi' });
+          }}
+        />
+        <button
+          data-testid="do-change-id"
+          onClick={() => {
+            setId('second-id');
+          }}
+        />
+      </div>
+    );
+  };
+
+  beforeEach(() => {
+    render(<TestComponent />);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+
+  it('should show streamed response', async () => {
+    mockFetchDataStream({
+      url: 'https://example.com/api/chat',
+      chunks: ['0:"Hello"\n', '0:","\n', '0:" world"\n', '0:"."\n'],
+    });
+
+    await userEvent.click(screen.getByTestId('do-append'));
+
+    await screen.findByTestId('message-0');
+    expect(screen.getByTestId('message-0')).toHaveTextContent('User: hi');
+
+    await screen.findByTestId('message-1');
+    expect(screen.getByTestId('message-1')).toHaveTextContent(
+      'AI: Hello, world.',
+    );
+  });
+
+  it('should show streamed response with data', async () => {
+    mockFetchDataStream({
+      url: 'https://example.com/api/chat',
+      chunks: ['2:[{"t1":"v1"}]\n', '0:"Hello"\n'],
+    });
+
+    await userEvent.click(screen.getByTestId('do-append'));
+
+    await screen.findByTestId('data');
+    expect(screen.getByTestId('data')).toHaveTextContent('[{"t1":"v1"}]');
+
+    await screen.findByTestId('message-1');
+    expect(screen.getByTestId('message-1')).toHaveTextContent('AI: Hello');
+  });
+
+  it('should show error response', async () => {
+    mockFetchError({ statusCode: 404, errorMessage: 'Not found' });
+
+    await userEvent.click(screen.getByTestId('do-append'));
+
+    // TODO bug? the user message does not show up
+    // await screen.findByTestId('message-0');
+    // expect(screen.getByTestId('message-0')).toHaveTextContent('User: hi');
+
+    await screen.findByTestId('error');
+    expect(screen.getByTestId('error')).toHaveTextContent('Error: Not found');
+  });
+
+  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.click(screen.getByTestId('do-append'));
+
+      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.click(screen.getByTestId('do-append'));
+
+      await screen.findByTestId('loading');
+      expect(screen.getByTestId('loading')).toHaveTextContent('false');
+    });
+  });
+
+  describe('id', () => {
+    it('should clear out messages when the id changes', async () => {
+      mockFetchDataStream({
+        url: 'https://example.com/api/chat',
+        chunks: ['0:"Hello"\n', '0:","\n', '0:" world"\n', '0:"."\n'],
+      });
+
+      await userEvent.click(screen.getByTestId('do-append'));
+
+      await screen.findByTestId('message-1');
+      expect(screen.getByTestId('message-1')).toHaveTextContent(
+        'AI: Hello, world.',
+      );
+
+      await userEvent.click(screen.getByTestId('do-change-id'));
+
+      expect(screen.queryByTestId('message-0')).not.toBeInTheDocument();
+    });
+  });
+});
+
+describe('text stream', () => {
+  const TestComponent = () => {
+    const { messages, append } = useChat({
+      streamMode: 'text',
+    });
+
+    return (
+      <div>
+        {messages.map((m, idx) => (
+          <div data-testid={`message-${idx}-text-stream`} key={m.id}>
+            {m.role === 'user' ? 'User: ' : 'AI: '}
+            {m.content}
+          </div>
+        ))}
+
+        <button
+          data-testid="do-append-text-stream"
+          onClick={() => {
+            append({ role: 'user', content: 'hi' });
+          }}
+        />
+      </div>
+    );
+  };
+
+  beforeEach(() => {
+    render(<TestComponent />);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+
+  it('should show streamed response', async () => {
+    mockFetchDataStream({
+      url: 'https://example.com/api/chat',
+      chunks: ['Hello', ',', ' world', '.'],
+    });
+
+    await userEvent.click(screen.getByTestId('do-append-text-stream'));
+
+    await screen.findByTestId('message-0-text-stream');
+    expect(screen.getByTestId('message-0-text-stream')).toHaveTextContent(
+      'User: hi',
+    );
+
+    await screen.findByTestId('message-1-text-stream');
+    expect(screen.getByTestId('message-1-text-stream')).toHaveTextContent(
+      'AI: Hello, world.',
+    );
+  });
+});

package/src/use-completion.ts

@@ -0,0 +1,203 @@
+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: (
+    e:
+      | 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: (e: React.FormEvent<HTMLFormElement>) => 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,
+  onResponse,
+  onFinish,
+  onError,
+}: UseCompletionOptions = {}): UseCompletionHelpers {
+  // 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,
+        },
+        streamMode,
+        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,
+      streamMode,
+      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(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (!input) return;
+      return complete(input);
+    },
+    [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

@@ -0,0 +1,142 @@
+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', () => {
+  const TestComponent = () => {
+    const {
+      completion,
+      handleSubmit,
+      error,
+      handleInputChange,
+      input,
+      isLoading,
+    } = useCompletion();
+
+    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 />);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+
+  it('should render stream', 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}');
+
+    await screen.findByTestId('completion');
+    expect(screen.getByTestId('completion')).toHaveTextContent('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({
+        streamMode: '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/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./node_modules/@vercel/ai-tsconfig/react-library.json",
+  "compilerOptions": {
+    "target": "ES2018",
+    "stripInternal": true
+  },
+  "include": ["."],
+  "exclude": ["*/dist", "dist", "build", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig([
+  {
+    entry: ['src/index.ts'],
+    outDir: 'dist',
+    banner: {},
+    format: ['cjs', 'esm'],
+    external: ['vue'],
+    dts: true,
+    sourcemap: true,
+  },
+]);

package/turbo.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "build": {
+      "outputs": ["**/dist/**"]
+    }
+  }
+}

package/vitest.config.js

@@ -0,0 +1,12 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['src/**/*.ui.test.ts', 'src/**/*.ui.test.tsx'],
+  },
+});