hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-25 02:33:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
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
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/app/components/header/account-setting/model-provider-page/index.tsx
View File

@@ -109,17 +109,17 @@ const ModelProviderPage = ({ searchText }: Props) => {
}, [])
return (
<div className='relative pt-1 -mt-2'>
<div className={cn('flex items-center mb-2')}>
<div className='grow text-text-primary system-md-semibold'>{t('common.modelProvider.models')}</div>
<div className='relative -mt-2 pt-1'>
<div className={cn('mb-2 flex items-center')}>
<div className='system-md-semibold grow text-text-primary'>{t('common.modelProvider.models')}</div>
<div className={cn(
'shrink-0 relative flex items-center justify-end gap-2 p-px rounded-lg border border-transparent',
defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
'relative flex shrink-0 items-center justify-end gap-2 rounded-lg border border-transparent p-px',
defaultModelNotConfigured && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
)}>
{defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
{defaultModelNotConfigured && <div className='absolute bottom-0 left-0 right-0 top-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
{defaultModelNotConfigured && (
<div className='flex items-center gap-1 text-text-primary system-xs-medium'>
<RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
<div className='system-xs-medium flex items-center gap-1 text-text-primary'>
<RiAlertFill className='h-4 w-4 text-text-warning-secondary' />
{t('common.modelProvider.notConfigured')}
</div>
)}
@@ -134,12 +134,12 @@ const ModelProviderPage = ({ searchText }: Props) => {
</div>
</div>
{!filteredConfiguredProviders?.length && (
<div className='mb-2 p-4 rounded-[10px] bg-workflow-process-bg'>
<div className='w-10 h-10 flex items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>
<RiBrainLine className='w-5 h-5 text-text-primary' />
<div className='mb-2 rounded-[10px] bg-workflow-process-bg p-4'>
<div className='flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>
<RiBrainLine className='h-5 w-5 text-text-primary' />
</div>
<div className='mt-2 text-text-secondary system-sm-medium'>{t('common.modelProvider.emptyProviderTitle')}</div>
<div className='mt-1 text-text-tertiary system-xs-regular'>{t('common.modelProvider.emptyProviderTip')}</div>
<div className='system-sm-medium mt-2 text-text-secondary'>{t('common.modelProvider.emptyProviderTitle')}</div>
<div className='system-xs-regular mt-1 text-text-tertiary'>{t('common.modelProvider.emptyProviderTip')}</div>
</div>
)}
{!!filteredConfiguredProviders?.length && (
@@ -155,7 +155,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
)}
{!!filteredNotConfiguredProviders?.length && (
<>
<div className='flex items-center mb-2 pt-2 text-text-primary system-md-semibold'>{t('common.modelProvider.toBeConfigured')}</div>
<div className='system-md-semibold mb-2 flex items-center pt-2 text-text-primary'>{t('common.modelProvider.toBeConfigured')}</div>
<div className='relative'>
{filteredNotConfiguredProviders?.map(provider => (
<ProviderAddedCard
@@ -171,15 +171,15 @@ const ModelProviderPage = ({ searchText }: Props) => {
<div className='mb-2'>
<Divider className='!mt-4 h-px' />
<div className='flex items-center justify-between'>
<div className='flex items-center gap-1 text-text-primary system-md-semibold cursor-pointer' onClick={() => setCollapse(!collapse)}>
<RiArrowDownSLine className={cn('w-4 h-4', collapse && '-rotate-90')} />
<div className='system-md-semibold flex cursor-pointer items-center gap-1 text-text-primary' onClick={() => setCollapse(!collapse)}>
<RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
{t('common.modelProvider.installProvider')}
</div>
<div className='flex items-center mb-2 pt-2'>
<span className='pr-1 text-text-tertiary system-sm-regular'>{t('common.modelProvider.discoverMore')}</span>
<Link target="_blank" href={`${MARKETPLACE_URL_PREFIX}`} className='inline-flex items-center system-sm-medium text-text-accent'>
<div className='mb-2 flex items-center pt-2'>
<span className='system-sm-regular pr-1 text-text-tertiary'>{t('common.modelProvider.discoverMore')}</span>
<Link target="_blank" href={`${MARKETPLACE_URL_PREFIX}`} className='system-sm-medium inline-flex items-center text-text-accent'>
{t('plugin.marketplace.difyMarketplace')}
<RiArrowRightUpLine className='w-4 h-4' />
<RiArrowRightUpLine className='h-4 w-4' />
</Link>
</div>
</div>

12
web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
View File

@@ -23,13 +23,13 @@ const ModelIcon: FC<ModelIconProps> = ({
}) => {
const language = useLanguage()
if (provider?.provider.includes('openai') && modelName?.includes('gpt-4o'))
return <div className='flex items-center justify-center'><OpenaiBlue className={cn('w-5 h-5', className)} /></div>
return <div className='flex items-center justify-center'><OpenaiBlue className={cn('h-5 w-5', className)} /></div>
if (provider?.provider.includes('openai') && modelName?.startsWith('gpt-4'))
return <div className='flex items-center justify-center'><OpenaiViolet className={cn('w-5 h-5', className)} /></div>
return <div className='flex items-center justify-center'><OpenaiViolet className={cn('h-5 w-5', className)} /></div>
if (provider?.icon_small) {
return (
<div className={cn('flex items-center justify-center w-5 h-5', isDeprecated && 'opacity-50', className)}>
<div className={cn('flex h-5 w-5 items-center justify-center', isDeprecated && 'opacity-50', className)}>
<img alt='model-icon' src={renderI18nObject(provider.icon_small, language)}/>
</div>
)
@@ -37,11 +37,11 @@ const ModelIcon: FC<ModelIconProps> = ({
return (
<div className={cn(
'flex items-center justify-center rounded-md border-[0.5px] w-5 h-5 border-components-panel-border-subtle bg-background-default-subtle',
'flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
className,
)}>
<div className='flex w-5 h-5 items-center justify-center opacity-35'>
<Group className='text-text-tertiary w-3 h-3' />
<div className='flex h-5 w-5 items-center justify-center opacity-35'>
<Group className='h-3 w-3 text-text-tertiary' />
</div>
</div>
)

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

@@ -153,7 +153,7 @@ function Form<
const disabled = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'system-sm-semibold flex items-center py-2 text-text-secondary')}>
{label[language] || label.en_US}
{required && (
<span className='ml-1 text-red-500'>*</span>
@@ -187,14 +187,14 @@ function Form<
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'system-sm-semibold flex items-center py-2 text-text-secondary')}>
{label[language] || label.en_US}
{required && (
<span className='ml-1 text-red-500'>*</span>
)}
{tooltipContent}
</div>
<div className={`grid grid-cols-${options?.length} gap-3`}>
<div className={cn('grid gap-3', `grid-cols-${options?.length}`)}>
{options.filter((option) => {
if (option.show_on.length)
return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
@@ -203,8 +203,8 @@ function Form<
}).map(option => (
<div
className={`
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-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border shadow-sm'}
flex cursor-pointer items-center gap-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg px-3 py-2
${value[variable] === option.value && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-sm'}
${disabled && '!cursor-not-allowed opacity-60'}
`}
onClick={() => handleFormChange(variable, option.value)}
@@ -232,7 +232,7 @@ function Form<
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'system-sm-semibold flex items-center py-2 text-text-secondary')}>
{label[language] || label.en_US}
{required && (
@@ -269,9 +269,9 @@ function Form<
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className='flex items-center justify-between py-2 system-sm-semibold text-text-secondary'>
<div className='system-sm-semibold flex items-center justify-between py-2 text-text-secondary'>
<div className='flex items-center space-x-2'>
<span className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>{label[language] || label.en_US}</span>
<span className={cn(fieldLabelClassName, 'system-sm-regular flex items-center py-2 text-text-secondary')}>{label[language] || label.en_US}</span>
{required && (
<span className='ml-1 text-red-500'>*</span>
)}
@@ -297,7 +297,7 @@ function Form<
} = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'system-sm-semibold flex items-center py-2 text-text-secondary')}>
{label[language] || label.en_US}
{required && (
<span className='ml-1 text-red-500'>*</span>
@@ -328,7 +328,7 @@ function Form<
} = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'system-sm-semibold flex items-center py-2 text-text-secondary')}>
{label[language] || label.en_US}
{required && (
<span className='ml-1 text-red-500'>*</span>
@@ -388,7 +388,7 @@ function Form<
return (
<div key={variable} className={cn(itemClassName, 'py-3')}>
<div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
<div className={cn(fieldLabelClassName, 'system-sm-semibold flex items-center py-2 text-text-secondary')}>
{label[language] || label.en_US}
{required && (
<span className='ml-1 text-red-500'>*</span>

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

@@ -41,11 +41,11 @@ const Input: FC<InputProps> = ({
<input
tabIndex={0}
className={`
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
hover:border-components-input-border-hover hover:bg-components-input-bg-hover
focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs
block h-8 w-full appearance-none rounded-lg border border-transparent bg-components-input-bg-normal px-3 text-sm
text-components-input-text-filled caret-primary-600 outline-none
placeholder:text-sm placeholder:text-text-tertiary
hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active
focus:bg-components-input-bg-active focus:shadow-xs
${validated && 'pr-[30px]'}
${className}
`}
@@ -61,8 +61,8 @@ const Input: FC<InputProps> = ({
/>
{
validated && (
<div className='absolute top-2.5 right-2.5'>
<CheckCircle className='w-4 h-4 text-[#039855]' />
<div className='absolute right-2.5 top-2.5'>
<CheckCircle className='h-4 w-4 text-[#039855]' />
</div>
)
}

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

@@ -277,11 +277,11 @@ const ModelModal: FC<ModelModalProps> = ({
return (
<PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'>
<PortalToFollowElemContent className='z-[60] h-full w-full'>
<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-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
<div className='mx-2 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-components-panel-bg shadow-xl'>
<div className='px-8 pt-8'>
<div className='flex items-center mb-2'>
<div className='mb-2 flex items-center'>
<div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
</div>
@@ -295,7 +295,7 @@ const ModelModal: FC<ModelModalProps> = ({
isEditMode={isEditMode}
/>
<div className='mt-1 mb-4 border-t-[0.5px] border-t-divider-regular' />
<div className='mb-4 mt-1 border-t-[0.5px] border-t-divider-regular' />
<ModelLoadBalancingConfigs withSwitch {...{
draftConfig,
setDraftConfig,
@@ -304,7 +304,7 @@ const ModelModal: FC<ModelModalProps> = ({
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-components-panel-bg'>
<div className='sticky bottom-0 -mx-2 mt-2 flex flex-wrap items-center justify-between gap-y-2 bg-components-panel-bg px-2 pb-6 pt-4'>
{
(provider.help && (provider.help.title || provider.help.url))
? (
@@ -315,7 +315,7 @@ const ModelModal: FC<ModelModalProps> = ({
onClick={e => !provider.help.url && e.preventDefault()}
>
{provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
<LinkExternal02 className='ml-1 w-3 h-3' />
<LinkExternal02 className='ml-1 h-3 w-3' />
</a>
)
: <div />
@@ -360,17 +360,17 @@ const ModelModal: FC<ModelModalProps> = ({
{
(validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
? (
<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]' />
<div className='flex bg-background-section-burn px-[10px] py-3 text-xs text-[#D92D20]'>
<RiErrorWarningFill className='mr-2 mt-[1px] h-[14px] w-[14px]' />
{validatedStatusState.message}
</div>
)
: (
<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-text-tertiary' />
<div className='flex items-center justify-center bg-background-section-burn py-3 text-xs text-text-tertiary'>
<Lock01 className='mr-1 h-3 w-3 text-text-tertiary' />
{t('common.modelProvider.encrypted.front')}
<a
className='text-text-accent mx-1'
className='mx-1 text-text-accent'
target='_blank' rel='noopener noreferrer'
href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
>

20
web/app/components/header/account-setting/model-provider-page/model-modal/model-load-balancing-entry-modal.tsx
View File

@@ -241,11 +241,11 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
return (
<PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'>
<PortalToFollowElemContent className='z-[60] h-full w-full'>
<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 max-h-[calc(100vh-120px)] w-[640px] overflow-y-auto rounded-2xl bg-white shadow-xl'>
<div className='px-8 pt-8'>
<div className='flex justify-between items-center mb-2'>
<div className='mb-2 flex items-center justify-between'>
<div className='text-xl font-semibold text-gray-900'>{t(isEditMode ? 'common.modelProvider.editConfig' : 'common.modelProvider.addConfig')}</div>
</div>
<Form
@@ -257,7 +257,7 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
showOnVariableMap={showOnVariableMap}
isEditMode={isEditMode}
/>
<div className='sticky bottom-0 flex justify-between items-center py-6 flex-wrap gap-y-2 bg-white'>
<div className='sticky bottom-0 flex flex-wrap items-center justify-between gap-y-2 bg-white py-6'>
{
(provider.help && (provider.help.title || provider.help.url))
? (
@@ -268,7 +268,7 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
onClick={e => !provider.help.url && e.preventDefault()}
>
{provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
<LinkExternal02 className='ml-1 w-3 h-3' />
<LinkExternal02 className='ml-1 h-3 w-3' />
</a>
)
: <div />
@@ -307,17 +307,17 @@ const ModelLoadBalancingEntryModal: FC<ModelModalProps> = ({
{
(validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
? (
<div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
<RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
<div className='flex bg-[#FEF3F2] px-[10px] py-3 text-xs text-[#D92D20]'>
<RiErrorWarningFill className='mr-2 mt-[1px] h-[14px] w-[14px]' />
{validatedStatusState.message}
</div>
)
: (
<div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
<Lock01 className='mr-1 w-3 h-3 text-gray-500' />
<div className='flex items-center justify-center bg-gray-50 py-3 text-xs text-gray-500'>
<Lock01 className='mr-1 h-3 w-3 text-gray-500' />
{t('common.modelProvider.encrypted.front')}
<a
className='text-primary-600 mx-1'
className='mx-1 text-primary-600'
target='_blank' rel='noopener noreferrer'
href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
>

2
web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
View File

@@ -37,7 +37,7 @@ const ModelName: FC<ModelNameProps> = ({
if (!modelItem)
return null
return (
<div className={cn('flex gap-0.5 items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
<div className={cn('system-sm-regular flex items-center gap-0.5 overflow-hidden truncate text-ellipsis text-components-input-text-filled', className)}>
<div
className='truncate'
title={modelItem.label[language] || modelItem.label.en_US}

14
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
View File

@@ -76,7 +76,7 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
return (
<div
className={cn(
'relative group flex items-center p-1 gap-[2px] flex-grow rounded-lg bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
'group relative flex grow cursor-pointer items-center gap-[2px] rounded-lg bg-components-input-bg-normal p-1 hover:bg-state-base-hover-alt',
)}
>
{modelId ? (
@@ -130,20 +130,20 @@ const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
/>
)}
{modelProvider && !disabled && !needsConfiguration && (
<div className="flex pr-1 items-center">
<RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
<div className="flex items-center pr-1">
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary group-hover:text-text-secondary" />
</div>
)}
</>
) : (
<>
<div className="flex p-1 pl-2 items-center gap-1 grow">
<span className="overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular text-components-input-text-placeholder">
<div className="flex grow items-center gap-1 p-1 pl-2">
<span className="system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap text-components-input-text-placeholder">
{t('workflow.nodes.agent.configureModel')}
</span>
</div>
<div className="flex pr-1 items-center">
<RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
<div className="flex items-center pr-1">
<RiEqualizer2Line className="h-4 w-4 text-text-tertiary group-hover:text-text-secondary" />
</div>
</>
)}

6
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
View File

@@ -18,11 +18,11 @@ const ConfigurationButton = ({ modelProvider, handleOpenModal }: ConfigurationBu
handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
}}
>
<div className="flex px-[3px] justify-center items-center gap-1">
<div className="flex items-center justify-center gap-1 px-[3px]">
{t('workflow.nodes.agent.notAuthorized')}
</div>
<div className="flex w-[14px] h-[14px] justify-center items-center">
<div className="w-2 h-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
<div className="flex h-[14px] w-[14px] items-center justify-center">
<div className="h-2 w-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo" />
</div>
</Button>

12
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
View File

@@ -194,9 +194,9 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
<div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
<div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
<div className={cn('max-h-[420px] overflow-y-auto p-4 pt-3')}>
<div className='relative'>
<div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
<div className={cn('system-sm-semibold mb-1 flex h-6 items-center text-text-secondary')}>
{t('common.modelProvider.model').toLocaleUpperCase()}
</div>
<ModelSelector
@@ -217,8 +217,8 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
}
{
!isLoading && !!parameterRules.length && (
<div className='flex items-center justify-between mb-2'>
<div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
<div className='mb-2 flex items-center justify-between'>
<div className={cn('system-sm-semibold flex h-6 items-center text-text-secondary')}>{t('common.modelProvider.parameters')}</div>
{
PROVIDER_WITH_PRESET_TONE.includes(provider) && (
<PresetsParameter onSelect={handleSelectPresetParameter} />
@@ -247,7 +247,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
</div>
{!hideDebugWithMultipleModel && (
<div
className='flex items-center justify-between px-4 h-[50px] bg-components-section-burn border-t border-t-divider-subtle system-sm-regular text-text-accent cursor-pointer rounded-b-xl'
className='bg-components-section-burn system-sm-regular flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 text-text-accent'
onClick={() => onDebugWithMultipleModelChange?.()}
>
{
@@ -255,7 +255,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
? t('appDebug.debugAsSingleModel')
: t('appDebug.debugAsMultipleModel')
}
<ArrowNarrowLeft className='w-3 h-3 rotate-180' />
<ArrowNarrowLeft className='h-3 w-3 rotate-180' />
</div>
)}
</div>

6
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx
View File

@@ -8,14 +8,14 @@ type ModelDisplayProps = {
const ModelDisplay = ({ currentModel, modelId }: ModelDisplayProps) => {
return currentModel ? (
<ModelName
className="flex px-1 py-[3px] items-center gap-1 grow"
className="flex grow items-center gap-1 px-1 py-[3px]"
modelItem={currentModel}
showMode
showFeatures
/>
) : (
<div className="flex py-[3px] px-1 items-center gap-1 grow opacity-50 truncate">
<div className="text-components-input-text-filled text-ellipsis overflow-hidden system-sm-regular">
<div className="flex grow items-center gap-1 truncate px-1 py-[3px] opacity-50">
<div className="system-sm-regular overflow-hidden text-ellipsis text-components-input-text-filled">
{modelId}
</div>
</div>

22
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
View File

@@ -148,7 +148,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
/>}
<input
ref={numberInputRef}
className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
className='system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none'
type='number'
max={parameterRule.max}
min={parameterRule.min}
@@ -173,7 +173,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
/>}
<input
ref={numberInputRef}
className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
className='system-sm-regular ml-4 block h-8 w-16 shrink-0 appearance-none rounded-lg bg-components-input-bg-normal pl-3 text-components-input-text-filled outline-none'
type='number'
max={parameterRule.max}
min={parameterRule.min}
@@ -188,7 +188,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'boolean') {
return (
<Radio.Group
className='w-[178px] flex items-center'
className='flex w-[178px] items-center'
value={renderValue ? 1 : 0}
onChange={handleRadioChange}
>
@@ -201,7 +201,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'string' && !parameterRule.options?.length) {
return (
<input
className={cn(isInWorkflow ? 'w-[178px]' : 'w-full', 'ml-4 flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular')}
className={cn(isInWorkflow ? 'w-[178px]' : 'w-full', 'system-sm-regular ml-4 flex h-8 appearance-none items-center rounded-lg bg-components-input-bg-normal px-3 text-components-input-text-filled outline-none')}
value={renderValue as string}
onChange={handleStringInputChange}
/>
@@ -211,7 +211,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'text') {
return (
<textarea
className='w-full h-20 ml-4 px-1 rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
className='system-sm-regular ml-4 h-20 w-full rounded-lg bg-components-input-bg-normal px-1 text-components-input-text-filled'
value={renderValue as string}
onChange={handleStringInputChange}
/>
@@ -222,7 +222,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
return (
<SimpleSelect
className='!py-0'
wrapperClassName={cn('w-full !h-8')}
wrapperClassName={cn('!h-8 w-full')}
defaultValue={renderValue as string}
onSelect={handleSelect}
items={parameterRule.options.map(option => ({ value: option, name: option }))}
@@ -232,7 +232,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (parameterRule.type === 'tag') {
return (
<div className={cn('w-full !h-8')}>
<div className={cn('!h-8 w-full')}>
<TagInput
items={renderValue as string[]}
onChange={handleTagChange}
@@ -247,9 +247,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
}
return (
<div className='flex items-center justify-between mb-2'>
<div className='mb-2 flex items-center justify-between'>
<div className='shrink-0 basis-1/2'>
<div className={cn('shrink-0 w-full flex items-center')}>
<div className={cn('flex w-full shrink-0 items-center')}>
{
!parameterRule.required && parameterRule.name !== 'stop' && (
<div className='mr-2 w-7'>
@@ -262,7 +262,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
)
}
<div
className='mr-0.5 system-xs-regular text-text-secondary truncate'
className='system-xs-regular mr-0.5 truncate text-text-secondary'
title={parameterRule.label[language] || parameterRule.label.en_US}
>
{parameterRule.label[language] || parameterRule.label.en_US}
@@ -281,7 +281,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
</div>
{
parameterRule.type === 'tag' && (
<div className={cn(!isInWorkflow && 'w-[178px]', 'text-text-tertiary system-xs-regular')}>
<div className={cn(!isInWorkflow && 'w-[178px]', 'system-xs-regular text-text-tertiary')}>
{parameterRule?.tagPlaceholder?.[language]}
</div>
)

4
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
View File

@@ -25,7 +25,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
className={cn(open && 'bg-state-base-hover')}
>
{t('common.modelProvider.loadPresets')}
<RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5' />
<RiArrowDownSLine className='ml-0.5 h-3.5 w-3.5' />
</Button>
)
}, [t])
@@ -42,7 +42,7 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
return {
value: tone.id,
text: (
<div className='flex items-center h-full'>
<div className='flex h-full items-center'>
{getToneIcon(tone.id)}
{t(`common.model.tone.${tone.name}`) as string}
</div>

14
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx
View File

@@ -17,15 +17,15 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
const { data: pluginList } = useInstalledPluginList()
const renderTooltipContent = (title: string, description?: string, linkText?: string, linkHref?: string) => {
return (
<div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5' onClick={e => e.stopPropagation()}>
<div className='text-text-primary title-xs-semi-bold'>{title}</div>
<div className='flex w-[240px] max-w-[240px] flex-col gap-1 px-1 py-1.5' onClick={e => e.stopPropagation()}>
<div className='title-xs-semi-bold text-text-primary'>{title}</div>
{description && (
<div className='min-w-[200px] text-text-secondary body-xs-regular'>
<div className='body-xs-regular min-w-[200px] text-text-secondary'>
{description}
</div>
)}
{linkText && linkHref && (
<div className='text-text-accent body-xs-regular cursor-pointer z-[100]'>
<div className='body-xs-regular z-[100] cursor-pointer text-text-accent'>
<Link
href={linkHref}
onClick={(e) => {
@@ -52,7 +52,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
asChild={false}
needsDelay={false}
>
<RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
</Tooltip>
) : !pluginInfo ? (
<Tooltip
@@ -65,7 +65,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
asChild={false}
needsDelay={true}
>
<RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
</Tooltip>
) : (
<SwitchPluginVersion
@@ -89,7 +89,7 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa
asChild={false}
needsDelay
>
<RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
<RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
</Tooltip>
)}
</>

18
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
View File

@@ -44,16 +44,16 @@ const Trigger: FC<TriggerProps> = ({
return (
<div
className={cn(
'relative flex items-center px-2 h-8 rounded-lg cursor-pointer',
'relative flex h-8 cursor-pointer items-center rounded-lg px-2',
!isInWorkflow && 'border ring-inset hover:ring-[0.5px]',
!isInWorkflow && (disabled ? 'border-text-warning ring-text-warning bg-state-warning-hover' : 'border-util-colors-indigo-indigo-600 ring-util-colors-indigo-indigo-600 bg-state-accent-hover'),
isInWorkflow && 'pr-[30px] bg-workflow-block-parma-bg border border-workflow-block-parma-bg hover:border-gray-200',
!isInWorkflow && (disabled ? 'border-text-warning bg-state-warning-hover ring-text-warning' : 'border-util-colors-indigo-indigo-600 bg-state-accent-hover ring-util-colors-indigo-indigo-600'),
isInWorkflow && 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg pr-[30px] hover:border-gray-200',
)}
>
{
currentProvider && (
<ModelIcon
className='mr-1.5 !w-5 !h-5'
className='mr-1.5 !h-5 !w-5'
provider={currentProvider}
modelName={currentModel?.model}
/>
@@ -62,7 +62,7 @@ const Trigger: FC<TriggerProps> = ({
{
!currentProvider && (
<ModelIcon
className='mr-1.5 !w-5 !h-5'
className='mr-1.5 !h-5 !w-5'
provider={modelProviders.find(item => item.provider === providerName)}
modelName={modelId}
/>
@@ -80,7 +80,7 @@ const Trigger: FC<TriggerProps> = ({
}
{
!currentModel && (
<div className='mr-1 text-[13px] font-medium text-text-primary truncate'>
<div className='mr-1 truncate text-[13px] font-medium text-text-primary'>
{modelId}
</div>
)
@@ -97,14 +97,14 @@ const Trigger: FC<TriggerProps> = ({
: ''
}
>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
<AlertTriangle className='h-4 w-4 text-[#F79009]' />
</Tooltip>
)
: (
<SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'shrink-0 w-4 h-4')} />
<SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'h-4 w-4 shrink-0')} />
)
}
{isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-text-tertiary' />)}
{isInWorkflow && (<RiArrowDownSLine className='absolute right-2 top-[9px] h-3.5 w-3.5 text-text-tertiary' />)}
</div>
)
}

14
web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
View File

@@ -26,23 +26,23 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={cn('group flex flex-grow box-content items-center p-[3px] pl-1 h-8 gap-1 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
className={cn('group box-content flex h-8 grow cursor-pointer items-center gap-1 rounded-lg bg-components-input-bg-disabled p-[3px] pl-1', className)}
>
<div className={cn('flex items-center w-full', contentClassName)}>
<div className='flex items-center py-[1px] gap-1 min-w-0 flex-1'>
<div className={cn('flex w-full items-center', contentClassName)}>
<div className='flex min-w-0 flex-1 items-center gap-1 py-[1px]'>
<ModelIcon
className="w-4 h-4"
className="h-4 w-4"
provider={currentProvider}
modelName={modelName}
/>
<div className='system-sm-regular text-components-input-text-filled truncate'>
<div className='system-sm-regular truncate text-components-input-text-filled'>
{modelName}
</div>
</div>
<div className='shrink-0 flex items-center justify-center'>
<div className='flex shrink-0 items-center justify-center'>
{showWarnIcon && (
<Tooltip popupContent={t('common.modelProvider.deprecated')}>
<AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
<AlertTriangle className='h-4 w-4 text-text-warning-secondary' />
</Tooltip>
)}
</div>

14
web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
View File

@@ -15,23 +15,23 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={cn(
'flex items-center p-1 gap-0.5 rounded-lg bg-components-input-bg-normal hover:bg-components-input-bg-hover cursor-pointer', open && 'bg-components-input-bg-hover',
'flex cursor-pointer items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 hover:bg-components-input-bg-hover', open && 'bg-components-input-bg-hover',
className,
)}
>
<div className='grow flex items-center'>
<div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-divider-regular'>
<CubeOutline className='w-3 h-3 text-text-quaternary' />
<div className='flex grow items-center'>
<div className='mr-1.5 flex h-4 w-4 items-center justify-center rounded-[5px] border border-dashed border-divider-regular'>
<CubeOutline className='h-3 w-3 text-text-quaternary' />
</div>
<div
className='text-[13px] text-text-tertiary truncate'
className='truncate text-[13px] text-text-tertiary'
title='Configure model'
>
{t('plugin.detailPanel.configureModel')}
</div>
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<RiEqualizer2Line className='w-3.5 h-3.5 text-text-tertiary' />
<div className='flex h-4 w-4 shrink-0 items-center justify-center'>
<RiEqualizer2Line className='h-3.5 w-3.5 text-text-tertiary' />
</div>
</div>
)

16
web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
View File

@@ -68,8 +68,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.vision })}
>
<div className='inline-block cursor-help'>
<ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
<MagicEyes className='w-3 h-3' />
<ModelBadge className={`w-[18px] justify-center !px-0 text-text-tertiary ${className}`}>
<MagicEyes className='h-3 w-3' />
</ModelBadge>
</div>
</Tooltip>
@@ -82,8 +82,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.document })}
>
<div className='inline-block cursor-help'>
<ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
<DocumentSupportIcon className='w-3 h-3' />
<ModelBadge className={`w-[18px] justify-center !px-0 text-text-tertiary ${className}`}>
<DocumentSupportIcon className='h-3 w-3' />
</ModelBadge>
</div>
</Tooltip>
@@ -96,8 +96,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.audio })}
>
<div className='inline-block cursor-help'>
<ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
<AudioSupportIcon className='w-3 h-3' />
<ModelBadge className={`w-[18px] justify-center !px-0 text-text-tertiary ${className}`}>
<AudioSupportIcon className='h-3 w-3' />
</ModelBadge>
</div>
</Tooltip>
@@ -110,8 +110,8 @@ const FeatureIcon: FC<FeatureIconProps> = ({
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.video })}
>
<div className='inline-block cursor-help'>
<ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
<VideoSupportIcon className='w-3 h-3' />
<ModelBadge className={`w-[18px] justify-center !px-0 text-text-tertiary ${className}`}>
<VideoSupportIcon className='h-3 w-3' />
</ModelBadge>
</div>
</Tooltip>

12
web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
View File

@@ -34,8 +34,8 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
return (
<div
className={cn(
'group flex items-center p-1 h-8 gap-0.5 rounded-lg bg-components-input-bg-normal',
!readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
'group flex h-8 items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1',
!readonly && 'cursor-pointer hover:bg-components-input-bg-hover',
open && 'bg-components-input-bg-hover',
model.status !== ModelStatusEnum.active && 'bg-components-input-bg-disabled hover:bg-components-input-bg-disabled',
className,
@@ -46,7 +46,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
provider={provider}
modelName={model.model}
/>
<div className='flex px-1 py-[3px] items-center gap-1 grow truncate'>
<div className='flex grow items-center gap-1 truncate px-1 py-[3px]'>
<ModelName
className='grow'
modelItem={model}
@@ -54,17 +54,17 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
showFeatures
/>
{!readonly && (
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<div className='flex h-4 w-4 shrink-0 items-center justify-center'>
{
model.status !== ModelStatusEnum.active
? (
<Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
<AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
<AlertTriangle className='h-4 w-4 text-text-warning-secondary' />
</Tooltip>
)
: (
<RiArrowDownSLine
className='w-3.5 h-3.5 text-text-tertiary'
className='h-3.5 w-3.5 text-text-tertiary'
/>
)
}

26
web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
View File

@@ -80,7 +80,7 @@ const PopupItem: FC<PopupItemProps> = ({
return (
<div className='mb-1'>
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
<div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>
{model.label[language] || model.label.en_US}
</div>
{
@@ -93,11 +93,11 @@ const PopupItem: FC<PopupItemProps> = ({
<div className='flex flex-col gap-1'>
<div className='flex flex-col items-start gap-2'>
<ModelIcon
className={cn('shrink-0 w-5 h-5')}
className={cn('h-5 w-5 shrink-0')}
provider={model}
modelName={modelItem.model}
/>
<div className='text-text-primary system-md-medium text-wrap break-words'>{modelItem.label[language] || modelItem.label.en_US}</div>
<div className='system-md-medium text-wrap break-words text-text-primary'>{modelItem.label[language] || modelItem.label.en_US}</div>
</div>
{/* {currentProvider?.description && (
<div className='text-text-tertiary system-xs-regular'>{currentProvider?.description?.[language] || currentProvider?.description?.en_US}</div>
@@ -121,29 +121,29 @@ const PopupItem: FC<PopupItemProps> = ({
</div>
{modelItem.model_type === ModelTypeEnum.textGeneration && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature)) && (
<div className='pt-2'>
<div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('common.model.capabilities')}</div>
<div className='system-2xs-medium-uppercase mb-1 text-text-tertiary'>{t('common.model.capabilities')}</div>
<div className='flex flex-wrap gap-1'>
{modelItem.features?.includes(ModelFeatureEnum.vision) && (
<ModelBadge>
<RiImageCircleAiLine className='w-3.5 h-3.5 mr-0.5' />
<RiImageCircleAiLine className='mr-0.5 h-3.5 w-3.5' />
<span>{ModelFeatureTextEnum.vision}</span>
</ModelBadge>
)}
{modelItem.features?.includes(ModelFeatureEnum.audio) && (
<ModelBadge>
<RiVoiceAiFill className='w-3.5 h-3.5 mr-0.5' />
<RiVoiceAiFill className='mr-0.5 h-3.5 w-3.5' />
<span>{ModelFeatureTextEnum.audio}</span>
</ModelBadge>
)}
{modelItem.features?.includes(ModelFeatureEnum.video) && (
<ModelBadge>
<RiFilmAiLine className='w-3.5 h-3.5 mr-0.5' />
<RiFilmAiLine className='mr-0.5 h-3.5 w-3.5' />
<span>{ModelFeatureTextEnum.video}</span>
</ModelBadge>
)}
{modelItem.features?.includes(ModelFeatureEnum.document) && (
<ModelBadge>
<RiFileTextLine className='w-3.5 h-3.5 mr-0.5' />
<RiFileTextLine className='mr-0.5 h-3.5 w-3.5' />
<span>{ModelFeatureTextEnum.document}</span>
</ModelBadge>
)}
@@ -155,29 +155,29 @@ const PopupItem: FC<PopupItemProps> = ({
>
<div
key={modelItem.model}
className={cn('group relative flex items-center px-3 py-1.5 h-8 rounded-lg gap-1', modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt')}
className={cn('group relative flex h-8 items-center gap-1 rounded-lg px-3 py-1.5', modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt')}
onClick={() => handleSelect(model.provider, modelItem)}
>
<div className='flex items-center gap-2'>
<ModelIcon
className={cn('shrink-0 w-5 h-5')}
className={cn('h-5 w-5 shrink-0')}
provider={model}
modelName={modelItem.model}
/>
<ModelName
className={cn('text-text-secondary system-sm-medium', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
className={cn('system-sm-medium text-text-secondary', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
modelItem={modelItem}
/>
</div>
{
defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
<Check className='shrink-0 w-4 h-4 text-text-accent' />
<Check className='h-4 w-4 shrink-0 text-text-accent' />
)
}
{
modelItem.status === ModelStatusEnum.noConfigure && (
<div
className='hidden group-hover:block text-xs font-medium text-text-accent cursor-pointer'
className='hidden cursor-pointer text-xs font-medium text-text-accent group-hover:block'
onClick={handleOpenModelModal}
>
{t('common.operation.add').toLocaleUpperCase()}

20
web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
View File

@@ -59,20 +59,20 @@ const Popup: FC<PopupProps> = ({
}, [language, modelList, scopeFeatures, searchText])
return (
<div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg overflow-y-auto'>
<div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-components-panel-bg z-10'>
<div className='max-h-[480px] w-[320px] overflow-y-auto rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
<div className='sticky top-0 z-10 bg-components-panel-bg pb-1 pl-3 pr-2 pt-3'>
<div className={`
flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
${searchText ? 'bg-components-input-bg-active border-components-input-border-active shadow-xs' : 'bg-components-input-bg-normal border-transparent'}
flex h-8 items-center rounded-lg border pl-[9px] pr-[10px]
${searchText ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-transparent bg-components-input-bg-normal'}
`}>
<RiSearchLine
className={`
shrink-0 mr-[7px] w-[14px] h-[14px]
mr-[7px] h-[14px] w-[14px] shrink-0
${searchText ? 'text-text-tertiary' : 'text-text-quaternary'}
`}
/>
<input
className='block grow h-[18px] text-[13px] text-text-primary appearance-none outline-none bg-transparent'
className='block h-[18px] grow appearance-none bg-transparent text-[13px] text-text-primary outline-none'
placeholder='Search model'
value={searchText}
onChange={e => setSearchText(e.target.value)}
@@ -80,7 +80,7 @@ const Popup: FC<PopupProps> = ({
{
searchText && (
<XCircle
className='shrink-0 ml-1.5 w-[14px] h-[14px] text-text-quaternary cursor-pointer'
className='ml-1.5 h-[14px] w-[14px] shrink-0 cursor-pointer text-text-quaternary'
onClick={() => setSearchText('')}
/>
)
@@ -100,18 +100,18 @@ const Popup: FC<PopupProps> = ({
}
{
!filteredModelList.length && (
<div className='px-3 py-1.5 leading-[18px] text-center text-xs text-text-tertiary break-all'>
<div className='break-all px-3 py-1.5 text-center text-xs leading-[18px] text-text-tertiary'>
{`No model found for “${searchText}”`}
</div>
)
}
</div>
<div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only bg-components-panel-bg rounded-b-lg' onClick={() => {
<div className='sticky bottom-0 flex cursor-pointer items-center rounded-b-lg border-t border-divider-subtle bg-components-panel-bg px-4 py-2 text-text-accent-light-mode-only' onClick={() => {
onHide()
setShowAccountSettingModal({ payload: 'provider' })
}}>
<span className='system-xs-medium'>{t('common.model.settingsLink')}</span>
<RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
<RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
</div>
</div>
)

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

@@ -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>
)

2
web/app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx
View File

@@ -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

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

@@ -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>
{

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

@@ -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>
)}
{

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

@@ -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>
)

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

@@ -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>
)

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

@@ -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)}
>

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

@@ -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'

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

@@ -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>
)

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

@@ -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>
)

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

@@ -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'
}

8
web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
View File

@@ -22,8 +22,8 @@ const ProviderIcon: FC<ProviderIconProps> = ({
if (provider.provider === 'langgenius/anthropic/anthropic') {
return (
<div className='mb-2 py-[7px]'>
{theme === Theme.dark && <AnthropicLight className='w-[90px] h-2.5' />}
{theme === Theme.light && <AnthropicDark className='w-[90px] h-2.5' />}
{theme === Theme.dark && <AnthropicLight className='h-2.5 w-[90px]' />}
{theme === Theme.light && <AnthropicDark className='h-2.5 w-[90px]' />}
</div>
)
}
@@ -31,7 +31,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
if (provider.provider === 'langgenius/openai/openai') {
return (
<div className='mb-2'>
<Openai className='w-auto h-6 text-text-inverted-dimmed' />
<Openai className='h-6 w-auto text-text-inverted-dimmed' />
</div>
)
}
@@ -41,7 +41,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
<img
alt='provider-icon'
src={renderI18nObject(provider.icon_small, language)}
className='w-6 h-6'
className='h-6 w-6'
/>
<div className='system-md-semibold text-text-primary'>
{renderI18nObject(provider.label, language)}

14
web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
View File

@@ -135,14 +135,14 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
variant={notConfigured ? 'primary' : 'secondary'}
size='small'
>
<RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
<RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
{t('common.modelProvider.systemModelSettings')}
</Button>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[60]'>
<div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
<div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg pt-4 shadow-xl'>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
<div className='flex h-8 items-center text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.systemReasoningModel.key')}
<Tooltip
popupContent={
@@ -162,7 +162,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
<div className='flex h-8 items-center text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.embeddingModel.key')}
<Tooltip
popupContent={
@@ -182,7 +182,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
<div className='flex h-8 items-center text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.rerankModel.key')}
<Tooltip
popupContent={
@@ -202,7 +202,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
<div className='flex h-8 items-center text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.speechToTextModel.key')}
<Tooltip
popupContent={
@@ -222,7 +222,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
</div>
</div>
<div className='px-6 py-1'>
<div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
<div className='flex h-8 items-center text-[13px] font-medium text-text-primary'>
{t('common.modelProvider.ttsModel.key')}
<Tooltip
popupContent={