@ai-sdk/vue 0.0.44 → 0.0.45

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ai-sdk/vue
 
+## 0.0.45
+
+### Patch Changes
+
+- Updated dependencies [aa2dc58]
+  - @ai-sdk/ui-utils@0.0.40
+
 ## 0.0.44
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/vue",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "license": "Apache-2.0",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -14,9 +14,13 @@
       "require": "./dist/index.js"
     }
   },
+  "files": [
+    "dist/**/*",
+    "CHANGELOG.md"
+  ],
   "dependencies": {
     "@ai-sdk/provider-utils": "1.0.17",
-    "@ai-sdk/ui-utils": "0.0.39",
+    "@ai-sdk/ui-utils": "0.0.40",
     "swrv": "1.0.4"
   },
   "devDependencies": {

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['vercel-ai'],
-};

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-
-> @ai-sdk/vue@0.0.44 build /home/runner/work/ai/ai/packages/vue
-> tsup
-
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v7.2.0
-CLI Using tsup config: /home/runner/work/ai/ai/packages/vue/tsup.config.ts
-CLI Target: es2018
-CJS Build start
-ESM Build start
-CJS dist/index.js     16.21 KB
-CJS dist/index.js.map 31.11 KB
-CJS ⚡️ Build success in 46ms
-ESM dist/index.mjs     14.09 KB
-ESM dist/index.mjs.map 30.89 KB
-ESM ⚡️ Build success in 51ms
-DTS Build start
-DTS ⚡️ Build success in 5350ms
-DTS dist/index.d.ts  5.94 KB
-DTS dist/index.d.mts 5.94 KB

package/.turbo/turbo-clean.log

@@ -1,4 +0,0 @@
-
-> @ai-sdk/vue@0.0.44 clean /home/runner/work/ai/ai/packages/vue
-> rm -rf dist
-

package/src/TestChatAssistantStreamComponent.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import { useAssistant } from './use-assistant';
-
-const { status, messages, append } = useAssistant({
-  api: '/api/assistant'
-});
-</script>
-
-<template>
-  <div>
-    <div data-testid="status">{{ status }}</div>
-    <div v-for="(message, index) in messages" :data-testid="`message-${index}`" :key="index">
-      {{ message.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ message.content }}
-    </div>
-    <button data-testid="do-append" @click="append({ role: 'user', content: 'hi' })" />
-  </div>
-</template>

package/src/TestChatAssistantThreadChangeComponent.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { useAssistant } from './use-assistant';
-
-const { status, messages, error, append, setThreadId, threadId } = useAssistant({
-  api: '/api/assistant'
-});
-</script>
-
-<template>
-  <div>
-    <div data-testid="status">{{ status }}</div>
-    <div data-testid="thread-id">{{ threadId || 'undefined' }}</div>
-    <div data-testid="error">{{ error?.toString() }}</div>
-    <div v-for="(message, index) in messages" :data-testid="`message-${index}`" :key="index">
-      {{ message.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ message.content }}
-    </div>
-    <button data-testid="do-append" @click="append({ role: 'user', content: 'hi' })" />
-    <button data-testid="do-new-thread" @click="setThreadId(undefined)" />
-    <button data-testid="do-thread-3" @click="setThreadId('t3')" />
-  </div>
-</template>

package/src/TestChatComponent.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { useChat } from './use-chat';
-
-const onFinishCalls: Array<{
-  message: Message;
-  options: {
-    finishReason: string;
-    usage: {
-      completionTokens: number;
-      promptTokens: number;
-      totalTokens: number;
-    };
-  };
-}> = [];
-
-const { messages, append, data, error, isLoading } = useChat({
-  onFinish: (message, options) => {
-    onFinishCalls.push({ message, options });
-  },
-});
-</script>
-
-<template>
-  <div>
-    <div data-testid="loading">{{ isLoading?.toString() }}</div>
-    <div data-testid="error">{{ error?.toString() }}</div>
-    <div data-testid="data">{{ JSON.stringify(data) }}</div>
-    <div
-      v-for="(m, idx) in messages"
-      key="m.id"
-      :data-testid="`message-${idx}`"
-    >
-      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ m.content }}
-    </div>
-
-    <button
-      data-testid="do-append"
-      @click="append({ role: 'user', content: 'hi' })"
-    />
-
-    <div data-testid="on-finish-calls">{{ JSON.stringify(onFinishCalls) }}</div>
-  </div>
-</template>

package/src/TestChatCustomMetadataComponent.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { useChat } from './use-chat';
-
-const { messages, append } = useChat({
-  body: {
-    body1: 'value1',
-    body2: 'value2',
-  },
-  headers: {
-    header1: 'value1',
-    header2: 'value2',
-  },
-});
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="(m, idx) in messages"
-      key="m.id"
-      :data-testid="`message-${idx}`"
-    >
-      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ m.content }}
-    </div>
-
-    <button
-      data-testid="do-append"
-      @click="append({ role: 'user', content: 'custom metadata component' })"
-    />
-  </div>
-</template>

package/src/TestChatFormComponent.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { useChat } from './use-chat';
-
-const { messages, handleSubmit, input } = useChat();
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="(m, idx) in messages"
-      key="m.id"
-      :data-testid="`message-${idx}`"
-    >
-      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ m.content }}
-    </div>
-
-    <form @submit.prevent="handleSubmit">
-      <input :data-testid="`do-input`" v-model="input" type="text" />
-    </form>
-  </div>
-</template>

package/src/TestChatFormOptionsComponent.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { useChat } from './use-chat';
-
-const { messages, handleSubmit, input } = useChat();
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="(m, idx) in messages"
-      key="m.id"
-      :data-testid="`message-${idx}`"
-    >
-      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ m.content }}
-    </div>
-
-    <form
-      @submit.prevent="
-        event =>
-          handleSubmit(event, {
-            allowEmptySubmit: true,
-          })
-      "
-    >
-      <input :data-testid="`do-input`" v-model="input" type="text" />
-    </form>
-  </div>
-</template>

package/src/TestChatReloadComponent.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { useChat } from './use-chat';
-
-const { messages, append, reload } = useChat();
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="(m, idx) in messages"
-      key="m.id"
-      :data-testid="`message-${idx}`"
-    >
-      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ m.content }}
-    </div>
-
-    <button
-      data-testid="do-append"
-      @click="append({ role: 'user', content: 'hi' })"
-    />
-
-    <button
-      data-testid="do-reload"
-      @click="
-        reload({
-          data: { 'test-data-key': 'test-data-value' },
-          body: { 'request-body-key': 'request-body-value' },
-          headers: { 'header-key': 'header-value' },
-        })
-      "
-    />
-  </div>
-</template>

package/src/TestChatTextStreamComponent.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { useChat } from './use-chat';
-
-const onFinishCalls: Array<{
-  message: Message;
-  options: {
-    finishReason: string;
-    usage: {
-      completionTokens: number;
-      promptTokens: number;
-      totalTokens: number;
-    };
-  };
-}> = [];
-
-const { messages, append } = useChat({
-  streamProtocol: 'text',
-  onFinish: (message, options) => {
-    onFinishCalls.push({ message, options });
-  },
-});
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="(m, idx) in messages"
-      key="m.id"
-      :data-testid="`message-${idx}`"
-    >
-      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
-      {{ m.content }}
-    </div>
-
-    <button
-      data-testid="do-append"
-      @click="append({ role: 'user', content: 'hi' })"
-    />
-
-    <div data-testid="on-finish-calls">{{ JSON.stringify(onFinishCalls) }}</div>
-  </div>
-</template>

package/src/TestCompletionComponent.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { useCompletion } from './use-completion';
-
-const { completion, handleSubmit, input, isLoading, error } = useCompletion();
-</script>
-
-<template>
-  <div>
-    <div data-testid="loading">{{ isLoading?.toString() }}</div>
-    <div data-testid="error">{{ error?.toString() }}</div>
-    <div data-testid="completion">{{ completion }}</div>
-
-    <form @submit="handleSubmit">
-      <input data-testid="input" v-model="input" />
-    </form>
-  </div>
-</template>

package/src/TestCompletionTextStreamComponent.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { useCompletion } from './use-completion';
-
-const { completion, handleSubmit, input, isLoading, error } = useCompletion({
-  streamProtocol: 'text',
-});
-</script>
-
-<template>
-  <div>
-    <div data-testid="loading">{{ isLoading?.toString() }}</div>
-    <div data-testid="error">{{ error?.toString() }}</div>
-    <div data-testid="completion">{{ completion }}</div>
-
-    <form @submit="handleSubmit">
-      <input data-testid="input" v-model="input" />
-    </form>
-  </div>
-</template>

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './use-chat';
-export * from './use-completion';
-export * from './use-assistant';

package/src/package.json

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

package/src/shims-vue.d.ts

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

package/src/use-assistant.ts

@@ -1,305 +0,0 @@
-/**
- * A vue.js composable function to interact with the assistant API.
- */
-
-import { isAbortError } from '@ai-sdk/provider-utils';
-import { readDataStream, generateId } from '@ai-sdk/ui-utils';
-import type {
-  AssistantStatus,
-  CreateMessage,
-  Message,
-  UseAssistantOptions,
-} from '@ai-sdk/ui-utils';
-import { computed, readonly, ref } from 'vue';
-import type { ComputedRef, Ref } from 'vue';
-
-export type UseAssistantHelpers = {
-  /**
-   * The current array of chat messages.
-   */
-  messages: Ref<Message[]>;
-
-  /**
-   * Update the message store with a new array of messages.
-   */
-  setMessages: (messagesProcessor: (messages: Message[]) => Message[]) => void;
-
-  /**
-   * The current thread ID.
-   */
-  threadId: Ref<string | undefined>;
-
-  /**
-   * Set the current thread ID. Specifying a thread ID will switch to that thread, if it exists. If set to 'undefined', a new thread will be created. For both cases, `threadId` will be updated with the new value and `messages` will be cleared.
-   */
-  setThreadId: (threadId: string | undefined) => void;
-  /**
-   * The current value of the input field.
-   */
-  input: Ref<string>;
-
-  /**
-   * Append a user message to the chat list. This triggers the API call to fetch
-   * the assistant's response.
-   * @param message The message to append
-   * @param requestOptions Additional options to pass to the API call
-   */
-  append: (
-    message: Message | CreateMessage,
-    requestOptions?: {
-      data?: Record<string, string>;
-    },
-  ) => Promise<void>;
-
-  /**
-   * Abort the current request immediately, keep the generated tokens if any.
-   */
-  stop: ComputedRef<() => void>;
-
-  /**
-   * Handler for the `onChange` event of the input field to control the input's value.
-   */
-  handleInputChange: (e: Event & { target: HTMLInputElement }) => void;
-
-  /**
-   * Handler for the `onSubmit` event of the form to append a user message and reset the input.
-   */
-  handleSubmit: (e: Event & { target: HTMLFormElement }) => void;
-
-  /**
-   * Whether the assistant is currently sending a message.
-   */
-  isSending: ComputedRef<boolean>;
-
-  /**
-   * The current status of the assistant.
-   */
-  status: Ref<AssistantStatus>;
-
-  /**
-   * The current error, if any.
-   */
-  error: Ref<Error | undefined>;
-};
-
-export function useAssistant({
-  api,
-  threadId: threadIdParam,
-  credentials,
-  headers,
-  body,
-  onError,
-}: UseAssistantOptions): UseAssistantHelpers {
-  const messages: Ref<Message[]> = ref([]);
-  const input: Ref<string> = ref('');
-  const currentThreadId: Ref<string | undefined> = ref(undefined);
-  const status: Ref<AssistantStatus> = ref('awaiting_message');
-  const error: Ref<undefined | Error> = ref(undefined);
-
-  const setMessages = (messageFactory: (messages: Message[]) => Message[]) => {
-    messages.value = messageFactory(messages.value);
-  };
-
-  const setCurrentThreadId = (newThreadId: string | undefined) => {
-    currentThreadId.value = newThreadId;
-    messages.value = [];
-  };
-
-  const handleInputChange = (event: Event & { target: HTMLInputElement }) => {
-    input.value = event?.target?.value;
-  };
-
-  const isSending = computed(() => status.value === 'in_progress');
-
-  // Abort controller to cancel the current API call when required
-  const abortController = ref<AbortController | null>(null);
-
-  // memoized function to stop the current request when required
-  const stop = computed(() => {
-    return () => {
-      if (abortController.value) {
-        abortController.value.abort();
-        abortController.value = null;
-      }
-    };
-  });
-
-  const append = async (
-    message: Message | CreateMessage,
-    requestOptions?: {
-      data?: Record<string, string>;
-    },
-  ) => {
-    status.value = 'in_progress';
-
-    // Append the new message to the current list of messages
-    const newMessage: Message = {
-      ...message,
-      id: message.id ?? generateId(),
-    };
-
-    // Update the messages list with the new message
-    setMessages(messages => [...messages, newMessage]);
-
-    input.value = '';
-
-    const controller = new AbortController();
-
-    try {
-      // Assign the new controller to the abortController ref
-      abortController.value = controller;
-
-      const response = await fetch(api, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...headers,
-        },
-        body: JSON.stringify({
-          ...body,
-          // Message Content
-          message: message.content,
-
-          // Always Use User Provided Thread ID When Available
-          threadId: threadIdParam ?? currentThreadId.value ?? null,
-
-          // Optional Request Data
-          ...(requestOptions?.data && { data: requestOptions?.data }),
-        }),
-        signal: controller.signal,
-        credentials,
-      });
-
-      if (!response.ok) {
-        throw new Error(
-          response.statusText ?? 'An error occurred while sending the message',
-        );
-      }
-
-      if (!response.body) {
-        throw new Error('The response body is empty');
-      }
-
-      for await (const { type, value } of readDataStream(
-        response.body.getReader(),
-      )) {
-        switch (type) {
-          case 'assistant_message': {
-            messages.value = [
-              ...messages.value,
-              {
-                id: value.id,
-                content: value.content[0].text.value,
-                role: value.role,
-              },
-            ];
-            break;
-          }
-          case 'assistant_control_data': {
-            if (value.threadId) {
-              currentThreadId.value = value.threadId;
-            }
-
-            setMessages(messages => {
-              const lastMessage = messages[messages.length - 1];
-              lastMessage.id = value.messageId;
-
-              return [...messages.slice(0, -1), lastMessage];
-            });
-
-            break;
-          }
-
-          case 'text': {
-            setMessages(messages => {
-              const lastMessage = messages[messages.length - 1];
-              lastMessage.content += value;
-
-              return [...messages.slice(0, -1), lastMessage];
-            });
-
-            break;
-          }
-
-          case 'data_message': {
-            setMessages(messages => [
-              ...messages,
-              {
-                id: value.id ?? generateId(),
-                role: 'data',
-                content: '',
-                data: value.data,
-              },
-            ]);
-            break;
-          }
-
-          case 'error': {
-            error.value = new Error(value);
-          }
-
-          default: {
-            console.error('Unknown message type:', type);
-            break;
-          }
-        }
-      }
-    } catch (err) {
-      // If the error is an AbortError and the signal is aborted, reset the abortController and do nothing.
-      if (isAbortError(err) && abortController.value?.signal.aborted) {
-        abortController.value = null;
-        return;
-      }
-
-      // If an error handler is provided, call it with the error
-      if (onError && err instanceof Error) {
-        onError(err);
-      }
-
-      error.value = err as Error;
-    } finally {
-      // Reset the status to 'awaiting_message' after the request is complete
-      abortController.value = null;
-      status.value = 'awaiting_message';
-    }
-  };
-
-  const submitMessage = async (
-    event: Event & { target: HTMLFormElement },
-    requestOptions?: {
-      data?: Record<string, string>;
-    },
-  ) => {
-    event?.preventDefault?.();
-
-    if (!input.value) return;
-
-    append(
-      {
-        role: 'user',
-        content: input.value,
-      },
-      requestOptions,
-    );
-  };
-
-  return {
-    append,
-    messages,
-    setMessages,
-    threadId: readonly(currentThreadId),
-    setThreadId: setCurrentThreadId,
-    input,
-    handleInputChange,
-    handleSubmit: submitMessage,
-    isSending,
-    status,
-    error,
-    stop,
-  };
-}
-
-/**
- * @deprecated Use `useAssistant` instead.
- */
-export const experimental_useAssistant = useAssistant;