fix: auto scroll fix, scroll allow user to scroll up during ai response (#1299)

app/components/chat/BaseChat.tsx

@@ -303,7 +303,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         data-chat-visible={showChat}
       >
         <ClientOnly>{() => <Menu />}</ClientOnly>
-        <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
+        <div className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
           <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
             {!chatStarted && (
               <div id="intro" className="mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0">
@@ -317,39 +317,40 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
             )}
             <div
               className={classNames('pt-6 px-2 sm:px-6', {
-                'h-full flex flex-col': chatStarted,
+                'h-full flex flex-col pb-4 overflow-y-auto': chatStarted,
               })}
               ref={scrollRef}
             >
               <ClientOnly>
                 {() => {
                   return chatStarted ? (
-                    <Messages
-                      ref={messageRef}
-                      className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
-                      messages={messages}
-                      isStreaming={isStreaming}
-                    />
+                    <div className="flex-1 w-full max-w-chat pb-6 mx-auto z-1">
+                      <Messages
+                        ref={messageRef}
+                        className="flex flex-col "
+                        messages={messages}
+                        isStreaming={isStreaming}
+                      />
+                    </div>
                   ) : null;
                 }}
               </ClientOnly>
               <div
-                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt mb-6', {
+                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt', {
                   'sticky bottom-2': chatStarted,
+                  'position-absolute': chatStarted,
                 })}
               >
-                <div className="bg-bolt-elements-background-depth-2">
-                  {actionAlert && (
-                    <ChatAlert
-                      alert={actionAlert}
-                      clearAlert={() => clearAlert?.()}
-                      postMessage={(message) => {
-                        sendMessage?.({} as any, message);
-                        clearAlert?.();
-                      }}
-                    />
-                  )}
-                </div>
+                {actionAlert && (
+                  <ChatAlert
+                    alert={actionAlert}
+                    clearAlert={() => clearAlert?.()}
+                    postMessage={(message) => {
+                      sendMessage?.({} as any, message);
+                      clearAlert?.();
+                    }}
+                  />
+                )}
                 {progressAnnotations && <ProgressCompilation data={progressAnnotations} />}
                 <div
                   className={classNames(
@@ -583,17 +584,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 </div>
               </div>
             </div>
-            <div className="flex flex-col justify-center gap-5">
-              {!chatStarted && (
+            {!chatStarted && (
+              <div className="flex flex-col justify-center mt-6 gap-5">
                 <div className="flex justify-center gap-2">
                   <div className="flex items-center gap-2">
                     {ImportButtons(importChat)}
                     <GitCloneButton importChat={importChat} className="min-w-[120px]" />
                   </div>
                 </div>
-              )}
-              {!chatStarted &&
-                ExamplePrompts((event, messageInput) => {
+
+                {ExamplePrompts((event, messageInput) => {
                   if (isStreaming) {
                     handleStop?.();
                     return;
@@ -601,8 +601,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
 
                   handleSendMessage?.(event, messageInput);
                 })}
-              {!chatStarted && <StarterTemplates />}
-            </div>
+                <StarterTemplates />
+              </div>
+            )}
           </div>
           <ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
         </div>

app/components/chat/Messages.client.tsx

@@ -1,5 +1,5 @@
 import type { Message } from 'ai';
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment } from 'react';
 import { classNames } from '~/utils/classNames';
 import { AssistantMessage } from './AssistantMessage';
 import { UserMessage } from './UserMessage';
@@ -10,6 +10,8 @@ import { toast } from 'react-toastify';
 import WithTooltip from '~/components/ui/Tooltip';
 import { useStore } from '@nanostores/react';
 import { profileStore } from '~/lib/stores/profile';
+import { forwardRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 interface MessagesProps {
   id?: string;
@@ -18,213 +20,113 @@ interface MessagesProps {
   messages?: Message[];
 }
 
-export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
-  const { id, isStreaming = false, messages = [] } = props;
-  const location = useLocation();
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isUserInteracting, setIsUserInteracting] = useState(false);
-  const [lastScrollTop, setLastScrollTop] = useState(0);
-  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
-  const profile = useStore(profileStore);
+export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
+  (props: MessagesProps, ref: ForwardedRef<HTMLDivElement> | undefined) => {
+    const { id, isStreaming = false, messages = [] } = props;
+    const location = useLocation();
+    const profile = useStore(profileStore);
 
-  // Check if we should auto-scroll based on scroll position
-  const checkShouldAutoScroll = () => {
-    if (!containerRef.current) {
-      return true;
-    }
-
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
-
-    return distanceFromBottom < 100;
-  };
-
-  const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
-    if (!shouldAutoScroll || isUserInteracting) {
-      return;
-    }
-
-    messagesEndRef.current?.scrollIntoView({ behavior });
-  };
-
-  // Handle user interaction and scroll position
-  useEffect(() => {
-    const container = containerRef.current;
-
-    if (!container) {
-      return undefined;
-    }
-
-    const handleInteractionStart = () => {
-      setIsUserInteracting(true);
+    const handleRewind = (messageId: string) => {
+      const searchParams = new URLSearchParams(location.search);
+      searchParams.set('rewindTo', messageId);
+      window.location.search = searchParams.toString();
     };
 
-    const handleInteractionEnd = () => {
-      if (checkShouldAutoScroll()) {
-        setTimeout(() => setIsUserInteracting(false), 100);
-      }
-    };
-
-    const handleScroll = () => {
-      const { scrollTop } = container;
-      const shouldScroll = checkShouldAutoScroll();
-
-      // Update auto-scroll state based on scroll position
-      setShouldAutoScroll(shouldScroll);
-
-      // If scrolling up, disable auto-scroll
-      if (scrollTop < lastScrollTop) {
-        setIsUserInteracting(true);
-      }
-
-      setLastScrollTop(scrollTop);
-    };
-
-    container.addEventListener('mousedown', handleInteractionStart);
-    container.addEventListener('mouseup', handleInteractionEnd);
-    container.addEventListener('touchstart', handleInteractionStart);
-    container.addEventListener('touchend', handleInteractionEnd);
-    container.addEventListener('scroll', handleScroll, { passive: true });
-
-    return () => {
-      container.removeEventListener('mousedown', handleInteractionStart);
-      container.removeEventListener('mouseup', handleInteractionEnd);
-      container.removeEventListener('touchstart', handleInteractionStart);
-      container.removeEventListener('touchend', handleInteractionEnd);
-      container.removeEventListener('scroll', handleScroll);
-    };
-  }, [lastScrollTop]);
-
-  // Scroll to bottom when new messages are added or during streaming
-  useEffect(() => {
-    if (messages.length > 0 && (isStreaming || shouldAutoScroll)) {
-      scrollToBottom('smooth');
-    }
-  }, [messages, isStreaming, shouldAutoScroll]);
-
-  // Initial scroll on component mount
-  useEffect(() => {
-    if (messages.length > 0) {
-      scrollToBottom('instant');
-      setShouldAutoScroll(true);
-    }
-  }, []);
-
-  const handleRewind = (messageId: string) => {
-    const searchParams = new URLSearchParams(location.search);
-    searchParams.set('rewindTo', messageId);
-    window.location.search = searchParams.toString();
-  };
-
-  const handleFork = async (messageId: string) => {
-    try {
-      if (!db || !chatId.get()) {
-        toast.error('Chat persistence is not available');
-        return;
-      }
-
-      const urlId = await forkChat(db, chatId.get()!, messageId);
-      window.location.href = `/chat/${urlId}`;
-    } catch (error) {
-      toast.error('Failed to fork chat: ' + (error as Error).message);
-    }
-  };
-
-  return (
-    <div
-      id={id}
-      ref={(el) => {
-        // Combine refs
-        if (typeof ref === 'function') {
-          ref(el);
+    const handleFork = async (messageId: string) => {
+      try {
+        if (!db || !chatId.get()) {
+          toast.error('Chat persistence is not available');
+          return;
         }
 
-        (containerRef as any).current = el;
+        const urlId = await forkChat(db, chatId.get()!, messageId);
+        window.location.href = `/chat/${urlId}`;
+      } catch (error) {
+        toast.error('Failed to fork chat: ' + (error as Error).message);
+      }
+    };
 
-        return undefined;
-      }}
-      className={props.className}
-    >
-      {messages.length > 0
-        ? messages.map((message, index) => {
-            const { role, content, id: messageId, annotations } = message;
-            const isUserMessage = role === 'user';
-            const isFirst = index === 0;
-            const isLast = index === messages.length - 1;
-            const isHidden = annotations?.includes('hidden');
+    return (
+      <div id={id} className={props.className} ref={ref}>
+        {messages.length > 0
+          ? messages.map((message, index) => {
+              const { role, content, id: messageId, annotations } = message;
+              const isUserMessage = role === 'user';
+              const isFirst = index === 0;
+              const isLast = index === messages.length - 1;
+              const isHidden = annotations?.includes('hidden');
 
-            if (isHidden) {
-              return <Fragment key={index} />;
-            }
+              if (isHidden) {
+                return <Fragment key={index} />;
+              }
 
-            return (
-              <div
-                key={index}
-                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
-                  'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
-                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
-                    isStreaming && isLast,
-                  'mt-4': !isFirst,
-                })}
-              >
-                {isUserMessage && (
-                  <div className="flex items-center justify-center w-[40px] h-[40px] overflow-hidden bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-500 rounded-full shrink-0 self-start">
-                    {profile?.avatar ? (
-                      <img
-                        src={profile.avatar}
-                        alt={profile?.username || 'User'}
-                        className="w-full h-full object-cover"
-                        loading="eager"
-                        decoding="sync"
-                      />
+              return (
+                <div
+                  key={index}
+                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                    'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                    'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+                      isStreaming && isLast,
+                    'mt-4': !isFirst,
+                  })}
+                >
+                  {isUserMessage && (
+                    <div className="flex items-center justify-center w-[40px] h-[40px] overflow-hidden bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-500 rounded-full shrink-0 self-start">
+                      {profile?.avatar ? (
+                        <img
+                          src={profile.avatar}
+                          alt={profile?.username || 'User'}
+                          className="w-full h-full object-cover"
+                          loading="eager"
+                          decoding="sync"
+                        />
+                      ) : (
+                        <div className="i-ph:user-fill text-2xl" />
+                      )}
+                    </div>
+                  )}
+                  <div className="grid grid-col-1 w-full">
+                    {isUserMessage ? (
+                      <UserMessage content={content} />
                     ) : (
-                      <div className="i-ph:user-fill text-2xl" />
+                      <AssistantMessage content={content} annotations={message.annotations} />
                     )}
                   </div>
-                )}
-                <div className="grid grid-col-1 w-full">
-                  {isUserMessage ? (
-                    <UserMessage content={content} />
-                  ) : (
-                    <AssistantMessage content={content} annotations={message.annotations} />
-                  )}
-                </div>
-                {!isUserMessage && (
-                  <div className="flex gap-2 flex-col lg:flex-row">
-                    {messageId && (
-                      <WithTooltip tooltip="Revert to this message">
+                  {!isUserMessage && (
+                    <div className="flex gap-2 flex-col lg:flex-row">
+                      {messageId && (
+                        <WithTooltip tooltip="Revert to this message">
+                          <button
+                            onClick={() => handleRewind(messageId)}
+                            key="i-ph:arrow-u-up-left"
+                            className={classNames(
+                              'i-ph:arrow-u-up-left',
+                              'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
+                            )}
+                          />
+                        </WithTooltip>
+                      )}
+
+                      <WithTooltip tooltip="Fork chat from this message">
                         <button
-                          onClick={() => handleRewind(messageId)}
-                          key="i-ph:arrow-u-up-left"
+                          onClick={() => handleFork(messageId)}
+                          key="i-ph:git-fork"
                           className={classNames(
-                            'i-ph:arrow-u-up-left',
+                            'i-ph:git-fork',
                             'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
                           )}
                         />
                       </WithTooltip>
-                    )}
-
-                    <WithTooltip tooltip="Fork chat from this message">
-                      <button
-                        onClick={() => handleFork(messageId)}
-                        key="i-ph:git-fork"
-                        className={classNames(
-                          'i-ph:git-fork',
-                          'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                        )}
-                      />
-                    </WithTooltip>
-                  </div>
-                )}
-              </div>
-            );
-          })
-        : null}
-      <div ref={messagesEndRef} /> {/* Add an empty div as scroll anchor */}
-      {isStreaming && (
-        <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
-      )}
-    </div>
-  );
-});
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          : null}
+        {isStreaming && (
+          <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+        )}
+      </div>
+    );
+  },
+);