🌎 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/Endpoints/Settings/Advanced.tsx

@@ -121,7 +121,7 @@ export default function Settings({
               <Label htmlFor="temp-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_temperature')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', '1')})
+                  ({localize('com_endpoint_default_with_num', { 0: '1' })})
                 </small>
               </Label>
               <InputNumber

client/src/components/Endpoints/Settings/Assistants.tsx

@@ -27,12 +27,12 @@ export default function Settings({ conversation, setOption, models, readonly }:
     conversation ?? {};
 
   const currentList = useMemo(
-    () => Object.values(assistantListMap?.[endpoint ?? ''] ?? {}) as Assistant[],
+    () => Object.values(assistantListMap[endpoint ?? ''] ?? {}) as Assistant[],
     [assistantListMap, endpoint],
   );
 
   const assistants = useMemo(() => {
-    const currentAssistants = (currentList ?? []).map(({ id, name }) => ({
+    const currentAssistants = currentList.map(({ id, name }) => ({
       label: name,
       value: id,
     }));
@@ -52,8 +52,8 @@ export default function Settings({ conversation, setOption, models, readonly }:
   });
 
   const activeAssistant = useMemo(() => {
-    if (assistant_id) {
-      return assistantListMap[endpoint ?? '']?.[assistant_id];
+    if (assistant_id != null && assistant_id) {
+      return assistantListMap[endpoint ?? '']?.[assistant_id] as Assistant | null;
     }
 
     return null;
@@ -70,11 +70,13 @@ export default function Settings({ conversation, setOption, models, readonly }:
   }, [models, activeAssistant, localize]);
 
   const [assistantValue, setAssistantValue] = useState<Option>(
-    activeAssistant ? { label: activeAssistant.name, value: activeAssistant.id } : defaultOption,
+    activeAssistant != null
+      ? { label: activeAssistant.name ?? '', value: activeAssistant.id }
+      : defaultOption,
   );
 
   useEffect(() => {
-    if (assistantValue && assistantValue.value === '') {
+    if (assistantValue.value === '') {
       setOption('presetOverride')({
         assistant_id: assistantValue.value,
       } as Partial<TPreset>);
@@ -95,7 +97,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
       return;
     }
 
-    const assistant = assistantListMap[endpoint ?? '']?.[value];
+    const assistant = assistantListMap[endpoint ?? '']?.[value] as Assistant | null;
     if (!assistant) {
       setAssistantValue(defaultOption);
       return;
@@ -103,7 +105,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
 
     setAssistantValue({
       label: assistant.name ?? '',
-      value: assistant.id ?? '',
+      value: assistant.id || '',
     });
     setOption('assistant_id')(assistant.id);
     if (assistant.model) {

client/src/components/Endpoints/Settings/Examples.tsx

@@ -37,7 +37,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
                 <TextareaAutosize
                   id={`input-${idx}`}
                   disabled={readonly}
-                  value={example?.input?.content || ''}
+                  value={example.input.content || ''}
                   onChange={(e) => setExample(idx, 'input', e.target.value ?? null)}
                   placeholder="Set example input. Example is ignored if empty."
                   className={cn(
@@ -62,7 +62,7 @@ function Examples({ readonly, examples, setExample, addExample, removeExample }:
                 <TextareaAutosize
                   id={`output-${idx}`}
                   disabled={readonly}
-                  value={example?.output?.content || ''}
+                  value={example.output.content || ''}
                   onChange={(e) => setExample(idx, 'output', e.target.value ?? null)}
                   placeholder={'Set example output. Example is ignored if empty.'}
                   className={cn(

client/src/components/Endpoints/Settings/Google.tsx

@@ -180,7 +180,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_top_p')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', google.topP.default + '')})
+                  ({localize('com_endpoint_default_with_num', { 0: google.topP.default + '' })})
                 </small>
               </Label>
               <InputNumber
@@ -221,7 +221,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <Label htmlFor="top-k-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_top_k')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', google.topK.default + '')})
+                  ({localize('com_endpoint_default_with_num',{ 0: google.topK.default + '' })})
                 </small>
               </Label>
               <InputNumber
@@ -261,7 +261,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <Label htmlFor="max-tokens-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_max_output_tokens')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', google.maxOutputTokens.default + '')})
+                  ({localize('com_endpoint_default_with_num', { 0: google.maxOutputTokens.default + '' })})
                 </small>
               </Label>
               <InputNumber

client/src/components/Endpoints/Settings/Plugins.tsx

@@ -226,7 +226,7 @@ export default function Settings({
               <Label htmlFor="temp-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_temperature')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', '0.8')})
+                  ({localize('com_endpoint_default_with_num', { 0: '0.8' })})
                 </small>
               </Label>
               <InputNumber
@@ -266,7 +266,7 @@ export default function Settings({
               <Label htmlFor="top-p-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_top_p')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', '1')})
+                  ({localize('com_endpoint_default_with_num', { 0: '1' })})
                 </small>
               </Label>
               <InputNumber
@@ -307,7 +307,7 @@ export default function Settings({
               <Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_frequency_penalty')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', '0')})
+                  ({localize('com_endpoint_default_with_num', { 0: '0' })})
                 </small>
               </Label>
               <InputNumber
@@ -348,7 +348,7 @@ export default function Settings({
               <Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
                 {localize('com_endpoint_presence_penalty')}{' '}
                 <small className="opacity-40">
-                  ({localize('com_endpoint_default_with_num', '0')})
+                  ({localize('com_endpoint_default_with_num', { 0: '0' })})
                 </small>
               </Label>
               <InputNumber