diff --git a/web/app/components/header/account-setting/provider-page/azure-provider/index.tsx b/web/app/components/header/account-setting/provider-page/azure-provider/index.tsx index 1cbe7d0674..a32acaa745 100644 --- a/web/app/components/header/account-setting/provider-page/azure-provider/index.tsx +++ b/web/app/components/header/account-setting/provider-page/azure-provider/index.tsx @@ -5,7 +5,7 @@ import Link from 'next/link' import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline' import { useState, useEffect } from 'react' import ProviderInput from '../provider-input' -import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken' +import useValidateToken, { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken' import { ValidatedErrorIcon, ValidatedSuccessIcon, @@ -15,7 +15,7 @@ import { interface IAzureProviderProps { provider: Provider - onValidatedStatus: (status?: ValidatedStatus) => void + onValidatedStatus: (status?: ValidatedStatusState) => void onTokenChange: (token: ProviderAzureToken) => void } const AzureProvider = ({ @@ -31,7 +31,7 @@ const AzureProvider = ({ token[type] = '' setToken({...token}) onTokenChange({...token}) - setValidatedStatus(undefined) + setValidatedStatus({}) } } const handleChange = (type: keyof ProviderAzureToken, v: string, validate: any) => { @@ -41,7 +41,7 @@ const AzureProvider = ({ validate({...token}, { beforeValidating: () => { if (!token.openai_api_base || !token.openai_api_key) { - setValidatedStatus(undefined) + setValidatedStatus({}) return false } return true @@ -49,10 +49,10 @@ const AzureProvider = ({ }) } const getValidatedIcon = () => { - if (validatedStatus === ValidatedStatus.Error || validatedStatus === ValidatedStatus.Exceed) { + if (validatedStatus.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed) { return } - if (validatedStatus === ValidatedStatus.Success) { + if (validatedStatus.status === ValidatedStatus.Success) { return } } @@ -60,8 +60,8 @@ const AzureProvider = ({ if (validating) { return } - if (validatedStatus === ValidatedStatus.Error) { - return + if (validatedStatus.status === ValidatedStatus.Error) { + return } } useEffect(() => { diff --git a/web/app/components/header/account-setting/provider-page/openai-provider/index.tsx b/web/app/components/header/account-setting/provider-page/openai-provider/index.tsx index f49b229812..873ab77a44 100644 --- a/web/app/components/header/account-setting/provider-page/openai-provider/index.tsx +++ b/web/app/components/header/account-setting/provider-page/openai-provider/index.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next' import ProviderInput from '../provider-input' import Link from 'next/link' import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline' -import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken' +import useValidateToken, { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken' import { ValidatedErrorIcon, ValidatedSuccessIcon, @@ -15,7 +15,7 @@ import { interface IOpenaiProviderProps { provider: Provider - onValidatedStatus: (status?: ValidatedStatus) => void + onValidatedStatus: (status?: ValidatedStatusState) => void onTokenChange: (token: string) => void } @@ -31,7 +31,7 @@ const OpenaiProvider = ({ if (token === provider.token) { setToken('') onTokenChange('') - setValidatedStatus(undefined) + setValidatedStatus({}) } } const handleChange = (v: string) => { @@ -40,7 +40,7 @@ const OpenaiProvider = ({ validate(v, { beforeValidating: () => { if (!v) { - setValidatedStatus(undefined) + setValidatedStatus({}) return false } return true @@ -54,10 +54,10 @@ const OpenaiProvider = ({ }, [validatedStatus]) const getValidatedIcon = () => { - if (validatedStatus === ValidatedStatus.Error || validatedStatus === ValidatedStatus.Exceed) { + if (validatedStatus?.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed) { return } - if (validatedStatus === ValidatedStatus.Success) { + if (validatedStatus.status === ValidatedStatus.Success) { return } } @@ -65,11 +65,11 @@ const OpenaiProvider = ({ if (validating) { return } - if (validatedStatus === ValidatedStatus.Exceed) { + if (validatedStatus?.status === ValidatedStatus.Success) { return } - if (validatedStatus === ValidatedStatus.Error) { - return + if (validatedStatus?.status === ValidatedStatus.Error) { + return } } diff --git a/web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx b/web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx index 740a149a93..721e266a4c 100644 --- a/web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx +++ b/web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx @@ -38,22 +38,22 @@ export const ValidatedExceedOnOpenaiTip = () => { ) } -export const ValidatedErrorOnOpenaiTip = () => { +export const ValidatedErrorOnOpenaiTip = ({ errorMessage }: { errorMessage: string }) => { const { t } = useTranslation() return (
- {t('common.provider.invalidKey')} + {t('common.provider.validatedError')}{errorMessage}
) } -export const ValidatedErrorOnAzureOpenaiTip = () => { +export const ValidatedErrorOnAzureOpenaiTip = ({ errorMessage }: { errorMessage: string }) => { const { t } = useTranslation() return (
- {t('common.provider.invalidApiKey')} + {t('common.provider.validatedError')}{errorMessage}
) } \ No newline at end of file diff --git a/web/app/components/header/account-setting/provider-page/provider-input/useValidateToken.ts b/web/app/components/header/account-setting/provider-page/provider-input/useValidateToken.ts index 69b7529449..a53fbf1fb1 100644 --- a/web/app/components/header/account-setting/provider-page/provider-input/useValidateToken.ts +++ b/web/app/components/header/account-setting/provider-page/provider-input/useValidateToken.ts @@ -8,11 +8,16 @@ export enum ValidatedStatus { Error = 'error', Exceed = 'exceed' } -export type SetValidatedStatus = Dispatch> +export type ValidatedStatusState = { + status?: ValidatedStatus, + message?: string +} +// export type ValidatedStatusState = ValidatedStatus | undefined | ValidatedError +export type SetValidatedStatus = Dispatch> export type ValidateFn = DebouncedFunc<(token: any, config: ValidateFnConfig) => void> type ValidateTokenReturn = [ boolean, - ValidatedStatus | undefined, + ValidatedStatusState, SetValidatedStatus, ValidateFn ] @@ -22,7 +27,7 @@ export type ValidateFnConfig = { const useValidateToken = (providerName: string): ValidateTokenReturn => { const [validating, setValidating] = useState(false) - const [validatedStatus, setValidatedStatus] = useState() + const [validatedStatus, setValidatedStatus] = useState({}) const validate = useCallback(debounce(async (token: string, config: ValidateFnConfig) => { if (!config.beforeValidating(token)) { return false @@ -30,19 +35,12 @@ const useValidateToken = (providerName: string): ValidateTokenReturn => { setValidating(true) try { const res = await validateProviderKey({ url: `/workspaces/current/providers/${providerName}/token-validate`, body: { token } }) - setValidatedStatus(res.result === 'success' ? ValidatedStatus.Success : ValidatedStatus.Error) + setValidatedStatus( + res.result === 'success' + ? { status: ValidatedStatus.Success } + : { status: ValidatedStatus.Error, message: res.error }) } catch (e: any) { - if (e.status === 400) { - e.json().then(({ code }: any) => { - if (code === 'provider_request_failed' && providerName === 'openai') { - setValidatedStatus(ValidatedStatus.Exceed) - } else { - setValidatedStatus(ValidatedStatus.Error) - } - }) - } else { - setValidatedStatus(ValidatedStatus.Error) - } + setValidatedStatus({ status: ValidatedStatus.Error, message: e.message }) } finally { setValidating(false) } diff --git a/web/i18n/lang/common.en.ts b/web/i18n/lang/common.en.ts index fa73fbd8a8..bc4729d410 100644 --- a/web/i18n/lang/common.en.ts +++ b/web/i18n/lang/common.en.ts @@ -140,6 +140,7 @@ const translation = { apiKey: "API Key", enterYourKey: "Enter your API key here", invalidKey: "Invalid OpenAI API key", + validatedError: "Validation failed: ", validating: "Validating key...", saveFailed: "Save api key failed", apiKeyExceedBill: "This API KEY has no quota available, please read", diff --git a/web/i18n/lang/common.zh.ts b/web/i18n/lang/common.zh.ts index 496d27ad48..4205a43606 100644 --- a/web/i18n/lang/common.zh.ts +++ b/web/i18n/lang/common.zh.ts @@ -141,6 +141,7 @@ const translation = { apiKey: "API 密钥", enterYourKey: "输入你的 API 密钥", invalidKey: '无效的 OpenAI API 密钥', + validatedError: "校验失败:", validating: "验证密钥中...", saveFailed: "API 密钥保存失败", apiKeyExceedBill: "此 API KEY 已没有可用配额,请阅读",