♻️ refactor: Replace fontSize Recoil atom with Jotai (#10171)

* fix: reapply chat font size on load

* refactor: streamline font size handling in localStorage

* fix: update matchMedia mock to accurately reflect desktop and touchscreen capabilities

* refactor: implement Jotai for font size management and initialize on app load

- Replaced Recoil with Jotai for font size state management across components.
- Added a new `fontSize` atom to handle font size changes and persist them in localStorage.
- Implemented `initializeFontSize` function to apply saved font size on app load.
- Updated relevant components to utilize the new font size atom.

---------

Co-authored-by: ddooochii <ddooochii@gmail.com>
Co-authored-by: Danny Avila <danny@librechat.ai>

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

@@ -1,10 +1,12 @@
 import React, { useMemo } from 'react';
+import { useAtomValue } from 'jotai';
 import { useRecoilValue } from 'recoil';
 import type { TMessageContentParts } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
 import { useMessageHelpers, useLocalize, useAttachments } from '~/hooks';
 import MessageIcon from '~/components/Chat/Messages/MessageIcon';
 import ContentParts from './Content/ContentParts';
+import { fontSizeAtom } from '~/store/fontSize';
 import SiblingSwitch from './SiblingSwitch';
 import MultiMessage from './MultiMessage';
 import HoverButtons from './HoverButtons';
@@ -36,7 +38,7 @@ export default function Message(props: TMessageProps) {
     regenerateMessage,
   } = useMessageHelpers(props);
 
-  const fontSize = useRecoilValue(store.fontSize);
+  const fontSize = useAtomValue(fontSizeAtom);
   const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
   const { children, messageId = null, isCreatedByUser } = message ?? {};
 

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

@@ -1,10 +1,12 @@
 import { useState } from 'react';
+import { useAtomValue } from 'jotai';
 import { useRecoilValue } from 'recoil';
 import { CSSTransition } from 'react-transition-group';
 import type { TMessage } from 'librechat-data-provider';
 import { useScreenshot, useMessageScrolling, useLocalize } from '~/hooks';
 import ScrollToBottom from '~/components/Messages/ScrollToBottom';
 import { MessagesViewProvider } from '~/Providers';
+import { fontSizeAtom } from '~/store/fontSize';
 import MultiMessage from './MultiMessage';
 import { cn } from '~/utils';
 import store from '~/store';
@@ -15,7 +17,7 @@ function MessagesViewContent({
   messagesTree?: TMessage[] | null;
 }) {
   const localize = useLocalize();
-  const fontSize = useRecoilValue(store.fontSize);
+  const fontSize = useAtomValue(fontSizeAtom);
   const { screenshotTargetRef } = useScreenshot();
   const scrollButtonPreference = useRecoilValue(store.showScrollButton);
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);

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

@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
+import { useAtomValue } from 'jotai';
 import { useRecoilValue } from 'recoil';
 import { useAuthContext, useLocalize } from '~/hooks';
 import type { TMessageProps, TMessageIcon } from '~/common';
 import MinimalHoverButtons from '~/components/Chat/Messages/MinimalHoverButtons';
 import Icon from '~/components/Chat/Messages/MessageIcon';
 import SearchContent from './Content/SearchContent';
+import { fontSizeAtom } from '~/store/fontSize';
 import SearchButtons from './SearchButtons';
 import SubRow from './SubRow';
 import { cn } from '~/utils';
@@ -34,8 +36,8 @@ const MessageBody = ({ message, messageLabel, fontSize }) => (
 );
 
 export default function SearchMessage({ message }: Pick<TMessageProps, 'message'>) {
+  const fontSize = useAtomValue(fontSizeAtom);
   const UsernameDisplay = useRecoilValue<boolean>(store.UsernameDisplay);
-  const fontSize = useRecoilValue(store.fontSize);
   const { user } = useAuthContext();
   const localize = useLocalize();
 

client/src/components/Chat/Messages/ui/MessageRender.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, memo } from 'react';
+import { useAtomValue } from 'jotai';
 import { useRecoilValue } from 'recoil';
 import { type TMessage } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
@@ -9,6 +10,7 @@ import HoverButtons from '~/components/Chat/Messages/HoverButtons';
 import MessageIcon from '~/components/Chat/Messages/MessageIcon';
 import { Plugin } from '~/components/Messages/Content';
 import SubRow from '~/components/Chat/Messages/SubRow';
+import { fontSizeAtom } from '~/store/fontSize';
 import { MessageContext } from '~/Providers';
 import { useMessageActions } from '~/hooks';
 import { cn, logger } from '~/utils';
@@ -58,8 +60,8 @@ const MessageRender = memo(
       isMultiMessage,
       setCurrentEditId,
     });
+    const fontSize = useAtomValue(fontSizeAtom);
     const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
-    const fontSize = useRecoilValue(store.fontSize);
 
     const handleRegenerateMessage = useCallback(() => regenerateMessage(), [regenerateMessage]);
     const hasNoChildren = !(msg?.children?.length ?? 0);

client/src/components/Messages/ContentRender.tsx

@@ -1,5 +1,6 @@
-import { useRecoilValue } from 'recoil';
 import { useCallback, useMemo, memo } from 'react';
+import { useAtomValue } from 'jotai';
+import { useRecoilValue } from 'recoil';
 import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
 import ContentParts from '~/components/Chat/Messages/Content/ContentParts';
@@ -9,6 +10,7 @@ import HoverButtons from '~/components/Chat/Messages/HoverButtons';
 import MessageIcon from '~/components/Chat/Messages/MessageIcon';
 import { useAttachments, useMessageActions } from '~/hooks';
 import SubRow from '~/components/Chat/Messages/SubRow';
+import { fontSizeAtom } from '~/store/fontSize';
 import { cn, logger } from '~/utils';
 import store from '~/store';
 
@@ -60,8 +62,8 @@ const ContentRender = memo(
       isMultiMessage,
       setCurrentEditId,
     });
+    const fontSize = useAtomValue(fontSizeAtom);
     const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
-    const fontSize = useRecoilValue(store.fontSize);
 
     const handleRegenerateMessage = useCallback(() => regenerateMessage(), [regenerateMessage]);
     const isLast = useMemo(

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

@@ -1,15 +1,14 @@
-import { useRecoilState } from 'recoil';
-import { Dropdown, applyFontSize } from '@librechat/client';
+import { useAtom } from 'jotai';
+import { Dropdown } from '@librechat/client';
+import { fontSizeAtom } from '~/store/fontSize';
 import { useLocalize } from '~/hooks';
-import store from '~/store';
 
 export default function FontSizeSelector() {
-  const [fontSize, setFontSize] = useRecoilState(store.fontSize);
   const localize = useLocalize();
+  const [fontSize, setFontSize] = useAtom(fontSizeAtom);
 
   const handleChange = (val: string) => {
     setFontSize(val);
-    applyFontSize(val);
   };
 
   const options = [

client/src/components/Share/Message.tsx

@@ -1,4 +1,4 @@
-import { useRecoilValue } from 'recoil';
+import { useAtomValue } from 'jotai';
 import type { TMessageProps } from '~/common';
 import MinimalHoverButtons from '~/components/Chat/Messages/MinimalHoverButtons';
 import MessageContent from '~/components/Chat/Messages/Content/MessageContent';
@@ -6,16 +6,16 @@ import SearchContent from '~/components/Chat/Messages/Content/SearchContent';
 import SiblingSwitch from '~/components/Chat/Messages/SiblingSwitch';
 import { Plugin } from '~/components/Messages/Content';
 import SubRow from '~/components/Chat/Messages/SubRow';
+import { fontSizeAtom } from '~/store/fontSize';
 import { MessageContext } from '~/Providers';
 import { useAttachments } from '~/hooks';
 
 import MultiMessage from './MultiMessage';
 import { cn } from '~/utils';
-import store from '~/store';
 
 import Icon from './MessageIcon';
 export default function Message(props: TMessageProps) {
-  const fontSize = useRecoilValue(store.fontSize);
+  const fontSize = useAtomValue(fontSizeAtom);
   const {
     message,
     siblingIdx,