mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-16 14:26:52 +08:00
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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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={
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user