style(stage-ui): UI minor fixes
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user