From c9cf611cd68e7f4dcd9b41418366df811e60f2b3 Mon Sep 17 00:00:00 2001
From: AnotiaWang <anotia0202@gmail.com>
Date: Sat, 15 Feb 2025 08:40:18 +0800
Subject: [PATCH] feat(ConfigManager): use input when fetch AI models failed
 for better UX

---
 components/ConfigManager.vue | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/components/ConfigManager.vue b/components/ConfigManager.vue
index dd133f8..c08fe02 100644
--- a/components/ConfigManager.vue
+++ b/components/ConfigManager.vue
@@ -14,6 +14,8 @@
   const showModal = ref(false)
   const loadingAiModels = ref(false)
   const aiModelOptions = ref<string[]>([])
+  /** If loading AI models failed, use a plain input to improve UX */
+  const isLoadAiModelsFailed = ref(false)
 
   const aiProviderOptions = computed(() => [
     {
@@ -48,19 +50,24 @@
         `Found ${result.data.length} AI models for provider ${config.value.ai.provider}`,
       )
       aiModelOptions.value = result.data.map((m) => m.id)
-      // Auto-select the current model
-      if (config.value.ai.model && !aiModelOptions.value.includes(config.value.ai.model)) {
-        aiModelOptions.value.unshift(config.value.ai.model)
+      isLoadAiModelsFailed.value = false
+
+      if (aiModelOptions.value.length) {
+        // Auto-select the current model
+        if (
+          config.value.ai.model &&
+          !aiModelOptions.value.includes(config.value.ai.model)
+        ) {
+          aiModelOptions.value.unshift(config.value.ai.model)
+        }
       }
     } catch (error) {
       console.error(`Fetch AI models failed`, error)
-      if (config.value.ai.model) {
-        aiModelOptions.value = [config.value.ai.model]
-      } else {
-        aiModelOptions.value = []
-      }
+      isLoadAiModelsFailed.value = true
+      aiModelOptions.value = []
+    } finally {
+      loadingAiModels.value = false
     }
-    loadingAiModels.value = false
   }, 1000)
 
   function createAndSelectAiModel(model: string) {
@@ -124,6 +131,7 @@
             </UFormField>
             <UFormField :label="$t('settings.ai.model')" required>
               <UInputMenu
+                v-if="aiModelOptions.length && !isLoadAiModelsFailed"
                 v-model="config.ai.model"
                 class="w-full"
                 :items="aiModelOptions"
@@ -132,6 +140,12 @@
                 create-item
                 @create="createAndSelectAiModel"
               />
+              <UInput
+                v-else
+                v-model="config.ai.model"
+                class="w-full"
+                :placeholder="$t('settings.ai.model')"
+              />
             </UFormField>
           </div>