chore: Translation Fixes, Lint Error Corrections, and Additional Translations (#788)

* fix translation and small lint error

* changed from localize to useLocalize hook

* changed to useLocalize

client/src/components/Nav/ClearConvos.tsx

@@ -4,15 +4,14 @@ import DialogTemplate from '~/components/ui/DialogTemplate';
 import { ClearChatsButton } from './SettingsTabs/';
 import { useClearConversationsMutation } from 'librechat-data-provider';
 import store from '~/store';
-import { useRecoilValue } from 'recoil';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
 
 const ClearConvos = ({ open, onOpenChange }) => {
   const { newConversation } = store.useConversation();
   const { refreshConversations } = store.useConversations();
   const clearConvosMutation = useClearConversationsMutation();
   const [confirmClear, setConfirmClear] = useState(false);
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   const clearConvos = useCallback(() => {
     if (confirmClear) {
@@ -34,10 +33,10 @@ const ClearConvos = ({ open, onOpenChange }) => {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
-        title={localize(lang, 'com_nav_clear_conversation')}
+        title={localize('com_nav_clear_conversation')}
         className="w-full max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
         headerClassName="border-none"
-        description={localize(lang, 'com_nav_clear_conversation_confirm_message')}
+        description={localize('com_nav_clear_conversation_confirm_message')}
         buttons={
           <ClearChatsButton
             showText={false}

client/src/components/Nav/ExportConversation/ExportConversation.jsx

@@ -6,11 +6,11 @@ import { cn } from '~/utils/';
 import ExportModel from './ExportModel';
 
 import store from '~/store';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
 
 const ExportConversation = forwardRef(() => {
   const [open, setOpen] = useState(false);
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   const conversation = useRecoilValue(store.conversation) || {};
 
@@ -35,7 +35,7 @@ const ExportConversation = forwardRef(() => {
         onClick={clickHandler}
       >
         <Download size={16} />
-        {localize(lang, 'com_nav_export_conversation')}
+        {localize('com_nav_export_conversation')}
       </button>
 
       <ExportModel open={open} onOpenChange={setOpen} />

client/src/components/Nav/MobileNav.jsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-
 import store from '~/store';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
 
 export default function MobileNav({ setNavVisible }) {
   const conversation = useRecoilValue(store.conversation);
   const { newConversation } = store.useConversation();
   const { title = 'New Chat' } = conversation || {};
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   return (
     <div className="fixed left-0 right-0 top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
@@ -17,7 +16,7 @@ export default function MobileNav({ setNavVisible }) {
         className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-0 focus:ring-inset focus:ring-white dark:hover:text-white"
         onClick={() => setNavVisible((prev) => !prev)}
       >
-        <span className="sr-only">{localize(lang, 'com_nav_open_sidebar')}</span>
+        <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
         <svg
           stroke="currentColor"
           fill="none"
@@ -36,7 +35,7 @@ export default function MobileNav({ setNavVisible }) {
         </svg>
       </button>
       <h1 className="flex-1 text-center text-base font-normal">
-        {title || localize(lang, 'com_ui_new_chat')}
+        {title || localize('com_ui_new_chat')}
       </h1>
       <button type="button" className="px-3" onClick={() => newConversation()}>
         <svg

client/src/components/Nav/NavLinks.jsx

@@ -8,7 +8,7 @@ import NavLink from './NavLink';
 import Logout from './Logout';
 import { ExportModel } from './ExportConversation';
 import { LinkIcon, DotsIcon, GearIcon } from '~/components';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { cn } from '~/utils/';
 
@@ -19,7 +19,7 @@ export default function NavLinks() {
   const [showClearConvos, setShowClearConvos] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const { user } = useAuthContext();
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   const conversation = useRecoilValue(store.conversation) || {};
 
@@ -60,7 +60,7 @@ export default function NavLinks() {
                 </div>
               </div>
               <div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
-                {user?.name || localize(lang, 'com_nav_user')}
+                {user?.name || localize('com_nav_user')}
               </div>
               <DotsIcon />
             </Menu.Button>
@@ -82,7 +82,7 @@ export default function NavLinks() {
                       exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50',
                     )}
                     svg={() => <Download size={16} />}
-                    text={localize(lang, 'com_nav_export_conversation')}
+                    text={localize('com_nav_export_conversation')}
                     clickHandler={clickHandler}
                   />
                 </Menu.Item>
@@ -91,7 +91,7 @@ export default function NavLinks() {
                   <NavLink
                     className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
                     svg={() => <LinkIcon />}
-                    text={localize(lang, 'com_nav_help_faq')}
+                    text={localize('com_nav_help_faq')}
                     clickHandler={() => window.open('https://docs.librechat.ai/', '_blank')}
                   />
                 </Menu.Item>
@@ -99,7 +99,7 @@ export default function NavLinks() {
                   <NavLink
                     className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
                     svg={() => <GearIcon />}
-                    text={localize(lang, 'com_nav_settings')}
+                    text={localize('com_nav_settings')}
                     clickHandler={() => setShowSettings(true)}
                   />
                 </Menu.Item>

client/src/components/Nav/NewChat.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import store from '~/store';
-import { useRecoilValue } from 'recoil';
-import { localize } from '~/localization/Translation';
+import { useLocalize } from '~/hooks';
 
 export default function NewChat() {
   const { newConversation } = store.useConversation();
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   const clickHandler = () => {
     // dispatch(setInputValue(''));
@@ -33,7 +32,7 @@ export default function NewChat() {
         <line x1="12" y1="5" x2="12" y2="19" />
         <line x1="5" y1="12" x2="19" y2="12" />
       </svg>
-      {localize(lang, 'com_ui_new_chat')}
+      {localize('com_ui_new_chat')}
     </a>
   );
 }