fix(ChatMessages): re-evaluate streaming indicator on each render

[benjamincanac]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

When the server assigns an id to the assistant message (toUIMessageStream({ generateMessageId }), common when persisting messages), the UChatMessages loading indicator stayed visible below the streaming answer for the whole response instead of disappearing once the first content arrived.

The cause was a stale computed. With AI SDK v7, @ai-sdk/vue stores messages in a shallowRef and grows them via in place mutation plus triggerRef, so the array reference and the message objects never change identity. showIndicator reads lastMessage.parts?.length, but that nested read is never tracked, so the computed cached its result on the first streaming render (when a server assigned id has already materialised an empty assistant message) and only recomputed once the status flipped to ready at the end.

The fix turns showIndicator into a plain function evaluated on every render, which ties it to the same re-render that displays the streamed content. This is a v7 only regression: on v6 @ai-sdk/vue uses a deep reactive ref and swaps the array on push, so the computed tracked correctly there, and the function stays correct under both models.

Added a regression test that reproduces the reactivity model (shallowRef plus in place mutation plus triggerRef) and fails against the previous computed.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4974b97d-5109-4df8-a2df-216c6e63f242

📥 Commits

Reviewing files that changed from the base of the PR and between 53e88a4 and a6c1627.

📒 Files selected for processing (2)

• src/runtime/components/ChatMessages.vue
• test/components/ChatMessages.spec.ts

---

📝 Walkthrough

Walkthrough

The showIndicator logic in ChatMessages.vue was changed from a Vue computed property to a plain function, invoked as showIndicator() in the template instead of accessed as a computed reference. The conditional logic determining indicator visibility remains unchanged. A corresponding test was added to ChatMessages.spec.ts that verifies the indicator hides once an assistant message's parts array is populated during a simulated streaming update using shallowRef and triggerRef.

Estimated code review effort: 2 (Simple) | ~10 minutes

Changes

File	Change Summary
src/runtime/components/ChatMessages.vue	Converted showIndicator from computed to a function; updated template to call it
test/components/ChatMessages.spec.ts	Added imports and a new test for indicator hiding once assistant parts stream in

Sequence Diagram(s)

sequenceDiagram
  participant Test
  participant ChatMessages
  participant showIndicator

  Test->>ChatMessages: mount with shallowRef(messages)
  ChatMessages->>showIndicator: showIndicator()
  showIndicator-->>ChatMessages: true (assistant, no parts)
  Test->>Test: mutate message.parts in place
  Test->>ChatMessages: triggerRef + nextTick
  ChatMessages->>showIndicator: showIndicator()
  showIndicator-->>ChatMessages: false (parts present)

Loading

Related issues: None specified.

Related PRs: None specified.

Suggested labels: bug, chat, tests

Suggested reviewers: None specified.

🐰 A rabbit taps its little screen,
Watching streams flow in between,
A function checks each passing part,
And hides the dots with quiet art.
No more computed, just plain and true—
The indicator knows just what to do. 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main fix in ChatMessages and matches the changeset.
Description check	✅ Passed	The description is directly related to the bug fix and regression test in this pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/chat-messages-streaming-indicator

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6673

commit: a6c1627