From f4a29aeed1a9307acecf973c716fb0072610c4dd Mon Sep 17 00:00:00 2001
From: AnotiaWang <anotia0202@gmail.com>
Date: Wed, 12 Feb 2025 16:44:14 +0800
Subject: [PATCH] feat(ConfigManager): auto fetch model list for OpenAI
 compatible

---
 components/ConfigManager.vue | 71 ++++++++++++++++++++++++++++++++++--
 composables/useAiProvider.ts |  2 +-
 pages/index.vue              |  6 +--
 stores/config.ts             |  6 ++-
 4 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/components/ConfigManager.vue b/components/ConfigManager.vue
index 1c97966..27a9680 100644
--- a/components/ConfigManager.vue
+++ b/components/ConfigManager.vue
@@ -1,8 +1,19 @@
 <script setup lang="ts">
-  const { config } = useConfigStore()
+  interface OpenAICompatibleModel {
+    id: string
+    object: string
+  }
+  interface OpenAICompatibleModelsResponse {
+    object: string
+    data: OpenAICompatibleModel[]
+  }
+
+  const { config, aiApiBase } = useConfigStore()
   const { t } = useI18n()
 
   const showModal = ref(false)
+  const loadingAiModels = ref(false)
+  const aiModelOptions = ref<string[]>([])
 
   const aiProviderOptions = computed(() => [
     {
@@ -18,6 +29,54 @@
     aiProviderOptions.value.find((o) => o.value === config.ai.provider),
   )
 
+  // Try to find available AI models based on selected provider
+  const debouncedListAiModels = useDebounceFn(async () => {
+    if (!config.ai.apiKey) return
+    if (!aiApiBase || !aiApiBase.startsWith('http')) return
+
+    try {
+      loadingAiModels.value = true
+      const result: OpenAICompatibleModelsResponse = await $fetch(
+        `${aiApiBase}/models`,
+        {
+          headers: {
+            Authorization: `Bearer ${config.ai.apiKey}`,
+          },
+        },
+      )
+      console.log(
+        `Found ${result.data.length} AI models for provider ${config.ai.provider}`,
+      )
+      aiModelOptions.value = result.data.map((m) => m.id)
+      // Auto-select the current model
+      if (!aiModelOptions.value.includes(config.ai.model)) {
+        aiModelOptions.value.unshift(config.ai.model)
+      }
+    } catch (error) {
+      console.error(`Fetch AI models failed`, error)
+      if (config.ai.model) {
+        aiModelOptions.value = [config.ai.model]
+      } else {
+        aiModelOptions.value = []
+      }
+    }
+    loadingAiModels.value = false
+  }, 1000)
+
+  watch(
+    () => [
+      config.ai.provider,
+      config.ai.apiKey,
+      config.ai.apiBase,
+      showModal.value,
+    ],
+    () => {
+      if (!showModal.value) return
+      debouncedListAiModels()
+    },
+    { immediate: true },
+  )
+
   defineExpose({
     show() {
       showModal.value = true
@@ -58,11 +117,15 @@
                 :placeholder="selectedAiProvider?.apiBasePlaceholder"
               />
             </UFormField>
-            <UFormField label="Model" required>
-              <UInput
+            <UFormField :label="$t('settings.ai.model')" required>
+              <UInputMenu
                 v-model="config.ai.model"
                 class="w-full"
-                placeholder="Model name"
+                :items="aiModelOptions"
+                :placeholder="$t('settings.ai.model')"
+                :loading="loadingAiModels"
+                create-item
+                @create="aiModelOptions.push($event)"
               />
             </UFormField>
           </div>
diff --git a/composables/useAiProvider.ts b/composables/useAiProvider.ts
index 326102e..31fa575 100644
--- a/composables/useAiProvider.ts
+++ b/composables/useAiProvider.ts
@@ -6,7 +6,7 @@ export const useAiModel = () => {
     case 'openai-compatible':
       const openai = createOpenAI({
         apiKey: config.config.ai.apiKey,
-        baseURL: config.config.ai.apiBase || 'https://api.openai.com/v1', // TODO: better default
+        baseURL: config.aiApiBase,
       })
       return openai(config.config.ai.model)
     default:
diff --git a/pages/index.vue b/pages/index.vue
index c6340ca..97ee0da 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -55,7 +55,7 @@
   import type { ResearchResult } from '~/lib/deep-research'
 
   const { t } = useI18n()
-  const config = useConfigStore()
+  const { config } = useConfigStore()
   const toast = useToast()
 
   const configManagerRef = ref<InstanceType<typeof ConfigManager>>()
@@ -77,8 +77,8 @@ ${feedback.value
   }
 
   async function generateFeedback(data: ResearchInputData) {
-    const aiConfig = config.config.ai
-    const webSearchConfig = config.config.webSearch
+    const aiConfig = config.ai
+    const webSearchConfig = config.webSearch
 
     if (!aiConfig.model || !aiConfig.apiKey || !webSearchConfig.apiKey) {
       toast.add({
diff --git a/stores/config.ts b/stores/config.ts
index 7119a5e..100ea15 100644
--- a/stores/config.ts
+++ b/stores/config.ts
@@ -30,5 +30,9 @@ export const useConfigStore = defineStore('config', () => {
     },
   })
 
-  return { config: skipHydrate(config) }
+  const aiApiBase = computed(() => {
+    return config.value.ai.apiBase || 'https://api.openai.com/v1'
+  })
+
+  return { config: skipHydrate(config), aiApiBase }
 })