feat: Better autoscroll - for #909 (#1054)

ui/desktop/src/ChatWindow.tsx

@@ -8,7 +8,7 @@ import Input from './components/Input';
 import LoadingGoose from './components/LoadingGoose';
 import MoreMenu from './components/MoreMenu';
 import { Card } from './components/ui/card';
-import { ScrollArea } from './components/ui/scroll-area';
+import { ScrollArea, ScrollAreaHandle } from './components/ui/scroll-area';
 import UserMessage from './components/UserMessage';
 import WingToWing, { Working } from './components/WingToWing';
 import { askAi } from './utils/askAI';
@@ -22,7 +22,6 @@ import { useRecentModels } from './components/settings/models/RecentModels';
 import { createSelectedModel } from './components/settings/models/utils';
 import { getDefaultModel } from './components/settings/models/hardcoded_stuff';
 import Splash from './components/Splash';
-import { loadAndAddStoredExtensions } from './extensions';
 
 declare global {
   interface Window {
@@ -53,13 +52,10 @@ export interface Chat {
   }>;
 }
 
-type ScrollBehavior = 'auto' | 'smooth' | 'instant';
-
 export function ChatContent({
   chats,
   setChats,
   selectedChatId,
-  setSelectedChatId,
   initialQuery,
   setProgressMessage,
   setWorking,
@@ -77,8 +73,8 @@ export function ChatContent({
   const [hasMessages, setHasMessages] = useState(false);
   const [lastInteractionTime, setLastInteractionTime] = useState<number>(Date.now());
   const [showGame, setShowGame] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
   const [working, setWorkingLocal] = useState<Working>(Working.Idle);
+  const scrollRef = useRef<ScrollAreaHandle>(null);
 
   useEffect(() => {
     setWorking(working);
@@ -94,7 +90,6 @@ export function ChatContent({
     onToolCall: ({ toolCall }) => {
       updateWorking(Working.Working);
       setProgressMessage(`Executing tool: ${toolCall.toolName}`);
-      requestAnimationFrame(() => scrollToBottom('instant'));
     },
     onResponse: (response) => {
       if (!response.ok) {
@@ -115,8 +110,6 @@ export function ChatContent({
       const fetchResponses = await askAi(message.content);
       setMessageMetadata((prev) => ({ ...prev, [message.id]: fetchResponses }));
 
-      requestAnimationFrame(() => scrollToBottom('smooth'));
-
       const timeSinceLastInteraction = Date.now() - lastInteractionTime;
       window.electron.logInfo('last interaction:' + lastInteractionTime);
       if (timeSinceLastInteraction > 60000) {
@@ -150,23 +143,6 @@ export function ChatContent({
     }
   }, [messages]);
 
-  const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior,
-        block: 'end',
-        inline: 'nearest',
-      });
-    }
-  };
-
-  // Single effect to handle all scrolling
-  useEffect(() => {
-    if (isLoading || messages.length > 0 || working === Working.Working) {
-      scrollToBottom(isLoading || working === Working.Working ? 'instant' : 'smooth');
-    }
-  }, [messages, isLoading, working]);
-
   // Handle submit
   const handleSubmit = (e: React.FormEvent) => {
     window.electron.startPowerSaveBlocker();
@@ -178,7 +154,9 @@ export function ChatContent({
         role: 'user',
         content: content,
       });
-      scrollToBottom('instant');
+      if (scrollRef.current?.scrollToBottom) {
+        scrollRef.current.scrollToBottom();
+      }
     }
   };
 
@@ -241,7 +219,7 @@ export function ChatContent({
         {messages.length === 0 ? (
           <Splash append={append} />
         ) : (
-          <ScrollArea className="flex-1 px-4" id="chat-scroll-area">
+          <ScrollArea ref={scrollRef} className="flex-1 px-4" autoScroll>
             {messages.map((message) => (
               <div key={message.id} className="mt-[16px]">
                 {message.role === 'user' ? (
@@ -288,7 +266,6 @@ export function ChatContent({
               </div>
             )}
             <div className="block h-16" />
-            <div ref={messagesEndRef} style={{ height: '1px' }} />
           </ScrollArea>
         )}