diff --git a/client/src/localization/Translation.spec.ts b/client/src/localization/Translation.spec.ts new file mode 100644 index 0000000000..839b8e8272 --- /dev/null +++ b/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'); + }); +}); diff --git a/client/src/localization/Translation.tsx b/client/src/localization/Translation.ts similarity index 79% rename from client/src/localization/Translation.tsx rename to client/src/localization/Translation.ts index a2780e3210..bc8c5c1845 100644 --- a/client/src/localization/Translation.tsx +++ b/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; + +const languageMap: Record = { '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 diff --git a/docs/contributions/translation_contribution.md b/docs/contributions/translation_contribution.md index 3e00f82957..03c27747f5 100644 --- a/docs/contributions/translation_contribution.md +++ b/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