@ai-sdk/vue 3.0.45 → 3.0.46

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ai-sdk/vue
 
+## 3.0.46
+
+### Patch Changes
+
+- 8dc54db: chore: add src folders to package bundle
+  - ai@6.0.46
+
 ## 3.0.45
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/vue",
-  "version": "3.0.45",
+  "version": "3.0.46",
   "license": "Apache-2.0",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -16,13 +16,14 @@
   },
   "files": [
     "dist/**/*",
+    "src",
     "CHANGELOG.md",
     "README.md"
   ],
   "dependencies": {
     "swrv": "^1.0.4",
     "@ai-sdk/provider-utils": "4.0.8",
-    "ai": "6.0.45"
+    "ai": "6.0.46"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -37,7 +38,7 @@
     "typescript": "5.8.3",
     "vitest": "2.1.4",
     "zod": "3.25.76",
-    "@ai-sdk/test-server": "1.0.1",
+    "@ai-sdk/test-server": "1.0.2",
     "@vercel/ai-tsconfig": "0.0.0",
     "eslint-config-vercel-ai": "0.0.0"
   },

package/src/TestChatAppendAttachmentsComponent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { generateId } from 'ai';
+import { mockId } from 'ai/test';
+import { Chat } from './chat.vue';
+
+const chat = new Chat({
+  id: generateId(),
+  generateId: mockId(),
+});
+</script>
+
+<template>
+  <div>
+    <div data-testid="messages">
+      {{ JSON.stringify(chat.messages, null, 2) }}
+    </div>
+
+    <button
+      data-testid="do-append"
+      @click="
+        chat.sendMessage({
+          parts: [
+            {
+              type: 'file',
+              url: 'https://example.com/image.png',
+              mediaType: 'image/png',
+            },
+            {
+              type: 'text',
+              text: 'Message with image attachment',
+            },
+          ],
+        })
+      "
+    />
+  </div>
+</template>

package/src/TestChatAttachmentsComponent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { generateId } from 'ai';
+import { mockId } from 'ai/test';
+import { computed, ref } from 'vue';
+import { Chat } from './chat.vue';
+
+const chat = new Chat({
+  id: generateId(),
+  generateId: mockId(),
+});
+const files = ref<FileList>();
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const isLoading = computed(() => chat.status !== 'ready');
+const input = ref('');
+</script>
+
+<template>
+  <div>
+    <div data-testid="messages">
+      {{ JSON.stringify(chat.messages, null, 2) }}
+    </div>
+
+    <form
+      @submit="
+        event => {
+          chat.sendMessage({ text: input, files });
+          files = undefined;
+          if (fileInputRef) {
+            fileInputRef.value = '';
+          }
+        }
+      "
+      data-testid="chat-form"
+    >
+      <input
+        type="file"
+        @change="
+          event => {
+            if (event.target != null && 'files' in event.target) {
+              files = event.target.files as FileList;
+            }
+          }
+        "
+        multiple
+        ref="fileInputRef"
+        data-testid="file-input"
+      />
+      <input
+        v-model="input"
+        :disabled="isLoading"
+        data-testid="message-input"
+      />
+      <button type="submit" data-testid="submit-button">Send</button>
+    </form>
+  </div>
+</template>

package/src/TestChatComponent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { UIMessage } from 'ai';
+import { reactive } from 'vue';
+import { Chat } from './chat.vue';
+
+const onFinishCalls: Array<{ message: UIMessage }> = reactive([]);
+
+const chat = new Chat({
+  onFinish: options => {
+    onFinishCalls.push(options);
+  },
+});
+</script>
+
+<template>
+  <div>
+    <div data-testid="status">{{ chat.status }}</div>
+    <div data-testid="error">{{ chat.error?.toString() }}</div>
+    <div
+      v-for="(m, idx) in chat.messages"
+      key="m.id"
+      :data-testid="`message-${idx}`"
+    >
+      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
+      {{
+        m.parts.map(part => (part.type === 'text' ? part.text : '')).join('')
+      }}
+    </div>
+
+    <button data-testid="do-append" @click="chat.sendMessage({ text: 'hi' })" />
+    <div data-testid="on-finish-calls">{{ JSON.stringify(onFinishCalls) }}</div>
+  </div>
+</template>

package/src/TestChatInitMessages.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { UIMessage } from 'ai';
+import { Chat } from './chat.vue';
+import { ref } from 'vue';
+
+const messages = ref<UIMessage[]>([
+  { id: 'message-0', role: 'user', parts: [{ type: 'text', text: 'Greetings.' }] },
+  { id: 'message-1', role: 'assistant', parts: [{ type: 'text', text: 'Hello.' }] },
+]);
+
+const chat = new Chat({
+  messages: messages.value,
+});
+</script>
+
+<template>
+  <div>
+    <div data-testid="status">{{ chat.status }}</div>
+    <div data-testid="error">{{ chat.error?.toString() }}</div>
+    <div
+      v-for="(m, idx) in chat.messages"
+      key="m.id"
+      :data-testid="`message-${idx}`"
+    >
+      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
+      {{
+        m.parts.map(part => (part.type === 'text' ? part.text : '')).join('')
+      }}
+    </div>
+
+    <button data-testid="do-append" @click="chat.sendMessage({ text: 'Hi.' })" />
+  </div>
+</template>

package/src/TestChatPrepareRequestBodyComponent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { DefaultChatTransport } from 'ai';
+import { computed, ref } from 'vue';
+import { Chat } from './chat.vue';
+
+const options = ref<any>();
+
+const chat = new Chat({
+  transport: new DefaultChatTransport({
+    api: '/api/chat',
+    prepareSendMessagesRequest(optionsArg) {
+      options.value = JSON.parse(JSON.stringify(optionsArg));
+      return {
+        body: { 'body-key': 'body-value' },
+        headers: { 'header-key': 'header-value' },
+      };
+    },
+  }),
+});
+
+const isLoading = computed(() => chat.status !== 'ready');
+</script>
+
+<template>
+  <div>
+    <div data-testid="loading">{{ isLoading?.toString() }}</div>
+    <div
+      v-for="(m, idx) in chat.messages"
+      :key="m.id"
+      :data-testid="`message-${idx}`"
+    >
+      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
+      {{
+        m.parts.map(part => (part.type === 'text' ? part.text : '')).join('')
+      }}
+    </div>
+
+    <button
+      data-testid="do-append"
+      @click="
+        chat.sendMessage(
+          {
+            role: 'user',
+            parts: [{ text: 'hi', type: 'text' }],
+          },
+          {
+            body: { 'request-body-key': 'request-body-value' },
+            headers: { 'request-header-key': 'request-header-value' },
+            metadata: { 'request-metadata-key': 'request-metadata-value' },
+          },
+        )
+      "
+    />
+
+    <div v-if="options" data-testid="on-options">
+      {{ options }}
+    </div>
+  </div>
+</template>

package/src/TestChatReloadComponent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { generateId } from 'ai';
+import { mockId } from 'ai/test';
+import { Chat } from './chat.vue';
+
+const chat = new Chat({
+  id: generateId(),
+  generateId: mockId(),
+});
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="(m, idx) in chat.messages"
+      key="m.id"
+      :data-testid="`message-${idx}`"
+    >
+      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
+      {{
+        m.parts.map(part => (part.type === 'text' ? part.text : '')).join('')
+      }}
+    </div>
+
+    <button data-testid="do-append" @click="chat.sendMessage({ text: 'hi' })" />
+
+    <button
+      data-testid="do-regenerate"
+      @click="
+        chat.regenerate({
+          body: { 'request-body-key': 'request-body-value' },
+          headers: { 'header-key': 'header-value' },
+        })
+      "
+    />
+  </div>
+</template>

package/src/TestChatTextStreamComponent.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { TextStreamChatTransport } from 'ai';
+import { Chat } from './chat.vue';
+import { UIMessage } from 'ai';
+
+const onFinishCalls: Array<{ message: UIMessage }> = reactive([]);
+
+const chat = new Chat({
+  onFinish: options => {
+    onFinishCalls.push(options);
+  },
+  transport: new TextStreamChatTransport({
+    api: '/api/chat',
+  }),
+});
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="(m, idx) in chat.messages"
+      key="m.id"
+      :data-testid="`message-${idx}`"
+    >
+      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
+      {{
+        m.parts.map(part => (part.type === 'text' ? part.text : '')).join('')
+      }}
+    </div>
+
+    <button
+      data-testid="do-append"
+      @click="
+        chat.sendMessage({
+          text: 'hi',
+        })
+      "
+    />
+
+    <div data-testid="on-finish-calls">{{ JSON.stringify(onFinishCalls) }}</div>
+  </div>
+</template>

package/src/TestChatToolInvocationsComponent.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { isStaticToolUIPart } from 'ai';
+import { Chat } from './chat.vue';
+
+const chat = new Chat({});
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="(m, idx) in chat.messages"
+      :key="m.id"
+      :data-testid="`message-${idx}`"
+    >
+      <div
+        v-for="(toolPart, toolIdx) in m.parts.filter(isStaticToolUIPart)"
+        :key="toolPart.toolCallId"
+      >
+        {{ JSON.stringify(toolPart) }}
+        <button
+          v-if="toolPart.state === 'input-available'"
+          :data-testid="`add-result-${toolIdx}`"
+          @click="
+            chat.addToolOutput({
+              toolCallId: toolPart.toolCallId,
+              tool: 'test-tool',
+              output: 'test-result',
+            })
+          "
+        />
+      </div>
+      <div :data-testid="`text-${idx}`">
+        {{
+          m.parts.map(part => (part.type === 'text' ? part.text : '')).join('')
+        }}
+      </div>
+    </div>
+
+    <button
+      data-testid="do-append"
+      @click="
+        chat.sendMessage({
+          text: 'hi',
+        })
+      "
+    />
+  </div>
+</template>

package/src/TestChatUrlAttachmentsComponent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { generateId } from 'ai';
+import { mockId } from 'ai/test';
+import { computed, ref } from 'vue';
+import { Chat } from './chat.vue';
+
+const chat = new Chat({
+  id: generateId(),
+  generateId: mockId(),
+});
+const isLoading = computed(() => chat.status !== 'ready');
+const input = ref('');
+</script>
+
+<template>
+  <div>
+    <div data-testid="messages">
+      {{ JSON.stringify(chat.messages, null, 2) }}
+    </div>
+
+    <form
+      @submit="
+        event => {
+          chat.sendMessage({
+            text: input,
+            files: [
+              {
+                type: 'file',
+                mediaType: 'image/png',
+                url: 'https://example.com/image.png',
+              },
+            ],
+          });
+        }
+      "
+      data-testid="chat-form"
+    >
+      <input
+        v-model="input"
+        :disabled="isLoading"
+        data-testid="message-input"
+      />
+      <button type="submit" data-testid="submit-button">Send</button>
+    </form>
+  </div>
+</template>

package/src/TestCompletionComponent.vue

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,19 @@
+<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/TestUseObjectComponent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { experimental_useObject } from './use-object';
+import { z } from 'zod/v4';
+import { ref, reactive } from 'vue';
+
+const onFinishCalls: Array<{
+  object: { content: string } | undefined;
+  error: Error | undefined;
+}> = reactive([]);
+
+const onErrorResult: Error | undefined = ref(undefined);
+
+const { object, error, submit, isLoading, stop, clear } =
+  experimental_useObject({
+    api: '/api/use-object',
+    schema: z.object({ content: z.string() }),
+    onError(error) {
+      onErrorResult.value = error;
+    },
+    onFinish(event) {
+      onFinishCalls.push(event);
+    },
+  });
+</script>
+
+<template>
+  <div>
+    <div data-testid="loading">{{ isLoading.toString() }}</div>
+    <div data-testid="object">{{ JSON.stringify(object) }}</div>
+    <div data-testid="error">{{ error?.toString() }}</div>
+    <button data-testid="submit-button" @click="submit('test-input')">
+      Generate
+    </button>
+    <button data-testid="stop-button" @click="stop">Stop</button>
+    <button data-testid="clear-button" @click="clear">Clear</button>
+    <div data-testid="on-error-result">{{ onErrorResult?.toString() }}</div>
+    <div data-testid="on-finish-calls">{{ JSON.stringify(onFinishCalls) }}</div>
+  </div>
+</template>

package/src/TestUseObjectCustomTransportComponent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { experimental_useObject } from './use-object';
+import { z } from 'zod/v4';
+import { ref, reactive } from 'vue';
+
+const { object, error, submit, isLoading, stop, clear } =
+  experimental_useObject({
+    api: '/api/use-object',
+    schema: z.object({ content: z.string() }),
+    headers: {
+      Authorization: 'Bearer TEST_TOKEN',
+      'X-Custom-Header': 'CustomValue',
+    },
+    credentials: 'include',
+  });
+</script>
+
+<template>
+  <div>
+    <div data-testid="loading">{{ isLoading.toString() }}</div>
+    <div data-testid="object">{{ JSON.stringify(object) }}</div>
+    <div data-testid="error">{{ error?.toString() }}</div>
+    <button data-testid="submit-button" @click="submit('test-input')">
+      Generate
+    </button>
+    <button data-testid="stop-button" @click="stop">Stop</button>
+    <button data-testid="clear-button" @click="clear">Clear</button>
+  </div>
+</template>

package/src/chat.vue.ts

@@ -0,0 +1,70 @@
+import {
+  AbstractChat,
+  ChatInit as BaseChatInit,
+  ChatState,
+  ChatStatus,
+  UIMessage,
+} from 'ai';
+import { Ref, ref } from 'vue';
+
+class VueChatState<UI_MESSAGE extends UIMessage>
+  implements ChatState<UI_MESSAGE>
+{
+  private messagesRef: Ref<UI_MESSAGE[]>;
+  private statusRef = ref<ChatStatus>('ready');
+  private errorRef = ref<Error | undefined>(undefined);
+
+  constructor(messages?: UI_MESSAGE[]) {
+    this.messagesRef = ref(messages ?? []) as Ref<UI_MESSAGE[]>;
+  }
+
+  get messages(): UI_MESSAGE[] {
+    return this.messagesRef.value;
+  }
+
+  set messages(messages: UI_MESSAGE[]) {
+    this.messagesRef.value = messages;
+  }
+
+  get status(): ChatStatus {
+    return this.statusRef.value;
+  }
+
+  set status(status: ChatStatus) {
+    this.statusRef.value = status;
+  }
+
+  get error(): Error | undefined {
+    return this.errorRef.value;
+  }
+
+  set error(error: Error | undefined) {
+    this.errorRef.value = error;
+  }
+
+  pushMessage = (message: UI_MESSAGE) => {
+    this.messagesRef.value = [...this.messagesRef.value, message];
+  };
+
+  popMessage = () => {
+    this.messagesRef.value = this.messagesRef.value.slice(0, -1);
+  };
+
+  replaceMessage = (index: number, message: UI_MESSAGE) => {
+    // message is cloned here because vue's deep reactivity shows unexpected behavior, particularly when updating tool invocation parts
+    this.messagesRef.value[index] = { ...message };
+  };
+
+  snapshot = <T>(value: T): T => value;
+}
+
+export class Chat<
+  UI_MESSAGE extends UIMessage,
+> extends AbstractChat<UI_MESSAGE> {
+  constructor({ messages, ...init }: BaseChatInit<UI_MESSAGE>) {
+    super({
+      ...init,
+      state: new VueChatState(messages),
+    });
+  }
+}