From 1c459ed3af1b353c3a46ac25217d7396c56a8a55 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:52:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=B1=EF=B8=8F=20feat:=20Switch=20Scroll?=
 =?UTF-8?q?=20Button=20setting=20(#5332)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Chat/Messages/MessagesView.tsx |  6 +++-
 .../components/Nav/SettingsTabs/Chat/Chat.tsx |  4 +++
 .../SettingsTabs/Chat/MaximizeChatSpace.tsx   |  1 -
 .../Nav/SettingsTabs/Chat/ScrollButton.tsx    | 35 +++++++++++++++++++
 client/src/localization/languages/Eng.ts      |  1 +
 client/src/store/settings.ts                  |  1 +
 6 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx

diff --git a/client/src/components/Chat/Messages/MessagesView.tsx b/client/src/components/Chat/Messages/MessagesView.tsx
index ef3d385edd..5097ddb497 100644
--- a/client/src/components/Chat/Messages/MessagesView.tsx
+++ b/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>
diff --git a/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx b/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
index 6da67d5915..1fd2e5c7bd 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/Chat.tsx
+++ b/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 />
diff --git a/client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx b/client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx
index 5b518ed86f..e527eaf545 100644
--- a/client/src/components/Nav/SettingsTabs/Chat/MaximizeChatSpace.tsx
+++ b/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';
diff --git a/client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx b/client/src/components/Nav/SettingsTabs/Chat/ScrollButton.tsx
new file mode 100644
index 0000000000..5b87b18169
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/localization/languages/Eng.ts b/client/src/localization/languages/Eng.ts
index 140b884f5d..30a578f96e 100644
--- a/client/src/localization/languages/Eng.ts
+++ b/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',
diff --git a/client/src/store/settings.ts b/client/src/store/settings.ts
index 7008d40268..901c48c2c4 100644
--- a/client/src/store/settings.ts
+++ b/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),