fix: make auto scroll works by zerob13 · Pull Request #1030 · ThinkInAIXYZ/deepchat

zerob13 · 2025-10-19T11:36:09Z

Summary by CodeRabbit

Bug Fixes
- Enhanced auto-scroll behavior in the message list. The component now intelligently scrolls based on user position and message state, preventing unwanted scroll interruptions when reading earlier messages while new content arrives.

coderabbitai · 2025-10-19T11:36:17Z

Walkthrough

The MessageList component's auto-scroll logic has been refactored to use distance-based thresholds. The component now calculates distance to bottom using element bounding information and only triggers auto-scrolling when the user is near the bottom (within AUTO_SCROLL_DISTANCE_PX) and specific conditions are met, such as when the last message is pending or the message list resets.

Changes

Cohort / File(s)	Summary
Auto-scroll logic refactor `src/renderer/src/components/message/MessageList.vue`	Introduced `AUTO_SCROLL_DISTANCE_PX` constant; switched height tracking to use `useElementBounding(messageList)` instead of direct value access; reworked height-change handler to calculate distance to bottom and conditionally scroll based on distance threshold and last message pending state; reworked message-count handler to determine list growth/reset and scroll appropriately while maintaining scroll info.

Sequence Diagram

sequenceDiagram
    participant User
    participant Watcher as Watchers:<br/>Message Height/<br/>Count Changes
    participant Calc as Distance &<br/>State Calc
    participant Scroll as Scroll Handler
    participant DOM as Message List DOM

    Note over Watcher,DOM: Content Height Changes (debounced)
    Watcher->>Calc: Calculate distance to bottom
    alt Distance ≤ AUTO_SCROLL_DISTANCE_PX
        alt Last message is pending
            Calc->>Scroll: Trigger auto-scroll
            Scroll->>DOM: Scroll to bottom
        else
            Calc-->>Watcher: Skip scroll
        end
    else Distance > AUTO_SCROLL_DISTANCE_PX
        Calc-->>Watcher: Skip scroll (user far from bottom)
    end

    Note over Watcher,DOM: Message Count Changes
    Watcher->>Calc: Determine if list growing or resetting
    alt List is resetting
        Calc->>Scroll: Auto-scroll on reset
        Scroll->>DOM: Scroll to bottom
    else List is growing & near bottom
        Calc->>Calc: Check distance to bottom
        alt Distance ≤ AUTO_SCROLL_DISTANCE_PX
            Calc->>Scroll: Auto-scroll
            Scroll->>DOM: Scroll to bottom
        end
    end
    Scroll->>Calc: Update scroll info

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix: improve chat auto-scroll detection with IntersectionObserver #657: Modifies MessageList.vue's auto-scroll detection logic using IntersectionObserver instead of distance/height-based approach.
bugfix: think content scroll issue #1023: Updates MessageList.vue's auto-scroll logic by switching from anchor-based to container-based scroll calculations.
fix: improve auto scroll behavior for fast AI responses #798: Changes auto-scroll behavior in MessageList.vue by adjusting when and how scrollToBottom is called with timing and smoothing flags.

Poem

🐰 Scroll, scroll, scroll with grace!
Distance threshold sets the pace,
Near the bottom, pending waits,
Auto-scroll then celebrates! 📜✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "fix: make auto scroll works" is directly related to the main change in the changeset. The entire modification focuses on reworking auto-scroll logic in the MessageList component, including refactoring how the component handles scrolling on content height changes and message count changes. The title accurately reflects that this PR is a bug fix for auto-scroll functionality, which is the primary objective of the changeset. While the phrasing could be more polished grammatically, it is specific enough to convey the main purpose and is not vague or non-descriptive.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch bugfix/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

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

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/renderer/src/components/message/MessageList.vue (3)
153-153: Consider adding a comment explaining the threshold value.

The 240px threshold works well, but a brief comment explaining the rationale (e.g., "approximately 3-4 lines of text" or "user-visible scroll distance") would improve code maintainability.

190-211: Extract distance-to-bottom calculation to reduce duplication.

The distance calculation logic (lines 194-197) is duplicated in the message count watcher (lines 221-224). Consider extracting it into a helper function for better maintainability:
const getDistanceToBottom = (): number | null => {
  const container = messagesContainer.value
  return container == null
    ? null
    : container.scrollHeight - (container.scrollTop + container.clientHeight)
}
Then use it in both watchers:
-    const container = messagesContainer.value
-    const distanceToBottom =
-      container == null
-        ? null
-        : container.scrollHeight - (container.scrollTop + container.clientHeight)
+    const distanceToBottom = getDistanceToBottom()
Otherwise, the height-change auto-scroll logic is sound: checking pending status and distance threshold prevents unwanted scrolling.

218-237: Message count watcher logic is correct; consider clarifying null handling.

The auto-scroll conditions are well-designed:

Scrolls when messages grow and user is near bottom (preserves user scroll position when far from bottom)

Always scrolls on reset (when message count decreases)

The distance calculation duplication is already noted in the previous comment.

One minor clarity improvement: Line 227's treatment of distanceToBottom == null as nearBottom = true is a reasonable defensive default, but a brief inline comment would make the intent explicit:
// Treat null (container not ready) as near bottom to allow initial scroll
const nearBottom = distanceToBottom == null || distanceToBottom <= AUTO_SCROLL_DISTANCE_PX

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 660bc80 and 114a05e.

📒 Files selected for processing (1)

src/renderer/src/components/message/MessageList.vue (2 hunks)

🧰 Additional context used

📓 Path-based instructions (16)

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/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/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/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

Files:

src/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/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/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.

Use Pinia for frontend state management (do not introduce alternative state libraries)

Files:

src/renderer/src/components/message/MessageList.vue

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/components/message/MessageList.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)

Use PascalCase for TypeScript types and classes

Files:

src/renderer/src/components/message/MessageList.vue

src/renderer/{src,shell,floating}/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components

Files:

src/renderer/src/components/message/MessageList.vue

src/renderer/src/components/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Organize UI components by feature within src/renderer/src/

Files:

src/renderer/src/components/message/MessageList.vue

src/renderer/src/**