fix (ai-sdk/vue): status reactivity

[nicoalbanese]

Background

Bug with Vue that led to status not updating when tab was changed.

Summary

Changes status from using SWR to using Vue ref.

Verification

Tested locally.

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)

Related Issues

Fixes #6110.

[lgrammel]

Can you add tests that reproduce the bug?

[pavelsvitek]

@nicoalbanese thanks for the prompt action!

I'm wondering - shouldn't the status be specific for each chatId separately?

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

// use-chat.ts
import { ref, Ref } from 'vue'

type Status = 'submitted' | 'streaming' | 'ready' | 'error'

// 1. A module‐scoped map from chatId → status ref
const statusMap = new Map<string, Ref<Status>>()

function getStatusRef(chatId: string): Ref<Status> {
  if (!statusMap.has(chatId)) {
    // initialize to “ready” the first time we see this chatId
    statusMap.set(chatId, ref<Status>('ready'))
  }
  return statusMap.get(chatId)!
}

export function useChat({ chatId, ... }) {
  // ... your existing messages, input, append, etc.

  // 2. grab the per‐chat ref
  const status = getStatusRef(chatId)

  // 3. your “mutateStatus” shim from before
  const mutateStatus = (
    updater: Status | ((current: Status) => Status)
  ): Promise<Status> => {
    status.value =
      typeof updater === 'function'
        ? (updater as (s: Status) => Status)(status.value)
        : updater
    return Promise.resolve(status.value)

 ...

[pavelsvitek]

@nicoalbanese I'm not use if my previous suggestion (dynamically creating multiple ref() instances) would work as I'm not in trenches of VueJS anymore, but here's alternative approach which should work.

Instead of creating multiple ref() instances, you could only have one and it holds all statuses in a map.

import { reactive, toRef } from 'vue'

const statusState = reactive<Record<string, Status>>({})

function getStatusRef(chatId: string) {
  if (!(chatId in statusState)) {
    statusState[chatId] = 'ready'
  }
  // toRef makes a ref view into a property of a reactive object
  return toRef(statusState, chatId)
}

[nicoalbanese]

hey @pavelsvitek - thanks for the help here! Had a working solution but took a little bit to get a good test written to repro. Should be good now!