i18n
LobeHub Internationalization Guide
- Default language: English (en-US)
- Framework: react-i18next
- Only edit files in
src/locales/default/- Never edit JSON files inlocales/ - Run
pnpm i18nto generate translations (or manually translate zh-CN/en-US for dev preview)
Key Naming Convention
Flat keys with dot notation (not nested objects):
// ✅ Correct
export default {
'alert.cloud.action': '立即体验',
'sync.actions.sync': '立即同步',
'sync.status.ready': '已连接',
};
// ❌ Avoid nested objects
export default {
alert: { cloud: { action: '...' } },
};
Patterns: {feature}.{context}.{action|status}
Parameters: Use {{variableName}} syntax
'alert.cloud.desc': '我们提供 {{credit}} 额度积分',
Avoid key conflicts:
// ❌ Conflict
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',
// ✅ Solution
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',
Workflow
- Add keys to
src/locales/default/{namespace}.ts - Export new namespace in
src/locales/default/index.ts - For dev preview: manually translate
locales/zh-CN/{namespace}.jsonandlocales/en-US/{namespace}.json - Remind the user to run
pnpm i18nbefore creating PR — do NOT run it yourself (very slow)
Usage
import { useTranslation } from 'react-i18next';
const { t } = useTranslation('common');
t('newFeature.title');
t('alert.cloud.desc', { credit: '1000' });
// Multiple namespaces
const { t } = useTranslation(['common', 'chat']);
t('common:save');
Common Namespaces
Most used: common (shared UI), chat (chat features), setting (settings)
Others: auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic
More from lobehub/lobe-chat
drizzle
Drizzle ORM schema and database guide. Use when working with database schemas (src/database/schemas/*), defining tables, creating migrations, or database model code. Triggers on Drizzle schema definition, database migrations, or ORM usage questions.
598typescript
TypeScript code style and optimization guidelines. MUST READ before writing or modifying any TypeScript code (.ts, .tsx, .mts files). Also use when reviewing code quality or implementing type-safe patterns. Triggers on any TypeScript file edit, code style discussions, or type safety questions.
582react
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
579zustand
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
564project-overview
Complete project architecture and structure guide. Use when exploring the codebase, understanding project organization, finding files, or needing comprehensive architectural context. Triggers on architecture questions, directory navigation, or project overview needs.
547debug
Debug package usage guide. Use when adding debug logging, understanding log namespaces, or implementing debugging features. Triggers on debug logging requests or logging implementation.
530