(TabOption.TERMINAL);
+ const tabData = useMemo(
+ () => ({
+ [TabOption.TERMINAL]: {
+ name: t(I18nKey.WORKSPACE$TERMINAL_TAB_LABEL),
+ icon: ,
+ component: ,
+ },
+ [TabOption.PLANNER]: {
+ name: t(I18nKey.WORKSPACE$PLANNER_TAB_LABEL),
+ icon: ,
+ component: ,
+ },
+ [TabOption.CODE]: {
+ name: t(I18nKey.WORKSPACE$CODE_EDITOR_TAB_LABEL),
+ icon: ,
+ component: ,
+ },
+ [TabOption.BROWSER]: {
+ name: t(I18nKey.WORKSPACE$BROWSER_TAB_LABEL),
+ icon: ,
+ component: ,
+ },
+ }),
+ [t],
+ );
+
return (
<>
- OpenDevin Workspace
+ {t(I18nKey.WORKSPACE$TITLE)}
{
+ // assume all detected languages are available
+ const detectLanguage = i18n.language;
+ // cannot trust browser language setting
+ const settingLanguage = localStorage.getItem("language");
+
+ // if setting is not initialized, but detected language is available, use detected language and update language setting
+ if (
+ !settingLanguage &&
+ AvailableLanguages.some((lang) => detectLanguage === lang.value)
+ ) {
+ localStorage.setItem("language", detectLanguage);
+ i18n.changeLanguage(detectLanguage);
+ return;
+ }
+
+ // if setting is not initialized and detected language is not available, use en and update language setting
+ if (
+ !settingLanguage &&
+ !AvailableLanguages.some((lang) => detectLanguage === lang.value)
+ ) {
+ localStorage.setItem("language", "en");
+ i18n.changeLanguage("en");
+ return;
+ }
+
+ // if setting is initialized and setting language is not available, use en and update language setting
+ if (
+ settingLanguage &&
+ !AvailableLanguages.some((lang) => settingLanguage === lang.value)
+ ) {
+ localStorage.setItem("language", "en");
+ i18n.changeLanguage("en");
+ return;
+ }
+
+ // if setting is initialized and setting language is available, use setting language
+ if (settingLanguage && settingLanguage !== detectLanguage) {
+ i18n.changeLanguage(settingLanguage);
+ }
+ });
+
+export default i18n;
diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json
new file mode 100644
index 0000000000..e1723d442c
--- /dev/null
+++ b/frontend/src/i18n/translation.json
@@ -0,0 +1,74 @@
+{
+ "WORKSPACE$TITLE": {
+ "en": "OpenDevin Workspace",
+ "zh-CN": "OpenDevin 工作区"
+ },
+ "WORKSPACE$TERMINAL_TAB_LABEL": {
+ "en": "Terminal",
+ "zh-CN": "终端"
+ },
+ "WORKSPACE$PLANNER_TAB_LABEL": {
+ "en": "Planner",
+ "zh-CN": "规划器"
+ },
+ "WORKSPACE$CODE_EDITOR_TAB_LABEL": {
+ "en": "Code Editor",
+ "zh-CN": "代码编辑器"
+ },
+ "WORKSPACE$BROWSER_TAB_LABEL": {
+ "en": "Browser",
+ "zh-CN": "浏览器"
+ },
+ "CONFIGURATION$OPENDEVIN_WORKSPACE_DIRECTORY_INPUT_LABEL": {
+ "en": "OpenDevin Workspace directory",
+ "zh-CN": "OpenDevin 工作区目录"
+ },
+ "CONFIGURATION$OPENDEVIN_WORKSPACE_DIRECTORY_INPUT_PLACEHOLDER": {
+ "en": "Default: ./workspace",
+ "zh-CN": "默认：./workspace"
+ },
+ "CONFIGURATION$MODAL_TITLE": {
+ "en": "Configuration",
+ "zh-CN": "配置"
+ },
+ "CONFIGURATION$MODEL_SELECT_LABEL": {
+ "en": "Model",
+ "zh-CN": "模型"
+ },
+ "CONFIGURATION$MODEL_SELECT_PLACEHOLDER": {
+ "en": "Select a model",
+ "zh-CN": "选择一个模型"
+ },
+ "CONFIGURATION$AGENT_SELECT_LABEL": {
+ "en": "Agent",
+ "zh-CN": "代理"
+ },
+ "CONFIGURATION$AGENT_SELECT_PLACEHOLDER": {
+ "en": "Select a agent",
+ "zh-CN": "选择一个代理"
+ },
+ "CONFIGURATION$LANGUAGE_SELECT_LABEL": {
+ "en": "Language",
+ "zh-CN": "语言"
+ },
+ "CONFIGURATION$MODAL_CLOSE_BUTTON_LABEL": {
+ "en": "Close",
+ "zh-CN": "关闭"
+ },
+ "CONFIGURATION$MODAL_SAVE_BUTTON_LABEL": {
+ "en": "Save",
+ "zh-CN": "保存"
+ },
+ "CHAT_INTERFACE$INITIALZING_AGENT_LOADING_MESSAGE": {
+ "en": "Initializing agent (may take up to 10 seconds)...",
+ "zh-CN": "初始化代理（可能需要 10 秒以上时间）"
+ },
+ "CHAT_INTERFACE$INPUT_PLACEHOLDER": {
+ "en": "Send a message (won't interrupt the Assistant)",
+ "zh-CN": "发送消息（不会打断助理）"
+ },
+ "CHAT_INTERFACE$INPUT_SEND_MESSAGE_BUTTON_CONTENT": {
+ "en": "Send",
+ "zh-CN": "发送"
+ }
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 92195854da..b7f7f24173 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -7,6 +7,7 @@ import { NextUIProvider } from "@nextui-org/react";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./store";
+import "./i18n";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement,
diff --git a/frontend/src/state/settingsSlice.ts b/frontend/src/state/settingsSlice.ts
index a694099a6b..8f45aea3e6 100644
--- a/frontend/src/state/settingsSlice.ts
+++ b/frontend/src/state/settingsSlice.ts
@@ -7,6 +7,7 @@ export const settingsSlice = createSlice({
agent: localStorage.getItem("agent") || "MonologueAgent",
workspaceDirectory:
localStorage.getItem("workspaceDirectory") || "./workspace",
+ language: localStorage.getItem("language") || "en",
},
reducers: {
setModel: (state, action) => {
@@ -18,10 +19,13 @@ export const settingsSlice = createSlice({
setWorkspaceDirectory: (state, action) => {
state.workspaceDirectory = action.payload;
},
+ setLanguage: (state, action) => {
+ state.language = action.payload;
+ },
},
});
-export const { setModel, setAgent, setWorkspaceDirectory } =
+export const { setModel, setAgent, setWorkspaceDirectory, setLanguage } =
settingsSlice.actions;
export default settingsSlice.reducer;