🌎 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/hooks/Input/useAutoSave.ts

@@ -14,7 +14,7 @@ export const useAutoSave = ({
   setFiles,
 }: {
   conversationId?: string | null;
-  textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  textAreaRef?: React.RefObject<HTMLTextAreaElement>;
   files: Map<string, ExtendedFile>;
   setFiles: SetterOrUpdater<Map<string, ExtendedFile>>;
 }) => {
@@ -51,7 +51,7 @@ export const useAutoSave = ({
   const restoreFiles = useCallback(
     (id: string) => {
       const filesDraft = JSON.parse(
-        localStorage.getItem(`${LocalStorageKeys.FILES_DRAFT}${id}`) || '[]',
+        (localStorage.getItem(`${LocalStorageKeys.FILES_DRAFT}${id}`) ?? '') || '[]',
       ) as string[];
 
       if (filesDraft.length === 0) {
@@ -66,7 +66,10 @@ export const useAutoSave = ({
         const tempFileData = fileList?.find((f) => f.temp_file_id === fileId);
         const { fileToRecover, fileIdToRecover } = fileData
           ? { fileToRecover: fileData, fileIdToRecover: fileId }
-          : { fileToRecover: tempFileData, fileIdToRecover: tempFileData?.temp_file_id || fileId };
+          : {
+            fileToRecover: tempFileData,
+            fileIdToRecover: (tempFileData?.temp_file_id ?? '') || fileId,
+          };
 
         if (fileToRecover) {
           setFiles((currentFiles) => {
@@ -87,7 +90,7 @@ export const useAutoSave = ({
 
   const restoreText = useCallback(
     (id: string) => {
-      const savedDraft = localStorage.getItem(`${LocalStorageKeys.TEXT_DRAFT}${id}`) || '';
+      const savedDraft = (localStorage.getItem(`${LocalStorageKeys.TEXT_DRAFT}${id}`) ?? '') || '';
       setValue('text', decodeBase64(savedDraft));
     },
     [setValue],
@@ -115,12 +118,12 @@ export const useAutoSave = ({
     // This useEffect is responsible for setting up and cleaning up the auto-save functionality
     // for the text area input. It saves the text to localStorage with a debounce to prevent
     // excessive writes.
-    if (!saveDrafts || !conversationId) {
+    if (!saveDrafts || conversationId == null || conversationId === '') {
       return;
     }
 
     const handleInput = debounce(() => {
-      if (textAreaRef.current && textAreaRef.current.value) {
+      if (textAreaRef?.current && textAreaRef.current.value) {
         localStorage.setItem(
           `${LocalStorageKeys.TEXT_DRAFT}${conversationId}`,
           encodeBase64(textAreaRef.current.value),
@@ -130,7 +133,7 @@ export const useAutoSave = ({
       }
     }, 1000);
 
-    const textArea = textAreaRef.current;
+    const textArea = textAreaRef?.current;
     if (textArea) {
       textArea.addEventListener('input', handleInput);
     }
@@ -149,7 +152,7 @@ export const useAutoSave = ({
     // It handles both text and file drafts, ensuring that the user's input is preserved
     // across different conversations.
 
-    if (!saveDrafts || !conversationId) {
+    if (!saveDrafts || conversationId == null || conversationId === '') {
       return;
     }
     if (conversationId === currentConversationId) {
@@ -160,7 +163,7 @@ export const useAutoSave = ({
     setFiles(new Map());
 
     try {
-      if (currentConversationId) {
+      if (currentConversationId != null && currentConversationId) {
         saveText(currentConversationId);
       }
 
@@ -187,7 +190,12 @@ export const useAutoSave = ({
     // It ensures that the file drafts are kept up-to-date and can be restored
     // when the conversation is revisited.
 
-    if (!saveDrafts || !conversationId || currentConversationId !== conversationId) {
+    if (
+      !saveDrafts ||
+      conversationId == null ||
+      conversationId === '' ||
+      currentConversationId !== conversationId
+    ) {
       return;
     }
 
@@ -202,7 +210,7 @@ export const useAutoSave = ({
   }, [files, conversationId, saveDrafts, currentConversationId, fileIds]);
 
   const clearDraft = useCallback(() => {
-    if (conversationId) {
+    if (conversationId != null && conversationId) {
       localStorage.removeItem(`${LocalStorageKeys.TEXT_DRAFT}${conversationId}`);
       localStorage.removeItem(`${LocalStorageKeys.FILES_DRAFT}${conversationId}`);
     }

client/src/hooks/Input/useMentions.ts

@@ -98,7 +98,7 @@ export default function useMentions({
             endpointsConfig,
           }),
         )
-        ?.filter(Boolean),
+        .filter(Boolean),
       [EModelEndpoint.azureAssistants]: listMap[EModelEndpoint.azureAssistants]
         ?.map(
           assistantMapFn({
@@ -107,7 +107,7 @@ export default function useMentions({
             endpointsConfig,
           }),
         )
-        ?.filter(Boolean),
+        .filter(Boolean),
     }),
     [listMap, assistantMap, endpointsConfig],
   );

client/src/hooks/Input/useTextToSpeechEdge.ts

@@ -67,7 +67,7 @@ function useTextToSpeechEdge({
         .catch((error) => {
           console.error('Error initializing TTS:', error);
           showToast({
-            message: localize('com_nav_tts_init_error', (error as Error).message),
+            message: localize('com_nav_tts_init_error', { 0: (error as Error).message }),
             status: 'error',
           });
         });
@@ -77,7 +77,7 @@ function useTextToSpeechEdge({
         .catch((error) => {
           console.error('Error initializing TTS:', error);
           showToast({
-            message: localize('com_nav_tts_init_error', (error as Error).message),
+            message: localize('com_nav_tts_init_error', { 0: (error as Error).message }),
             status: 'error',
           });
         });
@@ -168,7 +168,7 @@ function useTextToSpeechEdge({
         } catch (error) {
           console.error('Error generating speech:', error);
           showToast({
-            message: localize('com_nav_audio_play_error', (error as Error).message),
+            message: localize('com_nav_audio_play_error', { 0: (error as Error).message }),
             status: 'error',
           });
           setIsSpeaking(false);

client/src/hooks/Input/useTextToSpeechExternal.ts

@@ -67,7 +67,7 @@ function useTextToSpeechExternal({
         return playPromise().catch(console.error);
       }
       console.error(error);
-      showToast({ message: localize('com_nav_audio_play_error', error.message), status: 'error' });
+      showToast({ message: localize('com_nav_audio_play_error', { 0: error.message }), status: 'error' });
     });
 
     newAudio.onended = () => {
@@ -123,7 +123,7 @@ function useTextToSpeechExternal({
     },
     onError: (error: unknown) => {
       showToast({
-        message: localize('com_nav_audio_process_error', (error as Error).message),
+        message: localize('com_nav_audio_process_error', { 0: (error as Error).message }),
         status: 'error',
       });
     },

client/src/hooks/Input/useTextarea.ts

@@ -96,14 +96,12 @@ export default function useTextarea({
         return localize('com_endpoint_message_not_appendable');
       }
 
-      const sender =
-        isAssistant || isAgent
-          ? getEntityName({ name: entityName, isAgent, localize })
-          : getSender(conversation as TEndpointOption);
+      const sender = isAssistant || isAgent
+        ? getEntityName({ name: entityName, isAgent, localize })
+        : getSender(conversation as TEndpointOption);
 
       return `${localize(
-        'com_endpoint_message_new',
-        sender ? sender : localize('com_endpoint_ai'),
+        'com_endpoint_message_new', { 0: sender ? sender : localize('com_endpoint_ai') },
       )}`;
     };