🌍 fix(Translations): Map Partial langCode and Add Unit Tests (#2240)

client/src/localization/Translation.spec.ts

@@ -0,0 +1,37 @@
+import { getTranslations, localize } from './Translation';
+import English from './languages/Eng';
+import Spanish from './languages/Es';
+import French from './languages/Fr';
+
+describe('getTranslations', () => {
+  it('should return the correct language object for a valid language code', () => {
+    expect(getTranslations('en-US')).toEqual(English);
+    expect(getTranslations('fr-FR')).toEqual(French);
+  });
+
+  it('should return the correct language object for a language code without region', () => {
+    expect(getTranslations('fr')).toEqual(French);
+    expect(getTranslations('es')).toEqual(Spanish);
+  });
+
+  it('should return the English language object for an invalid language code', () => {
+    expect(getTranslations('invalid-code')).toEqual(English);
+  });
+});
+
+describe('localize', () => {
+  it('should return the correct localized phrase for a valid language code and phrase key', () => {
+    expect(localize('en-US', 'com_ui_examples')).toBe('Examples');
+    expect(localize('fr-FR', 'com_ui_examples')).toBe('Exemples');
+  });
+
+  it('should return the English phrase for an invalid language code or phrase key', () => {
+    expect(localize('invalid-code', 'com_ui_examples')).toBe('Examples');
+    expect(localize('en-US', 'invalid-key')).toBe('');
+  });
+
+  it('should correctly format placeholders in the phrase', () => {
+    expect(localize('en-US', 'com_endpoint_default_with_num', 'John')).toBe('default: John');
+    expect(localize('fr-FR', 'com_endpoint_default_with_num', 'Marie')).toBe('par défaut : Marie');
+  });
+});

client/src/localization/Translation.ts

@@ -20,7 +20,9 @@ import Hebrew from './languages/He';
 
 // === import additional language files here === //
 
-const languageMap: { [key: string]: unknown } = {
+type Language = Record<string, string>;
+
+const languageMap: Record<string, Language> = {
   'en-US': English,
   'ar-EG': Arabic,
   'zh-CN': Chinese,
@@ -61,8 +63,20 @@ if (!String.prototype.format) {
 
 // input: language code in string
 // returns an object of translated strings in the language
-export const getTranslations = (langCode: string) => {
-  return languageMap[langCode] || English;
+export const getTranslations = (langCode: string): Language => {
+  if (languageMap[langCode]) {
+    return languageMap[langCode];
+  }
+
+  const [langPart] = langCode.split('-');
+
+  const matchingLangCode = Object.keys(languageMap).find((key) => key.startsWith(langPart));
+
+  if (matchingLangCode) {
+    return languageMap[matchingLangCode];
+  }
+
+  return English;
 };
 
 // input: language code in string & phrase key in string

docs/contributions/translation_contribution.md

@@ -15,8 +15,8 @@ weight: -8
 ### Preparation
 Fork the [LibreChat repository](https://github.librechat.ai) and download it using git clone. See: [Getting Started for Contributors - GitHub](./how_to_contribute.md#github)  
 
-### Add your language to `Translation.tsx`:
-- Navigate to the `client\src\localization` folder and open the `Translation.tsx` file
+### Add your language to `Translation.ts`:
+- Navigate to the `client\src\localization` folder and open the `Translation.ts` file
 
 - At the beginning of the code, add your language below all the others in this format:
 
@@ -102,7 +102,7 @@ If you followed everything you should have ^^**one new file**^^  and ^^**3 modif
 ```bash
   new file:   client/src/localization/languages/**.tsx            <-----new language
   modified:   client/src/components/Nav/SettingsTabs/General.tsx
-  modified:   client/src/localization/Translation.tsx
+  modified:   client/src/localization/Translation.ts
   modified:   client/src/localization/languages/Eng.tsx
 ```
 !!! tip