fix(stage-ui/stores/providers): callout for error

apps/stage-web/src/pages/settings/providers/player2-speech.vue

@@ -3,6 +3,7 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
+  Callout,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
@@ -16,11 +17,13 @@ const defaultModel = 'v1'
 const speedRatio = ref<number>(1.0)
 const speechStore = useSpeechStore()
 const providersStore = useProvidersStore()
+
 const { t } = useI18n()
 // Get available voices for Player2
 const availableVoices = computed(() => {
   return speechStore.availableVoices[providerId] || []
 })
+
 // Generate speech with Player2-specific parameters
 async function handleGenerateSpeech(input: string, voiceId: string, _useSSML: boolean) {
   const provider = providersStore.getProviderInstance(providerId) as SpeechProviderWithExtraOptions<string, UnElevenLabsOptions>
@@ -52,13 +55,15 @@ onMounted(async () => {
   else {
     console.error('Failed to validate provider config', providerConfig)
   }
+
   try {
-    const res = await fetch(`http://localhost:4315/v1/health`, {
+    const res = await fetch(`${providerConfig.baseUrl}/v1/health`, {
       method: 'GET',
       headers: {
         'player2-game-key': 'airi',
       },
     })
+
     hasPlayer2.value = res.status === 200
   }
   catch (e) {
@@ -66,6 +71,7 @@ onMounted(async () => {
     hasPlayer2.value = false
   }
 })
+
 watch(speedRatio, async () => {
   const providerConfig = providersStore.getProviderConfig(providerId)
   providerConfig.speed = speedRatio.value
@@ -74,19 +80,24 @@ watch(speedRatio, async () => {
 
 <template>
   <div v-if="!hasPlayer2" style="color: red; margin-bottom: 1rem;">
-    <div>
-      Please download and run the Player2 App:
-      <a href="https://player2.game" target="_blank" rel="noopener noreferrer">
-        https://player2.game
-      </a>
-
+    <Callout theme="orange">
+      <template #label>
+        Player 2 is not running
+      </template>
       <div>
-        After downloading, if you still are having trouble, please reach out to us on Discord:
-        <a href="https://player2.game/discord" target="_blank" rel="noopener noreferrer">
-          https://player2.game/discord
-        </a>.
+        Please download and run the Player2 App:
+        <a href="https://player2.game" target="_blank" rel="noopener noreferrer">
+          https://player2.game
+        </a>
+
+        <div>
+          After downloading, if you still are having trouble, please reach out to us on Discord:
+          <a href="https://player2.game/discord" target="_blank" rel="noopener noreferrer">
+            https://player2.game/discord
+          </a>.
+        </div>
       </div>
-    </div>
+    </Callout>
   </div>
   <SpeechProviderSettings
     :provider-id="providerId"

apps/stage-web/src/pages/settings/providers/player2.vue

@@ -2,7 +2,9 @@
 import type { RemovableRef } from '@vueuse/shared'
 
 import {
+  Callout,
   ProviderBaseUrlInput,
+  ProviderBasicSettings,
   ProviderSettingsContainer,
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
@@ -43,6 +45,7 @@ onMounted(async () => {
         'player2-game-key': 'airi',
       },
     })
+
     hasPlayer2.value = res.status === 200
   }
   catch (e) {
@@ -67,20 +70,25 @@ function handleResetSettings() {
 </script>
 
 <template>
-  <div v-if="!hasPlayer2" style="color: red; margin-bottom: 1rem;">
-    <div>
-      Please download and run the Player2 App:
-      <a href="https://player2.game" target="_blank" rel="noopener noreferrer">
-        https://player2.game
-      </a>
-
+  <div v-if="!hasPlayer2" mb-1>
+    <Callout theme="orange">
+      <template #label>
+        Player 2 is not running
+      </template>
       <div>
-        After downloading, if you still are having trouble, please reach out to us on Discord:
-        <a href="https://player2.game/discord" target="_blank" rel="noopener noreferrer">
-          https://player2.game/discord
-        </a>.
+        Please download and run the Player2 App:
+        <a href="https://player2.game" target="_blank" rel="noopener noreferrer">
+          https://player2.game
+        </a>
+
+        <div>
+          After downloading, if you still are having trouble, please reach out to us on Discord:
+          <a href="https://player2.game/discord" target="_blank" rel="noopener noreferrer">
+            https://player2.game/discord
+          </a>.
+        </div>
       </div>
-    </div>
+    </Callout>
   </div>
 
   <ProviderSettingsLayout

packages/stage-ui/src/components/Misc/Alert.vue

@@ -8,9 +8,9 @@ const props = defineProps<{
 const containerClass = computed(() => {
   switch (props.type) {
     case 'error':
-      return 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20'
+      return 'border-solid border-2 border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20'
     case 'warning':
-      return 'border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20'
+      return 'border-solid border-2 border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20'
   }
   return ''
 })
@@ -27,7 +27,7 @@ const iconClass = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 border rounded-lg p-4" :class="containerClass">
+  <div class="flex flex-col gap-3 rounded-lg p-4" :class="containerClass">
     <div class="flex items-center gap-1 font-medium">
       <div class="text-2xl" :class="iconClass" />
       <slot name="title" />

packages/stage-ui/src/stores/providers.ts

@@ -1429,7 +1429,7 @@ export const useProvidersStore = defineStore('providers', () => {
       validators: {
         validateProviderConfig: async (config) => {
           // Check if the Ollama server is reachable
-          return !!config.baseUrl && await fetch(`localhost:4315/v1/health`, {
+          return !!config.baseUrl && await fetch(`${config.baseUrl}/health`, {
             method: 'GET',
             headers: {
               'player2-game-key': 'airi',