mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-08-31 00:03:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(models): show inline preset name conflicts

Browse Source
This commit is contained in:
Xubin Ren
2026-08-16 11:50:56 +08:00
parent c15e6f2a37
commit a956fe1d60
17 changed files with 180 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/settings/SettingsPage.tsx
+5
View File
@@ -137,6 +137,7 @@ export function SettingsPage({
modelPresetBeforeCreateRef,
modelPresetCreating,
modelPresetEditingName,
modelPresetNameError,
modelPresetPendingDelete,
nanobotFeatureAction,
nanobotFeatureConfirm,
@@ -187,6 +188,7 @@ export function SettingsPage({
setMcpOAuthCallbackUrl,
setModelPresetCreating,
setModelPresetEditingName,
setModelPresetNameError,
setModelPresetPendingDelete,
setNanobotFeatureConfirm,
setNanobotFeatures,
@@ -243,6 +245,7 @@ export function SettingsPage({
form={form}
setForm={setForm}
editingPresetName={modelPresetEditingName}
presetNameError={modelPresetNameError}
settings={settings}
dirty={modelDirty}
creating={modelPresetCreating}
@@ -259,9 +262,11 @@ export function SettingsPage({
onMigrate={handleMigrateModelConfigurations}
onBeginCreate={beginModelPresetCreation}
onCancelCreate={cancelModelPresetCreation}
onClearPresetNameError={() => setModelPresetNameError(null)}
onSelectConfiguration={(name) => {
setModelPresetCreating(false);
setModelPresetEditingName(name);
setModelPresetNameError(null);
modelPresetBeforeCreateRef.current = null;
}}
onDeleteConfiguration={setModelPresetPendingDelete}
webui/src/components/settings/models/ModelsSettings.tsx
+44 -11
View File
@@ -1,4 +1,4 @@
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
import { useEffect, useRef, useState, type Dispatch, type SetStateAction } from "react";
import {
ChevronDown,
ChevronRight,
@@ -160,6 +160,7 @@ export function ModelsSettings({
form,
setForm,
editingPresetName,
presetNameError,
settings,
dirty,
creating,
@@ -176,6 +177,7 @@ export function ModelsSettings({
onMigrate,
onBeginCreate,
onCancelCreate,
onClearPresetNameError,
onSelectConfiguration,
onDeleteConfiguration,
}: {
@@ -183,6 +185,7 @@ export function ModelsSettings({
form: AgentSettingsDraft;
setForm: Dispatch<SetStateAction<AgentSettingsDraft>>;
editingPresetName: string;
presetNameError: string | null;
settings: SettingsPayload;
dirty: boolean;
creating: boolean;
@@ -199,6 +202,7 @@ export function ModelsSettings({
onMigrate: () => void;
onBeginCreate: () => void;
onCancelCreate: () => void;
onClearPresetNameError: () => void;
onSelectConfiguration: (name: string) => void;
onDeleteConfiguration: (preset: SettingsPayload["model_presets"][number]) => void;
}) {
@@ -206,10 +210,15 @@ export function ModelsSettings({
const tx = (key: string, fallback: string, values?: Record<string, unknown>) =>
t(key, { defaultValue: fallback, ...(values ?? {}) });
const [editorOpen, setEditorOpen] = useState(false);
const presetNameInputRef = useRef<HTMLInputElement>(null);
const [editorRowKey, setEditorRowKey] = useState<string | null>(null);
const [advancedOpen, setAdvancedOpen] = useState(false);
const [draggedCallOrderIndex, setDraggedCallOrderIndex] = useState<number | null>(null);
const [dragOverCallOrderIndex, setDragOverCallOrderIndex] = useState<number | null>(null);
useEffect(() => {
if (presetNameError) presetNameInputRef.current?.focus();
}, [presetNameError]);
const namedPresets = settings.model_presets.filter((preset) => !preset.is_default);
const namedPresetsByName = new Map(namedPresets.map((preset) => [preset.name, preset]));
const unorderedPresets = namedPresets.filter((preset) => !callOrder.includes(preset.name));
@@ -355,16 +364,40 @@ export function ModelsSettings({
"Used everywhere, including /model commands. Names must be unique.",
)}
>
<Input
autoFocus={creating}
aria-label={tx("settings.models.presetName", "Preset name")}
value={form.modelPreset}
placeholder={tx("settings.models.presetNamePlaceholder", "Fast writing")}
onChange={(event) =>
setForm((prev) => ({ ...prev, modelPreset: event.target.value }))
}
className="h-8 w-[min(280px,70vw)] rounded-full text-[13px]"
/>
<div
className={cn(
"w-[min(280px,70vw)] motion-reduce:animate-none",
presetNameError && "animate-[preset-name-shake_180ms_ease-in-out]",
)}
>
<Input
ref={presetNameInputRef}
autoFocus={creating}
aria-label={tx("settings.models.presetName", "Preset name")}
aria-invalid={Boolean(presetNameError)}
aria-describedby={presetNameError ? "model-preset-name-error" : undefined}
value={form.modelPreset}
placeholder={tx("settings.models.presetNamePlaceholder", "Fast writing")}
onChange={(event) => {
onClearPresetNameError();
setForm((prev) => ({ ...prev, modelPreset: event.target.value }));
}}
className={cn(
"h-8 rounded-full text-[13px]",
presetNameError &&
"border-destructive/70 focus-visible:border-destructive focus-visible:ring-destructive/25",
)}
/>
{presetNameError ? (
<p
id="model-preset-name-error"
role="alert"
className="mt-1.5 px-1 text-[12px] leading-4 text-destructive"
>
{presetNameError}
</p>
) : null}
</div>
</SettingsRow>
<SettingsRow title={t("settings.rows.provider")}>
<ProviderPicker
webui/src/components/settings/models/useModelSettingsActions.ts
+45 -2
View File
@@ -15,6 +15,7 @@ import {
import type { ModelSettingsState } from "@/components/settings/models/useModelSettingsState";
import { normalizeContextWindowTokens } from "@/components/settings/shared/ModelControls";
import {
ApiError,
completeProviderOAuth,
createModelConfiguration,
createProviderSettings,
@@ -107,6 +108,7 @@ export function useModelSettingsActions({
setModelMigrationSaving,
setModelPresetCreating,
setModelPresetEditingName,
setModelPresetNameError,
setModelPresetPendingDelete,
setProviderForms,
setProviderOAuthCompleting,
@@ -119,6 +121,33 @@ export function useModelSettingsActions({
visibleProviderKeys,
} = state;
const presetNameConflict = (name: string, currentName?: string) => {
const normalized = name.toLowerCase();
return settings?.model_presets.some(
(preset) =>
!preset.is_default &&
preset.name !== currentName &&
preset.name.toLowerCase() === normalized,
) ?? false;
};
const showPresetNameConflict = () => {
setModelPresetNameError(
t("settings.models.presetNameDuplicate", {
defaultValue: "A preset with this name already exists.",
}),
);
setError(null);
};
const handlePresetSaveError = (reason: unknown) => {
if (reason instanceof ApiError && reason.status === 409) {
showPresetNameConflict();
return;
}
setError((reason as Error).message);
};
const saveModelSettings = async () => {
if (
!settings ||
@@ -144,6 +173,11 @@ export function useModelSettingsActions({
) {
return;
}
if (presetNameConflict(name)) {
showPresetNameConflict();
return;
}
setModelPresetNameError(null);
setModelConfigurationSaving(true);
try {
const payload = await createModelConfiguration(client, {
@@ -175,9 +209,10 @@ export function useModelSettingsActions({
}
modelPresetBeforeCreateRef.current = null;
onModelNameChange(finalPayload.agent.model || null);
setModelPresetNameError(null);
setError(null);
} catch (err) {
setError((err as Error).message);
handlePresetSaveError(err);
} finally {
setModelConfigurationSaving(false);
}
@@ -190,6 +225,11 @@ export function useModelSettingsActions({
);
if (!selectedPreset) return;
const nextName = form.modelPreset.trim();
if (presetNameConflict(nextName, selectedPreset.name)) {
showPresetNameConflict();
return;
}
setModelPresetNameError(null);
const reasoningEffort = form.reasoningEffort || null;
setSaving(true);
try {
@@ -214,9 +254,10 @@ export function useModelSettingsActions({
setForm(agentDraftFromPayload(payload, nextName));
setModelPresetEditingName(nextName);
onModelNameChange(payload.agent.model || null);
setModelPresetNameError(null);
setError(null);
} catch (err) {
setError((err as Error).message);
handlePresetSaveError(err);
} finally {
setSaving(false);
}
@@ -235,6 +276,7 @@ export function useModelSettingsActions({
configuredModelProviderOptions[0]?.name ??
"";
modelPresetBeforeCreateRef.current = modelPresetEditingName;
setModelPresetNameError(null);
setForm((prev) => ({
...prev,
modelPreset: "",
@@ -254,6 +296,7 @@ export function useModelSettingsActions({
if (!settings || modelConfigurationSaving) return;
const previousPreset = modelPresetBeforeCreateRef.current;
setModelPresetCreating(false);
setModelPresetNameError(null);
setForm(agentDraftFromPayload(settings, previousPreset ?? undefined));
setModelPresetEditingName(previousPreset ?? agentDraftFromPayload(settings).modelPreset);
modelPresetBeforeCreateRef.current = null;
webui/src/components/settings/models/useModelSettingsState.ts
+3
View File
@@ -14,6 +14,7 @@ export function useModelSettingsState(initialSettings: SettingsPayload | null) {
: DEFAULT_AGENT_SETTINGS_DRAFT;
const [saving, setSaving] = useState(false);
const [modelPresetCreating, setModelPresetCreating] = useState(false);
const [modelPresetNameError, setModelPresetNameError] = useState<string | null>(null);
const [modelConfigurationSaving, setModelConfigurationSaving] = useState(false);
const [modelCallOrderSaving, setModelCallOrderSaving] = useState(false);
const [modelMigrationSaving, setModelMigrationSaving] = useState(false);
@@ -50,6 +51,7 @@ export function useModelSettingsState(initialSettings: SettingsPayload | null) {
modelPresetBeforeCreateRef,
modelPresetCreating,
modelPresetEditingName,
modelPresetNameError,
modelPresetPendingDelete,
providerForms,
providerOAuthCompleting,
@@ -68,6 +70,7 @@ export function useModelSettingsState(initialSettings: SettingsPayload | null) {
setModelMigrationSaving,
setModelPresetCreating,
setModelPresetEditingName,
setModelPresetNameError,
setModelPresetPendingDelete,
setProviderForms,
setProviderOAuthCompleting,
webui/src/components/settings/useSettingsController.ts
+4 -2
View File
@@ -93,11 +93,11 @@ export function useSettingsController({
const {
editingProviderKeys, expandedProvider, form, modelCallOrder, modelCallOrderSaving,
modelConfigurationSaving, modelMigrationSaving, modelPresetBeforeCreateRef,
modelPresetCreating, modelPresetEditingName, modelPresetPendingDelete,
modelPresetCreating, modelPresetEditingName, modelPresetNameError, modelPresetPendingDelete,
providerForms, providerOAuthCompleting,
providerOAuthDialogError, providerOAuthFlow, providerOAuthFlowRef, providerOAuthResponse,
providerSaving, saving, setForm,
setModelCallOrder, setModelPresetCreating, setModelPresetEditingName,
setModelCallOrder, setModelPresetCreating, setModelPresetEditingName, setModelPresetNameError,
setModelPresetPendingDelete,
setProviderForms, setProviderOAuthCompleting, setProviderOAuthDialogError,
setProviderOAuthFlow, setProviderOAuthResponse, visibleProviderKeys,
@@ -538,6 +538,7 @@ export function useSettingsController({
modelPresetBeforeCreateRef,
modelPresetCreating,
modelPresetEditingName,
modelPresetNameError,
modelPresetPendingDelete,
nanobotFeatureAction,
nanobotFeatureConfirm,
@@ -588,6 +589,7 @@ export function useSettingsController({
setMcpOAuthCallbackUrl,
setModelPresetCreating,
setModelPresetEditingName,
setModelPresetNameError,
setModelPresetPendingDelete,
setNanobotFeatureConfirm,
setNanobotFeatures,
webui/src/globals.css
+15
View File
@@ -696,6 +696,21 @@
transform: scale(0.98);
}
@keyframes preset-name-shake {
0%,
100% {
transform: translateX(0);
}
35% {
transform: translateX(-2px);
}
70% {
transform: translateX(2px);
}
}
@keyframes composer-model-pill-viewport-enter {
from {
transform: scale(0.9074);
webui/src/i18n/locales/en/common.json
+1
View File
@@ -144,6 +144,7 @@
"editPreset": "Edit preset",
"presetName": "Preset name",
"presetNameHelp": "Used in the interface and /model commands. Names must be unique.",
"presetNameDuplicate": "A preset with this name already exists.",
"presetNamePlaceholder": "Fast writing",
"advancedOptions": "Advanced options",
"advancedSummary": "Context {{context}} · Max {{max}} tokens",
webui/src/i18n/locales/es/common.json
+1
View File
@@ -420,6 +420,7 @@
"editPreset": "Editar preajuste",
"presetName": "Nombre del preajuste",
"presetNameHelp": "Se usa en la interfaz y en /model. Los nombres deben ser únicos.",
"presetNameDuplicate": "Ya existe un preajuste con este nombre.",
"presetNamePlaceholder": "Escritura rápida",
"advancedOptions": "Opciones avanzadas",
"advancedSummary": "Contexto {{context}} · Máx. {{max}} tokens",
webui/src/i18n/locales/fr/common.json
+1
View File
@@ -420,6 +420,7 @@
"editPreset": "Modifier le préréglage",
"presetName": "Nom du préréglage",
"presetNameHelp": "Utilisé dans l’interface et avec /model. Les noms doivent être uniques.",
"presetNameDuplicate": "Un préréglage portant ce nom existe déjà.",
"presetNamePlaceholder": "Rédaction rapide",
"advancedOptions": "Options avancées",
"advancedSummary": "Contexte {{context}} · Max. {{max}} tokens",
webui/src/i18n/locales/id/common.json
+1
View File
@@ -420,6 +420,7 @@
"editPreset": "Ubah prasetel",
"presetName": "Nama prasetel",
"presetNameHelp": "Digunakan di antarmuka dan perintah /model. Nama harus unik.",
"presetNameDuplicate": "Preset dengan nama ini sudah ada.",
"presetNamePlaceholder": "Menulis cepat",
"advancedOptions": "Opsi lanjutan",
"advancedSummary": "Konteks {{context}} · Maks. {{max}} token",
webui/src/i18n/locales/ja/common.json
+1
View File
@@ -420,6 +420,7 @@
"editPreset": "プリセットを編集",
"presetName": "プリセット名",
"presetNameHelp": "画面と /model コマンドで使用します。名前は一意である必要があります。",
"presetNameDuplicate": "同じ名前のプリセットがすでに存在します。",
"presetNamePlaceholder": "高速執筆",
"advancedOptions": "詳細オプション",
"advancedSummary": "コンテキスト {{context}} · 最大 {{max}} トークン",
webui/src/i18n/locales/ko/common.json
+1
View File
@@ -420,6 +420,7 @@
"editPreset": "프리셋 편집",
"presetName": "프리셋 이름",
"presetNameHelp": "화면과 /model 명령에서 사용됩니다. 이름은 고유해야 합니다.",
"presetNameDuplicate": "같은 이름의 프리셋이 이미 있습니다.",
"presetNamePlaceholder": "빠른 작성",
"advancedOptions": "고급 옵션",
"advancedSummary": "컨텍스트 {{context}} · 최대 {{max}} 토큰",
webui/src/i18n/locales/pt-BR/common.json
+1
View File
@@ -144,6 +144,7 @@
"editPreset": "Editar predefinição",
"presetName": "Nome da predefinição",
"presetNameHelp": "Usado na interface e nos comandos /model. Os nomes devem ser únicos.",
"presetNameDuplicate": "Já existe uma predefinição com este nome.",
"presetNamePlaceholder": "Escrita rápida",
"advancedOptions": "Opções avançadas",
"advancedSummary": "Contexto {{context}} · Máx. {{max}} tokens",
webui/src/i18n/locales/vi/common.json
+1
View File
@@ -420,6 +420,7 @@
"editPreset": "Sửa cấu hình đặt trước",
"presetName": "Tên cấu hình đặt trước",
"presetNameHelp": "Dùng trong giao diện và lệnh /model. Tên phải là duy nhất.",
"presetNameDuplicate": "Đã có một cấu hình sẵn với tên này.",
"presetNamePlaceholder": "Viết nhanh",
"advancedOptions": "Tùy chọn nâng cao",
"advancedSummary": "Ngữ cảnh {{context}} · Tối đa {{max}} token",
webui/src/i18n/locales/zh-CN/common.json
+1
View File
@@ -144,6 +144,7 @@
"editPreset": "编辑预设",
"presetName": "预设名称",
"presetNameHelp": "用于界面和 /model 命令；名称不能重复。",
"presetNameDuplicate": "已存在同名预设。",
"presetNamePlaceholder": "快速写作",
"advancedOptions": "高级选项",
"advancedSummary": "上下文 {{context}} · 最大输出 {{max}} tokens",
webui/src/i18n/locales/zh-TW/common.json
+1
View File
@@ -420,6 +420,7 @@
"editPreset": "編輯預設",
"presetName": "預設名稱",
"presetNameHelp": "用於介面和 /model 命令；名稱不得重複。",
"presetNameDuplicate": "已有同名預設。",
"presetNamePlaceholder": "快速寫作",
"advancedOptions": "進階選項",
"advancedSummary": "上下文 {{context}} · 最大輸出 {{max}} tokens",
webui/src/tests/settings-models.test.tsx
+54
View File
@@ -145,6 +145,25 @@ describe("Settings models", () => {
expect(screen.getByRole("textbox", { name: "Preset name" })).toHaveValue("Codex");
});
it("maps a server-side name conflict back to the preset name field", async () => {
const payload = settingsPayload();
vi.stubGlobal("fetch", vi.fn(() => new Promise<Response>(() => {})));
requestMutationMock.mockRejectedValueOnce({ status: 409 });
renderSettingsView({ initialSection: "models", initialSettings: payload });
await togglePresetEditor();
const nameInput = screen.getByRole("textbox", { name: "Preset name" });
fireEvent.change(nameInput, { target: { value: "Codex" } });
fireEvent.click(screen.getByRole("button", { name: "Save preset" }));
expect(await screen.findByRole("alert")).toHaveTextContent(
"A preset with this name already exists.",
);
expect(nameInput).toHaveAttribute("aria-invalid", "true");
expect(nameInput).toHaveFocus();
});
it("keeps generation parameters collapsed until advanced options are opened", async () => {
vi.stubGlobal(
"fetch",
@@ -578,6 +597,41 @@ describe("Settings models", () => {
expect(screen.queryByRole("button", { name: "Save order" })).not.toBeInTheDocument();
});
it("shows an inline error when a new preset name already exists", async () => {
const { payload } = settingsPayloadWithBackup();
vi.stubGlobal(
"fetch",
vi.fn(async () => ({ ok: false, status: 404, json: async () => ({}) }) as Response),
);
renderSettingsView({ initialSection: "models", initialSettings: payload });
fireEvent.click(screen.getByRole("button", { name: "New model preset" }));
const nameInput = screen.getByRole("textbox", { name: "Preset name" });
fireEvent.change(nameInput, { target: { value: "PRIMARY" } });
await openPopover(screen.getByRole("button", { name: "Select model" }));
const modelSearch = await screen.findByRole("combobox", {
name: "Search or type model ID",
});
fireEvent.change(modelSearch, { target: { value: "openai/gpt-4o-mini" } });
fireEvent.keyDown(modelSearch, { key: "Enter" });
fireEvent.click(screen.getByRole("button", { name: "Save preset" }));
expect(requestMutationMock).not.toHaveBeenCalled();
expect(nameInput).toHaveAttribute("aria-invalid", "true");
expect(nameInput).toHaveAttribute("aria-describedby", "model-preset-name-error");
expect(screen.getByRole("alert")).toHaveTextContent(
"A preset with this name already exists.",
);
expect(nameInput.parentElement).toHaveClass(
"animate-[preset-name-shake_180ms_ease-in-out]",
);
fireEvent.change(nameInput, { target: { value: "Writer" } });
expect(nameInput).toHaveAttribute("aria-invalid", "false");
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
});
it("converts legacy model settings into presets before editing call order", async () => {
const migratedPayload = settingsPayload();
const defaultPreset = {