LibreChat/client/src/locales
Danny Avila 3213f574c6
🪪 style: Improve a11y of Agent Cards in Marketplace (#10957)
* style: AgentCard and AgentGrid UI with improved layout and accessibility

- Updated AgentCard component to improve layout, including flexbox adjustments for better responsiveness and spacing.
- Added aria-label for agent description to enhance accessibility.
- Introduced a new translation key for agent description in the localization file.
- Modified AgentGrid to include horizontal margins for better alignment on various screen sizes.

* style: Update AgentCard description line clamp for improved readability

- Increased the line clamp for agent descriptions in the AgentCard component from 3 to 5 lines, enhancing the display of longer descriptions while maintaining a clean layout.

* feat: Integrate Agent Detail Dialog in AgentCard Component

- Enhanced the AgentCard component to include an OGDialog for displaying detailed agent information.
- Introduced AgentDetailContent to manage the content of the dialog, allowing users to view agent details and initiate chats directly from the card.
- Updated AgentGrid to utilize the new onSelect prop for agent selection, improving the interaction flow.
- Removed deprecated code related to agent detail handling in the Marketplace component for cleaner implementation.

* ci: Enhance AgentCard and Accessibility Tests with Improved Mocks and Keyboard Interaction

- Updated AgentCard tests to utilize the new onSelect prop for better interaction handling.
- Introduced comprehensive mocks for hooks and components to streamline testing and avoid testing internal implementations.
- Improved accessibility tests by ensuring keyboard interactions are properly handled and do not throw errors.
- Enhanced the overall structure of tests to support better readability and maintainability.
2025-12-13 09:10:43 -05:00
..
ar 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
bo 🌍 i18n: Add Tibetan and Ukrainian languages to localization (#8819) 2025-08-02 12:37:18 -04:00
bs 🌍 i18n: Add Bosnian and Norsk Bokmål Languages (#9176) 2025-08-20 14:17:23 -04:00
ca 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
cs 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
da 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
de 🌍 i18n: Update translation.json with latest translations (#10448) 2025-11-11 14:15:41 -05:00
en 🪪 style: Improve a11y of Agent Cards in Marketplace (#10957) 2025-12-13 09:10:43 -05:00
es 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
et 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
fa 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
fi 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
fr 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
he 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
hu 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
hy 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
id 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
it 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
ja 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
ka 🌍 i18n: Update translation.json with latest translations (#9704) 2025-09-19 06:06:40 -04:00
ko 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
lv 🌍 i18n: Update translation.json with latest translations (#10876) 2025-12-09 22:28:23 -05:00
nb 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
nl 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
pl 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
pt-BR 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
pt-PT 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
ru 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
sl 🌍 i18n: Add Slovenian Language (#9313) 2025-08-27 14:02:22 -04:00
sv 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
th 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
tr 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
ug feat: Add support for Armenian, Latvian, and Uyghur languages (#8227) 2025-07-03 11:16:33 -04:00
uk 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
vi 🌍 i18n: Update translation.json with latest translations (#10274) 2025-10-28 09:00:19 -04:00
zh-Hans 🌍 i18n: Update translation.json with latest translations (#10448) 2025-11-11 14:15:41 -05:00
zh-Hant 🌍 i18n: Update translation.json with latest translations (#10298) 2025-10-29 16:41:55 -04:00
i18n.ts 🌍 i18n: Add Slovenian Language (#9313) 2025-08-27 14:02:22 -04:00
README.md 🌍 i18n: Add Tibetan and Ukrainian languages to localization (#8819) 2025-08-02 12:37:18 -04:00
Translation.spec.ts 📦 feat: Move Shared Components to @librechat/client (#8685) 2025-07-27 12:19:01 -04:00

LibreChat Localization Guide

This guide explains how to add new languages to LibreChat's localization system.

Adding a New Language

To add a new language to LibreChat, follow these steps:

1. Add the Language to Locize Project

  • Navigate to the LibreChat locize project,
  • Click the "ADD LANGUAGE" button, typically found within the "..." menu of the "Start to translate" card on the project overview page.

2. Update the Language Selector Component

Edit client/src/components/Nav/SettingsTabs/General/General.tsx and add your new language option to the languageOptions array:

{ value: 'language-code', label: localize('com_nav_lang_language_name') },

Example:

{ value: 'bo', label: localize('com_nav_lang_tibetan') },
{ value: 'uk-UA', label: localize('com_nav_lang_ukrainian') },

Note: Use the appropriate language code format:

  • Use simple codes (e.g., bo) for languages without regional variants
  • Use region-specific codes (e.g., uk-UA) when needed

3. Add Localization Keys

In client/src/locales/en/translation.json, add the corresponding localization key for your language label:

"com_nav_lang_language_name": "Native Language Name",

Example:

"com_nav_lang_tibetan": "བོད་སྐད་",
"com_nav_lang_ukrainian": "Українська",

Best Practice: Use the native language name as the value.

4. Create the Translation File

Create a new directory and translation file:

mkdir -p client/src/locales/[language-code]

Create client/src/locales/[language-code]/translation.json with an empty JSON object:

{
}

Example:

  • client/src/locales/bo/translation.json
  • client/src/locales/uk/translation.json

5. Configure i18n

Update client/src/locales/i18n.ts:

  1. Import the new translation file:
import translationLanguageCode from './language-code/translation.json';
  1. Add it to the resources object:
export const resources = {
  // ... existing languages
  'language-code': { translation: translationLanguageCode },
} as const;

Example:

import translationBo from './bo/translation.json';
import translationUk from './uk/translation.json';

export const resources = {
  // ... existing languages
  bo: { translation: translationBo },
  uk: { translation: translationUk },
} as const;

6. Handle Fallback Languages (Optional)

If your language should fall back to a specific language when translations are missing, update the fallbackLng configuration in i18n.ts:

fallbackLng: {
  'language-variant': ['fallback-language', 'en'],
  // ... existing fallbacks
},

Translation Process

After adding a new language:

  1. The empty translation file will be populated through LibreChat's automated translation platform
  2. Only the English (en) translation file should be manually updated
  3. Other language translations are managed externally

Language Code Standards

  • Use ISO 639-1 codes for most languages (e.g., en, fr, de)
  • Use ISO 639-1 with region codes when needed (e.g., pt-BR, zh-Hans)
  • Tibetan uses bo (Bodic)
  • Ukrainian uses uk or uk-UA with region

Testing

After adding a new language:

  1. Restart the development server
  2. Navigate to Settings > General
  3. Verify your language appears in the dropdown
  4. Select it to ensure it changes the UI language code

Notes

  • Keep language options alphabetically sorted in the dropdown for better UX
  • Always use native script for language names in the dropdown
  • The system will use English as fallback for any missing translations