dify
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
|
||||
type Props = {
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Field: FC<Props> = ({
|
||||
label,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className='flex items-start space-x-2'>
|
||||
<div className='system-xs-medium w-[128px] shrink-0 items-center truncate py-1 text-text-tertiary'>
|
||||
{label}
|
||||
</div>
|
||||
<div className='w-[244px] shrink-0'>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Field)
|
||||
@@ -0,0 +1,120 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import InfoGroup from './info-group'
|
||||
import NoData from './no-data'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { RiEditLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import useMetadataDocument from '../hooks/use-metadata-document'
|
||||
import type { FullDocumentDetail } from '@/models/datasets'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const i18nPrefix = 'dataset.metadata.documentMetadata'
|
||||
|
||||
type Props = {
|
||||
datasetId: string
|
||||
documentId: string
|
||||
className?: string
|
||||
docDetail: FullDocumentDetail
|
||||
}
|
||||
const MetadataDocument: FC<Props> = ({
|
||||
datasetId,
|
||||
documentId,
|
||||
className,
|
||||
docDetail,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const {
|
||||
embeddingAvailable,
|
||||
isEdit,
|
||||
setIsEdit,
|
||||
list,
|
||||
tempList,
|
||||
setTempList,
|
||||
handleSelectMetaData,
|
||||
handleAddMetaData,
|
||||
hasData,
|
||||
builtList,
|
||||
builtInEnabled,
|
||||
startToEdit,
|
||||
handleSave,
|
||||
handleCancel,
|
||||
originInfo,
|
||||
technicalParameters,
|
||||
} = useMetadataDocument({ datasetId, documentId, docDetail })
|
||||
|
||||
return (
|
||||
<div className={cn('w-[388px] space-y-4', className)}>
|
||||
{(hasData || isEdit) ? (
|
||||
<div className='pl-2'>
|
||||
<InfoGroup
|
||||
title={t('dataset.metadata.metadata')}
|
||||
uppercaseTitle={false}
|
||||
titleTooltip={t(`${i18nPrefix}.metadataToolTip`)}
|
||||
list={isEdit ? tempList : list}
|
||||
dataSetId={datasetId}
|
||||
headerRight={embeddingAvailable && (isEdit ? (
|
||||
<div className='flex space-x-1'>
|
||||
<Button variant='ghost' size='small' onClick={handleCancel}>
|
||||
<div>{t('common.operation.cancel')}</div>
|
||||
</Button>
|
||||
<Button variant='primary' size='small' onClick={handleSave}>
|
||||
<div>{t('common.operation.save')}</div>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Button variant='ghost' size='small' onClick={startToEdit}>
|
||||
<RiEditLine className='mr-1 size-3.5 cursor-pointer text-text-tertiary' />
|
||||
<div>{t('common.operation.edit')}</div>
|
||||
</Button>
|
||||
))}
|
||||
isEdit={isEdit}
|
||||
contentClassName='mt-5'
|
||||
onChange={(item) => {
|
||||
const newList = tempList.map(i => (i.name === item.name ? item : i))
|
||||
setTempList(newList)
|
||||
}}
|
||||
onDelete={(item) => {
|
||||
const newList = tempList.filter(i => i.name !== item.name)
|
||||
setTempList(newList)
|
||||
}}
|
||||
onAdd={handleAddMetaData}
|
||||
onSelect={handleSelectMetaData}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
embeddingAvailable && <NoData onStart={() => setIsEdit(true)} />
|
||||
)}
|
||||
{builtInEnabled && (
|
||||
<div className='pl-2'>
|
||||
<Divider className='my-3' bgStyle='gradient' />
|
||||
<InfoGroup
|
||||
noHeader
|
||||
titleTooltip='Built-in metadata is system-generated metadata that is automatically added to the document. You can enable or disable built-in metadata here.'
|
||||
list={builtList}
|
||||
dataSetId={datasetId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Old Metadata */}
|
||||
<InfoGroup
|
||||
className='pl-2'
|
||||
title={t(`${i18nPrefix}.documentInformation`)}
|
||||
list={originInfo}
|
||||
dataSetId={datasetId}
|
||||
/>
|
||||
<InfoGroup
|
||||
className='pl-2'
|
||||
title={t(`${i18nPrefix}.technicalParameters`)}
|
||||
list={technicalParameters}
|
||||
dataSetId={datasetId}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(MetadataDocument)
|
||||
@@ -0,0 +1,111 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { DataType, type MetadataItemWithValue, isShowManageMetadataLocalStorageKey } from '../types'
|
||||
import Field from './field'
|
||||
import InputCombined from '../edit-metadata-batch/input-combined'
|
||||
import { RiDeleteBinLine, RiQuestionLine } from '@remixicon/react'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import cn from '@/utils/classnames'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import SelectMetadataModal from '../metadata-dataset/select-metadata-modal'
|
||||
import AddMetadataButton from '../add-metadata-button'
|
||||
import useTimestamp from '@/hooks/use-timestamp'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
dataSetId: string
|
||||
className?: string
|
||||
noHeader?: boolean
|
||||
title?: string
|
||||
uppercaseTitle?: boolean
|
||||
titleTooltip?: string
|
||||
headerRight?: React.ReactNode
|
||||
contentClassName?: string
|
||||
list: MetadataItemWithValue[]
|
||||
isEdit?: boolean
|
||||
onChange?: (item: MetadataItemWithValue) => void
|
||||
onDelete?: (item: MetadataItemWithValue) => void
|
||||
onSelect?: (item: MetadataItemWithValue) => void
|
||||
onAdd?: (item: MetadataItemWithValue) => void
|
||||
}
|
||||
|
||||
const InfoGroup: FC<Props> = ({
|
||||
dataSetId,
|
||||
className,
|
||||
noHeader,
|
||||
title,
|
||||
uppercaseTitle = true,
|
||||
titleTooltip,
|
||||
headerRight,
|
||||
contentClassName,
|
||||
list,
|
||||
isEdit,
|
||||
onChange,
|
||||
onDelete,
|
||||
onSelect,
|
||||
onAdd,
|
||||
}) => {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation()
|
||||
const { formatTime: formatTimestamp } = useTimestamp()
|
||||
|
||||
const handleMangeMetadata = () => {
|
||||
localStorage.setItem(isShowManageMetadataLocalStorageKey, 'true')
|
||||
router.push(`/datasets/${dataSetId}/documents`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(className)}>
|
||||
{!noHeader && (
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='flex items-center space-x-1'>
|
||||
<div className={cn('text-text-secondary', uppercaseTitle ? 'system-xs-semibold-uppercase' : 'system-md-semibold')}>{title}</div>
|
||||
{titleTooltip && (
|
||||
<Tooltip popupContent={<div className='max-w-[240px]'>{titleTooltip}</div>}>
|
||||
<div><RiQuestionLine className='size-3.5 text-text-tertiary' /></div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
{headerRight}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={cn('mt-3 space-y-1', contentClassName)}>
|
||||
{isEdit && (
|
||||
<div>
|
||||
<SelectMetadataModal
|
||||
datasetId={dataSetId}
|
||||
trigger={
|
||||
<AddMetadataButton />
|
||||
}
|
||||
onSelect={data => onSelect?.(data as MetadataItemWithValue)}
|
||||
onSave={data => onAdd?.(data)}
|
||||
onManage={handleMangeMetadata}
|
||||
/>
|
||||
{list.length > 0 && <Divider className='my-3 ' bgStyle='gradient' />}
|
||||
</div>
|
||||
)}
|
||||
{list.map((item, i) => (
|
||||
<Field key={(item.id && item.id !== 'built-in') ? item.id : `${i}`} label={item.name}>
|
||||
{isEdit ? (
|
||||
<div className='flex items-center space-x-0.5'>
|
||||
<InputCombined
|
||||
className='h-6'
|
||||
type={item.type}
|
||||
value={item.value}
|
||||
onChange={value => onChange?.({ ...item, value })}
|
||||
/>
|
||||
<div className='shrink-0 cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'>
|
||||
<RiDeleteBinLine className='size-4' onClick={() => onDelete?.(item)} />
|
||||
</div>
|
||||
</div>
|
||||
) : (<div className='system-xs-regular py-1 text-text-secondary'>{(item.value && item.type === DataType.time) ? formatTimestamp((item.value as number), t('datasetDocuments.metadata.dateTimeFormat')) : item.value}</div>)}
|
||||
</Field>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(InfoGroup)
|
||||
@@ -0,0 +1,27 @@
|
||||
'use client'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
onStart: () => void
|
||||
}
|
||||
|
||||
const NoData: FC<Props> = ({
|
||||
onStart,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className='rounded-xl bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4 pt-3'>
|
||||
<div className='text-xs font-semibold leading-5 text-text-secondary'>{t('dataset.metadata.metadata')}</div>
|
||||
<div className='system-xs-regular mt-1 text-text-tertiary'>{t('dataset.metadata.documentMetadata.metadataToolTip')}</div>
|
||||
<Button variant='primary' className='mt-2' onClick={onStart}>
|
||||
<div>{t('dataset.metadata.documentMetadata.startLabeling')}</div>
|
||||
<RiArrowRightLine className='ml-1 size-4' />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(NoData)
|
||||
Reference in New Issue
Block a user