How to add a new language to LibreChat 🌍

Minimum Requirements:

1. Good knowledge of the language (some terms may undergo significant changes during translation)
2. A text editor is required. While options like Notepad or Notepad++ are available, it is recommended to use VSCode as it is more suitable for this task..

Language Translation

Preparation

Fork the LibreChat repository and download it using git clone. See: Getting Started - GitHub

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:

  import Language-name from './languages/** ';

  Example (English):import English from './languages/Eng';

• Further down in the code, add in the language mapping, the following:

  '**-**': LanguageName,

Replace **-** with the local identifier of your language (ask ChatGPT or search it on Google). Replace LanguageName with the name of your language.

Example (English): 'en-US': English,

Create your new language file

• Go into the client\src\localization\languages folder and create a file named as follows: **.tsx

  Example: Eng.tsx

• Copy all the content from Eng.tsx into your file and modify it as follows:

  Eng.tsx

  // your-language-name phrases
   
  export default {
    com_ui_examples: 'Examples',
    // more translations here...

  Translate only the part after the :. Example:

  **.tsx (new language)

  // my-language phrases
   
  export default {
    com_ui_examples: 'This is a translated example',
    // Add more translations here
  }

Add your language to Eng.tsx

Open Eng.tsx and add your language to the language list in the bottom of the document.

Add your language to the menu

• Navigate to the file client\src\components\Nav\SettingsTabs\General\General.tsx.

• Add your language to the LangSelector variable in the following way:

  LangSelector

  export const LangSelector = ({
    //other code
          <option value="en-US">{localize(lang, 'com_nav_lang_english')}</option>
          //other languages...
          <option value="**">{localize(lang, 'com_nav_lang_your-language-name')}</option>
        </select>
      </div>
    );
  };

You should only need to add one line of code:

<option value="**-**">{localize(lang, 'com_nav_lang_your-language-name')}</option>

Summary

If you followed everything you should have one new file and 3 modified files:

  new file:   client/src/localization/languages/**.tsx                       <-----new language
  modified:   client/src/components/Nav/SettingsTabs/General/General.tsx
  modified:   client/src/localization/Translation.ts
  modified:   client/src/localization/languages/Eng.tsx

Commit and create a new PR

See: Make a PR