🐛fix: delete pre populate remote models (#5516)

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.`,

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,7 +127,13 @@ export const useModelProvider = create<ModelProviderState>()(
         return modelObject
       },
       deleteModel: (modelId: string) => {
-        set((state) => ({
+        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
@@ -128,7 +143,9 @@ export const useModelProvider = create<ModelProviderState>()(
                 models,
               }
             }),
-        }))
+            deletedModels: [...currentDeletedModels, modelId],
+          }
+        })
       },
       addProvider: (provider: ModelProvider) => {
         set((state) => ({