feat: Implement model fetching functionality in AIHandler and update UI for model selection

Author: experdot

src/main/aiHandler.ts

@@ -284,6 +284,38 @@ class AIHandler {
   }
 
   public async testConnection(config: LLMConfig): Promise<{ success: boolean; error?: string }> {
+    try {
+      const response = await fetch(`${config.apiHost.replace(/\/$/, '')}/chat/completions`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${config.apiKey}`
+        },
+        body: JSON.stringify({
+          model: config.modelName,
+          messages: [{ role: 'user', content: 'Hi' }],
+          max_tokens: 5
+        })
+      })
+
+      if (response.ok) {
+        return { success: true }
+      } else {
+        const errorText = await response.text()
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${errorText || response.statusText}`
+        }
+      }
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Connection failed'
+      }
+    }
+  }
+
+  public async getModels(config: LLMConfig): Promise<{ success: boolean; models?: string[]; error?: string }> {
     try {
       const response = await fetch(`${config.apiHost.replace(/\/$/, '')}/models`, {
         method: 'GET',
@@ -293,7 +325,9 @@ class AIHandler {
       })
 
       if (response.ok) {
-        return { success: true }
+        const data = await response.json()
+        const models = data.data?.map((model: any) => model.id) || []
+        return { success: true, models }
       } else {
         return {
           success: false,
@@ -303,7 +337,7 @@ class AIHandler {
     } catch (error) {
       return {
         success: false,
-        error: error instanceof Error ? error.message : 'Connection failed'
+        error: error instanceof Error ? error.message : 'Failed to fetch models'
       }
     }
   }
@@ -317,4 +351,5 @@ export function setupAIHandlers() {
   )
   ipcMain.handle('ai:stop-streaming', (event, requestId: string) => aiHandler.stopStreaming(requestId))
   ipcMain.handle('ai:test-connection', (event, config: LLMConfig) => aiHandler.testConnection(config))
+  ipcMain.handle('ai:get-models', (event, config: LLMConfig) => aiHandler.getModels(config))
 }

src/preload/index.d.ts

@@ -37,6 +37,12 @@ export interface TestConnectionResult {
   error?: string
 }
 
+export interface GetModelsResult {
+  success: boolean
+  models?: string[]
+  error?: string
+}
+
 declare global {
   interface Window {
     electron: ElectronAPI
@@ -45,6 +51,7 @@ declare global {
         sendMessageStreaming: (request: AIRequest) => Promise<void>
         stopStreaming: (requestId: string) => Promise<void>
         testConnection: (config: LLMConfig) => Promise<TestConnectionResult>
+        getModels: (config: LLMConfig) => Promise<GetModelsResult>
         onStreamData: (requestId: string, callback: (data: AIStreamChunk) => void) => void
         removeStreamListener: (requestId: string) => void
       }

src/preload/index.ts

@@ -4,7 +4,8 @@ import type {
   AIRequest,
   AIStreamChunk,
   LLMConfig,
-  TestConnectionResult
+  TestConnectionResult,
+  GetModelsResult
 } from './index.d'
 
 // 管理多个流式监听器
@@ -17,6 +18,8 @@ const api = {
       ipcRenderer.invoke('ai:send-message-streaming', request),
     testConnection: (config: LLMConfig): Promise<TestConnectionResult> =>
       ipcRenderer.invoke('ai:test-connection', config),
+    getModels: (config: LLMConfig): Promise<GetModelsResult> =>
+      ipcRenderer.invoke('ai:get-models', config),
     stopStreaming: (requestId: string): Promise<void> =>
       ipcRenderer.invoke('ai:stop-streaming', requestId),
     onStreamData: (requestId: string, callback: (data: AIStreamChunk) => void): void => {

src/renderer/src/components/settings/LLMSettings.tsx

@@ -42,6 +42,8 @@ interface LLMConfigFormProps {
 function LLMConfigForm({ open, config, onSave, onCancel }: LLMConfigFormProps) {
   const [form] = Form.useForm()
   const [loading, setLoading] = useState(false)
+  const [modelLoading, setModelLoading] = useState(false)
+  const [models, setModels] = useState<string[]>([])
   const { message } = App.useApp()
   const { settings } = useSettingsStore()
 
@@ -53,6 +55,7 @@ function LLMConfigForm({ open, config, onSave, onCancel }: LLMConfigFormProps) {
       } else {
         form.resetFields()
       }
+      setModels([])
     }
   }, [open, config, form])
 
@@ -79,31 +82,59 @@ function LLMConfigForm({ open, config, onSave, onCancel }: LLMConfigFormProps) {
     }
   }
 
+  const fetchModels = async () => {
+    try {
+      const apiHost = form.getFieldValue('apiHost')
+      const apiKey = form.getFieldValue('apiKey')
+
+      if (!apiHost || !apiKey) {
+        message.warning('请先输入 API Host 和 API Key')
+        return
+      }
+
+      setModelLoading(true)
+      const result = await window.api.ai.getModels({
+        id: 'temp',
+        name: 'temp',
+        apiHost,
+        apiKey,
+        modelName: '',
+        createdAt: Date.now()
+      })
+
+      if (result.success && result.models) {
+        setModels(result.models)
+        message.success(`成功获取 ${result.models.length} 个模型`)
+      } else {
+        message.error(result.error || '获取模型列表失败')
+        setModels([])
+      }
+    } catch (error) {
+      message.error('获取模型列表失败')
+      setModels([])
+    } finally {
+      setModelLoading(false)
+    }
+  }
+
   const testConnection = async () => {
     try {
       const values = await form.validateFields()
       setLoading(true)
 
-      const tempConfig: LLMConfig = {
+      const result = await window.api.ai.testConnection({
         id: 'temp',
         name: values.name,
         apiHost: values.apiHost,
         apiKey: values.apiKey,
         modelName: values.modelName,
         createdAt: Date.now()
-      }
-
-      const defaultModelConfig =
-        settings.modelConfigs.find((c) => c.id === settings.defaultModelConfigId) ||
-        settings.modelConfigs[0]
-      const aiService = createAIService(tempConfig, defaultModelConfig)
-      const isConnected = await aiService.testConnection()
+      })
 
-      console.log('isConnected', isConnected)
-      if (isConnected) {
+      if (result.success) {
         message.success('连接测试成功')
       } else {
-        message.error('连接测试失败，请检查配置')
+        message.error(result.error || '连接测试失败，请检查配置')
       }
     } catch (error) {
       message.error('连接测试失败，请检查配置')
@@ -167,8 +198,32 @@ function LLMConfigForm({ open, config, onSave, onCancel }: LLMConfigFormProps) {
           name="modelName"
           label="模型名称"
           rules={[{ required: true, message: '请输入模型名称' }]}
+          extra={
+            <Button
+              type="link"
+              size="small"
+              onClick={fetchModels}
+              loading={modelLoading}
+              style={{ padding: 0 }}
+            >
+              从服务器获取模型列表
+            </Button>
+          }
         >
-          <Input placeholder="gpt-4" />
+          {models.length > 0 ? (
+            <Select
+              placeholder="选择或输入模型名称"
+              showSearch
+              allowClear
+              loading={modelLoading}
+              options={models.map((model) => ({ label: model, value: model }))}
+              filterOption={(input, option) =>
+                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+              }
+            />
+          ) : (
+            <Input placeholder="请输入模型名称，例如: gpt-4" />
+          )}
         </Form.Item>
 
         <Form.Item