feat: add auto-scroll toggle to chat settings (#111)

Introduces an 'Auto scroll to bottom' toggle in the settings menu, allowing users to enable or disable automatic scrolling in the chat view. Updates the store to persist the autoScroll setting and integrates the toggle into the UI and chat content logic.

The default auto scrolling behavior is extremely annoying, especially if a user has to keep scrolling up to read the response from the start. If a user tried to scroll up while the response was still streaming it would keep scrolling back down. This gives users the option to manually scroll (and perhaps, if all's good, can be made the default behavior).

Author: ReignOfComputer

public/locales/en/main.json

@@ -47,6 +47,7 @@
   "cloneChat": "Clone Chat",
   "cloned": "Cloned",
   "enterToSubmit": "Enter to submit",
+  "autoScroll": "Auto scroll to bottom",
   "submitPlaceholder": "Type a message or click [/] for prompts...",
   "stopNonStreamGenerationWarning": "Stopping generation is not recommended for non-stream models. Only use it if UI is stuck. Do you want to proceed?",
   "reduceMessagesWarning": "Reducing messages may result in data loss. It is recommended to download the chat in JSON format if you care about the data. Do you want to proceed?",

src/components/Chat/ChatContent/ChatContent.tsx

@@ -43,6 +43,7 @@ const ChatContent = () => {
   const advancedMode = useStore((state) => state.advancedMode);
   const generating = useStore.getState().generating;
   const hideSideMenu = useStore((state) => state.hideSideMenu);
+  const autoScroll = useStore((state) => state.autoScroll);
   const model = useStore((state) =>
     state.chats &&
     state.chats.length > 0 &&
@@ -99,11 +100,17 @@ const ChatContent = () => {
 
   const { error } = useSubmit();
 
+  // Custom scroller function to control auto-scroll behavior
+  const customScroller = ({ maxValue }: { maxValue: number; minValue: number; offsetHeight: number; scrollHeight: number; scrollTop: number }) => {
+    return autoScroll ? maxValue : 0;
+  };
+
   return (
     <div className='flex-1 overflow-hidden'>
       <ScrollToBottom
         className='h-full dark:bg-gray-800'
         followButtonClassName='hidden'
+        scroller={customScroller}
       >
         <ScrollToBottomButton />
         <div className='flex flex-col items-center text-sm dark:bg-gray-800'>

src/components/SettingsMenu/AutoScrollToggle.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useStore from '@store/store';
+import Toggle from '@components/Toggle';
+
+const AutoScrollToggle = () => {
+  const { t } = useTranslation();
+
+  const setAutoScroll = useStore((state) => state.setAutoScroll);
+
+  const [isChecked, setIsChecked] = useState<boolean>(
+    useStore.getState().autoScroll
+  );
+
+  useEffect(() => {
+    setAutoScroll(isChecked);
+  }, [isChecked]);
+
+  return (
+    <Toggle
+      label={t('autoScroll') as string}
+      isChecked={isChecked}
+      setIsChecked={setIsChecked}
+    />
+  );
+};
+
+export default AutoScrollToggle;

src/components/SettingsMenu/SettingsMenu.tsx

@@ -12,6 +12,7 @@ import InlineLatexToggle from './InlineLatexToggle';
 import PromptLibraryMenu from '@components/PromptLibraryMenu';
 import ChatConfigMenu from '@components/ChatConfigMenu';
 import EnterToSubmitToggle from './EnterToSubmitToggle';
+import AutoScrollToggle from './AutoScrollToggle';
 import TotalTokenCost, { TotalTokenCostToggle } from './TotalTokenCost';
 import ClearConversation from '@components/Menu/MenuOptions/ClearConversation';
 import DisplayChatSizeToggle from './DisplayChatSizeToggle';
@@ -50,6 +51,7 @@ const SettingsMenu = () => {
             <div className='flex flex-col gap-3'>
               <AutoTitleToggle />
               <EnterToSubmitToggle />
+              <AutoScrollToggle />
               <InlineLatexToggle />
               <AdvancedModeToggle />
               <TotalTokenCostToggle />

src/store/config-slice.ts

@@ -22,6 +22,7 @@ export interface ConfigSlice {
   menuWidth: number;
   displayChatSize: boolean;
   defaultImageDetail: ImageDetail;
+  autoScroll: boolean;
   setOpenConfig: (openConfig: boolean) => void;
   setTheme: (theme: Theme) => void;
   setAutoTitle: (autoTitle: boolean) => void;
@@ -39,6 +40,7 @@ export interface ConfigSlice {
   setMenuWidth: (menuWidth: number) => void;
   setDisplayChatSize: (displayChatSize: boolean) => void;
   setDefaultImageDetail: (imageDetail: ImageDetail) => void;
+  setAutoScroll: (autoScroll: boolean) => void;
 }
 
 export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
@@ -59,6 +61,7 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
   menuWidth: _defaultMenuWidth,
   displayChatSize: _defaultDisplayChatSize,
   defaultImageDetail: _defaultImageDetail,
+  autoScroll: true,
   setOpenConfig: (openConfig: boolean) => {
     set((prev: ConfigSlice) => ({
       ...prev,
@@ -161,4 +164,10 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
       defaultImageDetail: imageDetail,
     }));
   },
+  setAutoScroll: (autoScroll: boolean) => {
+    set((prev: ConfigSlice) => ({
+      ...prev,
+      autoScroll: autoScroll,
+    }));
+  },
 });

src/store/store.ts

@@ -71,6 +71,7 @@ export const createPartializedState = (state: StoreState) => ({
   displayChatSize: state.displayChatSize,
   menuWidth: state.menuWidth,
   defaultImageDetail: state.defaultImageDetail,
+  autoScroll: state.autoScroll,
   customModels: state.customModels,
 });