dify
This commit is contained in:
@@ -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('max-h-[calc(100vh-120px)] overflow-auto', className)}>
|
||||
{list.map((item) => {
|
||||
const { id, name, extension } = item
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className='flex h-8 cursor-pointer items-center space-x-2 rounded-lg px-2 hover:bg-state-base-hover'
|
||||
onClick={handleChange(item)}
|
||||
>
|
||||
<FileIcon name={item.name} extension={extension} size='lg' />
|
||||
<div className='truncate text-sm text-text-secondary'>{name}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(DocumentList)
|
||||
@@ -0,0 +1,127 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useMemo, useState } 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 type { DocumentItem, ParentMode, SimpleDocumentDetail } from '@/models/datasets'
|
||||
import { ChunkingMode } from '@/models/datasets'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import cn from '@/utils/classnames'
|
||||
import SearchInput from '@/app/components/base/search-input'
|
||||
import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import { useDocumentList } from '@/service/knowledge/use-document'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
|
||||
type Props = {
|
||||
datasetId: string
|
||||
value: {
|
||||
name?: string
|
||||
extension?: string
|
||||
chunkingMode?: ChunkingMode
|
||||
parentMode?: ParentMode
|
||||
}
|
||||
onChange: (value: SimpleDocumentDetail) => void
|
||||
}
|
||||
|
||||
const DocumentPicker: FC<Props> = ({
|
||||
datasetId,
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
name,
|
||||
extension,
|
||||
chunkingMode,
|
||||
parentMode,
|
||||
} = value
|
||||
const [query, setQuery] = useState('')
|
||||
|
||||
const { data } = useDocumentList({
|
||||
datasetId,
|
||||
query: {
|
||||
keyword: query,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
},
|
||||
})
|
||||
const documentsList = data?.data
|
||||
const isGeneralMode = chunkingMode === ChunkingMode.text
|
||||
const isParentChild = chunkingMode === ChunkingMode.parentChild
|
||||
const isQAMode = chunkingMode === ChunkingMode.qa
|
||||
const TypeIcon = isParentChild ? ParentChildChunk : GeneralChunk
|
||||
|
||||
const [open, {
|
||||
set: setOpen,
|
||||
toggle: togglePopup,
|
||||
}] = useBoolean(false)
|
||||
const ArrowIcon = RiArrowDownSLine
|
||||
|
||||
const handleChange = useCallback(({ id }: DocumentItem) => {
|
||||
onChange(documentsList?.find(item => item.id === id) as SimpleDocumentDetail)
|
||||
setOpen(false)
|
||||
}, [documentsList, onChange, setOpen])
|
||||
|
||||
const parentModeLabel = useMemo(() => {
|
||||
if (!parentMode)
|
||||
return '--'
|
||||
return parentMode === 'paragraph' ? t('dataset.parentMode.paragraph') : t('dataset.parentMode.fullDoc')
|
||||
}, [parentMode, t])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-start'
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={togglePopup}>
|
||||
<div className={cn('ml-1 flex cursor-pointer select-none items-center rounded-lg px-2 py-0.5 hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
|
||||
<FileIcon name={name} extension={extension} size='xl' />
|
||||
<div className='ml-1 mr-0.5 flex flex-col items-start'>
|
||||
<div className='flex items-center space-x-0.5'>
|
||||
<span className={cn('system-md-semibold text-text-primary')}> {name || '--'}</span>
|
||||
<ArrowIcon className={'h-4 w-4 text-text-primary'} />
|
||||
</div>
|
||||
<div className='flex h-3 items-center space-x-0.5 text-text-tertiary'>
|
||||
<TypeIcon className='h-3 w-3' />
|
||||
<span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
|
||||
{isGeneralMode && t('dataset.chunkingMode.general')}
|
||||
{isQAMode && t('dataset.chunkingMode.qa')}
|
||||
{isParentChild && `${t('dataset.chunkingMode.parentChild')} · ${parentModeLabel}`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[11]'>
|
||||
<div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pt-2 shadow-lg backdrop-blur-[5px]'>
|
||||
<SearchInput value={query} onChange={setQuery} className='mx-1' />
|
||||
{documentsList
|
||||
? (
|
||||
<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 h-[100px] w-[360px] items-center justify-center'>
|
||||
<Loading />
|
||||
</div>)}
|
||||
</div>
|
||||
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
export default React.memo(DocumentPicker)
|
||||
@@ -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 h-6 select-none items-center rounded-md px-1 hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
|
||||
<FileIcon name={name} extension={extension} size='lg' />
|
||||
<div className='ml-1 flex flex-col items-start'>
|
||||
<div className='flex items-center space-x-0.5'>
|
||||
<span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}> {name || '--'}</span>
|
||||
<ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[11]'>
|
||||
<div className='w-[392px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'>
|
||||
{files?.length > 1 && <div className='system-xs-medium-uppercase flex h-8 items-center pl-2 text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
|
||||
{files?.length > 0
|
||||
? (
|
||||
<DocumentList
|
||||
list={files}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
)
|
||||
: (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
|
||||
<Loading />
|
||||
</div>)}
|
||||
</div>
|
||||
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
export default React.memo(PreviewDocumentPicker)
|
||||
Reference in New Issue
Block a user