@ai-sdk/svelte 3.0.0-canary.9 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/svelte",
-  "version": "3.0.0-canary.9",
+  "version": "3.0.1",
   "license": "Apache-2.0",
   "files": [
     "dist",
@@ -27,8 +27,8 @@
     "access": "public"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
-    "zod": "^3.23.8"
+    "svelte": "^5.31.0",
+    "zod": "^3.25.76 || ^4"
   },
   "peerDependenciesMeta": {
     "zod": {
@@ -36,8 +36,8 @@
     }
   },
   "dependencies": {
-    "ai": "5.0.0-canary.10",
-    "@ai-sdk/provider-utils": "3.0.0-canary.8"
+    "ai": "5.0.1",
+    "@ai-sdk/provider-utils": "3.0.0"
   },
   "devDependencies": {
     "@types/node": "20.17.24",
@@ -52,16 +52,16 @@
     "globals": "^16.0.0",
     "jsdom": "^26.0.0",
     "publint": "^0.3.2",
-    "svelte": "^5.0.0",
+    "svelte": "^5.31.0",
     "svelte-check": "^4.0.0",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.20.0",
     "vite": "^6.0.0",
     "vitest": "^3.0.0",
-    "zod": "3.23.8",
+    "zod": "3.25.76",
     "@vercel/ai-tsconfig": "0.0.0"
   },
-  "homepage": "https://sdk.vercel.ai/docs",
+  "homepage": "https://ai-sdk.dev/docs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vercel/ai.git",

package/src/chat.svelte.ts

@@ -1,350 +1,51 @@
 import {
-  fillMessageParts,
-  generateId,
+  AbstractChat,
+  type ChatInit,
+  type ChatState,
+  type ChatStatus,
+  type CreateUIMessage,
   type UIMessage,
-  type UseChatOptions,
-  type JSONValue,
-  type ChatRequest,
-  extractMaxToolInvocationStep,
-  callChatApi,
-  shouldResubmitMessages,
-  type Message,
-  type CreateMessage,
-  type ChatRequestOptions,
-  prepareAttachmentsForRequest,
-  getMessageParts,
-  updateToolCallResult,
-  isAssistantMessageWithCompletedToolCalls,
 } from 'ai';
-import { isAbortError } from '@ai-sdk/provider-utils';
-import {
-  KeyedChatStore,
-  getChatContext,
-  hasChatContext,
-} from './chat-context.svelte.js';
-import { untrack } from 'svelte';
-
-export type ChatOptions = Readonly<
-  Omit<UseChatOptions, 'keepLastMessageOnError'> & {
-    /**
-     * Maximum number of sequential LLM calls (steps), e.g. when you use tool calls.
-     * Must be at least 1.
-     * A maximum number is required to prevent infinite loops in the case of misconfigured tools.
-     * By default, it's set to 1, which means that only a single LLM call is made.
-     * @default 1
-     */
-    maxSteps?: number;
-  }
->;
 
-export type { CreateMessage, Message, UIMessage };
-
-export class Chat {
-  readonly #options: ChatOptions = {};
-  readonly #api = $derived(this.#options.api ?? '/api/chat');
-  readonly #generateId = $derived(this.#options.generateId ?? generateId);
-  readonly #maxSteps = $derived(this.#options.maxSteps ?? 1);
-  readonly #streamProtocol = $derived(this.#options.streamProtocol ?? 'data');
-  readonly #keyedStore = $state<KeyedChatStore>()!;
-  /**
-   * The id of the chat. If not provided through the constructor, a random ID will be generated
-   * using the provided `generateId` function, or a built-in function if not provided.
-   */
-  readonly id = $derived(this.#options.id ?? this.#generateId());
-  readonly #store = $derived(this.#keyedStore.get(this.id));
-  #abortController: AbortController | undefined;
-
-  /**
-   * Additional data added on the server via StreamData.
-   *
-   * This is writable, so you can use it to transform or clear the chat data.
-   */
-  get data() {
-    return this.#store.data;
-  }
-  set data(value: JSONValue[] | undefined) {
-    this.#store.data = value;
-  }
-
-  /**
-   * Hook status:
-   *
-   * - `submitted`: The message has been sent to the API and we're awaiting the start of the response stream.
-   * - `streaming`: The response is actively streaming in from the API, receiving chunks of data.
-   * - `ready`: The full response has been received and processed; a new user message can be submitted.
-   * - `error`: An error occurred during the API request, preventing successful completion.
-   */
-  get status() {
-    return this.#store.status;
-  }
-
-  /** The error object of the API request */
-  get error() {
-    return this.#store.error;
-  }
+export type { CreateUIMessage, UIMessage };
 
-  /** The current value of the input. Writable, so it can be bound to form inputs. */
-  input = $state<string>()!;
-
-  /**
-   * Current messages in the chat.
-   *
-   * This is writable, which is useful when you want to edit the messages on the client, and then
-   * trigger {@link reload} to regenerate the AI response.
-   */
-  get messages(): UIMessage[] {
-    return this.#store.messages;
-  }
-  set messages(value: Message[]) {
-    untrack(() => (this.#store.messages = fillMessageParts(value)));
+export class Chat<
+  UI_MESSAGE extends UIMessage = UIMessage,
+> extends AbstractChat<UI_MESSAGE> {
+  constructor(init: ChatInit<UI_MESSAGE>) {
+    super({
+      ...init,
+      state: new SvelteChatState(init.messages),
+    });
   }
+}
 
-  constructor(options: ChatOptions = {}) {
-    if (hasChatContext()) {
-      this.#keyedStore = getChatContext();
-    } else {
-      this.#keyedStore = new KeyedChatStore();
-    }
+class SvelteChatState<UI_MESSAGE extends UIMessage>
+  implements ChatState<UI_MESSAGE>
+{
+  messages: UI_MESSAGE[];
+  status = $state<ChatStatus>('ready');
+  error = $state<Error | undefined>(undefined);
 
-    this.#options = options;
-    this.messages = options.initialMessages ?? [];
-    this.input = options.initialInput ?? '';
+  constructor(messages: UI_MESSAGE[] = []) {
+    this.messages = $state(messages);
   }
 
-  /**
-   * 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 options Additional options to pass to the API call
-   */
-  append = async (
-    message: Message | CreateMessage,
-    { data, headers, body, experimental_attachments }: ChatRequestOptions = {},
-  ) => {
-    const attachmentsForRequest = await prepareAttachmentsForRequest(
-      experimental_attachments,
-    );
-
-    const messages = this.messages.concat({
-      ...message,
-      id: message.id ?? this.#generateId(),
-      createdAt: message.createdAt ?? new Date(),
-      experimental_attachments:
-        attachmentsForRequest.length > 0 ? attachmentsForRequest : undefined,
-      parts: getMessageParts(message),
-    });
-
-    return this.#triggerRequest({ messages, headers, body, data });
-  };
-
-  /**
-   * 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 = async ({ data, headers, body }: ChatRequestOptions = {}) => {
-    if (this.messages.length === 0) {
-      return;
-    }
-
-    const lastMessage = this.messages[this.messages.length - 1];
-    await this.#triggerRequest({
-      messages:
-        lastMessage.role === 'assistant'
-          ? this.messages.slice(0, -1)
-          : this.messages,
-      headers,
-      body,
-      data,
-    });
+  setMessages = (messages: UI_MESSAGE[]) => {
+    this.messages = messages;
   };
 
-  /**
-   * Abort the current request immediately, keep the generated tokens if any.
-   */
-  stop = () => {
-    try {
-      this.#abortController?.abort();
-    } catch {
-      // ignore
-    } finally {
-      this.#store.status = 'ready';
-      this.#abortController = undefined;
-    }
+  pushMessage = (message: UI_MESSAGE) => {
+    this.messages.push(message);
   };
 
-  /** Form submission handler to automatically reset input and append a user message */
-  handleSubmit = async (
-    event?: { preventDefault?: () => void },
-    options: ChatRequestOptions = {},
-  ) => {
-    event?.preventDefault?.();
-    if (!this.input && !options.allowEmptySubmit) return;
-
-    const attachmentsForRequest = await prepareAttachmentsForRequest(
-      options.experimental_attachments,
-    );
-
-    const messages = this.messages.concat({
-      id: this.#generateId(),
-      createdAt: new Date(),
-      role: 'user',
-      content: this.input,
-      experimental_attachments:
-        attachmentsForRequest.length > 0 ? attachmentsForRequest : undefined,
-      parts: [{ type: 'text', text: this.input }],
-    });
-
-    const chatRequest: ChatRequest = {
-      messages,
-      headers: options.headers,
-      body: options.body,
-      data: options.data,
-    };
-
-    const request = this.#triggerRequest(chatRequest);
-    this.input = '';
-    await request;
+  popMessage = () => {
+    this.messages.pop();
   };
 
-  addToolResult = async ({
-    toolCallId,
-    result,
-  }: {
-    toolCallId: string;
-    result: unknown;
-  }) => {
-    updateToolCallResult({
-      messages: this.messages,
-      toolCallId,
-      toolResult: result,
-    });
-
-    // when the request is ongoing, the auto-submit will be triggered after the request is finished
-    if (
-      this.#store.status === 'submitted' ||
-      this.#store.status === 'streaming'
-    ) {
-      return;
-    }
-
-    const lastMessage = this.messages[this.messages.length - 1];
-    if (isAssistantMessageWithCompletedToolCalls(lastMessage)) {
-      await this.#triggerRequest({ messages: this.messages });
-    }
+  replaceMessage = (index: number, message: UI_MESSAGE) => {
+    this.messages[index] = message;
   };
 
-  #triggerRequest = async (chatRequest: ChatRequest) => {
-    this.#store.status = 'submitted';
-    this.#store.error = undefined;
-
-    const messages = fillMessageParts(chatRequest.messages);
-    const messageCount = messages.length;
-    const maxStep = extractMaxToolInvocationStep(
-      messages[messages.length - 1]?.toolInvocations,
-    );
-
-    try {
-      const abortController = new AbortController();
-      this.#abortController = abortController;
-
-      // Optimistically update messages
-      this.messages = messages;
-
-      const constructedMessagesPayload = this.#options.sendExtraMessageFields
-        ? messages
-        : messages.map(
-            ({
-              role,
-              content,
-              experimental_attachments,
-              data,
-              annotations,
-              toolInvocations,
-              parts,
-            }) => ({
-              role,
-              content,
-              ...(experimental_attachments !== undefined && {
-                experimental_attachments,
-              }),
-              ...(data !== undefined && { data }),
-              ...(annotations !== undefined && { annotations }),
-              ...(toolInvocations !== undefined && { toolInvocations }),
-              ...(parts !== undefined && { parts }),
-            }),
-          );
-
-      const existingData = this.data ?? [];
-      await callChatApi({
-        api: this.#api,
-        body: {
-          id: this.id,
-          messages: constructedMessagesPayload,
-          data: chatRequest.data,
-          ...$state.snapshot(this.#options.body),
-          ...chatRequest.body,
-        },
-        streamProtocol: this.#streamProtocol,
-        credentials: this.#options.credentials,
-        headers: {
-          ...this.#options.headers,
-          ...chatRequest.headers,
-        },
-        abortController: () => abortController,
-        restoreMessagesOnFailure: () => {},
-        onResponse: this.#options.onResponse,
-        onUpdate: ({ message, data, replaceLastMessage }) => {
-          this.#store.status = 'streaming';
-
-          this.messages = messages;
-          if (replaceLastMessage) {
-            this.messages[this.messages.length - 1] = message;
-          } else {
-            this.messages.push(message);
-          }
-
-          if (data?.length) {
-            this.data = existingData;
-            this.data.push(...data);
-          }
-        },
-        onToolCall: this.#options.onToolCall,
-        onFinish: this.#options.onFinish,
-        generateId: this.#generateId,
-        fetch: this.#options.fetch,
-        // callChatApi calls structuredClone on the message
-        lastMessage: $state.snapshot(this.messages[this.messages.length - 1]),
-      });
-
-      this.#abortController = undefined;
-      this.#store.status = 'ready';
-    } catch (error) {
-      if (isAbortError(error)) {
-        return;
-      }
-
-      const coalescedError =
-        error instanceof Error ? error : new Error(String(error));
-      if (this.#options.onError) {
-        this.#options.onError(coalescedError);
-      }
-
-      this.#store.status = 'error';
-      this.#store.error = coalescedError;
-    }
-
-    // auto-submit when all tool calls in the last assistant message have results
-    // and assistant has not answered yet
-    if (
-      shouldResubmitMessages({
-        originalMaxToolInvocationStep: maxStep,
-        originalMessageCount: messageCount,
-        maxSteps: this.#maxSteps,
-        messages: this.messages,
-      })
-    ) {
-      await this.#triggerRequest({ messages: this.messages });
-    }
-  };
+  snapshot = <T>(thing: T): T => $state.snapshot(thing) as T;
 }

package/src/completion.svelte.ts

@@ -1,9 +1,8 @@
 import {
+  callCompletionApi,
   generateId,
+  type CompletionRequestOptions,
   type UseCompletionOptions,
-  type JSONValue,
-  type RequestOptions,
-  callCompletionApi,
 } from 'ai';
 import {
   KeyedCompletionStore,
@@ -30,18 +29,6 @@ export class Completion {
     this.#store.completions.set(this.#id, value);
   }
 
-  /**
-   * Additional data added on the server via StreamData.
-   *
-   * This is writable, so you can use it to transform or clear the chat data.
-   */
-  get data() {
-    return this.#store.data;
-  }
-  set data(value: JSONValue[]) {
-    this.#store.data = value;
-  }
-
   /** The error object of the API request */
   get error() {
     return this.#store.error;
@@ -58,12 +45,9 @@ export class Completion {
   }
 
   constructor(options: CompletionOptions = {}) {
-    if (hasCompletionContext()) {
-      this.#keyedStore = getCompletionContext();
-    } else {
-      this.#keyedStore = new KeyedCompletionStore();
-    }
-
+    this.#keyedStore = hasCompletionContext()
+      ? getCompletionContext()
+      : new KeyedCompletionStore();
     this.#options = options;
     this.completion = options.initialCompletion ?? '';
     this.input = options.initialInput ?? '';
@@ -86,7 +70,7 @@ export class Completion {
   /**
    * Send a new prompt to the API endpoint and update the completion state.
    */
-  complete = async (prompt: string, options?: RequestOptions) =>
+  complete = async (prompt: string, options?: CompletionRequestOptions) =>
     this.#triggerRequest(prompt, options);
 
   /** Form submission handler to automatically reset input and call the completion API */
@@ -97,7 +81,10 @@ export class Completion {
     }
   };
 
-  #triggerRequest = async (prompt: string, options?: RequestOptions) => {
+  #triggerRequest = async (
+    prompt: string,
+    options?: CompletionRequestOptions,
+  ) => {
     return callCompletionApi({
       api: this.#api,
       prompt,
@@ -113,9 +100,6 @@ export class Completion {
       setCompletion: completion => {
         this.completion = completion;
       },
-      onData: data => {
-        this.data.push(...data);
-      },
       setLoading: loading => {
         this.#store.loading = loading;
       },
@@ -125,7 +109,6 @@ export class Completion {
       setAbortController: abortController => {
         this.#abortController = abortController ?? undefined;
       },
-      onResponse: this.#options.onResponse,
       onFinish: this.#options.onFinish,
       onError: this.#options.onError,
     });

package/src/context-provider.ts

@@ -1,4 +1,3 @@
-import { KeyedChatStore, setChatContext } from './chat-context.svelte.js';
 import {
   KeyedCompletionStore,
   setCompletionContext,
@@ -9,9 +8,6 @@ import {
 } from './structured-object-context.svelte.js';
 
 export function createAIContext() {
-  const chatStore = new KeyedChatStore();
-  setChatContext(chatStore);
-
   const completionStore = new KeyedCompletionStore();
   setCompletionContext(completionStore);
 

package/src/index.ts

@@ -1,16 +1,7 @@
-export {
-  Chat,
-  type ChatOptions,
-  type CreateMessage,
-  type Message,
-  type UIMessage,
-} from './chat.svelte.js';
-
+export { Chat, type CreateUIMessage, type UIMessage } from './chat.svelte.js';
+export { Completion, type CompletionOptions } from './completion.svelte.js';
+export { createAIContext } from './context-provider.js';
 export {
   StructuredObject as Experimental_StructuredObject,
   type Experimental_StructuredObjectOptions,
 } from './structured-object.svelte.js';
-
-export { Completion, type CompletionOptions } from './completion.svelte.js';
-
-export { createAIContext } from './context-provider.js';

package/src/structured-object.svelte.ts

@@ -3,6 +3,7 @@ import {
   isAbortError,
   safeValidateTypes,
   type FetchFunction,
+  type InferSchema,
 } from '@ai-sdk/provider-utils';
 import {
   asSchema,
@@ -11,7 +12,8 @@ import {
   type DeepPartial,
   type Schema,
 } from 'ai';
-import { type z } from 'zod';
+import type * as z3 from 'zod/v3';
+import type * as z4 from 'zod/v4';
 import {
   getStructuredObjectContext,
   hasStructuredObjectContext,
@@ -19,7 +21,10 @@ import {
   type StructuredObjectStore,
 } from './structured-object-context.svelte.js';
 
-export type Experimental_StructuredObjectOptions<RESULT> = {
+export type Experimental_StructuredObjectOptions<
+  SCHEMA extends z3.Schema | z4.core.$ZodType | Schema,
+  RESULT = InferSchema<SCHEMA>,
+> = {
   /**
    * The API endpoint. It should stream JSON that matches the schema as chunked text.
    */
@@ -28,7 +33,7 @@ export type Experimental_StructuredObjectOptions<RESULT> = {
   /**
    * A Zod schema that defines the shape of the complete object.
    */
-  schema: z.Schema<RESULT, z.ZodTypeDef, unknown> | Schema<RESULT>;
+  schema: SCHEMA;
 
   /**
    * An unique identifier. If not provided, a random one will be
@@ -82,9 +87,13 @@ export type Experimental_StructuredObjectOptions<RESULT> = {
   credentials?: RequestCredentials;
 };
 
-export class StructuredObject<RESULT, INPUT = unknown> {
-  #options: Experimental_StructuredObjectOptions<RESULT> =
-    {} as Experimental_StructuredObjectOptions<RESULT>;
+export class StructuredObject<
+  SCHEMA extends z3.Schema | z4.core.$ZodType | Schema,
+  RESULT = InferSchema<SCHEMA>,
+  INPUT = unknown,
+> {
+  #options: Experimental_StructuredObjectOptions<SCHEMA, RESULT> =
+    {} as Experimental_StructuredObjectOptions<SCHEMA, RESULT>;
   readonly #id = $derived(this.#options.id ?? generateId());
   readonly #keyedStore = $state<KeyedStructuredObjectStore>()!;
   readonly #store = $derived(
@@ -114,7 +123,7 @@ export class StructuredObject<RESULT, INPUT = unknown> {
     return this.#store.loading;
   }
 
-  constructor(options: Experimental_StructuredObjectOptions<RESULT>) {
+  constructor(options: Experimental_StructuredObjectOptions<SCHEMA, RESULT>) {
     if (hasStructuredObjectContext()) {
       this.#keyedStore = getStructuredObjectContext();
     } else {
@@ -143,9 +152,9 @@ export class StructuredObject<RESULT, INPUT = unknown> {
    */
   submit = async (input: INPUT) => {
     try {
-      this.#store.object = undefined; // reset the data
+      this.#clearObject();
+
       this.#store.loading = true;
-      this.#store.error = undefined;
 
       const abortController = new AbortController();
       this.#abortController = abortController;
@@ -177,13 +186,13 @@ export class StructuredObject<RESULT, INPUT = unknown> {
 
       await response.body.pipeThrough(new TextDecoderStream()).pipeTo(
         new WritableStream<string>({
-          write: chunk => {
+          write: async chunk => {
             if (abortController?.signal.aborted) {
               throw new DOMException('Stream aborted', 'AbortError');
             }
             accumulatedText += chunk;
 
-            const { value } = parsePartialJson(accumulatedText);
+            const { value } = await parsePartialJson(accumulatedText);
             const currentObject = value as DeepPartial<RESULT>;
 
             if (!isDeepEqualData(latestObject, currentObject)) {
@@ -193,12 +202,12 @@ export class StructuredObject<RESULT, INPUT = unknown> {
             }
           },
 
-          close: () => {
+          close: async () => {
             this.#store.loading = false;
             this.#abortController = undefined;
 
             if (this.#options.onFinish != null) {
-              const validationResult = safeValidateTypes({
+              const validationResult = await safeValidateTypes({
                 value: latestObject,
                 schema: asSchema(this.#options.schema),
               });
@@ -227,4 +236,18 @@ export class StructuredObject<RESULT, INPUT = unknown> {
       this.#store.error = coalescedError;
     }
   };
+
+  /**
+   * Clears the object state.
+   */
+  clear = () => {
+    this.stop();
+    this.#clearObject();
+  };
+
+  #clearObject = () => {
+    this.#store.object = undefined;
+    this.#store.error = undefined;
+    this.#store.loading = false;
+  };
 }

package/src/utils.svelte.ts

@@ -1,4 +1,4 @@
-import { hasContext, getContext, setContext, untrack } from 'svelte';
+import { getContext, hasContext, setContext, untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 
 export function createContext<T>(name: string) {

package/dist/chat-context.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { JSONValue, UIMessage } from 'ai';
-import { KeyedStore } from './utils.svelte.js';
-declare class ChatStore {
-    messages: UIMessage[];
-    data: JSONValue[] | undefined;
-    status: "submitted" | "streaming" | "ready" | "error";
-    error: Error | undefined;
-}
-export declare class KeyedChatStore extends KeyedStore<ChatStore> {
-    constructor(value?: Iterable<readonly [string, ChatStore]> | null | undefined);
-}
-export declare const hasChatContext: () => boolean, getChatContext: () => KeyedChatStore, setChatContext: (value: KeyedChatStore) => KeyedChatStore;
-export {};
-//# sourceMappingURL=chat-context.svelte.d.ts.map