feat(frontend): add mode hover guide and adjust mode i18n

## 中文 ### 代码改动 - **新增** `frontend/src/components/workspace/mode-hover-guide.tsx` - 新增 ModeHoverGuide 组件：接收 mode (flash/thinking/pro/ultra) 与 children，用 Tooltip 包裹 - hover 时展示该模式名称与简介，支持 showTitle 控制是否显示模式名 - 文案通过 useI18n 从 inputBox 的 *Mode / *ModeDescription 读取，中英文已支持 - **修改** `frontend/src/components/workspace/input-box.tsx` - 在模式选择器触发按钮外包一层 ModeHoverGuide，悬停当前模式时显示说明 - **修改** `frontend/src/core/i18n/locales/zh-CN.ts` - ultraModeDescription：改为完整描述「思考、计划并执行，可调用子代理分工协作，适合复杂多步骤任务，能力最强」（不再仅写「专业模式加子代理」） - proMode / ultraMode：中文环境下保留英文原文 "Pro"、"Ultra"，不再翻译为「专业」「超级」 - **修改** `frontend/src/core/i18n/locales/en-US.ts` - ultraModeDescription：改为 "Reasoning, planning and execution with subagents to divide work; best for complex multi-step tasks" ### 说明为 Flash / 思考 / Pro / Ultra 四种模式增加 hover 说明，并统一超级模式文案与 Pro/Ultra 在中文下的展示。 Co-authored-by: Cursor <cursoragent@cursor.com> --- ## English ### Code changes - **Add** `frontend/src/components/workspace/mode-hover-guide.tsx` - New ModeHoverGuide component: takes mode (flash/thinking/pro/ultra) and children, wraps in Tooltip - On hover shows mode name and short description; showTitle toggles mode name in tooltip - Copy from useI18n (inputBox *Mode / *ModeDescription), i18n in zh-CN and en-US - **Update** `frontend/src/components/workspace/input-box.tsx` - Wrap mode selector trigger with ModeHoverGuide so hovering shows current mode description - **Update** `frontend/src/core/i18n/locales/zh-CN.ts` - ultraModeDescription: full description (reasoning, planning, execution, subagents, complex tasks); no longer "Pro + subagents" only - proMode / ultraMode: keep English "Pro" and "Ultra" in zh locale instead of "专业" / "超级" - **Update** `frontend/src/core/i18n/locales/en-US.ts` - ultraModeDescription: "Reasoning, planning and execution with subagents to divide work; best for complex multi-step tasks" ### Summary Hover guide for all four modes (Flash / Reasoning / Pro / Ultra); clearer Ultra copy and Pro/Ultra labels in Chinese.
2026-04-03 06:12:14 +08:00 · 2026-02-09 12:33:16 +08:00
parent 175c1d2e3b
commit 5e000f1a99
4 changed files with 101 additions and 29 deletions
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -60,6 +60,7 @@ import {
  DropdownMenuTrigger,
 } from "../ui/dropdown-menu";

+import { ModeHoverGuide } from "./mode-hover-guide";
 import { Tooltip } from "./tooltip";

 export function InputBox({
@@ -197,31 +198,42 @@ export function InputBox({
          </PromptInputActionMenu> */}
          <AddAttachmentsButton className="px-2!" />
          <PromptInputActionMenu>
-            <PromptInputActionMenuTrigger className="gap-1! px-2!">
-              <div>
-                {context.mode === "flash" && <ZapIcon className="size-3" />}
-                {context.mode === "thinking" && (
-                  <LightbulbIcon className="size-3" />
-                )}
-                {context.mode === "pro" && (
-                  <GraduationCapIcon className="size-3" />
-                )}
-                {context.mode === "ultra" && (
-                  <RocketIcon className="size-3 text-[#dabb5e]" />
-                )}
-              </div>
-              <div
-                className={cn(
-                  "text-xs font-normal",
-                  context.mode === "ultra" ? "golden-text" : "",
-                )}
-              >
-                {(context.mode === "flash" && t.inputBox.flashMode) ||
-                  (context.mode === "thinking" && t.inputBox.reasoningMode) ||
-                  (context.mode === "pro" && t.inputBox.proMode) ||
-                  (context.mode === "ultra" && t.inputBox.ultraMode)}
-              </div>
-            </PromptInputActionMenuTrigger>
+            <ModeHoverGuide
+              mode={
+                context.mode === "flash" ||
+                context.mode === "thinking" ||
+                context.mode === "pro" ||
+                context.mode === "ultra"
+                  ? context.mode
+                  : "flash"
+              }
+            >
+              <PromptInputActionMenuTrigger className="gap-1! px-2!">
+                <div>
+                  {context.mode === "flash" && <ZapIcon className="size-3" />}
+                  {context.mode === "thinking" && (
+                    <LightbulbIcon className="size-3" />
+                  )}
+                  {context.mode === "pro" && (
+                    <GraduationCapIcon className="size-3" />
+                  )}
+                  {context.mode === "ultra" && (
+                    <RocketIcon className="size-3 text-[#dabb5e]" />
+                  )}
+                </div>
+                <div
+                  className={cn(
+                    "text-xs font-normal",
+                    context.mode === "ultra" ? "golden-text" : "",
+                  )}
+                >
+                  {(context.mode === "flash" && t.inputBox.flashMode) ||
+                    (context.mode === "thinking" && t.inputBox.reasoningMode) ||
+                    (context.mode === "pro" && t.inputBox.proMode) ||
+                    (context.mode === "ultra" && t.inputBox.ultraMode)}
+                </div>
+              </PromptInputActionMenuTrigger>
+            </ModeHoverGuide>
            <PromptInputActionMenuContent className="w-80">
              <DropdownMenuGroup>
                <DropdownMenuLabel className="text-muted-foreground text-xs">
--- a/frontend/src/components/workspace/mode-hover-guide.tsx
+++ b/frontend/src/components/workspace/mode-hover-guide.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useI18n } from "@/core/i18n/hooks";
+import { Tooltip } from "./tooltip";
+
+export type AgentMode = "flash" | "thinking" | "pro" | "ultra";
+
+function getModeLabelKey(
+  mode: AgentMode,
+): keyof Pick<
+  import("@/core/i18n/locales/types").Translations["inputBox"],
+  "flashMode" | "reasoningMode" | "proMode" | "ultraMode"
+> {
+  switch (mode) {
+    case "flash":
+      return "flashMode";
+    case "thinking":
+      return "reasoningMode";
+    case "pro":
+      return "proMode";
+    case "ultra":
+      return "ultraMode";
+  }
+}
+
+function getModeDescriptionKey(
+  mode: AgentMode,
+): keyof Pick<
+  import("@/core/i18n/locales/types").Translations["inputBox"],
+  "flashModeDescription" | "reasoningModeDescription" | "proModeDescription" | "ultraModeDescription"
+> {
+  switch (mode) {
+    case "flash":
+      return "flashModeDescription";
+    case "thinking":
+      return "reasoningModeDescription";
+    case "pro":
+      return "proModeDescription";
+    case "ultra":
+      return "ultraModeDescription";
+  }
+}
+
+export function ModeHoverGuide({
+  mode,
+  children,
+  showTitle = true,
+}: {
+  mode: AgentMode;
+  children: React.ReactNode;
+  /** When true, tooltip shows "ModeName: Description". When false, only description. */
+  showTitle?: boolean;
+}) {
+  const { t } = useI18n();
+  const label = t.inputBox[getModeLabelKey(mode)];
+  const description = t.inputBox[getModeDescriptionKey(mode)];
+  const content = showTitle ? `${label}: ${description}` : description;
+
+  return <Tooltip content={content}>{children}</Tooltip>;
+}
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -81,7 +81,7 @@ export const enUS: Translations = {
      "Reasoning, planning and executing, get more accurate results, may take more time",
    ultraMode: "Ultra",
    ultraModeDescription:
-      "Pro mode with subagents enabled, maximum capability for complex tasks",
+      "Reasoning, planning and execution with subagents to divide work; best for complex multi-step tasks",
    searchModels: "Search models...",
    surpriseMe: "Surprise",
    surpriseMePrompt: "Surprise me",
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -75,11 +75,11 @@ export const zhCN: Translations = {
    flashModeDescription: "快速且高效的完成任务，但可能不够精准",
    reasoningMode: "思考",
    reasoningModeDescription: "思考后再行动，在时间与准确性之间取得平衡",
-    proMode: "专业",
+    proMode: "Pro",
    proModeDescription: "思考、计划再执行，获得更精准的结果，可能需要更多时间",
-    ultraMode: "超级",
+    ultraMode: "Ultra",
    ultraModeDescription:
-      "专业模式加子代理，适用于复杂的多步骤任务，功能最强大",
+      "思考、计划并执行，可调用子代理分工协作，适合复杂多步骤任务，能力最强",
    searchModels: "搜索模型...",
    surpriseMe: "小惊喜",
    surpriseMePrompt: "给我一个小惊喜吧",