Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web-app/src/lib/model.spec.ts
View File

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

9
web-app/src/routes/threads/$threadId.tsx
View File

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