feat: Chat scroll performance optimization with configurable placeholder sensitivity #50

BP602 · 2025-10-02T03:27:37Z

Summary

Adds user-configurable scroll placeholder sensitivity control (0-2000, step 50)
Optimizes Message component rendering performance with React.memo and memoization
Improves scroll performance during high-velocity scrolling

Changes

Settings UI

New "Scroll Placeholder Sensitivity" slider in Chatroom settings
Range: 0 (disabled) to 2000 (very sensitive)
Default: 300 (from DEFAULT_SCROLL_SEEK_VELOCITY)
Real-time value display shows current threshold or "Off"

Message Component Performance

Wrapped component with React.memo to prevent unnecessary re-renders
Converted all event handlers to useCallback for stable references
Memoized expensive calculations:
- userStyle lookup from cosmetics store
- isSupportEvent type checking
- shouldHighlightMessage logic
Moved badge calculations to parent (MessagesHandler) for better prop stability
Reorganized imports and simplified conditional expressions

Constants

Added DEFAULT_SCROLL_SEEK_VELOCITY = 300 constant

Test Plan

Verify scroll placeholder sensitivity slider appears in Settings > Chatrooms
Test slider range (0-2000) with correct step increments (50)
Confirm setting value to 0 disables placeholders
Test various sensitivity values during fast scrolling
Verify Message component renders correctly with optimizations
Check that message interactions (copy, reply, pin, delete) still work
Verify badges (KickTalk, Donator) display correctly
Test context menus and emote right-click functionality
Confirm highlight/mention detection still works

Summary by CodeRabbit

New Features
- Added “Scroll Placeholder Sensitivity” setting with slider control to tune scroll-seek behavior.
- Enhanced message list with scroll-seek placeholders for smoother, more responsive scrolling during fast scrolls.
- Introduced per-user badge rendering, including donor badges, in message items.
Refactor
- Optimized message rendering with memoization and streamlined handlers to reduce unnecessary re-renders and improve UI responsiveness.
- Adjusted scrolling configuration for smoother follow behavior and improved viewport handling.

…essage component - Add configurable scroll placeholder sensitivity slider in settings (0-2000, default 300) - Allow users to disable placeholders entirely by setting sensitivity to 0 - Optimize Message component with React.memo to prevent unnecessary re-renders - Convert event handlers to useCallback for stable references - Memoize userStyle, isSupportEvent, and shouldHighlightMessage calculations - Move badge calculations (kickTalkBadges, donatorBadges) to MessagesHandler for better performance - Reorganize imports and simplify conditional expressions - Add DEFAULT_SCROLL_SEEK_VELOCITY constant

coderabbitai · 2025-10-02T03:27:44Z

Walkthrough

Adds a configurable scroll-seek velocity setting and placeholder UI, wires scroll-seek configuration into Virtuoso with a placeholder component, introduces per-user badge maps passed to messages, and refactors Message to a memoized component with prop updates and optimized handlers. Adds DEFAULT_SCROLL_SEEK_VELOCITY constant used by settings and message list behavior.

Changes

Cohort / File(s)	Summary
Scroll Seek Settings `src/renderer/src/components/Dialogs/Settings/Sections/General.jsx`, `utils/constants.js`	Adds DEFAULT_SCROLL_SEEK_VELOCITY (700). Introduces “Scroll Placeholder Sensitivity” slider (0–2000) controlling chatrooms.scrollSeekVelocityThreshold with clamping, defaulting to the constant, and active state when deviating from default.
Message Component Refactor `src/renderer/src/components/Messages/Message.jsx`	Renames component to MessageComponent and exports memo(MessageComponent, areEqual). Replaces existingKickTalkBadges with kickTalkBadges; adds donatorBadges; removes donators. Memoizes styling, handlers, and highlight logic; adds right-click emote handling and support-event rendering updates.
Messages List Scroll-Seek & Badges `src/renderer/src/components/Messages/MessagesHandler.jsx`	Adds ScrollSeekPlaceholder component. Implements scrollSeekConfiguration with velocity threshold and caps; integrates with Virtuoso (smooth follow, adjusted overscan/viewport). Introduces per-user kickTalkBadgeMap and donatorBadgeMap; passes derived badges to each message.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Settings as Settings (General.jsx)
  participant Store as SettingsData
  participant Handler as MessagesHandler.jsx
  participant List as Virtuoso
  participant UI as ScrollSeekPlaceholder
  participant Msg as MessageComponent

  User->>Settings: Adjust "Scroll Placeholder Sensitivity" slider
  Settings->>Store: onChange(chatrooms.scrollSeekVelocityThreshold)
  Note right of Store: Defaults to DEFAULT_SCROLL_SEEK_VELOCITY if unset

  Store-->>Handler: read scrollSeekVelocityThreshold
  Handler->>List: set scrollSeekConfiguration (enter/exit, velocity cap)
  User->>List: Fast scroll
  List->>UI: Render placeholder during seek
  List->>Msg: Render full message when seek ends

sequenceDiagram
  autonumber
  participant Handler as MessagesHandler.jsx
  participant Maps as Badge Maps
  participant Msg as MessageComponent

  Handler->>Maps: Build kickTalkBadgeMap, donatorBadgeMap
  Handler->>Msg: itemContent(..., { kickTalkBadges, donatorBadges })
  Msg->>Msg: Memoized render (areEqual comparator)
  Note right of Msg: Uses memoized styling, highlight checks, handlers

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

I tuned the winds of scroll and speed,
A placeholder sails where lists proceed.
Badges gleam on names that pass,
Memoed whispers through the glass.
Constants set, the sliders sing—
Hop, hop—smooth streams in spring. 🐇✨

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 title clearly summarizes the primary change by indicating both the chat scroll performance optimizations and the introduction of a configurable placeholder sensitivity setting, which aligns precisely with the feature additions and refactorings described in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/chat-scroll-performance

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

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e76d55e and c712c1a.

📒 Files selected for processing (4)

src/renderer/src/components/Dialogs/Settings/Sections/General.jsx (3 hunks)
src/renderer/src/components/Messages/Message.jsx (8 hunks)
src/renderer/src/components/Messages/MessagesHandler.jsx (4 hunks)
utils/constants.js (1 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

**