status is not reactive with vue and doesn't update

[cosbgn]

Description

Reproduction: Simply send a message and switch tab or window. Status will forever be "streaming".

2025-05-02_13.50.34.mp4

code:

<template>
  <div class="flex flex-col w-full max-w-md py-24 mx-auto stretch">
    <div v-for="m in showMessages" :key="m.id" class="whitespace-pre-wrap">
      {{ m.role === 'user' ? 'User: ' : 'AI: ' }}
      {{ m.content }}
    </div>

	<div>
		Status is: {{ status }}
	</div>
    <form @submit.prevent="send">
      <input
        class="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
        v-model="input"
        placeholder="Say something..."
      />
    </form>
  </div>
</template>

<script setup lang="ts">

import { useChat } from '@ai-sdk/vue';
const { messages, input, status, append } = useChat();
const api_key = ref(null)
const send = () => { // I use send() because it allows me to edit the body
	if (!api_key.value){
		api_key.value = prompt("Please add your openai API key (it's not saved)")
	}
	append({ role: 'user', content:input.value }, { body: { thread_id: "something something", api_key:api_key.value } })
	input.value = null
}
const showMessages = computed(() => messages.value.filter(mx => mx.content.length))
</script>

[rennokki]

I think useChat() allows you to set useChat({ id: "some-key" }) as a unique identifier:

`id`: A unique identifier for the chat. If not provided, a random one will be generated. When provided, the useChat hook with the same id will have shared states across components.

[cosbgn]

@rennokki this isn't across components. This is a single component which doesn't correctly update status

[pavelsvitek]

+1 I'm seeing this issue as well, I was just about to report it. This is extremely unfortunate and it may appear.

I wasn't sure which cases it happens in, but I can confirm that it also happens for me when I switch to other tab and then to streaming tab!

I would really appreciate somebody experienced from VueJS community looking at this.

Brave v1.76.81
ai-sdk/vuejs@v1.2.11

[pavelsvitek]

@lgrammel here's what I got from o4 (I started digging when I saw the SWR usage):

It turns out the culprit is that we were leaning on SWRV to hold our “status” state, but because we never actually re-fetched it from a real endpoint SWRV’s internals don’t always fire a proper reactive update—especially if you switch tabs or lose focus while you’re mid-stream. The simplest fix is: ditch SWRV for status and just use a plain Vue ref. That way you have full control over when and how it updates.

  // ↓ instead, use a plain ref…
  const status = ref<'submitted' | 'streaming' | 'ready' | 'error'>('ready');

  // Wrap a “mutate” that always resolves – so the rest of the code can stay the same:
  const mutateStatus = (
    updater: ('submitted' | 'streaming' | 'ready' | 'error')
           | ((current: typeof status.value) => typeof status.value)
  ): Promise<typeof status.value> => {
    status.value =
      typeof updater === 'function'
        ? (updater as (s: typeof status.value) => typeof status.value)(status.value)
        : updater;
    return Promise.resolve(status.value);
  };

Whole analyses
https://chatgpt.com/share/681c77c5-f7c0-800d-b23d-0d0d1f5155ec