fix: scroll to bottom #1034

zerob13 · 2025-10-20T06:18:06Z

Summary by CodeRabbit

Release Notes

Improvements
- Enhanced message list auto-scrolling responsiveness with refined scroll behavior.
- Improved scroll-to-bottom functionality for faster, more immediate response times.
- Optimized auto-follow mechanism for better tracking of incoming messages.

coderabbitai · 2025-10-20T06:18:16Z

Walkthrough

Refactors message list auto-scrolling from element-bounding + debounced logic to a resize-observer-based scheduling mechanism. Simplifies scrollToBottom to perform immediate scrolling without smooth behavior and updates the exported updateScrollInfo to use the immediate update variant.

Changes

Cohort / File(s)	Summary
Message List Auto-Scroll Refactor `src/renderer/src/components/message/MessageList.vue`	Replaces `useElementBounding`/`useDebounceFn` with `useResizeObserver`; introduces `shouldAutoFollow` flag and `scheduleScrollToBottom(force)` scheduling mechanism; removes `AUTO_SCROLL_DISTANCE_PX` heuristics in favor of `isAboveThreshold`-driven logic; updates mount lifecycle to use `scheduleScrollToBottom(true)` instead of timeout-based scroll; simplifies message-length watcher to delegate to schedule function.
Scroll Composable Simplification `src/renderer/src/composables/message/useMessageScroll.ts`	Removes async/debounced behavior from `scrollToBottom`; now computes and applies target scrollTop immediately; replaces `updateScrollInfo` export with immediate variant (`updateScrollInfoImmediate`); removes smooth scrolling option from `scrollToMessage`; updates public API parameter naming (`smooth` → `_smooth`).

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ResizeObserver
    participant Scheduler
    participant ScrollHandler
    participant DOM

    Note over ResizeObserver,DOM: New ResizeObserver-based Approach

    User->>DOM: Message added / Container resized
    DOM->>ResizeObserver: trigger resize event
    ResizeObserver->>Scheduler: scheduleScrollToBottom(force)
    Scheduler->>Scheduler: Check shouldAutoFollow / isAboveThreshold
    alt shouldAutoFollow active
        Scheduler->>ScrollHandler: scrollToBottom(force)
        ScrollHandler->>DOM: Set scrollTop immediately
        ScrollHandler->>DOM: updateScrollInfoImmediate()
    else shouldAutoFollow inactive
        Scheduler-->>Scheduler: No-op (skip scroll)
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

The changes span two closely-related files with significant logic transformation: the shift from debounced element-bounding to resize-observer-based scheduling, removal of smooth scrolling, immediate vs. delayed updates, and API surface changes. While the refactoring follows a coherent pattern, the interaction between the two files and the behavioral guarantees (especially around when auto-scroll triggers vs. suppresses) require careful verification.

Possibly related PRs

fix: prevent automatic scroll to bottom after message generation #783: Directly addresses scrollToBottom invocation and scheduling behavior—the related PR removes a post-send scroll call, while this PR refactors the entire scroll scheduling mechanism.
fix: make auto scroll works #1030: Modifies the same auto-scroll heuristics—this PR replaces AUTO_SCROLL_DISTANCE_PX + element-bounding + debounce with resize observer and scheduled logic.
fix: improve message navigation scroll position to show content from top #777: Aligns scrollToMessage target to block start (same change in this PR's useMessageScroll.ts), indicating parallel scroll alignment improvements.

Poem

🐰 The scroll springs back to life so fast,
No debounce delays to hold us last!
Resize observer keeps the flow alive,
Schedules scroll with pride to let chats thrive—
Smooth begone, immediate's the way,
Messages dance at the bottom each day! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 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: scroll to bottom" is directly related to the main changes in this PR. The entire changeset focuses on refactoring and fixing the scroll-to-bottom functionality across two files: MessageList.vue and useMessageScroll.ts. The changes include replacing the auto-scroll mechanism with a resize observer approach, making scroll behavior immediate instead of debounced, and adjusting the scheduling logic. The title is concise, uses a standard commit format ("fix:"), and clearly communicates the primary concern to other developers reviewing the history.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch bugfix/scroll-and-stop

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: 1

🧹 Nitpick comments (3)

src/renderer/src/components/message/MessageList.vue (3)
5-5: Remove duplicate Tailwind class.

pr-12 lg:pr-12 is redundant; keep a single pr-12.
-      class="message-list-container relative flex-1 scrollbar-hide overflow-y-auto w-full h-full pr-12 lg:pr-12"
+      class="message-list-container relative flex-1 scrollbar-hide overflow-y-auto w-full h-full pr-12"
131-131: Auto‑follow scheduler looks good; avoid no‑op call when container is null.

Minor: early‑return without calling scrollToBottomImmediate() when container is absent.
-    if (!container) {
-      scrollToBottomImmediate()
-      shouldAutoFollow.value = true
-      return
-    }
+    if (!container) {
+      shouldAutoFollow.value = true
+      return
+    }
Also applies to: 155-176, 178-183

102-102: Switch to useResizeObserver is appropriate; consider light coalescing.

LGTM. Optional: coalesce rapid resize bursts with a microtask flag to reduce redundant schedules.
let resizePending = false
useResizeObserver(messageList, () => {
  if (resizePending) return
  resizePending = true
  queueMicrotask(() => {
    resizePending = false
    scheduleScrollToBottom()
  })
})
Also applies to: 217-219

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0606781 and a964715.

📒 Files selected for processing (2)

src/renderer/src/components/message/MessageList.vue (5 hunks)
src/renderer/src/composables/message/useMessageScroll.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (19)

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/src/composables/message/useMessageScroll.ts

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/composables/message/useMessageScroll.ts

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/composables/message/useMessageScroll.ts

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/src/composables/message/useMessageScroll.ts

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/src/composables/message/useMessageScroll.ts

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
src/renderer/src/composables/message/useMessageScroll.ts

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

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/components/message/MessageList.vue
src/renderer/src/composables/message/useMessageScroll.ts

**/*.{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/composables/message/useMessageScroll.ts

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