feat: frontend support claude (#573)
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>pull/574/head
Joel
3 years ago
committed by
GitHub
parent
7599f79a17
commit
8e11200306
File diff suppressed because one or more lines are too long
@ -0,0 +1,24 @@
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
background: url(../../../assets/anthropic.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 cn from 'classnames'
|
||||
import s from './index.module.css'
|
||||
import type { ProviderHosted } from '@/models/common'
|
||||
|
||||
type AnthropicHostedProviderProps = {
|
||||
provider: ProviderHosted
|
||||
}
|
||||
const AnthropicHostedProvider = ({
|
||||
provider,
|
||||
}: AnthropicHostedProviderProps) => {
|
||||
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.anthropicHosted.anthropicHosted')}
|
||||
</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.anthropicHosted.exhausted') : t('common.provider.anthropicHosted.onTrial')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-[13px] text-gray-500'>{t('common.provider.anthropicHosted.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.anthropicHosted.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.anthropicHosted.usedUp')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AnthropicHostedProvider
|
||||
@ -0,0 +1,90 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Link from 'next/link'
|
||||
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
|
||||
import ProviderInput from '../provider-input'
|
||||
import type { ValidatedStatusState } from '../provider-input/useValidateToken'
|
||||
import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken'
|
||||
import {
|
||||
ValidatedErrorIcon,
|
||||
ValidatedErrorOnOpenaiTip,
|
||||
ValidatedSuccessIcon,
|
||||
ValidatingTip,
|
||||
} from '../provider-input/Validate'
|
||||
import type { Provider, ProviderAnthropicToken } from '@/models/common'
|
||||
|
||||
type AnthropicProviderProps = {
|
||||
provider: Provider
|
||||
onValidatedStatus: (status?: ValidatedStatusState) => void
|
||||
onTokenChange: (token: ProviderAnthropicToken) => void
|
||||
}
|
||||
|
||||
const AnthropicProvider = ({
|
||||
provider,
|
||||
onValidatedStatus,
|
||||
onTokenChange,
|
||||
}: AnthropicProviderProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [token, setToken] = useState<ProviderAnthropicToken>((provider.token as ProviderAnthropicToken) || { anthropic_api_key: '' })
|
||||
const [validating, validatedStatus, setValidatedStatus, validate] = useValidateToken(provider.provider_name)
|
||||
const handleFocus = () => {
|
||||
if (token.anthropic_api_key === (provider.token as ProviderAnthropicToken).anthropic_api_key) {
|
||||
setToken({ anthropic_api_key: '' })
|
||||
onTokenChange({ anthropic_api_key: '' })
|
||||
setValidatedStatus({})
|
||||
}
|
||||
}
|
||||
const handleChange = (v: string) => {
|
||||
const apiKey = { anthropic_api_key: v }
|
||||
setToken(apiKey)
|
||||
onTokenChange(apiKey)
|
||||
validate(apiKey, {
|
||||
beforeValidating: () => {
|
||||
if (!v) {
|
||||
setValidatedStatus({})
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
})
|
||||
}
|
||||
useEffect(() => {
|
||||
if (typeof onValidatedStatus === 'function')
|
||||
onValidatedStatus(validatedStatus)
|
||||
}, [validatedStatus])
|
||||
|
||||
const getValidatedIcon = () => {
|
||||
if (validatedStatus?.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed)
|
||||
return <ValidatedErrorIcon />
|
||||
|
||||
if (validatedStatus.status === ValidatedStatus.Success)
|
||||
return <ValidatedSuccessIcon />
|
||||
}
|
||||
const getValidatedTip = () => {
|
||||
if (validating)
|
||||
return <ValidatingTip />
|
||||
|
||||
if (validatedStatus?.status === ValidatedStatus.Error)
|
||||
return <ValidatedErrorOnOpenaiTip errorMessage={validatedStatus.message ?? ''} />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='px-4 pt-3 pb-4'>
|
||||
<ProviderInput
|
||||
value={token.anthropic_api_key}
|
||||
name={t('common.provider.apiKey')}
|
||||
placeholder={t('common.provider.enterYourKey')}
|
||||
onChange={handleChange}
|
||||
onFocus={handleFocus}
|
||||
validatedIcon={getValidatedIcon()}
|
||||
validatedTip={getValidatedTip()}
|
||||
/>
|
||||
<Link className="inline-flex items-center mt-3 text-xs font-normal cursor-pointer text-primary-600 w-fit" href="https://docs.anthropic.com/claude/reference/getting-started-with-the-api" target={'_blank'}>
|
||||
{t('common.provider.anthropic.keyFrom')}
|
||||
<ArrowTopRightOnSquareIcon className='w-3 h-3 ml-1 text-primary-600' aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AnthropicProvider
|
||||
Loading…
Reference in New Issue