feat (svelte): refactor to use `ChatStore` #6329

iteratetograceness · 2025-05-15T04:09:27Z

Background

Refactor @ai-sdk/svelte package to use new ChatStore and ChatTransport

Summary

This PR:

Refactors the existing Svelte Chat class to support new Chat Store approach
Introduces a State Manager (work done by @elliott-with-the-longest-name-on-github) to allow frameworks to uniquely define state + setters w/ their preferred approach

More detailed doc, written by @elliott-with-the-longest-name-on-github found here: https://www.notion.so/vercel/An-Essay-on-ai-sdk-svelte-3-and-ai-5-1fbe06b059c480e1bda6dbf3a613a0a9

As a result of 2, we refactored the React implementation as well to integrate the State Manager, where methods strictly adhere to immutability.

This also sets up the Vue refactor to be quite simple!

Verification

Tasks

Tests have been added / updated (for bug fixes / features)
Documentation has been added / updated (for bug fixes / features)
A patch changeset for relevant packages has been added (for bug fixes / features - run pnpm changeset in the project root)
Formatting issues have been fixed (run pnpm prettier-fix in the project root)

Future Work

Related Issues

packages/svelte/src/chat-context.svelte.ts

packages/svelte/src/chat.svelte.test.ts

packages/svelte/src/completion-context.svelte.ts

packages/svelte/src/chat.svelte.ts

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

iteratetograceness · 2025-05-20T22:34:47Z

examples/sveltekit-openai/src/routes/chat/[id]/+page.svelte

+  import { Chat } from '@ai-sdk/svelte';
+  import { defaultChatStore } from 'ai';
+
+  const chat = new Chat(() => ({


@elliott-with-the-longest-name-on-github the chat class tests pass but i'm seeing funky behavior w/ re-rendering message part changes when running the example!

if you have time to look or if you have time to sync again tomorrow lmk!

seems like under the hood, sveltekit's optimizations for only re-rendering when state changes doesn't account for the deeply nested message parts changes

(for context: chat store's getMessages just returns chat.messages!)

iteratetograceness · 2025-05-20T22:42:13Z

packages/ai/src/ui/chat-store.ts

    if (!this.hasChat(id)) {
-      throw new Error(`chat '${id}' not found`);
+      this.addChat(id, []);
    }


@lgrammel we decided to add this logic to the chat store itself! this resolves a concern w/ the svelte approach where upon switching chats after Chat class is initialized, new chat id's did not exist in the store

packages/svelte/src/chat.svelte.ts

feat: Better multi-framework support for fine-grained / signal-based reactivity systems

iteratetograceness · 2025-05-23T03:16:08Z

packages/ai/core/generate-text/stream-text.ts


    const state = createStreamingUIMessageState({
-      lastMessage,
+      lastMessage: structuredClone(lastMessage),


Moved structuredClone of last message out of createStreamingUIMessageState (explanation in corresponding file)

iteratetograceness · 2025-05-23T03:16:16Z

packages/ai/src/ui/call-chat-api.ts

 }) {
  const state = createStreamingUIMessageState({
-    lastMessage,
+    lastMessage: lastMessage ? structuredClone(lastMessage) : undefined,


Same comment as above

iteratetograceness · 2025-05-23T03:17:26Z

packages/ai/src/ui/process-ui-message-stream.ts

    InferUIDataParts<UI_DATA_PART_SCHEMAS>
  > = isContinuation
-    ? structuredClone(lastMessage)
+    ? lastMessage


Removed because this was breaking the Svelte impl.

Quote from @elliott-with-the-longest-name-on-github:
"The problem is that structuredClone doesn't work on Svelte state (because it's a Proxy, which isn't cloneable)"

iteratetograceness · 2025-05-23T03:19:24Z

packages/svelte/src/tests/chat-synchronization.svelte

-  createAIContext();
-  const chat1 = new Chat({ chatId });
-  const chat2 = new Chat({ chatId });
+  createAIContext(defaultChatStore({ api: '/api/chat' }));


@elliott-with-the-longest-name-on-github I believe we won't need this and the corresponding store context provider anymore, but want to confirm with you!

lgrammel · 2025-05-26T04:27:56Z

packages/ai/src/ui/chat-store.ts

 };

-export class ChatStore<
+export interface ChatStateManagerFactory<


lgrammel · 2025-05-26T04:33:15Z

packages/svelte/package.json

  },
  "peerDependencies": {
-    "svelte": "^5.0.0",
+    "svelte": "^5.31.0",


why is this needed?

## Background Use the new chat store concept in Svelte to increase code reuse and standardize. ## Summary - refactor chat store to allow for react and svelte optimizations - refactor initialization pattern to fix react issue with overrides on render ## Verification - [x] react with tool calls - [x] svelte with tool calls ## Future Work - vue - refine svelte and react implementations ## Related Issues Continues #6329 --------- Co-authored-by: Grace Yun <graceyunn@gmail.com> Co-authored-by: Grace Yun <74513600+iteratetograceness@users.noreply.github.com> Co-authored-by: S. Elliott Johnson <sejohnson@torchcloudconsulting.com>

iteratetograceness · 2025-05-26T17:19:40Z

Closing, changes shipped in #6487

[wip] chat store for svelte

668180b

iteratetograceness changed the base branch from main to v5 May 15, 2025 04:09

iteratetograceness added 8 commits May 15, 2025 00:10

not needed

a6de420

chat store context

899a144

tests

9c7302e

unused

0bc91ae

comment out unused

448055b

tenative: cleanup

0f88923

prettier

39418f8

fix: use chat store sub + granular state

74f1c14

iteratetograceness requested a review from elliott-with-the-longest-name-on-github May 15, 2025 21:06

iteratetograceness and others added 2 commits May 15, 2025 17:12

Merge branch 'v5' into chat-svelte

201cda2

prettier/type

55eea01

iteratetograceness marked this pull request as ready for review May 15, 2025 21:24

iteratetograceness requested a review from lgrammel May 15, 2025 21:24

iteratetograceness and others added 6 commits May 15, 2025 17:30

MORE PRETTIER

7a8e321

ok why is ts failing

7aecc6d

Merge branch 'v5' into chat-svelte

af07d62

type merge conflicts

b780d76

update test snapshots

1c87153

Merge branch 'v5' into chat-svelte

cfed2fd

elliott-with-the-longest-name-on-github reviewed May 20, 2025

View reviewed changes

elliott-with-the-longest-name-on-github and others added 5 commits May 20, 2025 15:05

chore: Use createSubscriber

0c12142

address new transport changes

bd9be18

Update packages/svelte/src/chat-context.svelte.ts

3375d56

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

Update packages/svelte/src/completion-context.svelte.ts

51af9a3

Co-authored-by: Elliott Johnson <sejohnson@torchcloudconsulting.com>

adjust examples

a96e0e1

iteratetograceness commented May 20, 2025

View reviewed changes

prettier, delete old chat context

ff5c463

iteratetograceness commented May 20, 2025

View reviewed changes

packages/svelte/src/chat.svelte.ts Outdated Show resolved Hide resolved

elliott-with-the-longest-name-on-github and others added 8 commits May 21, 2025 17:56

feat: Support other frameworks

cc48808

cleanup

63acfa2

get all builds passing again

8baf0a3

snapshot

8050e94

smol fix

47bf25d

move structuredclone up

837cc20

Merge pull request #2 from iteratetograceness/elliott/chat-svelte

4b5de16

feat: Better multi-framework support for fine-grained / signal-based reactivity systems

Merge branch 'v5' into chat-svelte

5d69999

iteratetograceness commented May 23, 2025

View reviewed changes

smol fixes

a2ba87e

lgrammel reviewed May 26, 2025

View reviewed changes

packages/ai/src/ui/chat-store.ts

};

export class ChatStore<

export interface ChatStateManagerFactory<

Copy link

Collaborator

lgrammel May 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol

lgrammel reviewed May 26, 2025

View reviewed changes

packages/svelte/package.json

},

"peerDependencies": {

"svelte": "^5.0.0",

"svelte": "^5.31.0",

Copy link

Collaborator

lgrammel May 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this needed?

lgrammel mentioned this pull request May 26, 2025

chore (ai): refactor and use chatstore in svelte #6487

Merged

2 tasks

iteratetograceness closed this May 26, 2025

feat (svelte): refactor to use ChatStore #6329

feat (svelte): refactor to use ChatStore #6329

Uh oh!

Conversation

iteratetograceness commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Summary

Verification

Tasks

Future Work

Related Issues

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

iteratetograceness commented May 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat (svelte): refactor to use `ChatStore` #6329

feat (svelte): refactor to use `ChatStore` #6329

iteratetograceness commented May 15, 2025 •

edited

Loading