Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
GitHub
parent
e61415223b
commit
7709d9df20
1435 changed files with 13372 additions and 11612 deletions
|
|
@ -15,10 +15,10 @@ const AddModelButton: FC<AddModelButtonProps> = ({
|
|||
|
||||
return (
|
||||
<span
|
||||
className={cn('shrink-0 flex items-center px-1.5 h-6 text-text-tertiary system-xs-medium cursor-pointer hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text rounded-md', className)}
|
||||
className={cn('system-xs-medium flex h-6 shrink-0 cursor-pointer items-center rounded-md px-1.5 text-text-tertiary hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text', className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<PlusCircle className='mr-1 w-3 h-3' />
|
||||
<PlusCircle className='mr-1 h-3 w-3' />
|
||||
{t('common.modelProvider.addModel')}
|
||||
</span>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
|
|||
return displayTime
|
||||
? (
|
||||
<Tooltip popupContent={t('common.modelProvider.apiKeyRateLimit', { seconds: displayTime })}>
|
||||
<SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className='w-3 h-3' />
|
||||
<SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className='h-3 w-3' />
|
||||
</Tooltip>
|
||||
)
|
||||
: null
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
|
|||
<>
|
||||
{
|
||||
provider.provider_credential_schema && (
|
||||
<div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border'>
|
||||
<div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 system-xs-medium-uppercase text-text-tertiary'>
|
||||
<div className='relative ml-1 w-[112px] shrink-0 rounded-lg border-[0.5px] border-components-panel-border bg-white/[0.18] p-1'>
|
||||
<div className='system-xs-medium-uppercase mb-1 flex h-5 items-center justify-between pl-2 pr-[7px] pt-1 text-text-tertiary'>
|
||||
API-KEY
|
||||
<Indicator color={isCustomConfigured ? 'green' : 'red'} />
|
||||
</div>
|
||||
|
|
@ -77,7 +77,7 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
|
|||
size='small'
|
||||
onClick={onSetup}
|
||||
>
|
||||
<RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
|
||||
<RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
|
||||
{t('common.operation.setup')}
|
||||
</Button>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -83,13 +83,13 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'mb-2 rounded-xl border-[0.5px] border-divider-regular shadow-xs bg-third-party-model-bg-default',
|
||||
'mb-2 rounded-xl border-[0.5px] border-divider-regular bg-third-party-model-bg-default shadow-xs',
|
||||
provider.provider === 'langgenius/openai/openai' && 'bg-third-party-model-bg-openai',
|
||||
provider.provider === 'langgenius/anthropic/anthropic' && 'bg-third-party-model-bg-anthropic',
|
||||
)}
|
||||
>
|
||||
<div className='flex pl-3 py-2 pr-2 rounded-t-xl'>
|
||||
<div className='grow px-1 pt-1 pb-0.5'>
|
||||
<div className='flex rounded-t-xl py-2 pl-3 pr-2'>
|
||||
<div className='grow px-1 pb-0.5 pt-1'>
|
||||
<ProviderIcon
|
||||
className='mb-2'
|
||||
provider={provider}
|
||||
|
|
@ -122,19 +122,19 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
|
|||
</div>
|
||||
{
|
||||
collapsed && (
|
||||
<div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-divider-subtle text-text-tertiary system-xs-medium'>
|
||||
<div className='system-xs-medium group flex items-center justify-between border-t border-t-divider-subtle py-1.5 pl-2 pr-[11px] text-text-tertiary'>
|
||||
{(showQuota || !notConfigured) && (
|
||||
<>
|
||||
<div className='group-hover:hidden flex items-center pl-1 pr-1.5 h-6 leading-6'>
|
||||
<div className='flex h-6 items-center pl-1 pr-1.5 leading-6 group-hover:hidden'>
|
||||
{
|
||||
hasModelList
|
||||
? t('common.modelProvider.modelsNum', { num: modelList.length })
|
||||
: t('common.modelProvider.showModels')
|
||||
}
|
||||
{!loading && <RiArrowRightSLine className='w-4 h-4' />}
|
||||
{!loading && <RiArrowRightSLine className='h-4 w-4' />}
|
||||
</div>
|
||||
<div
|
||||
className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-components-button-ghost-bg-hover cursor-pointer'
|
||||
className='hidden h-6 cursor-pointer items-center rounded-lg pl-1 pr-1.5 hover:bg-components-button-ghost-bg-hover group-hover:flex'
|
||||
onClick={handleOpenModelList}
|
||||
>
|
||||
{
|
||||
|
|
@ -142,19 +142,19 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
|
|||
? t('common.modelProvider.showModelsNum', { num: modelList.length })
|
||||
: t('common.modelProvider.showModels')
|
||||
}
|
||||
{!loading && <RiArrowRightSLine className='w-4 h-4' />}
|
||||
{!loading && <RiArrowRightSLine className='h-4 w-4' />}
|
||||
{
|
||||
loading && (
|
||||
<RiLoader2Line className='ml-0.5 animate-spin w-3 h-3' />
|
||||
<RiLoader2Line className='ml-0.5 h-3 w-3 animate-spin' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!showQuota && notConfigured && (
|
||||
<div className='flex items-center pl-1 pr-1.5 h-6'>
|
||||
<RiInformation2Fill className='mr-1 w-4 h-4 text-text-accent' />
|
||||
<span className='text-text-secondary system-xs-medium'>{t('common.modelProvider.configureTip')}</span>
|
||||
<div className='flex h-6 items-center pl-1 pr-1.5'>
|
||||
<RiInformation2Fill className='mr-1 h-4 w-4 text-text-accent' />
|
||||
<span className='system-xs-medium text-text-secondary'>{t('common.modelProvider.configureTip')}</span>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
|
|
|
|||
|
|
@ -54,25 +54,25 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
|
|||
)}
|
||||
>
|
||||
<ModelIcon
|
||||
className='shrink-0 mr-2'
|
||||
className='mr-2 shrink-0'
|
||||
provider={provider}
|
||||
modelName={model.model}
|
||||
/>
|
||||
<ModelName
|
||||
className='grow system-md-regular text-text-secondary'
|
||||
className='system-md-regular grow text-text-secondary'
|
||||
modelItem={model}
|
||||
showModelType
|
||||
showMode
|
||||
showContextSize
|
||||
>
|
||||
{modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && (
|
||||
<ModelBadge className='ml-1 uppercase text-text-accent-secondary border-text-accent-secondary'>
|
||||
<Balance className='w-3 h-3 mr-0.5' />
|
||||
<ModelBadge className='ml-1 border-text-accent-secondary uppercase text-text-accent-secondary'>
|
||||
<Balance className='mr-0.5 h-3 w-3' />
|
||||
{t('common.modelProvider.loadBalancingHeadline')}
|
||||
</ModelBadge>
|
||||
)}
|
||||
</ModelName>
|
||||
<div className='shrink-0 flex items-center'>
|
||||
<div className='flex shrink-0 items-center'>
|
||||
{
|
||||
model.fetch_from === ConfigurationMethodEnum.customizableModel
|
||||
? (isCurrentWorkspaceManager && (
|
||||
|
|
@ -81,7 +81,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
|
|||
className='hidden group-hover:flex'
|
||||
onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
|
||||
>
|
||||
<Settings01 className='mr-1 w-3.5 h-3.5' />
|
||||
<Settings01 className='mr-1 h-3.5 w-3.5' />
|
||||
{t('common.modelProvider.config')}
|
||||
</Button>
|
||||
))
|
||||
|
|
@ -89,10 +89,10 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
|
|||
? (
|
||||
<Button
|
||||
size='small'
|
||||
className='opacity-0 group-hover:opacity-100 transition-opacity'
|
||||
className='opacity-0 transition-opacity group-hover:opacity-100'
|
||||
onClick={() => onModifyLoadBalancing?.(model)}
|
||||
>
|
||||
<Balance className='mr-1 w-3.5 h-3.5' />
|
||||
<Balance className='mr-1 h-3.5 w-3.5' />
|
||||
{t('common.modelProvider.configLoadBalancing')}
|
||||
</Button>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -49,20 +49,20 @@ const ModelList: FC<ModelListProps> = ({
|
|||
}, [onChange, provider, setShowModelLoadBalancingModal])
|
||||
|
||||
return (
|
||||
<div className='px-2 pb-2 rounded-b-xl'>
|
||||
<div className='py-1 bg-components-panel-bg rounded-lg'>
|
||||
<div className='rounded-b-xl px-2 pb-2'>
|
||||
<div className='rounded-lg bg-components-panel-bg py-1'>
|
||||
<div className='flex items-center pl-1 pr-[3px]'>
|
||||
<span className='group shrink-0 flex items-center mr-2'>
|
||||
<span className='group-hover:hidden inline-flex items-center pl-1 pr-1.5 h-6 system-xs-medium text-text-tertiary'>
|
||||
<span className='group mr-2 flex shrink-0 items-center'>
|
||||
<span className='system-xs-medium inline-flex h-6 items-center pl-1 pr-1.5 text-text-tertiary group-hover:hidden'>
|
||||
{t('common.modelProvider.modelsNum', { num: models.length })}
|
||||
<RiArrowRightSLine className='mr-0.5 w-4 h-4 rotate-90' />
|
||||
<RiArrowRightSLine className='mr-0.5 h-4 w-4 rotate-90' />
|
||||
</span>
|
||||
<span
|
||||
className='hidden group-hover:inline-flex items-center pl-1 pr-1.5 h-6 system-xs-medium text-text-tertiary bg-state-base-hover cursor-pointer rounded-lg'
|
||||
className='system-xs-medium hidden h-6 cursor-pointer items-center rounded-lg bg-state-base-hover pl-1 pr-1.5 text-text-tertiary group-hover:inline-flex'
|
||||
onClick={() => onCollapse()}
|
||||
>
|
||||
{t('common.modelProvider.modelsNum', { num: models.length })}
|
||||
<RiArrowRightSLine className='mr-0.5 w-4 h-4 rotate-90' />
|
||||
<RiArrowRightSLine className='mr-0.5 h-4 w-4 rotate-90' />
|
||||
</span>
|
||||
</span>
|
||||
{/* {
|
||||
|
|
@ -74,7 +74,7 @@ const ModelList: FC<ModelListProps> = ({
|
|||
} */}
|
||||
{
|
||||
isConfigurable && isCurrentWorkspaceManager && (
|
||||
<div className='grow flex justify-end'>
|
||||
<div className='flex grow justify-end'>
|
||||
<AddModelButton onClick={() => onConfig()} />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -152,9 +152,9 @@ const ModelLoadBalancingConfigs = ({
|
|||
)}
|
||||
onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
|
||||
>
|
||||
<div className='flex items-center px-[15px] py-3 gap-2 select-none'>
|
||||
<div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 text-util-colors-blue-blue-600 bg-util-colors-indigo-indigo-50 border border-util-colors-indigo-indigo-100 rounded-lg'>
|
||||
<Balance className='w-4 h-4' />
|
||||
<div className='flex select-none items-center gap-2 px-[15px] py-3'>
|
||||
<div className='flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-util-colors-indigo-indigo-100 bg-util-colors-indigo-indigo-50 text-util-colors-blue-blue-600'>
|
||||
<Balance className='h-4 w-4' />
|
||||
</div>
|
||||
<div className='grow'>
|
||||
<div className='flex items-center gap-1 text-sm text-text-primary'>
|
||||
|
|
@ -184,9 +184,9 @@ const ModelLoadBalancingConfigs = ({
|
|||
{draftConfig.configs.map((config, index) => {
|
||||
const isProviderManaged = config.name === '__inherit__'
|
||||
return (
|
||||
<div key={config.id || index} className='group flex items-center px-3 h-10 bg-components-panel-on-panel-item-bg border border-components-panel-border rounded-lg shadow-xs'>
|
||||
<div className='grow flex items-center'>
|
||||
<div className='flex items-center justify-center mr-2 w-3 h-3'>
|
||||
<div key={config.id || index} className='group flex h-10 items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3 shadow-xs'>
|
||||
<div className='flex grow items-center'>
|
||||
<div className='mr-2 flex h-3 w-3 items-center justify-center'>
|
||||
{(config.in_cooldown && Boolean(config.ttl))
|
||||
? (
|
||||
<CooldownTimer secondsRemaining={config.ttl} onFinish={() => clearCountdown(index)} />
|
||||
|
|
@ -197,11 +197,11 @@ const ModelLoadBalancingConfigs = ({
|
|||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<div className='text-[13px] mr-1'>
|
||||
<div className='mr-1 text-[13px]'>
|
||||
{isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
|
||||
</div>
|
||||
{isProviderManaged && (
|
||||
<span className='px-1 text-2xs uppercase text-text-tertiary border border-divider-regular rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
|
||||
<span className='rounded-[5px] border border-divider-regular px-1 text-2xs uppercase text-text-tertiary'>{t('common.modelProvider.providerManaged')}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className='flex items-center gap-1'>
|
||||
|
|
@ -209,16 +209,16 @@ const ModelLoadBalancingConfigs = ({
|
|||
<>
|
||||
<div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
|
||||
<span
|
||||
className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
|
||||
className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover'
|
||||
onClick={() => toggleEntryModal(index, config)}
|
||||
>
|
||||
<Edit02 className='w-4 h-4' />
|
||||
<Edit02 className='h-4 w-4' />
|
||||
</span>
|
||||
<span
|
||||
className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
|
||||
className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover'
|
||||
onClick={() => updateConfigEntry(index, () => undefined)}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4' />
|
||||
<RiDeleteBinLine className='h-4 w-4' />
|
||||
</span>
|
||||
<span className='mr-2 h-3 border-r border-r-divider-subtle' />
|
||||
</div>
|
||||
|
|
@ -236,19 +236,19 @@ const ModelLoadBalancingConfigs = ({
|
|||
})}
|
||||
|
||||
<div
|
||||
className='flex items-center px-3 mt-1 h-8 text-[13px] font-medium text-primary-600'
|
||||
className='mt-1 flex h-8 items-center px-3 text-[13px] font-medium text-primary-600'
|
||||
onClick={() => toggleEntryModal()}
|
||||
>
|
||||
<div className='flex items-center cursor-pointer'>
|
||||
<Plus02 className='mr-2 w-3 h-3' />{t('common.modelProvider.addConfig')}
|
||||
<div className='flex cursor-pointer items-center'>
|
||||
<Plus02 className='mr-2 h-3 w-3' />{t('common.modelProvider.addConfig')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
draftConfig.enabled && draftConfig.configs.length < 2 && (
|
||||
<div className='flex items-center px-6 h-[34px] text-xs text-text-secondary bg-components-panel-bg border-t border-t-divider-subtle'>
|
||||
<AlertTriangle className='mr-1 w-3 h-3 text-[#f79009]' />
|
||||
<div className='flex h-[34px] items-center border-t border-t-divider-subtle bg-components-panel-bg px-6 text-xs text-text-secondary'>
|
||||
<AlertTriangle className='mr-1 h-3 w-3 text-[#f79009]' />
|
||||
{t('common.modelProvider.loadBalancingLeastKeyWarning')}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -257,7 +257,7 @@ const ModelLoadBalancingConfigs = ({
|
|||
|
||||
{!modelLoadBalancingEnabled && !IS_CE_EDITION && (
|
||||
<GridMask canvasClassName='!rounded-xl'>
|
||||
<div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-components-panel-border rounded-xl shadow-md'>
|
||||
<div className='mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md'>
|
||||
<div
|
||||
className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -107,19 +107,19 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
|
|||
<Modal
|
||||
isShow={Boolean(model) && open}
|
||||
onClose={onClose}
|
||||
className='max-w-none pt-8 px-8 w-[640px]'
|
||||
className='w-[640px] max-w-none px-8 pt-8'
|
||||
title={
|
||||
<div className='pb-3 font-semibold'>
|
||||
<div className='h-[30px]'>{t('common.modelProvider.configLoadBalancing')}</div>
|
||||
{Boolean(model) && (
|
||||
<div className='flex items-center h-5'>
|
||||
<div className='flex h-5 items-center'>
|
||||
<ModelIcon
|
||||
className='shrink-0 mr-2'
|
||||
className='mr-2 shrink-0'
|
||||
provider={provider}
|
||||
modelName={model!.model}
|
||||
/>
|
||||
<ModelName
|
||||
className='grow system-md-regular text-text-secondary'
|
||||
className='system-md-regular grow text-text-secondary'
|
||||
modelItem={model!}
|
||||
showModelType
|
||||
showMode
|
||||
|
|
@ -142,8 +142,8 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
|
|||
)}
|
||||
onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
|
||||
>
|
||||
<div className='flex items-center px-[15px] py-3 gap-2 select-none'>
|
||||
<div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-components-card-bg border border-components-card-border rounded-lg'>
|
||||
<div className='flex select-none items-center gap-2 px-[15px] py-3'>
|
||||
<div className='flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg'>
|
||||
{Boolean(model) && (
|
||||
<ModelIcon className='shrink-0' provider={provider} modelName={model!.model} />
|
||||
)}
|
||||
|
|
@ -168,7 +168,7 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
|
|||
}} />
|
||||
</div>
|
||||
|
||||
<div className='flex items-center justify-end gap-2 mt-6'>
|
||||
<div className='mt-6 flex items-center justify-end gap-2'>
|
||||
<Button onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Fragment } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { Popover, Transition } from '@headlessui/react'
|
||||
import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiCheckLine,
|
||||
|
|
@ -32,42 +32,42 @@ const Selector: FC<SelectorProps> = ({
|
|||
|
||||
return (
|
||||
<Popover className='relative'>
|
||||
<Popover.Button>
|
||||
<PopoverButton as='div'>
|
||||
{
|
||||
({ open }) => (
|
||||
<Button className={cn(
|
||||
'px-0 w-6 h-6 rounded-md',
|
||||
'h-6 w-6 rounded-md px-0',
|
||||
open && 'bg-components-button-secondary-bg-hover',
|
||||
)}>
|
||||
<RiMoreFill className='w-3 h-3' />
|
||||
<RiMoreFill className='h-3 w-3' />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
</Popover.Button>
|
||||
</PopoverButton>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
leave='transition ease-in duration-100'
|
||||
leaveFrom='opacity-100'
|
||||
leaveTo='opacity-0'
|
||||
>
|
||||
<Popover.Panel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
|
||||
<PopoverPanel className='absolute right-0 top-7 z-10 w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
|
||||
<div className='p-1'>
|
||||
<div className='px-3 pt-2 pb-1 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
|
||||
<div className='px-3 pb-1 pt-2 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
|
||||
{
|
||||
options.map(option => (
|
||||
<Popover.Button as={Fragment} key={option.key}>
|
||||
<PopoverButton as={Fragment} key={option.key}>
|
||||
<div
|
||||
className='flex items-center justify-between px-3 h-9 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
|
||||
className='flex h-9 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover'
|
||||
onClick={() => onSelect(option.key)}
|
||||
>
|
||||
<div className='grow'>{option.text}</div>
|
||||
{value === option.key && <RiCheckLine className='w-4 h-4 text-text-accent' />}
|
||||
{value === option.key && <RiCheckLine className='h-4 w-4 text-text-accent' />}
|
||||
</div>
|
||||
</Popover.Button>
|
||||
</PopoverButton>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</PopoverPanel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ const PriorityUseTip = () => {
|
|||
<Tooltip
|
||||
popupContent={t('common.modelProvider.priorityUsing') || ''}
|
||||
>
|
||||
<div className='absolute -right-[5px] -top-[5px] bg-util-colors-indigo-indigo-50 rounded-[5px] border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer'>
|
||||
<ChevronDownDouble className='rotate-180 w-3 h-3 text-util-colors-indigo-indigo-600' />
|
||||
<div className='absolute -right-[5px] -top-[5px] cursor-pointer rounded-[5px] border-[0.5px] border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 shadow-xs'>
|
||||
<ChevronDownDouble className='h-3 w-3 rotate-180 text-util-colors-indigo-indigo-600' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
|
|||
const openaiOrAnthropic = MODEL_PROVIDER_QUOTA_GET_PAID.includes(provider.provider)
|
||||
|
||||
return (
|
||||
<div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border shadow-xs'>
|
||||
<div className='flex items-center mb-2 h-4 system-xs-medium-uppercase text-text-tertiary'>
|
||||
<div className='group relative min-w-[112px] shrink-0 rounded-lg border-[0.5px] border-components-panel-border bg-white/[0.18] px-3 py-2 shadow-xs'>
|
||||
<div className='system-xs-medium-uppercase mb-2 flex h-4 items-center text-text-tertiary'>
|
||||
{t('common.modelProvider.quota')}
|
||||
<Tooltip popupContent={
|
||||
openaiOrAnthropic
|
||||
|
|
@ -40,8 +40,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
|
|||
</div>
|
||||
{
|
||||
currentQuota && (
|
||||
<div className='flex items-center h-4 text-xs text-text-tertiary'>
|
||||
<span className='mr-0.5 system-md-semibold-uppercase text-text-secondary'>{formatNumber(Math.max((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0), 0))}</span>
|
||||
<div className='flex h-4 items-center text-xs text-text-tertiary'>
|
||||
<span className='system-md-semibold-uppercase mr-0.5 text-text-secondary'>{formatNumber(Math.max((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0), 0))}</span>
|
||||
{
|
||||
currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens'
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue