From 519115768478387ff3d2c1944b53529f13ab2094 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Wed, 2 Apr 2025 17:54:55 -0700 Subject: [PATCH] Content update --- src/ketr-chat/src/App.tsx | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/src/ketr-chat/src/App.tsx b/src/ketr-chat/src/App.tsx index 66dab12..e34148a 100644 --- a/src/ketr-chat/src/App.tsx +++ b/src/ketr-chat/src/App.tsx @@ -542,6 +542,11 @@ const App = () => { if (prev <= 1) { clearInterval(timerRef.current); timerRef.current = null; + if (isScrolledToBottom()) { + setTimeout(() => { + scrollToBottom(); + }, 50) + } return 0; } return prev - 1; @@ -567,8 +572,8 @@ const App = () => { // Height of the visible window const clientHeight = document.documentElement.clientHeight; - // If we're at the bottom (allowing a small buffer of 5px) - return scrollTop + clientHeight >= scrollHeight - 5; + // If we're at the bottom (allowing a small buffer of 16px) + return scrollTop + clientHeight >= scrollHeight - 16; }, []); const scrollToBottom = useCallback(() => { @@ -971,7 +976,7 @@ const App = () => { const userMessage = [{ role: 'user', content: query }]; - let scrolledToBottom = isScrolledToBottom(); + let scrolledToBottom; // Add user message to conversation const newConversation: MessageList = [ @@ -983,9 +988,6 @@ const App = () => { // Clear input setQuery(''); - // setTimeout(() => { - // document.getElementById("QueryIput")?.focus(); - // }, 1000); try { scrolledToBottom = isScrolledToBottom(); @@ -999,7 +1001,7 @@ const App = () => { { role: 'assistant', content: 'Processing request...', id: processingId, isProcessing: true } ]); if (scrolledToBottom) { - setTimeout(() => { scrollToBottom() }, 0); + setTimeout(() => { scrollToBottom() }, 50); } // Make the fetch request with proper headers @@ -1020,7 +1022,7 @@ const App = () => { setSnack(`Query sent. Response estimated in ${estimate}s.`, "info"); startCountdown(Math.round(estimate)); if (scrolledToBottom) { - setTimeout(() => { scrollToBottom() }, 0); + setTimeout(() => { scrollToBottom() }, 50); } if (!response.ok) { @@ -1064,7 +1066,7 @@ const App = () => { : msg )); if (scrolledToBottom) { - setTimeout(() => { scrollToBottom() }, 0); + setTimeout(() => { scrollToBottom() }, 50); } // Add a small delay to ensure React has time to update the UI @@ -1084,7 +1086,7 @@ const App = () => { setLastPromptTPS(promptTPS ? promptTPS : 35); updateContextStatus(); if (scrolledToBottom) { - setTimeout(() => { scrollToBottom() }, 0); + setTimeout(() => { scrollToBottom() }, 50); } } else if (update.status === 'error') { // Show error @@ -1094,7 +1096,7 @@ const App = () => { { role: 'assistant', type: 'error', content: update.message } ]); if (scrolledToBottom) { - setTimeout(() => { scrollToBottom() }, 0); + setTimeout(() => { scrollToBottom() }, 50); } } } catch (e) { @@ -1116,7 +1118,7 @@ const App = () => { update.message ]); if (scrolledToBottom) { - setTimeout(() => { scrollToBottom() }, 0); + setTimeout(() => { scrollToBottom() }, 500); } } } catch (e) { @@ -1124,8 +1126,12 @@ const App = () => { } } + scrolledToBottom = isScrolledToBottom(); stopCountdown(); setProcessing(false); + if (scrolledToBottom) { + setTimeout(() => { scrollToBottom() }, 50); + } } catch (error) { console.error('Fetch error:', error); setSnack("Unable to process query", "error"); @@ -1137,7 +1143,7 @@ const App = () => { setProcessing(false); stopCountdown(); if (scrolledToBottom) { - setTimeout(() => { scrollToBottom() }, 0); + setTimeout(() => { scrollToBottom() }, 50); } } };