Initial commit
This commit is contained in:
John Wang
@@ -0,0 +1,75 @@
|
||||
import type { Provider, ProviderAzureToken } from '@/models/common'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Link from 'next/link'
|
||||
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
|
||||
import ProviderInput, { ProviderValidateTokenInput} from '../provider-input'
|
||||
import { useState } from 'react'
|
||||
import { ValidatedStatus } from '../provider-input/useValidateToken'
|
||||
|
||||
interface IAzureProviderProps {
|
||||
provider: Provider
|
||||
onValidatedStatus: (status?: ValidatedStatus) => void
|
||||
onTokenChange: (token: ProviderAzureToken) => void
|
||||
}
|
||||
const AzureProvider = ({
|
||||
provider,
|
||||
onTokenChange,
|
||||
onValidatedStatus
|
||||
}: IAzureProviderProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [token, setToken] = useState(provider.token as ProviderAzureToken || {})
|
||||
const handleFocus = () => {
|
||||
if (token === provider.token) {
|
||||
token.azure_api_key = ''
|
||||
setToken({...token})
|
||||
onTokenChange({...token})
|
||||
}
|
||||
}
|
||||
const handleChange = (type: keyof ProviderAzureToken, v: string) => {
|
||||
token[type] = v
|
||||
setToken({...token})
|
||||
onTokenChange({...token})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='px-4 py-3'>
|
||||
<ProviderInput
|
||||
className='mb-4'
|
||||
name={t('common.provider.azure.resourceName')}
|
||||
placeholder={t('common.provider.azure.resourceNamePlaceholder')}
|
||||
value={token.azure_api_base}
|
||||
onChange={(v) => handleChange('azure_api_base', v)}
|
||||
/>
|
||||
<ProviderInput
|
||||
className='mb-4'
|
||||
name={t('common.provider.azure.deploymentId')}
|
||||
placeholder={t('common.provider.azure.deploymentIdPlaceholder')}
|
||||
value={token.azure_api_type}
|
||||
onChange={v => handleChange('azure_api_type', v)}
|
||||
/>
|
||||
<ProviderInput
|
||||
className='mb-4'
|
||||
name={t('common.provider.azure.apiVersion')}
|
||||
placeholder={t('common.provider.azure.apiVersionPlaceholder')}
|
||||
value={token.azure_api_version}
|
||||
onChange={v => handleChange('azure_api_version', v)}
|
||||
/>
|
||||
<ProviderValidateTokenInput
|
||||
className='mb-4'
|
||||
name={t('common.provider.azure.apiKey')}
|
||||
placeholder={t('common.provider.azure.apiKeyPlaceholder')}
|
||||
value={token.azure_api_key}
|
||||
onChange={v => handleChange('azure_api_key', v)}
|
||||
onFocus={handleFocus}
|
||||
onValidatedStatus={onValidatedStatus}
|
||||
providerName={provider.provider_name}
|
||||
/>
|
||||
<Link className="flex items-center text-xs cursor-pointer text-primary-600" href="https://platform.openai.com/account/api-keys" target={'_blank'}>
|
||||
{t('common.provider.azure.helpTip')}
|
||||
<ArrowTopRightOnSquareIcon className='w-3 h-3 ml-1 text-primary-600' aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AzureProvider
|
||||
@@ -0,0 +1,17 @@
|
||||
.wrapper .button {
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.gpt-icon {
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(../../assets/gpt.svg) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.input {
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { fetchProviders } from '@/service/common'
|
||||
import ProviderItem from './provider-item'
|
||||
import OpenaiHostedProvider from './openai-hosted-provider'
|
||||
import type { ProviderHosted } from '@/models/common'
|
||||
import { LockClosedIcon } from '@heroicons/react/24/solid'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Link from 'next/link'
|
||||
import { IS_CE_EDITION } from '@/config'
|
||||
|
||||
const providersMap: {[k: string]: any} = {
|
||||
'openai-custom': {
|
||||
icon: 'openai',
|
||||
name: 'OpenAI',
|
||||
},
|
||||
'azure_openai-custom': {
|
||||
icon: 'azure',
|
||||
name: 'Azure OpenAI Service',
|
||||
}
|
||||
}
|
||||
|
||||
// const providersList = [
|
||||
// {
|
||||
// id: 'openai',
|
||||
// name: 'OpenAI',
|
||||
// providerKey: '1',
|
||||
// status: '',
|
||||
// child: <OpenaiProvider />
|
||||
// },
|
||||
// {
|
||||
// id: 'azure',
|
||||
// name: 'Azure OpenAI Service',
|
||||
// providerKey: '1',
|
||||
// status: 'error',
|
||||
// child: <AzureProvider />
|
||||
// },
|
||||
// {
|
||||
// id: 'anthropic',
|
||||
// name: 'Anthropic',
|
||||
// providerKey: '',
|
||||
// status: '',
|
||||
// child: <div>placeholder</div>
|
||||
// },
|
||||
// {
|
||||
// id: 'hugging-face',
|
||||
// name: 'Hugging Face Hub',
|
||||
// providerKey: '',
|
||||
// comingSoon: true,
|
||||
// status: '',
|
||||
// child: <div>placeholder</div>
|
||||
// }
|
||||
// ]
|
||||
|
||||
const ProviderPage = () => {
|
||||
const { t } = useTranslation()
|
||||
const [activeProviderId, setActiveProviderId] = useState('')
|
||||
const { data, mutate } = useSWR({ url: '/workspaces/current/providers' }, fetchProviders)
|
||||
const providers = data?.filter(provider => providersMap[`${provider.provider_name}-${provider.provider_type}`])?.map(provider => {
|
||||
const providerKey = `${provider.provider_name}-${provider.provider_type}`
|
||||
return {
|
||||
provider,
|
||||
icon: providersMap[providerKey].icon,
|
||||
name: providersMap[providerKey].name,
|
||||
}
|
||||
})
|
||||
const providerHosted = data?.filter(provider => provider.provider_name === 'openai' && provider.provider_type === 'system')?.[0]
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
providerHosted && !IS_CE_EDITION && (
|
||||
<>
|
||||
<div>
|
||||
<OpenaiHostedProvider provider={providerHosted as ProviderHosted} />
|
||||
</div>
|
||||
<div className='my-5 w-full h-0 border-[0.5px] border-gray-100' />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div>
|
||||
{
|
||||
providers?.map(providerItem => (
|
||||
<ProviderItem
|
||||
key={`${providerItem.provider.provider_name}-${providerItem.provider.provider_type}`}
|
||||
icon={providerItem.icon}
|
||||
name={providerItem.name}
|
||||
provider={providerItem.provider}
|
||||
activeId={activeProviderId}
|
||||
onActive={aid => setActiveProviderId(aid)}
|
||||
onSave={() => mutate()}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className='absolute bottom-0 w-full h-[42px] flex items-center bg-white text-xs text-gray-500'>
|
||||
<LockClosedIcon className='w-3 h-3 mr-1' />
|
||||
{t('common.provider.encrypted.front')}
|
||||
<Link
|
||||
className='text-primary-600 mx-1'
|
||||
target={'_blank'}
|
||||
href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
|
||||
>
|
||||
PKCS1_OAEP
|
||||
</Link>
|
||||
{t('common.provider.encrypted.back')}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProviderPage
|
||||
@@ -0,0 +1,24 @@
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
background: url(../../../assets/gpt.svg) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.bar {
|
||||
background: linear-gradient(90deg, rgba(41, 112, 255, 0.9) 0%, rgba(21, 94, 239, 0.9) 100%);
|
||||
}
|
||||
|
||||
.bar-error {
|
||||
background: linear-gradient(90deg, rgba(240, 68, 56, 0.72) 0%, rgba(217, 45, 32, 0.9) 100%);
|
||||
}
|
||||
|
||||
.bar-item {
|
||||
width: 10%;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.bar-item:last-of-type {
|
||||
border-right: 0;
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import s from './index.module.css'
|
||||
import cn from 'classnames'
|
||||
import type { ProviderHosted } from '@/models/common'
|
||||
|
||||
interface IOpenaiHostedProviderProps {
|
||||
provider: ProviderHosted
|
||||
}
|
||||
const OpenaiHostedProvider = ({
|
||||
provider
|
||||
}: IOpenaiHostedProviderProps) => {
|
||||
const { t } = useTranslation()
|
||||
const exhausted = provider.quota_used > provider.quota_limit
|
||||
|
||||
return (
|
||||
<div className={`
|
||||
border-[0.5px] border-gray-200 rounded-xl
|
||||
${exhausted ? 'bg-[#FFFBFA]' : 'bg-gray-50'}
|
||||
`}>
|
||||
<div className='pt-4 px-4 pb-3'>
|
||||
<div className='flex items-center mb-3'>
|
||||
<div className={s.icon} />
|
||||
<div className='grow text-sm font-medium text-gray-800'>
|
||||
{t('common.provider.openaiHosted.openaiHosted')}
|
||||
</div>
|
||||
<div className={`
|
||||
px-2 h-[22px] flex items-center rounded-md border
|
||||
text-xs font-semibold
|
||||
${exhausted ? 'border-[#D92D20] text-[#D92D20]' : 'border-primary-600 text-primary-600'}
|
||||
`}>
|
||||
{exhausted ? t('common.provider.openaiHosted.exhausted') : t('common.provider.openaiHosted.onTrial')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-[13px] text-gray-500'>{t('common.provider.openaiHosted.desc')}</div>
|
||||
</div>
|
||||
<div className='flex items-center h-[42px] px-4 border-t-[0.5px] border-t-[rgba(0, 0, 0, 0.05)]'>
|
||||
<div className='text-[13px] text-gray-700'>{t('common.provider.openaiHosted.callTimes')}</div>
|
||||
<div className='relative grow h-2 flex bg-gray-200 rounded-md mx-2 overflow-hidden'>
|
||||
<div
|
||||
className={cn(s.bar, exhausted && s['bar-error'], 'absolute top-0 left-0 right-0 bottom-0')}
|
||||
style={{ width: `${(provider.quota_used / provider.quota_limit * 100).toFixed(2)}%` }}
|
||||
/>
|
||||
{Array(10).fill(0).map((i, k) => (
|
||||
<div key={k} className={s['bar-item']} />
|
||||
))}
|
||||
</div>
|
||||
<div className={`
|
||||
text-[13px] font-medium ${exhausted ? 'text-[#D92D20]' : 'text-gray-700'}
|
||||
`}>{provider.quota_used}/{provider.quota_limit}</div>
|
||||
</div>
|
||||
{
|
||||
exhausted && (
|
||||
<div className='
|
||||
px-4 py-3 leading-[18px] flex items-center text-[13px] text-gray-700 font-medium
|
||||
bg-[#FFFAEB] border-t border-t-[rgba(0, 0, 0, 0.05)] rounded-b-xl
|
||||
'>
|
||||
{t('common.provider.openaiHosted.usedUp')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OpenaiHostedProvider
|
||||
@@ -0,0 +1,223 @@
|
||||
import { ChangeEvent, useEffect, useRef, useState } from 'react'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { debounce } from 'lodash-es'
|
||||
import Link from 'next/link'
|
||||
import useSWR from 'swr'
|
||||
import { ArrowTopRightOnSquareIcon, PencilIcon } from '@heroicons/react/24/outline'
|
||||
import { CheckCircleIcon, ExclamationCircleIcon } from '@heroicons/react/24/solid'
|
||||
import Button from '@/app/components/base/button'
|
||||
import s from './index.module.css'
|
||||
import classNames from 'classnames'
|
||||
import { fetchTenantInfo, validateProviderKey, updateProviderAIKey } from '@/service/common'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import Indicator from '../../../indicator'
|
||||
import I18n from '@/context/i18n'
|
||||
|
||||
type IStatusType = 'normal' | 'verified' | 'error' | 'error-api-key-exceed-bill'
|
||||
|
||||
type TInputWithStatusProps = {
|
||||
value: string
|
||||
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 inputValue = e.target.value
|
||||
onChange(inputValue)
|
||||
if (!inputValue) {
|
||||
onVerified('normal')
|
||||
}
|
||||
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 { locale } = useContext(I18n)
|
||||
const { data: userInfo, mutate } = useSWR({ url: '/info' }, fetchTenantInfo)
|
||||
const [inputValue, setInputValue] = useState<string>('')
|
||||
const [validating, setValidating] = useState(false)
|
||||
const [editStatus, setEditStatus] = useState<IStatusType>('normal')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [editing, setEditing] = useState(false)
|
||||
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 () => {
|
||||
if (editStatus === 'verified') {
|
||||
try {
|
||||
setLoading(true)
|
||||
await updateProviderAIKey({ url: '/workspaces/current/providers/openai/token', body: { token: inputValue ?? '' } })
|
||||
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
||||
} catch (e) {
|
||||
notify({ type: 'error', message: t('common.provider.saveFailed') })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
handleReset()
|
||||
mutate()
|
||||
}
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (provider && !provider.token_is_valid && provider.token_is_set) {
|
||||
setInvalidStatus(true)
|
||||
}
|
||||
}, [userInfo])
|
||||
|
||||
const showInvalidStatus = invalidStatus && !editing
|
||||
const renderErrorMessage = () => {
|
||||
if (validating) {
|
||||
return (
|
||||
<div className={`mt-2 text-primary-600 text-xs font-normal`}>
|
||||
{t('common.provider.validating')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (editStatus === 'error-api-key-exceed-bill') {
|
||||
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>
|
||||
)
|
||||
}
|
||||
if (showInvalidStatus || editStatus === 'error') {
|
||||
return (
|
||||
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
|
||||
{t('common.provider.invalidKey')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='px-4 pt-3 pb-4'>
|
||||
<div className='flex items-center mb-2 h-6'>
|
||||
<div className='grow text-[13px] text-gray-800 font-medium'>
|
||||
{t('common.provider.apiKey')}
|
||||
</div>
|
||||
{
|
||||
provider && !editing && (
|
||||
<div
|
||||
className='
|
||||
flex items-center h-6 px-2 rounded-md border border-gray-200
|
||||
text-xs font-medium text-gray-700 cursor-pointer
|
||||
'
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
<PencilIcon className='mr-1 w-3 h-3 text-gray-500' />
|
||||
{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>
|
||||
)
|
||||
}
|
||||
|
||||
export default OpenaiProvider
|
||||
@@ -0,0 +1,52 @@
|
||||
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,143 @@
|
||||
import { ChangeEvent, useEffect } from 'react'
|
||||
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'
|
||||
import useValidateToken, { ValidatedStatus } from './useValidateToken'
|
||||
|
||||
interface IProviderInputProps {
|
||||
value?: string
|
||||
name: string
|
||||
placeholder: string
|
||||
className?: string
|
||||
onChange: (v: string) => void
|
||||
onFocus?: () => void
|
||||
}
|
||||
|
||||
const ProviderInput = ({
|
||||
value,
|
||||
name,
|
||||
placeholder,
|
||||
className,
|
||||
onChange,
|
||||
onFocus,
|
||||
}: IProviderInputProps) => {
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const inputValue = e.target.value
|
||||
onChange(inputValue)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="mb-2 text-[13px] font-medium text-gray-800">{name}</div>
|
||||
<div className='
|
||||
flex items-center px-3 bg-white rounded-lg
|
||||
shadow-[0_1px_2px_rgba(16,24,40,0.05)]
|
||||
'>
|
||||
<input
|
||||
className='
|
||||
w-full py-[9px]
|
||||
text-xs font-medium text-gray-700 leading-[18px]
|
||||
appearance-none outline-none bg-transparent
|
||||
'
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
onChange={handleChange}
|
||||
onFocus={onFocus}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type TproviderInputProps = IProviderInputProps
|
||||
& {
|
||||
onValidatedStatus?: (status?: ValidatedStatus) => void
|
||||
providerName: string
|
||||
}
|
||||
export const ProviderValidateTokenInput = ({
|
||||
value,
|
||||
name,
|
||||
placeholder,
|
||||
className,
|
||||
onChange,
|
||||
onFocus,
|
||||
onValidatedStatus,
|
||||
providerName
|
||||
}: TproviderInputProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { locale } = useContext(I18n)
|
||||
const [ validating, validatedStatus, validate ] = useValidateToken(providerName)
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof onValidatedStatus === 'function') {
|
||||
onValidatedStatus(validatedStatus)
|
||||
}
|
||||
}, [validatedStatus])
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const inputValue = e.target.value
|
||||
onChange(inputValue)
|
||||
|
||||
validate(inputValue)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="mb-2 text-[13px] font-medium text-gray-800">{name}</div>
|
||||
<div className='
|
||||
flex items-center px-3 bg-white rounded-lg
|
||||
shadow-[0_1px_2px_rgba(16,24,40,0.05)]
|
||||
'>
|
||||
<input
|
||||
className='
|
||||
w-full py-[9px]
|
||||
text-xs font-medium text-gray-700 leading-[18px]
|
||||
appearance-none outline-none bg-transparent
|
||||
'
|
||||
value={value}
|
||||
placeholder={placeholder}
|
||||
onChange={handleChange}
|
||||
onFocus={onFocus}
|
||||
/>
|
||||
{
|
||||
validatedStatus === ValidatedStatus.Error && <ExclamationCircleIcon className='w-4 h-4 text-[#D92D20]' />
|
||||
}
|
||||
{
|
||||
validatedStatus === ValidatedStatus.Success && <CheckCircleIcon className='w-4 h-4 text-[#039855]' />
|
||||
}
|
||||
</div>
|
||||
{
|
||||
validating && (
|
||||
<div className={`mt-2 text-primary-600 text-xs font-normal`}>
|
||||
{t('common.provider.validating')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
validatedStatus === ValidatedStatus.Exceed && !validating && (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
{
|
||||
validatedStatus === ValidatedStatus.Error && !validating && (
|
||||
<div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
|
||||
{t('common.provider.invalidKey')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProviderInput
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useState, useCallback } from 'react'
|
||||
import debounce from 'lodash/debounce'
|
||||
import { DebouncedFunc } from 'lodash'
|
||||
import { validateProviderKey } from '@/service/common'
|
||||
|
||||
export enum ValidatedStatus {
|
||||
Success = 'success',
|
||||
Error = 'error',
|
||||
Exceed = 'exceed'
|
||||
}
|
||||
|
||||
const useValidateToken = (providerName: string): [boolean, ValidatedStatus | undefined, DebouncedFunc<(token: string) => Promise<void>>] => {
|
||||
const [validating, setValidating] = useState(false)
|
||||
const [validatedStatus, setValidatedStatus] = useState<ValidatedStatus | undefined>()
|
||||
const validate = useCallback(debounce(async (token: string) => {
|
||||
if (!token) {
|
||||
setValidatedStatus(undefined)
|
||||
return
|
||||
}
|
||||
setValidating(true)
|
||||
try {
|
||||
const res = await validateProviderKey({ url: `/workspaces/current/providers/${providerName}/token-validate`, body: { token } })
|
||||
setValidatedStatus(res.result === 'success' ? ValidatedStatus.Success : ValidatedStatus.Error)
|
||||
} catch (e: any) {
|
||||
if (e.status === 400) {
|
||||
e.json().then(({ code }: any) => {
|
||||
if (code === 'provider_request_failed') {
|
||||
setValidatedStatus(ValidatedStatus.Exceed)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
setValidatedStatus(ValidatedStatus.Error)
|
||||
}
|
||||
} finally {
|
||||
setValidating(false)
|
||||
}
|
||||
}, 500), [])
|
||||
|
||||
return [
|
||||
validating,
|
||||
validatedStatus,
|
||||
validate,
|
||||
]
|
||||
}
|
||||
|
||||
export default useValidateToken
|
||||
@@ -0,0 +1,19 @@
|
||||
.icon-openai {
|
||||
background: url(../../../assets/gpt.svg) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-azure {
|
||||
background: url(../../../assets/azure.svg) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-anthropic {
|
||||
background: url(../../../assets/anthropic.svg) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-hugging-face {
|
||||
background: url(../../../assets/hugging-face.svg) center center no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
import { useState } from 'react'
|
||||
import cn from 'classnames'
|
||||
import s from './index.module.css'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import Indicator from '../../../indicator'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { Provider, ProviderAzureToken } from '@/models/common'
|
||||
import OpenaiProvider from '../openai-provider/provider'
|
||||
import AzureProvider from '../azure-provider'
|
||||
import { ValidatedStatus } from '../provider-input/useValidateToken'
|
||||
import { updateProviderAIKey } from '@/service/common'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
|
||||
interface IProviderItemProps {
|
||||
icon: string
|
||||
name: string
|
||||
provider: Provider
|
||||
activeId: string
|
||||
onActive: (v: string) => void
|
||||
onSave: () => void
|
||||
}
|
||||
const ProviderItem = ({
|
||||
activeId,
|
||||
icon,
|
||||
name,
|
||||
provider,
|
||||
onActive,
|
||||
onSave
|
||||
}: IProviderItemProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [validatedStatus, setValidatedStatus] = useState<ValidatedStatus>()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const { notify } = useContext(ToastContext)
|
||||
const [token, setToken] = useState<ProviderAzureToken | string>(
|
||||
provider.provider_name === 'azure_openai'
|
||||
? { azure_api_base: '', azure_api_type: '', azure_api_version: '', azure_api_key: '' }
|
||||
: ''
|
||||
)
|
||||
const id = `${provider.provider_name}-${provider.provider_type}`
|
||||
const isOpen = id === activeId
|
||||
const providerKey = provider.provider_name === 'azure_openai' ? (provider.token as ProviderAzureToken)?.azure_api_key : provider.token
|
||||
const comingSoon = false
|
||||
const isValid = provider.is_valid
|
||||
|
||||
const handleUpdateToken = async () => {
|
||||
if (loading) return
|
||||
if (validatedStatus === ValidatedStatus.Success || !token) {
|
||||
try {
|
||||
setLoading(true)
|
||||
await updateProviderAIKey({ url: `/workspaces/current/providers/${provider.provider_name}/token`, body: { token } })
|
||||
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
||||
onActive('')
|
||||
} catch (e) {
|
||||
notify({ type: 'error', message: t('common.provider.saveFailed') })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
onSave()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mb-2 border-[0.5px] border-gray-200 bg-gray-50 rounded-md'>
|
||||
<div className='flex items-center px-4 h-[52px] cursor-pointer border-b-[0.5px] border-b-gray-200'>
|
||||
<div className={cn(s[`icon-${icon}`], 'mr-3 w-6 h-6 rounded-md')} />
|
||||
<div className='grow text-sm font-medium text-gray-800'>{name}</div>
|
||||
{
|
||||
providerKey && !comingSoon && !isOpen && (
|
||||
<div className='flex items-center mr-4'>
|
||||
{!isValid && <div className='text-xs text-[#D92D20]'>{t('common.provider.invalidApiKey')}</div>}
|
||||
<Indicator color={!isValid ? 'red' : 'green'} className='ml-2' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
!comingSoon && !isOpen && (
|
||||
<div className='
|
||||
px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
|
||||
text-xs font-medium text-gray-700 flex items-center
|
||||
' onClick={() => onActive(id)}>
|
||||
{providerKey ? t('common.provider.editKey') : t('common.provider.addKey')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
comingSoon && !isOpen && (
|
||||
<div className='
|
||||
flex items-center px-2 h-[22px] border border-[#444CE7] rounded-md
|
||||
text-xs font-medium text-[#444CE7]
|
||||
'>
|
||||
{t('common.provider.comingSoon')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
isOpen && (
|
||||
<div className='flex items-center'>
|
||||
<div className='
|
||||
flex items-center
|
||||
mr-[5px] px-3 h-7 rounded-md cursor-pointer
|
||||
text-xs font-medium text-gray-700
|
||||
' onClick={() => onActive('')} >
|
||||
{t('common.operation.cancel')}
|
||||
</div>
|
||||
<div className='
|
||||
flex items-center
|
||||
px-3 h-7 rounded-md cursor-pointer bg-primary-700
|
||||
text-xs font-medium text-white
|
||||
' onClick={handleUpdateToken}>
|
||||
{t('common.operation.save')}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
provider.provider_name === 'openai' && isOpen && (
|
||||
<OpenaiProvider
|
||||
provider={provider}
|
||||
onValidatedStatus={v => setValidatedStatus(v)}
|
||||
onTokenChange={v => setToken(v)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
provider.provider_name === 'azure_openai' && isOpen && (
|
||||
<AzureProvider
|
||||
provider={provider}
|
||||
onValidatedStatus={v => setValidatedStatus(v)}
|
||||
onTokenChange={v => setToken(v)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProviderItem
|
||||
Reference in New Issue
Block a user