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

feat(webui): add responsive model preset detail pane

Browse Source
This commit is contained in:
Xubin Ren 2026-08-07 07:55:29 +08:00
parent 2c7943a133
commit ada07aa799
12 changed files with 155 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
webui/src/components/settings/SettingsView.tsx
View File

@ -3375,10 +3375,9 @@ function ModelsSettings({
);
const callOrderBusy = orderSaving || saving;
const selectPreset = (preset: SettingsPayload["model_presets"][number]) => {
const toggleCurrentPreset = !creating && selectedPreset?.name === preset.name;
onSelectConfiguration();
if (toggleCurrentPreset) {
setEditorOpen((open) => !open);
if (!creating && selectedPreset?.name === preset.name) {
setEditorOpen(true);
return;
}
setForm((prev) => ({
@ -3394,6 +3393,11 @@ function ModelsSettings({
}));
setEditorOpen(true);
};
const closeEditor = () => {
if (creatingSaving) return;
if (creating) onCancelCreate();
setEditorOpen(false);
};
const moveCallOrderItem = (index: number, offset: -1 | 1) => {
if (callOrderBusy) return;
@ -3473,7 +3477,13 @@ function ModelsSettings({
</Button>
</div>
) : (
<>
<div className="xl:grid xl:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] xl:divide-x xl:divide-border/45">
<div
className={cn(
"min-w-0 divide-y divide-border/45",
editorOpen && "hidden xl:block",
)}
>
<div role="list" className="divide-y divide-border/45">
{presetRows.map(({ key, name, orderIndex, preset }) => {
const ordered = orderIndex >= 0;
@ -3495,6 +3505,8 @@ function ModelsSettings({
isDropTarget &&
draggedCallOrderIndex !== null &&
draggedCallOrderIndex < orderIndex;
const isSelected =
editorOpen && !creating && selectedPreset?.name === name;
return (
<div
key={key}
@ -3567,6 +3579,7 @@ function ModelsSettings({
dropAfterTarget &&
"after:absolute after:inset-x-4 after:bottom-0 after:z-10 after:h-0.5 after:rounded-full after:bg-foreground sm:after:inset-x-5",
ordered && draggedCallOrderIndex === orderIndex && "opacity-35",
isSelected && "bg-muted/45 hover:bg-muted/45",
"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
)}
>
@ -3580,8 +3593,8 @@ function ModelsSettings({
)}
<button
type="button"
aria-pressed={selectedPreset?.name === name}
aria-expanded={selectedPreset?.name === name && editorOpen}
aria-pressed={isSelected}
aria-controls="model-preset-detail"
disabled={!preset}
onClick={() => preset && selectPreset(preset)}
className="flex min-w-0 flex-1 items-center gap-3 rounded-[12px] text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
@ -3627,8 +3640,8 @@ function ModelsSettings({
</span>
<ChevronRight
className={cn(
"h-4 w-4 shrink-0 text-muted-foreground transition-transform",
selectedPreset?.name === name && editorOpen && "rotate-90",
"h-4 w-4 shrink-0 text-muted-foreground transition-[color,transform] group-hover:translate-x-0.5",
isSelected && "text-foreground",
)}
aria-hidden
/>
@ -3694,18 +3707,45 @@ function ModelsSettings({
</SettingsStatusMessage>
) : null}
</div>
</>
)}
{editorOpen && (selectedPreset || creating) ? (
<>
<div className="flex min-h-[52px] items-center justify-between gap-3 bg-muted/15 px-4 py-3 sm:px-5">
<span className="text-[13px] font-semibold text-foreground/85">
{creating
? tx("settings.models.newPreset", "New model preset")
: tx("settings.models.editPreset", "Edit preset")}
</span>
</div>
</div>
<div
id="model-preset-detail"
className={cn(
"min-w-0 divide-y divide-border/45",
!editorOpen && "hidden xl:block",
)}
>
{editorOpen && (selectedPreset || creating) ? (
<>
<div className="flex min-h-[64px] items-center gap-2 bg-muted/15 px-4 py-3 sm:px-5">
<button
type="button"
onClick={closeEditor}
disabled={creatingSaving}
aria-label={tx(
"settings.models.backToPresets",
"Back to model presets",
)}
className="-ml-2 grid h-8 w-8 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40 xl:hidden"
>
<ChevronLeft className="h-4 w-4" aria-hidden />
</button>
<span className="min-w-0">
<span className="block truncate text-[14px] font-semibold text-foreground/90">
{creating
? tx("settings.models.newPreset", "New model preset")
: selectedPreset?.label}
</span>
<span className="mt-0.5 block truncate text-[12px] text-muted-foreground">
{creating
? tx(
"settings.models.newPresetHelp",
"Save a reusable model and its generation settings.",
)
: tx("settings.models.editPreset", "Edit preset")}
</span>
</span>
</div>
<SettingsRow title={tx("settings.models.presetName", "Preset name")}>
<Input
autoFocus={creating}
@ -3813,10 +3853,7 @@ function ModelsSettings({
variant="ghost"
className="self-start rounded-full text-muted-foreground"
disabled={creatingSaving}
onClick={() => {
setEditorOpen(false);
onCancelCreate();
}}
onClick={closeEditor}
>
{tx("settings.actions.cancel", "Cancel")}
</Button>
@ -3860,8 +3897,28 @@ function ModelsSettings({
</Button>
</div>
</div>
</>
) : null}
</>
) : (
<div className="flex min-h-[320px] items-center justify-center px-8 py-12 text-center">
<div className="max-w-[16rem]">
<span className="mx-auto grid h-10 w-10 place-items-center rounded-[14px] bg-muted text-muted-foreground">
<Pencil className="h-4 w-4" aria-hidden />
</span>
<p className="mt-3 text-[14px] font-medium text-foreground">
{tx("settings.models.selectPreset", "Select a preset")}
</p>
<p className="mt-1 text-[12px] leading-5 text-muted-foreground">
{tx(
"settings.models.selectPresetHelp",
"Select a preset from the list to edit its model and generation settings.",
)}
</p>
</div>
</div>
)}
</div>
</div>
)}
</SettingsGroup>
</section>
</div>

3
webui/src/i18n/locales/en/common.json
View File

@ -132,6 +132,9 @@
"newPresetHelp": "Save a reusable model and its generation settings.",
"presets": "Model presets",
"editPreset": "Edit preset",
"backToPresets": "Back to model presets",
"selectPreset": "Select a preset",
"selectPresetHelp": "Select a preset from the list to edit its model and generation settings.",
"presetName": "Preset name",
"presetNameHelp": "A short name used throughout model settings.",
"presetNamePlaceholder": "Fast writing",

3
webui/src/i18n/locales/es/common.json
View File

@ -408,6 +408,9 @@
"newPresetHelp": "Guarda un modelo reutilizable y sus ajustes de generación.",
"presets": "Preajustes de modelo",
"editPreset": "Editar preajuste",
"backToPresets": "Volver a los preajustes de modelo",
"selectPreset": "Seleccionar un preajuste",
"selectPresetHelp": "Selecciona un preajuste de la lista para editar su modelo y los ajustes de generación.",
"presetName": "Nombre del preajuste",
"presetNameHelp": "Un nombre corto para usar en los ajustes de modelos.",
"presetNamePlaceholder": "Escritura rápida",

3
webui/src/i18n/locales/fr/common.json
View File

@ -408,6 +408,9 @@
"newPresetHelp": "Enregistrez un modèle réutilisable et ses paramètres de génération.",
"presets": "Préréglages de modèle",
"editPreset": "Modifier le préréglage",
"backToPresets": "Retour aux préréglages de modèle",
"selectPreset": "Sélectionner un préréglage",
"selectPresetHelp": "Sélectionnez un préréglage dans la liste pour modifier son modèle et ses paramètres de génération.",
"presetName": "Nom du préréglage",
"presetNameHelp": "Un nom court utilisé dans les paramètres des modèles.",
"presetNamePlaceholder": "Rédaction rapide",

3
webui/src/i18n/locales/id/common.json
View File

@ -408,6 +408,9 @@
"newPresetHelp": "Simpan model yang dapat digunakan kembali beserta pengaturan generasinya.",
"presets": "Prasetel model",
"editPreset": "Ubah prasetel",
"backToPresets": "Kembali ke prasetel model",
"selectPreset": "Pilih prasetel",
"selectPresetHelp": "Pilih prasetel dari daftar untuk mengubah model dan pengaturan generasinya.",
"presetName": "Nama prasetel",
"presetNameHelp": "Nama singkat yang digunakan di pengaturan model.",
"presetNamePlaceholder": "Menulis cepat",

3
webui/src/i18n/locales/ja/common.json
View File

@ -408,6 +408,9 @@
"newPresetHelp": "再利用できるモデルと生成設定を保存します。",
"presets": "モデルプリセット",
"editPreset": "プリセットを編集",
"backToPresets": "モデルプリセットに戻る",
"selectPreset": "プリセットを選択",
"selectPresetHelp": "リストからプリセットを選択して、モデルと生成設定を編集します。",
"presetName": "プリセット名",
"presetNameHelp": "モデル設定で使用する短い名前です。",
"presetNamePlaceholder": "高速執筆",

3
webui/src/i18n/locales/ko/common.json
View File

@ -408,6 +408,9 @@
"newPresetHelp": "재사용할 모델과 생성 설정을 저장합니다.",
"presets": "모델 프리셋",
"editPreset": "프리셋 편집",
"backToPresets": "모델 프리셋으로 돌아가기",
"selectPreset": "프리셋 선택",
"selectPresetHelp": "목록에서 프리셋을 선택하여 모델과 생성 설정을 편집하세요.",
"presetName": "프리셋 이름",
"presetNameHelp": "모델 설정에서 사용할 짧은 이름입니다.",
"presetNamePlaceholder": "빠른 작성",

3
webui/src/i18n/locales/pt-BR/common.json
View File

@ -132,6 +132,9 @@
"newPresetHelp": "Salve um modelo reutilizável e suas configurações de geração.",
"presets": "Predefinições de modelo",
"editPreset": "Editar predefinição",
"backToPresets": "Voltar às predefinições de modelo",
"selectPreset": "Selecionar uma predefinição",
"selectPresetHelp": "Selecione uma predefinição na lista para editar o modelo e as configurações de geração.",
"presetName": "Nome da predefinição",
"presetNameHelp": "Um nome curto usado nas configurações de modelo.",
"presetNamePlaceholder": "Escrita rápida",

3
webui/src/i18n/locales/vi/common.json
View File

@ -408,6 +408,9 @@
"newPresetHelp": "Lưu mô hình có thể tái sử dụng cùng các thiết lập sinh nội dung.",
"presets": "Cấu hình mô hình đặt trước",
"editPreset": "Sửa cấu hình đặt trước",
"backToPresets": "Quay lại cấu hình mô hình đặt trước",
"selectPreset": "Chọn một cấu hình đặt trước",
"selectPresetHelp": "Chọn một cấu hình đặt trước trong danh sách để chỉnh sửa mô hình và cài đặt sinh nội dung.",
"presetName": "Tên cấu hình đặt trước",
"presetNameHelp": "Tên ngắn dùng trong phần thiết lập mô hình.",
"presetNamePlaceholder": "Viết nhanh",

3
webui/src/i18n/locales/zh-CN/common.json
View File

@ -132,6 +132,9 @@
"newPresetHelp": "保存可复用的模型及其生成参数。",
"presets": "模型预设",
"editPreset": "编辑预设",
"backToPresets": "返回模型预设",
"selectPreset": "选择一个预设",
"selectPresetHelp": "从列表中选择一个预设，编辑它的模型和生成参数。",
"presetName": "预设名称",
"presetNameHelp": "在模型设置中使用的简短名称。",
"presetNamePlaceholder": "快速写作",

3
webui/src/i18n/locales/zh-TW/common.json
View File

@ -408,6 +408,9 @@
"newPresetHelp": "儲存可重複使用的模型與生成參數。",
"presets": "模型預設",
"editPreset": "編輯預設",
"backToPresets": "返回模型預設",
"selectPreset": "選擇一個預設",
"selectPresetHelp": "從列表中選擇一個預設，編輯它的模型與生成參數。",
"presetName": "預設名稱",
"presetNameHelp": "模型設定中使用的簡短名稱。",
"presetNamePlaceholder": "快速寫作",

42
webui/src/tests/settings-view.test.tsx
View File

@ -2137,6 +2137,44 @@ describe("SettingsView Apps catalog", () => {
expect(reasoningEffort).toHaveValue("provider-native-mode");
});
it("associates preset selection with the responsive detail pane", async () => {
vi.stubGlobal(
"fetch",
vi.fn(async (input: RequestInfo | URL) => {
const url = String(input);
if (url === "/api/settings") return jsonResponse(settingsPayload());
if (url === "/api/settings/cli-apps") {
return jsonResponse({ apps: [], installed_count: 0 });
}
if (url === "/api/settings/mcp-presets") {
return jsonResponse({ presets: [], installed_count: 0 });
}
return { ok: false, status: 404, json: async () => ({}) } as Response;
}),
);
renderSettingsView({ initialSection: "models" });
const row = await screen.findByTestId("model-call-order-row-primary");
const trigger = within(row).getAllByRole("button")[0];
const detail = document.getElementById("model-preset-detail");
expect(detail).toHaveClass("hidden", "xl:block");
expect(trigger).toHaveAttribute("aria-controls", "model-preset-detail");
fireEvent.click(trigger);
expect(trigger).toHaveAttribute("aria-pressed", "true");
expect(detail).not.toHaveClass("hidden");
expect(within(detail as HTMLElement).getByDisplayValue("Primary")).toBeInTheDocument();
const backButton = screen.getByRole("button", { name: "Back to model presets" });
expect(backButton).toHaveClass("xl:hidden");
fireEvent.click(backButton);
expect(trigger).toHaveAttribute("aria-pressed", "false");
expect(detail).toHaveClass("hidden", "xl:block");
});
it("drags model presets to reorder and saves the model call order immediately", async () => {
const { payload, backupPreset } = settingsPayloadWithBackup();
const updatedPayload: SettingsPayload = {
@ -4010,6 +4048,10 @@ describe("SettingsView Apps catalog", () => {
expect(screen.queryByRole("dialog", { name: "New model preset" })).not.toBeInTheDocument();
expect(screen.getByPlaceholderText("Fast writing")).toHaveValue("");
expect(screen.queryByText("Temperature")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Back to model presets" }));
expect(screen.queryByPlaceholderText("Fast writing")).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "New model preset" }));
fireEvent.click(screen.getByRole("button", { name: /Advanced options/ }));
expect(screen.getByText("Temperature")).toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Cancel" }));