@ai-sdk/svelte 3.0.0-alpha.3 → 3.0.0-alpha.5

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ai-sdk/svelte
 
+## 3.0.0-alpha.5
+
+### Patch Changes
+
+- Updated dependencies [655cf3c]
+- Updated dependencies [1675396]
+- Updated dependencies [cf9af6e]
+- Updated dependencies [ef256ed]
+- Updated dependencies [1ed0287]
+- Updated dependencies [825e8d7]
+- Updated dependencies [7324c21]
+  - ai@5.0.0-alpha.5
+
+## 3.0.0-alpha.4
+
+### Patch Changes
+
+- Updated dependencies [b32c141]
+- Updated dependencies [72d7d72]
+- Updated dependencies [9315076]
+- Updated dependencies [7d97ab6]
+- Updated dependencies [37a916d]
+- Updated dependencies [5f2b3d4]
+  - ai@5.0.0-alpha.4
+  - @ai-sdk/provider-utils@3.0.0-alpha.4
+
 ## 3.0.0-alpha.3
 
 ### Patch Changes

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

@@ -0,0 +1,4 @@
+import { ChatStore, type ChatStoreOptions, type UIDataPartSchemas } from 'ai';
+export declare const hasChatStoreContext: () => boolean, getChatStoreContext: () => ChatStore<unknown, UIDataPartSchemas>, setChatStoreContext: (value: ChatStore<unknown, UIDataPartSchemas>) => ChatStore<unknown, UIDataPartSchemas>;
+export declare function createChatStore<MESSAGE_METADATA = unknown, DATA_PART_SCHEMAS extends UIDataPartSchemas = UIDataPartSchemas>(options: ChatStoreOptions<MESSAGE_METADATA, DATA_PART_SCHEMAS>): ChatStore<MESSAGE_METADATA, DATA_PART_SCHEMAS>;
+//# sourceMappingURL=chat-store.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-store.svelte.d.ts","sourceRoot":"","sources":["../src/chat-store.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAKT,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EAGvB,MAAM,IAAI,CAAC;AAGZ,eAAO,MACO,mBAAmB,iBACnB,mBAAmB,+CACnB,mBAAmB,yFACQ,CAAC;AAqD1C,wBAAgB,eAAe,CAC7B,gBAAgB,GAAG,OAAO,EAC1B,iBAAiB,SAAS,iBAAiB,GAAG,iBAAiB,EAE/D,OAAO,EAAE,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAC7D,SAAS,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAQhD"}

package/dist/chat-store.svelte.js

@@ -0,0 +1,43 @@
+import { ChatStore, SerialJobExecutor, } from 'ai';
+import { createContext } from './utils.svelte.js';
+export const { hasContext: hasChatStoreContext, getContext: getChatStoreContext, setContext: setChatStoreContext, } = createContext('ChatStore');
+class SvelteChat {
+    messages;
+    status = $state('ready');
+    error = $state(undefined);
+    activeResponse = undefined;
+    jobExecutor = new SerialJobExecutor();
+    constructor(messages) {
+        this.messages = $state(messages ?? []);
+    }
+    setStatus = (status) => {
+        this.status = status;
+    };
+    setError = (error) => {
+        this.error = error;
+    };
+    setActiveResponse = (activeResponse) => {
+        this.activeResponse = activeResponse;
+    };
+    setMessages = (messages) => {
+        this.messages = messages;
+    };
+    pushMessage = (message) => {
+        this.messages.push(message);
+    };
+    popMessage = () => {
+        this.messages.pop();
+    };
+    replaceMessage = (index, message) => {
+        this.messages[index] = message;
+    };
+    snapshot = (thing) => {
+        return $state.snapshot(thing);
+    };
+}
+export function createChatStore(options) {
+    return new ChatStore({
+        ...options,
+        createChat: options => new SvelteChat(options.messages),
+    });
+}

package/dist/chat.svelte.d.ts

@@ -1,13 +1,23 @@
-import { type ChatRequestOptions, type CreateUIMessage, type OriginalUseChatOptions, type UIMessage } from 'ai';
-export type ChatOptions<MESSAGE_METADATA = unknown> = Readonly<OriginalUseChatOptions<MESSAGE_METADATA>>;
+import { type ChatRequestOptions, type ChatStatus, type CreateUIMessage, type InferUIDataParts, type UIDataPartSchemas, type UIMessage, type UseChatOptions } from 'ai';
+export type ChatOptions<MESSAGE_METADATA = unknown, DATA_PART_SCHEMAS extends UIDataPartSchemas = UIDataPartSchemas> = Readonly<UseChatOptions<MESSAGE_METADATA, DATA_PART_SCHEMAS>>;
 export type { CreateUIMessage, UIMessage };
-export declare class Chat<MESSAGE_METADATA = unknown> {
+export declare class Chat<MESSAGE_METADATA = unknown, DATA_PART_SCHEMAS extends UIDataPartSchemas = UIDataPartSchemas> {
     #private;
     /**
      * 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 chatId: string;
+    /** The current value of the input. Writable, so it can be bound to form inputs. */
+    input: 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<MESSAGE_METADATA, InferUIDataParts<DATA_PART_SCHEMAS>>[];
+    set messages(messages: UIMessage<MESSAGE_METADATA, InferUIDataParts<DATA_PART_SCHEMAS>>[]);
     /**
      * Hook status:
      *
@@ -16,27 +26,19 @@ export declare class Chat<MESSAGE_METADATA = unknown> {
      * - `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(): "submitted" | "streaming" | "ready" | "error";
+    get status(): ChatStatus;
+    set status(value: ChatStatus);
     /** The error object of the API request */
     get error(): Error | undefined;
-    /** The current value of the input. Writable, so it can be bound to form inputs. */
-    input: 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<MESSAGE_METADATA>[];
-    set messages(value: UIMessage<MESSAGE_METADATA>[]);
-    constructor(options?: ChatOptions<MESSAGE_METADATA>);
+    set error(value: Error | undefined);
+    constructor(options?: () => ChatOptions<MESSAGE_METADATA, DATA_PART_SCHEMAS>);
     /**
      * 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: (message: UIMessage<MESSAGE_METADATA> | CreateUIMessage<MESSAGE_METADATA>, { headers, body }?: ChatRequestOptions) => Promise<void>;
+    append: (message: UIMessage<MESSAGE_METADATA, InferUIDataParts<DATA_PART_SCHEMAS>> | CreateUIMessage<MESSAGE_METADATA, InferUIDataParts<DATA_PART_SCHEMAS>>, { headers, body }?: ChatRequestOptions) => Promise<void>;
     /**
      * 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

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

@@ -1 +1 @@
-{"version":3,"file":"chat.svelte.d.ts","sourceRoot":"","sources":["../src/chat.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,SAAS,EACf,MAAM,IAAI,CAAC;AAQZ,MAAM,MAAM,WAAW,CAAC,gBAAgB,GAAG,OAAO,IAAI,QAAQ,CAC5D,sBAAsB,CAAC,gBAAgB,CAAC,CACzC,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC;AAE3C,qBAAa,IAAI,CAAC,gBAAgB,GAAG,OAAO;;IAS1C;;;OAGG;IACH,QAAQ,CAAC,MAAM,SAAwD;IASvE;;;;;;;OAOG;IACH,IAAI,MAAM,kDAET;IAED,0CAA0C;IAC1C,IAAI,KAAK,sBAER;IAED,mFAAmF;IACnF,KAAK,SAAqB;IAE1B;;;;;OAKG;IACH,IAAI,QAAQ,IAAI,SAAS,CAAC,gBAAgB,CAAC,EAAE,CAE5C;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,EAAE,EAEhD;gBAEW,OAAO,GAAE,WAAW,CAAC,gBAAgB,CAAM;IAYvD;;;;;OAKG;IACH,MAAM,YACK,SAAS,CAAC,gBAAgB,CAAC,GAAG,eAAe,CAAC,gBAAgB,CAAC,sBACrD,kBAAkB,mBAQrC;IAEF;;;;OAIG;IACH,MAAM,uBAA6B,kBAAkB,mBAcnD;IAEF;;OAEG;IACH,IAAI,aASF;IAEF,qFAAqF;IACrF,YAAY,WACF;QAAE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,YAC9B,kBAAkB,GAAG;QAAE,KAAK,CAAC,EAAE,QAAQ,CAAA;KAAE,mBAwBlD;IAEF,aAAa,4BAGV;QACD,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,OAAO,CAAC;KACjB,mBAmBC;CA4FH"}
+{"version":3,"file":"chat.svelte.d.ts","sourceRoot":"","sources":["../src/chat.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,UAAU,EACf,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,IAAI,CAAC;AAOZ,MAAM,MAAM,WAAW,CACrB,gBAAgB,GAAG,OAAO,EAC1B,iBAAiB,SAAS,iBAAiB,GAAG,iBAAiB,IAC7D,QAAQ,CAAC,cAAc,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAElE,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC;AAE3C,qBAAa,IAAI,CACf,gBAAgB,GAAG,OAAO,EAC1B,iBAAiB,SAAS,iBAAiB,GAAG,iBAAiB;;IAK/D;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAExB,mFAAmF;IACnF,KAAK,SAAsB;IAE3B;;;;;OAKG;IACH,IAAI,QAAQ,IAAI,SAAS,CACvB,gBAAgB,EAChB,gBAAgB,CAAC,iBAAiB,CAAC,CACpC,EAAE,CAEF;IACD,IAAI,QAAQ,CACV,QAAQ,EAAE,SAAS,CACjB,gBAAgB,EAChB,gBAAgB,CAAC,iBAAiB,CAAC,CACpC,EAAE,EAGJ;IAED;;;;;;;OAOG;IACH,IAAI,MAAM,IAAI,UAAU,CAEvB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,UAAU,EAE3B;IAED,0CAA0C;IAC1C,IAAI,KAAK,IAAI,KAAK,GAAG,SAAS,CAE7B;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,EAMjC;gBAGC,OAAO,GAAE,MAAM,WAAW,CACxB,gBAAgB,EAChB,iBAAiB,CACL;IAkChB;;;;;OAKG;IACH,MAAM,YAEA,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,GAChE,eAAe,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,sBACvD,kBAAkB,mBAWrC;IAEF;;;;OAIG;IACH,MAAM,uBAA6B,kBAAkB,mBASnD;IAEF;;OAEG;IACH,IAAI,aAEF;IAEF,qFAAqF;IACrF,YAAY,WACF;QAAE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,YAC9B,kBAAkB,GAAG;QAAE,KAAK,CAAC,EAAE,QAAQ,CAAA;KAAE,mBAwBlD;IAEF,aAAa,4BAGV;QACD,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,OAAO,CAAC;KACjB,mBAMC;CACH"}

package/dist/chat.svelte.js

@@ -1,22 +1,28 @@
-import { isAbortError } from '@ai-sdk/provider-utils';
-import { callChatApi, convertFileListToFileUIParts, extractMaxToolInvocationStep, generateId, getToolInvocations, isAssistantMessageWithCompletedToolCalls, shouldResubmitMessages, updateToolCallResult, } from 'ai';
-import { untrack } from 'svelte';
-import { KeyedChatStore, getChatContext, hasChatContext, } from './chat-context.svelte.js';
+import { ChatStore, convertFileListToFileUIParts, defaultChatStoreOptions, generateId, } from 'ai';
+import { getChatStoreContext, hasChatStoreContext, createChatStore, } from './chat-store.svelte.js';
 export class Chat {
-    #options = {};
-    #api = $derived(this.#options.api ?? '/api/chat');
-    #generateId = $derived(this.#options.generateId ?? generateId);
-    #maxSteps = $derived(this.#options.maxSteps ?? 1);
-    #streamProtocol = $derived(this.#options.streamProtocol ?? 'ui-message');
-    #keyedStore = $state();
+    #options;
+    #generateId;
+    #chatStore;
     /**
      * 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.
      */
-    chatId = $derived(this.#options.chatId ?? this.#generateId());
-    #store = $derived(this.#keyedStore.get(this.chatId));
-    #messageMetadataSchema = $derived(this.#options.messageMetadataSchema);
-    #abortController;
+    chatId;
+    /** The current value of the input. Writable, so it can be bound to form inputs. */
+    input = $state('');
+    /**
+     * 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() {
+        return this.#chatStore.getMessages(this.chatId);
+    }
+    set messages(messages) {
+        this.#chatStore.setMessages({ id: this.chatId, messages });
+    }
     /**
      * Hook status:
      *
@@ -26,36 +32,48 @@ export class Chat {
      * - `error`: An error occurred during the API request, preventing successful completion.
      */
     get status() {
-        return this.#store.status;
+        return this.#chatStore.getStatus(this.chatId);
+    }
+    set status(value) {
+        this.#chatStore.setStatus({ id: this.chatId, status: value });
     }
     /** The error object of the API request */
     get error() {
-        return this.#store.error;
+        return this.#chatStore.getError(this.chatId);
     }
-    /** The current value of the input. Writable, so it can be bound to form inputs. */
-    input = $state();
-    /**
-     * 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() {
-        return this.#store.messages;
-    }
-    set messages(value) {
-        untrack(() => (this.#store.messages = value));
+    set error(value) {
+        this.#chatStore.setStatus({
+            id: this.chatId,
+            status: 'error',
+            error: value,
+        });
     }
-    constructor(options = {}) {
-        if (hasChatContext()) {
-            this.#keyedStore = getChatContext();
+    constructor(options = () => ({})) {
+        this.#options = $derived.by(options);
+        this.#generateId = $derived(this.#options.generateId ?? generateId);
+        this.chatId = $derived(this.#options.chatId ?? this.#generateId());
+        if (this.#options.chatStore) {
+            if (typeof this.#options.chatStore === 'function') {
+                this.#chatStore = createChatStore(this.#options.chatStore());
+            }
+            else {
+                this.#chatStore = this.#options.chatStore;
+            }
+        }
+        else if (hasChatStoreContext()) {
+            this.#chatStore = getChatStoreContext();
         }
         else {
-            this.#keyedStore = new KeyedChatStore();
+            this.#chatStore = createChatStore(defaultChatStoreOptions({
+                api: '/api/chat',
+                generateId: this.#options.generateId || generateId,
+            })());
+        }
+        this.input = this.#options.initialInput ?? '';
+        if (!this.#chatStore.hasChat(this.chatId)) {
+            const messages = $state([]);
+            this.#chatStore.addChat(this.chatId, messages);
         }
-        this.#options = options;
-        this.messages = options.initialMessages ?? [];
-        this.input = options.initialInput ?? '';
     }
     /**
      * Append a user message to the chat list. This triggers the API call to fetch
@@ -64,11 +82,15 @@ export class Chat {
      * @param options Additional options to pass to the API call
      */
     append = async (message, { headers, body } = {}) => {
-        const messages = this.messages.concat({
-            ...message,
-            id: message.id ?? this.#generateId(),
+        await this.#chatStore.submitMessage({
+            chatId: this.chatId,
+            message,
+            headers,
+            body,
+            onError: this.#options.onError,
+            onToolCall: this.#options.onToolCall,
+            onFinish: this.#options.onFinish,
         });
-        return this.#triggerRequest({ messages, headers, body });
     };
     /**
      * Reload the last AI chat response for the given chat history. If the last
@@ -76,32 +98,20 @@ export class Chat {
      * new response.
      */
     reload = async ({ headers, body } = {}) => {
-        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,
+        await this.#chatStore.resubmitLastUserMessage({
+            chatId: this.chatId,
             headers,
             body,
+            onError: this.#options.onError,
+            onToolCall: this.#options.onToolCall,
+            onFinish: this.#options.onFinish,
         });
     };
     /**
      * 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;
-        }
+        this.#chatStore.stopStream({ chatId: this.chatId });
     };
     /** Form submission handler to automatically reset input and append a user message */
     handleSubmit = async (event, options = {}) => {
@@ -111,13 +121,11 @@ export class Chat {
             : await convertFileListToFileUIParts(options?.files);
         if (!this.input && fileParts.length === 0)
             return;
-        const messages = this.messages.concat({
+        const request = this.append({
             id: this.#generateId(),
             role: 'user',
             parts: [...fileParts, { type: 'text', text: this.input }],
-        });
-        const request = this.#triggerRequest({
-            messages,
+        }, {
             headers: options.headers,
             body: options.body,
         });
@@ -125,89 +133,10 @@ export class Chat {
         await request;
     };
     addToolResult = async ({ toolCallId, result, }) => {
-        updateToolCallResult({
-            messages: this.messages,
+        await this.#chatStore.addToolResult({
+            chatId: this.chatId,
             toolCallId,
-            toolResult: result,
+            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) => {
-        this.#store.status = 'submitted';
-        this.#store.error = undefined;
-        const messages = chatRequest.messages;
-        const messageCount = messages.length;
-        const maxStep = extractMaxToolInvocationStep(getToolInvocations(messages[messages.length - 1]));
-        try {
-            const abortController = new AbortController();
-            this.#abortController = abortController;
-            // Optimistically update messages
-            this.messages = messages;
-            await callChatApi({
-                api: this.#api,
-                body: {
-                    id: this.chatId,
-                    messages,
-                    ...$state.snapshot(this.#options.body),
-                    ...chatRequest.body,
-                },
-                streamProtocol: this.#streamProtocol,
-                credentials: this.#options.credentials,
-                headers: {
-                    ...this.#options.headers,
-                    ...chatRequest.headers,
-                },
-                abortController: () => abortController,
-                onUpdate: ({ message }) => {
-                    this.#store.status = 'streaming';
-                    const replaceLastMessage = message.id === messages[messages.length - 1].id;
-                    this.messages = messages;
-                    if (replaceLastMessage) {
-                        this.messages[this.messages.length - 1] = message;
-                    }
-                    else {
-                        this.messages.push(message);
-                    }
-                },
-                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]),
-                messageMetadataSchema: this.#messageMetadataSchema,
-            });
-            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 });
-        }
     };
 }

package/dist/context-provider.d.ts

@@ -1,2 +1,4 @@
-export declare function createAIContext(): void;
+import { type ChatStore } from 'ai';
+export declare function createAIContext(chatStore?: ChatStore): void;
+export declare function createChatStoreContext(chatStore?: ChatStore): void;
 //# sourceMappingURL=context-provider.d.ts.map

package/dist/context-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-provider.d.ts","sourceRoot":"","sources":["../src/context-provider.ts"],"names":[],"mappings":"AAUA,wBAAgB,eAAe,SAS9B"}
+{"version":3,"file":"context-provider.d.ts","sourceRoot":"","sources":["../src/context-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,IAAI,CAAC;AAW7D,wBAAgB,eAAe,CAAC,SAAS,CAAC,EAAE,SAAS,QAQpD;AAED,wBAAgB,sBAAsB,CAAC,SAAS,CAAC,EAAE,SAAS,QAS3D"}

package/dist/context-provider.js

@@ -1,11 +1,17 @@
-import { KeyedChatStore, setChatContext } from './chat-context.svelte.js';
+import { defaultChatStoreOptions } from 'ai';
+import { createChatStore, setChatStoreContext } from './chat-store.svelte.js';
 import { KeyedCompletionStore, setCompletionContext, } from './completion-context.svelte.js';
 import { KeyedStructuredObjectStore, setStructuredObjectContext, } from './structured-object-context.svelte.js';
-export function createAIContext() {
-    const chatStore = new KeyedChatStore();
-    setChatContext(chatStore);
+export function createAIContext(chatStore) {
+    createChatStoreContext(chatStore);
     const completionStore = new KeyedCompletionStore();
     setCompletionContext(completionStore);
     const objectStore = new KeyedStructuredObjectStore();
     setStructuredObjectContext(objectStore);
 }
+export function createChatStoreContext(chatStore) {
+    setChatStoreContext(chatStore ??
+        createChatStore(defaultChatStoreOptions({
+            api: '/api/chat',
+        })()));
+}

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export { Chat, type ChatOptions, type CreateUIMessage, type UIMessage, } from '.
 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';
+export { createChatStore } from './chat-store.svelte.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,gBAAgB,IAAI,6BAA6B,EACjD,KAAK,oCAAoC,GAC1C,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,gBAAgB,IAAI,6BAA6B,EACjD,KAAK,oCAAoC,GAC1C,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -2,3 +2,4 @@ export { Chat, } from './chat.svelte.js';
 export { StructuredObject as Experimental_StructuredObject, } from './structured-object.svelte.js';
 export { Completion } from './completion.svelte.js';
 export { createAIContext } from './context-provider.js';
+export { createChatStore } from './chat-store.svelte.js';

package/dist/tests/chat-synchronization.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+  import { createChatStore } from '../chat-store.svelte.js';
   import { Chat } from '../chat.svelte.js';
+  import { defaultChatStoreOptions } from 'ai';
   import { createAIContext } from '../context-provider.js';
 
   let { chatId }: { chatId?: string } = $props();
 
-  createAIContext();
-  const chat1 = new Chat({ chatId });
-  const chat2 = new Chat({ chatId });
+  createAIContext(
+    createChatStore(defaultChatStoreOptions({ api: '/api/chat' })()),
+  );
+  const chat1 = new Chat(() => ({ chatId }));
+  const chat2 = new Chat(() => ({ chatId }));
 
   export { chat1, chat2 };
 </script>

package/dist/tests/chat-synchronization.svelte.d.ts

@@ -3,8 +3,8 @@ type $$ComponentProps = {
     chatId?: string;
 };
 declare const ChatSynchronization: import("svelte").Component<$$ComponentProps, {
-    chat1: Chat<unknown>;
-    chat2: Chat<unknown>;
+    chat1: Chat<unknown, import("ai").UIDataPartSchemas>;
+    chat2: Chat<unknown, import("ai").UIDataPartSchemas>;
 }, "">;
 type ChatSynchronization = ReturnType<typeof ChatSynchronization>;
 export default ChatSynchronization;

package/dist/tests/chat-synchronization.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-synchronization.svelte.d.ts","sourceRoot":"","sources":["../../src/tests/chat-synchronization.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGxC,KAAK,gBAAgB,GAAI;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAgB9C,QAAA,MAAM,mBAAmB;;;MAAsC,CAAC;AAChE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"chat-synchronization.svelte.d.ts","sourceRoot":"","sources":["../../src/tests/chat-synchronization.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIxC,KAAK,gBAAgB,GAAI;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAoB9C,QAAA,MAAM,mBAAmB;;;MAAsC,CAAC;AAChE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/utils.svelte.js

@@ -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(name) {
     const key = Symbol(name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/svelte",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.5",
   "license": "Apache-2.0",
   "files": [
     "dist",
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
+    "svelte": "^5.31.0",
     "zod": "^3.23.8"
   },
   "peerDependenciesMeta": {
@@ -36,8 +36,8 @@
     }
   },
   "dependencies": {
-    "ai": "5.0.0-alpha.3",
-    "@ai-sdk/provider-utils": "3.0.0-alpha.3"
+    "ai": "5.0.0-alpha.5",
+    "@ai-sdk/provider-utils": "3.0.0-alpha.4"
   },
   "devDependencies": {
     "@types/node": "20.17.24",
@@ -52,7 +52,7 @@
     "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",

package/src/chat-store.svelte.ts

@@ -0,0 +1,85 @@
+import {
+  ChatStore,
+  SerialJobExecutor,
+  type ActiveResponse,
+  type Chat,
+  type ChatStatus,
+  type ChatStoreOptions,
+  type InferUIDataParts,
+  type UIDataPartSchemas,
+  type UIDataTypes,
+  type UIMessage,
+} from 'ai';
+import { createContext } from './utils.svelte.js';
+
+export const {
+  hasContext: hasChatStoreContext,
+  getContext: getChatStoreContext,
+  setContext: setChatStoreContext,
+} = createContext<ChatStore>('ChatStore');
+
+class SvelteChat<MESSAGE_METADATA, DATA_TYPES extends UIDataTypes>
+  implements Chat<MESSAGE_METADATA, DATA_TYPES>
+{
+  messages: UIMessage<MESSAGE_METADATA, DATA_TYPES>[];
+  status = $state<ChatStatus>('ready');
+  error = $state<Error | undefined>(undefined);
+  activeResponse: ActiveResponse<MESSAGE_METADATA> | undefined = undefined;
+  jobExecutor = new SerialJobExecutor();
+
+  constructor(messages?: UIMessage<MESSAGE_METADATA, DATA_TYPES>[]) {
+    this.messages = $state(messages ?? []);
+  }
+
+  setStatus = (status: ChatStatus) => {
+    this.status = status;
+  };
+
+  setError = (error: Error | undefined) => {
+    this.error = error;
+  };
+
+  setActiveResponse = (
+    activeResponse: ActiveResponse<MESSAGE_METADATA> | undefined,
+  ) => {
+    this.activeResponse = activeResponse;
+  };
+
+  setMessages = (messages: UIMessage<MESSAGE_METADATA, DATA_TYPES>[]) => {
+    this.messages = messages;
+  };
+
+  pushMessage = (message: UIMessage<MESSAGE_METADATA, DATA_TYPES>) => {
+    this.messages.push(message);
+  };
+
+  popMessage = () => {
+    this.messages.pop();
+  };
+
+  replaceMessage = (
+    index: number,
+    message: UIMessage<MESSAGE_METADATA, DATA_TYPES>,
+  ) => {
+    this.messages[index] = message;
+  };
+
+  snapshot = <T>(thing: T): T => {
+    return $state.snapshot(thing) as T;
+  };
+}
+
+export function createChatStore<
+  MESSAGE_METADATA = unknown,
+  DATA_PART_SCHEMAS extends UIDataPartSchemas = UIDataPartSchemas,
+>(
+  options: ChatStoreOptions<MESSAGE_METADATA, DATA_PART_SCHEMAS>,
+): ChatStore<MESSAGE_METADATA, DATA_PART_SCHEMAS> {
+  return new ChatStore<MESSAGE_METADATA, DATA_PART_SCHEMAS>({
+    ...options,
+    createChat: options =>
+      new SvelteChat<MESSAGE_METADATA, InferUIDataParts<DATA_PART_SCHEMAS>>(
+        options.messages,
+      ),
+  });
+}

package/src/chat.svelte.ts

@@ -1,52 +1,66 @@
-import { isAbortError } from '@ai-sdk/provider-utils';
 import {
-  callChatApi,
+  ChatStore,
   convertFileListToFileUIParts,
-  extractMaxToolInvocationStep,
+  defaultChatStoreOptions,
   generateId,
-  getToolInvocations,
-  isAssistantMessageWithCompletedToolCalls,
-  shouldResubmitMessages,
-  updateToolCallResult,
   type ChatRequestOptions,
+  type ChatStatus,
   type CreateUIMessage,
-  type OriginalUseChatOptions,
+  type IdGenerator,
+  type InferUIDataParts,
+  type UIDataPartSchemas,
   type UIMessage,
+  type UseChatOptions,
 } from 'ai';
-import { untrack } from 'svelte';
 import {
-  KeyedChatStore,
-  getChatContext,
-  hasChatContext,
-} from './chat-context.svelte.js';
+  getChatStoreContext,
+  hasChatStoreContext,
+  createChatStore,
+} from './chat-store.svelte.js';
 
-export type ChatOptions<MESSAGE_METADATA = unknown> = Readonly<
-  OriginalUseChatOptions<MESSAGE_METADATA>
->;
+export type ChatOptions<
+  MESSAGE_METADATA = unknown,
+  DATA_PART_SCHEMAS extends UIDataPartSchemas = UIDataPartSchemas,
+> = Readonly<UseChatOptions<MESSAGE_METADATA, DATA_PART_SCHEMAS>>;
 
 export type { CreateUIMessage, UIMessage };
 
-export class Chat<MESSAGE_METADATA = unknown> {
-  readonly #options: ChatOptions<MESSAGE_METADATA> = {};
-  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 ?? 'ui-message',
-  );
-  readonly #keyedStore = $state<KeyedChatStore<MESSAGE_METADATA>>()!;
+export class Chat<
+  MESSAGE_METADATA = unknown,
+  DATA_PART_SCHEMAS extends UIDataPartSchemas = UIDataPartSchemas,
+> {
+  readonly #options: ChatOptions<MESSAGE_METADATA, DATA_PART_SCHEMAS>;
+  readonly #generateId: IdGenerator;
+  readonly #chatStore: ChatStore<MESSAGE_METADATA, DATA_PART_SCHEMAS>;
   /**
    * 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 chatId = $derived(this.#options.chatId ?? this.#generateId());
-  readonly #store = $derived(this.#keyedStore.get(this.chatId));
+  readonly chatId: string;
 
-  readonly #messageMetadataSchema = $derived(
-    this.#options.messageMetadataSchema,
-  );
+  /** The current value of the input. Writable, so it can be bound to form inputs. */
+  input = $state<string>('');
 
-  #abortController: AbortController | undefined;
+  /**
+   * 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<
+    MESSAGE_METADATA,
+    InferUIDataParts<DATA_PART_SCHEMAS>
+  >[] {
+    return this.#chatStore.getMessages(this.chatId);
+  }
+  set messages(
+    messages: UIMessage<
+      MESSAGE_METADATA,
+      InferUIDataParts<DATA_PART_SCHEMAS>
+    >[],
+  ) {
+    this.#chatStore.setMessages({ id: this.chatId, messages });
+  }
 
   /**
    * Hook status:
@@ -56,41 +70,61 @@ export class Chat<MESSAGE_METADATA = unknown> {
    * - `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;
+  get status(): ChatStatus {
+    return this.#chatStore.getStatus(this.chatId);
   }
-
-  /** The error object of the API request */
-  get error() {
-    return this.#store.error;
+  set status(value: ChatStatus) {
+    this.#chatStore.setStatus({ id: this.chatId, status: value });
   }
 
-  /** 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<MESSAGE_METADATA>[] {
-    return this.#store.messages;
+  /** The error object of the API request */
+  get error(): Error | undefined {
+    return this.#chatStore.getError(this.chatId);
   }
-  set messages(value: UIMessage<MESSAGE_METADATA>[]) {
-    untrack(() => (this.#store.messages = value));
+  set error(value: Error | undefined) {
+    this.#chatStore.setStatus({
+      id: this.chatId,
+      status: 'error',
+      error: value,
+    });
   }
 
-  constructor(options: ChatOptions<MESSAGE_METADATA> = {}) {
-    if (hasChatContext()) {
-      this.#keyedStore = getChatContext() as KeyedChatStore<MESSAGE_METADATA>;
+  constructor(
+    options: () => ChatOptions<
+      MESSAGE_METADATA,
+      DATA_PART_SCHEMAS
+    > = () => ({}),
+  ) {
+    this.#options = $derived.by(options);
+    this.#generateId = $derived(this.#options.generateId ?? generateId);
+    this.chatId = $derived(this.#options.chatId ?? this.#generateId());
+
+    if (this.#options.chatStore) {
+      if (typeof this.#options.chatStore === 'function') {
+        this.#chatStore = createChatStore(this.#options.chatStore());
+      } else {
+        this.#chatStore = this.#options.chatStore;
+      }
+    } else if (hasChatStoreContext()) {
+      this.#chatStore = getChatStoreContext() as ChatStore<
+        MESSAGE_METADATA,
+        DATA_PART_SCHEMAS
+      >;
     } else {
-      this.#keyedStore = new KeyedChatStore<MESSAGE_METADATA>();
+      this.#chatStore = createChatStore(
+        defaultChatStoreOptions<MESSAGE_METADATA, DATA_PART_SCHEMAS>({
+          api: '/api/chat',
+          generateId: this.#options.generateId || generateId,
+        })(),
+      );
     }
 
-    this.#options = options;
-    this.messages = options.initialMessages ?? [];
-    this.input = options.initialInput ?? '';
+    this.input = this.#options.initialInput ?? '';
+
+    if (!this.#chatStore.hasChat(this.chatId)) {
+      const messages = $state([]);
+      this.#chatStore.addChat(this.chatId, messages);
+    }
   }
 
   /**
@@ -100,15 +134,20 @@ export class Chat<MESSAGE_METADATA = unknown> {
    * @param options Additional options to pass to the API call
    */
   append = async (
-    message: UIMessage<MESSAGE_METADATA> | CreateUIMessage<MESSAGE_METADATA>,
+    message:
+      | UIMessage<MESSAGE_METADATA, InferUIDataParts<DATA_PART_SCHEMAS>>
+      | CreateUIMessage<MESSAGE_METADATA, InferUIDataParts<DATA_PART_SCHEMAS>>,
     { headers, body }: ChatRequestOptions = {},
   ) => {
-    const messages = this.messages.concat({
-      ...message,
-      id: message.id ?? this.#generateId(),
+    await this.#chatStore.submitMessage({
+      chatId: this.chatId,
+      message,
+      headers,
+      body,
+      onError: this.#options.onError,
+      onToolCall: this.#options.onToolCall,
+      onFinish: this.#options.onFinish,
     });
-
-    return this.#triggerRequest({ messages, headers, body });
   };
 
   /**
@@ -117,18 +156,13 @@ export class Chat<MESSAGE_METADATA = unknown> {
    * new response.
    */
   reload = async ({ 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,
+    await this.#chatStore.resubmitLastUserMessage({
+      chatId: this.chatId,
       headers,
       body,
+      onError: this.#options.onError,
+      onToolCall: this.#options.onToolCall,
+      onFinish: this.#options.onFinish,
     });
   };
 
@@ -136,14 +170,7 @@ export class Chat<MESSAGE_METADATA = unknown> {
    * 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;
-    }
+    this.#chatStore.stopStream({ chatId: this.chatId });
   };
 
   /** Form submission handler to automatically reset input and append a user message */
@@ -159,17 +186,17 @@ export class Chat<MESSAGE_METADATA = unknown> {
 
     if (!this.input && fileParts.length === 0) return;
 
-    const messages = this.messages.concat({
-      id: this.#generateId(),
-      role: 'user',
-      parts: [...fileParts, { type: 'text', text: this.input }],
-    });
-
-    const request = this.#triggerRequest({
-      messages,
-      headers: options.headers,
-      body: options.body,
-    });
+    const request = this.append(
+      {
+        id: this.#generateId(),
+        role: 'user',
+        parts: [...fileParts, { type: 'text', text: this.input }],
+      },
+      {
+        headers: options.headers,
+        body: options.body,
+      },
+    );
 
     this.input = '';
     await request;
@@ -182,114 +209,10 @@ export class Chat<MESSAGE_METADATA = unknown> {
     toolCallId: string;
     result: unknown;
   }) => {
-    updateToolCallResult({
-      messages: this.messages,
+    await this.#chatStore.addToolResult({
+      chatId: this.chatId,
       toolCallId,
-      toolResult: result,
+      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: ChatRequestOptions & {
-      messages: UIMessage<MESSAGE_METADATA>[];
-    },
-  ) => {
-    this.#store.status = 'submitted';
-    this.#store.error = undefined;
-
-    const messages = chatRequest.messages;
-    const messageCount = messages.length;
-    const maxStep = extractMaxToolInvocationStep(
-      getToolInvocations(messages[messages.length - 1]),
-    );
-
-    try {
-      const abortController = new AbortController();
-      this.#abortController = abortController;
-
-      // Optimistically update messages
-      this.messages = messages;
-
-      await callChatApi({
-        api: this.#api,
-        body: {
-          id: this.chatId,
-          messages,
-          ...$state.snapshot(this.#options.body),
-          ...chatRequest.body,
-        },
-        streamProtocol: this.#streamProtocol,
-        credentials: this.#options.credentials,
-        headers: {
-          ...this.#options.headers,
-          ...chatRequest.headers,
-        },
-        abortController: () => abortController,
-        onUpdate: ({ message }) => {
-          this.#store.status = 'streaming';
-
-          const replaceLastMessage =
-            message.id === messages[messages.length - 1].id;
-
-          this.messages = messages;
-          if (replaceLastMessage) {
-            this.messages[this.messages.length - 1] = message;
-          } else {
-            this.messages.push(message);
-          }
-        },
-        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],
-        ) as UIMessage<MESSAGE_METADATA>,
-        messageMetadataSchema: this.#messageMetadataSchema,
-      });
-
-      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 });
-    }
   };
 }

package/src/context-provider.ts

@@ -1,4 +1,5 @@
-import { KeyedChatStore, setChatContext } from './chat-context.svelte.js';
+import { defaultChatStoreOptions, type ChatStore } from 'ai';
+import { createChatStore, setChatStoreContext } from './chat-store.svelte.js';
 import {
   KeyedCompletionStore,
   setCompletionContext,
@@ -8,9 +9,8 @@ import {
   setStructuredObjectContext,
 } from './structured-object-context.svelte.js';
 
-export function createAIContext() {
-  const chatStore = new KeyedChatStore();
-  setChatContext(chatStore);
+export function createAIContext(chatStore?: ChatStore) {
+  createChatStoreContext(chatStore);
 
   const completionStore = new KeyedCompletionStore();
   setCompletionContext(completionStore);
@@ -18,3 +18,14 @@ export function createAIContext() {
   const objectStore = new KeyedStructuredObjectStore();
   setStructuredObjectContext(objectStore);
 }
+
+export function createChatStoreContext(chatStore?: ChatStore) {
+  setChatStoreContext(
+    chatStore ??
+      createChatStore(
+        defaultChatStoreOptions({
+          api: '/api/chat',
+        })(),
+      ),
+  );
+}

package/src/index.ts

@@ -13,3 +13,5 @@ export {
 export { Completion, type CompletionOptions } from './completion.svelte.js';
 
 export { createAIContext } from './context-provider.js';
+
+export { createChatStore } from './chat-store.svelte.js';

package/src/tests/chat-synchronization.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+  import { createChatStore } from '../chat-store.svelte.js';
   import { Chat } from '../chat.svelte.js';
+  import { defaultChatStoreOptions } from 'ai';
   import { createAIContext } from '../context-provider.js';
 
   let { chatId }: { chatId?: string } = $props();
 
-  createAIContext();
-  const chat1 = new Chat({ chatId });
-  const chat2 = new Chat({ chatId });
+  createAIContext(
+    createChatStore(defaultChatStoreOptions({ api: '/api/chat' })()),
+  );
+  const chat1 = new Chat(() => ({ chatId }));
+  const chat2 = new Chat(() => ({ chatId }));
 
   export { chat1, chat2 };
 </script>

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.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');

package/src/chat-context.svelte.ts

@@ -1,28 +0,0 @@
-import type { JSONValue, UIMessage } from 'ai';
-import { createContext, KeyedStore } from './utils.svelte.js';
-
-class ChatStore<MESSAGE_METADATA = unknown> {
-  messages = $state<UIMessage<MESSAGE_METADATA>[]>([]);
-  data = $state<JSONValue[]>();
-  status = $state<'submitted' | 'streaming' | 'ready' | 'error'>('ready');
-  error = $state<Error>();
-}
-
-export class KeyedChatStore<MESSAGE_METADATA = unknown> extends KeyedStore<
-  ChatStore<MESSAGE_METADATA>
-> {
-  constructor(
-    value?:
-      | Iterable<readonly [string, ChatStore<MESSAGE_METADATA>]>
-      | null
-      | undefined,
-  ) {
-    super(ChatStore, value);
-  }
-}
-
-export const {
-  hasContext: hasChatContext,
-  getContext: getChatContext,
-  setContext: setChatContext,
-} = createContext<KeyedChatStore>('Chat');