feat: add feature flag for user message auto scroll (#1994)

Author: willydouhard

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+### Added
+
+- The user message auto scroll behavior is not a feature flag `config.features.user_message_autoscroll`
+
 ### Fixed
 
 - Submounting a Chainlit app to a FastAPI app with a root path should now work

backend/chainlit/config.py

@@ -87,6 +87,9 @@
 # Process and display mathematical expressions. This can clash with "$" characters in messages.
 latex = false
 
+# Autoscroll new user messages at the top of the window
+user_message_autoscroll = true
+
 # Automatically tag threads with the current chat profile (if a chat profile is used)
 auto_tag_thread = true
 
@@ -216,6 +219,7 @@ class FeaturesSettings(DataClassJsonMixin):
     audio: Optional[AudioFeature] = Field(default_factory=AudioFeature)
     mcp: bool = False
     latex: bool = False
+    user_message_autoscroll: bool = True
     unsafe_allow_html: bool = False
     auto_tag_thread: bool = True
     edit_message: bool = True

frontend/src/components/chat/ScrollContainer.tsx

@@ -13,13 +13,15 @@ import { useChatMessages } from '@chainlit/react-client';
 import { Button } from '@/components/ui/button';
 
 interface Props {
+  autoScrollUserMessage?: boolean;
   autoScrollRef?: MutableRefObject<boolean>;
   children: React.ReactNode;
   className?: string;
 }
 
 export default function ScrollContainer({
   autoScrollRef,
+  autoScrollUserMessage,
   children,
   className
 }: Props) {
@@ -31,40 +33,42 @@ export default function ScrollContainer({
 
   // Calculate and update spacer height
   const updateSpacerHeight = useCallback(() => {
-    if (!ref.current || !lastUserMessageRef.current) return;
+    if (!ref.current) return;
 
-    const containerHeight = ref.current.clientHeight;
-    const lastMessageHeight = lastUserMessageRef.current.offsetHeight;
+    if (autoScrollUserMessage && lastUserMessageRef.current) {
+      const containerHeight = ref.current.clientHeight;
+      const lastMessageHeight = lastUserMessageRef.current.offsetHeight;
 
-    // Calculate the height of all elements after the last user message
-    let afterMessagesHeight = 0;
-    let currentElement = lastUserMessageRef.current.nextElementSibling;
+      // Calculate the height of all elements after the last user message
+      let afterMessagesHeight = 0;
+      let currentElement = lastUserMessageRef.current.nextElementSibling;
 
-    // Iterate through all siblings after the last user message
-    while (currentElement && currentElement !== spacerRef.current) {
-      afterMessagesHeight += (currentElement as HTMLElement).offsetHeight;
-      currentElement = currentElement.nextElementSibling;
-    }
+      // Iterate through all siblings after the last user message
+      while (currentElement && currentElement !== spacerRef.current) {
+        afterMessagesHeight += (currentElement as HTMLElement).offsetHeight;
+        currentElement = currentElement.nextElementSibling;
+      }
 
-    // Position the last user message at the top with some padding
-    // Subtract both the message height and the height of any messages after it
-    const newSpacerHeight =
-      containerHeight - lastMessageHeight - afterMessagesHeight - 32;
+      // Position the last user message at the top with some padding
+      // Subtract both the message height and the height of any messages after it
+      const newSpacerHeight =
+        containerHeight - lastMessageHeight - afterMessagesHeight - 32;
 
-    // Only set a positive spacer height
-    if (spacerRef.current) {
-      spacerRef.current.style.height = `${Math.max(0, newSpacerHeight)}px`;
-    }
+      // Only set a positive spacer height
+      if (spacerRef.current) {
+        spacerRef.current.style.height = `${Math.max(0, newSpacerHeight)}px`;
+      }
 
-    // Scroll to position the message at the top
-    if (afterMessagesHeight === 0) {
-      scrollToPosition();
-    } else if (autoScrollRef?.current) {
-      if (ref.current) {
+      // Scroll to position the message at the top
+      if (afterMessagesHeight === 0) {
+        scrollToPosition();
+      } else if (autoScrollRef?.current) {
         ref.current.scrollTop = ref.current.scrollHeight;
       }
+    } else if (autoScrollRef?.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
     }
-  }, [autoScrollRef]);
+  }, [autoScrollUserMessage, autoScrollRef]);
 
   // Find and set a ref to the last user message element
   useEffect(() => {
@@ -87,6 +91,8 @@ export default function ScrollContainer({
 
   // Add window resize listener to update spacer height
   useEffect(() => {
+    if (!autoScrollUserMessage) return;
+
     const handleResize = () => {
       updateSpacerHeight();
     };
@@ -99,7 +105,7 @@ export default function ScrollContainer({
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, [updateSpacerHeight]);
+  }, [autoScrollUserMessage, updateSpacerHeight]);
 
   // Check scroll position on mount
   useEffect(() => {

frontend/src/components/chat/index.tsx

@@ -202,7 +202,10 @@ const Chat = () => {
         </div>
       ) : null}
       <ErrorBoundary>
-        <ScrollContainer autoScrollRef={autoScrollRef}>
+        <ScrollContainer
+          autoScrollUserMessage={config?.features?.user_message_autoscroll}
+          autoScrollRef={autoScrollRef}
+        >
           <div
             className="flex flex-col mx-auto w-full flex-grow p-4"
             style={{

libs/copilot/src/chat/body.tsx

@@ -171,7 +171,10 @@ const Chat = () => {
         ) : null}
         <ChatSettingsModal />
         <ErrorBoundary>
-          <ScrollContainer autoScrollRef={autoScrollRef}>
+          <ScrollContainer
+            autoScrollUserMessage={config?.features?.user_message_autoscroll}
+            autoScrollRef={autoScrollRef}
+          >
             <div
               className="flex flex-col mx-auto w-full flex-grow px-4 pt-4"
               style={{

libs/react-client/src/types/config.ts

@@ -50,6 +50,7 @@ export interface IChainlitConfig {
     };
     audio: IAudioConfig;
     unsafe_allow_html?: boolean;
+    user_message_autoscroll?: boolean;
     latex?: boolean;
     edit_message?: boolean;
     mcp?: boolean;