|
2 | 2 | import type { RemovableRef } from '@vueuse/core' |
3 | 3 |
|
4 | 4 | import { |
5 | | - Alert, |
6 | 5 | ProviderAdvancedSettings, |
7 | 6 | ProviderApiKeyInput, |
8 | 7 | ProviderBaseUrlInput, |
9 | 8 | ProviderBasicSettings, |
10 | 9 | ProviderSettingsContainer, |
11 | 10 | ProviderSettingsLayout, |
| 11 | + ProviderValidationAlerts, |
12 | 12 | } from '@proj-airi/stage-ui/components' |
13 | 13 | import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation' |
14 | 14 | import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness' |
@@ -53,6 +53,11 @@ const { |
53 | 53 | validationMessage, |
54 | 54 | handleResetSettings, |
55 | 55 | forceValid, |
| 56 | + hasManualValidators, |
| 57 | + isManualTesting, |
| 58 | + manualTestPassed, |
| 59 | + manualTestMessage, |
| 60 | + runManualTest, |
56 | 61 | } = useProviderValidation(providerId) |
57 | 62 |
|
58 | 63 | function goToModelSelection() { |
@@ -88,39 +93,18 @@ function goToModelSelection() { |
88 | 93 | </ProviderAdvancedSettings> |
89 | 94 |
|
90 | 95 | <!-- Validation Status --> |
91 | | - <Alert v-if="!isValid && isValidating === 0 && validationMessage" type="error"> |
92 | | - <template #title> |
93 | | - <div class="w-full flex items-center justify-between"> |
94 | | - <span>{{ t('settings.dialogs.onboarding.validationFailed') }}</span> |
95 | | - <button |
96 | | - type="button" |
97 | | - class="ml-2 rounded bg-red-100 px-2 py-0.5 text-xs text-red-600 font-medium transition-colors dark:bg-red-800/30 hover:bg-red-200 dark:text-red-300 dark:hover:bg-red-700/40" |
98 | | - @click="forceValid" |
99 | | - > |
100 | | - {{ t('settings.pages.providers.common.continueAnyway') }} |
101 | | - </button> |
102 | | - </div> |
103 | | - </template> |
104 | | - <template v-if="validationMessage" #content> |
105 | | - <div class="whitespace-pre-wrap break-all"> |
106 | | - {{ validationMessage }} |
107 | | - </div> |
108 | | - </template> |
109 | | - </Alert> |
110 | | - <Alert v-if="isValid && isValidating === 0" type="success"> |
111 | | - <template #title> |
112 | | - <div class="w-full flex items-center justify-between"> |
113 | | - <span>{{ t('settings.dialogs.onboarding.validationSuccess') }}</span> |
114 | | - <button |
115 | | - type="button" |
116 | | - :class="['ml-2 rounded px-2 py-0.5 text-xs font-medium transition-colors', 'bg-green-100 text-green-600 hover:bg-green-200', 'dark:bg-green-800/30 dark:text-green-300 dark:hover:bg-green-700/40']" |
117 | | - @click="goToModelSelection" |
118 | | - > |
119 | | - {{ t('settings.pages.providers.common.goToModelSelection') }} |
120 | | - </button> |
121 | | - </div> |
122 | | - </template> |
123 | | - </Alert> |
| 96 | + <ProviderValidationAlerts |
| 97 | + :is-valid="isValid" |
| 98 | + :is-validating="isValidating" |
| 99 | + :validation-message="validationMessage" |
| 100 | + :has-manual-validators="hasManualValidators" |
| 101 | + :is-manual-testing="isManualTesting" |
| 102 | + :manual-test-passed="manualTestPassed" |
| 103 | + :manual-test-message="manualTestMessage" |
| 104 | + :on-run-test="runManualTest" |
| 105 | + :on-force-valid="forceValid" |
| 106 | + :on-go-to-model-selection="goToModelSelection" |
| 107 | + /> |
124 | 108 | </ProviderSettingsContainer> |
125 | 109 | </ProviderSettingsLayout> |
126 | 110 | </template> |
|
0 commit comments