From c463090edb4693a6acaa535469072fd6f61fd279 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 25 Jun 2025 13:49:55 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix:=20delete=20pre=20populate=20re?=
 =?UTF-8?q?mote=20models=20(#5516)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/containers/dialogs/DeleteModel.tsx    | 11 ++++-
 web-app/src/hooks/useModelProvider.ts         | 41 +++++++++++++------
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/web-app/src/containers/dialogs/DeleteModel.tsx b/web-app/src/containers/dialogs/DeleteModel.tsx
index 60e86debe..b7342e7d3 100644
--- a/web-app/src/containers/dialogs/DeleteModel.tsx
+++ b/web-app/src/containers/dialogs/DeleteModel.tsx
@@ -33,7 +33,16 @@ export const DialogDeleteModel = ({
   const removeModel = async () => {
     deleteModelCache(selectedModelId)
     deleteModel(selectedModelId).then(() => {
-      getProviders().then(setProviders)
+      getProviders().then((providers) => {
+        // Filter out the deleted model from all providers
+        const filteredProviders = providers.map((provider) => ({
+          ...provider,
+          models: provider.models.filter(
+            (model) => model.id !== selectedModelId
+          ),
+        }))
+        setProviders(filteredProviders)
+      })
       toast.success('Delete Model', {
         id: `delete-model-${selectedModel?.id}`,
         description: `Model ${selectedModel?.id} has been permanently deleted.`,
diff --git a/web-app/src/hooks/useModelProvider.ts b/web-app/src/hooks/useModelProvider.ts
index c87645a1e..e2f26b1f7 100644
--- a/web-app/src/hooks/useModelProvider.ts
+++ b/web-app/src/hooks/useModelProvider.ts
@@ -6,6 +6,7 @@ type ModelProviderState = {
   providers: ModelProvider[]
   selectedProvider: string
   selectedModel: Model | null
+  deletedModels: string[]
   getModelBy: (modelId: string) => Model | undefined
   setProviders: (providers: ModelProvider[]) => void
   getProviderByName: (providerName: string) => ModelProvider | undefined
@@ -25,6 +26,7 @@ export const useModelProvider = create<ModelProviderState>()(
       providers: [],
       selectedProvider: 'llama.cpp',
       selectedModel: null,
+      deletedModels: [],
       getModelBy: (modelId: string) => {
         const provider = get().providers.find(
           (provider) => provider.provider === get().selectedProvider
@@ -35,6 +37,11 @@ export const useModelProvider = create<ModelProviderState>()(
       setProviders: (providers) =>
         set((state) => {
           const existingProviders = state.providers
+          // Ensure deletedModels is always an array
+          const currentDeletedModels = Array.isArray(state.deletedModels)
+            ? state.deletedModels
+            : []
+
           const updatedProviders = providers.map((provider) => {
             const existingProvider = existingProviders.find(
               (x) => x.provider === provider.provider
@@ -43,7 +50,9 @@ export const useModelProvider = create<ModelProviderState>()(
             const mergedModels = [
               ...models,
               ...(provider?.models ?? []).filter(
-                (e) => !models.some((m) => m.id === e.id)
+                (e) =>
+                  !models.some((m) => m.id === e.id) &&
+                  !currentDeletedModels.includes(e.id)
               ),
             ]
             return {
@@ -118,17 +127,25 @@ export const useModelProvider = create<ModelProviderState>()(
         return modelObject
       },
       deleteModel: (modelId: string) => {
-        set((state) => ({
-          providers: state.providers.map((provider) => {
-            const models = provider.models.filter(
-              (model) => model.id !== modelId
-            )
-            return {
-              ...provider,
-              models,
-            }
-          }),
-        }))
+        set((state) => {
+          // Ensure deletedModels is always an array
+          const currentDeletedModels = Array.isArray(state.deletedModels)
+            ? state.deletedModels
+            : []
+
+          return {
+            providers: state.providers.map((provider) => {
+              const models = provider.models.filter(
+                (model) => model.id !== modelId
+              )
+              return {
+                ...provider,
+                models,
+              }
+            }),
+            deletedModels: [...currentDeletedModels, modelId],
+          }
+        })
       },
       addProvider: (provider: ModelProvider) => {
         set((state) => ({