@ai-sdk/svelte 2.1.12 → 3.0.0-alpha.10

package/src/chat.svelte.ts

@@ -1,350 +1,57 @@
 import {
-  fillMessageParts,
-  generateId,
+  AbstractChat,
+  type ChatInit,
+  type ChatState,
+  type ChatStatus,
+  type CreateUIMessage,
+  type UIDataPartSchemas,
+  type UIDataTypes,
   type UIMessage,
-  type UseChatOptions,
-  type JSONValue,
-  type ChatRequest,
-  extractMaxToolInvocationStep,
-  callChatApi,
-  shouldResubmitMessages,
-  type Message,
-  type CreateMessage,
-  type ChatRequestOptions,
-  prepareAttachmentsForRequest,
-  getMessageParts,
-  updateToolCallResult,
-  isAssistantMessageWithCompletedToolCalls,
-} from '@ai-sdk/ui-utils';
-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;
-  }
-
-  /** 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)));
+} from 'ai';
+
+export type { CreateUIMessage, UIMessage };
+
+export class Chat<
+  MESSAGE_METADATA = unknown,
+  DATA_PART_SCHEMAS extends UIDataPartSchemas = UIDataPartSchemas,
+> extends AbstractChat<MESSAGE_METADATA, DATA_PART_SCHEMAS> {
+  constructor(init: ChatInit<MESSAGE_METADATA, DATA_PART_SCHEMAS>) {
+    super({
+      ...init,
+      state: new SvelteChatState(init.messages),
+    });
   }
+}
 
-  constructor(options: ChatOptions = {}) {
-    if (hasChatContext()) {
-      this.#keyedStore = getChatContext();
-    } else {
-      this.#keyedStore = new KeyedChatStore();
-    }
+class SvelteChatState<MESSAGE_METADATA, DATA_TYPES extends UIDataTypes>
+  implements ChatState<MESSAGE_METADATA, DATA_TYPES>
+{
+  messages: UIMessage<MESSAGE_METADATA, DATA_TYPES>[];
+  status = $state<ChatStatus>('ready');
+  error = $state<Error | undefined>(undefined);
 
-    this.#options = options;
-    this.messages = options.initialMessages ?? [];
-    this.input = options.initialInput ?? '';
+  constructor(messages: UIMessage<MESSAGE_METADATA, DATA_TYPES>[] = []) {
+    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 });
+  setMessages = (messages: UIMessage<MESSAGE_METADATA, DATA_TYPES>[]) => {
+    this.messages = messages;
   };
 
-  /**
-   * 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,
-    });
+  pushMessage = (message: UIMessage<MESSAGE_METADATA, DATA_TYPES>) => {
+    this.messages.push(message);
   };
 
-  /**
-   * 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;
-    }
+  popMessage = () => {
+    this.messages.pop();
   };
 
-  /** Form submission handler to automatically reset input and append a user message */
-  handleSubmit = async (
-    event?: { preventDefault?: () => void },
-    options: ChatRequestOptions = {},
+  replaceMessage = (
+    index: number,
+    message: UIMessage<MESSAGE_METADATA, DATA_TYPES>,
   ) => {
-    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;
+    this.messages[index] = message;
   };
 
-  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 });
-    }
-  };
-
-  #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-context.svelte.ts

@@ -1,4 +1,4 @@
-import type { JSONValue } from '@ai-sdk/ui-utils';
+import type { JSONValue } from 'ai';
 import { SvelteMap } from 'svelte/reactivity';
 import { createContext, KeyedStore } from './utils.svelte.js';
 

package/src/completion.svelte.ts

@@ -1,10 +1,9 @@
 import {
+  callCompletionApi,
   generateId,
+  type CompletionRequestOptions,
   type UseCompletionOptions,
-  type JSONValue,
-  type RequestOptions,
-  callCompletionApi,
-} from '@ai-sdk/ui-utils';
+} from 'ai';
 import {
   KeyedCompletionStore,
   getCompletionContext,
@@ -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-context.svelte.ts

@@ -1,4 +1,4 @@
-import type { DeepPartial } from '@ai-sdk/ui-utils';
+import type { DeepPartial } from 'ai';
 import { createContext, KeyedStore } from './utils.svelte.js';
 
 export class StructuredObjectStore<RESULT> {

package/src/structured-object.svelte.ts

@@ -3,6 +3,7 @@ import {
   isAbortError,
   safeValidateTypes,
   type FetchFunction,
+  type InferSchema,
 } from '@ai-sdk/provider-utils';
 import {
   asSchema,
@@ -10,8 +11,9 @@ import {
   parsePartialJson,
   type DeepPartial,
   type Schema,
-} from '@ai-sdk/ui-utils';
-import { type z } from 'zod';
+} from 'ai';
+import type * as z3 from 'zod/v3';
+import type * as z4 from 'zod/v4/core';
 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.$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.$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 {
@@ -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),
               });

package/src/tests/structured-object-synchronization.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="RESULT">
   import { createAIContext } from '../context-provider.js';
   import { StructuredObject } from '../structured-object.svelte.js';
-  import type { Schema } from '@ai-sdk/ui-utils';
+  import type { Schema } from 'ai';
   import type { z } from 'zod';
 
   let {

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-sdk/ui-utils';
-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

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

@@ -1 +0,0 @@
-{"version":3,"file":"chat-context.svelte.d.ts","sourceRoot":"","sources":["../src/chat-context.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAiB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE9D,cAAM,SAAS;IACb,QAAQ,cAA2B;IACnC,IAAI,0BAAyB;IAC7B,MAAM,gDAAkE;IACxE,KAAK,oBAAmB;CACzB;AAED,qBAAa,cAAe,SAAQ,UAAU,CAAC,SAAS,CAAC;gBAErD,KAAK,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS;CAIpE;AAED,eAAO,MACO,cAAc,iBACd,cAAc,wBACd,cAAc,2CACa,CAAC"}

package/dist/chat-context.svelte.js

@@ -1,13 +0,0 @@
-import { createContext, KeyedStore } from './utils.svelte.js';
-class ChatStore {
-    messages = $state([]);
-    data = $state();
-    status = $state('ready');
-    error = $state();
-}
-export class KeyedChatStore extends KeyedStore {
-    constructor(value) {
-        super(ChatStore, value);
-    }
-}
-export const { hasContext: hasChatContext, getContext: getChatContext, setContext: setChatContext, } = createContext('Chat');