✍️ refactor(Textarea): Optimize Text Input & Enhance UX (#2058)

* refactor(useDebouncedInput): make object as input arg and accept setter

* refactor(ChatForm/Textarea): consolidate textarea/form logic to one component, use react-hook-form, programmatically click send button instead of passing submitMessage, forwardRef and memoize SendButton

* refactor(Textarea): use Controller field value to avoid manual update of ref

* chore: remove forms provider

* chore: memoize AttachFile

* refactor(ChatForm/SendButton): only re-render SendButton when there is text input

* chore: make iconURL bigger

* chore: optimize Root/Nav

* refactor(SendButton): memoize disabled prop based on text

* chore: memoize Nav and ChatForm

* chore: remove textarea ref text on submission

* feat(EditMessage): Make Esc exit the edit mode and dismiss changes when editing a message

* style(MenuItem): Display the ☑️  icon only on the selected model

client/src/components/Nav/MobileNav.tsx

@@ -20,7 +20,12 @@ export default function MobileNav({
         type="button"
         data-testid="mobile-header-new-chat-button"
         className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
-        onClick={() => setNavVisible((prev) => !prev)}
+        onClick={() =>
+          setNavVisible((prev) => {
+            localStorage.setItem('navVisible', JSON.stringify(!prev));
+            return !prev;
+          })
+        }
       >
         <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
         <svg

client/src/components/Nav/Nav.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useCallback, useEffect, useState, useMemo } from 'react';
+import { useCallback, useEffect, useState, useMemo, memo } from 'react';
 import type { ConversationListResponse } from 'librechat-data-provider';
 import {
   useMediaQuery,
@@ -21,7 +21,7 @@ import NewChat from './NewChat';
 import { cn } from '~/utils';
 import store from '~/store';
 
-export default function Nav({ navVisible, setNavVisible }) {
+const Nav = ({ navVisible, setNavVisible }) => {
   const { conversationId } = useParams();
   const { isAuthenticated } = useAuthContext();
 
@@ -97,7 +97,10 @@ export default function Nav({ navVisible, setNavVisible }) {
   };
 
   const toggleNavVisible = () => {
-    setNavVisible((prev: boolean) => !prev);
+    setNavVisible((prev: boolean) => {
+      localStorage.setItem('navVisible', JSON.stringify(!prev));
+      return !prev;
+    });
     if (newUser) {
       setNewUser(false);
     }
@@ -179,4 +182,6 @@ export default function Nav({ navVisible, setNavVisible }) {
       </Tooltip>
     </TooltipProvider>
   );
-}
+};
+
+export default memo(Nav);

client/src/components/Nav/NewChat.tsx

@@ -1,16 +1,11 @@
 import { EModelEndpoint } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
-import {
-  useLocalize,
-  useConversation,
-  useNewConvo,
-  useOriginNavigate,
-  useLocalStorage,
-} from '~/hooks';
+import { useLocalize, useNewConvo, useLocalStorage } from '~/hooks';
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
 import { NewChatIcon } from '~/components/svg';
 import { getEndpointField } from '~/utils';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
+import { useNavigate } from 'react-router-dom';
 
 export default function NewChat({
   toggleNav,
@@ -20,8 +15,7 @@ export default function NewChat({
   subHeaders?: React.ReactNode;
 }) {
   const { newConversation: newConvo } = useNewConvo();
-  const { newConversation } = useConversation();
-  const navigate = useOriginNavigate();
+  const navigate = useNavigate();
   const localize = useLocalize();
 
   const { data: endpointsConfig } = useGetEndpointsQuery();
@@ -36,8 +30,7 @@ export default function NewChat({
     if (event.button === 0 && !event.ctrlKey) {
       event.preventDefault();
       newConvo();
-      newConversation();
-      navigate('new');
+      navigate('/c/new');
       toggleNav();
     }
   };