How do I update the useChat config?

[jonasfroeller]

I am both new to nuxt and vue and I am currently writing a chatapp using nuxt, where you should be able to chat with different models. I currently rerender the whole component everytime I select a different model, by passing the selected model as property.
Is there a better way to do this?

[lgrammel]

What do you mean by updating the "useChat" config?

[jonasfroeller]

Recreating the composable with a new configuration, passed to it. I tried it, by passing a reactive value to it, but that didn't work.

[NeroBlackstone]

Same question... I think I need to reactively pass a value into the useChat option and get the updated useChat return value. I'm using svelte 5, does anyone know how to do this?

[NeroBlackstone]

If I create a $effect for useChat, I can't get return value of it.

[NeroBlackstone]

$derived(useChat{}) still not work.

[NeroBlackstone]

In another word, how to allow the useChat options react to value changes, can't figure out how to make it in svlete 5

[NeroBlackstone]

@elliott-with-the-longest-name-on-github Hi, It looks like you are maintaining the svelte ai sdk. Could you please answer this question? Thank you very much!! ...

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

Hey @NeroBlackstone!

You should be able to pass a reference into useChat:

<script>
  let { id } = $props();

  const chat = useChat({
    get id() {
      return id;
    }
  });
</script>

This way, useChat will always have the most up-to-date reference to your variable. (If you pass it like useChat({ id }), it's copied by value, so you lose the reference.)

If that doesn't work, proper modern Svelte 5 support is coming out very shortly (#5105), and that definitely works this way.