@ai-sdk/vue 0.0.44 → 0.0.45

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

@@ -1,272 +0,0 @@
-import { formatStreamPart } from '@ai-sdk/ui-utils';
-import {
-  mockFetchDataStream,
-  mockFetchDataStreamWithGenerator,
-} from '@ai-sdk/ui-utils/test';
-import '@testing-library/jest-dom/vitest';
-import { cleanup, findByText, render, screen } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import TestChatAssistantStreamComponent from './TestChatAssistantStreamComponent.vue';
-import TestChatAssistantThreadChangeComponent from './TestChatAssistantThreadChangeComponent.vue';
-
-describe('stream data stream', () => {
-  // Render the TestChatAssistantStreamComponent before each test
-  beforeEach(() => {
-    render(TestChatAssistantStreamComponent);
-  });
-
-  // Cleanup after each test
-  afterEach(() => {
-    vi.restoreAllMocks();
-    cleanup();
-  });
-
-  it('should show streamed response', async () => {
-    // Mock the fetch data stream
-    const { requestBody } = mockFetchDataStream({
-      url: 'https://example.com/api/assistant',
-      chunks: [
-        // Format the stream part
-        formatStreamPart('assistant_control_data', {
-          threadId: 't0',
-          messageId: 'm0',
-        }),
-        formatStreamPart('assistant_message', {
-          id: 'm0',
-          role: 'assistant',
-          content: [{ type: 'text', text: { value: '' } }],
-        }),
-        // Text parts
-        '0:"Hello"\n',
-        '0:", world"\n',
-        '0:"."\n',
-      ],
-    });
-
-    // Click the button
-    await userEvent.click(screen.getByTestId('do-append'));
-
-    // Find the message-0 element
-    await screen.findByTestId('message-0');
-    // Expect the message-0 element to have the text content 'User: hi'
-    expect(screen.getByTestId('message-0')).toHaveTextContent('User: hi');
-
-    // Find the message-1 element
-    await screen.findByTestId('message-1');
-    // Expect the message-1 element to have the text content 'AI: Hello, world.'
-    expect(screen.getByTestId('message-1')).toHaveTextContent(
-      'AI: Hello, world.',
-    );
-
-    expect(await requestBody).toStrictEqual(
-      JSON.stringify({
-        message: 'hi',
-        threadId: null,
-      }),
-    );
-  });
-
-  describe('loading state', () => {
-    it('should show loading state', async () => {
-      let finishGeneration: ((value?: unknown) => void) | undefined;
-
-      const finishGenerationPromise = new Promise(resolve => {
-        finishGeneration = resolve;
-      });
-
-      // Mock the fetch data stream with generator
-      mockFetchDataStreamWithGenerator({
-        url: 'https://example.com/api/assistant',
-        chunkGenerator: (async function* generate() {
-          const encoder = new TextEncoder();
-
-          yield encoder.encode(
-            formatStreamPart('assistant_control_data', {
-              threadId: 't0',
-              messageId: 'm1',
-            }),
-          );
-
-          yield encoder.encode(
-            formatStreamPart('assistant_message', {
-              id: 'm1',
-              role: 'assistant',
-              content: [{ type: 'text', text: { value: '' } }],
-            }),
-          );
-
-          yield encoder.encode('0:"Hello"\n');
-
-          await finishGenerationPromise;
-        })(),
-      });
-
-      // Click the button
-      await userEvent.click(screen.getByTestId('do-append'));
-
-      // Find the loading element and expect it to be in progress
-      await screen.findByTestId('status');
-      expect(screen.getByTestId('status')).toHaveTextContent('in_progress');
-
-      // Resolve the finishGenerationPromise
-      finishGeneration?.();
-
-      // Find the loading element and expect it to be awaiting a message
-      await findByText(await screen.findByTestId('status'), 'awaiting_message');
-      expect(screen.getByTestId('status')).toHaveTextContent(
-        'awaiting_message',
-      );
-    });
-  });
-});
-
-describe('Thread management', () => {
-  beforeEach(() => {
-    render(TestChatAssistantThreadChangeComponent);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    cleanup();
-  });
-
-  it('create new thread', async () => {
-    await screen.findByTestId('thread-id');
-    expect(screen.getByTestId('thread-id')).toHaveTextContent('undefined');
-  });
-
-  it('should show streamed response', async () => {
-    const { requestBody } = mockFetchDataStream({
-      url: 'https://example.com/api/assistant',
-      chunks: [
-        formatStreamPart('assistant_control_data', {
-          threadId: 't0',
-          messageId: 'm0',
-        }),
-        formatStreamPart('assistant_message', {
-          id: 'm0',
-          role: 'assistant',
-          content: [{ type: 'text', text: { value: '' } }],
-        }),
-        // text parts:
-        '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');
-
-    expect(screen.getByTestId('thread-id')).toHaveTextContent('t0');
-
-    await screen.findByTestId('message-1');
-    expect(screen.getByTestId('message-1')).toHaveTextContent(
-      'AI: Hello, world.',
-    );
-
-    expect(await requestBody).toStrictEqual(
-      JSON.stringify({
-        message: 'hi',
-        threadId: null,
-      }),
-    );
-  });
-
-  it('should switch to new thread on setting undefined threadId', async () => {
-    await userEvent.click(screen.getByTestId('do-new-thread'));
-
-    expect(screen.queryByTestId('message-0')).toBeNull();
-    expect(screen.queryByTestId('message-1')).toBeNull();
-
-    const { requestBody } = mockFetchDataStream({
-      url: 'https://example.com/api/assistant',
-      chunks: [
-        formatStreamPart('assistant_control_data', {
-          threadId: 't1',
-          messageId: 'm0',
-        }),
-        formatStreamPart('assistant_message', {
-          id: 'm0',
-          role: 'assistant',
-          content: [{ type: 'text', text: { value: '' } }],
-        }),
-        // text parts:
-        '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');
-
-    expect(screen.getByTestId('thread-id')).toHaveTextContent('t1');
-
-    await screen.findByTestId('message-1');
-    expect(screen.getByTestId('message-1')).toHaveTextContent(
-      'AI: Hello, world.',
-    );
-
-    // check that correct information was sent to the server:
-    expect(await requestBody).toStrictEqual(
-      JSON.stringify({
-        message: 'hi',
-        threadId: null,
-      }),
-    );
-  });
-
-  it('should switch to thread on setting previously created threadId', async () => {
-    await userEvent.click(screen.getByTestId('do-thread-3'));
-
-    expect(screen.queryByTestId('message-0')).toBeNull();
-    expect(screen.queryByTestId('message-1')).toBeNull();
-
-    const { requestBody } = mockFetchDataStream({
-      url: 'https://example.com/api/assistant',
-      chunks: [
-        formatStreamPart('assistant_control_data', {
-          threadId: 't3',
-          messageId: 'm0',
-        }),
-        formatStreamPart('assistant_message', {
-          id: 'm0',
-          role: 'assistant',
-          content: [{ type: 'text', text: { value: '' } }],
-        }),
-        // text parts:
-        '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');
-
-    expect(screen.getByTestId('thread-id')).toHaveTextContent('t3');
-
-    await screen.findByTestId('message-1');
-    expect(screen.getByTestId('message-1')).toHaveTextContent(
-      'AI: Hello, world.',
-    );
-
-    // check that correct information was sent to the server:
-    expect(await requestBody).toStrictEqual(
-      JSON.stringify({
-        message: 'hi',
-        threadId: 't3',
-      }),
-    );
-  });
-});

package/src/use-chat.ts

@@ -1,321 +0,0 @@
-import type {
-  ChatRequest,
-  ChatRequestOptions,
-  CreateMessage,
-  JSONValue,
-  Message,
-  UseChatOptions,
-} from '@ai-sdk/ui-utils';
-import {
-  callChatApi,
-  generateId as generateIdFunc,
-  processChatStream,
-} from '@ai-sdk/ui-utils';
-import swrv from 'swrv';
-import type { Ref } from 'vue';
-import { ref, unref } from 'vue';
-
-export type { CreateMessage, Message, UseChatOptions };
-
-export type UseChatHelpers = {
-  /** Current messages in the chat */
-  messages: Ref<Message[]>;
-  /** The error object of the API request */
-  error: Ref<undefined | Error>;
-  /**
-   * Append a user message to the chat list. This triggers the API call to fetch
-   * the assistant's response.
-   */
-  append: (
-    message: Message | CreateMessage,
-    chatRequestOptions?: ChatRequestOptions,
-  ) => Promise<string | null | undefined>;
-  /**
-   * Reload the last AI chat response for the given chat history. If the last
-   * message isn't from the assistant, it will request the API to generate a
-   * new response.
-   */
-  reload: (
-    chatRequestOptions?: ChatRequestOptions,
-  ) => Promise<string | null | undefined>;
-  /**
-   * Abort the current request immediately, keep the generated tokens if any.
-   */
-  stop: () => void;
-  /**
-   * Update the `messages` state locally. This is useful when you want to
-   * edit the messages on the client, and then trigger the `reload` method
-   * manually to regenerate the AI response.
-   */
-  setMessages: (
-    messages: Message[] | ((messages: Message[]) => Message[]),
-  ) => void;
-  /** The current value of the input */
-  input: Ref<string>;
-  /** Form submission handler to automatically reset input and append a user message  */
-  handleSubmit: (
-    event?: { preventDefault?: () => void },
-    chatRequestOptions?: ChatRequestOptions,
-  ) => void;
-  /** Whether the API request is in progress */
-  isLoading: Ref<boolean | undefined>;
-
-  /** Additional data added on the server via StreamData */
-  data: Ref<JSONValue[] | 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, Message[] | undefined> = {};
-
-export function useChat({
-  api = '/api/chat',
-  id,
-  initialMessages = [],
-  initialInput = '',
-  sendExtraMessageFields,
-  experimental_onFunctionCall,
-  streamMode,
-  streamProtocol,
-  onResponse,
-  onFinish,
-  onError,
-  credentials,
-  headers: metadataHeaders,
-  body: metadataBody,
-  generateId = generateIdFunc,
-  fetch,
-  keepLastMessageOnError = false,
-}: UseChatOptions = {}): UseChatHelpers {
-  // streamMode is deprecated, use streamProtocol instead.
-  if (streamMode) {
-    streamProtocol ??= streamMode === 'text' ? 'text' : undefined;
-  }
-
-  // Generate a unique ID for the chat if not provided.
-  const chatId = id || `chat-${uniqueId++}`;
-
-  const key = `${api}|${chatId}`;
-  const { data: messagesData, mutate: originalMutate } = useSWRV<Message[]>(
-    key,
-    () => store[key] || initialMessages,
-  );
-
-  const { data: isLoading, mutate: mutateLoading } = useSWRV<boolean>(
-    `${chatId}-loading`,
-    null,
-  );
-
-  isLoading.value ??= false;
-
-  // Force the `data` to be `initialMessages` if it's `undefined`.
-  messagesData.value ??= initialMessages;
-
-  const mutate = (data?: Message[]) => {
-    store[key] = data;
-    return originalMutate();
-  };
-
-  // Because of the `initialData` option, the `data` will never be `undefined`.
-  const messages = messagesData as Ref<Message[]>;
-
-  const error = ref<undefined | Error>(undefined);
-  // cannot use JSONValue[] in ref because of infinite Typescript recursion:
-  const streamData = ref<undefined | unknown[]>(undefined);
-
-  let abortController: AbortController | null = null;
-
-  async function triggerRequest(
-    messagesSnapshot: Message[],
-    { options, data, headers, body }: ChatRequestOptions = {},
-  ) {
-    try {
-      error.value = undefined;
-      mutateLoading(() => true);
-
-      abortController = new AbortController();
-
-      // Do an optimistic update to the chat state to show the updated messages
-      // immediately.
-      const previousMessages = messagesSnapshot;
-      mutate(messagesSnapshot);
-
-      const requestOptions = {
-        headers: headers ?? options?.headers,
-        body: body ?? options?.body,
-      };
-
-      let chatRequest: ChatRequest = {
-        messages: messagesSnapshot,
-        options: requestOptions,
-        body: requestOptions.body,
-        headers: requestOptions.headers,
-        data,
-      };
-
-      await processChatStream({
-        getStreamedResponse: async () => {
-          const existingData = (streamData.value ?? []) as JSONValue[];
-
-          const constructedMessagesPayload = sendExtraMessageFields
-            ? chatRequest.messages
-            : chatRequest.messages.map(
-                ({
-                  role,
-                  content,
-                  name,
-                  data,
-                  annotations,
-                  function_call,
-                }) => ({
-                  role,
-                  content,
-                  ...(name !== undefined && { name }),
-                  ...(data !== undefined && { data }),
-                  ...(annotations !== undefined && { annotations }),
-                  // outdated function/tool call handling (TODO deprecate):
-                  ...(function_call !== undefined && { function_call }),
-                }),
-              );
-
-          return await callChatApi({
-            api,
-            body: {
-              messages: constructedMessagesPayload,
-              data: chatRequest.data,
-              ...unref(metadataBody), // Use unref to unwrap the ref value
-              ...requestOptions.body,
-            },
-            streamProtocol,
-            headers: {
-              ...metadataHeaders,
-              ...requestOptions.headers,
-            },
-            abortController: () => abortController,
-            credentials,
-            onResponse,
-            onUpdate(merged, data) {
-              mutate([...chatRequest.messages, ...merged]);
-              streamData.value = [...existingData, ...(data ?? [])];
-            },
-            onFinish(message, options) {
-              // workaround: sometimes the last chunk is not shown in the UI.
-              // push it twice to make sure it's displayed.
-              mutate([...chatRequest.messages, message]);
-              onFinish?.(message, options);
-            },
-            restoreMessagesOnFailure() {
-              // Restore the previous messages if the request fails.
-              if (!keepLastMessageOnError) {
-                mutate(previousMessages);
-              }
-            },
-            generateId,
-            onToolCall: undefined, // not implemented yet
-            fetch,
-          });
-        },
-        experimental_onFunctionCall,
-        updateChatRequest(newChatRequest) {
-          chatRequest = newChatRequest;
-        },
-        getCurrentMessages: () => messages.value,
-      });
-
-      abortController = null;
-    } catch (err) {
-      // Ignore abort errors as they are expected.
-      if ((err as any).name === 'AbortError') {
-        abortController = null;
-        return null;
-      }
-
-      if (onError && err instanceof Error) {
-        onError(err);
-      }
-
-      error.value = err as Error;
-    } finally {
-      mutateLoading(() => false);
-    }
-  }
-
-  const append: UseChatHelpers['append'] = async (message, options) => {
-    if (!message.id) {
-      message.id = generateId();
-    }
-
-    return triggerRequest(messages.value.concat(message as Message), options);
-  };
-
-  const reload: UseChatHelpers['reload'] = async options => {
-    const messagesSnapshot = messages.value;
-    if (messagesSnapshot.length === 0) return null;
-
-    const lastMessage = messagesSnapshot[messagesSnapshot.length - 1];
-    if (lastMessage.role === 'assistant') {
-      return triggerRequest(messagesSnapshot.slice(0, -1), options);
-    }
-
-    return triggerRequest(messagesSnapshot, options);
-  };
-
-  const stop = () => {
-    if (abortController) {
-      abortController.abort();
-      abortController = null;
-    }
-  };
-
-  const setMessages = (
-    messagesArg: Message[] | ((messages: Message[]) => Message[]),
-  ) => {
-    if (typeof messagesArg === 'function') {
-      messagesArg = messagesArg(messages.value);
-    }
-
-    mutate(messagesArg);
-  };
-
-  const input = ref(initialInput);
-
-  const handleSubmit = (
-    event?: { preventDefault?: () => void },
-    options: ChatRequestOptions = {},
-  ) => {
-    event?.preventDefault?.();
-
-    const inputValue = input.value;
-
-    if (!inputValue && !options.allowEmptySubmit) return;
-
-    triggerRequest(
-      !inputValue && options.allowEmptySubmit
-        ? messages.value
-        : messages.value.concat({
-            id: generateId(),
-            createdAt: new Date(),
-            content: inputValue,
-            role: 'user',
-          }),
-      options,
-    );
-
-    input.value = '';
-  };
-
-  return {
-    messages,
-    append,
-    error,
-    reload,
-    stop,
-    setMessages,
-    input,
-    handleSubmit,
-    isLoading,
-    data: streamData as Ref<undefined | JSONValue[]>,
-  };
-}