In sveltekit, Chat cannot switch content based on routing

[NeroBlackstone]

Description

I use Svelte ai sdk 2.0 and I found Chat cannot switch content based on routing, I'm not sure it's a bug or there is a problem with my usage:

Code example

+page.svlete:

<script lang='ts'>
  import { Chat } from '$lib/Chat/chat.svelte';
  import type {TextPart,Message} from 'ai';
  import { generateUUID } from '$lib';
  import { page } from '$app/state';

  const {data} = $props()
  let messages = $derived(data.message)

  const chat = new Chat({
    get id() {
      return page.params.id;
    },
    get initialMessages() {
      return messages as Message[];
    },
    // initialMessages:data.message as Message[],
    generateId:generateUUID,
    sendExtraMessageFields: true,
  })
  $inspect(chat.messages)
</script>

<main>
  page:{page.params.id}<br>
  data:{messages[0].id}<br>
  data:{chat.messages[0].id}<br>
  chat:
  <ul>
    {#each chat.messages as message}
      <li>{message.role}: {message.content}</li>
      {message.id}
      {#each message.parts as part}
        {part.type} <br>
        {(part as TextPart).text}
      {/each}
    {/each}
  </ul>
  <form onsubmit={chat.handleSubmit}>
    <input bind:value={chat.input} />
    <button type="submit">Send</button>
  </form>
  <a href="/1">go 1</a>
  <a href="/2">go 2</a>
  <a href="/3">go 3</a>
</main>

+page.ts

import type { PageLoad } from './$types';

export const load: PageLoad = ({ params }) => {
        return {
            message:[
                {
                  id: params.id,
                  role:'user',
                  content:'message'+params.id,
                }
              ]}

};

and at first it load data well:

but go another page:

AI provider

No response

Additional context

No response

@elliott-with-the-longest-name-on-github Could you please check this?

[aradhya-tiwari]

Can you share code for Chat component ?

[NeroBlackstone]

Can you share code for Chat component ?

Hi, hello, Chat is my ai sdk svelte fork, with #5252 patch, no any other edits. You could use official ai sdk svelte reproduce it.

Do you have any solution for this problem?

[elliott-with-the-longest-name-on-github]

initialMessages is only respected the first time the class is created. There are two solutions to your problem:

1. Use an $effect to synchronize the messages:

const chat = new Chat({
  get id() {
    return id;
  }
});
$effect.pre(() => {
  chat.messages = data.messages
})

2. Create the class instance as a $derived:

const chat = $derived(new Chat(...));

I prefer the latter; the only downside is that creating a new chat instance will destroy the old one, so if you're relying on the Chat instance to cache messages from other previous chat IDs, that won't work.

[NeroBlackstone]

initialMessages is only respected the first time the class is created. There are two solutions to your problem:

1. Use an $effect to synchronize the messages:

const chat = new Chat({
get id() {
return id;
}
});
$effect.pre(() => {
chat.messages = data.messages
})
2. Create the class instance as a $derived:

const chat = $derived(new Chat(...));

I prefer the latter; the only downside is that creating a new chat instance will destroy the old one, so if you're relying on the Chat instance to cache messages from other previous chat IDs, that won't work.

Thank you very much, very useful! This is worth documenting.

I won't close this issue. Maybe I will make a PR one day. But I'm busy recently.

Thank you again. @elliott-with-the-longest-name-on-github