fix(ChatMessages): use MutationObserver for auto-scroll during streaming

[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

📝 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: e8899013-2882-4e99-92db-d1517f533c93

📥 Commits

Reviewing files that changed from the base of the PR and between 51858ee and 1ad65cf.

📒 Files selected for processing (2)

• playgrounds/nuxt/app/pages/chat.vue
• src/runtime/components/ChatMessages.vue

---

📝 Walkthrough

Walkthrough

The changes add a new should-auto-scroll boolean prop to enable automatic scrolling behavior in the chat messages component. The implementation is refactored to use a mutation observer pattern instead of relying solely on watch handlers. When mounted, a mutation observer watches for DOM changes and triggers scroll-to-bottom behavior based on the auto-scroll prop and streaming status. The watch handler is simplified to perform a position check when streaming status changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The PR description is a template with no custom content provided by the author, making it impossible to assess whether meaningful context about the change is communicated.	Add a description explaining why MutationObserver was needed, what problem it solves, and any relevant context about the auto-scroll behavior changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: using MutationObserver for auto-scroll behavior in ChatMessages during streaming, which matches the core implementation changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/chat-messages-auto-scroll

---

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 and usage tips.}

[pkg-pr-new]

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

commit: 1ad65cf