mirror of https://github.com/langgenius/dify.git
Merge branch 'feat/parent-child-retrieval' of https://github.com/langgenius/dify into feat/parent-child-retrieval
This commit is contained in:
AkaraChen
commit
0185fb3369
|
|
@ -1,9 +1,11 @@
|
|||
import React, { type FC } from 'react'
|
||||
import { RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLine } from '@remixicon/react'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import classNames from '@/utils/classnames'
|
||||
|
||||
type IBatchActionProps = {
|
||||
selectedSegmentIds: string[]
|
||||
className?: string
|
||||
selectedIds: string[]
|
||||
onBatchEnable: () => Promise<void>
|
||||
onBatchDisable: () => Promise<void>
|
||||
onBatchDelete: () => Promise<void>
|
||||
|
|
@ -11,18 +13,19 @@ type IBatchActionProps = {
|
|||
}
|
||||
|
||||
const BatchAction: FC<IBatchActionProps> = ({
|
||||
selectedSegmentIds,
|
||||
className,
|
||||
selectedIds,
|
||||
onBatchEnable,
|
||||
onBatchDisable,
|
||||
onBatchDelete,
|
||||
onCancel,
|
||||
}) => {
|
||||
return (
|
||||
<div className='w-full flex justify-center gap-x-2 absolute bottom-16 z-20'>
|
||||
<div className={classNames('w-full flex justify-center gap-x-2', className)}>
|
||||
<div className='flex items-center gap-x-1 p-1 rounded-[10px] bg-components-actionbar-bg-accent border border-components-actionbar-border-accent shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
|
||||
<div className='inline-flex items-center gap-x-2 pl-2 pr-3 py-1'>
|
||||
<span className='w-5 h-5 flex items-center justify-center px-1 py-0.5 bg-text-accent rounded-md text-text-primary-on-surface text-xs font-medium'>
|
||||
{selectedSegmentIds.length}
|
||||
{selectedIds.length}
|
||||
</span>
|
||||
<span className='text-text-accent text-[13px] font-semibold leading-[16px]'>Selected</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,27 @@
|
|||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { useDebounceFn } from 'ahooks'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { createContext, useContext, useContextSelector } from 'use-context-selector'
|
||||
import {
|
||||
RiCloseLine,
|
||||
RiEditLine,
|
||||
} from '@remixicon/react'
|
||||
import { StatusItem } from '../../list'
|
||||
import { DocumentContext } from '../index'
|
||||
import { useDocumentContext } from '../index'
|
||||
import { ProcessStatus } from '../segment-add'
|
||||
import s from './style.module.css'
|
||||
import SegmentList from './segment-list'
|
||||
import DisplayToggle from './display-toggle'
|
||||
import BatchAction from './batch-action'
|
||||
import SegmentDetail from './segment-detail'
|
||||
import cn from '@/utils/classnames'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { ToastContext } from '@/app/components/base/toast'
|
||||
import type { Item } from '@/app/components/base/select'
|
||||
import { SimpleSelect } from '@/app/components/base/select'
|
||||
import { updateSegment } from '@/service/datasets'
|
||||
import type { ParentMode, ProcessMode, SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
|
||||
import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
|
||||
import Button from '@/app/components/base/button'
|
||||
import type { SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
|
||||
import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
|
||||
import TagInput from '@/app/components/base/tag-input'
|
||||
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
||||
import Checkbox from '@/app/components/base/checkbox'
|
||||
import { useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList } from '@/service/knowledge/use-segment'
|
||||
|
|
@ -66,184 +58,12 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
|
|||
)
|
||||
}
|
||||
|
||||
type ISegmentDetailProps = {
|
||||
embeddingAvailable: boolean
|
||||
segInfo?: Partial<SegmentDetailModel> & { id: string }
|
||||
onChangeSwitch?: (enabled: boolean, segId?: string) => Promise<void>
|
||||
onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void
|
||||
onCancel: () => void
|
||||
archived?: boolean
|
||||
isEditing?: boolean
|
||||
}
|
||||
/**
|
||||
* Show all the contents of the segment
|
||||
*/
|
||||
const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
|
||||
embeddingAvailable,
|
||||
segInfo,
|
||||
archived,
|
||||
onChangeSwitch,
|
||||
onUpdate,
|
||||
onCancel,
|
||||
isEditing: initialIsEditing,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isEditing, setIsEditing] = useState(initialIsEditing)
|
||||
const [question, setQuestion] = useState(segInfo?.content || '')
|
||||
const [answer, setAnswer] = useState(segInfo?.answer || '')
|
||||
const [keywords, setKeywords] = useState<string[]>(segInfo?.keywords || [])
|
||||
const { eventEmitter } = useEventEmitterContextContext()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
eventEmitter?.useSubscription((v) => {
|
||||
if (v === 'update-segment')
|
||||
setLoading(true)
|
||||
else
|
||||
setLoading(false)
|
||||
})
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsEditing(false)
|
||||
setQuestion(segInfo?.content || '')
|
||||
setAnswer(segInfo?.answer || '')
|
||||
setKeywords(segInfo?.keywords || [])
|
||||
}
|
||||
const handleSave = () => {
|
||||
onUpdate(segInfo?.id || '', question, answer, keywords)
|
||||
}
|
||||
|
||||
const renderContent = () => {
|
||||
if (segInfo?.answer) {
|
||||
return (
|
||||
<>
|
||||
<div className='mb-1 text-xs font-medium text-gray-500'>QUESTION</div>
|
||||
<AutoHeightTextarea
|
||||
outerClassName='mb-4'
|
||||
className='leading-6 text-md text-gray-800'
|
||||
value={question}
|
||||
placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
|
||||
onChange={e => setQuestion(e.target.value)}
|
||||
disabled={!isEditing}
|
||||
/>
|
||||
<div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
|
||||
<AutoHeightTextarea
|
||||
outerClassName='mb-4'
|
||||
className='leading-6 text-md text-gray-800'
|
||||
value={answer}
|
||||
placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
|
||||
onChange={e => setAnswer(e.target.value)}
|
||||
disabled={!isEditing}
|
||||
autoFocus
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AutoHeightTextarea
|
||||
className='leading-6 text-md text-gray-800'
|
||||
value={question}
|
||||
placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
|
||||
onChange={e => setQuestion(e.target.value)}
|
||||
disabled={!isEditing}
|
||||
autoFocus
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={'flex flex-col relative'}>
|
||||
<div className='absolute right-0 top-0 flex items-center h-7'>
|
||||
{isEditing && (
|
||||
<>
|
||||
<Button
|
||||
onClick={handleCancel}>
|
||||
{t('common.operation.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
className='ml-3'
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
>
|
||||
{t('common.operation.save')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{!isEditing && !archived && embeddingAvailable && (
|
||||
<>
|
||||
<div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
|
||||
<div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
|
||||
<RiEditLine className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
|
||||
</div>
|
||||
<div className='mx-3 w-[1px] h-3 bg-gray-200' />
|
||||
</>
|
||||
)}
|
||||
<div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={onCancel}>
|
||||
<RiCloseLine className='w-4 h-4 text-gray-500' />
|
||||
</div>
|
||||
</div>
|
||||
<SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mt-[2px] mb-6' />
|
||||
<div className={s.segModalContent}>{renderContent()}</div>
|
||||
<div className={s.keywordTitle}>{t('datasetDocuments.segment.keywords')}</div>
|
||||
<div className={s.keywordWrapper}>
|
||||
{!segInfo?.keywords?.length
|
||||
? '-'
|
||||
: (
|
||||
<TagInput
|
||||
items={keywords}
|
||||
onChange={newKeywords => setKeywords(newKeywords)}
|
||||
disableAdd={!isEditing}
|
||||
disableRemove={!isEditing || (keywords.length === 1)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className={cn(s.footer, s.numberInfo)}>
|
||||
<div className='flex items-center flex-wrap gap-y-2'>
|
||||
<div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
|
||||
<div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as number)} {t('datasetDocuments.segment.hitCount')}</span>
|
||||
<div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' />
|
||||
{embeddingAvailable && (
|
||||
<>
|
||||
<Divider type='vertical' className='!h-2' />
|
||||
<Switch
|
||||
size='md'
|
||||
defaultValue={segInfo?.enabled}
|
||||
onChange={async (val) => {
|
||||
await onChangeSwitch?.(val, segInfo?.id || '')
|
||||
}}
|
||||
disabled={archived}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export const SegmentDetail = memo(SegmentDetailComponent)
|
||||
|
||||
export const splitArray = (arr: any[], size = 3) => {
|
||||
if (!arr || !arr.length)
|
||||
return []
|
||||
const result = []
|
||||
for (let i = 0; i < arr.length; i += size)
|
||||
result.push(arr.slice(i, i + size))
|
||||
return result
|
||||
}
|
||||
|
||||
type ICompletedProps = {
|
||||
embeddingAvailable: boolean
|
||||
showNewSegmentModal: boolean
|
||||
onNewSegmentModalChange: (state: boolean) => void
|
||||
importStatus: ProcessStatus | string | undefined
|
||||
archived?: boolean
|
||||
mode?: ProcessMode
|
||||
parentMode?: ParentMode
|
||||
// data: Array<{}> // all/part segments
|
||||
}
|
||||
/**
|
||||
|
|
@ -256,12 +76,10 @@ const Completed: FC<ICompletedProps> = ({
|
|||
onNewSegmentModalChange,
|
||||
importStatus,
|
||||
archived,
|
||||
mode,
|
||||
parentMode,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { notify } = useContext(ToastContext)
|
||||
const { datasetId = '', documentId = '', docForm } = useContext(DocumentContext)
|
||||
const [datasetId = '', documentId = '', docForm, mode, parentMode] = useDocumentContext(s => [s.datasetId, s.documentId, s.docForm, s.mode, s.parentMode])
|
||||
// the current segment id and whether to show the modal
|
||||
const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean; isEditing?: boolean }>({ showModal: false })
|
||||
|
||||
|
|
@ -504,7 +322,8 @@ const Completed: FC<ICompletedProps> = ({
|
|||
/>
|
||||
{selectedSegmentIds.length > 0
|
||||
&& <BatchAction
|
||||
selectedSegmentIds={selectedSegmentIds}
|
||||
className='absolute left-0 bottom-16 z-20'
|
||||
selectedIds={selectedSegmentIds}
|
||||
onBatchEnable={onChangeSwitch.bind(null, true)}
|
||||
onBatchDisable={onChangeSwitch.bind(null, false)}
|
||||
onBatchDelete={onDelete}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { ArrowRightIcon } from '@heroicons/react/24/solid'
|
|||
import SegmentCard from '../completed/SegmentCard'
|
||||
import { FieldInfo } from '../metadata'
|
||||
import style from '../completed/style.module.css'
|
||||
import { DocumentContext } from '../index'
|
||||
import { useDocumentContext } from '../index'
|
||||
import s from './style.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
|
@ -111,7 +111,7 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
|
|||
const { t } = useTranslation()
|
||||
const { notify } = useContext(ToastContext)
|
||||
|
||||
const { datasetId = '', documentId = '' } = useContext(DocumentContext)
|
||||
const [datasetId, documentId] = useDocumentContext(s => [s.datasetId, s.documentId])
|
||||
const localDatasetId = dstId ?? datasetId
|
||||
const localDocumentId = docId ?? documentId
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { createContext, useContext } from 'use-context-selector'
|
||||
import { createContext, useContext, useContextSelector } from 'use-context-selector'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { omit } from 'lodash-es'
|
||||
|
|
@ -25,7 +25,20 @@ import type { DocForm, ParentMode, ProcessMode } from '@/models/datasets'
|
|||
import { useDatasetDetailContext } from '@/context/dataset-detail'
|
||||
import FloatRightContainer from '@/app/components/base/float-right-container'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
export const DocumentContext = createContext<{ datasetId?: string; documentId?: string; docForm: string }>({ docForm: '' })
|
||||
|
||||
type DocumentContextValue = {
|
||||
datasetId?: string
|
||||
documentId?: string
|
||||
docForm: string
|
||||
mode?: ProcessMode
|
||||
parentMode?: ParentMode
|
||||
}
|
||||
|
||||
export const DocumentContext = createContext<DocumentContextValue>({ docForm: '' })
|
||||
|
||||
export const useDocumentContext = (selector: (value: DocumentContextValue) => any) => {
|
||||
return useContextSelector(DocumentContext, selector)
|
||||
}
|
||||
|
||||
type DocumentTitleProps = {
|
||||
datasetId: string
|
||||
|
|
@ -140,7 +153,13 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<DocumentContext.Provider value={{ datasetId, documentId, docForm: documentDetail?.doc_form || '' }}>
|
||||
<DocumentContext.Provider value={{
|
||||
datasetId,
|
||||
documentId,
|
||||
docForm: documentDetail?.doc_form || '',
|
||||
mode: documentDetail?.dataset_process_rule.mode,
|
||||
parentMode: documentDetail?.dataset_process_rule.rules.parent_mode,
|
||||
}}>
|
||||
<div className='flex flex-col h-full'>
|
||||
<div className='flex items-center justify-between flex-wrap min-h-16 pl-3 pr-4 py-2.5 border-b border-b-divider-subtle'>
|
||||
<div onClick={backToPrev} className={'shrink-0 rounded-full w-8 h-8 flex justify-center items-center cursor-pointer hover:bg-components-button-tertiary-bg'}>
|
||||
|
|
@ -203,7 +222,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
|
|||
<div className='flex flex-row flex-1' style={{ height: 'calc(100% - 4rem)' }}>
|
||||
{isDetailLoading
|
||||
? <Loading type='app' />
|
||||
: <div className={`h-full w-full flex flex-col ${embedding ? 'px-6 py-3 sm:py-12 sm:px-16' : 'pb-[30px] pt-3 pl-5 pr-11'}`}>
|
||||
: <div className={`h-full w-full flex flex-col ${embedding ? 'px-6 py-3 sm:py-12 sm:px-16' : 'relative pb-[30px] pt-3 pl-5 pr-11'}`}>
|
||||
{embedding
|
||||
? <Embedding detail={documentDetail} detailUpdate={detailMutate} />
|
||||
: <Completed
|
||||
|
|
@ -212,8 +231,6 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
|
|||
onNewSegmentModalChange={setNewSegmentModalVisible}
|
||||
importStatus={importStatus}
|
||||
archived={documentDetail?.archived}
|
||||
mode={documentDetail?.dataset_process_rule.mode}
|
||||
parentMode={documentDetail?.dataset_process_rule.rules.parent_mode}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { PencilIcon } from '@heroicons/react/24/outline'
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import { get } from 'lodash-es'
|
||||
import { DocumentContext } from '../index'
|
||||
import { useDocumentContext } from '../index'
|
||||
import s from './style.module.css'
|
||||
import cn from '@/utils/classnames'
|
||||
import Input from '@/app/components/base/input'
|
||||
|
|
@ -151,7 +151,7 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
|
|||
const [saveLoading, setSaveLoading] = useState(false)
|
||||
|
||||
const { notify } = useContext(ToastContext)
|
||||
const { datasetId = '', documentId = '' } = useContext(DocumentContext)
|
||||
const [datasetId, documentId] = useDocumentContext(s => [s.datasetId, s.documentId])
|
||||
|
||||
useEffect(() => {
|
||||
if (docDetail?.doc_type) {
|
||||
|
|
|
|||
|
|
@ -591,7 +591,7 @@ export const DEFAULT_WEIGHTED_SCORE = {
|
|||
export type ChildChunkType = 'automatic' | 'customized'
|
||||
|
||||
export type ChildChunkDetail = {
|
||||
id: number
|
||||
id: string
|
||||
position: number
|
||||
segment_id: string
|
||||
content: string
|
||||
|
|
|
|||
Loading…
Reference in New Issue