Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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()}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user