LibreChat/client/src/locales
Danny Avila eb1a59d2fd
🧠 fix: Messages View Height Expansion from #11142 & improve Thinking/Code-Block UX (#11148)
This commit fixes the messages view height auto-expansion issue introduced
in PR #11142 and improves the UX of both Thinking and CodeBlock components.

## Bug Fix

The ThinkingFooter component added in PR #11142 was causing the messages
view height to automatically expand. The footer was placed inside the
CSS grid's overflow-hidden container, but its presence affected the
grid height calculation, causing layout issues during streaming.

## Solution: FloatingThinkingBar

Replaced ThinkingFooter with a new FloatingThinkingBar component that:
- Uses absolute positioning (bottom-right) like CodeBlock's FloatingCodeBar
- Only appears on hover/focus, not affecting layout
- Shows expand/collapse button with dynamic icon based on state
- Uses TooltipAnchor for accessible tooltips
- Supports keyboard navigation by showing when any element in the
  container is focused (top bar buttons or content)

## Changes

### Thinking.tsx
- Added FloatingThinkingBar component with hover/focus visibility
- Updated ThinkingContent with additional bottom padding (pb-10)
- Added containerRef and hover/focus event handlers on outer container
- Removed ThinkingFooter component (replaced by FloatingThinkingBar)

### Reasoning.tsx
- Integrated FloatingThinkingBar with same hover/focus pattern
- Added containerRef and event handlers on outer container
- Supports keyboard navigation through entire component

### CodeBlock.tsx
- Updated FloatingCodeBar to show icons only (removed text labels)
- Added TooltipAnchor wrapper for copy button with localized tooltips
- Improved accessibility with proper aria-label and aria-hidden

### Localization
- Added com_ui_expand_thoughts: "Expand Thoughts"

## Accessibility

- Full keyboard navigation support: tabbing through ThinkingButton,
  copy button, and FloatingThinkingBar
- TooltipAnchor provides hover tooltips for icon-only buttons
- Proper aria-label attributes on all interactive elements
- tabIndex management based on visibility state
2025-12-29 21:21:50 -05:00
..
ar 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05: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 (#11127) 2025-12-28 11:35:36 -05:00
cs 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
da 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
de 🌍 i18n: Update translation.json with latest translations (#11130) 2025-12-29 10:52:48 -05:00
en 🧠 fix: Messages View Height Expansion from #11142 & improve Thinking/Code-Block UX (#11148) 2025-12-29 21:21:50 -05:00
es 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
et 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
fa 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
fi 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
fr 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
he 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
hu 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
hy 🌍 i18n: Update translation.json with latest translations (#10995) 2025-12-16 11:16:09 -05:00
id 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
it 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
ja 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
ka 🌍 i18n: Update translation.json with latest translations (#10995) 2025-12-16 11:16:09 -05:00
ko 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
lv 🌍 i18n: Update translation.json with latest translations (#11130) 2025-12-29 10:52:48 -05:00
nb 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
nl 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
pl 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
pt-BR 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
pt-PT 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
ru 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
sl 🌍 i18n: Update translation.json with latest translations (#11034) 2025-12-18 20:45:11 -05:00
sv 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
th 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
tr 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05: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 (#11127) 2025-12-28 11:35:36 -05:00
vi 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
zh-Hans 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05:00
zh-Hant 🌍 i18n: Update translation.json with latest translations (#11127) 2025-12-28 11:35:36 -05: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