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 handleInteractionEnd = () => {
-      if (checkShouldAutoScroll()) {
-        setTimeout(() => setIsUserInteracting(false), 100);
-      }
+    const handleRewind = (messageId: string) => {
+      const searchParams = new URLSearchParams(location.search);
+      searchParams.set('rewindTo', messageId);
+      window.location.search = searchParams.toString();
     };
 
-    const handleScroll = () => {
-      const { scrollTop } = container;
-      const shouldScroll = checkShouldAutoScroll();
-
-      // Update auto-scroll state based on scroll position
-      setShouldAutoScroll(shouldScroll);
+    const handleFork = async (messageId: string) => {
+      try {
+        if (!db || !chatId.get()) {
+          toast.error('Chat persistence is not available');
+          return;
+        }
 
-      // If scrolling up, disable auto-scroll
-      if (scrollTop < lastScrollTop) {
-        setIsUserInteracting(true);
+        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);
       }
-
-      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);
-        }
-
-        (containerRef as any).current = el;
-
-        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');
-
-            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 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} />;
+              }
+
+              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>
+    );
+  },
+);

app/lib/hooks/useSnapScroll.ts

@@ -1,52 +1,155 @@
 import { useRef, useCallback } from 'react';
 
-export function useSnapScroll() {
+interface ScrollOptions {
+  duration?: number;
+  easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic-bezier';
+  cubicBezier?: [number, number, number, number];
+  bottomThreshold?: number;
+}
+
+export function useSnapScroll(options: ScrollOptions = {}) {
+  const {
+    duration = 800,
+    easing = 'ease-in-out',
+    cubicBezier = [0.42, 0, 0.58, 1],
+    bottomThreshold = 50, // pixels from bottom to consider "scrolled to bottom"
+  } = options;
+
   const autoScrollRef = useRef(true);
   const scrollNodeRef = useRef<HTMLDivElement>();
   const onScrollRef = useRef<() => void>();
   const observerRef = useRef<ResizeObserver>();
+  const animationFrameRef = useRef<number>();
+  const lastScrollTopRef = useRef<number>(0);
+
+  const smoothScroll = useCallback(
+    (element: HTMLDivElement, targetPosition: number, duration: number, easingFunction: string) => {
+      const startPosition = element.scrollTop;
+      const distance = targetPosition - startPosition;
+      const startTime = performance.now();
+
+      const bezierPoints = easingFunction === 'cubic-bezier' ? cubicBezier : [0.42, 0, 0.58, 1];
+
+      const cubicBezierFunction = (t: number): number => {
+        const [, y1, , y2] = bezierPoints;
+
+        /*
+         * const cx = 3 * x1;
+         * const bx = 3 * (x2 - x1) - cx;
+         * const ax = 1 - cx - bx;
+         */
+
+        const cy = 3 * y1;
+        const by = 3 * (y2 - y1) - cy;
+        const ay = 1 - cy - by;
 
-  const messageRef = useCallback((node: HTMLDivElement | null) => {
-    if (node) {
-      const observer = new ResizeObserver(() => {
-        if (autoScrollRef.current && scrollNodeRef.current) {
-          const { scrollHeight, clientHeight } = scrollNodeRef.current;
-          const scrollTarget = scrollHeight - clientHeight;
+        // const sampleCurveX = (t: number) => ((ax * t + bx) * t + cx) * t;
+        const sampleCurveY = (t: number) => ((ay * t + by) * t + cy) * t;
 
-          scrollNodeRef.current.scrollTo({
-            top: scrollTarget,
-          });
+        return sampleCurveY(t);
+      };
+
+      const animation = (currentTime: number) => {
+        const elapsedTime = currentTime - startTime;
+        const progress = Math.min(elapsedTime / duration, 1);
+
+        const easedProgress = cubicBezierFunction(progress);
+        const newPosition = startPosition + distance * easedProgress;
+
+        // Only scroll if auto-scroll is still enabled
+        if (autoScrollRef.current) {
+          element.scrollTop = newPosition;
+        }
+
+        if (progress < 1 && autoScrollRef.current) {
+          animationFrameRef.current = requestAnimationFrame(animation);
         }
-      });
-
-      observer.observe(node);
-    } else {
-      observerRef.current?.disconnect();
-      observerRef.current = undefined;
-    }
-  }, []);
-
-  const scrollRef = useCallback((node: HTMLDivElement | null) => {
-    if (node) {
-      onScrollRef.current = () => {
-        const { scrollTop, scrollHeight, clientHeight } = node;
-        const scrollTarget = scrollHeight - clientHeight;
-
-        autoScrollRef.current = Math.abs(scrollTop - scrollTarget) <= 10;
       };
 
-      node.addEventListener('scroll', onScrollRef.current);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+
+      animationFrameRef.current = requestAnimationFrame(animation);
+    },
+    [cubicBezier],
+  );
+
+  const isScrolledToBottom = useCallback(
+    (element: HTMLDivElement): boolean => {
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      return scrollHeight - scrollTop - clientHeight <= bottomThreshold;
+    },
+    [bottomThreshold],
+  );
+
+  const messageRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node) {
+        const observer = new ResizeObserver(() => {
+          if (autoScrollRef.current && scrollNodeRef.current) {
+            const { scrollHeight, clientHeight } = scrollNodeRef.current;
+            const scrollTarget = scrollHeight - clientHeight;
+
+            smoothScroll(scrollNodeRef.current, scrollTarget, duration, easing);
+          }
+        });
 
-      scrollNodeRef.current = node;
-    } else {
-      if (onScrollRef.current) {
-        scrollNodeRef.current?.removeEventListener('scroll', onScrollRef.current);
+        observer.observe(node);
+        observerRef.current = observer;
+      } else {
+        observerRef.current?.disconnect();
+        observerRef.current = undefined;
+
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = undefined;
+        }
       }
+    },
+    [duration, easing, smoothScroll],
+  );
+
+  const scrollRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node) {
+        onScrollRef.current = () => {
+          const { scrollTop } = node;
+
+          // Detect scroll direction
+          const isScrollingUp = scrollTop < lastScrollTopRef.current;
 
-      scrollNodeRef.current = undefined;
-      onScrollRef.current = undefined;
-    }
-  }, []);
+          // Update auto-scroll based on scroll direction and position
+          if (isScrollingUp) {
+            // Disable auto-scroll when scrolling up
+            autoScrollRef.current = false;
+          } else if (isScrolledToBottom(node)) {
+            // Re-enable auto-scroll when manually scrolled to bottom
+            autoScrollRef.current = true;
+          }
+
+          // Store current scroll position for next comparison
+          lastScrollTopRef.current = scrollTop;
+        };
+
+        node.addEventListener('scroll', onScrollRef.current);
+        scrollNodeRef.current = node;
+      } else {
+        if (onScrollRef.current && scrollNodeRef.current) {
+          scrollNodeRef.current.removeEventListener('scroll', onScrollRef.current);
+        }
+
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = undefined;
+        }
+
+        scrollNodeRef.current = undefined;
+        onScrollRef.current = undefined;
+      }
+    },
+    [isScrolledToBottom],
+  );
 
-  return [messageRef, scrollRef];
+  return [messageRef, scrollRef] as const;
 }