hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-24 18:23:07 +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

24
web/app/components/datasets/documents/detail/batch-modal/csv-downloader.tsx
View File

@@ -50,20 +50,20 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
return (
<div className='mt-6'>
<div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
<div className='text-sm font-medium text-gray-900'>{t('share.generation.csvStructureTitle')}</div>
<div className='mt-2 max-h-[500px] overflow-auto'>
{docForm === ChunkingMode.qa && (
<table className='table-fixed w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'>
<thead className='text-gray-500'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.question')}</td>
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.answer')}</td>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.question')}</td>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.answer')}</td>
</tr>
</thead>
<tbody className='text-gray-700'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td>
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 1</td>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.answer')} 1</td>
</tr>
<tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.question')} 2</td>
@@ -73,15 +73,15 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
</table>
)}
{docForm === ChunkingMode.text && (
<table className='table-fixed w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
<table className='w-full table-fixed border-separate border-spacing-0 rounded-lg border border-gray-200 text-xs'>
<thead className='text-gray-500'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('datasetDocuments.list.batchModal.contentTitle')}</td>
<td className='h-9 border-b border-gray-200 pl-3 pr-2'>{t('datasetDocuments.list.batchModal.contentTitle')}</td>
</tr>
</thead>
<tbody className='text-gray-700'>
<tr>
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td>
<td className='h-9 border-b border-gray-100 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 1</td>
</tr>
<tr>
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('datasetDocuments.list.batchModal.content')} 2</td>
@@ -91,14 +91,14 @@ const CSVDownload: FC<{ docForm: ChunkingMode }> = ({ docForm }) => {
)}
</div>
<CSVDownloader
className="block mt-2 cursor-pointer"
className="mt-2 block cursor-pointer"
type={Type.Link}
filename={'template'}
bom={true}
data={getTemplate()}
>
<div className='flex items-center h-[18px] space-x-1 text-text-accent text-xs font-medium'>
<DownloadIcon className='w-3 h-3 mr-1' />
<div className='flex h-[18px] items-center space-x-1 text-xs font-medium text-text-accent'>
<DownloadIcon className='mr-1 h-3 w-3' />
{t('datasetDocuments.list.batchModal.template')}
</div>
</CSVDownloader>

22
web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
View File

@@ -93,29 +93,29 @@ const CSVUploader: FC<Props> = ({
/>
<div ref={dropRef}>
{!file && (
<div className={cn('flex items-center h-20 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
<div className='w-full flex items-center justify-center space-x-2'>
<div className={cn('flex h-20 items-center rounded-xl border border-dashed border-gray-200 bg-gray-50 text-sm font-normal', dragging && 'border border-[#B2CCFF] bg-[#F5F8FF]')}>
<div className='flex w-full items-center justify-center space-x-2'>
<CSVIcon className="shrink-0" />
<div className='text-gray-500'>
{t('datasetDocuments.list.batchModal.csvUploadTitle')}
<span className='text-primary-400 cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
<span className='cursor-pointer text-primary-400' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
</div>
</div>
{dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
{dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
</div>
)}
{file && (
<div className={cn('flex items-center h-20 px-6 rounded-xl bg-gray-50 border border-gray-200 text-sm font-normal group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}>
<div className={cn('group flex h-20 items-center rounded-xl border border-gray-200 bg-gray-50 px-6 text-sm font-normal', 'hover:border-[#B2CCFF] hover:bg-[#F5F8FF]')}>
<CSVIcon className="shrink-0" />
<div className='flex ml-2 w-0 grow'>
<span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{file.name.replace(/.csv$/, '')}</span>
<div className='ml-2 flex w-0 grow'>
<span className='max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-gray-800'>{file.name.replace(/.csv$/, '')}</span>
<span className='shrink-0 text-gray-500'>.csv</span>
</div>
<div className='hidden group-hover:flex items-center'>
<div className='hidden items-center group-hover:flex'>
<Button onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
<div className='mx-2 w-px h-4 bg-gray-200' />
<div className='p-2 cursor-pointer' onClick={removeFile}>
<RiDeleteBinLine className='w-4 h-4 text-gray-500' />
<div className='mx-2 h-4 w-px bg-gray-200' />
<div className='cursor-pointer p-2' onClick={removeFile}>
<RiDeleteBinLine className='h-4 w-4 text-gray-500' />
</div>
</div>
</div>

8
web/app/components/datasets/documents/detail/batch-modal/index.tsx
View File

@@ -39,10 +39,10 @@ const BatchModal: FC<IBatchModalProps> = ({
}, [isShow])
return (
<Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
<Modal isShow={isShow} onClose={() => { }} className='!max-w-[520px] !rounded-xl px-8 py-6'>
<div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetDocuments.list.batchModal.title')}</div>
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-gray-500' />
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-gray-500' />
</div>
<CSVUploader
file={currentCSV}
@@ -51,7 +51,7 @@ const BatchModal: FC<IBatchModalProps> = ({
<CSVDownloader
docForm={docForm}
/>
<div className='mt-[28px] pt-6 flex justify-end'>
<div className='mt-[28px] flex justify-end pt-6'>
<Button className='mr-2' onClick={onCancel}>
{t('datasetDocuments.list.batchModal.cancel')}
</Button>

20
web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
View File

@@ -73,16 +73,16 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
}, [childChunkInfo?.updated_at])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{t('datasetDocuments.segment.editChildChunk')}</div>
<div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.editChildChunk')}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag positionId={childChunkInfo?.position || ''} labelPrefix={t('datasetDocuments.segment.childChunk') as string} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
<Dot />
<span className='text-text-tertiary system-xs-medium'>
<span className='system-xs-medium text-text-tertiary'>
{EditTimeText}
</span>
</div>
@@ -96,14 +96,14 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
loading={loading}
isChildChunk={true}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='w-4 h-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />}
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='h-4 w-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />}
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -118,7 +118,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
</div>
</div>
{!fullScreen && (
<div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-end border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<ActionButtons
handleCancel={handleCancel}
handleSave={handleSave}

10
web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
View File

@@ -94,7 +94,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
isParagraphMode ? 'pt-1 pb-2' : 'px-3 grow',
(isFullDocMode && isLoading) && 'overflow-y-hidden',
)}>
{isFullDocMode ? <Divider type='horizontal' className='h-[1px] bg-divider-subtle my-1' /> : null}
{isFullDocMode ? <Divider type='horizontal' className='my-1 h-[1px] bg-divider-subtle' /> : null}
<div className={classNames('flex items-center justify-between', isFullDocMode ? 'pt-2 pb-3 sticky -top-2 left-0 bg-background-default' : '')}>
<div className={classNames(
'h-7 flex items-center pl-1 pr-3 rounded-lg',
@@ -111,12 +111,12 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
isParagraphMode
? collapsed
? (
<RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-50 mr-0.5' />
<RiArrowRightSLine className='mr-0.5 h-4 w-4 text-text-secondary opacity-50' />
)
: (<RiArrowDownSLine className='w-4 h-4 text-text-secondary mr-0.5' />)
: (<RiArrowDownSLine className='mr-0.5 h-4 w-4 text-text-secondary' />)
: null
}
<span className='text-text-secondary system-sm-semibold-uppercase'>{totalText}</span>
<span className='system-sm-semibold-uppercase text-text-secondary'>{totalText}</span>
<span className={classNames('text-text-quaternary text-xs font-medium pl-1.5', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span>
<button
type='button'
@@ -150,7 +150,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'grow mb-6' : 'items-center')}>
{isParagraphMode && (
<div className='self-stretch'>
<Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
<Divider type='vertical' className='mx-[7px] w-[2px] bg-text-accent-secondary' />
</div>
)}
{childChunks.length > 0

14
web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
View File

@@ -36,8 +36,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
if (loading)
return
handleSave()
}
, { exactMatch: true, useCapture: true })
},
{ exactMatch: true, useCapture: true })
const isParentChildParagraphMode = useMemo(() => {
return mode === 'hierarchical' && parentMode === 'paragraph'
@@ -49,8 +49,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
onClick={handleCancel}
>
<div className='flex items-center gap-x-1'>
<span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
<span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
<span className='system-sm-medium text-components-button-secondary-text'>{t('common.operation.cancel')}</span>
<span className='system-kbd rounded-[4px] bg-components-kbd-bg-gray px-[1px] text-text-tertiary'>ESC</span>
</div>
</Button>
{(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk)
@@ -58,7 +58,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
onClick={handleRegeneration}
disabled={loading}
>
<span className='text-components-button-secondary-text system-sm-medium'>
<span className='system-sm-medium text-components-button-secondary-text'>
{t('common.operation.saveAndRegenerate')}
</span>
</Button>
@@ -72,8 +72,8 @@ const ActionButtons: FC<IActionButtonsProps> = ({
<div className='flex items-center gap-x-1'>
<span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
<div className='flex items-center gap-x-0.5'>
<span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
<span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
<span className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white capitalize text-text-primary-on-surface'>{getKeyboardKeyNameBySystem('ctrl')}</span>
<span className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface'>S</span>
</div>
</div>
</Button>

2
web/app/components/datasets/documents/detail/completed/common/add-another.tsx
View File

@@ -24,7 +24,7 @@ const AddAnother: FC<AddAnotherProps> = ({
checked={isChecked}
onCheck={onCheck}
/>
<span className='text-text-tertiary system-xs-medium'>{t('datasetDocuments.segment.addAnother')}</span>
<span className='system-xs-medium text-text-tertiary'>{t('datasetDocuments.segment.addAnother')}</span>
</div>
)
}

30
web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
View File

@@ -44,30 +44,30 @@ const BatchAction: FC<IBatchActionProps> = ({
}
return (
<div className={classNames('w-full flex justify-center gap-x-2', className)}>
<div className='flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
<div className='inline-flex items-center gap-x-2 pl-2 pr-3 py-1'>
<span className='w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium'>
<div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
<div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
<span className='flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface'>
{selectedIds.length}
</span>
<span className='text-text-accent text-[13px] font-semibold leading-[16px]'>{t(`${i18nPrefix}.selected`)}</span>
<span className='text-[13px] font-semibold leading-[16px] text-text-accent'>{t(`${i18nPrefix}.selected`)}</span>
</div>
<Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiCheckboxCircleLine className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchEnable}>
<RiCheckboxCircleLine className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchEnable}>
{t(`${i18nPrefix}.enable`)}
</button>
</div>
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiCloseCircleLine className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
<RiCloseCircleLine className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onBatchDisable}>
{t(`${i18nPrefix}.disable`)}
</button>
</div>
{onEditMetadata && (
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiDraftLine className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onEditMetadata}>
<RiDraftLine className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onEditMetadata}>
{t('dataset.metadata.metadata')}
</button>
</div>
@@ -75,21 +75,21 @@ const BatchAction: FC<IBatchActionProps> = ({
{onArchive && (
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiArchive2Line className='w-4 h-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onArchive}>
<RiArchive2Line className='h-4 w-4 text-components-button-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onArchive}>
{t(`${i18nPrefix}.archive`)}
</button>
</div>
)}
<div className='flex items-center gap-x-0.5 px-3 py-2'>
<RiDeleteBinLine className='w-4 h-4 text-components-button-destructive-ghost-text' />
<button type='button' className='px-0.5 text-components-button-destructive-ghost-text text-[13px] font-medium leading-[16px]' onClick={showDeleteConfirm}>
<RiDeleteBinLine className='h-4 w-4 text-components-button-destructive-ghost-text' />
<button type='button' className='px-0.5 text-[13px] font-medium leading-[16px] text-components-button-destructive-ghost-text' onClick={showDeleteConfirm}>
{t(`${i18nPrefix}.delete`)}
</button>
</div>
<Divider type='vertical' className='mx-0.5 h-3.5 bg-divider-regular' />
<button type='button' className='px-3.5 py-2 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onCancel}>
<button type='button' className='px-3.5 py-2 text-[13px] font-medium leading-[16px] text-components-button-ghost-text' onClick={onCancel}>
{t(`${i18nPrefix}.cancel`)}
</button>
</div>

10
web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
View File

@@ -120,9 +120,9 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
return (
<div ref={containerRef} className='h-full overflow-hidden'>
<div ref={labelRef} className='text-text-tertiary text-xs font-medium mb-1'>QUESTION</div>
<div ref={labelRef} className='mb-1 text-xs font-medium text-text-tertiary'>QUESTION</div>
<AutoResizeTextArea
className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
className='text-sm tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
value={question}
placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
onChange={e => onQuestionChange(e.target.value)}
@@ -130,9 +130,9 @@ const QATextArea: FC<IQATextAreaProps> = React.memo(({
containerRef={containerRef}
labelRef={labelRef}
/>
<div className='text-text-tertiary text-xs font-medium mb-1 mt-6'>ANSWER</div>
<div className='mb-1 mt-6 text-xs font-medium text-text-tertiary'>ANSWER</div>
<AutoResizeTextArea
className='text-text-secondary text-sm tracking-[-0.07px] caret-[#295EFF]'
className='text-sm tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
value={answer}
placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
onChange={e => onAnswerChange?.(e.target.value)}
@@ -188,7 +188,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
return (
<Textarea
className='h-full w-full pb-6 body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
className='body-md-regular h-full w-full pb-6 tracking-[-0.07px] text-text-secondary caret-[#295EFF]'
value={question}
placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
onChange={e => onQuestionChange(e.target.value)}

2
web/app/components/datasets/documents/detail/completed/common/dot.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react'
const Dot = () => {
return (
<div className='text-text-quaternary system-xs-medium'>·</div>
<div className='system-xs-medium text-text-quaternary'>·</div>
)
}

20
web/app/components/datasets/documents/detail/completed/common/empty.tsx
View File

@@ -8,7 +8,7 @@ type IEmptyProps = {
const EmptyCard = React.memo(() => {
return (
<div className='w-full h-32 rounded-xl opacity-30 bg-background-section-burn shrink-0' />
<div className='h-32 w-full shrink-0 rounded-xl bg-background-section-burn opacity-30' />
)
})
@@ -43,34 +43,34 @@ const Empty: FC<IEmptyProps> = ({
const { t } = useTranslation()
return (
<div className={'h-full relative flex items-center justify-center z-0'}>
<div className={'relative z-0 flex h-full items-center justify-center'}>
<div className='flex flex-col items-center'>
<div className='relative z-10 flex items-center justify-center w-14 h-14 border border-divider-subtle bg-components-card-bg rounded-xl shadow-lg shadow-shadow-shadow-5'>
<RiFileList2Line className='w-6 h-6 text-text-secondary' />
<div className='relative z-10 flex h-14 w-14 items-center justify-center rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg shadow-shadow-shadow-5'>
<RiFileList2Line className='h-6 w-6 text-text-secondary' />
<Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
<Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
<Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
<Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
</div>
<div className='text-text-tertiary system-md-regular mt-3'>
<div className='system-md-regular mt-3 text-text-tertiary'>
{t('datasetDocuments.segment.empty')}
</div>
<button
type='button'
className='text-text-accent system-sm-medium mt-1'
className='system-sm-medium mt-1 text-text-accent'
onClick={onClearFilter}
>
{t('datasetDocuments.segment.clearFilter')}
</button>
</div>
<div className='h-full w-full absolute top-0 left-0 flex flex-col gap-y-3 -z-20 overflow-hidden'>
<div className='absolute left-0 top-0 -z-20 flex h-full w-full flex-col gap-y-3 overflow-hidden'>
{
Array.from({ length: 10 }).map((_, i) => (
<EmptyCard key={i} />
))
}
</div>
<div className='h-full w-full absolute top-0 left-0 bg-dataset-chunk-list-mask-bg -z-10' />
<div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-list-mask-bg' />
</div>
)
}

4
web/app/components/datasets/documents/detail/completed/common/keywords.tsx
View File

@@ -24,8 +24,8 @@ const Keywords: FC<IKeywordsProps> = ({
const { t } = useTranslation()
return (
<div className={classNames('flex flex-col', className)}>
<div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
<div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
<div className='system-xs-medium-uppercase text-text-tertiary'>{t('datasetDocuments.segment.keywords')}</div>
<div className='flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto text-text-tertiary'>
{(!segInfo?.keywords?.length && actionType === 'view')
? '-'
: (

14
web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
View File

@@ -20,8 +20,8 @@ const DefaultContent: FC<IDefaultContentProps> = React.memo(({
return (
<>
<div className='pb-4'>
<span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regenerationConfirmTitle')}</span>
<p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regenerationConfirmMessage')}</p>
<span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regenerationConfirmTitle')}</span>
<p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regenerationConfirmMessage')}</p>
</div>
<div className='flex justify-end gap-x-2 pt-6'>
<Button onClick={onCancel}>
@@ -43,12 +43,12 @@ const RegeneratingContent: FC = React.memo(() => {
return (
<>
<div className='pb-4'>
<span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regeneratingTitle')}</span>
<p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regeneratingMessage')}</p>
<span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regeneratingTitle')}</span>
<p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regeneratingMessage')}</p>
</div>
<div className='flex justify-end pt-6'>
<Button variant='warning' destructive disabled className='inline-flex items-center gap-x-0.5'>
<RiLoader2Line className='w-4 h-4 text-components-button-destructive-primary-text-disabled animate-spin' />
<RiLoader2Line className='h-4 w-4 animate-spin text-components-button-destructive-primary-text-disabled' />
<span>{t('common.operation.regenerate')}</span>
</Button>
</div>
@@ -77,8 +77,8 @@ const RegenerationCompletedContent: FC<IRegenerationCompletedContentProps> = Rea
return (
<>
<div className='pb-4'>
<span className='text-text-primary title-2xl-semi-bold'>{t('datasetDocuments.segment.regenerationSuccessTitle')}</span>
<p className='text-text-secondary system-md-regular'>{t('datasetDocuments.segment.regenerationSuccessMessage')}</p>
<span className='title-2xl-semi-bold text-text-primary'>{t('datasetDocuments.segment.regenerationSuccessTitle')}</span>
<p className='system-md-regular text-text-secondary'>{t('datasetDocuments.segment.regenerationSuccessMessage')}</p>
</div>
<div className='flex justify-end pt-6'>
<Button variant='primary' onClick={onClose}>

4
web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
View File

@@ -27,8 +27,8 @@ export const SegmentIndexTag: FC<ISegmentIndexTagProps> = ({
}, [positionId, labelPrefix])
return (
<div className={cn('flex items-center', className)}>
<Chunk className={cn('w-3 h-3 p-[1px] text-text-tertiary mr-0.5', iconClassName)} />
<div className={cn('text-text-tertiary system-xs-medium', labelClassName)}>
<Chunk className={cn('mr-0.5 h-3 w-3 p-[1px] text-text-tertiary', iconClassName)} />
<div className={cn('system-xs-medium text-text-tertiary', labelClassName)}>
{label || localPositionId}
</div>
</div>

4
web/app/components/datasets/documents/detail/completed/common/tag.tsx
View File

@@ -4,8 +4,8 @@ import cn from '@/utils/classnames'
const Tag = ({ text, className }: { text: string; className?: string }) => {
return (
<div className={cn('inline-flex items-center gap-x-0.5', className)}>
<span className='text-text-quaternary text-xs font-medium'>#</span>
<span className='text-text-tertiary text-xs max-w-12 line-clamp-1 shrink-0'>{text}</span>
<span className='text-xs font-medium text-text-quaternary'>#</span>
<span className='line-clamp-1 max-w-12 shrink-0 text-xs text-text-tertiary'>{text}</span>
</div>
)
}

8
web/app/components/datasets/documents/detail/completed/display-toggle.tsx
View File

@@ -22,14 +22,14 @@ const DisplayToggle: FC<DisplayToggleProps> = ({
>
<button
type='button'
className='flex items-center justify-center p-2 rounded-lg bg-components-button-secondary-bg
border-[0.5px] border-components-button-secondary-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
className='flex items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border
bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
onClick={toggleCollapsed}
>
{
isCollapsed
? <RiLineHeight className='w-4 h-4 text-components-button-secondary-text' />
: <Collapse className='w-4 h-4 text-components-button-secondary-text' />
? <RiLineHeight className='h-4 w-4 text-components-button-secondary-text' />
: <Collapse className='h-4 w-4 text-components-button-secondary-text' />
}
</button>

14
web/app/components/datasets/documents/detail/completed/index.tsx
View File

@@ -410,9 +410,9 @@ const Completed: FC<ICompletedProps> = ({
setSelectedSegmentIds((prev) => {
const currentAllSegIds = segments.map(seg => seg.id)
const prevSelectedIds = prev.filter(item => !currentAllSegIds.includes(item))
return [...prevSelectedIds, ...((isAllSelected || selectedSegmentIds.length > 0) ? [] : currentAllSegIds)]
return [...prevSelectedIds, ...(isAllSelected ? [] : currentAllSegIds)]
})
}, [segments, isAllSelected, selectedSegmentIds])
}, [segments, isAllSelected])
const totalText = useMemo(() => {
const isSearch = searchValue !== '' || selectedStatus !== 'all'
@@ -586,7 +586,7 @@ const Completed: FC<ICompletedProps> = ({
onCheck={onSelectedAll}
disabled={isLoadingSegmentList}
/>
<div className={'system-sm-semibold-uppercase pl-5 text-text-secondary flex-1'}>{totalText}</div>
<div className={'system-sm-semibold-uppercase flex-1 pl-5 text-text-secondary'}>{totalText}</div>
<SimpleSelect
onSelect={onChangeStatus}
items={statusList.current}
@@ -606,14 +606,14 @@ const Completed: FC<ICompletedProps> = ({
onChange={e => handleInputChange(e.target.value)}
onClear={() => handleInputChange('')}
/>
<Divider type='vertical' className='h-3.5 mx-3' />
<Divider type='vertical' className='mx-3 h-3.5' />
<DisplayToggle isCollapsed={isCollapsed} toggleCollapsed={() => setIsCollapsed(!isCollapsed)} />
</div>}
{/* Segment list */}
{
isFullDocMode
? <div className={cn(
'flex flex-col grow overflow-x-hidden',
'flex grow flex-col overflow-x-hidden',
(isLoadingSegmentList || isLoadingChildSegmentList) ? 'overflow-y-hidden' : 'overflow-y-auto',
)}>
<SegmentCard
@@ -657,7 +657,7 @@ const Completed: FC<ICompletedProps> = ({
/>
}
{/* Pagination */}
<Divider type='horizontal' className='w-auto h-[1px] my-0 mx-6 bg-divider-subtle' />
<Divider type='horizontal' className='mx-6 my-0 h-[1px] w-auto bg-divider-subtle' />
<Pagination
current={currentPage - 1}
onChange={cur => setCurrentPage(cur + 1)}
@@ -723,7 +723,7 @@ const Completed: FC<ICompletedProps> = ({
{/* Batch Action Buttons */}
{selectedSegmentIds.length > 0
&& <BatchAction
className='absolute left-0 bottom-16 z-20'
className='absolute bottom-16 left-0 z-20'
selectedIds={selectedSegmentIds}
onBatchEnable={onChangeSwitch.bind(null, true, '')}
onBatchDisable={onChangeSwitch.bind(null, false, '')}

22
web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
View File

@@ -53,10 +53,10 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
}, [parentMode])
const CustomButton = <>
<Divider type='vertical' className='h-3 mx-1 bg-divider-regular' />
<Divider type='vertical' className='mx-1 h-3 bg-divider-regular' />
<button
type='button'
className='text-text-accent system-xs-semibold'
className='system-xs-semibold text-text-accent'
onClick={() => {
clearTimeout(refreshTimer.current)
viewNewlyAddedChildChunk?.()
@@ -113,14 +113,14 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
}, [content.length])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{t('datasetDocuments.segment.addChildChunk')}</div>
<div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag label={t('datasetDocuments.segment.newChildChunk') as string} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
</div>
</div>
<div className='flex items-center'>
@@ -134,14 +134,14 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
actionType='add'
isChildChunk={true}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -156,7 +156,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
</div>
</div>
{!fullScreen && (
<div className='flex items-center justify-between p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-between border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<AddAnother isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
<ActionButtons
handleCancel={handleCancel.bind(null, 'esc')}

10
web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
View File

@@ -25,17 +25,17 @@ const ChunkContent: FC<ChunkContentProps> = ({
return (
<div className={className}>
<div className='flex gap-x-1'>
<div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>Q</div>
<div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>Q</div>
<div
className={cn('text-text-secondary body-md-regular',
className={cn('body-md-regular text-text-secondary',
isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
)}>
{content}
</div>
</div>
<div className='flex gap-x-1'>
<div className='w-4 text-[13px] font-medium leading-[20px] text-text-tertiary shrink-0'>A</div>
<div className={cn('text-text-secondary body-md-regular',
<div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>A</div>
<div className={cn('body-md-regular text-text-secondary',
isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
)}>
{answer}
@@ -45,7 +45,7 @@ const ChunkContent: FC<ChunkContentProps> = ({
)
}
return <Markdown
className={cn('!text-text-secondary !mt-0.5',
className={cn('!mt-0.5 !text-text-secondary',
isFullDocMode ? 'line-clamp-3' : isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
className,
)}

24
web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
View File

@@ -120,14 +120,14 @@ const SegmentCard: FC<ISegmentCardProps> = ({
return (
<div
className={cn(
'w-full px-3 rounded-xl group/card',
isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg',
'group/card w-full rounded-xl px-3',
isFullDocMode ? '' : 'pb-2 pt-2.5 hover:bg-dataset-chunk-detail-card-hover-bg',
focused.segmentContent ? 'bg-dataset-chunk-detail-card-hover-bg' : '',
className,
)}
onClick={handleClickCard}
>
<div className='h-5 relative flex items-center justify-between'>
<div className='relative flex h-5 items-center justify-between'>
<>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag
@@ -139,9 +139,9 @@ const SegmentCard: FC<ISegmentCardProps> = ({
labelPrefix={labelPrefix}
/>
<Dot />
<div className={cn('text-text-tertiary system-xs-medium', contentOpacity)}>{wordCountText}</div>
<div className={cn('system-xs-medium text-text-tertiary', contentOpacity)}>{wordCountText}</div>
<Dot />
<div className={cn('text-text-tertiary system-xs-medium', contentOpacity)}>{`${formatNumber(hit_count)} ${t('datasetDocuments.segment.hitCount')}`}</div>
<div className={cn('system-xs-medium text-text-tertiary', contentOpacity)}>{`${formatNumber(hit_count)} ${t('datasetDocuments.segment.hitCount')}`}</div>
{chunkEdited && (
<>
<Dot />
@@ -153,8 +153,8 @@ const SegmentCard: FC<ISegmentCardProps> = ({
? <div className='flex items-center'>
<StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
{embeddingAvailable && (
<div className="absolute -top-2 -right-2.5 z-20 hidden group-hover/card:flex items-center gap-x-0.5 p-1
rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-[5px]">
<div className="absolute -right-2.5 -top-2 z-20 hidden items-center gap-x-0.5 rounded-[10px] border-[0.5px]
border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-md backdrop-blur-[5px] group-hover/card:flex">
{!archived && (
<>
<Tooltip
@@ -162,25 +162,25 @@ const SegmentCard: FC<ISegmentCardProps> = ({
popupClassName='text-text-secondary system-xs-medium'
>
<div
className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer'
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover'
onClick={(e) => {
e.stopPropagation()
onClickEdit?.()
}}>
<RiEditLine className='w-4 h-4 text-text-tertiary' />
<RiEditLine className='h-4 w-4 text-text-tertiary' />
</div>
</Tooltip>
<Tooltip
popupContent='Delete'
popupClassName='text-text-secondary system-xs-medium'
>
<div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-destructive-hover cursor-pointer group/delete'
<div className='group/delete flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-destructive-hover'
onClick={(e) => {
e.stopPropagation()
setShowModal(true)
}
}>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary group-hover/delete:text-text-destructive' />
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover/delete:text-text-destructive' />
</div>
</Tooltip>
<Divider type="vertical" className="h-3.5 bg-divider-regular" />
@@ -223,7 +223,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
isFullDocMode
? <button
type='button'
className='mt-0.5 mb-2 text-text-accent system-xs-semibold-uppercase'
className='system-xs-semibold-uppercase mb-2 mt-0.5 text-text-accent'
onClick={() => onClick?.()}
>{t('common.operation.viewMore')}</button>
: null

18
web/app/components/datasets/documents/detail/completed/segment-detail.tsx
View File

@@ -107,14 +107,14 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
}, [isParentChildMode])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{titleText}</div>
<div className='system-xl-semibold text-text-primary'>{titleText}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag positionId={segInfo?.position || ''} label={isFullDocMode ? labelPrefix : ''} labelPrefix={labelPrefix} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
</div>
</div>
<div className='flex items-center'>
@@ -126,14 +126,14 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
handleSave={handleSave}
loading={loading}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='w-4 h-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />}
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
{fullScreen ? <RiCollapseDiagonalLine className='h-4 w-4 text-text-tertiary' /> : <RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />}
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={onCancel}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -162,7 +162,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
/>}
</div>
{isEditMode && !fullScreen && (
<div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-end border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<ActionButtons
handleCancel={handleCancel}
handleRegeneration={handleRegeneration}

47
web/app/components/datasets/documents/detail/completed/segment-list.tsx
View File

@@ -1,4 +1,4 @@
import React, { type ForwardedRef, useMemo } from 'react'
import React, { useMemo } from 'react'
import { useDocumentContext } from '../index'
import SegmentCard from './segment-card'
import Empty from './common/empty'
@@ -25,22 +25,25 @@ type ISegmentListProps = {
onClearFilter: () => void
}
const SegmentList = React.forwardRef(({
isLoading,
items,
selectedSegmentIds,
onSelected,
onClick: onClickCard,
onChangeSwitch,
onDelete,
onDeleteChildChunk,
handleAddNewChildChunk,
onClickSlice,
archived,
embeddingAvailable,
onClearFilter,
}: ISegmentListProps,
ref: ForwardedRef<HTMLDivElement>,
const SegmentList = (
{
ref,
isLoading,
items,
selectedSegmentIds,
onSelected,
onClick: onClickCard,
onChangeSwitch,
onDelete,
onDeleteChildChunk,
handleAddNewChildChunk,
onClickSlice,
archived,
embeddingAvailable,
onClearFilter,
}: ISegmentListProps & {
ref: React.RefObject<unknown>;
},
) => {
const mode = useDocumentContext(s => s.mode)
const parentMode = useDocumentContext(s => s.parentMode)
@@ -63,7 +66,7 @@ ref: ForwardedRef<HTMLDivElement>,
)
}
return (
<div ref={ref} className={'flex flex-col grow overflow-y-auto'}>
<div ref={ref} className={'flex grow flex-col overflow-y-auto'}>
{
items.map((segItem) => {
const isLast = items[items.length - 1].id === segItem.id
@@ -76,11 +79,11 @@ ref: ForwardedRef<HTMLDivElement>,
<div key={segItem.id} className='flex items-start gap-x-2'>
<Checkbox
key={`${segItem.id}-checkbox`}
className='shrink-0 mt-3.5'
className='mt-3.5 shrink-0'
checked={selectedSegmentIds.includes(segItem.id)}
onCheck={() => onSelected(segItem.id)}
/>
<div className='grow min-w-0'>
<div className='min-w-0 grow'>
<SegmentCard
key={`${segItem.id}-card`}
detail={segItem}
@@ -100,7 +103,7 @@ ref: ForwardedRef<HTMLDivElement>,
}}
/>
{!isLast && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
</div>
@@ -109,7 +112,7 @@ ref: ForwardedRef<HTMLDivElement>,
}
</div>
)
})
}
SegmentList.displayName = 'SegmentList'

10
web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx
View File

@@ -3,10 +3,10 @@ import React from 'react'
const Slice = React.memo(() => {
return (
<div className='flex flex-col gap-y-1'>
<div className='w-full h-5 bg-state-base-hover flex items-center'>
<span className='w-[30px] h-5 bg-state-base-hover-alt' />
<div className='flex h-5 w-full items-center bg-state-base-hover'>
<span className='h-5 w-[30px] bg-state-base-hover-alt' />
</div>
<div className='w-2/3 h-5 bg-state-base-hover' />
<div className='h-5 w-2/3 bg-state-base-hover' />
</div>
)
})
@@ -15,8 +15,8 @@ Slice.displayName = 'Slice'
const FullDocListSkeleton = () => {
return (
<div className='w-full grow flex flex-col gap-y-3 relative z-10 overflow-y-hidden'>
<div className='absolute top-0 left-0 bottom-14 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex w-full grow flex-col gap-y-3 overflow-y-hidden'>
<div className='absolute bottom-14 left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 15 })].map((_, index) => <Slice key={index} />)}
</div>
)

14
web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx
View File

@@ -10,8 +10,8 @@ import Divider from '@/app/components/base/divider'
export const CardSkelton = React.memo(() => {
return (
<SkeletonContainer className='p-1 pb-2 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-2'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -20,7 +20,7 @@ export const CardSkelton = React.memo(() => {
<SkeletonRectangle className='w-24 bg-text-quaternary' />
<SkeletonRow className='grow justify-end gap-1'>
<SkeletonRectangle className='w-12 bg-text-quaternary' />
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
<SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
<SkeletonRow className='py-0.5'>
@@ -48,20 +48,20 @@ CardSkelton.displayName = 'CardSkelton'
const GeneralListSkeleton = () => {
return (
<div className='relative flex flex-col grow overflow-y-hidden z-10'>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex grow flex-col overflow-y-hidden'>
<div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 10 })].map((_, index) => {
return (
<div key={index} className='flex items-start gap-x-2'>
<Checkbox
key={`${index}-checkbox`}
className='shrink-0 mt-3.5'
className='mt-3.5 shrink-0'
disabled
/>
<div className='grow'>
<CardSkelton />
{index !== 9 && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
</div>

18
web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx
View File

@@ -11,8 +11,8 @@ import Divider from '@/app/components/base/divider'
const CardSkelton = React.memo(() => {
return (
<SkeletonContainer className='p-1 pb-2 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-2'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -21,7 +21,7 @@ const CardSkelton = React.memo(() => {
<SkeletonRectangle className='w-24 bg-text-quaternary' />
<SkeletonRow className='grow justify-end gap-1'>
<SkeletonRectangle className='w-12 bg-text-quaternary' />
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
<SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
<SkeletonRow className='py-0.5'>
@@ -36,8 +36,8 @@ const CardSkelton = React.memo(() => {
</SkeletonContainer>
<SkeletonContainer className='p-1 pb-2'>
<SkeletonRow>
<SkeletonRow className='h-7 pl-1 pr-3 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg'>
<RiArrowRightSLine className='w-4 h-4 text-text-secondary opacity-20' />
<SkeletonRow className='h-7 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg pl-1 pr-3'>
<RiArrowRightSLine className='h-4 w-4 text-text-secondary opacity-20' />
<SkeletonRectangle className='w-32 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
@@ -50,20 +50,20 @@ CardSkelton.displayName = 'CardSkelton'
const ParagraphListSkeleton = () => {
return (
<div className='relative flex flex-col h-full overflow-y-hidden z-10'>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex h-full flex-col overflow-y-hidden'>
<div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 10 })].map((_, index) => {
return (
<div key={index} className='flex items-start gap-x-2'>
<Checkbox
key={`${index}-checkbox`}
className='shrink-0 mt-3.5'
className='mt-3.5 shrink-0'
disabled
/>
<div className='grow'>
<CardSkelton />
{index !== 9 && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
</div>

8
web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx
View File

@@ -11,8 +11,8 @@ const ParentChunkCardSkelton = () => {
const { t } = useTranslation()
return (
<div className='flex flex-col pb-2'>
<SkeletonContainer className='p-1 pb-0 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-0'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -31,8 +31,8 @@ const ParentChunkCardSkelton = () => {
</SkeletonRow>
</SkeletonContainer>
</SkeletonContainer>
<div className='flex items-center px-3 mt-0.5'>
<button type='button' className='pt-0.5 text-components-button-secondary-accent-text-disabled system-xs-semibold-uppercase' disabled>
<div className='mt-0.5 flex items-center px-3'>
<button type='button' className='system-xs-semibold-uppercase pt-0.5 text-components-button-secondary-accent-text-disabled' disabled>
{t('common.operation.viewMore')}
</button>
</div>

4
web/app/components/datasets/documents/detail/completed/status-item.tsx
View File

@@ -12,9 +12,9 @@ const StatusItem: FC<IStatusItemProps> = ({
selected,
}) => {
return (
<div className='flex items-center justify-between py-1.5 px-2'>
<div className='flex items-center justify-between px-2 py-1.5'>
<span className='system-md-regular'>{item.name}</span>
{selected && <RiCheckLine className='w-4 h-4 text-text-accent' />}
{selected && <RiCheckLine className='h-4 w-4 text-text-accent' />}
</div>
)
}

30
web/app/components/datasets/documents/detail/embedding/index.tsx
View File

@@ -248,10 +248,10 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
return (
<>
<div className='py-12 px-16 flex flex-col gap-y-2'>
<div className='flex items-center gap-x-1 h-6'>
{isEmbedding && <RiLoader2Line className='h-4 w-4 text-text-secondary animate-spin' />}
<span className='grow text-text-secondary system-md-semibold-uppercase'>
<div className='flex flex-col gap-y-2 px-16 py-12'>
<div className='flex h-6 items-center gap-x-1'>
{isEmbedding && <RiLoader2Line className='h-4 w-4 animate-spin text-text-secondary' />}
<span className='system-md-semibold-uppercase grow text-text-secondary'>
{isEmbedding && t('datasetDocuments.embedding.processing')}
{isEmbeddingCompleted && t('datasetDocuments.embedding.completed')}
{isEmbeddingPaused && t('datasetDocuments.embedding.paused')}
@@ -260,12 +260,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
{isEmbedding && (
<button
type='button'
className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
className={`flex items-center gap-x-1 rounded-md border-[0.5px]
border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
onClick={handleSwitch}
>
<RiPauseCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
<RiPauseCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
{t('datasetDocuments.embedding.pause')}
</span>
</button>
@@ -273,12 +273,12 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
{isEmbeddingPaused && (
<button
type='button'
className={`px-1.5 py-1 border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] flex items-center gap-x-1 rounded-md`}
className={`flex items-center gap-x-1 rounded-md border-[0.5px]
border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]`}
onClick={handleSwitch}
>
<RiPlayCircleLine className='w-3.5 h-3.5 text-components-button-secondary-text' />
<span className='pr-[3px] text-components-button-secondary-text system-xs-medium'>
<RiPlayCircleLine className='h-3.5 w-3.5 text-components-button-secondary-text' />
<span className='system-xs-medium pr-[3px] text-components-button-secondary-text'>
{t('datasetDocuments.embedding.resume')}
</span>
</button>
@@ -286,7 +286,7 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
</div>
{/* progress bar */}
<div className={cn(
'flex items-center w-full h-2 rounded-md border border-components-progress-bar-border overflow-hidden',
'flex h-2 w-full items-center overflow-hidden rounded-md border border-components-progress-bar-border',
isEmbedding ? 'bg-components-progress-bar-bg bg-opacity-50' : 'bg-components-progress-bar-bg',
)}>
<div
@@ -298,8 +298,8 @@ const EmbeddingDetail: FC<IEmbeddingDetailProps> = ({
style={{ width: `${percent}%` }}
/>
</div>
<div className={'w-full flex items-center'}>
<span className='text-text-secondary system-xs-medium'>
<div className={'flex w-full items-center'}>
<span className='system-xs-medium text-text-secondary'>
{`${t('datasetDocuments.embedding.segments')} ${indexingStatusDetail?.completed_segments || '--'}/${indexingStatusDetail?.total_segments || '--'} · ${percent}%`}
</span>
</div>

12
web/app/components/datasets/documents/detail/embedding/skeleton/index.tsx
View File

@@ -9,8 +9,8 @@ import Divider from '@/app/components/base/divider'
const CardSkelton = React.memo(() => {
return (
<SkeletonContainer className='p-1 pb-2 gap-y-0'>
<SkeletonContainer className='px-2 pt-1.5 gap-y-0.5'>
<SkeletonContainer className='gap-y-0 p-1 pb-2'>
<SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
<SkeletonRow className='py-0.5'>
<SkeletonRectangle className='w-[72px] bg-text-quaternary' />
<SkeletonPoint className='opacity-20' />
@@ -19,7 +19,7 @@ const CardSkelton = React.memo(() => {
<SkeletonRectangle className='w-24 bg-text-quaternary' />
<SkeletonRow className='grow justify-end gap-1'>
<SkeletonRectangle className='w-12 bg-text-quaternary' />
<SkeletonRectangle className='w-2 bg-text-quaternary mx-1' />
<SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
</SkeletonRow>
</SkeletonRow>
<SkeletonRow className='py-0.5'>
@@ -47,14 +47,14 @@ CardSkelton.displayName = 'CardSkelton'
const EmbeddingSkeleton = () => {
return (
<div className='relative flex flex-col grow overflow-y-hidden z-10'>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg z-20' />
<div className='relative z-10 flex grow flex-col overflow-y-hidden'>
<div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
{[...Array.from({ length: 5 })].map((_, index) => {
return (
<div key={index} className='w-full px-11'>
<CardSkelton />
{index !== 9 && <div className='w-full px-3'>
<Divider type='horizontal' className='bg-divider-subtle my-1' />
<Divider type='horizontal' className='my-1 bg-divider-subtle' />
</div>}
</div>
)

24
web/app/components/datasets/documents/detail/index.tsx
View File

@@ -54,7 +54,7 @@ type DocumentTitleProps = {
export const DocumentTitle: FC<DocumentTitleProps> = ({ datasetId, extension, name, processMode, parent_mode, wrapperCls }) => {
const router = useRouter()
return (
<div className={cn('flex items-center justify-start flex-1', wrapperCls)}>
<div className={cn('flex flex-1 items-center justify-start', wrapperCls)}>
<DocumentPicker
datasetId={datasetId}
value={{
@@ -191,10 +191,10 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
mode,
parentMode,
}}>
<div className='flex flex-col h-full bg-background-default'>
<div className='flex items-center justify-between flex-wrap min-h-16 pl-3 pr-4 py-2.5 border-b border-b-divider-subtle'>
<div onClick={backToPrev} className={'shrink-0 rounded-full w-8 h-8 flex justify-center items-center cursor-pointer hover:bg-components-button-tertiary-bg'}>
<RiArrowLeftLine className='text-components-button-ghost-text hover:text-text-tertiary w-4 h-4' />
<div className='flex h-full flex-col bg-background-default'>
<div className='flex min-h-16 flex-wrap items-center justify-between border-b border-b-divider-subtle py-2.5 pl-3 pr-4'>
<div onClick={backToPrev} className={'flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-components-button-tertiary-bg'}>
<RiArrowLeftLine className='h-4 w-4 text-components-button-ghost-text hover:text-text-tertiary' />
</div>
<DocumentTitle
datasetId={datasetId}
@@ -204,7 +204,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
parent_mode={parentMode}
processMode={mode}
/>
<div className='flex items-center flex-wrap'>
<div className='flex flex-wrap items-center'>
{embeddingAvailable && documentDetail && !documentDetail.archived && !isFullDocMode && (
<>
<SegmentAdd
@@ -214,7 +214,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
showBatchModal={showBatchModal}
embedding={embedding}
/>
<Divider type='vertical' className='!bg-divider-regular !h-[14px] !mx-3' />
<Divider type='vertical' className='!mx-3 !h-[14px] !bg-divider-regular' />
</>
)}
<StatusItem
@@ -251,17 +251,17 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
>
{
showMetadata
? <LayoutRight2LineMod className='w-4 h-4 text-components-button-secondary-text' />
: <RiLayoutRight2Line className='w-4 h-4 text-components-button-secondary-text' />
? <LayoutRight2LineMod className='h-4 w-4 text-components-button-secondary-text' />
: <RiLayoutRight2Line className='h-4 w-4 text-components-button-secondary-text' />
}
</button>
</div>
</div>
<div className='flex flex-row flex-1' style={{ height: 'calc(100% - 4rem)' }}>
<div className='flex flex-1 flex-row' style={{ height: 'calc(100% - 4rem)' }}>
{isDetailLoading
? <Loading type='app' />
: <div className={cn('h-full grow min-w-0 flex flex-col',
embedding ? '' : isFullDocMode ? 'relative pt-4 pr-11 pl-11' : 'relative pt-3 pr-11 pl-5',
: <div className={cn('flex h-full min-w-0 grow flex-col',
embedding ? '' : isFullDocMode ? 'relative pl-11 pr-11 pt-4' : 'relative pl-5 pr-11 pt-3',
)}>
{embedding
? <Embedding

12
web/app/components/datasets/documents/detail/metadata/index.tsx
View File

@@ -29,7 +29,7 @@ const map2Options = (map: { [key: string]: string }) => {
return Object.keys(map).map(key => ({ value: key, name: map[key] }))
}
interface IFieldInfoProps {
type IFieldInfoProps = {
label: string
value?: string
valueIcon?: ReactNode
@@ -58,9 +58,9 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
const readAlignTop = !showEdit && textNeedWrap
return (
<div className={cn('flex items-center gap-1 py-0.5 min-h-5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
<div className={cn('w-[200px] text-text-tertiary overflow-hidden text-ellipsis whitespace-nowrap shrink-0', editAlignTop && 'pt-1')}>{label}</div>
<div className="grow flex items-center gap-1 text-text-secondary">
<div className={cn('flex min-h-5 items-center gap-1 py-0.5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
<div className={cn('w-[200px] shrink-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-tertiary', editAlignTop && 'pt-1')}>{label}</div>
<div className="flex grow items-center gap-1 text-text-secondary">
{valueIcon}
{!showEdit
? displayedValue
@@ -117,7 +117,7 @@ const IconButton: FC<{
)
}
interface IMetadataProps {
type IMetadataProps = {
docDetail?: FullDocumentDetail
loading: boolean
onUpdate: () => void
@@ -348,7 +348,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
{metadataParams.documentType && <>
<TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
{metadataMap[metadataParams.documentType || 'book'].text}
{editStatus && <div className='inline-flex items-center gap-1 ml-1'>
{editStatus && <div className='ml-1 inline-flex items-center gap-1'>
·
<div
onClick={() => { setShowDocTypes(true) }}

22
web/app/components/datasets/documents/detail/new-segment.tsx
View File

@@ -51,10 +51,10 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
const refreshTimer = useRef<any>(null)
const CustomButton = <>
<Divider type='vertical' className='h-3 mx-1 bg-divider-regular' />
<Divider type='vertical' className='mx-1 h-3 bg-divider-regular' />
<button
type='button'
className='text-text-accent system-xs-semibold'
className='system-xs-semibold text-text-accent'
onClick={() => {
clearTimeout(refreshTimer.current)
viewNewlyAddedChunk()
@@ -135,16 +135,16 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
}, [question.length, answer.length, isQAModel])
return (
<div className={'flex flex-col h-full'}>
<div className={'flex h-full flex-col'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{
<div className='system-xl-semibold text-text-primary'>{
t('datasetDocuments.segment.addChunk')
}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag label={t('datasetDocuments.segment.newChunk')!} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{wordCountText}</span>
<span className='system-xs-medium text-text-tertiary'>{wordCountText}</span>
</div>
</div>
<div className='flex items-center'>
@@ -157,14 +157,14 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
loading={loading}
actionType='add'
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
<Divider type='vertical' className='ml-4 mr-2 h-3.5 bg-divider-regular' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
<div className='mr-1 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='h-4 w-4 text-text-tertiary' />
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<div className='flex h-8 w-8 cursor-pointer items-center justify-center p-1.5' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
</div>
@@ -188,7 +188,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
/>}
</div>
{!fullScreen && (
<div className='flex items-center justify-between p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<div className='flex items-center justify-between border-t-[1px] border-t-divider-subtle p-4 pt-3'>
<AddAnother isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
<ActionButtons
handleCancel={handleCancel.bind(null, 'esc')}

46
web/app/components/datasets/documents/detail/segment-add/index.tsx
View File

@@ -45,36 +45,36 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
return (
<>
{(importStatus === ProcessStatus.WAITING || importStatus === ProcessStatus.PROCESSING) && (
<div className='relative overflow-hidden inline-flex items-center mr-2 px-2.5 py-2 text-components-button-secondary-accent-text
bg-components-progress-bar-border rounded-lg border-[0.5px] border-components-progress-bar-border
<div className='relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-progress-bar-border
bg-components-progress-bar-border px-2.5 py-2 text-components-button-secondary-accent-text
shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
<div className={cn('absolute left-0 top-0 h-full bg-components-progress-bar-progress border-r-[1.5px] border-r-components-progress-bar-progress-highlight z-0', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
<RiLoader2Line className='animate-spin mr-1 w-4 h-4' />
<div className={cn('absolute left-0 top-0 z-0 h-full border-r-[1.5px] border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress', importStatus === ProcessStatus.WAITING ? 'w-3/12' : 'w-2/3')} />
<RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
<span className='system-sm-medium z-10 pr-0.5'>{t('datasetDocuments.list.batchModal.processing')}</span>
</div>
)}
{importStatus === ProcessStatus.COMPLETED && (
<div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
<div className='inline-flex items-center px-2.5 py-2 text-text-success border-r border-r-divider-subtle'>
<CheckCircle className='mr-1 w-4 h-4' />
<div className='relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
<div className='inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-success'>
<CheckCircle className='mr-1 h-4 w-4' />
<span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.completed')}</span>
</div>
<div className='m-1 inline-flex items-center'>
<span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
<span className='system-xs-medium cursor-pointer rounded-md px-1.5 py-1 text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
</div>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-success-bg opacity-40 -z-10' />
<div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-process-success-bg opacity-40' />
</div>
)}
{importStatus === ProcessStatus.ERROR && (
<div className='relative inline-flex items-center mr-2 bg-components-panel-bg rounded-lg border-[0.5px] border-components-panel-border shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] overflow-hidden'>
<div className='inline-flex items-center px-2.5 py-2 text-text-destructive border-r border-r-divider-subtle'>
<RiErrorWarningFill className='mr-1 w-4 h-4' />
<div className='relative mr-2 inline-flex items-center overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'>
<div className='inline-flex items-center border-r border-r-divider-subtle px-2.5 py-2 text-text-destructive'>
<RiErrorWarningFill className='mr-1 h-4 w-4' />
<span className='system-sm-medium pr-0.5'>{t('datasetDocuments.list.batchModal.error')}</span>
</div>
<div className='m-1 inline-flex items-center'>
<span className='system-xs-medium text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover px-1.5 py-1 rounded-md cursor-pointer' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
<span className='system-xs-medium cursor-pointer rounded-md px-1.5 py-1 text-components-button-ghost-text hover:bg-components-button-ghost-bg-hover' onClick={clearProcessStatus}>{t('datasetDocuments.list.batchModal.ok')}</span>
</div>
<div className='absolute top-0 left-0 w-full h-full bg-dataset-chunk-process-error-bg opacity-40 -z-10' />
<div className='absolute left-0 top-0 -z-10 h-full w-full bg-dataset-chunk-process-error-bg opacity-40' />
</div>
)}
</>
@@ -83,18 +83,18 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
return (
<div className={cn(
'flex items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] relative z-20',
'relative z-20 flex items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]',
embedding && 'border-components-button-secondary-border-disabled bg-components-button-secondary-bg-disabled',
)}>
<button
type='button'
className={`inline-flex items-center px-2.5 py-2 rounded-l-lg border-r-[1px] border-r-divider-subtle
className={`inline-flex items-center rounded-l-lg border-r-[1px] border-r-divider-subtle px-2.5 py-2
hover:bg-state-base-hover disabled:cursor-not-allowed disabled:hover:bg-transparent`}
onClick={showNewSegmentModal}
disabled={embedding}
>
<RiAddLine className={cn('w-4 h-4', textColor)} />
<span className={cn('text-[13px] leading-[16px] font-medium capitalize px-0.5 ml-0.5', textColor)}>
<RiAddLine className={cn('h-4 w-4', textColor)} />
<span className={cn('ml-0.5 px-0.5 text-[13px] font-medium capitalize leading-[16px]', textColor)}>
{t('datasetDocuments.list.action.addButton')}
</span>
</button>
@@ -105,25 +105,25 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
htmlContent={
<button
type='button'
className='w-full py-1.5 px-2 flex items-center rounded-lg text-text-secondary system-md-regular'
className='system-md-regular flex w-full items-center rounded-lg px-2 py-1.5 text-text-secondary'
onClick={showBatchModal}
>
{t('datasetDocuments.list.action.batchAdd')}
</button>
}
btnElement={
<div className='flex justify-center items-center' >
<RiArrowDownSLine className={cn('w-4 h-4', textColor)}/>
<div className='flex items-center justify-center' >
<RiArrowDownSLine className={cn('h-4 w-4', textColor)}/>
</div>
}
btnClassName={open => cn(
`!p-2 !border-0 !rounded-l-none !rounded-r-lg !hover:bg-state-base-hover backdrop-blur-[5px]
`!hover:bg-state-base-hover !rounded-l-none !rounded-r-lg !border-0 !p-2 backdrop-blur-[5px]
disabled:cursor-not-allowed disabled:bg-transparent disabled:hover:bg-transparent`,
open ? '!bg-state-base-hover' : '',
)}
popupClassName='!min-w-[128px] !bg-components-panel-bg-blur !rounded-xl border-[0.5px] !ring-0
border-components-panel-border !shadow-xl !shadow-shadow-shadow-5 backdrop-blur-[5px]'
className='min-w-[128px] h-fit'
className='h-fit min-w-[128px]'
disabled={embedding}
/>
</div>

2
web/app/components/datasets/documents/detail/settings/index.tsx
View File

@@ -16,7 +16,7 @@ import { ModelTypeEnum } from '@/app/components/header/account-setting/model-pro
import type { NotionPage } from '@/models/common'
import { useDocumentDetail, useInvalidDocumentDetailKey } from '@/service/knowledge/use-document'
interface DocumentSettingsProps {
type DocumentSettingsProps = {
datasetId: string
documentId: string
}

18
web/app/components/datasets/documents/index.tsx
View File

@@ -64,7 +64,7 @@ const EmptyElement: FC<{ canAdd: boolean; onClick: () => void; type?: 'upload' |
<div className={s.emptySymbolIconWrapper}>
{type === 'upload' ? <FolderPlusIcon /> : <NotionIcon />}
</div>
<span className={s.emptyTitle}>{t('datasetDocuments.list.empty.title')}<ThreeDotsIcon className='inline relative -top-3 -left-1.5' /></span>
<span className={s.emptyTitle}>{t('datasetDocuments.list.empty.title')}<ThreeDotsIcon className='relative -left-1.5 -top-3 inline' /></span>
<div className={s.emptyTip}>
{t(`datasetDocuments.list.empty.${type}.tip`)}
</div>
@@ -252,22 +252,22 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
})
return (
<div className='flex flex-col h-full overflow-y-auto'>
<div className='flex h-full flex-col overflow-y-auto'>
<div className='flex flex-col justify-center gap-1 px-6 pt-4'>
<h1 className='text-base font-semibold text-text-primary'>{t('datasetDocuments.list.title')}</h1>
<div className='flex items-center text-sm font-normal text-text-tertiary space-x-0.5'>
<div className='flex items-center space-x-0.5 text-sm font-normal text-text-tertiary'>
<span>{t('datasetDocuments.list.desc')}</span>
<a
className='flex items-center text-text-accent'
target='_blank'
href='https://docs.dify.ai/guides/knowledge-base/integrate-knowledge-within-application'>
<span>{t('datasetDocuments.list.learnMore')}</span>
<RiExternalLinkLine className='w-3 h-3' />
<RiExternalLinkLine className='h-3 w-3' />
</a>
</div>
</div>
<div className='flex flex-col px-6 py-4 flex-1'>
<div className='flex items-center justify-between flex-wrap'>
<div className='flex flex-1 flex-col px-6 py-4'>
<div className='flex flex-wrap items-center justify-between'>
<Input
showLeftIcon
showClearIcon
@@ -276,13 +276,13 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
onChange={e => handleInputChange(e.target.value)}
onClear={() => handleInputChange('')}
/>
<div className='flex gap-2 justify-center items-center !h-8'>
<div className='flex !h-8 items-center justify-center gap-2'>
{!isFreePlan && <AutoDisabledDocument datasetId={datasetId} />}
<IndexFailed datasetId={datasetId} />
{!embeddingAvailable && <StatusWithAction type='warning' description={t('dataset.embeddingModelNotAvailable')} />}
{embeddingAvailable && (
<Button variant='secondary' className='shrink-0' onClick={showEditMetadataModal}>
<RiDraftLine className='size-4 mr-1' />
<RiDraftLine className='mr-1 size-4' />
{t('dataset.metadata.metadata')}
</Button>
)}
@@ -300,7 +300,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
)}
{embeddingAvailable && (
<Button variant='primary' onClick={routeToDocCreate} className='shrink-0'>
<PlusIcon className={cn('h-4 w-4 mr-2 stroke-current')} />
<PlusIcon className={cn('mr-2 h-4 w-4 stroke-current')} />
{isDataSourceNotion && t('datasetDocuments.list.addPages')}
{isDataSourceWeb && t('datasetDocuments.list.addUrl')}
{(!dataset?.data_source_type || isDataSourceFile) && t('datasetDocuments.list.addFile')}

58
web/app/components/datasets/documents/list.tsx
View File

@@ -147,7 +147,7 @@ export const StatusItem: FC<{
}
{
scene === 'detail' && (
<div className='flex justify-between items-center ml-1.5'>
<div className='ml-1.5 flex items-center justify-between'>
<Tooltip
popupContent={t('datasetDocuments.list.action.enableWarning')}
popupClassName='text-text-secondary system-xs-medium'
@@ -291,12 +291,12 @@ export const OperationAction: FC<{
popupClassName='text-text-secondary system-xs-medium'
>
<button
className={cn('rounded-lg mr-2 cursor-pointer',
className={cn('mr-2 cursor-pointer rounded-lg',
!isListScene
? 'p-2 bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border hover:border-components-button-secondary-border-hover shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
? 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg p-2 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover'
: 'p-0.5 hover:bg-state-base-hover')}
onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}>
<RiEqualizer2Line className='w-4 h-4 text-components-button-secondary-text' />
<RiEqualizer2Line className='h-4 w-4 text-components-button-secondary-text' />
</button>
</Tooltip>
<Popover
@@ -310,12 +310,12 @@ export const OperationAction: FC<{
name: detail.name,
})
}}>
<RiEditLine className='w-4 h-4 text-text-tertiary' />
<RiEditLine className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.table.rename')}</span>
</div>
{['notion_import', DataSourceType.WEB].includes(data_source_type) && (
<div className={s.actionItem} onClick={() => onOperate('sync')}>
<RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
<RiLoopLeftLine className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.action.sync')}</span>
</div>
)}
@@ -323,17 +323,17 @@ export const OperationAction: FC<{
</>
)}
{!archived && <div className={s.actionItem} onClick={() => onOperate('archive')}>
<RiArchive2Line className='w-4 h-4 text-text-tertiary' />
<RiArchive2Line className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.action.archive')}</span>
</div>}
{archived && (
<div className={s.actionItem} onClick={() => onOperate('un_archive')}>
<RiArchive2Line className='w-4 h-4 text-text-tertiary' />
<RiArchive2Line className='h-4 w-4 text-text-tertiary' />
<span className={s.actionName}>{t('datasetDocuments.list.action.unarchive')}</span>
</div>
)}
<div className={cn(s.actionItem, s.deleteActionItem, 'group')} onClick={() => setShowModal(true)}>
<RiDeleteBinLine className={'w-4 h-4 text-text-tertiary group-hover:text-text-destructive'} />
<RiDeleteBinLine className={'h-4 w-4 text-text-tertiary group-hover:text-text-destructive'} />
<span className={cn(s.actionName, 'group-hover:text-text-destructive')}>{t('datasetDocuments.list.action.delete')}</span>
</div>
</div>
@@ -342,12 +342,12 @@ export const OperationAction: FC<{
position='br'
btnElement={
<div className={cn(s.commonIcon)}>
<RiMoreFill className='w-4 h-4 text-components-button-secondary-text' />
<RiMoreFill className='h-4 w-4 text-components-button-secondary-text' />
</div>
}
btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!hover:bg-state-base-hover !shadow-none' : '!bg-transparent')}
popupClassName='!w-full'
className={`flex justify-end !w-[200px] h-fit !z-20 ${className}`}
className={`!z-20 flex h-fit !w-[200px] justify-end ${className}`}
/>
</>
)}
@@ -515,16 +515,16 @@ const DocumentList: FC<IDocumentListProps> = ({
}
return (
<div className='flex flex-col relative w-full h-full'>
<div className='relative flex h-full w-full flex-col'>
<div className='relative grow overflow-x-auto'>
<table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
<thead className="h-8 leading-8 border-b border-divider-subtle text-text-tertiary font-medium text-xs uppercase">
<table className={`mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm ${s.documentTable}`}>
<thead className="h-8 border-b border-divider-subtle text-xs font-medium uppercase leading-8 text-text-tertiary">
<tr>
<td className='w-12'>
<div className='flex items-center' onClick={e => e.stopPropagation()}>
{embeddingAvailable && (
<Checkbox
className='shrink-0 mr-2'
className='mr-2 shrink-0'
checked={isAllSelected}
mixed={!isAllSelected && isSomeSelected}
onCheck={onSelectedAll}
@@ -544,7 +544,7 @@ const DocumentList: FC<IDocumentListProps> = ({
<td className='w-44'>
<div className='flex items-center' onClick={onClickSort}>
{t('datasetDocuments.list.table.header.uploadTime')}
<ArrowDownIcon className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 cursor-pointer', enableSort ? 'text-text-tertiary' : 'text-text-disabled')} />
<ArrowDownIcon className={cn('ml-0.5 h-3 w-3 cursor-pointer stroke-current stroke-2', enableSort ? 'text-text-tertiary' : 'text-text-disabled')} />
</div>
</td>
<td className='w-40'>{t('datasetDocuments.list.table.header.status')}</td>
@@ -557,14 +557,14 @@ const DocumentList: FC<IDocumentListProps> = ({
const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : ''
return <tr
key={doc.id}
className={'border-b border-divider-subtle h-8 hover:bg-background-default-hover cursor-pointer'}
className={'h-8 cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'}
onClick={() => {
router.push(`/datasets/${datasetId}/documents/${doc.id}`)
}}>
<td className='text-left align-middle text-text-tertiary text-xs'>
<td className='text-left align-middle text-xs text-text-tertiary'>
<div className='flex items-center' onClick={e => e.stopPropagation()}>
<Checkbox
className='shrink-0 mr-2'
className='mr-2 shrink-0'
checked={selectedIds.includes(doc.id)}
onCheck={() => {
onSelectedIdChange(
@@ -579,25 +579,25 @@ const DocumentList: FC<IDocumentListProps> = ({
</div>
</td>
<td>
<div className={'group flex items-center mr-6 hover:mr-0 max-w-[460px]'}>
<div className={'group mr-6 flex max-w-[460px] items-center hover:mr-0'}>
<div className='shrink-0'>
{doc?.data_source_type === DataSourceType.NOTION && <NotionIcon className='inline-flex mt-[-3px] mr-1.5 align-middle' type='page' src={doc.data_source_info.notion_page_icon} />}
{doc?.data_source_type === DataSourceType.NOTION && <NotionIcon className='mr-1.5 mt-[-3px] inline-flex align-middle' type='page' src={doc.data_source_info.notion_page_icon} />}
{doc?.data_source_type === DataSourceType.FILE && <FileTypeIcon type={extensionToFileType(doc?.data_source_info?.upload_file?.extension ?? fileType)} className='mr-1.5' />}
{doc?.data_source_type === DataSourceType.WEB && <Globe01 className='inline-flex mt-[-3px] mr-1.5 align-middle' />}
{doc?.data_source_type === DataSourceType.WEB && <Globe01 className='mr-1.5 mt-[-3px] inline-flex align-middle' />}
</div>
<span className='text-sm truncate grow-1'>{doc.name}</span>
<div className='group-hover:flex group-hover:ml-auto hidden shrink-0'>
<span className='grow-1 truncate text-sm'>{doc.name}</span>
<div className='hidden shrink-0 group-hover:ml-auto group-hover:flex'>
<Tooltip
popupContent={t('datasetDocuments.list.table.rename')}
>
<div
className='p-1 rounded-md cursor-pointer hover:bg-state-base-hover'
className='cursor-pointer rounded-md p-1 hover:bg-state-base-hover'
onClick={(e) => {
e.stopPropagation()
handleShowRenameModal(doc)
}}
>
<RiEditLine className='w-4 h-4 text-text-tertiary' />
<RiEditLine className='h-4 w-4 text-text-tertiary' />
</div>
</Tooltip>
</div>
@@ -611,7 +611,7 @@ const DocumentList: FC<IDocumentListProps> = ({
</td>
<td>{renderCount(doc.word_count)}</td>
<td>{renderCount(doc.hit_count)}</td>
<td className='text-text-secondary text-[13px]'>
<td className='text-[13px] text-text-secondary'>
{formatTime(doc.created_at, t('datasetHitTesting.dateTimeFormat') as string)}
</td>
<td>
@@ -636,7 +636,7 @@ const DocumentList: FC<IDocumentListProps> = ({
</div>
{(selectedIds.length > 0) && (
<BatchAction
className='absolute left-0 bottom-16 z-20'
className='absolute bottom-16 left-0 z-20'
selectedIds={selectedIds}
onArchive={handleAction(DocumentActionType.archive)}
onBatchEnable={handleAction(DocumentActionType.enable)}
@@ -652,7 +652,7 @@ const DocumentList: FC<IDocumentListProps> = ({
{pagination.total && (
<Pagination
{...pagination}
className='shrink-0 w-full px-0 pb-0'
className='w-full shrink-0 px-0 pb-0'
/>
)}

8
web/app/components/datasets/documents/rename-modal.tsx
View File

@@ -9,7 +9,7 @@ import Button from '@/app/components/base/button'
import Input from '@/app/components/base/input'
import { renameDocumentName } from '@/service/datasets'
interface Props {
type Props = {
datasetId: string
documentId: string
name: string
@@ -59,7 +59,7 @@ const RenameModal: FC<Props> = ({
isShow
onClose={onClose}
>
<div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('datasetDocuments.list.table.name')}</div>
<div className={'mt-6 text-sm font-medium leading-[21px] text-text-primary'}>{t('datasetDocuments.list.table.name')}</div>
<Input
className='mt-2 h-10'
value={newName}
@@ -67,8 +67,8 @@ const RenameModal: FC<Props> = ({
/>
<div className='mt-10 flex justify-end'>
<Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button variant='primary' className='flex-shrink-0' onClick={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
<Button className='mr-2 shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
<Button variant='primary' className='shrink-0' onClick={handleSave} loading={saveLoading}>{t('common.operation.save')}</Button>
</div>
</Modal>
)