Option to disable auto scroll functionality #6465
Conversation
|
@gq97a6 is attempting to deploy a commit to the NextChat Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis change introduces a user-configurable "Auto Scroll" feature for the chat interface. The scroll-to-bottom logic in the chat component is refactored for simplicity, removing the custom Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Settings
participant Config
participant Chat
User->>Settings: Toggles AutoScroll checkbox
Settings->>Config: Updates enableAutoScroll property
User->>Chat: Focuses input / submits message
Chat->>Config: Checks enableAutoScroll
alt enableAutoScroll is true
Chat->>Chat: Scrolls to bottom
else enableAutoScroll is false
Chat->>Chat: No auto-scroll
end
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
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: 2
🧹 Nitpick comments (3)
app/components/chat.tsx (3)
1049-1061: Duplicate scroll trigger afterdoSubmit
autoScrollChatToBottom()is called twice:
- in the
thencallback afterchatStore.onUserInput(...)- again immediately after resetting local state.
Because both calls run unconditionally and internally check the same
config.enableAutoScrollflag, the second invocation does not add value but still schedules an extrarequestAnimationFrame, resulting in redundant work (and two layout thrashes).- chatStore.onUserInput(userInput, attachImages).then(() => { - setIsLoading(false); - autoScrollChatToBottom(); - }); - - ... - autoScrollChatToBottom(); + chatStore.onUserInput(userInput, attachImages).then(() => { + setIsLoading(false); + autoScrollChatToBottom(); // keep a single, well-timed scroll + });
1362-1376: Minor: avoid passing negative index explicitly
scrollChatToBottomsetssetMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);and relies on the clamping logic inside
setMsgRenderIndexto normalise negative values.
For clarity (and to avoid any future refactor accident) compute the clamped index before the setter:- setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE); + const start = Math.max(0, renderMessages.length - CHAT_PAGE_SIZE); + setMsgRenderIndex(start);
2038-2041: Respect “auto scroll disabled” for click/focus
onFocusandonClickalways invokeautoScrollChatToBottom, but that helper internally checksconfig.enableAutoScroll.
This is fine logically, yet it still mounts two listeners that will be no-ops when the feature is off.
For cleanliness you could attach these handlers conditionally:- onFocus={autoScrollChatToBottom} - onClick={autoScrollChatToBottom} + onFocus={config.enableAutoScroll ? autoScrollChatToBottom : undefined} + onClick={config.enableAutoScroll ? autoScrollChatToBottom : undefined}Not critical, but it avoids needless function calls when auto-scroll is disabled.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
app/components/chat.tsx(8 hunks)app/components/settings.tsx(1 hunks)app/locales/ar.ts(1 hunks)app/locales/bn.ts(1 hunks)app/locales/cn.ts(1 hunks)app/locales/cs.ts(1 hunks)app/locales/da.ts(1 hunks)app/locales/de.ts(1 hunks)app/locales/en.ts(2 hunks)app/locales/es.ts(1 hunks)app/locales/fr.ts(1 hunks)app/locales/id.ts(1 hunks)app/locales/it.ts(1 hunks)app/locales/jp.ts(1 hunks)app/locales/ko.ts(1 hunks)app/locales/no.ts(1 hunks)app/locales/pt.ts(1 hunks)app/locales/ru.ts(1 hunks)app/locales/sk.ts(1 hunks)app/locales/tr.ts(1 hunks)app/locales/tw.ts(1 hunks)app/locales/vi.ts(1 hunks)app/store/config.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
app/components/chat.tsx (2)
app/constant.ts (1)
CHAT_PAGE_SIZE(832-832)app/client/api.ts (1)
config(181-181)
🔇 Additional comments (21)
app/locales/tw.ts (1)
210-213: Localization entry looks correct.The Traditional Chinese translations for
AutoScrollTitle and SubTitle align with other locales and follow existing formatting.app/locales/tr.ts (1)
203-207: Turkish localization validated.The new
AutoScrollentry matches the English key semantics and indentation.app/locales/ko.ts (1)
202-206: Korean translation is accurate.The
AutoScrollTitle and SubTitle convey the feature correctly and match other locale patterns.app/locales/jp.ts (1)
203-207: Japanese localization approved.The
AutoScrollstrings are consistent with the existing style and correctly describe the feature.app/locales/cs.ts (1)
203-207: Add AutoScroll localization entry
The newAutoScrollkey and itsTitle/SubTitlevalues align with the existing pattern underSettingsand are consistent with other locales.app/locales/vi.ts (1)
203-207: Add AutoScroll localization entry
TheAutoScrollentry follows the same structure as other settings, ensuring consistent UI text for Vietnamese users.app/locales/it.ts (1)
212-216: Add AutoScroll localization entry
The Italian translation forAutoScrollis correctly added with matching keys and formatting.app/locales/sk.ts (1)
203-207: Add AutoScroll localization entry
The SlovakAutoScrollsection is properly inserted, mirroring the pattern used in other locales.app/locales/no.ts (1)
209-213: Add AutoScroll localization entry
The NorwegianAutoScrollblock is added with correct indentation and consistent naming.app/locales/id.ts (1)
204-208: New AutoScroll locale entry looks correct and consistent.The
AutoScrollkey and itsTitle/SubTitlevalues are properly added underSettings, matching the structure of other locale entries.app/locales/es.ts (1)
211-215: New AutoScroll localization is accurate and consistent.The Spanish translations for
TitleandSubTitlealign with other locales and follow existing formatting conventions.app/locales/fr.ts (1)
210-214: French AutoScroll entry is well-formed.The new
AutoScrollblock matches the style of neighboring settings and the translation is clear.app/locales/pt.ts (1)
202-206: Portuguese AutoScroll entry is correctly inserted.The key, title, and subtitle follow the project’s locale structure and the translation reads naturally.
app/locales/cn.ts (1)
223-226: Chinese AutoScroll entry is properly added.This new localization aligns with other languages and fits the existing indentation and format.
app/locales/ar.ts (1)
202-206: New AutoScroll localization entry looks correct.
The Arabic translation for theAutoScrollsetting is well-formulated, aligns with the feature description, and matches the formatting/style of adjacent entries.app/locales/de.ts (1)
208-212: New AutoScroll localization entry looks correct.
The German strings forAutoScrollare consistent with other locales and follow existing translation conventions.app/locales/bn.ts (1)
203-207: New AutoScroll localization entry looks correct.
The Bengali translation for theAutoScrollsetting is accurate, clear, and matches the formatting of surrounding entries.app/locales/ru.ts (1)
205-209: New AutoScroll localization entry looks correct.
The Russian strings forAutoScrollare properly added and consistent with the rest of the locale.app/locales/da.ts (1)
222-226: New AutoScroll localization entry looks correct.
The Danish translation for theAutoScrollsetting is accurately inserted and maintains consistency with other locale entries.app/components/settings.tsx (1)
1702-1718: UI control looks good – remember to localiseThe checkbox correctly binds to
config.enableAutoScroll, mirrors the surrounding pattern, and includes adata-testid.Just double-check that every non-English locale gets the new
Settings.AutoScrollentries; otherwise users running other languages will see blank labels.app/locales/en.ts (1)
225-229: Entry added correctlyThe
AutoScrolltitle and subtitle are well phrased and match the behaviour implemented in the component. No issues spotted.
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
Refactored auto scroll.
Added auto scroll configuration to settings.
Added locales for auto scroll configuration.
📝 补充信息 | Additional Information
Chat is ALWYAS automatically scrolled to the bottom when:
Chat is automatically scrolled to the bottom when AUTO SCROLL ENABLED IN CONFIG and when:
Summary by CodeRabbit