🖱️ feat: Switch Scroll Button setting (#5332)

Author: berry-13

client/src/components/Chat/Messages/MessagesView.tsx

@@ -17,6 +17,7 @@ export default function MessagesView({
   Header?: ReactNode;
 }) {
   const localize = useLocalize();
+  const scrollButtonPreference = useRecoilValue(store.showScrollButton);
   const fontSize = useRecoilValue(store.fontSize);
   const { screenshotTargetRef } = useScreenshot();
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
@@ -83,7 +84,10 @@ export default function MessagesView({
           unmountOnExit={false}
           // appear
         >
-          {() => showScrollButton && <ScrollToBottom scrollHandler={handleSmoothToRef} />}
+          {() =>
+            showScrollButton &&
+            scrollButtonPreference && <ScrollToBottom scrollHandler={handleSmoothToRef} />
+          }
         </CSSTransition>
       </div>
     </div>

client/src/components/Nav/SettingsTabs/Chat/Chat.tsx

@@ -7,6 +7,7 @@ import { ForkSettings } from './ForkSettings';
 import ChatDirection from './ChatDirection';
 import ShowThinking from './ShowThinking';
 import LaTeXParsing from './LaTeXParsing';
+import ScrollButton from './ScrollButton';
 import ModularChat from './ModularChat';
 import SaveDraft from './SaveDraft';
 
@@ -31,6 +32,9 @@ function Chat() {
       <div className="pb-3">
         <SaveDraft />
       </div>
+      <div className="pb-3">
+        <ScrollButton />
+      </div>
       <ForkSettings />
       <div className="pb-3">
         <ModularChat />

client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx

@@ -1,5 +1,4 @@
 import { useRecoilState } from 'recoil';
-import HoverCardSettings from '../HoverCardSettings';
 import { Switch } from '~/components/ui/Switch';
 import useLocalize from '~/hooks/useLocalize';
 import store from '~/store';

client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx

@@ -0,0 +1,35 @@
+import { useRecoilState } from 'recoil';
+import { Switch } from '~/components/ui/Switch';
+import useLocalize from '~/hooks/useLocalize';
+import store from '~/store';
+
+export default function ScrollButton({
+  onCheckedChange,
+}: {
+  onCheckedChange?: (value: boolean) => void;
+}) {
+  const [showScrollButton, setShowScrollButton] = useRecoilState<boolean>(store.showScrollButton);
+  const localize = useLocalize();
+
+  const handleCheckedChange = (value: boolean) => {
+    setShowScrollButton(value);
+    if (onCheckedChange) {
+      onCheckedChange(value);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <div>{localize('com_nav_scroll_button')}</div>
+      </div>
+      <Switch
+        id="scrollButton"
+        checked={showScrollButton}
+        onCheckedChange={handleCheckedChange}
+        className="ml-4"
+        data-testid="scrollButton"
+      />
+    </div>
+  );
+}

client/src/localization/languages/Eng.ts

@@ -882,6 +882,7 @@ export default {
   com_nav_command_settings: 'Command Settings',
   com_nav_command_settings_description: 'Customize which commands are available in the chat',
   com_nav_no_search_results: 'No search results found',
+  com_nav_scroll_button: 'Scroll to the end button',
   com_nav_setting_general: 'General',
   com_nav_setting_chat: 'Chat',
   com_nav_setting_beta: 'Beta features',

client/src/store/settings.ts

@@ -33,6 +33,7 @@ const localStorageAtoms = {
   chatDirection: atomWithLocalStorage('chatDirection', 'LTR'),
   showCode: atomWithLocalStorage(LocalStorageKeys.SHOW_ANALYSIS_CODE, true),
   saveDrafts: atomWithLocalStorage('saveDrafts', true),
+  showScrollButton: atomWithLocalStorage('showScrollButton', true),
   forkSetting: atomWithLocalStorage('forkSetting', ''),
   splitAtTarget: atomWithLocalStorage('splitAtTarget', false),
   rememberDefaultFork: atomWithLocalStorage(LocalStorageKeys.REMEMBER_FORK_OPTION, false),