feat: upgrade knowledge metadata (#16063)
Support filter knowledge by metadata. Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: NFish <douxc512@gmail.com>pull/16110/head
zxhlyh
1 year ago
committed by
GitHub
parent
475b8d731e
commit
20376ca951
@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../button'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
className?: string
|
||||
beforeHeader?: React.ReactNode
|
||||
onClose: () => void
|
||||
hideCloseBtn?: boolean
|
||||
onConfirm: () => void
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const ModalLikeWrap: FC<Props> = ({
|
||||
title,
|
||||
className,
|
||||
beforeHeader,
|
||||
children,
|
||||
onClose,
|
||||
hideCloseBtn,
|
||||
onConfirm,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className={cn('w-[320px] px-3 pt-3.5 pb-4 bg-components-panel-bg shadow-xl rounded-2xl border-[0.5px] border-components-panel-border', className)}>
|
||||
{beforeHeader || null}
|
||||
<div className='mb-1 flex h-6 items-center justify-between'>
|
||||
<div className='system-xl-semibold text-text-primary'>{title}</div>
|
||||
{!hideCloseBtn && (
|
||||
<div
|
||||
className='p-1.5 text-text-tertiary cursor-pointer'
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='size-4' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='mt-2'>{children}</div>
|
||||
<div className='mt-4 flex justify-end'>
|
||||
<Button
|
||||
className='mr-2'
|
||||
onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button
|
||||
onClick={onConfirm}
|
||||
variant='primary'
|
||||
>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ModalLikeWrap)
|
||||
@ -0,0 +1,31 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import Button from '../../base/button'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
const AddedMetadataButton: FC<Props> = ({
|
||||
className,
|
||||
onClick,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Button
|
||||
className={cn('w-full flex items-center', className)}
|
||||
size='small'
|
||||
variant='tertiary'
|
||||
onClick={onClick}
|
||||
>
|
||||
<RiAddLine className='mr-1 size-3.5' />
|
||||
<div>{t('dataset.metadata.addMetadata')}</div>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
export default React.memo(AddedMetadataButton)
|
||||
@ -0,0 +1,76 @@
|
||||
import { useCallback } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import {
|
||||
RiCalendarLine,
|
||||
RiCloseCircleFill,
|
||||
} from '@remixicon/react'
|
||||
import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
|
||||
import useTimestamp from '@/hooks/use-timestamp'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
value?: number
|
||||
onChange: (date: number | null) => void
|
||||
}
|
||||
const WrappedDatePicker = ({
|
||||
className,
|
||||
value,
|
||||
onChange,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation()
|
||||
// const { userProfile: { timezone } } = useAppContext()
|
||||
const { formatTime: formatTimestamp } = useTimestamp()
|
||||
|
||||
const handleDateChange = useCallback((date?: dayjs.Dayjs) => {
|
||||
if (date)
|
||||
onChange(date.unix())
|
||||
else
|
||||
onChange(null)
|
||||
}, [onChange])
|
||||
|
||||
const renderTrigger = useCallback(({
|
||||
handleClickTrigger,
|
||||
}: TriggerProps) => {
|
||||
return (
|
||||
<div onClick={handleClickTrigger} className={cn('group flex items-center rounded-md bg-components-input-bg-normal', className)}>
|
||||
<div
|
||||
className={cn(
|
||||
'grow',
|
||||
value ? 'text-text-secondary' : 'text-text-tertiary',
|
||||
)}
|
||||
>
|
||||
{value ? formatTimestamp(value, t('datasetDocuments.metadata.dateTimeFormat')) : t('dataset.metadata.chooseTime')}
|
||||
</div>
|
||||
<RiCloseCircleFill
|
||||
className={cn(
|
||||
'hidden group-hover:block w-4 h-4 cursor-pointer hover:text-components-input-text-filled',
|
||||
value && 'text-text-quaternary',
|
||||
)}
|
||||
onClick={() => handleDateChange()}
|
||||
/>
|
||||
<RiCalendarLine
|
||||
className={cn(
|
||||
'block group-hover:hidden shrink-0 w-4 h-4',
|
||||
value ? 'text-text-quaternary' : 'text-text-tertiary',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}, [className, value, formatTimestamp, t, handleDateChange])
|
||||
|
||||
return (
|
||||
<DatePicker
|
||||
value={dayjs(value ? value * 1000 : Date.now())}
|
||||
onChange={handleDateChange}
|
||||
onClear={handleDateChange}
|
||||
renderTrigger={renderTrigger}
|
||||
triggerWrapClassName='w-full'
|
||||
popupZIndexClassname='z-[1000]'
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default WrappedDatePicker
|
||||
@ -0,0 +1,45 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { MetadataItemWithEdit } from '../types'
|
||||
import cn from '@/utils/classnames'
|
||||
import Label from './label'
|
||||
import InputCombined from './input-combined'
|
||||
import { RiIndeterminateCircleLine } from '@remixicon/react'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
payload: MetadataItemWithEdit
|
||||
onChange: (value: MetadataItemWithEdit) => void
|
||||
onRemove: () => void
|
||||
}
|
||||
|
||||
const AddRow: FC<Props> = ({
|
||||
className,
|
||||
payload,
|
||||
onChange,
|
||||
onRemove,
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn('flex h-6 items-center space-x-0.5', className)}>
|
||||
<Label text={payload.name} />
|
||||
<InputCombined
|
||||
type={payload.type}
|
||||
value={payload.value}
|
||||
onChange={value => onChange({ ...payload, value })}
|
||||
/>
|
||||
<div
|
||||
className={
|
||||
cn(
|
||||
'p-1 rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive cursor-pointer',
|
||||
)
|
||||
}
|
||||
onClick={onRemove}
|
||||
>
|
||||
<RiIndeterminateCircleLine className='size-4' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(AddRow)
|
||||
@ -0,0 +1,56 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { type MetadataItemWithEdit, UpdateType } from '../types'
|
||||
import Label from './label'
|
||||
import { RiDeleteBinLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import InputHasSetMultipleValue from './input-has-set-multiple-value'
|
||||
import InputCombined from './input-combined'
|
||||
import EditedBeacon from './edited-beacon'
|
||||
|
||||
type Props = {
|
||||
payload: MetadataItemWithEdit
|
||||
onChange: (payload: MetadataItemWithEdit) => void
|
||||
onRemove: (id: string) => void
|
||||
onReset: (id: string) => void
|
||||
}
|
||||
|
||||
const EditMetadatabatchItem: FC<Props> = ({
|
||||
payload,
|
||||
onChange,
|
||||
onRemove,
|
||||
onReset,
|
||||
}) => {
|
||||
const isUpdated = payload.isUpdated
|
||||
const isDeleted = payload.updateType === UpdateType.delete
|
||||
return (
|
||||
<div className='flex h-6 items-center space-x-0.5'>
|
||||
{isUpdated ? <EditedBeacon onReset={() => onReset(payload.id)} /> : <div className='shrink-0 size-4' />}
|
||||
<Label text={payload.name} isDeleted={isDeleted} />
|
||||
{payload.isMultipleValue
|
||||
? <InputHasSetMultipleValue
|
||||
onClear={() => onChange({ ...payload, value: null, isMultipleValue: false })}
|
||||
readOnly={isDeleted}
|
||||
/>
|
||||
: <InputCombined
|
||||
type={payload.type}
|
||||
value={payload.value}
|
||||
onChange={v => onChange({ ...payload, value: v as string })}
|
||||
readOnly={isDeleted}
|
||||
/>}
|
||||
|
||||
<div
|
||||
className={
|
||||
cn(
|
||||
'p-1 rounded-md text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive cursor-pointer',
|
||||
isDeleted && 'cursor-default bg-state-destructive-hover text-text-destructive')
|
||||
}
|
||||
onClick={() => onRemove(payload.id)}
|
||||
>
|
||||
<RiDeleteBinLine className='size-4' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(EditMetadatabatchItem)
|
||||
@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useRef } from 'react'
|
||||
import { useHover } from 'ahooks'
|
||||
import { RiResetLeftLine } from '@remixicon/react'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
onReset: () => void
|
||||
}
|
||||
|
||||
const EditedBeacon: FC<Props> = ({
|
||||
onReset,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const ref = useRef(null)
|
||||
const isHovering = useHover(ref)
|
||||
|
||||
return (
|
||||
<div ref={ref} className='size-4 cursor-pointer'>
|
||||
{isHovering ? (
|
||||
<Tooltip popupContent={t('common.operation.reset')}>
|
||||
<div className='flex justify-center items-center size-4 bg-text-accent-secondary rounded-full' onClick={onReset}>
|
||||
<RiResetLeftLine className='size-[10px] text-text-primary-on-surface' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<div className='flex items-center justify-center size-4'>
|
||||
<div className='size-1 rounded-full bg-text-accent-secondary'></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(EditedBeacon)
|
||||
@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { DataType } from '../types'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { InputNumber } from '@/app/components/base/input-number'
|
||||
import cn from '@/utils/classnames'
|
||||
import Datepicker from '../base/date-picker'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
type: DataType
|
||||
value: any
|
||||
onChange: (value: any) => void
|
||||
readOnly?: boolean
|
||||
}
|
||||
|
||||
const InputCombined: FC<Props> = ({
|
||||
className: configClassName,
|
||||
type,
|
||||
value,
|
||||
onChange,
|
||||
readOnly,
|
||||
}) => {
|
||||
const className = cn('grow p-0.5 h-6 text-xs')
|
||||
if (type === DataType.time) {
|
||||
return (
|
||||
<Datepicker
|
||||
className={className}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (type === DataType.number) {
|
||||
return (
|
||||
<div className='grow text-[0]'>
|
||||
<InputNumber
|
||||
className={cn(className, 'rounded-l-md')}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
size='sm'
|
||||
controlWrapClassName='overflow-hidden'
|
||||
controlClassName='pt-0 pb-0'
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Input
|
||||
wrapperClassName={configClassName}
|
||||
className={cn(className, 'rounded-md')}
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default React.memo(InputCombined)
|
||||
@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
onClear: () => void
|
||||
readOnly?: boolean
|
||||
}
|
||||
|
||||
const InputHasSetMultipleValue: FC<Props> = ({
|
||||
onClear,
|
||||
readOnly,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className='grow h-6 p-0.5 rounded-md bg-components-input-bg-normal text-[0]'>
|
||||
<div className={cn('inline-flex rounded-[5px] items-center h-5 pl-1.5 pr-0.5 bg-components-badge-white-to-dark border-[0.5px] border-components-panel-border shadow-xs space-x-0.5', readOnly && 'pr-1.5')}>
|
||||
<div className='system-xs-regular text-text-secondary'>{t('dataset.metadata.batchEditMetadata.multipleValue')}</div>
|
||||
{!readOnly && (
|
||||
<div className='p-px rounded-[4px] text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer'>
|
||||
<RiCloseLine
|
||||
className='size-3.5 '
|
||||
onClick={onClear}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(InputHasSetMultipleValue)
|
||||
@ -0,0 +1,27 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
isDeleted?: boolean,
|
||||
className?: string,
|
||||
text: string
|
||||
}
|
||||
|
||||
const Label: FC<Props> = ({
|
||||
isDeleted,
|
||||
className,
|
||||
text,
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(
|
||||
'shrink-0 w-[136px] system-xs-medium text-text-tertiary truncate',
|
||||
isDeleted && 'line-through text-text-quaternary',
|
||||
className,
|
||||
)}>
|
||||
{text}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Label)
|
||||
@ -0,0 +1,189 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import Modal from '../../../base/modal'
|
||||
import type { BuiltInMetadataItem, MetadataItemInBatchEdit } from '../types'
|
||||
import { type MetadataItemWithEdit, UpdateType } from '../types'
|
||||
import EditMetadataBatchItem from './edit-row'
|
||||
import AddedMetadataItem from './add-row'
|
||||
import Button from '../../../base/button'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Checkbox from '../../../base/checkbox'
|
||||
import Tooltip from '../../../base/tooltip'
|
||||
import SelectMetadataModal from '../metadata-dataset/select-metadata-modal'
|
||||
import { RiQuestionLine } from '@remixicon/react'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import AddMetadataButton from '../add-metadata-button'
|
||||
import produce from 'immer'
|
||||
import useCheckMetadataName from '../hooks/use-check-metadata-name'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { useCreateMetaData } from '@/service/knowledge/use-metadata'
|
||||
|
||||
const i18nPrefix = 'dataset.metadata.batchEditMetadata'
|
||||
|
||||
type Props = {
|
||||
datasetId: string,
|
||||
documentNum: number
|
||||
list: MetadataItemInBatchEdit[]
|
||||
onSave: (editedList: MetadataItemInBatchEdit[], addedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => void
|
||||
onHide: () => void
|
||||
onShowManage: () => void
|
||||
}
|
||||
|
||||
const EditMetadataBatchModal: FC<Props> = ({
|
||||
datasetId,
|
||||
documentNum,
|
||||
list,
|
||||
onSave,
|
||||
onHide,
|
||||
onShowManage,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [templeList, setTempleList] = useState<MetadataItemWithEdit[]>(list)
|
||||
const handleTemplesChange = useCallback((payload: MetadataItemWithEdit) => {
|
||||
const newTempleList = produce(templeList, (draft) => {
|
||||
const index = draft.findIndex(i => i.id === payload.id)
|
||||
if (index !== -1) {
|
||||
draft[index] = payload
|
||||
draft[index].isUpdated = true
|
||||
draft[index].updateType = UpdateType.changeValue
|
||||
}
|
||||
},
|
||||
)
|
||||
setTempleList(newTempleList)
|
||||
}, [templeList])
|
||||
const handleTempleItemRemove = useCallback((id: string) => {
|
||||
const newTempleList = produce(templeList, (draft) => {
|
||||
const index = draft.findIndex(i => i.id === id)
|
||||
if (index !== -1) {
|
||||
draft[index].isUpdated = true
|
||||
draft[index].updateType = UpdateType.delete
|
||||
}
|
||||
})
|
||||
setTempleList(newTempleList)
|
||||
}, [templeList])
|
||||
|
||||
const handleItemReset = useCallback((id: string) => {
|
||||
const newTempleList = produce(templeList, (draft) => {
|
||||
const index = draft.findIndex(i => i.id === id)
|
||||
if (index !== -1) {
|
||||
draft[index] = { ...list[index] }
|
||||
draft[index].isUpdated = false
|
||||
delete draft[index].updateType
|
||||
}
|
||||
})
|
||||
setTempleList(newTempleList)
|
||||
}, [list, templeList])
|
||||
|
||||
const { checkName } = useCheckMetadataName()
|
||||
const { mutate: doAddMetaData } = useCreateMetaData(datasetId)
|
||||
const handleAddMetaData = useCallback(async (payload: BuiltInMetadataItem) => {
|
||||
const errorMsg = checkName(payload.name).errorMsg
|
||||
if (errorMsg) {
|
||||
Toast.notify({
|
||||
message: errorMsg,
|
||||
type: 'error',
|
||||
})
|
||||
return Promise.reject(new Error(errorMsg))
|
||||
}
|
||||
await doAddMetaData(payload)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
}, [checkName, doAddMetaData, t])
|
||||
|
||||
const [addedList, setAddedList] = useState<MetadataItemWithEdit[]>([])
|
||||
const handleAddedListChange = useCallback((payload: MetadataItemWithEdit) => {
|
||||
const newAddedList = addedList.map(i => i.id === payload.id ? payload : i)
|
||||
setAddedList(newAddedList)
|
||||
}, [addedList])
|
||||
const handleAddedItemRemove = useCallback((removeIndex: number) => {
|
||||
return () => {
|
||||
const newAddedList = addedList.filter((i, index) => index !== removeIndex)
|
||||
setAddedList(newAddedList)
|
||||
}
|
||||
}, [addedList])
|
||||
|
||||
const [isApplyToAllSelectDocument, setIsApplyToAllSelectDocument] = useState(false)
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
onSave(templeList.filter(item => item.updateType !== UpdateType.delete), addedList, isApplyToAllSelectDocument)
|
||||
}, [templeList, addedList, isApplyToAllSelectDocument, onSave])
|
||||
return (
|
||||
<Modal
|
||||
title={t(`${i18nPrefix}.editMetadata`)}
|
||||
isShow
|
||||
closable
|
||||
onClose={onHide}
|
||||
className='!max-w-[640px]'
|
||||
>
|
||||
<div className='mt-1 system-xs-medium text-text-accent'>{t(`${i18nPrefix}.editDocumentsNum`, { num: documentNum })}</div>
|
||||
<div className='ml-[-16px] max-h-[305px] overflow-y-auto'>
|
||||
<div className='mt-4 space-y-2'>
|
||||
{templeList.map(item => (
|
||||
<EditMetadataBatchItem
|
||||
key={item.id}
|
||||
payload={item}
|
||||
onChange={handleTemplesChange}
|
||||
onRemove={handleTempleItemRemove}
|
||||
onReset={handleItemReset}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className='mt-4 pl-[18px]'>
|
||||
<div className='flex items-center'>
|
||||
<div className='mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary'>{t('dataset.metadata.createMetadata.title')}</div>
|
||||
<Divider bgStyle='gradient' />
|
||||
</div>
|
||||
<div className='mt-2 space-y-2'>
|
||||
{addedList.map((item, i) => (
|
||||
<AddedMetadataItem
|
||||
key={i}
|
||||
payload={item}
|
||||
onChange={handleAddedListChange}
|
||||
onRemove={handleAddedItemRemove(i)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className='mt-3'>
|
||||
<SelectMetadataModal
|
||||
datasetId={datasetId}
|
||||
popupPlacement='top-start'
|
||||
popupOffset={{ mainAxis: 4, crossAxis: 0 }}
|
||||
trigger={
|
||||
<AddMetadataButton />
|
||||
}
|
||||
onSave={handleAddMetaData}
|
||||
onSelect={data => setAddedList([...addedList, data as MetadataItemWithEdit])}
|
||||
onManage={onShowManage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 flex items-center justify-between'>
|
||||
<div className='flex items-center select-none'>
|
||||
<Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} />
|
||||
<div className='ml-2 mr-1 system-xs-medium text-text-secondary'>{t(`${i18nPrefix}.applyToAllSelectDocument`)}</div>
|
||||
<Tooltip popupContent={
|
||||
<div className='max-w-[240px]'>{t(`${i18nPrefix}.applyToAllSelectDocumentTip`)}</div>
|
||||
} >
|
||||
<div className='p-px cursor-pointer'>
|
||||
<RiQuestionLine className='size-3.5 text-text-tertiary' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<Button
|
||||
onClick={onHide}>{t('common.operation.cancel')}</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
variant='primary'
|
||||
>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default React.memo(EditMetadataBatchModal)
|
||||
@ -0,0 +1,143 @@
|
||||
import { useBoolean } from 'ahooks'
|
||||
import { type MetadataBatchEditToServer, type MetadataItemInBatchEdit, type MetadataItemWithEdit, type MetadataItemWithValue, UpdateType } from '../types'
|
||||
import type { SimpleDocumentDetail } from '@/models/datasets'
|
||||
import { useMemo } from 'react'
|
||||
import { useBatchUpdateDocMetadata } from '@/service/knowledge/use-metadata'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { t } from 'i18next'
|
||||
|
||||
type Props = {
|
||||
datasetId: string
|
||||
docList: SimpleDocumentDetail[]
|
||||
onUpdate: () => void
|
||||
}
|
||||
|
||||
const useBatchEditDocumentMetadata = ({
|
||||
datasetId,
|
||||
docList,
|
||||
onUpdate,
|
||||
}: Props) => {
|
||||
const [isShowEditModal, {
|
||||
setTrue: showEditModal,
|
||||
setFalse: hideEditModal,
|
||||
}] = useBoolean(false)
|
||||
|
||||
const metaDataList: MetadataItemWithValue[][] = (() => {
|
||||
const res: MetadataItemWithValue[][] = []
|
||||
docList.forEach((item) => {
|
||||
if (item.doc_metadata) {
|
||||
res.push(item.doc_metadata.filter(item => item.id !== 'built-in'))
|
||||
return
|
||||
}
|
||||
res.push([])
|
||||
})
|
||||
return res
|
||||
})()
|
||||
|
||||
// To check is key has multiple value
|
||||
const originalList: MetadataItemInBatchEdit[] = useMemo(() => {
|
||||
const idNameValue: Record<string, { value: string | number | null, isMultipleValue: boolean }> = {}
|
||||
|
||||
const res: MetadataItemInBatchEdit[] = []
|
||||
metaDataList.forEach((metaData) => {
|
||||
metaData.forEach((item) => {
|
||||
if (idNameValue[item.id]?.isMultipleValue)
|
||||
return
|
||||
const itemInRes = res.find(i => i.id === item.id)
|
||||
if (!idNameValue[item.id]) {
|
||||
idNameValue[item.id] = {
|
||||
value: item.value,
|
||||
isMultipleValue: false,
|
||||
}
|
||||
}
|
||||
|
||||
if (itemInRes && itemInRes.value !== item.value) {
|
||||
idNameValue[item.id].isMultipleValue = true
|
||||
itemInRes.isMultipleValue = true
|
||||
itemInRes.value = null
|
||||
return
|
||||
}
|
||||
if (!itemInRes) {
|
||||
res.push({
|
||||
...item,
|
||||
isMultipleValue: false,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
return res
|
||||
}, [metaDataList])
|
||||
|
||||
const formateToBackendList = (editedList: MetadataItemWithEdit[], addedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => {
|
||||
const updatedList = editedList.filter((editedItem) => {
|
||||
return editedItem.updateType === UpdateType.changeValue
|
||||
})
|
||||
const removedList = originalList.filter((originalItem) => {
|
||||
const editedItem = editedList.find(i => i.id === originalItem.id)
|
||||
if (!editedItem) // removed item
|
||||
return true
|
||||
return false
|
||||
})
|
||||
|
||||
const res: MetadataBatchEditToServer = docList.map((item, i) => {
|
||||
// the new metadata will override the old one
|
||||
const oldMetadataList = metaDataList[i]
|
||||
let newMetadataList: MetadataItemWithValue[] = [...oldMetadataList, ...addedList]
|
||||
.filter((item) => {
|
||||
return !removedList.find(removedItem => removedItem.id === item.id)
|
||||
})
|
||||
.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
value: item.value,
|
||||
}))
|
||||
if (isApplyToAllSelectDocument) {
|
||||
// add missing metadata item
|
||||
updatedList.forEach((editedItem) => {
|
||||
if (!newMetadataList.find(i => i.id === editedItem.id) && !editedItem.isMultipleValue)
|
||||
newMetadataList.push(editedItem)
|
||||
})
|
||||
}
|
||||
|
||||
newMetadataList = newMetadataList.map((item) => {
|
||||
const editedItem = updatedList.find(i => i.id === item.id)
|
||||
if (editedItem)
|
||||
return editedItem
|
||||
return item
|
||||
})
|
||||
|
||||
return {
|
||||
document_id: item.id,
|
||||
metadata_list: newMetadataList,
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
const { mutateAsync } = useBatchUpdateDocMetadata()
|
||||
|
||||
const handleSave = async (editedList: MetadataItemInBatchEdit[], addedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => {
|
||||
const backendList = formateToBackendList(editedList, addedList, isApplyToAllSelectDocument)
|
||||
await mutateAsync({
|
||||
dataset_id: datasetId,
|
||||
metadata_list: backendList,
|
||||
})
|
||||
onUpdate()
|
||||
hideEditModal()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.actionMsg.modifiedSuccessfully'),
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
isShowEditModal,
|
||||
showEditModal,
|
||||
hideEditModal,
|
||||
originalList,
|
||||
handleSave,
|
||||
}
|
||||
}
|
||||
|
||||
export default useBatchEditDocumentMetadata
|
||||
@ -0,0 +1,28 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const i18nPrefix = 'dataset.metadata.checkName'
|
||||
|
||||
const useCheckMetadataName = () => {
|
||||
const { t } = useTranslation()
|
||||
return {
|
||||
checkName: (name: string) => {
|
||||
if (!name) {
|
||||
return {
|
||||
errorMsg: t(`${i18nPrefix}.empty`),
|
||||
}
|
||||
}
|
||||
|
||||
if (!/^[a-z][a-z0-9_]*$/.test(name)) {
|
||||
return {
|
||||
errorMsg: t(`${i18nPrefix}.invalid`),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
errorMsg: '',
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default useCheckMetadataName
|
||||
@ -0,0 +1,96 @@
|
||||
import { useBoolean } from 'ahooks'
|
||||
import { useBuiltInMetaDataFields, useCreateMetaData, useDatasetMetaData, useDeleteMetaData, useRenameMeta, useUpdateBuiltInStatus } from '@/service/knowledge/use-metadata'
|
||||
import type { DataSet } from '@/models/datasets'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { type BuiltInMetadataItem, type MetadataItemWithValueLength, isShowManageMetadataLocalStorageKey } from '../types'
|
||||
import useCheckMetadataName from './use-check-metadata-name'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const useEditDatasetMetadata = ({
|
||||
datasetId,
|
||||
// dataset,
|
||||
onUpdateDocList,
|
||||
}: {
|
||||
datasetId: string,
|
||||
dataset?: DataSet,
|
||||
onUpdateDocList: () => void
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isShowEditModal, {
|
||||
setTrue: showEditModal,
|
||||
setFalse: hideEditModal,
|
||||
}] = useBoolean(false)
|
||||
|
||||
useEffect(() => {
|
||||
const isShowManageMetadata = localStorage.getItem(isShowManageMetadataLocalStorageKey)
|
||||
if (isShowManageMetadata) {
|
||||
showEditModal()
|
||||
localStorage.removeItem(isShowManageMetadataLocalStorageKey)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
const { data: datasetMetaData } = useDatasetMetaData(datasetId)
|
||||
const { mutate: doAddMetaData } = useCreateMetaData(datasetId)
|
||||
const { checkName } = useCheckMetadataName()
|
||||
const handleAddMetaData = useCallback(async (payload: BuiltInMetadataItem) => {
|
||||
const errorMsg = checkName(payload.name).errorMsg
|
||||
if (errorMsg) {
|
||||
Toast.notify({
|
||||
message: errorMsg,
|
||||
type: 'error',
|
||||
})
|
||||
return Promise.reject(new Error(errorMsg))
|
||||
}
|
||||
await doAddMetaData(payload)
|
||||
}, [checkName, doAddMetaData])
|
||||
|
||||
const { mutate: doRenameMetaData } = useRenameMeta(datasetId)
|
||||
const handleRename = useCallback(async (payload: MetadataItemWithValueLength) => {
|
||||
const errorMsg = checkName(payload.name).errorMsg
|
||||
if (errorMsg) {
|
||||
Toast.notify({
|
||||
message: errorMsg,
|
||||
type: 'error',
|
||||
})
|
||||
return Promise.reject(new Error(errorMsg))
|
||||
}
|
||||
await doRenameMetaData(payload)
|
||||
onUpdateDocList()
|
||||
}, [checkName, doRenameMetaData, onUpdateDocList])
|
||||
|
||||
const { mutateAsync: doDeleteMetaData } = useDeleteMetaData(datasetId)
|
||||
const handleDeleteMetaData = useCallback(async (metaDataId: string) => {
|
||||
await doDeleteMetaData(metaDataId)
|
||||
onUpdateDocList()
|
||||
}, [doDeleteMetaData, onUpdateDocList])
|
||||
|
||||
const [builtInEnabled, setBuiltInEnabled] = useState(datasetMetaData?.built_in_field_enabled)
|
||||
useEffect(() => { // wait for api response to set the right value
|
||||
setBuiltInEnabled(datasetMetaData?.built_in_field_enabled)
|
||||
}, [datasetMetaData])
|
||||
const { mutateAsync: toggleBuiltInStatus } = useUpdateBuiltInStatus(datasetId)
|
||||
const { data: builtInMetaData } = useBuiltInMetaDataFields()
|
||||
return {
|
||||
isShowEditModal,
|
||||
showEditModal,
|
||||
hideEditModal,
|
||||
datasetMetaData: datasetMetaData?.doc_metadata,
|
||||
handleAddMetaData,
|
||||
handleRename,
|
||||
handleDeleteMetaData,
|
||||
builtInMetaData: builtInMetaData?.fields,
|
||||
builtInEnabled,
|
||||
setBuiltInEnabled: async (enable: boolean) => {
|
||||
await toggleBuiltInStatus(enable)
|
||||
setBuiltInEnabled(enable)
|
||||
Toast.notify({
|
||||
message: t('common.actionMsg.modifiedSuccessfully'),
|
||||
type: 'success',
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default useEditDatasetMetadata
|
||||
@ -0,0 +1,159 @@
|
||||
import { useBatchUpdateDocMetadata, useDatasetMetaData, useDocumentMetaData } from '@/service/knowledge/use-metadata'
|
||||
import { useDatasetDetailContext } from '@/context/dataset-detail'
|
||||
import type { BuiltInMetadataItem } from '../types'
|
||||
import { DataType, type MetadataItemWithValue } from '../types'
|
||||
import { useCallback, useState } from 'react'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
import type { FullDocumentDetail } from '@/models/datasets'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useLanguages, useMetadataMap } from '@/hooks/use-metadata'
|
||||
import { get } from 'lodash-es'
|
||||
import { useCreateMetaData } from '@/service/knowledge/use-metadata'
|
||||
import useCheckMetadataName from './use-check-metadata-name'
|
||||
|
||||
type Props = {
|
||||
datasetId: string
|
||||
documentId: string
|
||||
docDetail: FullDocumentDetail
|
||||
}
|
||||
|
||||
const useMetadataDocument = ({
|
||||
datasetId,
|
||||
documentId,
|
||||
docDetail,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { dataset } = useDatasetDetailContext()
|
||||
const embeddingAvailable = !!dataset?.embedding_available
|
||||
|
||||
const { mutateAsync } = useBatchUpdateDocMetadata()
|
||||
const { checkName } = useCheckMetadataName()
|
||||
|
||||
const [isEdit, setIsEdit] = useState(false)
|
||||
const { data: documentDetail } = useDocumentMetaData({
|
||||
datasetId,
|
||||
documentId,
|
||||
})
|
||||
|
||||
const allList = documentDetail?.doc_metadata || []
|
||||
const list = allList.filter(item => item.id !== 'built-in')
|
||||
const builtList = allList.filter(item => item.id === 'built-in')
|
||||
const [tempList, setTempList] = useState<MetadataItemWithValue[]>(list)
|
||||
const { mutateAsync: doAddMetaData } = useCreateMetaData(datasetId)
|
||||
const handleSelectMetaData = useCallback((metaData: MetadataItemWithValue) => {
|
||||
setTempList((prev) => {
|
||||
const index = prev.findIndex(item => item.id === metaData.id)
|
||||
if (index === -1)
|
||||
return [...prev, metaData]
|
||||
|
||||
return prev
|
||||
})
|
||||
}, [])
|
||||
const handleAddMetaData = useCallback(async (payload: BuiltInMetadataItem) => {
|
||||
const errorMsg = checkName(payload.name).errorMsg
|
||||
if (errorMsg) {
|
||||
Toast.notify({
|
||||
message: errorMsg,
|
||||
type: 'error',
|
||||
})
|
||||
return Promise.reject(new Error(errorMsg))
|
||||
}
|
||||
await doAddMetaData(payload)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
}, [checkName, doAddMetaData, t])
|
||||
|
||||
const hasData = list.length > 0
|
||||
const handleSave = async () => {
|
||||
await mutateAsync({
|
||||
dataset_id: datasetId,
|
||||
metadata_list: [{
|
||||
document_id: documentId,
|
||||
metadata_list: tempList,
|
||||
}],
|
||||
})
|
||||
setIsEdit(false)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
setTempList(list)
|
||||
setIsEdit(false)
|
||||
}
|
||||
|
||||
const startToEdit = () => {
|
||||
setTempList(list)
|
||||
setIsEdit(true)
|
||||
}
|
||||
|
||||
// built in enabled is set in dataset
|
||||
const { data: datasetMetaData } = useDatasetMetaData(datasetId)
|
||||
const builtInEnabled = datasetMetaData?.built_in_field_enabled
|
||||
|
||||
// old metadata and technical params
|
||||
const metadataMap = useMetadataMap()
|
||||
const languageMap = useLanguages()
|
||||
|
||||
const getReadOnlyMetaData = (mainField: 'originInfo' | 'technicalParameters') => {
|
||||
const fieldMap = metadataMap[mainField]?.subFieldsMap
|
||||
const sourceData = docDetail
|
||||
const getTargetMap = (field: string) => {
|
||||
if (field === 'language')
|
||||
return languageMap
|
||||
|
||||
return {} as any
|
||||
}
|
||||
|
||||
const getTargetValue = (field: string) => {
|
||||
const val = get(sourceData, field, '')
|
||||
if (!val && val !== 0)
|
||||
return '-'
|
||||
if (fieldMap[field]?.inputType === 'select')
|
||||
return getTargetMap(field)[val]
|
||||
if (fieldMap[field]?.render)
|
||||
return fieldMap[field]?.render?.(val, field === 'hit_count' ? get(sourceData, 'segment_count', 0) as number : undefined)
|
||||
return val
|
||||
}
|
||||
const fieldList = Object.keys(fieldMap).map((key) => {
|
||||
const field = fieldMap[key]
|
||||
return {
|
||||
id: field?.label,
|
||||
type: DataType.string,
|
||||
name: field?.label,
|
||||
value: getTargetValue(key),
|
||||
}
|
||||
})
|
||||
|
||||
return fieldList
|
||||
}
|
||||
|
||||
const originInfo = getReadOnlyMetaData('originInfo')
|
||||
const technicalParameters = getReadOnlyMetaData('technicalParameters')
|
||||
|
||||
return {
|
||||
embeddingAvailable,
|
||||
isEdit,
|
||||
setIsEdit,
|
||||
list,
|
||||
tempList,
|
||||
setTempList,
|
||||
handleSelectMetaData,
|
||||
handleAddMetaData,
|
||||
hasData,
|
||||
builtList,
|
||||
builtInEnabled,
|
||||
startToEdit,
|
||||
handleSave,
|
||||
handleCancel,
|
||||
originInfo,
|
||||
technicalParameters,
|
||||
}
|
||||
}
|
||||
|
||||
export default useMetadataDocument
|
||||
@ -0,0 +1,89 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { DataType } from '../types'
|
||||
import ModalLikeWrap from '../../../base/modal-like-wrap'
|
||||
import Field from './field'
|
||||
import OptionCard from '../../../workflow/nodes/_base/components/option-card'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { RiArrowLeftLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const i18nPrefix = 'dataset.metadata.createMetadata'
|
||||
|
||||
export type Props = {
|
||||
onClose?: () => void
|
||||
onSave: (data: any) => void
|
||||
hasBack?: boolean
|
||||
onBack?: () => void
|
||||
}
|
||||
|
||||
const CreateContent: FC<Props> = ({
|
||||
onClose = () => { },
|
||||
hasBack,
|
||||
onBack,
|
||||
onSave,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [type, setType] = useState(DataType.string)
|
||||
|
||||
const handleTypeChange = useCallback((newType: DataType) => {
|
||||
return () => setType(newType)
|
||||
}, [setType])
|
||||
const [name, setName] = useState('')
|
||||
const handleNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(e.target.value)
|
||||
}, [setName])
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
onSave({
|
||||
type,
|
||||
name,
|
||||
})
|
||||
}, [onSave, type, name])
|
||||
|
||||
return (
|
||||
<ModalLikeWrap
|
||||
title={t(`${i18nPrefix}.title`)}
|
||||
onClose={onClose}
|
||||
onConfirm={handleSave}
|
||||
hideCloseBtn={hasBack}
|
||||
beforeHeader={hasBack && (
|
||||
<div className='relative left-[-4px] mb-1 flex items-center py-1 space-x-1 text-text-accent cursor-pointer' onClick={onBack}>
|
||||
<RiArrowLeftLine className='size-4' />
|
||||
<div className='system-xs-semibold-uppercase'>{t(`${i18nPrefix}.back`)}</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className='space-y-3'>
|
||||
<Field label={t(`${i18nPrefix}.type`)}>
|
||||
<div className='grid grid-cols-3 gap-2'>
|
||||
<OptionCard
|
||||
title='String'
|
||||
selected={type === DataType.string}
|
||||
onSelect={handleTypeChange(DataType.string)}
|
||||
/>
|
||||
<OptionCard
|
||||
title='Number'
|
||||
selected={type === DataType.number}
|
||||
onSelect={handleTypeChange(DataType.number)}
|
||||
/>
|
||||
<OptionCard
|
||||
title='Time'
|
||||
selected={type === DataType.time}
|
||||
onSelect={handleTypeChange(DataType.time)}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
<Field label={t(`${i18nPrefix}.name`)}>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={handleNameChange}
|
||||
placeholder={t(`${i18nPrefix}.namePlaceholder`)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
</ModalLikeWrap>
|
||||
)
|
||||
}
|
||||
export default React.memo(CreateContent)
|
||||
@ -0,0 +1,45 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { Props as CreateContentProps } from './create-content'
|
||||
import CreateContent from './create-content'
|
||||
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../../base/portal-to-follow-elem'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
onSave: (data: any) => void
|
||||
trigger: React.ReactNode
|
||||
popupLeft?: number
|
||||
} & CreateContentProps
|
||||
|
||||
const CreateMetadataModal: FC<Props> = ({
|
||||
open,
|
||||
setOpen,
|
||||
trigger,
|
||||
popupLeft = 20,
|
||||
...createContentProps
|
||||
}) => {
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='left-start'
|
||||
offset={{
|
||||
mainAxis: popupLeft,
|
||||
crossAxis: -38,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{trigger}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1000]'>
|
||||
<CreateContent {...createContentProps} onClose={() => setOpen(false)} />
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem >
|
||||
|
||||
)
|
||||
}
|
||||
export default React.memo(CreateMetadataModal)
|
||||
@ -0,0 +1,248 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import type { BuiltInMetadataItem, MetadataItemWithValueLength } from '../types'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
|
||||
import { getIcon } from '../utils/get-icon'
|
||||
import cn from '@/utils/classnames'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Field from './field'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
|
||||
import { useBoolean, useHover } from 'ahooks'
|
||||
import Confirm from '@/app/components/base/confirm'
|
||||
import Toast from '@/app/components/base/toast'
|
||||
|
||||
const i18nPrefix = 'dataset.metadata.datasetMetadata'
|
||||
|
||||
type Props = {
|
||||
userMetadata: MetadataItemWithValueLength[]
|
||||
builtInMetadata: BuiltInMetadataItem[]
|
||||
isBuiltInEnabled: boolean
|
||||
onIsBuiltInEnabledChange: (value: boolean) => void
|
||||
onClose: () => void
|
||||
onAdd: (payload: BuiltInMetadataItem) => void
|
||||
onRename: (payload: MetadataItemWithValueLength) => void
|
||||
onRemove: (metaDataId: string) => void
|
||||
}
|
||||
|
||||
type ItemProps = {
|
||||
readonly?: boolean
|
||||
disabled?: boolean
|
||||
payload: MetadataItemWithValueLength
|
||||
onRename?: () => void
|
||||
onDelete?: () => void
|
||||
}
|
||||
const Item: FC<ItemProps> = ({
|
||||
readonly,
|
||||
disabled,
|
||||
payload,
|
||||
onRename,
|
||||
onDelete,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const Icon = getIcon(payload.type)
|
||||
|
||||
const handleRename = useCallback(() => {
|
||||
onRename?.()
|
||||
}, [onRename])
|
||||
|
||||
const deleteBtnRef = useRef<HTMLDivElement>(null)
|
||||
const isDeleteHovering = useHover(deleteBtnRef)
|
||||
const [isShowDeleteConfirm, {
|
||||
setTrue: showDeleteConfirm,
|
||||
setFalse: hideDeleteConfirm,
|
||||
}] = useBoolean(false)
|
||||
const handleDelete = useCallback(() => {
|
||||
hideDeleteConfirm()
|
||||
onDelete?.()
|
||||
}, [hideDeleteConfirm, onDelete])
|
||||
|
||||
return (
|
||||
<div
|
||||
key={payload.name}
|
||||
className={cn(
|
||||
!readonly && !disabled && 'group/item hover:shadow-xs cursor-pointer',
|
||||
'border border-components-panel-border-subtle rounded-md bg-components-panel-on-panel-item-bg',
|
||||
isDeleteHovering && 'border border-state-destructive-border bg-state-destructive-hover',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center h-8 px-2 justify-between',
|
||||
disabled && 'opacity-30', // not include border and bg
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center h-full text-text-tertiary space-x-1'>
|
||||
<Icon className='shrink-0 size-4' />
|
||||
<div className='max-w-[250px] truncate system-sm-medium text-text-primary'>{payload.name}</div>
|
||||
<div className='shrink-0 system-xs-regular'>{payload.type}</div>
|
||||
</div>
|
||||
{(!readonly || disabled) && (
|
||||
<div className='group-hover/item:hidden ml-2 shrink-0 system-xs-regular text-text-tertiary'>
|
||||
{disabled ? t(`${i18nPrefix}.disabled`) : t(`${i18nPrefix}.values`, { num: payload.count || 0 })}
|
||||
</div>
|
||||
)}
|
||||
<div className='group-hover/item:flex hidden ml-2 items-center text-text-tertiary space-x-1'>
|
||||
<RiEditLine className='size-4 cursor-pointer' onClick={handleRename} />
|
||||
<div ref={deleteBtnRef} className='hover:text-text-destructive'>
|
||||
<RiDeleteBinLine className='size-4 cursor-pointer' onClick={showDeleteConfirm} />
|
||||
</div>
|
||||
</div>
|
||||
{isShowDeleteConfirm && (
|
||||
<Confirm
|
||||
isShow
|
||||
type='warning'
|
||||
title={t('dataset.metadata.datasetMetadata.deleteTitle')}
|
||||
content={t('dataset.metadata.datasetMetadata.deleteContent', { name: payload.name })}
|
||||
onConfirm={handleDelete}
|
||||
onCancel={hideDeleteConfirm}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const DatasetMetadataDrawer: FC<Props> = ({
|
||||
userMetadata,
|
||||
builtInMetadata,
|
||||
isBuiltInEnabled,
|
||||
onIsBuiltInEnabledChange,
|
||||
onClose,
|
||||
onAdd,
|
||||
onRename,
|
||||
onRemove,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isShowRenameModal, setIsShowRenameModal] = useState(false)
|
||||
const [currPayload, setCurrPayload] = useState<MetadataItemWithValueLength | null>(null)
|
||||
const [templeName, setTempleName] = useState('')
|
||||
const handleRename = useCallback((payload: MetadataItemWithValueLength) => {
|
||||
return () => {
|
||||
setCurrPayload(payload)
|
||||
setTempleName(payload.name)
|
||||
setIsShowRenameModal(true)
|
||||
}
|
||||
}, [setCurrPayload, setIsShowRenameModal])
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const handleAdd = useCallback(async (data: MetadataItemWithValueLength) => {
|
||||
await onAdd(data)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
setOpen(false)
|
||||
}, [onAdd, t])
|
||||
|
||||
const handleRenamed = useCallback(async () => {
|
||||
const item = userMetadata.find(p => p.id === currPayload?.id)
|
||||
if (item) {
|
||||
await onRename({
|
||||
...item,
|
||||
name: templeName,
|
||||
})
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
}
|
||||
setIsShowRenameModal(false)
|
||||
}, [userMetadata, currPayload?.id, onRename, templeName, t])
|
||||
|
||||
const handleDelete = useCallback((payload: MetadataItemWithValueLength) => {
|
||||
return async () => {
|
||||
await onRemove(payload.id)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
}
|
||||
}, [onRemove, t])
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
showClose
|
||||
title={t('dataset.metadata.metadata')}
|
||||
footer={null}
|
||||
panelClassname='px-4 block !max-w-[420px] my-2 rounded-l-2xl'
|
||||
>
|
||||
<div className='h-full overflow-y-auto'>
|
||||
<div className='system-sm-regular text-text-tertiary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
<CreateModal
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
trigger={<Button variant='primary' className='mt-3'>
|
||||
<RiAddLine className='mr-1' />
|
||||
{t(`${i18nPrefix}.addMetaData`)}
|
||||
</Button>} hasBack onSave={handleAdd}
|
||||
/>
|
||||
|
||||
<div className='mt-3 space-y-1'>
|
||||
{userMetadata.map(payload => (
|
||||
<Item
|
||||
key={payload.id}
|
||||
payload={payload}
|
||||
onRename={handleRename(payload)}
|
||||
onDelete={handleDelete(payload)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className='mt-3 flex h-6 items-center'>
|
||||
<Switch
|
||||
defaultValue={isBuiltInEnabled}
|
||||
onChange={onIsBuiltInEnabledChange}
|
||||
/>
|
||||
<div className='ml-2 mr-0.5 system-sm-semibold text-text-secondary'>{t(`${i18nPrefix}.builtIn`)}</div>
|
||||
<Tooltip popupContent={<div className='max-w-[100px]'>{t(`${i18nPrefix}.builtInDescription`)}</div>} />
|
||||
</div>
|
||||
|
||||
<div className='mt-1 space-y-1'>
|
||||
{builtInMetadata.map(payload => (
|
||||
<Item
|
||||
key={payload.name}
|
||||
readonly
|
||||
disabled={!isBuiltInEnabled}
|
||||
payload={payload as MetadataItemWithValueLength}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isShowRenameModal && (
|
||||
<Modal isShow title={t(`${i18nPrefix}.rename`)} onClose={() => setIsShowRenameModal(false)}>
|
||||
<Field label={t(`${i18nPrefix}.name`)} className='mt-4'>
|
||||
<Input
|
||||
value={templeName}
|
||||
onChange={e => setTempleName(e.target.value)}
|
||||
placeholder={t(`${i18nPrefix}.namePlaceholder`)}
|
||||
/>
|
||||
</Field>
|
||||
<div className='mt-4 flex justify-end'>
|
||||
<Button
|
||||
className='mr-2'
|
||||
onClick={() => {
|
||||
setIsShowRenameModal(false)
|
||||
setTempleName(currPayload!.name)
|
||||
}}>{t('common.operation.cancel')}</Button>
|
||||
<Button
|
||||
onClick={handleRenamed}
|
||||
variant='primary'
|
||||
disabled={!templeName}
|
||||
>{t('common.operation.save')}</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
export default React.memo(DatasetMetadataDrawer)
|
||||
@ -0,0 +1,23 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Field: FC<Props> = ({
|
||||
className,
|
||||
label,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className='py-1 system-sm-semibold text-text-secondary'>{label}</div>
|
||||
<div className='mt-1'>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(Field)
|
||||
@ -0,0 +1,81 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import type { Props as CreateContentProps } from './create-content'
|
||||
import CreateContent from './create-content'
|
||||
import SelectMetadata from './select-metadata'
|
||||
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../../base/portal-to-follow-elem'
|
||||
import type { MetadataItem } from '../types'
|
||||
import type { Placement } from '@floating-ui/react'
|
||||
import { useDatasetMetaData } from '@/service/knowledge/use-metadata'
|
||||
|
||||
type Props = {
|
||||
datasetId: string
|
||||
popupPlacement?: Placement
|
||||
popupOffset?: { mainAxis: number, crossAxis: number }
|
||||
onSelect: (data: MetadataItem) => void
|
||||
onSave: (data: MetadataItem) => void
|
||||
trigger: React.ReactNode
|
||||
onManage: () => void
|
||||
} & CreateContentProps
|
||||
|
||||
enum Step {
|
||||
select = 'select',
|
||||
create = 'create',
|
||||
}
|
||||
|
||||
const SelectMetadataModal: FC<Props> = ({
|
||||
datasetId,
|
||||
popupPlacement = 'left-start',
|
||||
popupOffset = { mainAxis: -38, crossAxis: 4 },
|
||||
trigger,
|
||||
onSelect,
|
||||
onSave,
|
||||
onManage,
|
||||
}) => {
|
||||
const { data: datasetMetaData } = useDatasetMetaData(datasetId)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [step, setStep] = useState(Step.select)
|
||||
|
||||
const handleSave = useCallback(async (data: MetadataItem) => {
|
||||
await onSave(data)
|
||||
setStep(Step.select)
|
||||
}, [onSave])
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement={popupPlacement}
|
||||
offset={popupOffset}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
onClick={() => setOpen(!open)}
|
||||
className='block'
|
||||
>
|
||||
{trigger}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1000]'>
|
||||
{step === Step.select ? (
|
||||
<SelectMetadata
|
||||
onSelect={(data) => {
|
||||
onSelect(data)
|
||||
setOpen(false)
|
||||
}}
|
||||
list={datasetMetaData?.doc_metadata || []}
|
||||
onNew={() => setStep(Step.create)}
|
||||
onManage={onManage}
|
||||
/>
|
||||
) : (
|
||||
<CreateContent
|
||||
onSave={handleSave}
|
||||
hasBack
|
||||
onBack={() => setStep(Step.select)}
|
||||
/>
|
||||
)}
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem >
|
||||
|
||||
)
|
||||
}
|
||||
export default React.memo(SelectMetadataModal)
|
||||
@ -0,0 +1,82 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import type { MetadataItem } from '../types'
|
||||
import SearchInput from '@/app/components/base/search-input'
|
||||
import { RiAddLine, RiArrowRightUpLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getIcon } from '../utils/get-icon'
|
||||
|
||||
const i18nPrefix = 'dataset.metadata.selectMetadata'
|
||||
|
||||
type Props = {
|
||||
list: MetadataItem[]
|
||||
onSelect: (data: MetadataItem) => void
|
||||
onNew: () => void
|
||||
onManage: () => void
|
||||
}
|
||||
|
||||
const SelectMetadata: FC<Props> = ({
|
||||
list: notFilteredList,
|
||||
onSelect,
|
||||
onNew,
|
||||
onManage,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [query, setQuery] = useState('')
|
||||
const list = useMemo(() => {
|
||||
if (!query) return notFilteredList
|
||||
return notFilteredList.filter((item) => {
|
||||
return item.name.toLowerCase().includes(query.toLowerCase())
|
||||
})
|
||||
}, [query, notFilteredList])
|
||||
return (
|
||||
<div className='w-[320px] pt-2 pb-0 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg backdrop-blur-[5px]'>
|
||||
<SearchInput
|
||||
className='mx-2'
|
||||
value={query}
|
||||
onChange={setQuery}
|
||||
placeholder={t(`${i18nPrefix}.search`)}
|
||||
/>
|
||||
<div className='mt-2'>
|
||||
{list.map((item) => {
|
||||
const Icon = getIcon(item.type)
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className='mx-1 flex items-center h-6 px-3 justify-between rounded-md hover:bg-state-base-hover cursor-pointer'
|
||||
onClick={() => onSelect({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
})}
|
||||
>
|
||||
<div className='w-0 grow flex items-center h-full text-text-secondary'>
|
||||
<Icon className='shrink-0 mr-[5px] size-3.5' />
|
||||
<div className='w-0 grow truncate system-sm-medium'>{item.name}</div>
|
||||
</div>
|
||||
<div className='ml-1 shrink-0 system-xs-regular text-text-tertiary'>
|
||||
{item.type}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className='mt-1 flex justify-between p-1 border-t border-divider-subtle'>
|
||||
<div className='flex items-center h-6 px-3 text-text-secondary rounded-md hover:bg-state-base-hover cursor-pointer space-x-1' onClick={onNew}>
|
||||
<RiAddLine className='size-3.5' />
|
||||
<div className='system-sm-medium'>{t(`${i18nPrefix}.newAction`)}</div>
|
||||
</div>
|
||||
<div className='flex items-center h-6 text-text-secondary '>
|
||||
<div className='mr-[3px] w-px h-3 bg-divider-regular'></div>
|
||||
<div className='flex h-full items-center px-1.5 hover:bg-state-base-hover rounded-md cursor-pointer' onClick={onManage}>
|
||||
<div className='mr-1 system-sm-medium'>{t(`${i18nPrefix}.manageAction`)}</div>
|
||||
<RiArrowRightUpLine className='size-3.5' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(SelectMetadata)
|
||||
@ -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='shrink-0 w-[128px] truncate py-1 items-center text-text-tertiary system-xs-medium'>
|
||||
{label}
|
||||
</div>
|
||||
<div className='shrink-0 w-[244px]'>
|
||||
{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 text-text-tertiary cursor-pointer' />
|
||||
<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('bg-white', 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 p-1 rounded-md text-text-tertiary hover:text-text-destructive hover:bg-state-destructive-hover cursor-pointer'>
|
||||
<RiDeleteBinLine className='size-4' onClick={() => onDelete?.(item)} />
|
||||
</div>
|
||||
</div>
|
||||
) : (<div className='py-1 system-xs-regular 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='p-4 pt-3 rounded-xl bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2'>
|
||||
<div className='text-text-secondary text-xs font-semibold leading-5'>{t('dataset.metadata.metadata')}</div>
|
||||
<div className='mt-1 system-xs-regular 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)
|
||||
@ -0,0 +1,41 @@
|
||||
export enum DataType {
|
||||
string = 'string',
|
||||
number = 'number',
|
||||
time = 'time',
|
||||
}
|
||||
|
||||
export type BuiltInMetadataItem = {
|
||||
type: DataType
|
||||
name: string
|
||||
}
|
||||
|
||||
export type MetadataItem = BuiltInMetadataItem & {
|
||||
id: string
|
||||
}
|
||||
|
||||
export type MetadataItemWithValue = MetadataItem & {
|
||||
value: string | number | null
|
||||
}
|
||||
|
||||
export type MetadataItemWithValueLength = MetadataItem & {
|
||||
count: number
|
||||
}
|
||||
|
||||
export type MetadataItemInBatchEdit = MetadataItemWithValue & {
|
||||
isMultipleValue?: boolean
|
||||
}
|
||||
|
||||
export type MetadataBatchEditToServer = { document_id: string, metadata_list: MetadataItemWithValue[] }[]
|
||||
|
||||
export enum UpdateType {
|
||||
changeValue = 'changeValue',
|
||||
delete = 'delete',
|
||||
}
|
||||
|
||||
export type MetadataItemWithEdit = MetadataItemWithValue & {
|
||||
isMultipleValue?: boolean
|
||||
isUpdated?: boolean
|
||||
updateType?: UpdateType
|
||||
}
|
||||
|
||||
export const isShowManageMetadataLocalStorageKey = 'dify-isShowManageMetadata'
|
||||
@ -0,0 +1,10 @@
|
||||
import { DataType } from '../types'
|
||||
import { RiHashtag, RiTextSnippet, RiTimeLine } from '@remixicon/react'
|
||||
|
||||
export const getIcon = (type: DataType) => {
|
||||
return ({
|
||||
[DataType.string]: RiTextSnippet,
|
||||
[DataType.number]: RiHashtag,
|
||||
[DataType.time]: RiTimeLine,
|
||||
}[type] || RiTextSnippet)
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
import {
|
||||
useCallback,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiAddLine,
|
||||
} from '@remixicon/react'
|
||||
import MetadataIcon from './metadata-icon'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
import type { MetadataInDoc } from '@/models/datasets'
|
||||
|
||||
const AddCondition = ({
|
||||
metadataList,
|
||||
handleAddCondition,
|
||||
}: Pick<MetadataShape, 'handleAddCondition' | 'metadataList'>) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [searchText, setSearchText] = useState('')
|
||||
|
||||
const filteredMetadataList = useMemo(() => {
|
||||
return metadataList?.filter(metadata => metadata.name.includes(searchText))
|
||||
}, [metadataList, searchText])
|
||||
|
||||
const handleAddConditionWrapped = useCallback((item: MetadataInDoc) => {
|
||||
handleAddCondition?.(item)
|
||||
setOpen(false)
|
||||
}, [handleAddCondition])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-start'
|
||||
offset={{
|
||||
mainAxis: 3,
|
||||
crossAxis: 0,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
|
||||
<Button
|
||||
size='small'
|
||||
variant='secondary'
|
||||
>
|
||||
<RiAddLine className='w-3.5 h-3.5' />
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.panel.add')}
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='w-[320px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
|
||||
<div className='p-2 pb-1'>
|
||||
<Input
|
||||
showLeftIcon
|
||||
placeholder={t('workflow.nodes.knowledgeRetrieval.metadata.panel.search')}
|
||||
value={searchText}
|
||||
onChange={e => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='p-1'>
|
||||
{
|
||||
filteredMetadataList?.map(metadata => (
|
||||
<div
|
||||
key={metadata.name}
|
||||
className='flex items-center px-3 h-6 rounded-md system-sm-medium text-text-secondary cursor-pointer hover:bg-state-base-hover'
|
||||
>
|
||||
<div className='mr-1 p-[1px]'>
|
||||
<MetadataIcon type={metadata.type} />
|
||||
</div>
|
||||
<div
|
||||
className='grow truncate'
|
||||
title={metadata.name}
|
||||
onClick={() => handleAddConditionWrapped(metadata)}
|
||||
>
|
||||
{metadata.name}
|
||||
</div>
|
||||
<div className='shrink-0 system-xs-regular text-text-tertiary'>{metadata.type}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddCondition
|
||||
@ -0,0 +1,91 @@
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import type { VarType } from '@/app/components/workflow/types'
|
||||
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||
|
||||
type ConditionCommonVariableSelectorProps = {
|
||||
variables?: { name: string; type: string }[]
|
||||
value?: string | number
|
||||
varType?: VarType
|
||||
onChange: (v: string) => void
|
||||
}
|
||||
|
||||
const ConditionCommonVariableSelector = ({
|
||||
variables = [],
|
||||
value,
|
||||
onChange,
|
||||
varType,
|
||||
}: ConditionCommonVariableSelectorProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const selected = variables.find(v => v.name === value)
|
||||
const handleChange = useCallback((v: string) => {
|
||||
onChange(v)
|
||||
setOpen(false)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-start'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 0,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger asChild onClick={() => {
|
||||
if (!variables.length) return
|
||||
setOpen(!open)
|
||||
}}>
|
||||
<div className="grow flex items-center cursor-pointer h-6">
|
||||
{
|
||||
selected && (
|
||||
<div className='inline-flex items-center pl-[5px] pr-1.5 h-6 text-text-secondary rounded-md system-xs-medium border-[0.5px] border-components-panel-border-subtle shadow-xs bg-components-badge-white-to-dark'>
|
||||
<Variable02 className='mr-1 w-3.5 h-3.5 text-text-accent' />
|
||||
{selected.name}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
!selected && (
|
||||
<>
|
||||
<div className='grow flex items-center text-components-input-text-placeholder system-sm-regular'>
|
||||
<Variable02 className='mr-1 w-4 h-4' />
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.panel.select')}
|
||||
</div>
|
||||
<div className='shrink-0 flex items-center px-[5px] h-5 border border-divider-deep rounded-[5px] system-2xs-medium text-text-tertiary'>
|
||||
{varType}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1000]'>
|
||||
<div className='p-1 w-[200px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
|
||||
{
|
||||
variables.map(v => (
|
||||
<div
|
||||
key={v.name}
|
||||
className='flex items-center px-2 h-6 cursor-pointer rounded-md text-text-secondary system-xs-medium hover:bg-state-base-hover'
|
||||
onClick={() => handleChange(v.name)}
|
||||
>
|
||||
<Variable02 className='mr-1 w-4 h-4 text-text-accent' />
|
||||
{v.name}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionCommonVariableSelector
|
||||
@ -0,0 +1,86 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import dayjs from 'dayjs'
|
||||
import {
|
||||
RiCalendarLine,
|
||||
RiCloseCircleFill,
|
||||
} from '@remixicon/react'
|
||||
import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
|
||||
import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
|
||||
type ConditionDateProps = {
|
||||
value?: number
|
||||
onChange: (date?: number) => void
|
||||
}
|
||||
const ConditionDate = ({
|
||||
value,
|
||||
onChange,
|
||||
}: ConditionDateProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { userProfile: { timezone } } = useAppContext()
|
||||
|
||||
const handleDateChange = useCallback((date?: dayjs.Dayjs) => {
|
||||
if (date)
|
||||
onChange(date.unix())
|
||||
else
|
||||
onChange()
|
||||
}, [onChange])
|
||||
|
||||
const renderTrigger = useCallback(({
|
||||
handleClickTrigger,
|
||||
}: TriggerProps) => {
|
||||
return (
|
||||
<div className='group flex items-center' onClick={handleClickTrigger}>
|
||||
<div
|
||||
className={cn(
|
||||
'grow flex items-center mr-0.5 px-1 h-6 system-sm-regular cursor-pointer',
|
||||
value ? 'text-text-secondary' : 'text-text-tertiary',
|
||||
)}
|
||||
>
|
||||
{
|
||||
value
|
||||
? dayjs(value * 1000).tz(timezone).format('MMMM DD YYYY HH:mm A')
|
||||
: t('workflow.nodes.knowledgeRetrieval.metadata.panel.datePlaceholder')
|
||||
}
|
||||
</div>
|
||||
{
|
||||
value && (
|
||||
<RiCloseCircleFill
|
||||
className={cn(
|
||||
'hidden group-hover:block shrink-0 w-4 h-4 cursor-pointer hover:text-components-input-text-filled',
|
||||
value && 'text-text-quaternary',
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDateChange()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<RiCalendarLine
|
||||
className={cn(
|
||||
'block shrink-0 w-4 h-4',
|
||||
value ? 'text-text-quaternary' : 'text-text-tertiary',
|
||||
value && 'group-hover:hidden',
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}, [value, handleDateChange, timezone, t])
|
||||
|
||||
return (
|
||||
<div className='px-2 py-1 h-8'>
|
||||
<DatePicker
|
||||
timezone={timezone}
|
||||
value={value ? dayjs(value * 1000) : undefined}
|
||||
onChange={handleDateChange}
|
||||
onClear={handleDateChange}
|
||||
renderTrigger={renderTrigger}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionDate
|
||||
@ -0,0 +1,192 @@
|
||||
import {
|
||||
useCallback,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {
|
||||
RiDeleteBinLine,
|
||||
} from '@remixicon/react'
|
||||
import MetadataIcon from '../metadata-icon'
|
||||
import {
|
||||
COMMON_VARIABLE_REGEX,
|
||||
VARIABLE_REGEX,
|
||||
comparisonOperatorNotRequireValue,
|
||||
} from './utils'
|
||||
import ConditionOperator from './condition-operator'
|
||||
import ConditionString from './condition-string'
|
||||
import ConditionNumber from './condition-number'
|
||||
import ConditionDate from './condition-date'
|
||||
import type {
|
||||
ComparisonOperator,
|
||||
HandleRemoveCondition,
|
||||
HandleUpdateCondition,
|
||||
MetadataFilteringCondition,
|
||||
MetadataShape,
|
||||
} from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type ConditionItemProps = {
|
||||
className?: string
|
||||
disabled?: boolean
|
||||
condition: MetadataFilteringCondition // condition may the condition of case or condition of sub variable
|
||||
onRemoveCondition?: HandleRemoveCondition
|
||||
onUpdateCondition?: HandleUpdateCondition
|
||||
} & Pick<MetadataShape, 'metadataList' | 'availableStringVars' | 'availableStringNodesWithParent' | 'availableNumberVars' | 'availableNumberNodesWithParent' | 'isCommonVariable' | 'availableCommonStringVars' | 'availableCommonNumberVars'>
|
||||
const ConditionItem = ({
|
||||
className,
|
||||
disabled,
|
||||
condition,
|
||||
onRemoveCondition,
|
||||
onUpdateCondition,
|
||||
metadataList = [],
|
||||
availableStringVars = [],
|
||||
availableStringNodesWithParent = [],
|
||||
availableNumberVars = [],
|
||||
availableNumberNodesWithParent = [],
|
||||
isCommonVariable,
|
||||
availableCommonStringVars = [],
|
||||
availableCommonNumberVars = [],
|
||||
}: ConditionItemProps) => {
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
|
||||
const canChooseOperator = useMemo(() => {
|
||||
if (disabled)
|
||||
return false
|
||||
|
||||
return true
|
||||
}, [disabled])
|
||||
|
||||
const doRemoveCondition = useCallback(() => {
|
||||
onRemoveCondition?.(condition.id)
|
||||
}, [onRemoveCondition, condition.id])
|
||||
|
||||
const currentMetadata = useMemo(() => {
|
||||
return metadataList.find(metadata => metadata.name === condition.name)
|
||||
}, [metadataList, condition.name])
|
||||
|
||||
const handleConditionOperatorChange = useCallback((operator: ComparisonOperator) => {
|
||||
onUpdateCondition?.(
|
||||
condition.id,
|
||||
{
|
||||
...condition,
|
||||
value: comparisonOperatorNotRequireValue(condition.comparison_operator) ? undefined : condition.value,
|
||||
comparison_operator: operator,
|
||||
})
|
||||
}, [onUpdateCondition, condition])
|
||||
|
||||
const valueAndValueMethod = useMemo(() => {
|
||||
if (
|
||||
(currentMetadata?.type === MetadataFilteringVariableType.string || currentMetadata?.type === MetadataFilteringVariableType.number)
|
||||
&& typeof condition.value === 'string'
|
||||
) {
|
||||
const regex = isCommonVariable ? COMMON_VARIABLE_REGEX : VARIABLE_REGEX
|
||||
const matchedStartNumber = isCommonVariable ? 2 : 3
|
||||
const matched = condition.value.match(regex)
|
||||
|
||||
if (matched?.length) {
|
||||
return {
|
||||
value: matched[0].slice(matchedStartNumber, -matchedStartNumber),
|
||||
valueMethod: 'variable',
|
||||
}
|
||||
}
|
||||
else {
|
||||
return {
|
||||
value: condition.value,
|
||||
valueMethod: 'constant',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
value: condition.value,
|
||||
valueMethod: 'constant',
|
||||
}
|
||||
}, [currentMetadata, condition.value, isCommonVariable])
|
||||
const [localValueMethod, setLocalValueMethod] = useState(valueAndValueMethod.valueMethod)
|
||||
|
||||
const handleValueMethodChange = useCallback((v: string) => {
|
||||
setLocalValueMethod(v)
|
||||
onUpdateCondition?.(condition.id, { ...condition, value: undefined })
|
||||
}, [condition, onUpdateCondition])
|
||||
|
||||
const handleValueChange = useCallback((v: any) => {
|
||||
onUpdateCondition?.(condition.id, { ...condition, value: v })
|
||||
}, [condition, onUpdateCondition])
|
||||
|
||||
return (
|
||||
<div className={cn('flex mb-1 last-of-type:mb-0', className)}>
|
||||
<div className={cn(
|
||||
'grow bg-components-input-bg-normal rounded-lg',
|
||||
isHovered && 'bg-state-destructive-hover',
|
||||
)}>
|
||||
<div className='flex items-center p-1'>
|
||||
<div className='grow w-0'>
|
||||
<div className='inline-flex items-center pl-1 pr-1.5 h-6 border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark rounded-md shadow-xs'>
|
||||
<div className='mr-0.5 p-[1px]'>
|
||||
<MetadataIcon type={currentMetadata?.type} className='w-3 h-3' />
|
||||
</div>
|
||||
<div className='mr-0.5 system-xs-medium text-text-secondary'>{currentMetadata?.name}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>{currentMetadata?.type}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mx-1 w-[1px] h-3 bg-divider-regular'></div>
|
||||
<ConditionOperator
|
||||
disabled={!canChooseOperator}
|
||||
variableType={currentMetadata?.type || MetadataFilteringVariableType.string}
|
||||
value={condition.comparison_operator}
|
||||
onSelect={handleConditionOperatorChange}
|
||||
/>
|
||||
</div>
|
||||
<div className='border-t border-t-divider-subtle'>
|
||||
{
|
||||
!comparisonOperatorNotRequireValue(condition.comparison_operator) && currentMetadata?.type === MetadataFilteringVariableType.string && (
|
||||
<ConditionString
|
||||
valueMethod={localValueMethod}
|
||||
onValueMethodChange={handleValueMethodChange}
|
||||
nodesOutputVars={availableStringVars}
|
||||
availableNodes={availableStringNodesWithParent}
|
||||
value={valueAndValueMethod.value as string}
|
||||
onChange={handleValueChange}
|
||||
isCommonVariable={isCommonVariable}
|
||||
commonVariables={availableCommonStringVars}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!comparisonOperatorNotRequireValue(condition.comparison_operator) && currentMetadata?.type === MetadataFilteringVariableType.number && (
|
||||
<ConditionNumber
|
||||
valueMethod={localValueMethod}
|
||||
onValueMethodChange={handleValueMethodChange}
|
||||
nodesOutputVars={availableNumberVars}
|
||||
availableNodes={availableNumberNodesWithParent}
|
||||
value={valueAndValueMethod.value}
|
||||
onChange={handleValueChange}
|
||||
isCommonVariable={isCommonVariable}
|
||||
commonVariables={availableCommonNumberVars}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!comparisonOperatorNotRequireValue(condition.comparison_operator) && currentMetadata?.type === MetadataFilteringVariableType.time && (
|
||||
<ConditionDate
|
||||
value={condition.value as number}
|
||||
onChange={handleValueChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className='shrink-0 flex items-center justify-center ml-1 mt-1 w-6 h-6 rounded-lg cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={doRemoveCondition}
|
||||
>
|
||||
<RiDeleteBinLine className='w-4 h-4' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionItem
|
||||
@ -0,0 +1,88 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ConditionValueMethod from './condition-value-method'
|
||||
import type { ConditionValueMethodProps } from './condition-value-method'
|
||||
import ConditionVariableSelector from './condition-variable-selector'
|
||||
import ConditionCommonVariableSelector from './condition-common-variable-selector.tsx'
|
||||
import type {
|
||||
Node,
|
||||
NodeOutPutVar,
|
||||
ValueSelector,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
import Input from '@/app/components/base/input'
|
||||
|
||||
type ConditionNumberProps = {
|
||||
value?: string | number
|
||||
onChange: (value?: string | number) => void
|
||||
nodesOutputVars: NodeOutPutVar[]
|
||||
availableNodes: Node[]
|
||||
isCommonVariable?: boolean
|
||||
commonVariables: { name: string, type: string }[]
|
||||
} & ConditionValueMethodProps
|
||||
const ConditionNumber = ({
|
||||
value,
|
||||
onChange,
|
||||
valueMethod,
|
||||
onValueMethodChange,
|
||||
nodesOutputVars,
|
||||
availableNodes,
|
||||
isCommonVariable,
|
||||
commonVariables,
|
||||
}: ConditionNumberProps) => {
|
||||
const { t } = useTranslation()
|
||||
const handleVariableValueChange = useCallback((v: ValueSelector) => {
|
||||
onChange(`{{#${v.join('.')}#}}`)
|
||||
}, [onChange])
|
||||
|
||||
const handleCommonVariableValueChange = useCallback((v: string) => {
|
||||
onChange(`{{${v}}}`)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<div className='flex items-center pl-1 pr-2 h-8'>
|
||||
<ConditionValueMethod
|
||||
valueMethod={valueMethod}
|
||||
onValueMethodChange={onValueMethodChange}
|
||||
/>
|
||||
<div className='ml-1 mr-1.5 w-[1px] h-4 bg-divider-regular'></div>
|
||||
{
|
||||
valueMethod === 'variable' && !isCommonVariable && (
|
||||
<ConditionVariableSelector
|
||||
valueSelector={value ? (value as string).split('.') : []}
|
||||
onChange={handleVariableValueChange}
|
||||
nodesOutputVars={nodesOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
varType={VarType.number}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
valueMethod === 'variable' && isCommonVariable && (
|
||||
<ConditionCommonVariableSelector
|
||||
variables={commonVariables}
|
||||
value={value}
|
||||
onChange={handleCommonVariableValueChange}
|
||||
varType={VarType.number}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
valueMethod === 'constant' && (
|
||||
<Input
|
||||
className='bg-transparent hover:bg-transparent outline-none border-none focus:shadow-none focus:bg-transparent'
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value
|
||||
onChange(v ? Number(e.target.value) : undefined)
|
||||
}}
|
||||
placeholder={t('workflow.nodes.knowledgeRetrieval.metadata.panel.placeholder')}
|
||||
type='number'
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionNumber
|
||||
@ -0,0 +1,98 @@
|
||||
import {
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowDownSLine } from '@remixicon/react'
|
||||
import {
|
||||
getOperators,
|
||||
isComparisonOperatorNeedTranslate,
|
||||
} from './utils'
|
||||
import Button from '@/app/components/base/button'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import cn from '@/utils/classnames'
|
||||
import type {
|
||||
ComparisonOperator,
|
||||
MetadataFilteringVariableType,
|
||||
} from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
|
||||
const i18nPrefix = 'workflow.nodes.ifElse'
|
||||
|
||||
type ConditionOperatorProps = {
|
||||
className?: string
|
||||
disabled?: boolean
|
||||
variableType: MetadataFilteringVariableType
|
||||
value?: string
|
||||
onSelect: (value: ComparisonOperator) => void
|
||||
}
|
||||
const ConditionOperator = ({
|
||||
className,
|
||||
disabled,
|
||||
variableType,
|
||||
value,
|
||||
onSelect,
|
||||
}: ConditionOperatorProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const options = useMemo(() => {
|
||||
return getOperators(variableType).map((o) => {
|
||||
return {
|
||||
label: isComparisonOperatorNeedTranslate(o) ? t(`${i18nPrefix}.comparisonOperator.${o}`) : o,
|
||||
value: o,
|
||||
}
|
||||
})
|
||||
}, [t, variableType])
|
||||
const selectedOption = options.find(o => Array.isArray(value) ? o.value === value[0] : o.value === value)
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-end'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 0,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
||||
<Button
|
||||
className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
|
||||
size='small'
|
||||
variant='ghost'
|
||||
disabled={disabled}
|
||||
>
|
||||
{
|
||||
selectedOption
|
||||
? selectedOption.label
|
||||
: t(`${i18nPrefix}.select`)
|
||||
}
|
||||
<RiArrowDownSLine className='ml-1 w-3.5 h-3.5' />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
|
||||
{
|
||||
options.map(option => (
|
||||
<div
|
||||
key={option.value}
|
||||
className='flex items-center px-3 py-1.5 h-7 text-[13px] font-medium text-text-secondary rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||
onClick={() => {
|
||||
onSelect(option.value)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionOperator
|
||||
@ -0,0 +1,84 @@
|
||||
import { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ConditionValueMethod from './condition-value-method'
|
||||
import type { ConditionValueMethodProps } from './condition-value-method'
|
||||
import ConditionVariableSelector from './condition-variable-selector'
|
||||
import ConditionCommonVariableSelector from './condition-common-variable-selector.tsx'
|
||||
import type {
|
||||
Node,
|
||||
NodeOutPutVar,
|
||||
ValueSelector,
|
||||
} from '@/app/components/workflow/types'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
|
||||
type ConditionStringProps = {
|
||||
value?: string
|
||||
onChange: (value: string) => void
|
||||
nodesOutputVars: NodeOutPutVar[]
|
||||
availableNodes: Node[]
|
||||
isCommonVariable?: boolean
|
||||
commonVariables: { name: string, type: string }[]
|
||||
} & ConditionValueMethodProps
|
||||
const ConditionString = ({
|
||||
value,
|
||||
onChange,
|
||||
valueMethod = 'constant',
|
||||
onValueMethodChange,
|
||||
nodesOutputVars,
|
||||
availableNodes,
|
||||
isCommonVariable,
|
||||
commonVariables,
|
||||
}: ConditionStringProps) => {
|
||||
const { t } = useTranslation()
|
||||
const handleVariableValueChange = useCallback((v: ValueSelector) => {
|
||||
onChange(`{{#${v.join('.')}#}}`)
|
||||
}, [onChange])
|
||||
|
||||
const handleCommonVariableValueChange = useCallback((v: string) => {
|
||||
onChange(`{{${v}}}`)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<div className='flex items-center pl-1 pr-2 h-8'>
|
||||
<ConditionValueMethod
|
||||
valueMethod={valueMethod}
|
||||
onValueMethodChange={onValueMethodChange}
|
||||
/>
|
||||
<div className='ml-1 mr-1.5 w-[1px] h-4 bg-divider-regular'></div>
|
||||
{
|
||||
valueMethod === 'variable' && !isCommonVariable && (
|
||||
<ConditionVariableSelector
|
||||
valueSelector={value ? value!.split('.') : []}
|
||||
onChange={handleVariableValueChange}
|
||||
nodesOutputVars={nodesOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
varType={VarType.string}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
valueMethod === 'variable' && isCommonVariable && (
|
||||
<ConditionCommonVariableSelector
|
||||
variables={commonVariables}
|
||||
value={value}
|
||||
onChange={handleCommonVariableValueChange}
|
||||
varType={VarType.string}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
valueMethod === 'constant' && (
|
||||
<Input
|
||||
className='bg-transparent hover:bg-transparent outline-none border-none focus:shadow-none focus:bg-transparent'
|
||||
value={value}
|
||||
onChange={e => onChange(e.target.value)}
|
||||
placeholder={t('workflow.nodes.knowledgeRetrieval.metadata.panel.placeholder')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionString
|
||||
@ -0,0 +1,71 @@
|
||||
import { useState } from 'react'
|
||||
import { capitalize } from 'lodash-es'
|
||||
import { RiArrowDownSLine } from '@remixicon/react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
export type ConditionValueMethodProps = {
|
||||
valueMethod?: string
|
||||
onValueMethodChange: (v: string) => void
|
||||
}
|
||||
const options = [
|
||||
'variable',
|
||||
'constant',
|
||||
]
|
||||
const ConditionValueMethod = ({
|
||||
valueMethod = 'variable',
|
||||
onValueMethodChange,
|
||||
}: ConditionValueMethodProps) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-start'
|
||||
offset={{ mainAxis: 4, crossAxis: 0 }}
|
||||
>
|
||||
<PortalToFollowElemTrigger asChild onClick={() => setOpen(v => !v)}>
|
||||
<Button
|
||||
className='shrink-0'
|
||||
variant='ghost'
|
||||
size='small'
|
||||
>
|
||||
{capitalize(valueMethod)}
|
||||
<RiArrowDownSLine className='ml-[1px] w-3.5 h-3.5' />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1000]'>
|
||||
<div className='p-1 w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
||||
{
|
||||
options.map(option => (
|
||||
<div
|
||||
key={option}
|
||||
className={cn(
|
||||
'flex items-center px-3 h-7 rounded-md hover:bg-state-base-hover cursor-pointer',
|
||||
'text-[13px] font-medium text-text-secondary',
|
||||
valueMethod === option && 'bg-state-base-hover',
|
||||
)}
|
||||
onClick={() => {
|
||||
if (valueMethod === option)
|
||||
return
|
||||
onValueMethodChange(option)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{capitalize(option)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionValueMethod
|
||||
@ -0,0 +1,92 @@
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import VariableTag from '@/app/components/workflow/nodes/_base/components/variable-tag'
|
||||
import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
|
||||
import type {
|
||||
Node,
|
||||
NodeOutPutVar,
|
||||
ValueSelector,
|
||||
Var,
|
||||
} from '@/app/components/workflow/types'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
|
||||
|
||||
type ConditionVariableSelectorProps = {
|
||||
valueSelector?: ValueSelector
|
||||
varType?: VarType
|
||||
availableNodes?: Node[]
|
||||
nodesOutputVars?: NodeOutPutVar[]
|
||||
onChange: (valueSelector: ValueSelector, varItem: Var) => void
|
||||
}
|
||||
|
||||
const ConditionVariableSelector = ({
|
||||
valueSelector = [],
|
||||
varType = VarType.string,
|
||||
availableNodes = [],
|
||||
nodesOutputVars = [],
|
||||
onChange,
|
||||
}: ConditionVariableSelectorProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const handleChange = useCallback((valueSelector: ValueSelector, varItem: Var) => {
|
||||
onChange(valueSelector, varItem)
|
||||
setOpen(false)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='bottom-start'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 0,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger asChild onClick={() => setOpen(!open)}>
|
||||
<div className="grow flex items-center cursor-pointer h-6">
|
||||
{
|
||||
!!valueSelector.length && (
|
||||
<VariableTag
|
||||
valueSelector={valueSelector}
|
||||
varType={varType}
|
||||
availableNodes={availableNodes}
|
||||
isShort
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!valueSelector.length && (
|
||||
<>
|
||||
<div className='grow flex items-center text-components-input-text-placeholder system-sm-regular'>
|
||||
<Variable02 className='mr-1 w-4 h-4' />
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.panel.select')}
|
||||
</div>
|
||||
<div className='shrink-0 flex items-center px-[5px] h-5 border border-divider-deep rounded-[5px] system-2xs-medium text-text-tertiary'>
|
||||
{varType}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1000]'>
|
||||
<div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
|
||||
<VarReferenceVars
|
||||
vars={nodesOutputVars}
|
||||
isSupportFileVar
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionVariableSelector
|
||||
@ -0,0 +1,75 @@
|
||||
import { RiLoopLeftLine } from '@remixicon/react'
|
||||
import ConditionItem from './condition-item'
|
||||
import cn from '@/utils/classnames'
|
||||
import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
import { LogicalOperator } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
|
||||
type ConditionListProps = {
|
||||
disabled?: boolean
|
||||
} & Omit<MetadataShape, 'handleAddCondition'>
|
||||
|
||||
const ConditionList = ({
|
||||
disabled,
|
||||
metadataList = [],
|
||||
metadataFilteringConditions = {
|
||||
conditions: [],
|
||||
logical_operator: LogicalOperator.and,
|
||||
},
|
||||
handleRemoveCondition,
|
||||
handleToggleConditionLogicalOperator,
|
||||
handleUpdateCondition,
|
||||
availableStringVars,
|
||||
availableStringNodesWithParent,
|
||||
availableNumberVars,
|
||||
availableNumberNodesWithParent,
|
||||
isCommonVariable,
|
||||
availableCommonNumberVars,
|
||||
availableCommonStringVars,
|
||||
}: ConditionListProps) => {
|
||||
const { conditions, logical_operator } = metadataFilteringConditions
|
||||
|
||||
return (
|
||||
<div className={cn('relative')}>
|
||||
{
|
||||
conditions.length > 1 && (
|
||||
<div className={cn(
|
||||
'absolute top-0 bottom-0 left-0 w-[44px]',
|
||||
)}>
|
||||
<div className='absolute top-4 bottom-4 right-1 w-2.5 border border-divider-deep rounded-l-[8px] border-r-0'></div>
|
||||
<div className='absolute top-1/2 -translate-y-1/2 right-0 w-4 h-[29px] bg-components-panel-bg'></div>
|
||||
<div
|
||||
className='absolute top-1/2 right-1 -translate-y-1/2 flex items-center px-1 h-[21px] rounded-md border-[0.5px] border-components-button-secondary-border shadow-xs bg-components-button-secondary-bg text-text-accent-secondary text-[10px] font-semibold cursor-pointer select-none'
|
||||
onClick={() => handleToggleConditionLogicalOperator()}
|
||||
>
|
||||
{logical_operator.toUpperCase()}
|
||||
<RiLoopLeftLine className='ml-0.5 w-3 h-3' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className={cn(conditions.length > 1 && 'pl-[44px]')}>
|
||||
{
|
||||
conditions.map(condition => (
|
||||
<ConditionItem
|
||||
key={`${condition.id}`}
|
||||
disabled={disabled}
|
||||
condition={condition}
|
||||
onUpdateCondition={handleUpdateCondition}
|
||||
onRemoveCondition={handleRemoveCondition}
|
||||
metadataList={metadataList}
|
||||
availableStringVars={availableStringVars}
|
||||
availableStringNodesWithParent={availableStringNodesWithParent}
|
||||
availableNumberVars={availableNumberVars}
|
||||
availableNumberNodesWithParent={availableNumberNodesWithParent}
|
||||
isCommonVariable={isCommonVariable}
|
||||
availableCommonStringVars={availableCommonStringVars}
|
||||
availableCommonNumberVars={availableCommonNumberVars}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConditionList
|
||||
@ -0,0 +1,65 @@
|
||||
import {
|
||||
ComparisonOperator,
|
||||
MetadataFilteringVariableType,
|
||||
} from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
|
||||
export const isEmptyRelatedOperator = (operator: ComparisonOperator) => {
|
||||
return [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull, ComparisonOperator.exists, ComparisonOperator.notExists].includes(operator)
|
||||
}
|
||||
|
||||
const notTranslateKey = [
|
||||
ComparisonOperator.equal, ComparisonOperator.notEqual,
|
||||
ComparisonOperator.largerThan, ComparisonOperator.largerThanOrEqual,
|
||||
ComparisonOperator.lessThan, ComparisonOperator.lessThanOrEqual,
|
||||
]
|
||||
|
||||
export const isComparisonOperatorNeedTranslate = (operator?: ComparisonOperator) => {
|
||||
if (!operator)
|
||||
return false
|
||||
return !notTranslateKey.includes(operator)
|
||||
}
|
||||
|
||||
export const getOperators = (type?: MetadataFilteringVariableType) => {
|
||||
switch (type) {
|
||||
case MetadataFilteringVariableType.string:
|
||||
return [
|
||||
ComparisonOperator.is,
|
||||
ComparisonOperator.isNot,
|
||||
ComparisonOperator.contains,
|
||||
ComparisonOperator.notContains,
|
||||
ComparisonOperator.startWith,
|
||||
ComparisonOperator.endWith,
|
||||
ComparisonOperator.empty,
|
||||
ComparisonOperator.notEmpty,
|
||||
]
|
||||
case MetadataFilteringVariableType.number:
|
||||
return [
|
||||
ComparisonOperator.equal,
|
||||
ComparisonOperator.notEqual,
|
||||
ComparisonOperator.largerThan,
|
||||
ComparisonOperator.lessThan,
|
||||
ComparisonOperator.largerThanOrEqual,
|
||||
ComparisonOperator.lessThanOrEqual,
|
||||
ComparisonOperator.empty,
|
||||
ComparisonOperator.notEmpty,
|
||||
]
|
||||
default:
|
||||
return [
|
||||
ComparisonOperator.is,
|
||||
ComparisonOperator.before,
|
||||
ComparisonOperator.after,
|
||||
ComparisonOperator.empty,
|
||||
ComparisonOperator.notEmpty,
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export const comparisonOperatorNotRequireValue = (operator?: ComparisonOperator) => {
|
||||
if (!operator)
|
||||
return false
|
||||
|
||||
return [ComparisonOperator.empty, ComparisonOperator.notEmpty, ComparisonOperator.isNull, ComparisonOperator.isNotNull, ComparisonOperator.exists, ComparisonOperator.notExists].includes(operator)
|
||||
}
|
||||
|
||||
export const VARIABLE_REGEX = /\{\{(#[a-zA-Z0-9_-]{1,50}(\.[a-zA-Z_][a-zA-Z0-9_]{0,29}){1,10}#)\}\}/gi
|
||||
export const COMMON_VARIABLE_REGEX = /\{\{([a-zA-Z0-9_-]{1,50})\}\}/gi
|
||||
@ -0,0 +1,101 @@
|
||||
import {
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import MetadataTrigger from '../metadata-trigger'
|
||||
import MetadataFilterSelector from './metadata-filter-selector'
|
||||
import Collapse from '@/app/components/workflow/nodes/_base/components/collapse'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
|
||||
|
||||
type MetadataFilterProps = {
|
||||
metadataFilterMode?: MetadataFilteringModeEnum
|
||||
handleMetadataFilterModeChange: (mode: MetadataFilteringModeEnum) => void
|
||||
} & MetadataShape
|
||||
const MetadataFilter = ({
|
||||
metadataFilterMode = MetadataFilteringModeEnum.disabled,
|
||||
handleMetadataFilterModeChange,
|
||||
metadataModelConfig,
|
||||
handleMetadataModelChange,
|
||||
handleMetadataCompletionParamsChange,
|
||||
...restProps
|
||||
}: MetadataFilterProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [collapsed, setCollapsed] = useState(true)
|
||||
|
||||
const handleMetadataFilterModeChangeWrapped = useCallback((mode: MetadataFilteringModeEnum) => {
|
||||
if (mode === MetadataFilteringModeEnum.automatic)
|
||||
setCollapsed(false)
|
||||
|
||||
handleMetadataFilterModeChange(mode)
|
||||
}, [handleMetadataFilterModeChange])
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
disabled={metadataFilterMode === MetadataFilteringModeEnum.disabled || metadataFilterMode === MetadataFilteringModeEnum.manual}
|
||||
collapsed={collapsed}
|
||||
onCollapse={setCollapsed}
|
||||
trigger={
|
||||
<div className='grow flex items-center justify-between pr-4'>
|
||||
<div className='flex items-center'>
|
||||
<div className='mr-0.5 system-sm-semibold-uppercase text-text-secondary'>
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.title')}
|
||||
</div>
|
||||
<Tooltip
|
||||
popupContent={(
|
||||
<div className='w-[200px]'>
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.tip')}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<MetadataFilterSelector
|
||||
value={metadataFilterMode}
|
||||
onSelect={handleMetadataFilterModeChangeWrapped}
|
||||
/>
|
||||
{
|
||||
metadataFilterMode === MetadataFilteringModeEnum.manual && (
|
||||
<div className='ml-1'>
|
||||
<MetadataTrigger {...restProps} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<>
|
||||
{
|
||||
metadataFilterMode === MetadataFilteringModeEnum.automatic && (
|
||||
<>
|
||||
<div className='px-4 body-xs-regular text-text-tertiary'>
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.options.automatic.desc')}
|
||||
</div>
|
||||
<div className='mt-1 px-4'>
|
||||
<ModelParameterModal
|
||||
popupClassName='!w-[387px]'
|
||||
isInWorkflow
|
||||
isAdvancedMode={true}
|
||||
mode={metadataModelConfig?.mode || 'chat'}
|
||||
provider={metadataModelConfig?.provider || ''}
|
||||
completionParams={metadataModelConfig?.completion_params || { temperature: 0.7 }}
|
||||
modelId={metadataModelConfig?.name || ''}
|
||||
setModel={handleMetadataModelChange || (() => {})}
|
||||
onCompletionParamsChange={handleMetadataCompletionParamsChange || (() => {})}
|
||||
hideDebugWithMultipleModel
|
||||
debugWithMultipleModel={false}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
</Collapse>
|
||||
)
|
||||
}
|
||||
|
||||
export default MetadataFilter
|
||||
@ -0,0 +1,106 @@
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
RiArrowDownSLine,
|
||||
RiCheckLine,
|
||||
} from '@remixicon/react'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
|
||||
type MetadataFilterSelectorProps = {
|
||||
value?: MetadataFilteringModeEnum
|
||||
onSelect: (value: MetadataFilteringModeEnum) => void
|
||||
}
|
||||
const MetadataFilterSelector = ({
|
||||
value = MetadataFilteringModeEnum.disabled,
|
||||
onSelect,
|
||||
}: MetadataFilterSelectorProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const options = [
|
||||
{
|
||||
key: MetadataFilteringModeEnum.disabled,
|
||||
value: t('workflow.nodes.knowledgeRetrieval.metadata.options.disabled.title'),
|
||||
desc: t('workflow.nodes.knowledgeRetrieval.metadata.options.disabled.subTitle'),
|
||||
},
|
||||
{
|
||||
key: MetadataFilteringModeEnum.automatic,
|
||||
value: t('workflow.nodes.knowledgeRetrieval.metadata.options.automatic.title'),
|
||||
desc: t('workflow.nodes.knowledgeRetrieval.metadata.options.automatic.subTitle'),
|
||||
},
|
||||
{
|
||||
key: MetadataFilteringModeEnum.manual,
|
||||
value: t('workflow.nodes.knowledgeRetrieval.metadata.options.manual.title'),
|
||||
desc: t('workflow.nodes.knowledgeRetrieval.metadata.options.manual.subTitle'),
|
||||
},
|
||||
]
|
||||
|
||||
const selectedOption = options.find(option => option.key === value)!
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement='bottom-end'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: 0,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setOpen(!open)
|
||||
}}
|
||||
asChild
|
||||
>
|
||||
<Button
|
||||
variant='secondary'
|
||||
size='small'
|
||||
>
|
||||
{selectedOption.value}
|
||||
<RiArrowDownSLine className='w-3.5 h-3.5' />
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='p-1 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
|
||||
{
|
||||
options.map(option => (
|
||||
<div
|
||||
key={option.key}
|
||||
className='flex p-2 pr-3 rounded-lg cursor-pointer hover:bg-state-base-hover'
|
||||
onClick={() => {
|
||||
onSelect(option.key)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className='shrink-0 w-4'>
|
||||
{
|
||||
option.key === value && (
|
||||
<RiCheckLine className='w-4 h-4 text-text-accent' />
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='grow'>
|
||||
<div className='system-sm-semibold text-text-secondary'>
|
||||
{option.value}
|
||||
</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>
|
||||
{option.desc}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default MetadataFilterSelector
|
||||
@ -0,0 +1,39 @@
|
||||
import { memo } from 'react'
|
||||
import {
|
||||
RiHashtag,
|
||||
RiTextSnippet,
|
||||
RiTimeLine,
|
||||
} from '@remixicon/react'
|
||||
import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type MetadataIconProps = {
|
||||
type?: MetadataFilteringVariableType
|
||||
className?: string
|
||||
}
|
||||
const MetadataIcon = ({
|
||||
type,
|
||||
className,
|
||||
}: MetadataIconProps) => {
|
||||
return (
|
||||
<>
|
||||
{
|
||||
type === MetadataFilteringVariableType.string && (
|
||||
<RiTextSnippet className={cn('w-3.5 h-3.5', className)} />
|
||||
)
|
||||
}
|
||||
{
|
||||
type === MetadataFilteringVariableType.number && (
|
||||
<RiHashtag className={cn('w-3.5 h-3.5', className)} />
|
||||
)
|
||||
}
|
||||
{
|
||||
type === MetadataFilteringVariableType.time && (
|
||||
<RiTimeLine className={cn('w-3.5 h-3.5', className)} />
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(MetadataIcon)
|
||||
@ -0,0 +1,51 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import AddCondition from './add-condition'
|
||||
import ConditionList from './condition-list'
|
||||
import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
|
||||
type MetadataPanelProps = {
|
||||
onCancel: () => void
|
||||
} & MetadataShape
|
||||
const MetadataPanel = ({
|
||||
metadataFilteringConditions,
|
||||
metadataList,
|
||||
onCancel,
|
||||
handleAddCondition,
|
||||
...restProps
|
||||
}: MetadataPanelProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='w-[420px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-2xl shadow-2xl'>
|
||||
<div className='relative px-3 pt-3.5'>
|
||||
<div className='system-xl-semibold text-text-primary'>
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.panel.title')}
|
||||
</div>
|
||||
<div
|
||||
className='absolute right-2.5 bottom-0 flex items-center justify-center w-8 h-8 cursor-pointer'
|
||||
onClick={onCancel}
|
||||
>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-1 py-2'>
|
||||
<div className='px-3 py-1'>
|
||||
<div className='pb-2'>
|
||||
<ConditionList
|
||||
metadataList={metadataList}
|
||||
metadataFilteringConditions={metadataFilteringConditions}
|
||||
{...restProps}
|
||||
/>
|
||||
</div>
|
||||
<AddCondition
|
||||
metadataList={metadataList}
|
||||
handleAddCondition={handleAddCondition}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MetadataPanel
|
||||
@ -0,0 +1,69 @@
|
||||
import {
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiFilter3Line } from '@remixicon/react'
|
||||
import MetadataPanel from './metadata-panel'
|
||||
import Button from '@/app/components/base/button'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
|
||||
|
||||
const MetadataTrigger = ({
|
||||
metadataFilteringConditions,
|
||||
metadataList = [],
|
||||
handleRemoveCondition,
|
||||
selectedDatasetsLoaded,
|
||||
...restProps
|
||||
}: MetadataShape) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
const conditions = metadataFilteringConditions?.conditions || []
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDatasetsLoaded) {
|
||||
conditions.forEach((condition) => {
|
||||
if (!metadataList.find(metadata => metadata.name === condition.name))
|
||||
handleRemoveCondition(condition.id)
|
||||
})
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [metadataList, handleRemoveCondition, selectedDatasetsLoaded])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement='left'
|
||||
offset={4}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
|
||||
<Button
|
||||
variant='secondary-accent'
|
||||
size='small'
|
||||
>
|
||||
<RiFilter3Line className='mr-1 w-3.5 h-3.5' />
|
||||
{t('workflow.nodes.knowledgeRetrieval.metadata.panel.conditions')}
|
||||
<div className='flex items-center ml-1 px-1 rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>
|
||||
{metadataFilteringConditions?.conditions.length || 0}
|
||||
</div>
|
||||
</Button>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<MetadataPanel
|
||||
metadataFilteringConditions={metadataFilteringConditions}
|
||||
onCancel={() => setOpen(false)}
|
||||
metadataList={metadataList}
|
||||
handleRemoveCondition={handleRemoveCondition}
|
||||
{...restProps}
|
||||
/>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default MetadataTrigger
|
||||
@ -0,0 +1,146 @@
|
||||
import type { BuiltInMetadataItem, MetadataBatchEditToServer, MetadataItemWithValueLength } from '@/app/components/datasets/metadata/types'
|
||||
import { del, get, patch, post } from '../base'
|
||||
import { useDocumentListKey, useInvalidDocumentList } from './use-document'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useInvalid } from '../use-base'
|
||||
import type { DocumentDetailResponse } from '@/models/datasets'
|
||||
|
||||
const NAME_SPACE = 'dataset-metadata'
|
||||
|
||||
export const useDatasetMetaData = (datasetId: string) => {
|
||||
return useQuery<{ doc_metadata: MetadataItemWithValueLength[], built_in_field_enabled: boolean }>({
|
||||
queryKey: [NAME_SPACE, 'dataset', datasetId],
|
||||
queryFn: () => {
|
||||
return get<{ doc_metadata: MetadataItemWithValueLength[], built_in_field_enabled: boolean }>(`/datasets/${datasetId}/metadata`)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useInvalidDatasetMetaData = (datasetId: string) => {
|
||||
return useInvalid([NAME_SPACE, 'dataset', datasetId])
|
||||
}
|
||||
|
||||
export const useCreateMetaData = (datasetId: string) => {
|
||||
const invalidDatasetMetaData = useInvalidDatasetMetaData(datasetId)
|
||||
return useMutation({
|
||||
mutationFn: async (payload: BuiltInMetadataItem) => {
|
||||
await post(`/datasets/${datasetId}/metadata`, {
|
||||
body: payload,
|
||||
})
|
||||
await invalidDatasetMetaData()
|
||||
return Promise.resolve(true)
|
||||
},
|
||||
})
|
||||
}
|
||||
export const useInvalidAllDocumentMetaData = (datasetId: string) => {
|
||||
const queryClient = useQueryClient()
|
||||
return () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [NAME_SPACE, 'document', datasetId],
|
||||
exact: false, // invalidate all document metadata: [NAME_SPACE, 'document', datasetId, documentId]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const useInvalidAllMetaData = (datasetId: string) => {
|
||||
const invalidDatasetMetaData = useInvalidDatasetMetaData(datasetId)
|
||||
const invalidDocumentList = useInvalidDocumentList(datasetId)
|
||||
const invalidateAllDocumentMetaData = useInvalidAllDocumentMetaData(datasetId)
|
||||
|
||||
return async () => {
|
||||
// meta data in dataset
|
||||
await invalidDatasetMetaData()
|
||||
// meta data in document list
|
||||
invalidDocumentList()
|
||||
// meta data in single document
|
||||
await invalidateAllDocumentMetaData() // meta data in document
|
||||
}
|
||||
}
|
||||
|
||||
export const useRenameMeta = (datasetId: string) => {
|
||||
const invalidateAllMetaData = useInvalidAllMetaData(datasetId)
|
||||
return useMutation({
|
||||
mutationFn: async (payload: MetadataItemWithValueLength) => {
|
||||
await patch(`/datasets/${datasetId}/metadata/${payload.id}`, {
|
||||
body: {
|
||||
name: payload.name,
|
||||
},
|
||||
})
|
||||
await invalidateAllMetaData()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useDeleteMetaData = (datasetId: string) => {
|
||||
const invalidateAllMetaData = useInvalidAllMetaData(datasetId)
|
||||
return useMutation({
|
||||
mutationFn: async (metaDataId: string) => {
|
||||
// datasetMetaData = datasetMetaData.filter(item => item.id !== metaDataId)
|
||||
await del(`/datasets/${datasetId}/metadata/${metaDataId}`)
|
||||
await invalidateAllMetaData()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useBuiltInMetaDataFields = () => {
|
||||
return useQuery<{ fields: BuiltInMetadataItem[] }>({
|
||||
queryKey: [NAME_SPACE, 'built-in'],
|
||||
queryFn: () => {
|
||||
return get('/datasets/metadata/built-in')
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useDocumentMetaData = ({ datasetId, documentId }: { datasetId: string, documentId: string }) => {
|
||||
return useQuery<DocumentDetailResponse>({
|
||||
queryKey: [NAME_SPACE, 'document', datasetId, documentId],
|
||||
queryFn: () => {
|
||||
return get<DocumentDetailResponse>(`/datasets/${datasetId}/documents/${documentId}`, { params: { metadata: 'only' } })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useBatchUpdateDocMetadata = () => {
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: async (payload: {
|
||||
dataset_id: string
|
||||
metadata_list: MetadataBatchEditToServer
|
||||
}) => {
|
||||
const documentIds = payload.metadata_list.map(item => item.document_id)
|
||||
await post(`/datasets/${payload.dataset_id}/documents/metadata`, {
|
||||
body: {
|
||||
operation_data: payload.metadata_list,
|
||||
},
|
||||
})
|
||||
// meta data in dataset
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: [NAME_SPACE, 'dataset', payload.dataset_id],
|
||||
})
|
||||
// meta data in document list
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: [NAME_SPACE, 'dataset', payload.dataset_id],
|
||||
})
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: [...useDocumentListKey, payload.dataset_id],
|
||||
})
|
||||
|
||||
// meta data in single document
|
||||
await Promise.all(documentIds.map(documentId => queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: [NAME_SPACE, 'document', payload.dataset_id, documentId],
|
||||
},
|
||||
)))
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export const useUpdateBuiltInStatus = (datasetId: string) => {
|
||||
const invalidDatasetMetaData = useInvalidDatasetMetaData(datasetId)
|
||||
return useMutation({
|
||||
mutationFn: async (enabled: boolean) => {
|
||||
await post(`/datasets/${datasetId}/metadata/built-in/${enabled ? 'enable' : 'disable'}`)
|
||||
invalidDatasetMetaData()
|
||||
},
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue