mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-04-27 01:11:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

feat: add internationalization (i18n) to web dashboard — English + Chinese (#9453)

Browse source 
Add a lightweight i18n system to the web dashboard with English (default) and
Chinese language support. A language switcher with flag icons is placed in the
header bar, allowing users to toggle between languages. The choice persists
to localStorage.

Implementation:
- src/i18n/ — types, translation files (en.ts, zh.ts), React context + hook
- LanguageSwitcher component shows the *other* language's flag as the toggle
- I18nProvider wraps the app in main.tsx
- All 8 pages + OAuth components updated to use t() translation calls
- Zero new dependencies — pure React context + localStorage
This commit is contained in:
Teknium 2026-04-13 23:19:13 -07:00 • committed by GitHub
parent 19199cd38d
commit a2ea237db2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 1715 additions and 977 deletions
Download patch file Download diff file Expand all files Collapse all files

58
web/src/i18n/context.tsx Normal file
View file

@ -0,0 +1,58 @@
import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
import type { Locale, Translations } from "./types";
import { en } from "./en";
import { zh } from "./zh";
const TRANSLATIONS: Record<Locale, Translations> = { en, zh };
const STORAGE_KEY = "hermes-locale";
function getInitialLocale(): Locale {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored === "en" || stored === "zh") return stored;
} catch {
// SSR or privacy mode
}
return "en";
}
interface I18nContextValue {
locale: Locale;
setLocale: (l: Locale) => void;
t: Translations;
}
const I18nContext = createContext<I18nContextValue>({
locale: "en",
setLocale: () => {},
t: en,
});
export function I18nProvider({ children }: { children: ReactNode }) {
const [locale, setLocaleState] = useState<Locale>(getInitialLocale);
const setLocale = useCallback((l: Locale) => {
setLocaleState(l);
try {
localStorage.setItem(STORAGE_KEY, l);
} catch {
// ignore
}
}, []);
const value: I18nContextValue = {
locale,
setLocale,
t: TRANSLATIONS[locale],
};
return (
<I18nContext.Provider value={value}>
{children}
</I18nContext.Provider>
);
}
export function useI18n() {
return useContext(I18nContext);
}

275
web/src/i18n/en.ts Normal file
View file

@ -0,0 +1,275 @@
import type { Translations } from "./types";
export const en: Translations = {
common: {
save: "Save",
saving: "Saving...",
cancel: "Cancel",
close: "Close",
delete: "Delete",
refresh: "Refresh",
retry: "Retry",
search: "Search...",
loading: "Loading...",
create: "Create",
creating: "Creating...",
set: "Set",
replace: "Replace",
clear: "Clear",
live: "Live",
off: "Off",
enabled: "enabled",
disabled: "disabled",
active: "active",
inactive: "inactive",
unknown: "unknown",
untitled: "Untitled",
none: "None",
form: "Form",
noResults: "No results",
of: "of",
page: "Page",
msgs: "msgs",
tools: "tools",
match: "match",
other: "Other",
configured: "configured",
removed: "removed",
failedToToggle: "Failed to toggle",
failedToRemove: "Failed to remove",
failedToReveal: "Failed to reveal",
collapse: "Collapse",
expand: "Expand",
general: "General",
messaging: "Messaging",
},
app: {
brand: "Hermes Agent",
brandShort: "HA",
webUi: "Web UI",
footer: {
name: "Hermes Agent",
org: "Nous Research",
},
nav: {
status: "Status",
sessions: "Sessions",
analytics: "Analytics",
logs: "Logs",
cron: "Cron",
skills: "Skills",
config: "Config",
keys: "Keys",
},
},
status: {
agent: "Agent",
gateway: "Gateway",
activeSessions: "Active Sessions",
recentSessions: "Recent Sessions",
connectedPlatforms: "Connected Platforms",
running: "Running",
starting: "Starting",
failed: "Failed",
stopped: "Stopped",
connected: "Connected",
disconnected: "Disconnected",
error: "Error",
notRunning: "Not running",
startFailed: "Start failed",
pid: "PID",
noneRunning: "None",
gatewayFailedToStart: "Gateway failed to start",
lastUpdate: "Last update",
platformError: "error",
platformDisconnected: "disconnected",
},
sessions: {
title: "Sessions",
searchPlaceholder: "Search message content...",
noSessions: "No sessions yet",
noMatch: "No sessions match your search",
startConversation: "Start a conversation to see it here",
noMessages: "No messages",
untitledSession: "Untitled session",
deleteSession: "Delete session",
previousPage: "Previous page",
nextPage: "Next page",
roles: {
user: "User",
assistant: "Assistant",
system: "System",
tool: "Tool",
},
},
analytics: {
period: "Period:",
totalTokens: "Total Tokens",
totalSessions: "Total Sessions",
apiCalls: "API Calls",
dailyTokenUsage: "Daily Token Usage",
dailyBreakdown: "Daily Breakdown",
perModelBreakdown: "Per-Model Breakdown",
input: "Input",
output: "Output",
total: "Total",
noUsageData: "No usage data for this period",
startSession: "Start a session to see analytics here",
date: "Date",
model: "Model",
tokens: "Tokens",
perDayAvg: "/day avg",
acrossModels: "across {count} models",
inOut: "{input} in / {output} out",
},
logs: {
title: "Logs",
autoRefresh: "Auto-refresh",
file: "File",
level: "Level",
component: "Component",
lines: "Lines",
noLogLines: "No log lines found",
},
cron: {
newJob: "New Cron Job",
nameOptional: "Name (optional)",
namePlaceholder: "e.g. Daily summary",
prompt: "Prompt",
promptPlaceholder: "What should the agent do on each run?",
schedule: "Schedule (cron expression)",
schedulePlaceholder: "0 9 * * *",
deliverTo: "Deliver to",
scheduledJobs: "Scheduled Jobs",
noJobs: "No cron jobs configured. Create one above.",
last: "Last",
next: "Next",
pause: "Pause",
resume: "Resume",
triggerNow: "Trigger now",
delivery: {
local: "Local",
telegram: "Telegram",
discord: "Discord",
slack: "Slack",
email: "Email",
},
},
skills: {
title: "Skills",
searchPlaceholder: "Search skills and toolsets...",
enabledOf: "{enabled}/{total} enabled",
all: "All",
noSkills: "No skills found. Skills are loaded from ~/.hermes/skills/",
noSkillsMatch: "No skills match your search or filter.",
skillCount: "{count} skill{s}",
noDescription: "No description available.",
toolsets: "Toolsets",
noToolsetsMatch: "No toolsets match the search.",
setupNeeded: "Setup needed",
disabledForCli: "Disabled for CLI",
more: "+{count} more",
},
config: {
configPath: "~/.hermes/config.yaml",
exportConfig: "Export config as JSON",
importConfig: "Import config from JSON",
resetDefaults: "Reset to defaults",
rawYaml: "Raw YAML Configuration",
searchResults: "Search Results",
fields: "field{s}",
noFieldsMatch: 'No fields match "{query}"',
configSaved: "Configuration saved",
yamlConfigSaved: "YAML config saved",
failedToSave: "Failed to save",
failedToSaveYaml: "Failed to save YAML",
failedToLoadRaw: "Failed to load raw config",
configImported: "Config imported — review and save",
invalidJson: "Invalid JSON file",
categories: {
general: "General",
agent: "Agent",
terminal: "Terminal",
display: "Display",
delegation: "Delegation",
memory: "Memory",
compression: "Compression",
security: "Security",
browser: "Browser",
voice: "Voice",
tts: "Text-to-Speech",
stt: "Speech-to-Text",
logging: "Logging",
discord: "Discord",
auxiliary: "Auxiliary",
},
},
env: {
description: "Manage API keys and secrets stored in",
changesNote: "Changes are saved to disk immediately. Active sessions pick up new keys automatically.",
hideAdvanced: "Hide Advanced",
showAdvanced: "Show Advanced",
llmProviders: "LLM Providers",
providersConfigured: "{configured} of {total} providers configured",
getKey: "Get key",
notConfigured: "{count} not configured",
notSet: "Not set",
keysCount: "{count} key{s}",
enterValue: "Enter value...",
replaceCurrentValue: "Replace current value ({preview})",
showValue: "Show real value",
hideValue: "Hide value",
},
oauth: {
title: "Provider Logins (OAuth)",
providerLogins: "Provider Logins (OAuth)",
description: "{connected} of {total} OAuth providers connected. Login flows currently run via the CLI; click Copy command and paste into a terminal to set up.",
connected: "Connected",
expired: "Expired",
notConnected: "Not connected. Run {command} in a terminal.",
runInTerminal: "in a terminal.",
noProviders: "No OAuth-capable providers detected.",
login: "Login",
disconnect: "Disconnect",
managedExternally: "Managed externally",
copied: "Copied ✓",
cli: "CLI",
copyCliCommand: "Copy CLI command (for external / fallback)",
connect: "Connect",
sessionExpires: "Session expires in {time}",
initiatingLogin: "Initiating login flow…",
exchangingCode: "Exchanging code for tokens…",
connectedClosing: "Connected! Closing…",
loginFailed: "Login failed.",
sessionExpired: "Session expired. Click Retry to start a new login.",
reOpenAuth: "Re-open auth page",
reOpenVerification: "Re-open verification page",
submitCode: "Submit code",
pasteCode: "Paste authorization code (with #state suffix is fine)",
waitingAuth: "Waiting for you to authorize in the browser…",
enterCodePrompt: "A new tab opened. Enter this code if prompted:",
pkceStep1: "A new tab opened to claude.ai. Sign in and click Authorize.",
pkceStep2: "Copy the authorization code shown after authorizing.",
pkceStep3: "Paste it below and submit.",
flowLabels: {
pkce: "Browser login (PKCE)",
device_code: "Device code",
external: "External CLI",
},
expiresIn: "expires in {time}",
},
language: {
switchTo: "Switch to Chinese",
},
};

2
web/src/i18n/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { I18nProvider, useI18n } from "./context";
export type { Locale, Translations } from "./types";

287
web/src/i18n/types.ts Normal file
View file

@ -0,0 +1,287 @@
export type Locale = "en" | "zh";
export interface Translations {
// ── Common ──
common: {
save: string;
saving: string;
cancel: string;
close: string;
delete: string;
refresh: string;
retry: string;
search: string;
loading: string;
create: string;
creating: string;
set: string;
replace: string;
clear: string;
live: string;
off: string;
enabled: string;
disabled: string;
active: string;
inactive: string;
unknown: string;
untitled: string;
none: string;
form: string;
noResults: string;
of: string;
page: string;
msgs: string;
tools: string;
match: string;
other: string;
configured: string;
removed: string;
failedToToggle: string;
failedToRemove: string;
failedToReveal: string;
collapse: string;
expand: string;
general: string;
messaging: string;
};
// ── App shell ──
app: {
brand: string;
brandShort: string;
webUi: string;
footer: {
name: string;
org: string;
};
nav: {
status: string;
sessions: string;
analytics: string;
logs: string;
cron: string;
skills: string;
config: string;
keys: string;
};
};
// ── Status page ──
status: {
agent: string;
gateway: string;
activeSessions: string;
recentSessions: string;
connectedPlatforms: string;
running: string;
starting: string;
failed: string;
stopped: string;
connected: string;
disconnected: string;
error: string;
notRunning: string;
startFailed: string;
pid: string;
noneRunning: string;
gatewayFailedToStart: string;
lastUpdate: string;
platformError: string;
platformDisconnected: string;
};
// ── Sessions page ──
sessions: {
title: string;
searchPlaceholder: string;
noSessions: string;
noMatch: string;
startConversation: string;
noMessages: string;
untitledSession: string;
deleteSession: string;
previousPage: string;
nextPage: string;
roles: {
user: string;
assistant: string;
system: string;
tool: string;
};
};
// ── Analytics page ──
analytics: {
period: string;
totalTokens: string;
totalSessions: string;
apiCalls: string;
dailyTokenUsage: string;
dailyBreakdown: string;
perModelBreakdown: string;
input: string;
output: string;
total: string;
noUsageData: string;
startSession: string;
date: string;
model: string;
tokens: string;
perDayAvg: string;
acrossModels: string;
inOut: string;
};
// ── Logs page ──
logs: {
title: string;
autoRefresh: string;
file: string;
level: string;
component: string;
lines: string;
noLogLines: string;
};
// ── Cron page ──
cron: {
newJob: string;
nameOptional: string;
namePlaceholder: string;
prompt: string;
promptPlaceholder: string;
schedule: string;
schedulePlaceholder: string;
deliverTo: string;
scheduledJobs: string;
noJobs: string;
last: string;
next: string;
pause: string;
resume: string;
triggerNow: string;
delivery: {
local: string;
telegram: string;
discord: string;
slack: string;
email: string;
};
};
// ── Skills page ──
skills: {
title: string;
searchPlaceholder: string;
enabledOf: string;
all: string;
noSkills: string;
noSkillsMatch: string;
skillCount: string;
noDescription: string;
toolsets: string;
noToolsetsMatch: string;
setupNeeded: string;
disabledForCli: string;
more: string;
};
// ── Config page ──
config: {
configPath: string;
exportConfig: string;
importConfig: string;
resetDefaults: string;
rawYaml: string;
searchResults: string;
fields: string;
noFieldsMatch: string;
configSaved: string;
yamlConfigSaved: string;
failedToSave: string;
failedToSaveYaml: string;
failedToLoadRaw: string;
configImported: string;
invalidJson: string;
categories: {
general: string;
agent: string;
terminal: string;
display: string;
delegation: string;
memory: string;
compression: string;
security: string;
browser: string;
voice: string;
tts: string;
stt: string;
logging: string;
discord: string;
auxiliary: string;
};
};
// ── Env / Keys page ──
env: {
description: string;
changesNote: string;
hideAdvanced: string;
showAdvanced: string;
llmProviders: string;
providersConfigured: string;
getKey: string;
notConfigured: string;
notSet: string;
keysCount: string;
enterValue: string;
replaceCurrentValue: string;
showValue: string;
hideValue: string;
};
// ── OAuth ──
oauth: {
title: string;
providerLogins: string;
description: string;
connected: string;
expired: string;
notConnected: string;
runInTerminal: string;
noProviders: string;
login: string;
disconnect: string;
managedExternally: string;
copied: string;
cli: string;
copyCliCommand: string;
connect: string;
sessionExpires: string;
initiatingLogin: string;
exchangingCode: string;
connectedClosing: string;
loginFailed: string;
sessionExpired: string;
reOpenAuth: string;
reOpenVerification: string;
submitCode: string;
pasteCode: string;
waitingAuth: string;
enterCodePrompt: string;
pkceStep1: string;
pkceStep2: string;
pkceStep3: string;
flowLabels: {
pkce: string;
device_code: string;
external: string;
};
expiresIn: string;
};
// ── Language switcher ──
language: {
switchTo: string;
};
}

275
web/src/i18n/zh.ts Normal file
View file

@ -0,0 +1,275 @@
import type { Translations } from "./types";
export const zh: Translations = {
common: {
save: "保存",
saving: "保存中...",
cancel: "取消",
close: "关闭",
delete: "删除",
refresh: "刷新",
retry: "重试",
search: "搜索...",
loading: "加载中...",
create: "创建",
creating: "创建中...",
set: "设置",
replace: "替换",
clear: "清除",
live: "在线",
off: "离线",
enabled: "已启用",
disabled: "已禁用",
active: "活跃",
inactive: "未激活",
unknown: "未知",
untitled: "无标题",
none: "无",
form: "表单",
noResults: "无结果",
of: "/",
page: "页",
msgs: "消息",
tools: "工具",
match: "匹配",
other: "其他",
configured: "已配置",
removed: "已移除",
failedToToggle: "切换失败",
failedToRemove: "移除失败",
failedToReveal: "显示失败",
collapse: "折叠",
expand: "展开",
general: "通用",
messaging: "消息平台",
},
app: {
brand: "Hermes Agent",
brandShort: "HA",
webUi: "管理面板",
footer: {
name: "Hermes Agent",
org: "Nous Research",
},
nav: {
status: "状态",
sessions: "会话",
analytics: "分析",
logs: "日志",
cron: "定时任务",
skills: "技能",
config: "配置",
keys: "密钥",
},
},
status: {
agent: "代理",
gateway: "网关",
activeSessions: "活跃会话",
recentSessions: "最近会话",
connectedPlatforms: "已连接平台",
running: "运行中",
starting: "启动中",
failed: "失败",
stopped: "已停止",
connected: "已连接",
disconnected: "已断开",
error: "错误",
notRunning: "未运行",
startFailed: "启动失败",
pid: "进程",
noneRunning: "无",
gatewayFailedToStart: "网关启动失败",
lastUpdate: "最后更新",
platformError: "错误",
platformDisconnected: "已断开",
},
sessions: {
title: "会话",
searchPlaceholder: "搜索消息内容...",
noSessions: "暂无会话",
noMatch: "没有匹配的会话",
startConversation: "开始对话后将显示在此处",
noMessages: "暂无消息",
untitledSession: "无标题会话",
deleteSession: "删除会话",
previousPage: "上一页",
nextPage: "下一页",
roles: {
user: "用户",
assistant: "助手",
system: "系统",
tool: "工具",
},
},
analytics: {
period: "时间范围：",
totalTokens: "总 Token 数",
totalSessions: "总会话数",
apiCalls: "API 调用",
dailyTokenUsage: "每日 Token 用量",
dailyBreakdown: "每日明细",
perModelBreakdown: "模型用量明细",
input: "输入",
output: "输出",
total: "总计",
noUsageData: "该时间段暂无使用数据",
startSession: "开始会话后将在此显示分析数据",
date: "日期",
model: "模型",
tokens: "Token",
perDayAvg: "/天 平均",
acrossModels: "共 {count} 个模型",
inOut: "输入 {input} / 输出 {output}",
},
logs: {
title: "日志",
autoRefresh: "自动刷新",
file: "文件",
level: "级别",
component: "组件",
lines: "行数",
noLogLines: "未找到日志记录",
},
cron: {
newJob: "新建定时任务",
nameOptional: "名称（可选）",
namePlaceholder: "例如：每日总结",
prompt: "提示词",
promptPlaceholder: "代理每次运行时应执行什么操作？",
schedule: "调度表达式（cron）",
schedulePlaceholder: "0 9 * * *",
deliverTo: "投递至",
scheduledJobs: "已调度任务",
noJobs: "暂无定时任务。在上方创建一个。",
last: "上次",
next: "下次",
pause: "暂停",
resume: "恢复",
triggerNow: "立即触发",
delivery: {
local: "本地",
telegram: "Telegram",
discord: "Discord",
slack: "Slack",
email: "邮件",
},
},
skills: {
title: "技能",
searchPlaceholder: "搜索技能和工具集...",
enabledOf: "已启用 {enabled}/{total}",
all: "全部",
noSkills: "未找到技能。技能从 ~/.hermes/skills/ 加载",
noSkillsMatch: "没有匹配的技能。",
skillCount: "{count} 个技能",
noDescription: "暂无描述。",
toolsets: "工具集",
noToolsetsMatch: "没有匹配的工具集。",
setupNeeded: "需要配置",
disabledForCli: "CLI 已禁用",
more: "还有 {count} 个",
},
config: {
configPath: "~/.hermes/config.yaml",
exportConfig: "导出配置为 JSON",
importConfig: "从 JSON 导入配置",
resetDefaults: "恢复默认值",
rawYaml: "原始 YAML 配置",
searchResults: "搜索结果",
fields: "个字段",
noFieldsMatch: '没有匹配"{query}"的字段',
configSaved: "配置已保存",
yamlConfigSaved: "YAML 配置已保存",
failedToSave: "保存失败",
failedToSaveYaml: "YAML 保存失败",
failedToLoadRaw: "加载原始配置失败",
configImported: "配置已导入 — 请检查后保存",
invalidJson: "无效的 JSON 文件",
categories: {
general: "通用",
agent: "代理",
terminal: "终端",
display: "显示",
delegation: "委托",
memory: "记忆",
compression: "压缩",
security: "安全",
browser: "浏览器",
voice: "语音",
tts: "文字转语音",
stt: "语音转文字",
logging: "日志",
discord: "Discord",
auxiliary: "辅助",
},
},
env: {
description: "管理存储在以下位置的 API 密钥和凭据",
changesNote: "更改会立即保存到磁盘。活跃会话将自动获取新密钥。",
hideAdvanced: "隐藏高级选项",
showAdvanced: "显示高级选项",
llmProviders: "LLM 提供商",
providersConfigured: "已配置 {configured}/{total} 个提供商",
getKey: "获取密钥",
notConfigured: "{count} 个未配置",
notSet: "未设置",
keysCount: "{count} 个密钥",
enterValue: "输入值...",
replaceCurrentValue: "替换当前值（{preview}）",
showValue: "显示实际值",
hideValue: "隐藏值",
},
oauth: {
title: "提供商登录（OAuth）",
providerLogins: "提供商登录（OAuth）",
description: "已连接 {connected}/{total} 个 OAuth 提供商。登录流程目前通过 CLI 运行；点击「复制命令」并粘贴到终端中进行设置。",
connected: "已连接",
expired: "已过期",
notConnected: "未连接。在终端中运行 {command}。",
runInTerminal: "在终端中。",
noProviders: "未检测到支持 OAuth 的提供商。",
login: "登录",
disconnect: "断开连接",
managedExternally: "外部管理",
copied: "已复制 ✓",
cli: "CLI",
copyCliCommand: "复制 CLI 命令（用于外部/备用方式）",
connect: "连接",
sessionExpires: "会话将在 {time} 后过期",
initiatingLogin: "正在启动登录流程…",
exchangingCode: "正在交换令牌…",
connectedClosing: "已连接！正在关闭…",
loginFailed: "登录失败。",
sessionExpired: "会话已过期。点击重试以开始新的登录。",
reOpenAuth: "重新打开授权页面",
reOpenVerification: "重新打开验证页面",
submitCode: "提交代码",
pasteCode: "粘贴授权代码（包含 #state 后缀也可以）",
waitingAuth: "等待您在浏览器中授权…",
enterCodePrompt: "已在新标签页中打开。如果需要，请输入以下代码：",
pkceStep1: "已在新标签页打开 claude.ai。请登录并点击「授权」。",
pkceStep2: "复制授权后显示的授权代码。",
pkceStep3: "将代码粘贴到下方并提交。",
flowLabels: {
pkce: "浏览器登录（PKCE）",
device_code: "设备代码",
external: "外部 CLI",
},
expiresIn: "{time}后过期",
},
language: {
switchTo: "切换到英文",
},
};