LibreChat/client/src/locales
Marco Beretta b4b5a2cd69
🪟 feat: DataTable update + Various UI enhancements (#9698)
* 🎨 feat: Enhance Import Conversations UI with loading state and new localization key

* fix: Correct pluralization in selected items message in translation.json

* Refactor Chat Input File Table Headers to Use SortFilterHeader Component

- Replaced button-based sorting headers in the Chat Input Files Table with a new SortFilterHeader component for better code organization and consistency.
- Updated the header for filename, updatedAt, and bytes columns to utilize the new component.

Enhance Navigation Component with Skeleton Loading States

- Added Skeleton loading states to the Nav component for better user experience during data fetching.
- Updated Suspense fallbacks for AgentMarketplaceButton and BookmarkNav components to display Skeletons.

Refactor Avatar Component for Improved UI

- Enhanced the Avatar component by adding a Label for drag-and-drop functionality.
- Improved styling and structure for the file upload area.

Update Shared Links Component for Better Error Handling and Sorting

- Improved error handling in the Shared Links component for fetching next pages and deleting shared links.
- Simplified the header rendering for sorting columns and added sorting functionality to the title and createdAt columns.

Refactor Archived Chats Component

- Merged ArchivedChats and ArchivedChatsTable components into a single ArchivedChats component for better maintainability.
- Implemented sorting and searching functionality with debouncing for improved performance.
- Enhanced the UI with better loading states and error handling.

Update DataTable Component for Sorting Icons

- Added sorting icons (ChevronUp, ChevronDown, ChevronsUpDown) to the DataTable headers for better visual feedback on sorting state.

Localization Updates

- Updated translation.json to fix missing translations and improve existing ones for better user experience.

*  feat: Update DataTable component to streamline props and enhance sorting icons

* fix: TS issues

* feat: polish and redefine DataTable + shared links and archived chats

* feat: enhance DataTable with column pinning and improve sorting functionality

* feat: enhance deepEqual function for array support and improve column style stability

* refactor: DataTable and ArchivedChats; fix: sorting ArchivedChats API

* feat(DataTable): Implement new DataTable component with hooks and optimized features

- Added DataTable component with support for virtual scrolling, row selection, and customizable columns.
- Introduced hooks for debouncing search input, managing row selection, and calculating column styles.
- Enhanced accessibility with keyboard navigation and selection checkboxes.
- Implemented skeleton loading state for better user experience during data fetching.
- Added DataTableSearch component for filtering data with debounced input.
- Created utility logger for improved debugging in development.
- Updated translations to support new UI elements and actions.

* refactor: update SharedLinks and ArchivedChats to use desktopOnly instead of hideOnMobile; remove unused DataTableColumnHeader component

* fix: ensure desktopOnly columns are hidden on mobile in DataTable

* refactor: reorganize imports in DataTable components and update index exports

* refactor: improve styling and animations in Artifacts, ArtifactsSubMenu, and MCPSubMenu components; update border-radius in style.css

* refactor(Artifacts): enhance button toggle functionality and manage expanded state with useEffect

* refactor: comment out desktopOnly property in SharedLinks and ArchivedChats components; update translation.json with new keys for link actions

* refactor(DataTable): streamline column visibility logic and enhance type definitions; improve cleanup timers and optimize rendering

* refactor(DataTable): enhance type definitions for processed data rows and update custom actions renderer type

* refactor(DataTable): optimize processed data handling and improve warning for missing IDs; streamline DataTableComponents imports

* refactor(DataTable): enhance accessibility features and improve localization for selection and loading states

* refactor: improve padding in dialog content and enhance row selection functionality in ArchivedChats and DataTable components

* refactor(DataTable): remove unnecessary role and tabindex attributes from select all button for improved accessibility

* refactor(translation): remove outdated error messages and unused UI strings for cleaner localization

* refactor(DataTable): enhance virtualization and scrolling performance with dynamic overscan adjustments

* refactor(DataTableErrorBoundary): enhance error handling and localization support

* refactor(DataTable): improve column sizing and visibility handling; remove deprecated features

* refactor: enhance UI components with improved class handling and state management

* refactor(DataTable): improve column width handling and responsiveness; disable row selection

* refactor(DataTable): enhance accessibility with row header support and improve column visibility handling

* chore(DataTable): comments update

* refactor(Table): add unwrapped prop for direct table rendering; adjust minWidth calculation for responsiveness

* refactor(DataTable): simplify search handling by removing unnecessary trimming; adjust column width handling for better responsiveness

* refactor(translation): remove redundant drag and drop UI text for clarity

* refactor(parsers): change uiResources to a constant and streamline artifacts handling

* chore: remove unused file, bump @librechat/client to 0.3.2; fix(SharedLinks): missing import;

* refactor: change button variant from destructive to ghost for delete actions in SharedLinks and ArchivedChats components

* refactor(DataTable): simplify aria-sort assignment for better readability

* refactor(DataTable): update aria-label and ariaLabel to use indexed placeholder for localization

* refactor(translation): update no data messages for consistency

* Refactor code structure for improved readability and maintainability

* chore: restore linting fixes

* chore: restore linting fixes 2; refactor: remove unused translation keys

* feat(tests): add unit tests for DataTable components and error handling

- Implement tests for SelectionCheckbox and SkeletonRows components in DataTable.
- Add tests for DataTableErrorBoundary to ensure proper error handling and UI rendering.
- Create tests for DataTableSearch to validate search functionality and accessibility.
- Update DialogTemplate tests to reflect hardcoded cancel text.
- Remove redundant IntersectionObserver mock in SplitText tests.
- Unmock react-i18next in Translation tests to validate actual i18n functionality.

* refactor: Remove jest-environment-jsdom dependency from package.json; fix: reset package-lock

* chore: revert lint fixes

* chore: clean up package.json by removing unused devDependencies and redundant test scripts

* chore: update package dependencies in package.json and package-lock.json

- Added new devDependencies: @babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @tanstack/react-table, @tanstack/react-virtual, @testing-library/jest-dom, identity-obj-proxy, jest, jest-environment-jsdom, and lucide-react.
- Updated existing devDependencies to their latest versions.
- Added new module @asamuzakjp/css-color to package-lock.json with its dependencies.
- Updated version of @babel/plugin-transform-destructuring and added @babel/plugin-transform-explicit-resource-management in package-lock.json.

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
2025-12-11 16:39:06 -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 🪟 feat: DataTable update + Various UI enhancements (#9698) 2025-12-11 16:39:06 -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