🌎 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/Prompts/DeleteVersion.tsx

@@ -42,7 +42,7 @@ const DeleteVersion = ({
                   htmlFor="dialog-delete-confirm-prompt"
                   className="text-left text-sm font-medium"
                 >
-                  {localize('com_ui_delete_confirm_prompt_version_var', name)}
+                  {localize('com_ui_delete_confirm_prompt_version_var', { 0: name })}
                 </Label>
               </div>
             </div>

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -169,7 +169,7 @@ export default function VariableForm({
                     return (
                       <InputCombobox
                         options={field.config.options || []}
-                        placeholder={localize('com_ui_enter_var', field.config.variable)}
+                        placeholder={localize('com_ui_enter_var', { 0: field.config.variable })}
                         className={cn(
                           defaultTextProps,
                           'rounded px-3 py-2 focus:bg-surface-tertiary',
@@ -192,7 +192,7 @@ export default function VariableForm({
                         defaultTextProps,
                         'rounded px-3 py-2 focus:bg-surface-tertiary',
                       )}
-                      placeholder={localize('com_ui_enter_var', field.config.variable)}
+                      placeholder={localize('com_ui_enter_var', { 0: field.config.variable })}
                       maxRows={8}
                     />
                   );

client/src/components/Prompts/PromptForm.tsx

@@ -70,7 +70,7 @@ const PromptForm = () => {
 
   const selectedPrompt = useMemo(
     () => (prompts.length > 0 ? prompts[selectionIndex] : undefined),
-    [prompts, /* eslint-disable-line react-hooks/exhaustive-deps */ selectionIndex],
+    [prompts, selectionIndex],
   );
 
   const { groupsQuery } = useOutletContext<ReturnType<typeof usePromptGroupsNav>>();
@@ -102,7 +102,7 @@ const PromptForm = () => {
       );
     },
     onSuccess(data) {
-      if (alwaysMakeProd && data.prompt._id && data.prompt.groupId) {
+      if (alwaysMakeProd && data.prompt._id != null && data.prompt._id && data.prompt.groupId) {
         makeProductionMutation.mutate({
           id: data.prompt._id,
           groupId: data.prompt.groupId,
@@ -336,7 +336,7 @@ const PromptForm = () => {
                         variant="ghost"
                         className="h-10 w-10 border border-border-light p-0 lg:hidden"
                         onClick={() => setShowSidePanel(true)}
-                        aria-label={localize('com_ui_open_menu')}
+                        aria-label={localize('com_endpoint_open_menu')}
                       >
                         <Menu className="size-5" />
                       </Button>
@@ -382,8 +382,8 @@ const PromptForm = () => {
             onClick={() => setShowSidePanel(false)}
             aria-hidden={!showSidePanel}
             tabIndex={showSidePanel ? 0 : -1}
+            aria-label={localize('com_ui_close_menu')}
           />
-
           <div
             className="absolute inset-y-0 right-0 z-50 lg:hidden"
             style={{

client/src/components/Prompts/PromptVersions.tsx

@@ -111,12 +111,12 @@ const VersionCard = ({
       onClick={onClick}
       aria-selected={isSelected}
       role="tab"
-      aria-label={localize('com_ui_version_var', `${totalVersions - index}`)}
+      aria-label={localize('com_ui_version_var', { 0: `${totalVersions - index}` })}
     >
       <div className="flex flex-col gap-2">
         <div className="flex items-start justify-between lg:flex-col xl:flex-row">
           <h3 className="font-bold text-text-primary">
-            {localize('com_ui_version_var', `${totalVersions - index}`)}
+            {localize('com_ui_version_var', { 0: `${totalVersions - index}` })}
           </h3>
           <time className="text-xs text-text-secondary" dateTime={prompt.createdAt}>
             {format(new Date(prompt.createdAt), 'yyyy-MM-dd HH:mm')}

client/src/components/Prompts/SharePrompt.tsx

@@ -97,7 +97,7 @@ const SharePrompt = ({ group, disabled }: { group?: TPromptGroup; disabled: bool
       </OGDialogTrigger>
       <OGDialogContent className="w-11/12 max-w-lg" role="dialog" aria-labelledby="dialog-title">
         <OGDialogTitle id="dialog-title" className="truncate pr-2" title={group.name}>
-          {localize('com_ui_share_var', `"${group.name}"`)}
+          {localize('com_ui_share_var', { 0: `"${group.name}"` })}
         </OGDialogTitle>
         <form className="p-2" onSubmit={handleSubmit(onSubmit)} aria-describedby="form-description">
           <div id="form-description" className="sr-only">