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 })}
>
- Extended thinking gives Claude more time to evaluate alternatives + {t('thinkingMode.selector.description')}
- Tip: Higher thinking modes take more time but provide more thorough analysis + Tip: {t('thinkingMode.selector.tip')}