feat:delete ollama models

electron/main/llm/ipcHandlers.ts

@@ -38,4 +38,32 @@
     }
     await ollamaService.pullModel(modelName, handleProgress)
   })
+
+  ipcMain.handle('get-available-models', async () => {
+    try {
+      const models = await ollamaService.getAvailableModels()
+      return models
+    } catch (error) {
+      console.error('Error fetching available models:', error)
+      throw error
+    }
+  })
+
+  ipcMain.handle('delete-llm', async (event, modelName: string) => {
+    try {
+      const currentModels: LLMConfig[] = store.get(StoreKeys.LLMs) || []
+      const foundModel = currentModels.find((model) => model.modelName === modelName)
+      if (!foundModel) {
+        throw new Error(`Model ${modelName} not found in the store`)
+      }
+      const updatedModels = currentModels.filter((model) => model.modelName !== modelName)
+      store.set(StoreKeys.LLMs, updatedModels)
+      await ollamaService.deleteModel(modelName)
+
+      return { success: true }
+    } catch (error: any) {
+      console.error(`Failed to delete model: ${modelName}`, error)
+      return { success: false, error: error.message }
+    }
+  })
 }

electron/preload/index.ts

@@ -118,6 +118,8 @@ const llm = {
   setDefaultLLM: createIPCHandler<(modelName: string) => Promise<void>>('set-default-llm'),
   getDefaultLLMName: createIPCHandler<() => Promise<string>>('get-default-llm-name'),
   pullOllamaModel: createIPCHandler<(modelName: string) => Promise<void>>('pull-ollama-model'),
+  deleteLLM: createIPCHandler<(modelNameToDelete: string) => Promise<void>>('delete-llm'),
+  getAvailableModels: createIPCHandler<() => Promise<LLMConfig[]>>('get-available-models'),
 }
 
 // Expose to renderer process

src/components/Settings/LLMSettings/DefaultLLMSelector.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { LLMConfig } from 'electron/main/electron-store/storeConfig'
 import posthog from 'posthog-js'
+import { FiTrash2 } from 'react-icons/fi'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 
 interface DefaultLLMSelectorProps {
@@ -11,6 +12,20 @@
 
 const DefaultLLMSelector: React.FC<DefaultLLMSelectorProps> = ({ llmConfigs, defaultLLM, setDefaultLLM }) => {
   const [selectedLLM, setSelectedLLM] = useState(defaultLLM)
+  const [availableOllamaModels, setAvailableOllamaModels] = useState<LLMConfig[]>([])
+
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        const models = await window.llm.getAvailableModels()
+        setAvailableOllamaModels(models)
+      } catch (error) {
+        console.error('Error fetching models:', error)
+      }
+    }
+
+    fetchModels()
+  }, [])
 
   useEffect(() => {
     setSelectedLLM(defaultLLM)
@@ -25,16 +40,40 @@
     })
   }
 
+  const deleteLLM = async (modelName: string) => {
+    const confirmDelete = window.confirm(`Are you sure you want to delete the model ${modelName}?`)
+    if (!confirmDelete) return
+    try {
+      await window.llm.deleteLLM(modelName)
+      posthog.capture('delete_llm', {
+        modelName,
+      })
+    } catch (error) {
+      console.error(`Failed to delete model: ${modelName}`, error)
+      window.alert(`Failed to delete the model ${modelName}`)
+    }
+  }
+
   return (
     <Select onValueChange={handleDefaultModelChange} value={selectedLLM}>
       <SelectTrigger className="w-[180px]">
         <SelectValue placeholder="Select default LLM" />
       </SelectTrigger>
       <SelectContent>
         {llmConfigs.map((config) => (
-          <SelectItem key={config.modelName} value={config.modelName}>
-            {config.modelName}
-          </SelectItem>
+          <div key={config.modelName} className="flex w-full items-center justify-end">
+            <SelectItem className="cursor-pointer" key={config.modelName} value={config.modelName}>
+              {config.modelName}
+            </SelectItem>
+            {availableOllamaModels.some((model) => model.modelName === config.modelName) && (
+              <FiTrash2
+                className="ml-2 cursor-pointer text-red-500"
+                onClick={() => {
+                  deleteLLM(config.modelName)
+                }}
+              />
+            )}
+          </div>
         ))}
       </SelectContent>
     </Select>