refactor agent status component and add i18n support (#1867)

* fix: correct simple i18n key typo

* feat: refactor agent status component and add i18n support

---------

Co-authored-by: Jim Su <jimsu@protonmail.com>

frontend/package.json

@@ -37,7 +37,7 @@
     "web-vitals": "^3.5.2"
   },
   "scripts": {
-    "start": "vite",
+    "start": "npm run make-i18n && vite",
     "build": "tsc && vite build",
     "test": "vitest run",
     "preview": "vite preview",

frontend/src/components/AgentStatusBar.tsx

@@ -5,46 +5,56 @@ import { I18nKey } from "#/i18n/declaration";
 import { RootState } from "#/store";
 import AgentState from "#/types/AgentState";
 
-const AgentStatusMap: { [k: string]: { message: string; indicator: string } } =
-  {
+enum IndicatorColor {
+  BLUE = "bg-blue-500",
+  GREEN = "bg-green-500",
+  ORANGE = "bg-orange-500",
+  YELLOW = "bg-yellow-500",
+  RED = "bg-red-500",
+  DARK_ORANGE = "bg-orange-800",
+}
+
+function AgentStatusBar() {
+  const { t } = useTranslation();
+  const { curAgentState } = useSelector((state: RootState) => state.agent);
+
+  const AgentStatusMap: {
+    [k: string]: { message: string; indicator: IndicatorColor };
+  } = {
     [AgentState.INIT]: {
-      message: "Agent is initialized, waiting for task...",
-      indicator: "bg-blue-500",
+      message: t(I18nKey.CHAT_INTERFACE$AGENT_INIT_MESSAGE),
+      indicator: IndicatorColor.BLUE,
     },
     [AgentState.RUNNING]: {
-      message: "Agent is running task...",
-      indicator: "bg-green-500",
+      message: t(I18nKey.CHAT_INTERFACE$AGENT_RUNNING_MESSAGE),
+      indicator: IndicatorColor.GREEN,
     },
     [AgentState.AWAITING_USER_INPUT]: {
-      message: "Agent is awaiting user input...",
-      indicator: "bg-orange-500",
+      message: t(I18nKey.CHAT_INTERFACE$AGENT_AWAITING_USER_INPUT_MESSAGE),
+      indicator: IndicatorColor.ORANGE,
     },
     [AgentState.PAUSED]: {
-      message: "Agent has paused.",
-      indicator: "bg-yellow-500",
+      message: t(I18nKey.CHAT_INTERFACE$AGENT_PAUSED_MESSAGE),
+      indicator: IndicatorColor.YELLOW,
     },
     [AgentState.LOADING]: {
-      message: "Agent is initializing...",
-      indicator: "bg-yellow-500",
+      message: t(I18nKey.CHAT_INTERFACE$INITIALIZING_AGENT_LOADING_MESSAGE),
+      indicator: IndicatorColor.DARK_ORANGE,
     },
     [AgentState.STOPPED]: {
-      message: "Agent has stopped.",
-      indicator: "bg-red-500",
+      message: t(I18nKey.CHAT_INTERFACE$AGENT_STOPPED_MESSAGE),
+      indicator: IndicatorColor.RED,
     },
     [AgentState.FINISHED]: {
-      message: "Agent has finished the task.",
-      indicator: "bg-green-500",
+      message: t(I18nKey.CHAT_INTERFACE$AGENT_FINISHED_MESSAGE),
+      indicator: IndicatorColor.GREEN,
     },
     [AgentState.ERROR]: {
-      message: "Agent encountered an error.",
-      indicator: "bg-red-500",
+      message: t(I18nKey.CHAT_INTERFACE$AGENT_ERROR_MESSAGE),
+      indicator: IndicatorColor.RED,
     },
   };
 
-function AgentStatusBar() {
-  const { t } = useTranslation();
-  const { curAgentState } = useSelector((state: RootState) => state.agent);
-
   // TODO: Extend the agent status, e.g.:
   // - Agent is typing
   // - Agent is initializing
@@ -53,23 +63,12 @@ function AgentStatusBar() {
   // - Agent is not available
   return (
     <div className="flex items-center">
-      {curAgentState !== AgentState.LOADING ? (
-        <>
-          <div
-            className={`w-3 h-3 mr-2 rounded-full animate-pulse ${AgentStatusMap[curAgentState].indicator}`}
-          />
-          <span className="text-sm text-stone-400">
-            {AgentStatusMap[curAgentState].message}
-          </span>
-        </>
-      ) : (
-        <>
-          <div className="w-3 h-3 mr-3 bg-orange-800 rounded-full animate-pulse" />
-          <span className="text-sm text-stone-400">
-            {t(I18nKey.CHAT_INTERFACE$INITIALZING_AGENT_LOADING_MESSAGE)}
-          </span>
-        </>
-      )}
+      <div
+        className={`w-3 h-3 mr-2 rounded-full animate-pulse ${AgentStatusMap[curAgentState].indicator}`}
+      />
+      <span className="text-sm text-stone-400">
+        {AgentStatusMap[curAgentState].message}
+      </span>
     </div>
   );
 }

frontend/src/i18n/translation.json

@@ -285,9 +285,9 @@
     "zh-CN": "开始新会话",
     "zh-TW": "開始新會話"
   },
-  "CHAT_INTERFACE$INITIALZING_AGENT_LOADING_MESSAGE": {
+  "CHAT_INTERFACE$INITIALIZING_AGENT_LOADING_MESSAGE": {
     "en": "Initializing agent (may take up to 10 seconds)...",
-    "zh-CN": "初始化智能体（可能需要 10 秒以上时间）",
+    "zh-CN": "正在初始化智能体（可能需要 10 秒以上时间）",
     "de": "Agent wird initialisiert (kann bis zu 10 Sekunden dauern)...",
     "ko-KR": "에이전트 설치중(10초 정도 걸립니다)...",
     "no": "Initialiserer agent (det kan ta opptil 10 sekunder)...",
@@ -299,6 +299,34 @@
     "fr": "Initialisation de l'agent (peut prendre jusqu'à 10 secondes)...",
     "tr": "Ajan başlatılıyor (bu işlem 10 saniye kadar sürebilir)..."
   },
+  "CHAT_INTERFACE$AGENT_INIT_MESSAGE": {
+    "en": "Agent is initialized, waiting for task...",
+    "zh-CN": "智能体已初始化，等待任务中..."
+  },
+  "CHAT_INTERFACE$AGENT_RUNNING_MESSAGE": {
+    "en": "Agent is running task",
+    "zh-CN": "智能体正在执行任务..."
+  },
+  "CHAT_INTERFACE$AGENT_AWAITING_USER_INPUT_MESSAGE": {
+    "en": "Agent is awaiting user input...",
+    "zh-CN": "智能体正在等待用户输入..."
+  },
+  "CHAT_INTERFACE$AGENT_PAUSED_MESSAGE": {
+    "en": "Agent has paused.",
+    "zh-CN": "智能体已暂停"
+  },
+  "CHAT_INTERFACE$AGENT_STOPPED_MESSAGE": {
+    "en": "Agent has stopped.",
+    "zh-CN": "智能体已停止"
+  },
+  "CHAT_INTERFACE$AGENT_FINISHED_MESSAGE": {
+    "en": "Agent has finished the task.",
+    "zh-CN": "智能体已完成任务"
+  },
+  "CHAT_INTERFACE$AGENT_ERROR_MESSAGE": {
+    "en": "Agent encountered an error.",
+    "zh-CN": "智能体遇到错误"
+  },
   "CHAT_INTERFACE$INPUT_PLACEHOLDER": {
     "en": "Message assistant...",
     "zh-CN": "给助理发消息",