ngskcloud
/
gcgj-dify-1.7.0
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dark mode of model provider

Browse Source
pull/12372/head
JzoNg 1 year ago
parent e792e91777
commit 4f8cdabef0
14 changed files with 74 additions and 118 deletions
Show Stats Download Patch File Download Diff File

8
web/app/components/base/grid-mask/index.tsx
Unescape Escape View File

@ -36,8 +36,8 @@ const GridMask: FC<GridMaskProps> = ({
const drawRecord = useCallback(() => { const drawRecord = useCallback(() => {
const canvas = canvasRef.current! const canvas = canvasRef.current!
const ctx = ctxRef.current! const ctx = ctxRef.current!
const rowNumber = parseInt(`${canvas.width / 24}`) const rowNumber = Number.parseInt(`${canvas.width / 24}`)
const colNumber = parseInt(`${canvas.height / 24}`) const colNumber = Number.parseInt(`${canvas.height / 24}`)
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath() ctx.beginPath()
@ -82,9 +82,9 @@ const GridMask: FC<GridMaskProps> = ({
}, []) }, [])
return ( return (
<div className={`relative bg-white ${wrapperClassName}`}> <div className={`relative bg-components-panel-bg ${wrapperClassName}`}>
<canvas ref={canvasRef} className={`absolute inset-0 w-full h-full ${canvasClassName}`} /> <canvas ref={canvasRef} className={`absolute inset-0 w-full h-full ${canvasClassName}`} />
<div className={`absolute w-full h-full z-[1] bg-gradient-to-b from-white/80 to-white rounded-lg ${gradientClassName}`} /> <div className={`absolute w-full h-full z-[1] bg-gradient-to-b from-background-body to-background-gradient-mask-transparent rounded-lg ${gradientClassName}`} />
<div className='relative z-[2]'>{children}</div> <div className='relative z-[2]'>{children}</div>
</div> </div>
) )

11
web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
Unescape Escape View File

@ -20,6 +20,7 @@ import Radio from '@/app/components/base/radio'
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal' import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector' import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector' import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
import RadioE from '@/app/components/base/radio/ui'
type FormProps = { type FormProps = {
className?: string className?: string
@ -177,17 +178,15 @@ const Form: FC<FormProps> = ({
}).map(option => ( }).map(option => (
<div <div
className={` className={`
flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer flex items-center gap-2 px-3 py-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer
${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'} ${value[variable] === option.value && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border shadow-sm'}
${disabled && '!cursor-not-allowed opacity-60'} ${disabled && '!cursor-not-allowed opacity-60'}
`} `}
onClick={() => handleFormChange(variable, option.value)} onClick={() => handleFormChange(variable, option.value)}
key={`${variable}-${option.value}`} key={`${variable}-${option.value}`}
> >
<div className={` <RadioE isChecked={value[variable] === option.value} />
flex justify-center items-center mr-2 w-4 h-4 border border-gray-300 rounded-full
${value[variable] === option.value && 'border-[5px] border-primary-600'}
`} />
<div className='system-sm-regular text-text-secondary'>{option.label[language] || option.label.en_US}</div> <div className='system-sm-regular text-text-secondary'>{option.label[language] || option.label.en_US}</div>
</div> </div>
)) ))

8
web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
Unescape Escape View File

@ -41,11 +41,11 @@ const Input: FC<InputProps> = ({
<input <input
tabIndex={0} tabIndex={0}
className={` className={`
block px-3 w-full h-8 bg-components-input-bg-normal text-sm rounded-lg border border-transparent block px-3 w-full h-8 bg-components-input-bg-normal text-sm text-components-input-text-filled rounded-lg border border-transparent
appearance-none outline-none caret-primary-600 appearance-none outline-none caret-primary-600
hover:border-[rgba(0,0,0,0.08)] hover:bg-state-hover-alt hover:border-components-input-border-hover hover:bg-components-input-bg-hover
focus:bg-white focus:border-gray-300 focus:shadow-xs focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs
placeholder:text-sm placeholder:text-gray-400 placeholder:text-sm placeholder:text-text-tertiary
${validated && 'pr-[30px]'} ${validated && 'pr-[30px]'}
${className} ${className}
`} `}

21
web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
Unescape Escape View File

@ -280,10 +280,10 @@ const ModelModal: FC<ModelModalProps> = ({
<PortalToFollowElem open> <PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'> <PortalToFollowElemContent className='w-full h-full z-[60]'>
<div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'> <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
<div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'> <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
<div className='px-8 pt-8'> <div className='px-8 pt-8'>
<div className='flex justify-between items-center mb-2'> <div className='flex justify-between items-center mb-2'>
<div className='text-xl font-semibold text-gray-900'>{renderTitlePrefix()}</div> <div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
<ProviderIcon provider={provider} /> <ProviderIcon provider={provider} />
</div> </div>
@ -297,7 +297,7 @@ const ModelModal: FC<ModelModalProps> = ({
isEditMode={isEditMode} isEditMode={isEditMode}
/> />
<div className='mt-1 mb-4 border-t-[0.5px] border-t-gray-100' /> <div className='mt-1 mb-4 border-t-[0.5px] border-t-divider-regular' />
<ModelLoadBalancingConfigs withSwitch {...{ <ModelLoadBalancingConfigs withSwitch {...{
draftConfig, draftConfig,
setDraftConfig, setDraftConfig,
@ -306,7 +306,7 @@ const ModelModal: FC<ModelModalProps> = ({
configurationMethod: configurateMethod, configurationMethod: configurateMethod,
}} /> }} />
<div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-white'> <div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-components-panel-bg'>
{ {
(provider.help && (provider.help.title || provider.help.url)) (provider.help && (provider.help.title || provider.help.url))
? ( ? (
@ -326,8 +326,9 @@ const ModelModal: FC<ModelModalProps> = ({
{ {
isEditMode && ( isEditMode && (
<Button <Button
variant='warning'
size='large' size='large'
className='mr-2 text-[#D92D20]' className='mr-2'
onClick={() => setShowConfirm(true)} onClick={() => setShowConfirm(true)}
> >
{t('common.operation.remove')} {t('common.operation.remove')}
@ -357,21 +358,21 @@ const ModelModal: FC<ModelModalProps> = ({
</div> </div>
</div> </div>
</div> </div>
<div className='border-t-[0.5px] border-t-black/5'> <div className='border-t-[0.5px] border-t-divider-regular'>
{ {
(validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message) (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
? ( ? (
<div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'> <div className='flex px-[10px] py-3 bg-background-section-burn text-xs text-[#D92D20]'>
<RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' /> <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
{validatedStatusState.message} {validatedStatusState.message}
</div> </div>
) )
: ( : (
<div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'> <div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
<Lock01 className='mr-1 w-3 h-3 text-gray-500' /> <Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
{t('common.modelProvider.encrypted.front')} {t('common.modelProvider.encrypted.front')}
<a <a
className='text-primary-600 mx-1' className='text-text-accent mx-1'
target='_blank' rel='noopener noreferrer' target='_blank' rel='noopener noreferrer'
href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html' href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
> >

6
web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
Unescape Escape View File

@ -1,6 +1,7 @@
import type { FC } from 'react' import type { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general' import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
import cn from '@/utils/classnames'
type AddModelButtonProps = { type AddModelButtonProps = {
className?: string className?: string
@ -14,10 +15,7 @@ const AddModelButton: FC<AddModelButtonProps> = ({
return ( return (
<span <span
className={` 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)}
shrink-0 flex items-center px-1.5 h-6 text-xs font-medium text-gray-500 cursor-pointer
hover:bg-primary-50 hover:text-primary-600 rounded-md ${className}
`}
onClick={onClick} onClick={onClick}
> >
<PlusCircle className='mr-1 w-3 h-3' /> <PlusCircle className='mr-1 w-3 h-3' />

4
web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
Unescape Escape View File

@ -66,8 +66,8 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
<> <>
{ {
provider.provider_credential_schema && ( provider.provider_credential_schema && (
<div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'> <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 text-xs font-medium text-gray-500'> <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 system-xs-medium-uppercase text-text-tertiary'>
API-KEY API-KEY
<Indicator color={isCustomConfigured ? 'green' : 'red'} /> <Indicator color={isCustomConfigured ? 'green' : 'red'} />
</div> </div>

6
web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
Unescape Escape View File

@ -122,7 +122,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
</div> </div>
{ {
collapsed && ( collapsed && (
<div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-black/5 bg-white/30 text-xs font-medium text-gray-500'> <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'>
{(showQuota || !notConfigured) && ( {(showQuota || !notConfigured) && (
<> <>
<div className='group-hover:hidden flex items-center pl-1 pr-1.5 h-6 leading-6'> <div className='group-hover:hidden flex items-center pl-1 pr-1.5 h-6 leading-6'>
@ -134,7 +134,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
{!loading && <RiArrowRightSLine className='w-4 h-4' />} {!loading && <RiArrowRightSLine className='w-4 h-4' />}
</div> </div>
<div <div
className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-white cursor-pointer' 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'
onClick={handleOpenModelList} onClick={handleOpenModelList}
> >
{ {
@ -154,7 +154,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
{!showQuota && notConfigured && ( {!showQuota && notConfigured && (
<div className='flex items-center pl-1 pr-1.5 h-6'> <div className='flex items-center pl-1 pr-1.5 h-6'>
<RiInformation2Fill className='mr-1 w-4 h-4 text-text-accent' /> <RiInformation2Fill className='mr-1 w-4 h-4 text-text-accent' />
<span>{t('common.modelProvider.configureTip')}</span> <span className='text-text-secondary system-xs-medium'>{t('common.modelProvider.configureTip')}</span>
</div> </div>
)} )}
{ {

16
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
Unescape Escape View File

@ -49,7 +49,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
key={model.model} key={model.model}
className={classNames( className={classNames(
'group flex items-center pl-2 pr-2.5 h-8 rounded-lg', 'group flex items-center pl-2 pr-2.5 h-8 rounded-lg',
isConfigurable && 'hover:bg-gray-50', isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover',
model.deprecated && 'opacity-60', model.deprecated && 'opacity-60',
)} )}
> >
@ -59,14 +59,14 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
modelName={model.model} modelName={model.model}
/> />
<ModelName <ModelName
className='grow text-sm font-normal text-gray-900' className='grow system-md-regular text-text-secondary'
modelItem={model} modelItem={model}
showModelType showModelType
showMode showMode
showContextSize showContextSize
> >
{modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && ( {modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && (
<ModelBadge className='ml-1 uppercase text-indigo-600 border-indigo-300'> <ModelBadge className='ml-1 uppercase text-text-accent-secondary border-text-accent-secondary'>
<Balance className='w-3 h-3 mr-0.5' /> <Balance className='w-3 h-3 mr-0.5' />
{t('common.modelProvider.loadBalancingHeadline')} {t('common.modelProvider.loadBalancingHeadline')}
</ModelBadge> </ModelBadge>
@ -77,20 +77,22 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
model.fetch_from === ConfigurationMethodEnum.customizableModel model.fetch_from === ConfigurationMethodEnum.customizableModel
? (isCurrentWorkspaceManager && ( ? (isCurrentWorkspaceManager && (
<Button <Button
className='hidden group-hover:flex h-7' size='small'
className='hidden group-hover:flex'
onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })} onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
> >
<Settings01 className='mr-[5px] w-3.5 h-3.5' /> <Settings01 className='mr-1 w-3.5 h-3.5' />
{t('common.modelProvider.config')} {t('common.modelProvider.config')}
</Button> </Button>
)) ))
: (isCurrentWorkspaceManager && (modelLoadBalancingEnabled || plan.type === Plan.sandbox) && !model.deprecated && [ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status)) : (isCurrentWorkspaceManager && (modelLoadBalancingEnabled || plan.type === Plan.sandbox) && !model.deprecated && [ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status))
? ( ? (
<Button <Button
className='opacity-0 group-hover:opacity-100 h-[28px] transition-opacity' size='small'
className='opacity-0 group-hover:opacity-100 transition-opacity'
onClick={() => onModifyLoadBalancing?.(model)} onClick={() => onModifyLoadBalancing?.(model)}
> >
<Balance className='mr-1 w-[14px] h-[14px]' /> <Balance className='mr-1 w-3.5 h-3.5' />
{t('common.modelProvider.configLoadBalancing')} {t('common.modelProvider.configLoadBalancing')}
</Button> </Button>
) )

24
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
Unescape Escape View File

@ -145,19 +145,19 @@ const ModelLoadBalancingConfigs = ({
<> <>
<div <div
className={classNames( className={classNames(
'min-h-16 bg-gray-50 border rounded-xl transition-colors', 'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
(withSwitch || !draftConfig.enabled) ? 'border-gray-200' : 'border-primary-400', (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600',
(withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer', (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer',
className, className,
)} )}
onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined} onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
> >
<div className='flex items-center px-[15px] py-3 gap-2 select-none'> <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-primary-600 bg-indigo-50 border border-indigo-100 rounded-lg'> <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' /> <Balance className='w-4 h-4' />
</div> </div>
<div className='grow'> <div className='grow'>
<div className='flex items-center gap-1 text-sm'> <div className='flex items-center gap-1 text-sm text-text-primary'>
{t('common.modelProvider.loadBalancing')} {t('common.modelProvider.loadBalancing')}
<Tooltip <Tooltip
popupContent={t('common.modelProvider.loadBalancingInfo')} popupContent={t('common.modelProvider.loadBalancingInfo')}
@ -165,7 +165,7 @@ const ModelLoadBalancingConfigs = ({
triggerClassName='w-3 h-3' triggerClassName='w-3 h-3'
/> />
</div> </div>
<div className='text-xs text-gray-500'>{t('common.modelProvider.loadBalancingDescription')}</div> <div className='text-xs text-text-tertiary'>{t('common.modelProvider.loadBalancingDescription')}</div>
</div> </div>
{ {
withSwitch && ( withSwitch && (
@ -184,7 +184,7 @@ const ModelLoadBalancingConfigs = ({
{draftConfig.configs.map((config, index) => { {draftConfig.configs.map((config, index) => {
const isProviderManaged = config.name === '__inherit__' const isProviderManaged = config.name === '__inherit__'
return ( return (
<div key={config.id || index} className='group flex items-center px-3 h-10 bg-white border border-gray-200 rounded-lg shadow-xs'> <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='grow flex items-center'>
<div className='flex items-center justify-center mr-2 w-3 h-3'> <div className='flex items-center justify-center mr-2 w-3 h-3'>
{(config.in_cooldown && Boolean(config.ttl)) {(config.in_cooldown && Boolean(config.ttl))
@ -201,7 +201,7 @@ const ModelLoadBalancingConfigs = ({
{isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name} {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
</div> </div>
{isProviderManaged && ( {isProviderManaged && (
<span className='px-1 text-2xs uppercase text-gray-500 border border-black/8 rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span> <span className='px-1 text-2xs uppercase text-text-tertiary border border-divider-regular rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
)} )}
</div> </div>
<div className='flex items-center gap-1'> <div className='flex items-center gap-1'>
@ -209,18 +209,18 @@ const ModelLoadBalancingConfigs = ({
<> <>
<div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'> <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
<span <span
className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5' 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'
onClick={() => toggleEntryModal(index, config)} onClick={() => toggleEntryModal(index, config)}
> >
<Edit02 className='w-4 h-4' /> <Edit02 className='w-4 h-4' />
</span> </span>
<span <span
className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5' 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'
onClick={() => updateConfigEntry(index, () => undefined)} onClick={() => updateConfigEntry(index, () => undefined)}
> >
<RiDeleteBinLine className='w-4 h-4' /> <RiDeleteBinLine className='w-4 h-4' />
</span> </span>
<span className='mr-2 h-3 border-r border-r-gray-100' /> <span className='mr-2 h-3 border-r border-r-divider-subtle' />
</div> </div>
</> </>
)} )}
@ -247,7 +247,7 @@ const ModelLoadBalancingConfigs = ({
)} )}
{ {
draftConfig.enabled && draftConfig.configs.length < 2 && ( draftConfig.enabled && draftConfig.configs.length < 2 && (
<div className='flex items-center px-6 h-[34px] text-xs text-gray-700 bg-black/2 border-t border-t-black/5'> <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]' /> <AlertTriangle className='mr-1 w-3 h-3 text-[#f79009]' />
{t('common.modelProvider.loadBalancingLeastKeyWarning')} {t('common.modelProvider.loadBalancingLeastKeyWarning')}
</div> </div>
@ -257,7 +257,7 @@ const ModelLoadBalancingConfigs = ({
{!modelLoadBalancingEnabled && !IS_CE_EDITION && ( {!modelLoadBalancingEnabled && !IS_CE_EDITION && (
<GridMask canvasClassName='!rounded-xl'> <GridMask canvasClassName='!rounded-xl'>
<div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-gray-200 rounded-xl shadow-md'> <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 <div
className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)} className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)}
> >

12
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
Unescape Escape View File

@ -119,7 +119,7 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
modelName={model!.model} modelName={model!.model}
/> />
<ModelName <ModelName
className='grow text-sm font-normal text-gray-900' className='grow system-md-regular text-text-secondary'
modelItem={model!} modelItem={model!}
showModelType showModelType
showMode showMode
@ -137,20 +137,20 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
<div className='py-2'> <div className='py-2'>
<div <div
className={classNames( className={classNames(
'min-h-16 bg-gray-50 border rounded-xl transition-colors', 'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
draftConfig.enabled ? 'border-gray-200 cursor-pointer' : 'border-primary-400 cursor-default', draftConfig.enabled ? 'border-components-panel-border cursor-pointer' : 'border-util-colors-blue-blue-600 cursor-default',
)} )}
onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined} onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
> >
<div className='flex items-center px-[15px] py-3 gap-2 select-none'> <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-white border rounded-lg'> <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'>
{Boolean(model) && ( {Boolean(model) && (
<ModelIcon className='shrink-0' provider={provider} modelName={model!.model} /> <ModelIcon className='shrink-0' provider={provider} modelName={model!.model} />
)} )}
</div> </div>
<div className='grow'> <div className='grow'>
<div className='text-sm'>{t('common.modelProvider.providerManaged')}</div> <div className='text-sm text-text-secondary'>{t('common.modelProvider.providerManaged')}</div>
<div className='text-xs text-gray-500'>{t('common.modelProvider.providerManagedDescription')}</div> <div className='text-xs text-text-tertiary'>{t('common.modelProvider.providerManagedDescription')}</div>
</div> </div>
</div> </div>
</div> </div>

19
web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
Unescape Escape View File

@ -8,6 +8,7 @@ import {
} from '@remixicon/react' } from '@remixicon/react'
import { PreferredProviderTypeEnum } from '../declarations' import { PreferredProviderTypeEnum } from '../declarations'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import cn from '@/utils/classnames'
type SelectorProps = { type SelectorProps = {
value?: string value?: string
@ -34,11 +35,11 @@ const Selector: FC<SelectorProps> = ({
<Popover.Button> <Popover.Button>
{ {
({ open }) => ( ({ open }) => (
<Button className={` <Button className={cn(
px-0 w-6 h-6 bg-white rounded-md 'px-0 w-6 h-6 rounded-md',
${open && '!bg-gray-100'} open && 'bg-components-button-secondary-bg-hover',
`}> )}>
<RiMoreFill className='w-3 h-3 text-gray-700' /> <RiMoreFill className='w-3 h-3' />
</Button> </Button>
) )
} }
@ -49,18 +50,18 @@ const Selector: FC<SelectorProps> = ({
leaveFrom='opacity-100' leaveFrom='opacity-100'
leaveTo='opacity-0' leaveTo='opacity-0'
> >
<Popover.Panel className='absolute top-7 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'> <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'>
<div className='p-1'> <div className='p-1'>
<div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div> <div className='px-3 pt-2 pb-1 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
{ {
options.map(option => ( options.map(option => (
<Popover.Button as={Fragment} key={option.key}> <Popover.Button as={Fragment} key={option.key}>
<div <div
className='flex items-center justify-between px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' 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'
onClick={() => onSelect(option.key)} onClick={() => onSelect(option.key)}
> >
<div className='grow'>{option.text}</div> <div className='grow'>{option.text}</div>
{value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />} {value === option.key && <RiCheckLine className='w-4 h-4 text-text-accent' />}
</div> </div>
</Popover.Button> </Popover.Button>
)) ))

4
web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx
Unescape Escape View File

@ -9,8 +9,8 @@ const PriorityUseTip = () => {
<Tooltip <Tooltip
popupContent={t('common.modelProvider.priorityUsing') || ''} popupContent={t('common.modelProvider.priorityUsing') || ''}
> >
<div className='absolute -right-[5px] -top-[5px] bg-indigo-50 rounded-[5px] border-[0.5px] border-indigo-100 cursor-pointer'> <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-indigo-600' /> <ChevronDownDouble className='rotate-180 w-3 h-3 text-util-colors-indigo-indigo-600' />
</div> </div>
</Tooltip> </Tooltip>
) )

8
web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
Unescape Escape View File

@ -28,8 +28,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
const openaiOrAnthropic = MODEL_PROVIDER_QUOTA_GET_PAID.includes(provider.provider) const openaiOrAnthropic = MODEL_PROVIDER_QUOTA_GET_PAID.includes(provider.provider)
return ( return (
<div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'> <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 text-xs font-medium text-gray-500'> <div className='flex items-center mb-2 h-4 system-xs-medium-uppercase text-text-tertiary'>
{t('common.modelProvider.quota')} {t('common.modelProvider.quota')}
<Tooltip popupContent={ <Tooltip popupContent={
openaiOrAnthropic openaiOrAnthropic
@ -40,8 +40,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
</div> </div>
{ {
currentQuota && ( currentQuota && (
<div className='flex items-center h-4 text-xs text-gray-500'> <div className='flex items-center h-4 text-xs text-text-tertiary'>
<span className='mr-0.5 text-sm font-semibold text-gray-700'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span> <span className='mr-0.5 system-md-semibold-uppercase text-text-secondary'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
{ {
currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens' currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens'
} }

45
web/app/components/header/account-setting/model-provider-page/provider-added-card/tab.tsx
Unescape Escape View File

@ -1,45 +0,0 @@
import type { FC } from 'react'
type TabProps = {
active: string
onSelect: (active: string) => void
}
const Tab: FC<TabProps> = ({
active,
onSelect,
}) => {
const tabs = [
{
key: 'all',
text: 'All',
},
{
key: 'added',
text: 'Added',
},
{
key: 'build-in',
text: 'Build-in',
},
]
return (
<div className='flex items-center'>
{
tabs.map(tab => (
<div
key={tab.key}
className={`
flex items-center mr-1 px-[5px] h-[18px] rounded-md text-xs cursor-pointer
${active === tab.key ? 'bg-gray-200 font-medium text-gray-900' : 'text-gray-500 font-normal'}
`}
onClick={() => onSelect(tab.key)}
>
{tab.text}
</div>
))
}
</div>
)
}
export default Tab
Write Preview
Loading…
Cancel
Save