@ai-sdk/vue 3.0.44 → 3.0.46

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './use-completion';
+export { Chat } from './chat.vue';
+export * from './use-object';

package/src/package.json

@@ -0,0 +1,10 @@
+{
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": "./dist/index.mjs",
+  "private": true,
+  "peerDependencies": {
+    "vue": "*"
+  }
+}

package/src/setup-test-component.ts

@@ -0,0 +1,22 @@
+import { cleanup, render } from '@testing-library/vue';
+import { beforeEach, afterEach, vi } from 'vitest';
+
+export const setupTestComponent = (
+  TestComponent: any,
+  {
+    init,
+  }: {
+    init?: (TestComponent: any) => any;
+  } = {},
+) => {
+  beforeEach(() => {
+    render(init?.(TestComponent) ?? TestComponent);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+
+  return TestComponent;
+};

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+// required for vue testing library
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}

package/src/use-completion.ts

@@ -0,0 +1,162 @@
+import type { CompletionRequestOptions, UseCompletionOptions } from 'ai';
+import { callCompletionApi } from 'ai';
+import swrv from 'swrv';
+import type { Ref } from 'vue';
+import { ref, unref } from 'vue';
+
+export type { UseCompletionOptions };
+
+export type UseCompletionHelpers = {
+  /** The current completion result */
+  completion: Ref<string>;
+  /** The error object of the API request */
+  error: Ref<undefined | Error>;
+  /**
+   * Send a new prompt to the API endpoint and update the completion state.
+   */
+  complete: (
+    prompt: string,
+    options?: CompletionRequestOptions,
+  ) => Promise<string | null | undefined>;
+  /**
+   * 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: Ref<string>;
+  /**
+   * Form submission handler to automatically reset input and append a user message
+   * @example
+   * ```jsx
+   * <form @submit="handleSubmit">
+   *  <input @change="handleInputChange" v-model="input" />
+   * </form>
+   * ```
+   */
+  handleSubmit: (event?: { preventDefault?: () => void }) => void;
+  /** Whether the API request is in progress */
+  isLoading: Ref<boolean | undefined>;
+};
+
+let uniqueId = 0;
+
+// @ts-expect-error - some issues with the default export of useSWRV
+const useSWRV = (swrv.default as (typeof import('swrv'))['default']) || swrv;
+const store: Record<string, any> = {};
+
+export function useCompletion({
+  api = '/api/completion',
+  id,
+  initialCompletion = '',
+  initialInput = '',
+  credentials,
+  headers,
+  body,
+  streamProtocol,
+  onFinish,
+  onError,
+  fetch,
+}: UseCompletionOptions = {}): UseCompletionHelpers {
+  // Generate an unique id for the completion if not provided.
+  const completionId = id || `completion-${uniqueId++}`;
+
+  const key = `${api}|${completionId}`;
+  const { data, mutate: originalMutate } = useSWRV<string>(
+    key,
+    () => store[key] || initialCompletion,
+  );
+
+  const { data: isLoading, mutate: mutateLoading } = useSWRV<boolean>(
+    `${completionId}-loading`,
+    null,
+  );
+
+  isLoading.value ??= false;
+
+  // Force the `data` to be `initialCompletion` if it's `undefined`.
+  data.value ||= initialCompletion;
+
+  const mutate = (data: string) => {
+    store[key] = data;
+    return originalMutate();
+  };
+
+  // Because of the `initialData` option, the `data` will never be `undefined`.
+  const completion = data as Ref<string>;
+
+  const error = ref<undefined | Error>(undefined);
+
+  let abortController: AbortController | null = null;
+
+  async function triggerRequest(
+    prompt: string,
+    options?: CompletionRequestOptions,
+  ) {
+    return callCompletionApi({
+      api,
+      prompt,
+      credentials,
+      headers: {
+        ...headers,
+        ...options?.headers,
+      },
+      body: {
+        ...unref(body),
+        ...options?.body,
+      },
+      streamProtocol,
+      setCompletion: mutate,
+      setLoading: loading => mutateLoading(() => loading),
+      setError: err => {
+        error.value = err;
+      },
+      setAbortController: controller => {
+        abortController = controller;
+      },
+      onFinish,
+      onError,
+      fetch,
+    });
+  }
+
+  const complete: UseCompletionHelpers['complete'] = async (
+    prompt,
+    options,
+  ) => {
+    return triggerRequest(prompt, options);
+  };
+
+  const stop = () => {
+    if (abortController) {
+      abortController.abort();
+      abortController = null;
+    }
+  };
+
+  const setCompletion = (completion: string) => {
+    mutate(completion);
+  };
+
+  const input = ref(initialInput);
+
+  const handleSubmit = (event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+    const inputValue = input.value;
+    return inputValue ? complete(inputValue) : undefined;
+  };
+
+  return {
+    completion,
+    complete,
+    error,
+    stop,
+    setCompletion,
+    input,
+    handleSubmit,
+    isLoading,
+  };
+}

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

@@ -0,0 +1,97 @@
+import {
+  createTestServer,
+  TestResponseController,
+} from '@ai-sdk/test-server/with-vitest';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import { findByText, screen } from '@testing-library/vue';
+import { UIMessageChunk } from 'ai';
+import TestCompletionComponent from './TestCompletionComponent.vue';
+import TestCompletionTextStreamComponent from './TestCompletionTextStreamComponent.vue';
+import { setupTestComponent } from './setup-test-component';
+import { describe, it, expect } from 'vitest';
+
+function formatChunk(part: UIMessageChunk) {
+  return `data: ${JSON.stringify(part)}\n\n`;
+}
+
+const server = createTestServer({
+  '/api/completion': {},
+});
+
+describe('stream data stream', () => {
+  setupTestComponent(TestCompletionComponent);
+
+  it('should show streamed response', async () => {
+    server.urls['/api/completion'].response = {
+      type: 'stream-chunks',
+      chunks: [
+        formatChunk({ type: 'text-start', id: '0' }),
+        formatChunk({ type: 'text-delta', id: '0', delta: 'Hello' }),
+        formatChunk({ type: 'text-delta', id: '0', delta: ',' }),
+        formatChunk({ type: 'text-delta', id: '0', delta: ' world' }),
+        formatChunk({ type: 'text-delta', id: '0', delta: '.' }),
+        formatChunk({ type: 'text-end', id: '0' }),
+      ],
+    };
+
+    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 () => {
+      const controller = new TestResponseController();
+      server.urls['/api/completion'].response = {
+        type: 'controlled-stream',
+        controller,
+      };
+
+      await userEvent.type(screen.getByTestId('input'), 'hi{enter}');
+
+      await screen.findByTestId('loading');
+      expect(screen.getByTestId('loading')).toHaveTextContent('true');
+
+      controller.write(formatChunk({ type: 'text-start', id: '0' }));
+      controller.write(
+        formatChunk({ type: 'text-delta', id: '0', delta: 'Hello' }),
+      );
+      controller.write(formatChunk({ type: 'text-end', id: '0' }));
+      controller.close();
+
+      await findByText(await screen.findByTestId('loading'), 'false');
+      expect(screen.getByTestId('loading')).toHaveTextContent('false');
+    });
+
+    it('should reset loading state on error', async () => {
+      server.urls['/api/completion'].response = {
+        type: 'error',
+        status: 404,
+        body: 'Not found',
+      };
+
+      await userEvent.type(screen.getByTestId('input'), 'hi{enter}');
+
+      await screen.findByTestId('loading');
+      expect(screen.getByTestId('loading')).toHaveTextContent('false');
+    });
+  });
+});
+
+describe('stream data stream', () => {
+  setupTestComponent(TestCompletionTextStreamComponent);
+
+  it('should show streamed response', async () => {
+    server.urls['/api/completion'].response = {
+      type: 'stream-chunks',
+      chunks: ['Hello', ',', ' world', '.'],
+    };
+
+    await userEvent.type(screen.getByTestId('input'), 'hi{enter}');
+
+    await screen.findByTestId('completion');
+    expect(screen.getByTestId('completion')).toHaveTextContent('Hello, world.');
+  });
+});

package/src/use-object.ts

@@ -0,0 +1,232 @@
+import {
+  isAbortError,
+  safeValidateTypes,
+  type FetchFunction,
+} from '@ai-sdk/provider-utils';
+import {
+  asSchema,
+  isDeepEqualData,
+  parsePartialJson,
+  type DeepPartial,
+  type FlexibleSchema,
+  type InferSchema,
+} from 'ai';
+import swrv from 'swrv';
+import { ref, type Ref } from 'vue';
+
+// use function to allow for mocking in tests
+const getOriginalFetch = () => fetch;
+
+export type Experimental_UseObjectOptions<
+  SCHEMA extends FlexibleSchema,
+  RESULT,
+> = {
+  /** API endpoint that streams JSON chunks matching the schema */
+  api: string;
+
+  /** Schema that defines the final object shape */
+  schema: SCHEMA;
+
+  /** Shared state key. If omitted a random one is generated */
+  id?: string;
+
+  /** Initial partial value */
+  initialValue?: DeepPartial<RESULT>;
+
+  /** Optional custom fetch implementation */
+  fetch?: FetchFunction;
+
+  /** Called when stream ends */
+  onFinish?: (event: {
+    object: RESULT | undefined;
+    error: Error | undefined;
+  }) => Promise<void> | void;
+
+  /** Called on error */
+  onError?: (error: Error) => void;
+
+  /** Extra request headers */
+  headers?: Record<string, string> | Headers;
+
+  /** Request credentials mode. Defaults to 'same-origin' if omitted */
+  credentials?: RequestCredentials;
+};
+
+export type Experimental_UseObjectHelpers<RESULT, INPUT> = {
+  /** POST the input and start streaming */
+  submit: (input: INPUT) => void;
+
+  /** Current partial object, updated as chunks arrive */
+  object: Ref<DeepPartial<RESULT> | undefined>;
+
+  /** Latest error if any */
+  error: Ref<Error | undefined>;
+
+  /** Loading flag for the in-flight request */
+  isLoading: Ref<boolean | undefined>;
+
+  /** Abort the current request. Keeps current partial object. */
+  stop: () => void;
+
+  /** Abort and clear all state */
+  clear: () => void;
+};
+
+let uniqueId = 0;
+
+// @ts-expect-error - some issues with the default export of useSWRV
+const useSWRV = (swrv.default as (typeof import('swrv'))['default']) || swrv;
+const store: Record<string, any> = {};
+
+export const experimental_useObject = function useObject<
+  SCHEMA extends FlexibleSchema,
+  RESULT = InferSchema<SCHEMA>,
+  INPUT = any,
+>({
+  api,
+  id,
+  schema,
+  initialValue,
+  fetch,
+  onError,
+  onFinish,
+  headers,
+  credentials,
+}: Experimental_UseObjectOptions<
+  SCHEMA,
+  RESULT
+>): Experimental_UseObjectHelpers<RESULT, INPUT> {
+  // Generate an unique id for the object if not provided.
+  const completionId = id || `completion-${uniqueId++}`;
+
+  const key = `${api}|${completionId}`;
+  const { data, mutate: originalMutate } = useSWRV<
+    DeepPartial<RESULT> | undefined
+  >(key, () => (key in store ? store[key] : initialValue));
+
+  const { data: isLoading, mutate: mutateLoading } = useSWRV<boolean>(
+    `${completionId}-loading`,
+    null,
+  );
+
+  isLoading.value ??= false;
+  data.value ||= initialValue as DeepPartial<RESULT> | undefined;
+
+  const mutateObject = (value: DeepPartial<RESULT> | undefined) => {
+    store[key] = value;
+    return originalMutate();
+  };
+
+  const error = ref<Error | undefined>(undefined);
+  let abortController: AbortController | null = null;
+
+  const stop = async () => {
+    if (abortController) {
+      try {
+        abortController.abort();
+      } catch {
+        // ignore
+      } finally {
+        abortController = null;
+      }
+    }
+    await mutateLoading(() => false);
+  };
+
+  const clearObject = async () => {
+    error.value = undefined;
+    await mutateLoading(() => false);
+    await mutateObject(undefined);
+    // Need to explicitly set the value to undefined to trigger a re-render
+    data.value = undefined;
+  };
+
+  const clear = async () => {
+    await stop();
+    await clearObject();
+  };
+
+  const submit = async (input: INPUT) => {
+    try {
+      await clearObject();
+      await mutateLoading(() => true);
+
+      abortController = new AbortController();
+
+      const actualFetch = fetch ?? getOriginalFetch();
+      const response = await actualFetch(api, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(headers as any),
+        },
+        credentials: credentials ?? 'same-origin',
+        signal: abortController.signal,
+        body: JSON.stringify(input),
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          (await response.text()) || 'Failed to fetch the response.',
+        );
+      }
+
+      if (!response.body) {
+        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>({
+          async write(chunk) {
+            accumulatedText += chunk;
+            const { value } = await parsePartialJson(accumulatedText);
+            const currentObject = value as DeepPartial<RESULT>;
+            if (!isDeepEqualData(latestObject, currentObject)) {
+              latestObject = currentObject;
+              await mutateObject(currentObject);
+            }
+          },
+          async close() {
+            await mutateLoading(() => false);
+            abortController = null;
+
+            if (onFinish) {
+              const validationResult = await safeValidateTypes({
+                value: latestObject,
+                schema: asSchema(schema),
+              });
+
+              onFinish(
+                validationResult.success
+                  ? {
+                      object: validationResult.value as RESULT,
+                      error: undefined,
+                    }
+                  : { object: undefined, error: validationResult.error },
+              );
+            }
+          },
+        }),
+      );
+    } catch (err: unknown) {
+      if (isAbortError(err)) return;
+
+      if (onError && err instanceof Error) onError(err);
+
+      await mutateLoading(() => false);
+      error.value = err instanceof Error ? err : new Error(String(err));
+    }
+  };
+
+  return {
+    submit,
+    object: data,
+    error,
+    isLoading,
+    stop,
+    clear,
+  };
+};