chore: reduce state update to prevent glitchy scroll to bottom (#5026)

This commit is contained in:
Louis 2025-05-20 09:47:40 +07:00 committed by GitHub
parent 9047d0df4f
commit b3a6edb704
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 7 deletions

View File

@ -2,5 +2,5 @@ import { expect, test } from 'vitest'
import { normalizeProvider } from './models'
test('provider name should be normalized', () => {
expect(normalizeProvider('llama.cpp')).toBe('llama-cpp')
expect(normalizeProvider('llama.cpp')).toBe('cortex')
})

View File

@ -45,6 +45,7 @@ function ThreadDetail() {
)
const scrollContainerRef = useRef<HTMLDivElement>(null)
const isFirstRender = useRef(true)
const messagesCount = useMemo(() => messages?.length ?? 0, [messages])
useEffect(() => {
if (currentThreadId !== threadId) {
@ -103,16 +104,12 @@ function ThreadDetail() {
useEffect(() => {
// Only auto-scroll when the user is not actively scrolling
// AND either at the bottom OR there's streaming content
if (
!isUserScrolling &&
(streamingContent || isAtBottom) &&
messages?.length
) {
if (!isUserScrolling && (streamingContent || isAtBottom) && messagesCount) {
// Use non-smooth scrolling for auto-scroll to prevent jank
scrollToBottom(false)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [streamingContent, isUserScrolling, messages])
}, [streamingContent, isUserScrolling, messagesCount])
const scrollToBottom = (smooth = false) => {
if (scrollContainerRef.current) {