diff --git a/web/src/pages/user-setting/setting-model/instance-card/models-section/hooks.ts b/web/src/pages/user-setting/setting-model/instance-card/models-section/hooks.ts index 093efd93bc..31eba5f379 100644 --- a/web/src/pages/user-setting/setting-model/instance-card/models-section/hooks.ts +++ b/web/src/pages/user-setting/setting-model/instance-card/models-section/hooks.ts @@ -15,7 +15,9 @@ */ import { LLMFactory } from '@/constants/llm'; +import { useQueryClient } from '@tanstack/react-query'; import { + LlmKeys, useAddInstanceModel, useDeleteInstanceModels, useListProviderModels, @@ -615,14 +617,10 @@ export function useModelMutations({ interface UseModelEditArgs { providerName: string; instanceName: string; - setCatalog: Dispatch>; } -export function useModelEdit({ - providerName, - instanceName, - setCatalog, -}: UseModelEditArgs) { +export function useModelEdit({ providerName, instanceName }: UseModelEditArgs) { + const queryClient = useQueryClient(); const customModelDialogFields = useCustomModelFields(); const { patchInstanceModel, loading: editLoading } = usePatchInstanceModel(); // Model currently being edited via AddCustomModelDialog (with `name` @@ -655,17 +653,34 @@ export function useModelEdit({ }; }, [editingModel]); - // Persist edits to an existing model. The local `catalog` is patched so - // the UI reflects the new values immediately, before the cache - // invalidation lands. + // Persist edits to an existing model. The instance-models cache + // (the source of truth for already-added models) is patched so the + // UI reflects the new `max_tokens` / `model_types` / `is_tools` + // values immediately, before the PATCH's invalidation refetches. + // Updating `catalog` instead would be a no-op here: the union in + // `useModelsDerived` lets `instanceItems` win on name conflicts, so + // a catalog-only patch is invisible for any model already attached + // to the instance. const handleEditSubmit = async (item: IProviderModelItem) => { if (!editingModel) return; const targetName = editingModel.name; - setCatalog((prev) => - prev.some((m) => m.name === targetName) - ? prev.map((m) => (m.name === targetName ? item : m)) - : prev, + queryClient.setQueryData( + LlmKeys.instanceModels(providerName, instanceName), + (prev) => { + if (!prev) return prev; + const idx = prev.findIndex((m) => m.name === targetName); + if (idx === -1) return prev; + const next = [...prev]; + const existing = next[idx]; + next[idx] = { + ...existing, + max_tokens: item.max_tokens ?? 0, + model_type: item.model_types ?? [], + is_tools: hasToolFeature(item.features), + }; + return next; + }, ); await patchInstanceModel({ diff --git a/web/src/pages/user-setting/setting-model/instance-card/models-section/index.tsx b/web/src/pages/user-setting/setting-model/instance-card/models-section/index.tsx index bc197cfa5d..a8c41c1dee 100644 --- a/web/src/pages/user-setting/setting-model/instance-card/models-section/index.tsx +++ b/web/src/pages/user-setting/setting-model/instance-card/models-section/index.tsx @@ -192,7 +192,6 @@ export function ModelsSection(props: ModelsSectionProps) { } = useModelEdit({ providerName, instanceName, - setCatalog, }); // Add-custom-model dialog open state (local UI state).