From 284a77cefcfd7a5a5e24b5397700ed9edc68a515 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Mon, 14 Apr 2025 23:26:26 +0800
Subject: [PATCH] style(stage-ui): UI minor fixes

---
 .../src/components/Form/Input/Input.vue       |   4 +-
 .../src/components/Menu/IconItem.story.vue    |   7 +-
 .../stage-ui/src/components/Menu/IconItem.vue |   2 +-
 .../components/Menu/IconStatusItem.story.vue  |   6 +-
 packages/stage-ui/src/stores/providers.ts     | 144 +++++++++++++-----
 5 files changed, 114 insertions(+), 49 deletions(-)

diff --git a/packages/stage-ui/src/components/Form/Input/Input.vue b/packages/stage-ui/src/components/Form/Input/Input.vue
index 8179e2c90..60c3bfe1e 100644
--- a/packages/stage-ui/src/components/Form/Input/Input.vue
+++ b/packages/stage-ui/src/components/Form/Input/Input.vue
@@ -10,12 +10,12 @@ const modelValue = defineModel<string>({ required: true })
   <input
     v-model="modelValue"
     :type="props.type || 'text'"
-    border="focus:primary-100 dark:focus:primary-400/50 2 solid neutral-200 dark:neutral-800"
+    border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
     transition="all duration-200 ease-in-out"
     text="disabled:neutral-400 dark:disabled:neutral-600"
     cursor="disabled:not-allowed"
     w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
     shadow="sm"
-    bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
+    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
   >
 </template>
diff --git a/packages/stage-ui/src/components/Menu/IconItem.story.vue b/packages/stage-ui/src/components/Menu/IconItem.story.vue
index 07e852f91..eca718bc8 100644
--- a/packages/stage-ui/src/components/Menu/IconItem.story.vue
+++ b/packages/stage-ui/src/components/Menu/IconItem.story.vue
@@ -19,8 +19,9 @@ import IconItem from './IconItem.vue'
       <IconItem
         title="Modules"
         description="Thinking, vision, speech synthesis, gaming, etc."
-        icon="i-lucide:blocks"
+        icon="i-solar:layers-bold-duotone"
         to="/settings/modules"
+        class="font-sans"
       />
     </Variant>
 
@@ -31,9 +32,9 @@ import IconItem from './IconItem.vue'
       <IconItem
         title="Modules"
         description="Thinking, vision, speech synthesis, gaming, etc."
-        icon="i-lucide:blocks"
+        icon="i-solar:layers-bold-duotone"
         to="/settings/modules"
-        class="_hover"
+        class="_hover font-sans"
       />
     </Variant>
   </Story>
diff --git a/packages/stage-ui/src/components/Menu/IconItem.vue b/packages/stage-ui/src/components/Menu/IconItem.vue
index 530853161..34ae50673 100644
--- a/packages/stage-ui/src/components/Menu/IconItem.vue
+++ b/packages/stage-ui/src/components/Menu/IconItem.vue
@@ -12,7 +12,7 @@ defineProps<{
   <RouterLink
     box="border"
     flex="~ row"
-    bg="neutral-50 dark:neutral-800"
+    bg="neutral-50 dark:neutral-900"
     border="neutral-100 dark:neutral-800/25 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
     drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
     class="menu-icon-item"
diff --git a/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue b/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
index bfc5f147b..ca01831db 100644
--- a/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
+++ b/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
@@ -22,6 +22,7 @@ import IconStatusItem from './IconStatusItem.vue'
         icon=" i-lucide:ghost"
         to="/"
         :configured="false"
+        class="font-sans"
       />
     </Variant>
 
@@ -35,6 +36,7 @@ import IconStatusItem from './IconStatusItem.vue'
         icon=" i-lucide:ghost"
         to="/"
         :configured="true"
+        class="font-sans"
       />
     </Variant>
 
@@ -48,7 +50,7 @@ import IconStatusItem from './IconStatusItem.vue'
         icon=" i-lucide:ghost"
         to="/"
         :configured="false"
-        class="_hover"
+        class="_hover font-sans"
       />
     </Variant>
 
@@ -62,7 +64,7 @@ import IconStatusItem from './IconStatusItem.vue'
         icon=" i-lucide:ghost"
         to="/"
         :configured="true"
-        class="_hover"
+        class="_hover font-sans"
       />
     </Variant>
   </Story>
diff --git a/packages/stage-ui/src/stores/providers.ts b/packages/stage-ui/src/stores/providers.ts
index 5ce19c560..442e4080d 100644
--- a/packages/stage-ui/src/stores/providers.ts
+++ b/packages/stage-ui/src/stores/providers.ts
@@ -62,6 +62,9 @@ export interface ProviderMetadata {
     listModels?: (config: Record<string, unknown>) => Promise<ModelInfo[]>
     listVoices?: (config: Record<string, unknown>) => Promise<VoiceInfo[]>
   }
+  validators: {
+    validateProviderConfig: (config: Record<string, unknown>) => Promise<boolean> | boolean
+  }
 }
 
 export interface ModelInfo {
@@ -140,6 +143,11 @@ export const useProvidersStore = defineStore('providers', () => {
           return fetchOpenRouterModels(config)
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'ollama': {
       id: 'ollama',
@@ -168,6 +176,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.baseUrl
+        },
+      },
     },
     'vllm': {
       id: 'vllm',
@@ -225,6 +238,11 @@ export const useProvidersStore = defineStore('providers', () => {
           ]
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.baseUrl
+        },
+      },
     },
     'openai': {
       id: 'openai',
@@ -253,6 +271,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'anthropic': {
       id: 'anthropic',
@@ -319,6 +342,11 @@ export const useProvidersStore = defineStore('providers', () => {
           ] satisfies ModelInfo[]
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'google-generative-ai': {
       id: 'google-generative-ai',
@@ -347,6 +375,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'xai': {
       id: 'xai',
@@ -372,6 +405,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'deepseek': {
       id: 'deepseek',
@@ -397,6 +435,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'elevenlabs': {
       id: 'elevenlabs',
@@ -461,6 +504,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'microsoft-speech': {
       id: 'microsoft-speech',
@@ -505,6 +553,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'together-ai': {
       id: 'together-ai',
@@ -530,6 +583,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'novita-ai': {
       id: 'novita-ai',
@@ -555,6 +613,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'fireworks-ai': {
       id: 'fireworks-ai',
@@ -580,6 +643,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'featherless-ai': {
       id: 'featherless-ai',
@@ -608,6 +676,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'cloudflare-workers-ai': {
       id: 'cloudflare-workers-ai',
@@ -622,6 +695,11 @@ export const useProvidersStore = defineStore('providers', () => {
           return []
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.accountId
+        },
+      },
     },
     'perplexity-ai': {
       id: 'perplexity-ai',
@@ -675,6 +753,11 @@ export const useProvidersStore = defineStore('providers', () => {
           ]
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'mistral-ai': {
       id: 'mistral-ai',
@@ -700,6 +783,11 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
     'moonshot-ai': {
       id: 'moonshot-ai',
@@ -725,51 +813,25 @@ export const useProvidersStore = defineStore('providers', () => {
           })
         },
       },
+      validators: {
+        validateProviderConfig: (config) => {
+          return !!config.apiKey && !!config.baseUrl
+        },
+      },
     },
   }
 
   // Configuration validation functions
-  function validateProvider(providerId: string): boolean {
+  async function validateProvider(providerId: string): Promise<boolean> {
     const config = providerCredentials.value[providerId]
     if (!config)
       return false
 
-    switch (providerId) {
-      case 'openrouter-ai':
-        return !!config.apiKey && !!config.baseUrl
-      case 'ollama':
-        return !!config.baseUrl
-      case 'vllm':
-        return !!config.baseUrl
-      case 'openai':
-        return !!config.apiKey
-      case 'anthropic':
-        return !!config.apiKey
-      case 'elevenlabs':
-        return !!config.apiKey
-      case 'xai':
-        return !!config.apiKey
-      case 'deepseek':
-        return !!config.apiKey
-      case 'together-ai':
-        return !!config.apiKey
-      case 'novita-ai':
-        return !!config.apiKey
-      case 'fireworks-ai':
-        return !!config.apiKey
-      case 'featherless-ai':
-        return !!config.apiKey
-      case 'microsoft-speech':
-        return !!config.apiKey && !!config.region
-      case 'cloudflare-workers-ai':
-        return !!config.apiKey
-      case 'mistral-ai':
-        return !!config.apiKey
-      case 'moonshot-ai':
-        return !!config.apiKey
-      default:
-        return false
-    }
+    const metadata = providerMetadata[providerId]
+    if (!metadata)
+      return false
+
+    return await metadata.validators.validateProviderConfig(config)
   }
 
   // Create computed properties for each provider's configuration status
@@ -789,10 +851,10 @@ export const useProvidersStore = defineStore('providers', () => {
   Object.keys(providerMetadata).forEach(initializeProvider)
 
   // Update configuration status for all providers
-  function updateConfigurationStatus() {
-    Object.keys(providerMetadata).forEach((providerId) => {
-      configuredProviders.value[providerId] = validateProvider(providerId)
-    })
+  async function updateConfigurationStatus() {
+    await Promise.all(Object.keys(providerMetadata).map(async (providerId) => {
+      configuredProviders.value[providerId] = await validateProvider(providerId)
+    }))
   }
 
   // Call initially and watch for changes