🌎 i18n: React-i18next & i18next Integration (#5720)

* better i18n support an internationalization-framework.

* removed unused package

* auto sort for translation.json

* fixed tests with the new locales function

* added new CI actions from locize

* to use locize a mention in the README.md

* to use locize a mention in the README.md

* updated README.md and added TRANSLATION.md to the repo

* updated TRANSLATION.md badges

* updated README.md to go to the TRANSLATION.md when clicking on the Translation Progress badge

* updated TRANSLATION.md and added a new issue template.

* updated TRANSLATION.md and added a new issue template.

* updated issue template to add the iso code link.

* updated the new GitHub actions for `locize`

* updated label for new issue template --> i18n

* fixed type issue

* Fix eslint

* Fix eslint with key-spacing spacing

* fix: error type

* fix: handle undefined values in SortFilterHeader component

* fix: typing in Image component

* fix: handle optional promptGroup in PromptCard component

* fix: update localize function to accept string type and remove unnecessary JSX element

* fix: update localize function to enforce TranslationKeys type for better type safety

* fix: improve type safety and handle null values in Assistants component

* fix: enhance null checks for fileId in FilesListView component

* fix: localize 'Go back' button text in FilesListView component

* fix: update aria-label for menu buttons and add translation for 'Close Menu'

* docs: add Reasoning UI section for Chain-of-Thought AI models in README

* fix: enhance type safety by adding type for message in MultiMessage component

* fix: improve null checks and optional chaining in useAutoSave hook

* fix: improve handling of optional properties in cleanupPreset function

* fix: ensure isFetchingNextPage defaults to false and improve null checks for messages in Search component

* fix: enhance type safety and null checks in useBuildMessageTree hook

---------

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

client/src/components/Files/FileDashboardView.tsx

@@ -9,7 +9,7 @@ const FileDashboardView = () => {
   return (
     <div className="bg-[#f9f9f9] p-0 lg:p-7">
       <div className="ml-3 mt-3 flex flex-row justify-between">
-        {params?.vectorStoreId && (
+        {params.vectorStoreId && (
           <Button
             className="block lg:hidden"
             variant={'outline'}

client/src/components/Files/FileList/DataTableFile.tsx

@@ -244,9 +244,10 @@ export default function DataTableFile<TData, TValue>({
       <div className="ml-4 mr-4 mt-4 flex h-auto items-center justify-end space-x-2 py-4 sm:ml-0 sm:mr-0 sm:h-0">
         <div className="text-muted-foreground ml-2 flex-1 text-sm">
           {localize(
-            'com_files_number_selected',
-            `${table.getFilteredSelectedRowModel().rows.length}`,
-            `${table.getFilteredRowModel().rows.length}`,
+            'com_files_number_selected', {
+              0: `${table.getFilteredSelectedRowModel().rows.length}`,
+              1: `${table.getFilteredRowModel().rows.length}`,
+            },
           )}
         </div>
         <Button

client/src/components/Files/FilesListView.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 import FileSidePanel from './FileList/FileSidePanel';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import FilesSectionSelector from './FilesSectionSelector';
+import { useLocalize } from '~/hooks';
 import { Button } from '../ui';
 
 export default function FilesListView() {
   const params = useParams();
   const navigate = useNavigate();
+  const localize = useLocalize();
   return (
     <div className="bg-[#f9f9f9] p-0 lg:p-7">
       <div className="m-4 flex w-full flex-row justify-between md:m-2">
         <FilesSectionSelector />
-        {params?.fileId && (
+        {params.fileId != null && params.fileId && (
           <Button
             className="block lg:hidden"
             variant={'outline'}
@@ -20,21 +22,21 @@ export default function FilesListView() {
               navigate('/d/files');
             }}
           >
-            Go back
+            {localize('com_ui_go_back')}
           </Button>
         )}
       </div>
       <div className="flex w-full flex-row divide-x">
         <div
           className={`mr-2 w-full xl:w-1/3 ${
-            params.fileId ? 'hidden w-1/2 lg:block lg:w-1/2' : 'md:w-full'
+            params.fileId != null && params.fileId ? 'hidden w-1/2 lg:block lg:w-1/2' : 'md:w-full'
           }`}
         >
           <FileSidePanel />
         </div>
         <div
           className={`h-[85vh] w-full overflow-y-auto xl:w-2/3 ${
-            params.fileId ? 'lg:w-1/2' : 'hidden md:w-1/2 lg:block'
+            params.fileId != null && params.fileId ? 'lg:w-1/2' : 'hidden md:w-1/2 lg:block'
           }`}
         >
           <Outlet />

client/src/components/Files/VectorStore/VectorStorePreview.tsx

@@ -178,7 +178,7 @@ export default function VectorStorePreview() {
             <Clock3 className="text-base text-gray-500 md:text-lg lg:text-xl" />
             &nbsp;Created At
           </span>
-          <span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.createdAt?.toString()}</span>
+          <span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.createdAt.toString()}</span>
         </div>
       </div>