# Internationalization (i18n)

> **Multi-language UI and content generation.**

## Supported Languages

| Code | Language | Native Name | Flag | Message File |
|------|----------|-------------|------|--------------|
| `en` | English | English | 🇺🇸 | `messages/en.json` |
| `es` | Spanish | Español | 🇪🇸 | `messages/es.json` |
| `zh` | Chinese (Simplified) | 中文 | 🇨🇳 | `messages/zh.json` |
| `ja` | Japanese | 日本語 | 🇯🇵 | `messages/ja.json` |
| `pt` | Portuguese (Brazilian) | Português | 🇧🇷 | `messages/pt-BR.json` |

> Source of truth: `apps/frontend/i18n/config.ts` (`locales`, `localeNames`, `localeFlags`). Note `pt` loads from `messages/pt-BR.json` (imported as `pt` in `apps/frontend/lib/i18n/messages.ts`).

## Two Language Settings

1. **UI Language** - Interface text (buttons, labels, navigation)
2. **Content Language** - LLM-generated content (resumes, cover letters)

Both are configured independently in the Settings page.

## How It Works

- **UI translations**: Simple JSON import approach, no external dependencies
- **Content generation**: Backend receives language, passes to LLM prompts via `{output_language}`
- **Existing content** in database remains in original language

## Key Files

| File | Purpose |
|------|---------|
| `apps/frontend/messages/*.json` | UI translation files (`en`, `es`, `zh`, `ja`, `pt-BR`) |
| `apps/frontend/lib/i18n/translations.ts` | `useTranslations` hook |
| `apps/frontend/lib/context/language-context.tsx` | LanguageProvider (UI + content) |
| `apps/backend/app/prompts/templates.py` | LLM prompts with `{output_language}` |

## Using Translations

```typescript
import { useTranslations } from '@/lib/i18n';

const { t } = useTranslations();
<button>{t('common.save')}</button>
```

## Storage

| Key | Purpose |
|-----|---------|
| `resume_matcher_ui_language` | UI language (localStorage only) |
| `resume_matcher_content_language` | Content language (localStorage + backend) |

## Adding a New Language

1. Create `apps/frontend/messages/{code}.json` with all translations
2. Add locale to `apps/frontend/i18n/config.ts`
3. Add language name to `apps/backend/app/prompts/templates.py`
4. Update `SUPPORTED_LANGUAGES` in backend config router

## Related Docs

- [i18n-preparation.md](i18n-preparation.md) - Detailed extraction plan