diff --git a/src/components/ThinkingModeSelector.jsx b/src/components/ThinkingModeSelector.jsx index 758ad40..5cc6357 100644 --- a/src/components/ThinkingModeSelector.jsx +++ b/src/components/ThinkingModeSelector.jsx @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import { Brain, Zap, Sparkles, Atom, X } from 'lucide-react'; +import { useTranslation } from 'react-i18next'; const thinkingModes = [ { @@ -45,6 +46,24 @@ const thinkingModes = [ ]; function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = '' }) { + const { t } = useTranslation('chat'); + + // Mapping from mode ID to translation key + const modeKeyMap = { + 'think-hard': 'thinkHard', + 'think-harder': 'thinkHarder' + }; + // Create translated modes for display + const translatedModes = thinkingModes.map(mode => { + const modeKey = modeKeyMap[mode.id] || mode.id; + return { + ...mode, + name: t(`thinkingMode.modes.${modeKey}.name`), + description: t(`thinkingMode.modes.${modeKey}.description`), + prefix: t(`thinkingMode.modes.${modeKey}.prefix`) + }; + }); + const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); @@ -60,7 +79,7 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = return () => document.removeEventListener('mousedown', handleClickOutside); }, [onClose]); - const currentMode = thinkingModes.find(mode => mode.id === selectedMode) || thinkingModes[0]; + const currentMode = translatedModes.find(mode => mode.id === selectedMode) || translatedModes[0]; const IconComponent = currentMode.icon || Brain; return ( @@ -69,11 +88,11 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = type="button" onClick={() => setIsOpen(!isOpen)} className={`w-10 h-10 sm:w-10 sm:h-10 rounded-full flex items-center justify-center transition-all duration-200 ${ - selectedMode === 'none' - ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600' + selectedMode === 'none' + ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600' : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800' }`} - title={`Thinking mode: ${currentMode.name}`} + title={t('thinkingMode.buttonTitle', { mode: currentMode.name })} > @@ -83,7 +102,7 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =

- Thinking Mode + {t('thinkingMode.selector.title')}

- Extended thinking gives Claude more time to evaluate alternatives + {t('thinkingMode.selector.description')}

- +
- {thinkingModes.map((mode) => { + {translatedModes.map((mode) => { const ModeIcon = mode.icon; const isSelected = mode.id === selectedMode; @@ -130,7 +149,7 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = {isSelected && ( - Active + {t('thinkingMode.selector.active')} )}
@@ -148,10 +167,10 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = ); })} - +

- Tip: Higher thinking modes take more time but provide more thorough analysis + Tip: {t('thinkingMode.selector.tip')}

diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json index d612791..2804554 100644 --- a/src/i18n/locales/en/chat.json +++ b/src/i18n/locales/en/chat.json @@ -107,5 +107,41 @@ }, "clickToChangeMode": "Click to change permission mode (or press Tab in input)", "showAllCommands": "Show all commands" + }, + "thinkingMode": { + "selector": { + "title": "Thinking Mode", + "description": "Extended thinking gives Claude more time to evaluate alternatives", + "active": "Active", + "tip": "Higher thinking modes take more time but provide more thorough analysis" + }, + "modes": { + "none": { + "name": "Standard", + "description": "Regular Claude response", + "prefix": "" + }, + "think": { + "name": "Think", + "description": "Basic extended thinking", + "prefix": "think" + }, + "thinkHard": { + "name": "Think Hard", + "description": "More thorough evaluation", + "prefix": "think hard" + }, + "thinkHarder": { + "name": "Think Harder", + "description": "Deep analysis with alternatives", + "prefix": "think harder" + }, + "ultrathink": { + "name": "Ultrathink", + "description": "Maximum thinking budget", + "prefix": "ultrathink" + } + }, + "buttonTitle": "Thinking mode: {{mode}}" } } diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json index ef73178..87782e6 100644 --- a/src/i18n/locales/zh-CN/chat.json +++ b/src/i18n/locales/zh-CN/chat.json @@ -107,5 +107,41 @@ }, "clickToChangeMode": "点击更改权限模式(或在输入框中按 Tab)", "showAllCommands": "显示所有命令" + }, + "thinkingMode": { + "selector": { + "title": "思考模式", + "description": "扩展思考给 Claude 更多时间来评估替代方案", + "active": "激活", + "tip": "更高的思考模式需要更多时间,但提供更彻底的分析" + }, + "modes": { + "none": { + "name": "标准", + "description": "常规 Claude 响应", + "prefix": "" + }, + "think": { + "name": "思考", + "description": "基本扩展思考", + "prefix": "思考" + }, + "thinkHard": { + "name": "深入思考", + "description": "更彻底的评估", + "prefix": "深入思考" + }, + "thinkHarder": { + "name": "更深入思考", + "description": "考虑替代方案的深度分析", + "prefix": "更深入思考" + }, + "ultrathink": { + "name": "超级思考", + "description": "最大思考预算", + "prefix": "超级思考" + } + }, + "buttonTitle": "思考模式:{{mode}}" } }