File size: 7,659 Bytes
a21c316 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ThinkingBudgetConfig, ThinkingBudgetMode, ThinkingEffort } from "../../types/config";
interface ThinkingBudgetProps {
config: ThinkingBudgetConfig;
onChange: (config: ThinkingBudgetConfig) => void;
}
const DEFAULT_CONFIG: ThinkingBudgetConfig = {
mode: 'auto',
custom_value: 24576,
};
export default function ThinkingBudget({
config = DEFAULT_CONFIG,
onChange,
}: ThinkingBudgetProps) {
const { t } = useTranslation();
// 使用本地 state 管理输入值，允许临时的无效输入
const [inputValue, setInputValue] = useState(String(config.custom_value));
// 同步外部 config 变化
useEffect(() => {
setInputValue(String(config.custom_value));
}, [config.custom_value]);
const handleModeChange = (mode: ThinkingBudgetMode) => {
// 切换到 adaptive 模式时，如果未设置 effort，默认设置为 high
if (mode === 'adaptive' && !config.effort) {
onChange({ ...config, mode, effort: 'high' });
} else {
onChange({ ...config, mode });
}
};
const handleEffortChange = (effort: ThinkingEffort) => {
onChange({ ...config, effort });
};
// 输入时只更新本地 state
const handleInputChange = (val: string) => {
setInputValue(val);
};
// 失焦时校验并提交
const handleInputBlur = () => {
let num = parseInt(inputValue, 10);
if (isNaN(num) || num < 1024) num = 1024;
if (num > 65536) num = 65536;
setInputValue(String(num));
onChange({ ...config, custom_value: num });
};
const modes: ThinkingBudgetMode[] = ['auto', 'adaptive', 'passthrough', 'custom']; // Ensure adaptive is included
const efforts: ThinkingEffort[] = ['low', 'medium', 'high'];
return (
<div className="space-y-3">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-blue-50/30 dark:bg-blue-900/5 border border-blue-100/50 dark:border-blue-800/20 rounded-lg px-4 py-3">
<div className="space-y-0.5">
<h4 className="font-bold text-sm text-gray-900 dark:text-gray-100">
{t("settings.thinking_budget.title", { defaultValue: "思考预算 (Thinking Budget)" })}
</h4>
<p className="text-[10px] text-gray-500 dark:text-gray-400">
{t("settings.thinking_budget.mode_label", { defaultValue: "处理模式" })}
</p>
</div>
<div className="flex bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
{modes.map((key) => (
<button
key={key}
onClick={() => handleModeChange(key)}
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${config.mode === key
? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
}`}
>
{t(`settings.thinking_budget.mode.${key}`)}
</button>
))}
</div>
</div>
{/* Mode-specific UI (Compact) */}
<div className="px-1">
{config.mode === 'auto' && (
<p className="text-[10px] text-gray-400 dark:text-gray-500 italic">
{t("settings.thinking_budget.auto_hint", {
defaultValue: "自动模式：对 Gemini/Thinking 及联网请求自动限制在 24576 以避免错误。",
})}
</p>
)}
{config.mode === 'passthrough' && (
<p className="text-[10px] text-amber-600 dark:text-amber-500/80">
{t("settings.thinking_budget.passthrough_warning", {
defaultValue: "透传：直接使用调用方原始值，不支持高值可能导致失败。",
})}
</p>
)}
{config.mode === 'adaptive' && (
<div className="flex flex-col gap-2">
<div className="flex items-center gap-3">
<span className="text-xs text-gray-500 dark:text-gray-400">
{t("settings.thinking_budget.effort_label", { defaultValue: "思考强度" })}:
</span>
<div className="flex bg-gray-100 dark:bg-gray-800 p-0.5 rounded-lg">
{efforts.map((effort) => (
<button
key={effort}
onClick={() => handleEffortChange(effort)}
className={`px-2 py-1 rounded-md text-[10px] font-medium transition-all ${config.effort === effort
? 'bg-white dark:bg-gray-700 text-purple-600 dark:text-purple-400 shadow-sm'
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
}`}
>
{t(`settings.thinking_budget.effort.${effort}`)}
</button>
))}
</div>
</div>
<p className="text-[10px] text-purple-600 dark:text-purple-400/80">
{t("settings.thinking_budget.adaptive_hint", {
defaultValue: "自适应模式：由模型根据任务复杂度自动调整思考量。Claude 4.6+ 推荐使用此模式。",
})}
</p>
</div>
)}
{config.mode === 'custom' && (
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<input
type="number"
value={inputValue}
onChange={(e) => handleInputChange(e.target.value)}
onBlur={handleInputBlur}
className="w-24 bg-white dark:bg-base-100 border border-gray-200 dark:border-gray-700 rounded-md px-2 py-1 text-xs font-mono focus:ring-1 focus:ring-blue-500 outline-none transition-all [appearance:textfield]"
min={1024}
max={65536}
step={1024}
/>
<span className="text-[10px] text-gray-400 font-mono">TOKENS</span>
</div>
<p className="text-[10px] text-gray-500 dark:text-gray-500">
{t("settings.thinking_budget.custom_value_hint", {
defaultValue: "推荐：24576 (Flash) 或 51200 (扩展)",
})}
</p>
</div>
)}
</div>
</div>
);
}
|