From b3a6edb704962d41bc938392f6fd08c5a20b206f Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Tue, 20 May 2025 09:47:40 +0700
Subject: [PATCH] chore: reduce state update to prevent glitchy scroll to
 bottom (#5026)

---
 web-app/src/lib/model.spec.ts            | 2 +-
 web-app/src/routes/threads/$threadId.tsx | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/web-app/src/lib/model.spec.ts b/web-app/src/lib/model.spec.ts
index f09dd7c95..2f4598f3b 100644
--- a/web-app/src/lib/model.spec.ts
+++ b/web-app/src/lib/model.spec.ts
@@ -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')
 })
diff --git a/web-app/src/routes/threads/$threadId.tsx b/web-app/src/routes/threads/$threadId.tsx
index b02e3183e..01b494eae 100644
--- a/web-app/src/routes/threads/$threadId.tsx
+++ b/web-app/src/routes/threads/$threadId.tsx
@@ -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) {