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
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions

View File

@@ -19,8 +19,8 @@ const ChunkingModeLabel: FC<Props> = ({
return (
<Badge>
<div className='flex items-center h-full space-x-0.5 text-text-tertiary'>
<TypeIcon className='w-3 h-3' />
<div className='flex h-full items-center space-x-0.5 text-text-tertiary'>
<TypeIcon className='h-3 w-3' />
<span className='system-2xs-medium-uppercase'>{isGeneralMode ? `${t('dataset.chunkingMode.general')}${isQAMode ? ' · QA' : ''}` : t('dataset.chunkingMode.parentChild')}</span>
</div>
</Badge>

View File

@@ -27,11 +27,11 @@ const DocumentList: FC<Props> = ({
return (
<div
key={id}
className='flex items-center h-8 px-2 hover:bg-state-base-hover rounded-lg space-x-2 cursor-pointer'
className='flex h-8 cursor-pointer items-center space-x-2 rounded-lg px-2 hover:bg-state-base-hover'
onClick={handleChange(item)}
>
<FileIcon name={item.name} extension={extension} size='md' />
<div className='truncate text-text-secondary text-sm'>{name}</div>
<div className='truncate text-sm text-text-secondary'>{name}</div>
</div>
)
})}

View File

@@ -74,15 +74,15 @@ const DocumentPicker: FC<Props> = ({
placement='bottom-start'
>
<PortalToFollowElemTrigger onClick={togglePopup}>
<div className={cn('flex items-center ml-1 px-2 py-0.5 rounded-lg hover:bg-state-base-hover select-none cursor-pointer', open && 'bg-state-base-hover')}>
<div className={cn('ml-1 flex cursor-pointer select-none items-center rounded-lg px-2 py-0.5 hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
<FileIcon name={name} extension={extension} size='lg' />
<div className='flex flex-col items-start ml-1 mr-0.5'>
<div className='ml-1 mr-0.5 flex flex-col items-start'>
<div className='flex items-center space-x-0.5'>
<span className={cn('system-md-semibold text-text-primary')}> {name || '--'}</span>
<ArrowIcon className={'h-4 w-4 text-text-primary'} />
</div>
<div className='flex items-center h-3 text-text-tertiary space-x-0.5'>
<TypeIcon className='w-3 h-3' />
<div className='flex h-3 items-center space-x-0.5 text-text-tertiary'>
<TypeIcon className='h-3 w-3' />
<span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
{isParentChild ? t('dataset.chunkingMode.parentChild') : t('dataset.chunkingMode.general')}
{isParentChild && ` · ${!parentMode ? '--' : parentMode === 'paragraph' ? t('dataset.parentMode.paragraph') : t('dataset.parentMode.fullDoc')}`}
@@ -92,7 +92,7 @@ const DocumentPicker: FC<Props> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[360px] p-1 pt-2 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
<div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pt-2 shadow-lg backdrop-blur-[5px]'>
<SearchInput value={query} onChange={setQuery} className='mx-1' />
{documentsList
? (
@@ -106,7 +106,7 @@ const DocumentPicker: FC<Props> = ({
onChange={handleChange}
/>
)
: (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
: (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
<Loading />
</div>)}
</div>

View File

@@ -50,9 +50,9 @@ const PreviewDocumentPicker: FC<Props> = ({
offset={4}
>
<PortalToFollowElemTrigger onClick={togglePopup}>
<div className={cn('flex items-center h-6 px-1 rounded-md hover:bg-state-base-hover select-none', open && 'bg-state-base-hover', className)}>
<div className={cn('flex h-6 select-none items-center rounded-md px-1 hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
<FileIcon name={name} extension={extension} size='md' />
<div className='flex flex-col items-start ml-1'>
<div className='ml-1 flex flex-col items-start'>
<div className='flex items-center space-x-0.5'>
<span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}> {name || '--'}</span>
<ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
@@ -61,8 +61,8 @@ const PreviewDocumentPicker: FC<Props> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[392px] p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
{files?.length > 1 && <div className='pl-2 flex items-center h-8 system-xs-medium-uppercase text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
<div className='w-[392px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'>
{files?.length > 1 && <div className='system-xs-medium-uppercase flex h-8 items-center pl-2 text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
{files?.length > 0
? (
<DocumentList
@@ -70,7 +70,7 @@ const PreviewDocumentPicker: FC<Props> = ({
onChange={handleChange}
/>
)
: (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
: (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
<Loading />
</div>)}
</div>

View File

@@ -46,21 +46,21 @@ const StatusAction: FC<Props> = ({
}) => {
const { Icon, color } = getIcon(type)
return (
<div className='relative flex items-center h-[34px] rounded-lg pl-2 pr-3 border border-components-panel-border bg-components-panel-bg-blur shadow-xs'>
<div className='relative flex h-[34px] items-center rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2 pr-3 shadow-xs'>
<div className={
`absolute inset-0 opacity-40 rounded-lg ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
`absolute inset-0 rounded-lg opacity-40 ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|| (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|| (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
|| (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
}`}
/>
<div className='relative z-10 flex h-full items-center space-x-2'>
<Icon className={cn('w-4 h-4', color)} />
<Icon className={cn('h-4 w-4', color)} />
<div className='text-[13px] font-normal text-text-secondary'>{description}</div>
{onAction && (
<>
<Divider type='vertical' className='!h-4' />
<div onClick={onAction} className={cn('text-text-accent font-semibold text-[13px] cursor-pointer', disabled && 'text-text-disabled cursor-not-allowed')}>{actionText}</div>
<div onClick={onAction} className={cn('cursor-pointer text-[13px] font-semibold text-text-accent', disabled && 'cursor-not-allowed text-text-disabled')}>{actionText}</div>
</>
)}
</div>

View File

@@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
return (
<div className='space-y-2'>
<OptionCard
disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.invertedIndex.title')}
description={t('dataset.retrieval.invertedIndex.description')} isActive
activeHeaderClassName='bg-dataset-option-card-purple-gradient'

View File

@@ -94,7 +94,7 @@ const RetrievalMethodConfig: FC<Props> = ({
return (
<div className='space-y-2'>
{supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
<OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
<OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
title={t('dataset.retrieval.semantic_search.title')}
description={t('dataset.retrieval.semantic_search.description')}
isActive={
@@ -112,7 +112,7 @@ const RetrievalMethodConfig: FC<Props> = ({
</OptionCard>
)}
{supportRetrievalMethods.includes(RETRIEVE_METHOD.fullText) && (
<OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.fullText} alt='' />}
<OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.fullText} alt='' />}
title={t('dataset.retrieval.full_text_search.title')}
description={t('dataset.retrieval.full_text_search.description')}
isActive={
@@ -130,11 +130,11 @@ const RetrievalMethodConfig: FC<Props> = ({
</OptionCard>
)}
{supportRetrievalMethods.includes(RETRIEVE_METHOD.hybrid) && (
<OptionCard disabled={disabled} icon={<Image className='w-4 h-4' src={retrievalIcon.hybrid} alt='' />}
<OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.hybrid} alt='' />}
title={
<div className='flex items-center space-x-1'>
<div>{t('dataset.retrieval.hybrid_search.title')}</div>
<Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='border-text-accent-secondary text-text-accent-secondary ml-1 h-[18px]' uppercase />
<Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='ml-1 h-[18px] border-text-accent-secondary text-text-accent-secondary' uppercase />
</div>
}
description={t('dataset.retrieval.hybrid_search.description')} isActive={

View File

@@ -38,7 +38,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
noRadio
chosenConfigWrapClassName='!pb-3'
chosenConfig={
<div className='flex flex-wrap leading-[18px] text-xs font-normal'>
<div className='flex flex-wrap text-xs font-normal leading-[18px]'>
{value.reranking_model.reranking_model_name && (
<div className='mr-8 flex space-x-1'>
<div className='text-gray-500'>{t('common.modelProvider.rerankModel.key')}</div>

View File

@@ -115,7 +115,7 @@ const RetrievalParamConfig: FC<Props> = ({
<div>
{!isEconomical && !isHybridSearch && (
<div>
<div className='flex items-center space-x-2 mb-2'>
<div className='mb-2 flex items-center space-x-2'>
{canToggleRerankModalEnable && (
<Switch
size='md'
@@ -124,7 +124,7 @@ const RetrievalParamConfig: FC<Props> = ({
/>
)}
<div className='flex items-center'>
<span className='mr-0.5 system-sm-semibold text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
<span className='system-sm-semibold mr-0.5 text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
<Tooltip
popupContent={
<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
@@ -153,7 +153,7 @@ const RetrievalParamConfig: FC<Props> = ({
)}
{
!isHybridSearch && (
<div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-4')}>
<div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-4')}>
<TopKItem
className='grow'
value={value.top_k}
@@ -191,7 +191,7 @@ const RetrievalParamConfig: FC<Props> = ({
{
isHybridSearch && (
<>
<div className='flex gap-2 mb-4'>
<div className='mb-4 flex gap-2'>
{
rerankingModeOptions.map(option => (
<RadioCard
@@ -255,7 +255,7 @@ const RetrievalParamConfig: FC<Props> = ({
/>
)
}
<div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-6')}>
<div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-6')}>
<TopKItem
className='grow'
value={value.top_k}