From d265bdb24519e313ee97d615b58fdb6fa7dc4e22 Mon Sep 17 00:00:00 2001 From: LofiSu Date: Mon, 9 Feb 2026 12:33:16 +0800 Subject: [PATCH] feat(frontend): add mode hover guide and adjust mode i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 中文 ### 代码改动 - **新增** `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 --- ## 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. --- .../src/components/workspace/input-box.tsx | 62 +++++++++++-------- .../components/workspace/mode-hover-guide.tsx | 60 ++++++++++++++++++ frontend/src/core/i18n/locales/en-US.ts | 2 +- frontend/src/core/i18n/locales/zh-CN.ts | 6 +- 4 files changed, 101 insertions(+), 29 deletions(-) create mode 100644 frontend/src/components/workspace/mode-hover-guide.tsx diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx index 68c2c08..b32febf 100644 --- 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({ */} - -
- {context.mode === "flash" && } - {context.mode === "thinking" && ( - - )} - {context.mode === "pro" && ( - - )} - {context.mode === "ultra" && ( - - )} -
-
- {(context.mode === "flash" && t.inputBox.flashMode) || - (context.mode === "thinking" && t.inputBox.reasoningMode) || - (context.mode === "pro" && t.inputBox.proMode) || - (context.mode === "ultra" && t.inputBox.ultraMode)} -
- + + +
+ {context.mode === "flash" && } + {context.mode === "thinking" && ( + + )} + {context.mode === "pro" && ( + + )} + {context.mode === "ultra" && ( + + )} +
+
+ {(context.mode === "flash" && t.inputBox.flashMode) || + (context.mode === "thinking" && t.inputBox.reasoningMode) || + (context.mode === "pro" && t.inputBox.proMode) || + (context.mode === "ultra" && t.inputBox.ultraMode)} +
+ + diff --git a/frontend/src/components/workspace/mode-hover-guide.tsx b/frontend/src/components/workspace/mode-hover-guide.tsx new file mode 100644 index 0000000..e78e82b --- /dev/null +++ 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 {children}; +} diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts index 5eeeda0..262c412 100644 --- 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", diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts index 316e762..6f10f68 100644 --- 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: "给我一个小惊喜吧",