outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: preview document picker

Browse Source
This commit is contained in:
Joel 2024-12-09 15:39:37 +08:00
parent 12c791149c
commit 82e2b68d9e
8 changed files with 175 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/base/file-uploader/file-type-icon.tsx
View File

@ -82,12 +82,9 @@ const FileTypeIcon = ({
size = 'sm',
className,
}: FileTypeIconProps) => {
const Icon = FILE_TYPE_ICON_MAP[type].component
const Icon = FILE_TYPE_ICON_MAP[type].component || FileAppearanceTypeEnum.custom
const color = FILE_TYPE_ICON_MAP[type].color
if (!Icon)
return null
return <Icon className={cn('shrink-0', SizeMap[size], color, className)} />
}

42
web/app/components/datasets/common/document-picker/document-list.tsx Normal file
View File

@ -0,0 +1,42 @@
'use client'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import FileIcon from '../document-file-icon'
import cn from '@/utils/classnames'
import type { DocumentItem } from '@/models/datasets'
type Props = {
className?: string
list: DocumentItem[]
onChange: (value: DocumentItem) => void
}
const DocumentList: FC<Props> = ({
className,
list,
onChange,
}) => {
const handleChange = useCallback((item: DocumentItem) => {
return () => onChange(item)
}, [onChange])
return (
<div className={cn(className)}>
{list.map((item) => {
const { id, name, extension } = item
return (
<div
key={id}
className='flex items-center h-8 px-2 hover:bg-state-base-hover rounded-lg space-x-2 cursor-pointer'
onClick={handleChange(item)}
>
<FileIcon name={item.name} extension={extension} size='md' />
<div className='truncate text-text-secondary text-sm'>{name}</div>
</div>
)
})}
</div>
)
}
export default React.memo(DocumentList)

41
web/app/components/datasets/common/document-picker/index.tsx
View File

@ -1,11 +1,12 @@
'use client'
import type { FC } from 'react'
import React, { useState } from 'react'
import React, { useCallback, useState } from 'react'
import { useBoolean } from 'ahooks'
import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
import { RiArrowDownSLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import FileIcon from '../document-file-icon'
import type { ParentMode, SimpleDocumentDetail } from '@/models/datasets'
import DocumentList from './document-list'
import type { DocumentItem, ParentMode, SimpleDocumentDetail } from '@/models/datasets'
import { ProcessMode } from '@/models/datasets'
import {
PortalToFollowElem,
@ -59,7 +60,12 @@ const DocumentPicker: FC<Props> = ({
set: setOpen,
toggle: togglePopup,
}] = useBoolean(false)
const ArrowIcon = open ? RiArrowDownSLine : RiArrowUpSLine
const ArrowIcon = RiArrowDownSLine
const handleChange = useCallback(({ id }: DocumentItem) => {
onChange(documentsList?.find(item => item.id === id) as SimpleDocumentDetail)
setOpen(false)
}, [documentsList, onChange, setOpen])
return (
<PortalToFollowElem
@ -86,28 +92,19 @@ const DocumentPicker: FC<Props> = ({
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[360px] p-1 pt-2 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
<SearchInput value={query} onChange={setQuery} className='mx-1' />
{documentsList
? (
<div className='mt-2'>
{documentsList.map(item => (
<div
key={item.id}
className='flex items-center h-8 px-2 hover:bg-state-base-hover rounded-lg space-x-2 cursor-pointer'
onClick={
() => {
onChange(item)
setOpen(false)
}
}
>
<FileIcon name={item.name} extension={item.data_source_detail_dict?.upload_file.extension} size='sm' />
<div className='truncate text-text-secondary text-sm'>{item.name}</div>
</div>
))}
</div>
<DocumentList
className='mt-2'
list={documentsList.map(d => ({
id: d.id,
name: d.name,
extension: d.data_source_detail_dict?.upload_file.extension || '',
}))}
onChange={handleChange}
/>
)
: (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
<Loading />

82
web/app/components/datasets/common/document-picker/preview-document-picker.tsx Normal file
View File

@ -0,0 +1,82 @@
'use client'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { useBoolean } from 'ahooks'
import { RiArrowDownSLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import FileIcon from '../document-file-icon'
import DocumentList from './document-list'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import cn from '@/utils/classnames'
import Loading from '@/app/components/base/loading'
import type { DocumentItem } from '@/models/datasets'
type Props = {
className?: string
value: DocumentItem
files: DocumentItem[]
onChange: (value: DocumentItem) => void
}
const PreviewDocumentPicker: FC<Props> = ({
className,
value,
files,
onChange,
}) => {
const { t } = useTranslation()
const { name, extension } = value
const [open, {
set: setOpen,
toggle: togglePopup,
}] = useBoolean(false)
const ArrowIcon = RiArrowDownSLine
const handleChange = useCallback((item: DocumentItem) => {
onChange(item)
setOpen(false)
}, [onChange, setOpen])
return (
<PortalToFollowElem
open={open}
onOpenChange={setOpen}
placement='bottom-start'
offset={4}
>
<PortalToFollowElemTrigger onClick={togglePopup}>
<div className={cn('flex items-center h-6 px-1 rounded-md hover:bg-state-base-hover select-none', open && 'bg-state-base-hover', className)}>
<FileIcon name={name} extension={extension} size='md' />
<div className='flex flex-col items-start ml-1'>
<div className='flex items-center space-x-0.5'>
<span className={cn('system-md-semibold')}> {name || '--'}</span>
<ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
</div>
</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'>
<div className='w-[392px] p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[5px]'>
{files?.length > 1 && <div className='pl-2 flex items-center h-8 system-xs-medium-uppercase text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
{files?.length > 0
? (
<DocumentList
list={files}
onChange={handleChange}
/>
)
: (<div className='mt-2 flex items-center justify-center w-[360px] h-[100px]'>
<Loading />
</div>)}
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
)
}
export default React.memo(PreviewDocumentPicker)

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

@ -9,6 +9,7 @@ import { omit } from 'lodash-es'
import { RiArrowLeftLine, RiLayoutRight2Line } from '@remixicon/react'
import { OperationAction, StatusItem } from '../list'
import DocumentPicker from '../../common/document-picker'
import PreviewDocumentPicker from '../../common/document-picker/preview-document-picker'
import Completed from './completed'
import Embedding from './embedding'
import Metadata from './metadata'
@ -21,7 +22,7 @@ import Loading from '@/app/components/base/loading'
import type { MetadataType } from '@/service/datasets'
import { checkSegmentBatchImportProgress, fetchDocumentDetail, segmentBatchImport } from '@/service/datasets'
import { ToastContext } from '@/app/components/base/toast'
import type { DocForm, ParentMode, ProcessMode } from '@/models/datasets'
import type { DocForm, DocumentItem, ParentMode, ProcessMode } from '@/models/datasets'
import { useDatasetDetailContext } from '@/context/dataset-detail'
import FloatRightContainer from '@/app/components/base/float-right-container'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@ -52,6 +53,21 @@ type DocumentTitleProps = {
}
export const DocumentTitle: FC<DocumentTitleProps> = ({ datasetId, extension, name, processMode, parent_mode, wrapperCls }) => {
const testPreviewFiles = [
{
id: '1',
name: 'EOS R3',
extension: 'pdf',
},
{
id: '2',
name: 'EOS R5',
extension: 'pdf',
},
]
const [previewFile, setPreviewFile] = useState<DocumentItem>(testPreviewFiles[0])
return (
<div className={cn('flex items-center justify-start flex-1 cursor-pointer', wrapperCls)}>
{/* // todo: handle file change */}
@ -65,6 +81,12 @@ export const DocumentTitle: FC<DocumentTitleProps> = ({ datasetId, extension, na
}}
onChange={(doc) => { console.log(doc) }}
/>
{/* todo: another document picker demo */}
<PreviewDocumentPicker
value={previewFile}
onChange={setPreviewFile}
files={testPreviewFiles}
/>
</div>
)
}

1
web/i18n/en-US/dataset.ts
View File

@ -158,6 +158,7 @@ const translation = {
delete: 'Delete',
cancel: 'Cancel',
},
preprocessDocument: '{{num}} Preprocess Documents',
}
export default translation

1
web/i18n/zh-Hans/dataset.ts
View File

@ -158,6 +158,7 @@ const translation = {
delete: '删除',
cancel: '取消',
},
preprocessDocument: '{{num}} 个预处理文档',
}
export default translation

6
web/models/datasets.ts
View File

@ -102,6 +102,12 @@ export type CustomFile = File & {
created_at?: number
}
export type DocumentItem = {
id: string
name: string
extension: string
}
export type CrawlOptions = {
crawl_sub_pages: boolean
only_main_content: boolean