fix: improve auto scroll behavior for fast AI responses #798
Conversation
WalkthroughImplements conditional auto-scroll at stream end in ChatView using nextTick and aboveThreshold; updates MessageList to support smooth/instant scroll via scrollToBottom(smooth = false), adds null guards, and defers certain scrolls with nextTick. The bottom button now triggers smooth scrolling. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant ChatView
participant MessageList
participant DOM as ScrollAnchor/DOM
rect rgba(230,245,255,0.5)
note over ChatView: Stream completes (STREAM_EVENTS.END)
ChatView->>ChatView: nextTick(...)
ChatView->>MessageList: if (!aboveThreshold) scrollToBottom(false)
MessageList->>DOM: scrollIntoView({ behavior: 'instant' })
end
rect rgba(235,255,235,0.5)
User->>MessageList: Click "Scroll to bottom"
MessageList->>MessageList: scrollToBottom(true)
MessageList->>DOM: scrollIntoView({ behavior: 'smooth' })
end
rect rgba(255,245,230,0.5)
note over MessageList: Height change detected
MessageList->>MessageList: nextTick(() => scrollToBottom())
MessageList->>DOM: scrollIntoView({ behavior: 'instant' })
end
alt Anchor missing
MessageList-->>MessageList: Guard prevents scroll call
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/renderer/src/components/message/MessageList.vue (2)
79-79: Avoid creating a new function on each render in the template.Call the method directly to reduce needless allocations.
- @click="() => scrollToBottom(true)" + @click="scrollToBottom(true)"
333-336: Remove redundant nextTick; scrollToBottom already defers.You’re wrapping a function that itself wraps in nextTick, causing double deferral.
- nextTick(() => { - scrollToBottom() - }) + scrollToBottom()
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/renderer/src/components/ChatView.vue(2 hunks)src/renderer/src/components/message/MessageList.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
src/renderer/src/**/*
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/**/*.{vue,ts,js,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)
渲染进程代码放在
src/renderer
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)
Use scoped styles to prevent CSS conflicts between components
src/renderer/src/**/*.vue: Follow existing component patterns when creating new UI components
Ensure responsive design with Tailwind CSS for new UI components
Add proper error handling and loading states to UI components
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/**/*.{vue,ts}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
Implement lazy loading for routes and components.
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/**/*.{ts,vue}
📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)
src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.
src/renderer/**/*.{ts,vue}: Use Pinia for frontend state management
From renderer to main, call presenters via the usePresenter.ts composable
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use English for all logs and comments
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/**/*.vue: Use Vue 3 Composition API for all components
Use Tailwind CSS with scoped styles for component styling
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
src/renderer/src/**
📄 CodeRabbit inference engine (CLAUDE.md)
Organize UI components by feature under src/renderer/src/
Files:
src/renderer/src/components/ChatView.vuesrc/renderer/src/components/message/MessageList.vue
🧠 Learnings (2)
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Use <script setup> syntax for concise component definitions.
Applied to files:
src/renderer/src/components/ChatView.vue
📚 Learning: 2025-07-23T00:45:57.322Z
Learnt from: CR
PR: ThinkInAIXYZ/deepchat#0
File: .cursor/rules/vue-shadcn.mdc:0-0
Timestamp: 2025-07-23T00:45:57.322Z
Learning: Applies to src/renderer/**/*.{vue} : Leverage ref, reactive, and computed for reactive state management.
Applied to files:
src/renderer/src/components/ChatView.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-check (x64)
🔇 Additional comments (2)
src/renderer/src/components/message/MessageList.vue (1)
281-289: Use a standards-compliant scroll behavior ('auto' instead of non-standard 'instant').
scrollIntoViewonly supports 'auto' | 'smooth'. 'instant' may be ignored. Use 'auto' to disable smoothing.- scrollAnchor.value.scrollIntoView({ - behavior: smooth ? 'smooth' : 'instant', - block: 'end' - }) + scrollAnchor.value.scrollIntoView({ + behavior: smooth ? 'smooth' : 'auto', + block: 'end' + })Likely an incorrect or invalid review comment.
src/renderer/src/components/ChatView.vue (1)
24-24: LGTM: nextTick import is necessary for the scheduled auto-scroll.
| nextTick(() => { | ||
| if (messageList.value && !messageList.value.aboveThreshold) { | ||
| scrollToBottom(false) | ||
| } | ||
| }) |
There was a problem hiding this comment.
Bug: aboveThreshold is a Ref — need .value to read it.
As written, the condition always treats the ref object as truthy, preventing auto-scroll.
- nextTick(() => {
- if (messageList.value && !messageList.value.aboveThreshold) {
- scrollToBottom(false)
- }
- })
+ nextTick(() => {
+ if (messageList.value && !messageList.value.aboveThreshold?.value) {
+ scrollToBottom(false)
+ }
+ })📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| nextTick(() => { | |
| if (messageList.value && !messageList.value.aboveThreshold) { | |
| scrollToBottom(false) | |
| } | |
| }) | |
| nextTick(() => { | |
| if (messageList.value && !messageList.value.aboveThreshold?.value) { | |
| scrollToBottom(false) | |
| } | |
| }) |
🤖 Prompt for AI Agents
In src/renderer/src/components/ChatView.vue around lines 71–75, the code checks
messageList.value.aboveThreshold but aboveThreshold itself is a Ref, so the
current condition always treats the ref object as truthy and prevents
auto-scroll; update the condition to read the inner value (e.g. verify
messageList.value exists and use messageList.value.aboveThreshold.value) and
keep the null/undefined guard (for example: if (messageList.value &&
!messageList.value.aboveThreshold.value) scrollToBottom(false)); ensure you also
defensively check that aboveThreshold exists before accessing .value.
improve auto scroll behavior for fast AI responses
CleanShot.2025-08-27.at.19.49.40.mp4
Summary by CodeRabbit
New Features
Bug Fixes