feat: auto-scroll to the bottom of the conversation (#1049)

* added button for autoscroll

* fix(General) removed bold

* fix(General) typescript error with checked={autoScroll}

* added return condition for new conversations

* refactor(Message) limit nesting

* fix(settings) used effects

* fix(Message) disabled autoscroll when search

* test(AutoScrollSwitch)

* fix(AutoScrollSwitch) test

* fix(ci): attempt to debug workflow

* refactor: move AutoScrollSwitch from General file, don't use cache for npm

* fix(ci): add test config to avoid redirects and silentRefresh

* chore: add back workflow caching

* chore(AutoScrollSwitch): remove comments, fix type issues, clarify switch intent

* refactor(Message): remove unnecessary message prop form scrolling condition

* fix(AutoScrollSwitch.spec): do not get by text

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>

client/src/components/Nav/SettingsTabs/AutoScrollSwitch.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent } from 'test/layout-test-utils';
+import AutoScrollSwitch from './AutoScrollSwitch';
+import { RecoilRoot } from 'recoil';
+
+describe('AutoScrollSwitch', () => {
+  /**
+   * Mock function to set the auto-scroll state.
+   */
+  let mockSetAutoScroll: jest.Mock<void, [boolean]> | ((value: boolean) => void) | undefined;
+
+  beforeEach(() => {
+    mockSetAutoScroll = jest.fn();
+  });
+
+  it('renders correctly', () => {
+    const { getByTestId } = render(
+      <RecoilRoot>
+        <AutoScrollSwitch />
+      </RecoilRoot>,
+    );
+
+    expect(getByTestId('autoScroll')).toBeInTheDocument();
+  });
+
+  it('calls onCheckedChange when the switch is toggled', () => {
+    const { getByTestId } = render(
+      <RecoilRoot>
+        <AutoScrollSwitch onCheckedChange={mockSetAutoScroll} />
+      </RecoilRoot>,
+    );
+    const switchElement = getByTestId('autoScroll');
+    fireEvent.click(switchElement);
+
+    expect(mockSetAutoScroll).toHaveBeenCalledWith(true);
+  });
+});

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

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

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

@@ -8,11 +8,12 @@ import {
   useOnClickOutside,
   useConversation,
   useConversations,
+  useLocalStorage,
 } from '~/hooks';
 import type { TDangerButtonProps } from '~/common';
+import AutoScrollSwitch from './AutoScrollSwitch';
 import DangerButton from './DangerButton';
 import store from '~/store';
-import useLocalStorage from '~/hooks/useLocalStorage';
 
 export const ThemeSelector = ({
   theme,
@@ -175,6 +176,9 @@ function General() {
             mutation={clearConvosMutation}
           />
         </div>
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <AutoScrollSwitch />
+        </div>
       </div>
     </Tabs.Content>
   );