mirror of
https://github.com/langgenius/dify.git
synced 2025-07-14 12:41:35 +00:00
347 lines
14 KiB
TypeScript
347 lines
14 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import { useBoolean } from 'ahooks'
|
|
import { ArrowDownIcon } from '@heroicons/react/24/outline'
|
|
import { pick, uniq } from 'lodash-es'
|
|
import { RiEditLine } from '@remixicon/react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useTranslation } from 'react-i18next'
|
|
import dayjs from 'dayjs'
|
|
import { Globe01 } from '../../base/icons/src/vender/line/mapsAndTravel'
|
|
import ChunkingModeLabel from '../common/chunking-mode-label'
|
|
import FileTypeIcon from '../../base/file-uploader/file-type-icon'
|
|
import s from './style.module.css'
|
|
import RenameModal from './rename-modal'
|
|
import BatchAction from './detail/completed/common/batch-action'
|
|
import cn from '@/utils/classnames'
|
|
import Tooltip from '@/app/components/base/tooltip'
|
|
import Toast from '@/app/components/base/toast'
|
|
import { asyncRunSafe } from '@/utils'
|
|
import { formatNumber } from '@/utils/format'
|
|
import NotionIcon from '@/app/components/base/notion-icon'
|
|
import ProgressBar from '@/app/components/base/progress-bar'
|
|
import { ChunkingMode, DataSourceType, DocumentActionType, type SimpleDocumentDetail } from '@/models/datasets'
|
|
import type { CommonResponse } from '@/models/common'
|
|
import useTimestamp from '@/hooks/use-timestamp'
|
|
import { useDatasetDetailContextWithSelector as useDatasetDetailContext } from '@/context/dataset-detail'
|
|
import type { Props as PaginationProps } from '@/app/components/base/pagination'
|
|
import Pagination from '@/app/components/base/pagination'
|
|
import Checkbox from '@/app/components/base/checkbox'
|
|
import { useDocumentArchive, useDocumentDelete, useDocumentDisable, useDocumentEnable } from '@/service/knowledge/use-document'
|
|
import { extensionToFileType } from '@/app/components/datasets/hit-testing/utils/extension-to-file-type'
|
|
import useBatchEditDocumentMetadata from '../metadata/hooks/use-batch-edit-document-metadata'
|
|
import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch/modal'
|
|
import StatusItem from './status-item'
|
|
import Operations from './operations'
|
|
|
|
export const renderTdValue = (value: string | number | null, isEmptyStyle = false) => {
|
|
return (
|
|
<div className={cn(isEmptyStyle ? 'text-text-tertiary' : 'text-text-secondary', s.tdValue)}>
|
|
{value ?? '-'}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const renderCount = (count: number | undefined) => {
|
|
if (!count)
|
|
return renderTdValue(0, true)
|
|
|
|
if (count < 1000)
|
|
return count
|
|
|
|
return `${formatNumber((count / 1000).toFixed(1))}k`
|
|
}
|
|
|
|
type LocalDoc = SimpleDocumentDetail & { percent?: number }
|
|
type IDocumentListProps = {
|
|
embeddingAvailable: boolean
|
|
documents: LocalDoc[]
|
|
selectedIds: string[]
|
|
onSelectedIdChange: (selectedIds: string[]) => void
|
|
datasetId: string
|
|
pagination: PaginationProps
|
|
onUpdate: () => void
|
|
onManageMetadata: () => void
|
|
}
|
|
|
|
/**
|
|
* Document list component including basic information
|
|
*/
|
|
const DocumentList: FC<IDocumentListProps> = ({
|
|
embeddingAvailable,
|
|
documents = [],
|
|
selectedIds,
|
|
onSelectedIdChange,
|
|
datasetId,
|
|
pagination,
|
|
onUpdate,
|
|
onManageMetadata,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const { formatTime } = useTimestamp()
|
|
const router = useRouter()
|
|
const [datasetConfig] = useDatasetDetailContext(s => [s.dataset])
|
|
const chunkingMode = datasetConfig?.doc_form
|
|
const isGeneralMode = chunkingMode !== ChunkingMode.parentChild
|
|
const isQAMode = chunkingMode === ChunkingMode.qa
|
|
const [localDocs, setLocalDocs] = useState<LocalDoc[]>(documents)
|
|
const [enableSort, setEnableSort] = useState(true)
|
|
const {
|
|
isShowEditModal,
|
|
showEditModal,
|
|
hideEditModal,
|
|
originalList,
|
|
handleSave,
|
|
} = useBatchEditDocumentMetadata({
|
|
datasetId,
|
|
docList: documents.filter(item => selectedIds.includes(item.id)),
|
|
onUpdate,
|
|
})
|
|
|
|
useEffect(() => {
|
|
setLocalDocs(documents)
|
|
}, [documents])
|
|
|
|
const onClickSort = () => {
|
|
setEnableSort(!enableSort)
|
|
if (enableSort) {
|
|
const sortedDocs = [...localDocs].sort((a, b) => dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? -1 : 1)
|
|
setLocalDocs(sortedDocs)
|
|
}
|
|
else {
|
|
setLocalDocs(documents)
|
|
}
|
|
}
|
|
|
|
const [currDocument, setCurrDocument] = useState<LocalDoc | null>(null)
|
|
const [isShowRenameModal, {
|
|
setTrue: setShowRenameModalTrue,
|
|
setFalse: setShowRenameModalFalse,
|
|
}] = useBoolean(false)
|
|
const handleShowRenameModal = useCallback((doc: LocalDoc) => {
|
|
setCurrDocument(doc)
|
|
setShowRenameModalTrue()
|
|
}, [setShowRenameModalTrue])
|
|
const handleRenamed = useCallback(() => {
|
|
onUpdate()
|
|
}, [onUpdate])
|
|
|
|
const isAllSelected = useMemo(() => {
|
|
return localDocs.length > 0 && localDocs.every(doc => selectedIds.includes(doc.id))
|
|
}, [localDocs, selectedIds])
|
|
|
|
const isSomeSelected = useMemo(() => {
|
|
return localDocs.some(doc => selectedIds.includes(doc.id))
|
|
}, [localDocs, selectedIds])
|
|
|
|
const onSelectedAll = useCallback(() => {
|
|
if (isAllSelected)
|
|
onSelectedIdChange([])
|
|
else
|
|
onSelectedIdChange(uniq([...selectedIds, ...localDocs.map(doc => doc.id)]))
|
|
}, [isAllSelected, localDocs, onSelectedIdChange, selectedIds])
|
|
const { mutateAsync: archiveDocument } = useDocumentArchive()
|
|
const { mutateAsync: enableDocument } = useDocumentEnable()
|
|
const { mutateAsync: disableDocument } = useDocumentDisable()
|
|
const { mutateAsync: deleteDocument } = useDocumentDelete()
|
|
|
|
const handleAction = (actionName: DocumentActionType) => {
|
|
return async () => {
|
|
let opApi
|
|
switch (actionName) {
|
|
case DocumentActionType.archive:
|
|
opApi = archiveDocument
|
|
break
|
|
case DocumentActionType.enable:
|
|
opApi = enableDocument
|
|
break
|
|
case DocumentActionType.disable:
|
|
opApi = disableDocument
|
|
break
|
|
default:
|
|
opApi = deleteDocument
|
|
break
|
|
}
|
|
const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId, documentIds: selectedIds }) as Promise<CommonResponse>)
|
|
|
|
if (!e) {
|
|
if (actionName === DocumentActionType.delete)
|
|
onSelectedIdChange([])
|
|
Toast.notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
|
onUpdate()
|
|
}
|
|
else { Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') }) }
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className='relative flex h-full w-full flex-col'>
|
|
<div className='relative grow overflow-x-auto'>
|
|
<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='mr-2 shrink-0'
|
|
checked={isAllSelected}
|
|
indeterminate={!isAllSelected && isSomeSelected}
|
|
onCheck={onSelectedAll}
|
|
/>
|
|
)}
|
|
#
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className='flex'>
|
|
{t('datasetDocuments.list.table.header.fileName')}
|
|
</div>
|
|
</td>
|
|
<td className='w-[130px]'>{t('datasetDocuments.list.table.header.chunkingMode')}</td>
|
|
<td className='w-24'>{t('datasetDocuments.list.table.header.words')}</td>
|
|
<td className='w-44'>{t('datasetDocuments.list.table.header.hitCount')}</td>
|
|
<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 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>
|
|
<td className='w-20'>{t('datasetDocuments.list.table.header.action')}</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-text-secondary">
|
|
{localDocs.map((doc, index) => {
|
|
const isFile = doc.data_source_type === DataSourceType.FILE
|
|
const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : ''
|
|
return <tr
|
|
key={doc.id}
|
|
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-xs text-text-tertiary'>
|
|
<div className='flex items-center' onClick={e => e.stopPropagation()}>
|
|
<Checkbox
|
|
className='mr-2 shrink-0'
|
|
checked={selectedIds.includes(doc.id)}
|
|
onCheck={() => {
|
|
onSelectedIdChange(
|
|
selectedIds.includes(doc.id)
|
|
? selectedIds.filter(id => id !== doc.id)
|
|
: [...selectedIds, doc.id],
|
|
)
|
|
}}
|
|
/>
|
|
{index + 1}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<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='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='mr-1.5 mt-[-3px] inline-flex align-middle' />}
|
|
</div>
|
|
<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='cursor-pointer rounded-md p-1 hover:bg-state-base-hover'
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
handleShowRenameModal(doc)
|
|
}}
|
|
>
|
|
<RiEditLine className='h-4 w-4 text-text-tertiary' />
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<ChunkingModeLabel
|
|
isGeneralMode={isGeneralMode}
|
|
isQAMode={isQAMode}
|
|
/>
|
|
</td>
|
|
<td>{renderCount(doc.word_count)}</td>
|
|
<td>{renderCount(doc.hit_count)}</td>
|
|
<td className='text-[13px] text-text-secondary'>
|
|
{formatTime(doc.created_at, t('datasetHitTesting.dateTimeFormat') as string)}
|
|
</td>
|
|
<td>
|
|
{
|
|
(['indexing', 'splitting', 'parsing', 'cleaning'].includes(doc.indexing_status) && doc?.data_source_type === DataSourceType.NOTION)
|
|
? <ProgressBar percent={doc.percent || 0} />
|
|
: <StatusItem status={doc.display_status} />
|
|
}
|
|
</td>
|
|
<td>
|
|
<Operations
|
|
embeddingAvailable={embeddingAvailable}
|
|
datasetId={datasetId}
|
|
detail={pick(doc, ['name', 'enabled', 'archived', 'id', 'data_source_type', 'doc_form'])}
|
|
onUpdate={onUpdate}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{(selectedIds.length > 0) && (
|
|
<BatchAction
|
|
className='absolute bottom-16 left-0 z-20'
|
|
selectedIds={selectedIds}
|
|
onArchive={handleAction(DocumentActionType.archive)}
|
|
onBatchEnable={handleAction(DocumentActionType.enable)}
|
|
onBatchDisable={handleAction(DocumentActionType.disable)}
|
|
onBatchDelete={handleAction(DocumentActionType.delete)}
|
|
onEditMetadata={showEditModal}
|
|
onCancel={() => {
|
|
onSelectedIdChange([])
|
|
}}
|
|
/>
|
|
)}
|
|
{/* Show Pagination only if the total is more than the limit */}
|
|
{pagination.total && (
|
|
<Pagination
|
|
{...pagination}
|
|
className='w-full shrink-0 px-0 pb-0'
|
|
/>
|
|
)}
|
|
|
|
{isShowRenameModal && currDocument && (
|
|
<RenameModal
|
|
datasetId={datasetId}
|
|
documentId={currDocument.id}
|
|
name={currDocument.name}
|
|
onClose={setShowRenameModalFalse}
|
|
onSaved={handleRenamed}
|
|
/>
|
|
)}
|
|
|
|
{isShowEditModal && (
|
|
<EditMetadataBatchModal
|
|
datasetId={datasetId}
|
|
documentNum={selectedIds.length}
|
|
list={originalList}
|
|
onSave={handleSave}
|
|
onHide={hideEditModal}
|
|
onShowManage={() => {
|
|
hideEditModal()
|
|
onManageMetadata()
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DocumentList
|