admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

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