feat: add AgentSettingsPanel component
This commit is contained in:
KimiSwitch Dev
@@ -0,0 +1,376 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { useTranslation } from "../i18n";
|
||||
import type { TranslationKey } from "../i18n/zh";
|
||||
import { getAgentSettings, setAgentSettings } from "../lib/agent-settings";
|
||||
import type { AgentSettings, Hook, PermissionRule } from "../types";
|
||||
|
||||
interface AgentSettingsPanelProps {
|
||||
rawOther: unknown;
|
||||
onChange: (nextRawOther: unknown) => void;
|
||||
}
|
||||
|
||||
const THINKING_LEVELS = ["low", "medium", "high", "max"] as const;
|
||||
const THINKING_LABELS: Record<(typeof THINKING_LEVELS)[number], TranslationKey> = {
|
||||
low: "thinkingLow",
|
||||
medium: "thinkingMedium",
|
||||
high: "thinkingHigh",
|
||||
max: "thinkingMax",
|
||||
};
|
||||
|
||||
const PERMISSION_DECISIONS = ["allow", "deny", "ask"] as const;
|
||||
const PERMISSION_LABELS: Record<(typeof PERMISSION_DECISIONS)[number], TranslationKey> = {
|
||||
allow: "permissionAllow",
|
||||
deny: "permissionDeny",
|
||||
ask: "permissionAsk",
|
||||
};
|
||||
|
||||
const COMMON_EVENTS = ["PreToolUse", "PostToolUse"] as const;
|
||||
|
||||
export function AgentSettingsPanel({ rawOther, onChange }: AgentSettingsPanelProps) {
|
||||
const { t } = useTranslation();
|
||||
const settings = getAgentSettings(rawOther);
|
||||
|
||||
const update = (patch: Partial<AgentSettings>) => {
|
||||
onChange(setAgentSettings(rawOther, patch));
|
||||
};
|
||||
|
||||
const updateThinking = (patch: Partial<AgentSettings["thinking"]>) => {
|
||||
update({ thinking: { ...settings.thinking, ...patch } });
|
||||
};
|
||||
|
||||
const updateLoopControl = (patch: Partial<AgentSettings["loop_control"]>) => {
|
||||
update({ loop_control: { ...settings.loop_control, ...patch } });
|
||||
};
|
||||
|
||||
const updateBackground = (patch: Partial<AgentSettings["background"]>) => {
|
||||
update({ background: { ...settings.background, ...patch } });
|
||||
};
|
||||
|
||||
const setRules = (rules: PermissionRule[]) => {
|
||||
update({ permission: { rules } });
|
||||
};
|
||||
|
||||
const setHooks = (hooks: Hook[]) => {
|
||||
update({ hooks });
|
||||
};
|
||||
|
||||
const thinkingEnabled = settings.thinking?.enabled ?? true;
|
||||
|
||||
return (
|
||||
<div className="mt-6 space-y-4">
|
||||
<h3 className="text-gray-400 text-sm font-medium">{t("agentSettings")}</h3>
|
||||
|
||||
<Card title={t("enableThinking")}>
|
||||
<Checkbox
|
||||
label={t("enableThinking")}
|
||||
checked={thinkingEnabled}
|
||||
onChange={(checked) => updateThinking({ enabled: checked })}
|
||||
/>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<span className="text-sm text-gray-400">{t("thinkingLevel")}</span>
|
||||
<Segmented
|
||||
options={THINKING_LEVELS.map((lvl) => ({
|
||||
key: lvl,
|
||||
label: t(THINKING_LABELS[lvl]),
|
||||
}))}
|
||||
value={settings.thinking?.effort ?? "medium"}
|
||||
onChange={(effort) =>
|
||||
updateThinking({ effort: effort as AgentSettings["thinking"]["effort"] })
|
||||
}
|
||||
disabled={!thinkingEnabled}
|
||||
/>
|
||||
</div>
|
||||
<Checkbox
|
||||
label={t("thinkingKeep")}
|
||||
checked={settings.thinking?.keep === "all"}
|
||||
disabled={!thinkingEnabled}
|
||||
onChange={(checked) => updateThinking({ keep: checked ? "all" : false })}
|
||||
/>
|
||||
<p className="text-xs text-gray-500">{t("thinkingContextHint")}</p>
|
||||
</Card>
|
||||
|
||||
<Card title={t("loopControlSettings")}>
|
||||
<NumberField
|
||||
label={t("maxRetriesPerStep")}
|
||||
value={settings.loop_control?.max_retries_per_step ?? 3}
|
||||
onChange={(v) => updateLoopControl({ max_retries_per_step: v })}
|
||||
/>
|
||||
<NumberField
|
||||
label={t("reservedContextSize")}
|
||||
value={settings.loop_control?.reserved_context_size ?? 50000}
|
||||
onChange={(v) => updateLoopControl({ reserved_context_size: v })}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title={t("backgroundSettings")}>
|
||||
<NumberField
|
||||
label={t("maxRunningTasks")}
|
||||
value={settings.background?.max_running_tasks}
|
||||
onChange={(v) => updateBackground({ max_running_tasks: v })}
|
||||
/>
|
||||
<Checkbox
|
||||
label={t("keepAliveOnExit")}
|
||||
checked={settings.background?.keep_alive_on_exit ?? false}
|
||||
onChange={(checked) => updateBackground({ keep_alive_on_exit: checked })}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title={t("permissionRules")}>
|
||||
<div className="space-y-2">
|
||||
{(settings.permission?.rules ?? []).map((rule, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2">
|
||||
<select
|
||||
className="bg-[#1f1f23] border border-[#2a2a2e] rounded px-2 py-1 text-sm"
|
||||
value={rule.decision ?? "allow"}
|
||||
onChange={(e) => {
|
||||
const rules = [...(settings.permission?.rules ?? [])];
|
||||
rules[idx] = {
|
||||
...rule,
|
||||
decision: e.target.value as PermissionRule["decision"],
|
||||
};
|
||||
setRules(rules);
|
||||
}}
|
||||
>
|
||||
{PERMISSION_DECISIONS.map((d) => (
|
||||
<option key={d} value={d}>
|
||||
{t(PERMISSION_LABELS[d])}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
className="flex-1 min-w-0 bg-[#1f1f23] border border-[#2a2a2e] rounded px-2 py-1 text-sm"
|
||||
value={rule.pattern ?? ""}
|
||||
placeholder={t("permissionPattern")}
|
||||
onChange={(e) => {
|
||||
const rules = [...(settings.permission?.rules ?? [])];
|
||||
rules[idx] = { ...rule, pattern: e.target.value };
|
||||
setRules(rules);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const rules = [...(settings.permission?.rules ?? [])];
|
||||
rules.splice(idx, 1);
|
||||
setRules(rules);
|
||||
}}
|
||||
className="px-2 py-1 text-sm text-red-400 hover:bg-red-900/20 rounded"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setRules([
|
||||
...(settings.permission?.rules ?? []),
|
||||
{ decision: "allow", pattern: "" },
|
||||
]);
|
||||
}}
|
||||
className="px-3 py-1.5 text-sm border border-[#2a2a2e] rounded hover:bg-[#252529]"
|
||||
>
|
||||
{t("addRule")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setRules([
|
||||
...(settings.permission?.rules ?? []),
|
||||
{ decision: "allow", pattern: "Read" },
|
||||
{ decision: "deny", pattern: "Bash(rm -rf*)" },
|
||||
]);
|
||||
}}
|
||||
className="px-3 py-1.5 text-sm border border-[#2a2a2e] rounded hover:bg-[#252529]"
|
||||
>
|
||||
{t("addCommonRules")}
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card title={t("hooks")}>
|
||||
<div className="space-y-2">
|
||||
{(settings.hooks ?? []).map((hook, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 flex-wrap">
|
||||
<input
|
||||
list="hook-events"
|
||||
type="text"
|
||||
className="w-32 bg-[#1f1f23] border border-[#2a2a2e] rounded px-2 py-1 text-sm"
|
||||
value={hook.event ?? ""}
|
||||
placeholder={t("hookEvent")}
|
||||
onChange={(e) => {
|
||||
const hooks = [...(settings.hooks ?? [])];
|
||||
hooks[idx] = { ...hook, event: e.target.value };
|
||||
setHooks(hooks);
|
||||
}}
|
||||
/>
|
||||
<datalist id="hook-events">
|
||||
{COMMON_EVENTS.map((e) => (
|
||||
<option key={e} value={e} />
|
||||
))}
|
||||
</datalist>
|
||||
<input
|
||||
type="text"
|
||||
className="w-24 bg-[#1f1f23] border border-[#2a2a2e] rounded px-2 py-1 text-sm"
|
||||
value={hook.matcher ?? ""}
|
||||
placeholder={t("hookMatcher")}
|
||||
onChange={(e) => {
|
||||
const hooks = [...(settings.hooks ?? [])];
|
||||
hooks[idx] = { ...hook, matcher: e.target.value };
|
||||
setHooks(hooks);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="flex-1 min-w-0 bg-[#1f1f23] border border-[#2a2a2e] rounded px-2 py-1 text-sm"
|
||||
value={hook.command ?? ""}
|
||||
placeholder={t("hookCommand")}
|
||||
onChange={(e) => {
|
||||
const hooks = [...(settings.hooks ?? [])];
|
||||
hooks[idx] = { ...hook, command: e.target.value };
|
||||
setHooks(hooks);
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
className="w-20 bg-[#1f1f23] border border-[#2a2a2e] rounded px-2 py-1 text-sm"
|
||||
value={hook.timeout ?? ""}
|
||||
placeholder={t("hookTimeout")}
|
||||
onChange={(e) => {
|
||||
const hooks = [...(settings.hooks ?? [])];
|
||||
hooks[idx] = {
|
||||
...hook,
|
||||
timeout: e.target.value === "" ? undefined : Number(e.target.value),
|
||||
};
|
||||
setHooks(hooks);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const hooks = [...(settings.hooks ?? [])];
|
||||
hooks.splice(idx, 1);
|
||||
setHooks(hooks);
|
||||
}}
|
||||
className="px-2 py-1 text-sm text-red-400 hover:bg-red-900/20 rounded"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setHooks([...(settings.hooks ?? []), { event: "", matcher: "", command: "" }]);
|
||||
}}
|
||||
className="px-3 py-1.5 text-sm border border-[#2a2a2e] rounded hover:bg-[#252529]"
|
||||
>
|
||||
{t("addHook")}
|
||||
</button>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Card({ title, children }: { title: string; children: ReactNode }) {
|
||||
return (
|
||||
<div className="bg-[#16161a] border border-[#2a2a2e] rounded-xl p-4 space-y-3">
|
||||
<h4 className="text-gray-400 text-sm font-medium">{title}</h4>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Checkbox({
|
||||
label,
|
||||
checked,
|
||||
disabled,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
disabled?: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<label
|
||||
className={`flex items-center gap-2 text-sm ${
|
||||
disabled ? "text-gray-600" : "text-[#e5e5e7]"
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={(e) => onChange(e.target.checked)}
|
||||
className="rounded border-[#2a2a2e] bg-[#1f1f23] text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function NumberField({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
label: string;
|
||||
value?: number;
|
||||
onChange: (value: number | undefined) => void;
|
||||
}) {
|
||||
return (
|
||||
<label className="flex items-center gap-3 text-sm text-[#e5e5e7]">
|
||||
<span className="text-gray-400">{label}</span>
|
||||
<input
|
||||
type="number"
|
||||
value={value ?? ""}
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value;
|
||||
onChange(raw === "" ? undefined : Number(raw));
|
||||
}}
|
||||
className="w-32 bg-[#1f1f23] border border-[#2a2a2e] rounded px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function Segmented({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
options: { key: string; label: string }[];
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center rounded overflow-hidden border border-[#2a2a2e] ${
|
||||
disabled ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<button
|
||||
key={opt.key}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(opt.key)}
|
||||
className={`px-3 py-1 text-sm ${
|
||||
value === opt.key
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-[#1f1f23] text-gray-400 hover:bg-[#252529]"
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user