New option to allow disabling auto-scroll of assistant messages (Chainlit#2724)

<!-- This is an auto-generated description by cubic. -->
## Summary by cubic
Adds a new config option to control auto-scrolling for assistant
messages. Default is on, so behavior stays the same unless you disable
it.

- **New Features**
- Added assistant_message_autoscroll (default true) to backend
FeaturesSettings and config.
  - Updated types to include assistant_message_autoscroll.
- ScrollContainer now respects this flag; Chat and Copilot pass it
through.

- **Migration**
- To disable: set assistant_message_autoscroll: false in the Chainlit
config.

<sup>Written for commit 7b09d58.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

Author: jfperusse

backend/chainlit/config.py

@@ -99,6 +99,9 @@
 # Autoscroll new user messages at the top of the window
 user_message_autoscroll = true
 
+# Autoscroll new assistant messages
+assistant_message_autoscroll = true
+
 # Automatically tag threads with the current chat profile (if a chat profile is used)
 auto_tag_thread = true
 
@@ -308,6 +311,7 @@ class FeaturesSettings(BaseModel):
     slack: SlackFeature = Field(default_factory=SlackFeature)
     latex: bool = False
     user_message_autoscroll: bool = True
+    assistant_message_autoscroll: bool = True
     unsafe_allow_html: bool = False
     auto_tag_thread: bool = True
     edit_message: bool = True

frontend/src/components/chat/ScrollContainer.tsx

@@ -14,6 +14,7 @@ import { Button } from '@/components/ui/button';
 
 interface Props {
   autoScrollUserMessage?: boolean;
+  autoScrollAssistantMessage?: boolean;
   autoScrollRef?: MutableRefObject<boolean>;
   children: React.ReactNode;
   className?: string;
@@ -22,6 +23,7 @@ interface Props {
 export default function ScrollContainer({
   autoScrollRef,
   autoScrollUserMessage,
+  autoScrollAssistantMessage,
   children,
   className
 }: Props) {
@@ -63,13 +65,13 @@ export default function ScrollContainer({
       // Scroll to position the message at the top
       if (afterMessagesHeight === 0) {
         scrollToPosition();
-      } else if (autoScrollRef?.current) {
+      } else if (autoScrollAssistantMessage && autoScrollRef?.current) {
         ref.current.scrollTop = ref.current.scrollHeight;
       }
-    } else if (autoScrollRef?.current) {
+    } else if (autoScrollAssistantMessage && autoScrollRef?.current) {
       ref.current.scrollTop = ref.current.scrollHeight;
     }
-  }, [autoScrollUserMessage, autoScrollRef]);
+  }, [autoScrollUserMessage, autoScrollAssistantMessage, autoScrollRef]);
 
   // Find and set a ref to the last user message element
   useEffect(() => {

frontend/src/components/chat/index.tsx

@@ -213,6 +213,9 @@ const Chat = () => {
       <ErrorBoundary>
         <ScrollContainer
           autoScrollUserMessage={config?.features?.user_message_autoscroll}
+          autoScrollAssistantMessage={
+            config?.features?.assistant_message_autoscroll
+          }
           autoScrollRef={autoScrollRef}
         >
           <div

libs/copilot/src/chat/body.tsx

@@ -164,6 +164,9 @@ const Chat = () => {
         <ErrorBoundary>
           <ScrollContainer
             autoScrollUserMessage={config?.features?.user_message_autoscroll}
+            autoScrollAssistantMessage={
+              config?.features?.assistant_message_autoscroll
+            }
             autoScrollRef={autoScrollRef}
           >
             <div

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

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