fix: azure-openai key validate (#164)
zxhlyh
3 years ago
committed by
GitHub
parent
f3219ff107
commit
1c5f63de7e
@ -1,222 +1,94 @@
|
|||||||
import { ChangeEvent, useEffect, useRef, useState } from 'react'
|
import type { Provider } from '@/models/common'
|
||||||
import { useContext } from 'use-context-selector'
|
import { useState, useEffect } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { debounce } from 'lodash-es'
|
import ProviderInput from '../provider-input'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import useSWR from 'swr'
|
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
|
||||||
import { ArrowTopRightOnSquareIcon, PencilIcon } from '@heroicons/react/24/outline'
|
import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken'
|
||||||
import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/solid'
|
import {
|
||||||
import Button from '@/app/components/base/button'
|
ValidatedErrorIcon,
|
||||||
import s from './index.module.css'
|
ValidatedSuccessIcon,
|
||||||
import classNames from 'classnames'
|
ValidatingTip,
|
||||||
import { fetchTenantInfo, validateProviderKey, updateProviderAIKey } from '@/service/common'
|
ValidatedExceedOnOpenaiTip,
|
||||||
import { ToastContext } from '@/app/components/base/toast'
|
ValidatedErrorOnOpenaiTip
|
||||||
import Indicator from '../../../indicator'
|
} from '../provider-input/Validate'
|
||||||
import I18n from '@/context/i18n'
|
|
||||||
|
|
||||||
type IStatusType = 'normal' | 'verified' | 'error' | 'error-api-key-exceed-bill'
|
interface IOpenaiProviderProps {
|
||||||
|
provider: Provider
|
||||||
type TInputWithStatusProps = {
|
onValidatedStatus: (status?: ValidatedStatus) => void
|
||||||
value: string
|
onTokenChange: (token: string) => void
|
||||||
onChange: (v: string) => void
|
|
||||||
onValidating: (validating: boolean) => void
|
|
||||||
verifiedStatus: IStatusType
|
|
||||||
onVerified: (verified: IStatusType) => void
|
|
||||||
}
|
}
|
||||||
const InputWithStatus = ({
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
onValidating,
|
|
||||||
verifiedStatus,
|
|
||||||
onVerified
|
|
||||||
}: TInputWithStatusProps) => {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const validateKey = useRef(debounce(async (token: string) => {
|
|
||||||
if (!token) return
|
|
||||||
onValidating(true)
|
|
||||||
try {
|
|
||||||
const res = await validateProviderKey({ url: '/workspaces/current/providers/openai/token-validate', body: { token } })
|
|
||||||
onVerified(res.result === 'success' ? 'verified' : 'error')
|
|
||||||
} catch (e: any) {
|
|
||||||
if (e.status === 400) {
|
|
||||||
e.json().then(({ code }: any) => {
|
|
||||||
if (code === 'provider_request_failed') {
|
|
||||||
onVerified('error-api-key-exceed-bill')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
onVerified('error')
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
onValidating(false)
|
|
||||||
}
|
|
||||||
}, 500))
|
|
||||||
|
|
||||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
const OpenaiProvider = ({
|
||||||
const inputValue = e.target.value
|
provider,
|
||||||
onChange(inputValue)
|
onValidatedStatus,
|
||||||
if (!inputValue) {
|
onTokenChange
|
||||||
onVerified('normal')
|
}: IOpenaiProviderProps) => {
|
||||||
}
|
|
||||||
validateKey.current(inputValue)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className={classNames('flex items-center h-9 px-3 bg-white border border-gray-300 rounded-lg', s.input)}>
|
|
||||||
<input
|
|
||||||
value={value}
|
|
||||||
placeholder={t('common.provider.enterYourKey') || ''}
|
|
||||||
className='w-full h-9 mr-2 appearance-none outline-none bg-transparent text-xs'
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
{
|
|
||||||
verifiedStatus === 'error' && <ExclamationCircleIcon className='w-4 h-4 text-[#D92D20]' />
|
|
||||||
}
|
|
||||||
{
|
|
||||||
verifiedStatus === 'verified' && <CheckCircleIcon className='w-4 h-4 text-[#039855]' />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const OpenaiProvider = () => {
|
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { locale } = useContext(I18n)
|
const [token, setToken] = useState(provider.token as string || '')
|
||||||
const { data: userInfo, mutate } = useSWR({ url: '/info' }, fetchTenantInfo)
|
const [ validating, validatedStatus, setValidatedStatus, validate ] = useValidateToken(provider.provider_name)
|
||||||
const [inputValue, setInputValue] = useState<string>('')
|
const handleFocus = () => {
|
||||||
const [validating, setValidating] = useState(false)
|
if (token === provider.token) {
|
||||||
const [editStatus, setEditStatus] = useState<IStatusType>('normal')
|
setToken('')
|
||||||
const [loading, setLoading] = useState(false)
|
onTokenChange('')
|
||||||
const [editing, setEditing] = useState(false)
|
setValidatedStatus(undefined)
|
||||||
const [invalidStatus, setInvalidStatus] = useState(false)
|
}
|
||||||
const { notify } = useContext(ToastContext)
|
|
||||||
const provider = userInfo?.providers?.find(({ provider }) => provider === 'openai')
|
|
||||||
|
|
||||||
const handleReset = () => {
|
|
||||||
setInputValue('')
|
|
||||||
setValidating(false)
|
|
||||||
setEditStatus('normal')
|
|
||||||
setLoading(false)
|
|
||||||
setEditing(false)
|
|
||||||
}
|
}
|
||||||
const handleSave = async () => {
|
const handleChange = (v: string) => {
|
||||||
if (editStatus === 'verified') {
|
setToken(v)
|
||||||
try {
|
onTokenChange(v)
|
||||||
setLoading(true)
|
validate(v, {
|
||||||
await updateProviderAIKey({ url: '/workspaces/current/providers/openai/token', body: { token: inputValue ?? '' } })
|
beforeValidating: () => {
|
||||||
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
if (!v) {
|
||||||
} catch (e) {
|
setValidatedStatus(undefined)
|
||||||
notify({ type: 'error', message: t('common.provider.saveFailed') })
|
return false
|
||||||
} finally {
|
}
|
||||||
setLoading(false)
|
return true
|
||||||
handleReset()
|
|
||||||
mutate()
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (provider && !provider.token_is_valid && provider.token_is_set) {
|
if (typeof onValidatedStatus === 'function') {
|
||||||
setInvalidStatus(true)
|
onValidatedStatus(validatedStatus)
|
||||||
}
|
}
|
||||||
}, [userInfo])
|
}, [validatedStatus])
|
||||||
|
|
||||||
const showInvalidStatus = invalidStatus && !editing
|
const getValidatedIcon = () => {
|
||||||
const renderErrorMessage = () => {
|
if (validatedStatus === ValidatedStatus.Error || validatedStatus === ValidatedStatus.Exceed) {
|
||||||
|
return <ValidatedErrorIcon />
|
||||||
|
}
|
||||||
|
if (validatedStatus === ValidatedStatus.Success) {
|
||||||
|
return <ValidatedSuccessIcon />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getValidatedTip = () => {
|
||||||
if (validating) {
|
if (validating) {
|
||||||
return (
|
return <ValidatingTip />
|
||||||
<div className={`mt-2 text-primary-600 text-xs font-normal`}>
|
|
||||||
{t('common.provider.validating')}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
if (editStatus === 'error-api-key-exceed-bill') {
|
if (validatedStatus === ValidatedStatus.Exceed) {
|
||||||
return (
|
return <ValidatedExceedOnOpenaiTip />
|
||||||
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
|
|
||||||
{t('common.provider.apiKeyExceedBill')}
|
|
||||||
<Link
|
|
||||||
className='underline'
|
|
||||||
href="https://platform.openai.com/account/api-keys"
|
|
||||||
target={'_blank'}>
|
|
||||||
{locale === 'en' ? 'this link' : '这篇文档'}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
if (showInvalidStatus || editStatus === 'error') {
|
if (validatedStatus === ValidatedStatus.Error) {
|
||||||
return (
|
return <ValidatedErrorOnOpenaiTip />
|
||||||
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
|
|
||||||
{t('common.provider.invalidKey')}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
return null
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='px-4 pt-3 pb-4'>
|
<div className='px-4 pt-3 pb-4'>
|
||||||
<div className='flex items-center mb-2 h-6'>
|
<ProviderInput
|
||||||
<div className='grow text-[13px] text-gray-800 font-medium'>
|
value={token}
|
||||||
{t('common.provider.apiKey')}
|
name={t('common.provider.apiKey')}
|
||||||
</div>
|
placeholder={t('common.provider.enterYourKey')}
|
||||||
{
|
onChange={handleChange}
|
||||||
provider && !editing && (
|
onFocus={handleFocus}
|
||||||
<div
|
validatedIcon={getValidatedIcon()}
|
||||||
className='
|
validatedTip={getValidatedTip()}
|
||||||
flex items-center h-6 px-2 rounded-md border border-gray-200
|
/>
|
||||||
text-xs font-medium text-gray-700 cursor-pointer
|
<Link className="inline-flex items-center mt-3 text-xs font-normal cursor-pointer text-primary-600 w-fit" href="https://platform.openai.com/account/api-keys" target={'_blank'}>
|
||||||
'
|
{t('appOverview.welcome.getKeyTip')}
|
||||||
onClick={() => setEditing(true)}
|
<ArrowTopRightOnSquareIcon className='w-3 h-3 ml-1 text-primary-600' aria-hidden="true" />
|
||||||
>
|
</Link>
|
||||||
<PencilIcon className='mr-1 w-3 h-3 text-gray-500' />
|
</div>
|
||||||
{t('common.operation.edit')}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
(inputValue || editing) && (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
className={classNames('mr-1', s.button)}
|
|
||||||
loading={loading}
|
|
||||||
onClick={handleReset}
|
|
||||||
>
|
|
||||||
{t('common.operation.cancel')}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type='primary'
|
|
||||||
className={classNames(s.button)}
|
|
||||||
loading={loading}
|
|
||||||
onClick={handleSave}>
|
|
||||||
{t('common.operation.save')}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
(!provider || (provider && editing)) && (
|
|
||||||
<InputWithStatus
|
|
||||||
value={inputValue}
|
|
||||||
onChange={v => setInputValue(v)}
|
|
||||||
verifiedStatus={editStatus}
|
|
||||||
onVerified={v => setEditStatus(v)}
|
|
||||||
onValidating={v => setValidating(v)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
(provider && !editing) && (
|
|
||||||
<div className={classNames('flex justify-between items-center bg-white px-3 h-9 rounded-lg text-gray-800 text-xs font-medium', s.input)}>
|
|
||||||
sk-0C...skuA
|
|
||||||
<Indicator color={(provider.token_is_set && provider.token_is_valid) ? 'green' : 'orange'} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{renderErrorMessage()}
|
|
||||||
<Link className="inline-flex items-center mt-3 text-xs font-normal cursor-pointer text-primary-600 w-fit" href="https://platform.openai.com/account/api-keys" target={'_blank'}>
|
|
||||||
{t('appOverview.welcome.getKeyTip')}
|
|
||||||
<ArrowTopRightOnSquareIcon className='w-3 h-3 ml-1 text-primary-600' aria-hidden="true" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,52 +0,0 @@
|
|||||||
import type { Provider } from '@/models/common'
|
|
||||||
import { useState } from 'react'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
import { ProviderValidateTokenInput } from '../provider-input'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
|
|
||||||
import { ValidatedStatus } from '../provider-input/useValidateToken'
|
|
||||||
|
|
||||||
interface IOpenaiProviderProps {
|
|
||||||
provider: Provider
|
|
||||||
onValidatedStatus: (status?: ValidatedStatus) => void
|
|
||||||
onTokenChange: (token: string) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const OpenaiProvider = ({
|
|
||||||
provider,
|
|
||||||
onValidatedStatus,
|
|
||||||
onTokenChange
|
|
||||||
}: IOpenaiProviderProps) => {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const [token, setToken] = useState(provider.token as string || '')
|
|
||||||
const handleFocus = () => {
|
|
||||||
if (token === provider.token) {
|
|
||||||
setToken('')
|
|
||||||
onTokenChange('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const handleChange = (v: string) => {
|
|
||||||
setToken(v)
|
|
||||||
onTokenChange(v)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='px-4 pt-3 pb-4'>
|
|
||||||
<ProviderValidateTokenInput
|
|
||||||
value={token}
|
|
||||||
name={t('common.provider.apiKey')}
|
|
||||||
placeholder={t('common.provider.enterYourKey')}
|
|
||||||
onChange={handleChange}
|
|
||||||
onFocus={handleFocus}
|
|
||||||
onValidatedStatus={onValidatedStatus}
|
|
||||||
providerName={provider.provider_name}
|
|
||||||
/>
|
|
||||||
<Link className="inline-flex items-center mt-3 text-xs font-normal cursor-pointer text-primary-600 w-fit" href="https://platform.openai.com/account/api-keys" target={'_blank'}>
|
|
||||||
{t('appOverview.welcome.getKeyTip')}
|
|
||||||
<ArrowTopRightOnSquareIcon className='w-3 h-3 ml-1 text-primary-600' aria-hidden="true" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default OpenaiProvider
|
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import Link from 'next/link'
|
||||||
|
import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/solid'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { useContext } from 'use-context-selector'
|
||||||
|
import I18n from '@/context/i18n'
|
||||||
|
|
||||||
|
export const ValidatedErrorIcon = () => {
|
||||||
|
return <ExclamationCircleIcon className='w-4 h-4 text-[#D92D20]' />
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ValidatedSuccessIcon = () => {
|
||||||
|
return <CheckCircleIcon className='w-4 h-4 text-[#039855]' />
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ValidatingTip = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
return (
|
||||||
|
<div className={`mt-2 text-primary-600 text-xs font-normal`}>
|
||||||
|
{t('common.provider.validating')}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ValidatedExceedOnOpenaiTip = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { locale } = useContext(I18n)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
|
||||||
|
{t('common.provider.apiKeyExceedBill')}
|
||||||
|
<Link
|
||||||
|
className='underline'
|
||||||
|
href="https://platform.openai.com/account/api-keys"
|
||||||
|
target={'_blank'}>
|
||||||
|
{locale === 'en' ? 'this link' : '这篇文档'}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ValidatedErrorOnOpenaiTip = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
|
||||||
|
{t('common.provider.invalidKey')}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ValidatedErrorOnAzureOpenaiTip = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
|
||||||
|
{t('common.provider.invalidApiKey')}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue