Merge branch 'feat/parent-child-retrieval' of https://github.com/langgenius/dify into feat/parent-child-retrieval

This commit is contained in:
AkaraChen 2024-12-12 16:42:34 +08:00
commit 1b150d31a9
20 changed files with 564 additions and 47 deletions

View File

@ -0,0 +1,118 @@
import React, { type FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiCloseLine,
RiExpandDiagonalLine,
} from '@remixicon/react'
import ActionButtons from './common/action-buttons'
import ChunkContent from './common/chunk-content'
import Dot from './common/dot'
import { SegmentIndexTag } from './common/segment-index-tag'
import { useSegmentListContext } from './index'
import type { ChildChunkDetail } from '@/models/datasets'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { formatNumber } from '@/utils/format'
import classNames from '@/utils/classnames'
import Divider from '@/app/components/base/divider'
import { formatTime } from '@/utils/time'
type IChildSegmentDetailProps = {
chunkId: string
childChunkInfo?: Partial<ChildChunkDetail> & { id: string }
onUpdate: (segmentId: string, childChunkId: string, content: string) => void
onCancel: () => void
docForm: string
}
/**
* Show all the contents of the segment
*/
const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
chunkId,
childChunkInfo,
onUpdate,
onCancel,
docForm,
}) => {
const { t } = useTranslation()
const [content, setContent] = useState(childChunkInfo?.content || '')
const { eventEmitter } = useEventEmitterContextContext()
const [loading, setLoading] = useState(false)
const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
eventEmitter?.useSubscription((v) => {
if (v === 'update-child-segment')
setLoading(true)
if (v === 'update-child-segment-done')
setLoading(false)
})
const handleCancel = () => {
onCancel()
setContent(childChunkInfo?.content || '')
}
const handleSave = () => {
onUpdate(chunkId, childChunkInfo?.id || '', content)
}
return (
<div className={'flex flex-col h-full'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{'Edit Child Chunk'}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag positionId={childChunkInfo?.position || ''} labelPrefix='Child-Chunk' />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{formatNumber(content.length)} {t('datasetDocuments.segment.characters')}</span>
<Dot />
<span className='text-text-tertiary system-xs-medium'>
{`Edited at ${formatTime({ date: (childChunkInfo?.created_at ?? 0) * 1000, dateFormat: 'MM/DD/YYYY h:mm:ss' })}`}
</span>
</div>
</div>
<div className='flex items-center'>
{fullScreen && (
<>
<ActionButtons
handleCancel={handleCancel}
handleSave={handleSave}
loading={loading}
isChildChunk={true}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div>
</div>
</div>
<div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4')}>
<div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
<ChunkContent
docForm={docForm}
question={content}
onQuestionChange={content => setContent(content)}
isEditMode={true}
/>
</div>
</div>
{!fullScreen && (
<div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<ActionButtons
handleCancel={handleCancel}
handleSave={handleSave}
loading={loading}
isChildChunk={true}
/>
</div>
)}
</div>
)
}
export default React.memo(ChildSegmentDetail)

View File

@ -1,6 +1,5 @@
import { type FC, useMemo, useState } from 'react'
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
import { FormattedText } from '../../../formatted-text/formatted'
import { EditSlice } from '../../../formatted-text/flavours/edit-slice'
import { useDocumentContext } from '../index'
import type { ChildChunkDetail } from '@/models/datasets'
@ -10,14 +9,22 @@ import Divider from '@/app/components/base/divider'
type IChildSegmentCardProps = {
childChunks: ChildChunkDetail[]
handleInputChange: (value: string) => void
parentChunkId: string
handleInputChange?: (value: string) => void
handleAddNewChildChunk?: (parentChunkId: string) => void
enabled: boolean
onDelete?: (segId: string, childChunkId: string) => Promise<void>
onClickSlice?: (childChunk: ChildChunkDetail) => void
}
const ChildSegmentList: FC<IChildSegmentCardProps> = ({
childChunks,
parentChunkId,
handleInputChange,
handleAddNewChildChunk,
enabled,
onDelete,
onClickSlice,
}) => {
const parentMode = useDocumentContext(s => s.parentMode)
@ -62,6 +69,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
className={classNames('px-1.5 py-1 text-components-button-secondary-accent-text system-xs-semibold', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}
onClick={(event) => {
event.stopPropagation()
handleAddNewChildChunk?.(parentChunkId)
}}
>
ADD
@ -73,25 +81,26 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
showClearIcon
wrapperClassName='!w-52'
value={''}
onChange={e => handleInputChange(e.target.value)}
onClear={() => handleInputChange('')}
onChange={e => handleInputChange?.(e.target.value)}
onClear={() => handleInputChange?.('')}
/>
: null}
</div>
{(isFullDocMode || !collapsed)
? <div className={classNames('flex gap-x-0.5', isFullDocMode ? 'grow overflow-y-auto' : '')}>
{isParagraphMode && <Divider type='vertical' className='h-auto w-[2px] mx-[7px] bg-text-accent-secondary' />}
<FormattedText className={classNames('w-full !leading-5 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
<div className={classNames('w-full !leading-5 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
{childChunks.map((childChunk) => {
const edited = childChunk.updated_at !== childChunk.created_at
return <EditSlice
key={childChunk.segment_id}
label={`C-${childChunk.position}`}
key={childChunk.id}
label={`C-${childChunk.position}${edited ? '·EDITED' : ''}`}
text={childChunk.content}
onDelete={() => {}}
className=''
onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
onClick={() => onClickSlice?.(childChunk)}
/>
})}
</FormattedText>
</div>
</div>
: null}
</div>

View File

@ -11,6 +11,7 @@ type IActionButtonsProps = {
loading: boolean
actionType?: 'edit' | 'add'
handleRegeneration?: () => void
isChildChunk?: boolean
}
const ActionButtons: FC<IActionButtonsProps> = ({
@ -19,6 +20,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
loading,
actionType = 'edit',
handleRegeneration,
isChildChunk = false,
}) => {
const { t } = useTranslation()
const [mode, parentMode] = useDocumentContext(s => [s.mode, s.parentMode])
@ -50,7 +52,7 @@ const ActionButtons: FC<IActionButtonsProps> = ({
<span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
</div>
</Button>
{(isParentChildParagraphMode && actionType === 'edit')
{(isParentChildParagraphMode && actionType === 'edit' && !isChildChunk)
? <Button
onClick={handleRegeneration}
disabled={loading}

View File

@ -4,9 +4,9 @@ import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/commo
type IChunkContentProps = {
question: string
answer: string
answer?: string
onQuestionChange: (question: string) => void
onAnswerChange: (answer: string) => void
onAnswerChange?: (answer: string) => void
isEditMode?: boolean
docForm: string
}
@ -39,7 +39,7 @@ const ChunkContent: FC<IChunkContentProps> = ({
className='leading-6 text-md text-gray-800'
value={answer}
placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
onChange={e => onAnswerChange(e.target.value)}
onChange={e => onAnswerChange?.(e.target.value)}
disabled={!isEditMode}
autoFocus
/>

View File

@ -2,7 +2,7 @@ import React from 'react'
const Dot = () => {
return (
<div className='text-text-quaternary text-xs font-medium'>·</div>
<div className='text-text-quaternary system-xs-medium'>·</div>
)
}

View File

@ -1,11 +1,17 @@
import React, { type FC } from 'react'
import { RiLineHeight } from '@remixicon/react'
import { useSegmentListContext } from '.'
import Tooltip from '@/app/components/base/tooltip'
import { Collapse } from '@/app/components/base/icons/src/public/knowledge'
const DisplayToggle: FC = () => {
const [isCollapsed, toggleCollapsed] = useSegmentListContext(s => [s.isCollapsed, s.toggleCollapsed])
type DisplayToggleProps = {
isCollapsed: boolean
toggleCollapsed: () => void
}
const DisplayToggle: FC<DisplayToggleProps> = ({
isCollapsed,
toggleCollapsed,
}) => {
return (
<Tooltip
popupContent={isCollapsed ? 'Expand chunks' : 'Collapse chunks'}

View File

@ -13,7 +13,9 @@ import BatchAction from './batch-action'
import SegmentDetail from './segment-detail'
import SegmentCard from './segment-card'
import ChildSegmentList from './child-segment-list'
import NewChildSegment from './new-child-segment'
import FullScreenDrawer from './common/full-screen-drawer'
import ChildSegmentDetail from './child-segment-detail'
import Pagination from '@/app/components/base/pagination'
import cn from '@/utils/classnames'
import { formatNumber } from '@/utils/format'
@ -27,23 +29,31 @@ import type { ChildChunkDetail, SegmentDetailModel, SegmentUpdater } from '@/mod
import NewSegment from '@/app/components/datasets/documents/detail/new-segment'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import Checkbox from '@/app/components/base/checkbox'
import { useChildSegmentList, useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList, useSegmentListKey } from '@/service/knowledge/use-segment'
import {
useChildSegmentList,
useChildSegmentListKey,
useDeleteChildSegment,
useDeleteSegment,
useDisableSegment,
useEnableSegment,
useSegmentList,
useSegmentListKey,
useUpdateChildSegment,
} from '@/service/knowledge/use-segment'
import { useInvalid } from '@/service/use-base'
const DEFAULT_LIMIT = 10
type SegmentListContextValue = {
isCollapsed: boolean
toggleCollapsed: () => void
fullScreen: boolean
toggleFullScreen: () => void
toggleFullScreen: (fullscreen?: boolean) => void
}
const SegmentListContext = createContext({
const SegmentListContext = createContext<SegmentListContextValue>({
isCollapsed: true,
toggleCollapsed: () => { },
fullScreen: false,
toggleFullScreen: () => { },
toggleFullScreen: () => {},
})
export const useSegmentListContext = (selector: (value: SegmentListContextValue) => any) => {
@ -73,6 +83,8 @@ const Completed: FC<ICompletedProps> = ({
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; isEditMode?: boolean }>({ showModal: false })
const [currChildChunk, setCurrChildChunk] = useState<{ childChunkInfo?: ChildChunkDetail; showModal: boolean }>({ showModal: false })
const [currChunkId, setCurrChunkId] = useState('')
const [inputValue, setInputValue] = useState<string>('') // the input value
const [searchValue, setSearchValue] = useState<string>('') // the search value
@ -86,6 +98,8 @@ const Completed: FC<ICompletedProps> = ({
const [currentPage, setCurrentPage] = useState(1) // start from 1
const [limit, setLimit] = useState(DEFAULT_LIMIT)
const [fullScreen, setFullScreen] = useState(false)
const [showNewChildSegmentModal, setShowNewChildSegmentModal] = useState(false)
const segmentListRef = useRef<HTMLDivElement>(null)
const needScrollToBottom = useRef(false)
@ -136,7 +150,7 @@ const Completed: FC<ICompletedProps> = ({
}
}, [segments])
const { data: childChunkListData, refetch: refreshChildSegmentList } = useChildSegmentList(
const { data: childChunkListData } = useChildSegmentList(
{
datasetId,
documentId,
@ -149,6 +163,7 @@ const Completed: FC<ICompletedProps> = ({
},
!isFullDocMode || segments.length === 0,
)
const invalidChildSegmentList = useInvalid(useChildSegmentListKey)
useEffect(() => {
if (childChunkListData)
@ -162,14 +177,20 @@ const Completed: FC<ICompletedProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const resetChildList = useCallback(() => {
setChildSegments([])
invalidChildSegmentList()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
}
const onCloseDrawer = () => {
const onCloseSegmentDetail = useCallback(() => {
setCurrSegment({ ...currSegment, showModal: false })
setFullScreen(false)
}
}, [currSegment])
const { mutateAsync: enableSegment } = useEnableSegment()
const { mutateAsync: disableSegment } = useDisableSegment()
@ -208,7 +229,7 @@ const Completed: FC<ICompletedProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [datasetId, documentId, selectedSegmentIds])
const handleUpdateSegment = async (
const handleUpdateSegment = useCallback(async (
segmentId: string,
question: string,
answer: string,
@ -243,7 +264,7 @@ const Completed: FC<ICompletedProps> = ({
const res = await updateSegment({ datasetId, documentId, segmentId, body: params })
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
if (!needRegenerate)
onCloseDrawer()
onCloseSegmentDetail()
for (const seg of segments) {
if (seg.id === segmentId) {
seg.answer = res.data.answer
@ -262,7 +283,8 @@ const Completed: FC<ICompletedProps> = ({
finally {
eventEmitter?.emit('update-segment-done')
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [segments, datasetId, documentId])
useEffect(() => {
if (importStatus === ProcessStatus.COMPLETED)
@ -320,10 +342,125 @@ const Completed: FC<ICompletedProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [segmentListData, limit, currentPage])
const { mutateAsync: deleteChildSegment } = useDeleteChildSegment()
const onDeleteChildChunk = useCallback(async (segmentId: string, childChunkId: string) => {
await deleteChildSegment(
{ datasetId, documentId, segmentId, childChunkId },
{
onSuccess: () => {
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
if (parentMode === 'paragraph')
resetList()
else
resetChildList()
},
onError: () => {
notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
},
},
)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [datasetId, documentId, parentMode])
const handleAddNewChildChunk = useCallback((parentChunkId: string) => {
setShowNewChildSegmentModal(true)
setCurrChunkId(parentChunkId)
}, [])
const onSaveNewChildChunk = useCallback((newChildChunk?: ChildChunkDetail) => {
if (parentMode === 'paragraph') {
for (const seg of segments) {
if (seg.id === currChunkId)
seg.child_chunks?.push(newChildChunk!)
}
setSegments([...segments])
}
else {
resetChildList()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [parentMode, currChunkId, segments])
const viewNewlyAddedChildChunk = useCallback(() => {
const totalPages = childChunkListData?.total_pages || 0
const total = childChunkListData?.total || 0
const newPage = Math.ceil((total + 1) / limit)
needScrollToBottom.current = true
if (newPage > totalPages) {
setCurrentPage(totalPages + 1)
}
else {
resetChildList()
currentPage !== totalPages && setCurrentPage(totalPages)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [childChunkListData, limit, currentPage])
const onClickSlice = useCallback((detail: ChildChunkDetail) => {
setCurrChildChunk({ childChunkInfo: detail, showModal: true })
setCurrChunkId(detail.segment_id)
}, [])
const onCloseChildSegmentDetail = useCallback(() => {
setCurrChildChunk({ ...currChildChunk, showModal: false })
setFullScreen(false)
}, [currChildChunk])
const { mutateAsync: updateChildSegment } = useUpdateChildSegment()
const handleUpdateChildChunk = useCallback(async (
segmentId: string,
childChunkId: string,
content: string,
) => {
const params: SegmentUpdater = { content: '' }
if (!content.trim())
return notify({ type: 'error', message: t('datasetDocuments.segment.contentEmpty') })
params.content = content
try {
eventEmitter?.emit('update-child-segment')
const res = await updateChildSegment({ datasetId, documentId, segmentId, childChunkId, body: params })
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
onCloseChildSegmentDetail()
if (parentMode === 'paragraph') {
for (const seg of segments) {
if (seg.id === segmentId) {
for (const childSeg of seg.child_chunks!) {
if (childSeg.id === childChunkId) {
childSeg.content = res.data.content
childSeg.type = res.data.type
childSeg.word_count = res.data.word_count
childSeg.updated_at = res.data.updated_at
}
}
}
}
setSegments([...segments])
}
else {
for (const childSeg of childSegments) {
if (childSeg.id === childChunkId) {
childSeg.content = res.data.content
childSeg.type = res.data.type
childSeg.word_count = res.data.word_count
childSeg.updated_at = res.data.updated_at
}
}
setChildSegments([...childSegments])
}
}
finally {
eventEmitter?.emit('update-child-segment-done')
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [segments, childSegments, datasetId, documentId, parentMode])
return (
<SegmentListContext.Provider value={{
isCollapsed,
toggleCollapsed: () => setIsCollapsed(!isCollapsed),
fullScreen,
toggleFullScreen,
}}>
@ -355,7 +492,7 @@ const Completed: FC<ICompletedProps> = ({
onClear={() => handleInputChange('')}
/>
<Divider type='vertical' className='h-3.5 mx-3' />
<DisplayToggle />
<DisplayToggle isCollapsed={isCollapsed} toggleCollapsed={() => setIsCollapsed(!isCollapsed)} />
</div>}
{/* Segment list */}
{
@ -367,8 +504,12 @@ const Completed: FC<ICompletedProps> = ({
loading={false}
/>
<ChildSegmentList
parentChunkId={segments[0]?.id}
onDelete={onDeleteChildChunk}
childChunks={childSegments}
handleInputChange={() => { }}
handleInputChange={handleInputChange}
handleAddNewChildChunk={handleAddNewChildChunk}
onClickSlice={onClickSlice}
enabled={!archived}
/>
</div>
@ -383,6 +524,9 @@ const Completed: FC<ICompletedProps> = ({
onDelete={onDelete}
onClick={onClickCard}
archived={archived}
onDeleteChildChunk={onDeleteChildChunk}
handleAddNewChildChunk={handleAddNewChildChunk}
onClickSlice={onClickSlice}
/>
}
{/* Pagination */}
@ -403,7 +547,7 @@ const Completed: FC<ICompletedProps> = ({
docForm={docForm}
isEditMode={currSegment.isEditMode}
onUpdate={handleUpdateSegment}
onCancel={onCloseDrawer}
onCancel={onCloseSegmentDetail}
/>
</FullScreenDrawer>
{/* Create New Segment */}
@ -421,6 +565,34 @@ const Completed: FC<ICompletedProps> = ({
viewNewlyAddedChunk={viewNewlyAddedChunk}
/>
</FullScreenDrawer>
{/* Edit or view child segment detail */}
<FullScreenDrawer
isOpen={currChildChunk.showModal}
fullScreen={fullScreen}
>
<ChildSegmentDetail
chunkId={currChunkId}
childChunkInfo={currChildChunk.childChunkInfo ?? { id: '' }}
docForm={docForm}
onUpdate={handleUpdateChildChunk}
onCancel={onCloseChildSegmentDetail}
/>
</FullScreenDrawer>
{/* Create New Child Segment */}
<FullScreenDrawer
isOpen={showNewChildSegmentModal}
fullScreen={fullScreen}
>
<NewChildSegment
chunkId={currChunkId}
onCancel={() => {
setShowNewChildSegmentModal(false)
setFullScreen(false)
}}
onSave={onSaveNewChildChunk}
viewNewlyAddedChildChunk={viewNewlyAddedChildChunk}
/>
</FullScreenDrawer>
{/* Batch Action Buttons */}
{selectedSegmentIds.length > 0
&& <BatchAction

View File

@ -0,0 +1,166 @@
import { memo, useMemo, useRef, useState } from 'react'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { useParams } from 'next/navigation'
import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
import { useShallow } from 'zustand/react/shallow'
import { useDocumentContext } from '../index'
import { SegmentIndexTag } from './common/segment-index-tag'
import ActionButtons from './common/action-buttons'
import ChunkContent from './common/chunk-content'
import AddAnother from './common/add-another'
import Dot from './common/dot'
import { useSegmentListContext } from './index'
import { useStore as useAppStore } from '@/app/components/app/store'
import { ToastContext } from '@/app/components/base/toast'
import type { ChildChunkDetail, SegmentUpdater } from '@/models/datasets'
import classNames from '@/utils/classnames'
import { formatNumber } from '@/utils/format'
import Divider from '@/app/components/base/divider'
import { useAddChildSegment } from '@/service/knowledge/use-segment'
type NewChildSegmentModalProps = {
chunkId: string
onCancel: () => void
onSave: (ChildChunk?: ChildChunkDetail) => void
viewNewlyAddedChildChunk?: () => void
}
const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
chunkId,
onCancel,
onSave,
viewNewlyAddedChildChunk,
}) => {
const { t } = useTranslation()
const { notify } = useContext(ToastContext)
const [content, setContent] = useState('')
const { datasetId, documentId } = useParams<{ datasetId: string; documentId: string }>()
const [loading, setLoading] = useState(false)
const [addAnother, setAddAnother] = useState(true)
const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
const { appSidebarExpand } = useAppStore(useShallow(state => ({
appSidebarExpand: state.appSidebarExpand,
})))
const parentMode = useDocumentContext(s => s.parentMode)
const refreshTimer = useRef<any>(null)
const isFullDocMode = useMemo(() => {
return parentMode === 'full-doc'
}, [parentMode])
const CustomButton = <>
<Divider type='vertical' className='h-3 mx-1 bg-divider-regular' />
<button className='text-text-accent system-xs-semibold' onClick={() => {
clearTimeout(refreshTimer.current)
viewNewlyAddedChildChunk?.()
}}>
{t('common.operation.view')}
</button>
</>
const handleCancel = (actionType: 'esc' | 'add' = 'esc') => {
if (actionType === 'esc' || !addAnother)
onCancel()
setContent('')
}
const { mutateAsync: addChildSegment } = useAddChildSegment()
const handleSave = async () => {
const params: SegmentUpdater = { content: '' }
if (!content.trim())
return notify({ type: 'error', message: t('datasetDocuments.segment.contentEmpty') })
params.content = content
setLoading(true)
try {
const res = await addChildSegment({ datasetId, documentId, segmentId: chunkId, body: params })
notify({
type: 'success',
message: t('datasetDocuments.segment.childChunkAdded'),
className: `!w-[296px] !bottom-0 ${appSidebarExpand === 'expand' ? '!left-[216px]' : '!left-14'}
!top-auto !right-auto !mb-[52px] !ml-11`,
customComponent: isFullDocMode && CustomButton,
})
handleCancel('add')
if (isFullDocMode) {
refreshTimer.current = setTimeout(() => {
onSave()
}, 3000)
}
else {
onSave(res.data)
}
}
finally {
setLoading(false)
}
}
return (
<div className={'flex flex-col h-full'}>
<div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
<div className='flex flex-col'>
<div className='text-text-primary system-xl-semibold'>{
t('datasetDocuments.segment.addChildChunk')
}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag label={'New Child Chunk'} />
<Dot />
<span className='text-text-tertiary system-xs-medium'>{formatNumber(content.length)} {t('datasetDocuments.segment.characters')}</span>
</div>
</div>
<div className='flex items-center'>
{fullScreen && (
<>
<AddAnother className='mr-3' isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
<ActionButtons
handleCancel={handleCancel.bind(null, 'esc')}
handleSave={handleSave}
loading={loading}
actionType='add'
isChildChunk={true}
/>
<Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
</>
)}
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
<RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
</div>
<div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel.bind(null, 'esc')}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
</div>
</div>
</div>
<div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8' : 'flex-col gap-y-1 py-3 px-4')}>
<div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
<ChunkContent
docForm=''
question={content}
onQuestionChange={content => setContent(content)}
isEditMode={true}
/>
</div>
</div>
{!fullScreen && (
<div className='flex items-center justify-between p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
<AddAnother isChecked={addAnother} onCheck={() => setAddAnother(!addAnother)} />
<ActionButtons
handleCancel={handleCancel.bind(null, 'esc')}
handleSave={handleSave}
loading={loading}
actionType='add'
isChildChunk={true}
/>
</div>
)}
</div>
)
}
export default memo(NewChildSegmentModal)

View File

@ -8,7 +8,7 @@ import Tag from './common/tag'
import Dot from './common/dot'
import { SegmentIndexTag } from './common/segment-index-tag'
import { useSegmentListContext } from './index'
import type { SegmentDetailModel } from '@/models/datasets'
import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
import Indicator from '@/app/components/header/indicator'
import Switch from '@/app/components/base/switch'
import Divider from '@/app/components/base/divider'
@ -25,6 +25,9 @@ type ISegmentCardProps = {
onClick?: () => void
onChangeSwitch?: (enabled: boolean, segId?: string) => Promise<void>
onDelete?: (segId: string) => Promise<void>
onDeleteChildChunk?: (segId: string, childChunkId: string) => Promise<void>
handleAddNewChildChunk?: (parentChunkId: string) => void
onClickSlice?: (childChunk: ChildChunkDetail) => void
onClickEdit?: () => void
className?: string
archived?: boolean
@ -36,6 +39,9 @@ const SegmentCard: FC<ISegmentCardProps> = ({
onClick,
onChangeSwitch,
onDelete,
onDeleteChildChunk,
handleAddNewChildChunk,
onClickSlice,
onClickEdit,
loading = true,
className = '',
@ -216,9 +222,12 @@ const SegmentCard: FC<ISegmentCardProps> = ({
{
child_chunks.length > 0
&& <ChildSegmentList
parentChunkId={id}
childChunks={child_chunks}
handleInputChange={() => {}}
enabled={enabled}
onDelete={onDeleteChildChunk!}
handleAddNewChildChunk={handleAddNewChildChunk}
onClickSlice={onClickSlice}
/>
}
</>

View File

@ -10,6 +10,7 @@ import ChunkContent from './common/chunk-content'
import Keywords from './common/keywords'
import RegenerationModal from './common/regeneration-modal'
import { SegmentIndexTag } from './common/segment-index-tag'
import Dot from './common/dot'
import { useSegmentListContext } from './index'
import type { SegmentDetailModel } from '@/models/datasets'
import { useEventEmitterContextContext } from '@/context/event-emitter'
@ -86,7 +87,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
<div className='text-text-primary system-xl-semibold'>{isEditMode ? 'Edit Chunk' : 'Chunk Detail'}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag positionId={segInfo?.position || ''} labelPrefix={`${isParentChildMode ? 'Parent-' : ''}Chunk`} />
<span className='text-text-quaternary system-xs-medium'>·</span>
<Dot />
<span className='text-text-tertiary system-xs-medium'>{formatNumber(isEditMode ? question.length : segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
</div>
</div>

View File

@ -1,6 +1,6 @@
import React, { type ForwardedRef } from 'react'
import SegmentCard from './segment-card'
import type { SegmentDetailModel } from '@/models/datasets'
import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
import Checkbox from '@/app/components/base/checkbox'
import Loading from '@/app/components/base/loading'
import Divider from '@/app/components/base/divider'
@ -14,6 +14,9 @@ type ISegmentListProps = {
onClick: (detail: SegmentDetailModel, isEditMode?: boolean) => void
onChangeSwitch: (enabled: boolean, segId?: string,) => Promise<void>
onDelete: (segId: string) => Promise<void>
onDeleteChildChunk: (sgId: string, childChunkId: string) => Promise<void>
handleAddNewChildChunk: (parentChunkId: string) => void
onClickSlice: (childChunk: ChildChunkDetail) => void
archived?: boolean
embeddingAvailable: boolean
}
@ -26,6 +29,9 @@ const SegmentList = React.forwardRef(({
onClick: onClickCard,
onChangeSwitch,
onDelete,
onDeleteChildChunk,
handleAddNewChildChunk,
onClickSlice,
archived,
embeddingAvailable,
}: ISegmentListProps,
@ -54,6 +60,9 @@ ref: ForwardedRef<HTMLDivElement>,
onChangeSwitch={onChangeSwitch}
onClickEdit={() => onClickCard(segItem, true)}
onDelete={onDelete}
onDeleteChildChunk={onDeleteChildChunk}
handleAddNewChildChunk={handleAddNewChildChunk}
onClickSlice={onClickSlice}
loading={false}
archived={archived}
embeddingAvailable={embeddingAvailable}

View File

@ -11,6 +11,7 @@ import ActionButtons from './completed/common/action-buttons'
import Keywords from './completed/common/keywords'
import ChunkContent from './completed/common/chunk-content'
import AddAnother from './completed/common/add-another'
import Dot from './completed/common/dot'
import { useDocumentContext } from './index'
import { useStore as useAppStore } from '@/app/components/app/store'
import { ToastContext } from '@/app/components/base/toast'
@ -54,7 +55,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
clearTimeout(refreshTimer.current)
viewNewlyAddedChunk()
}}>
{t('datasetDocuments.segment.viewAddedChunk')}
{t('common.operation.view')}
</button>
</>
@ -118,7 +119,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
}</div>
<div className='flex items-center gap-x-2'>
<SegmentIndexTag label={'New Chunk'} />
<span className='text-text-quaternary system-xs-medium'>·</span>
<Dot />
<span className='text-text-tertiary system-xs-medium'>{formatNumber(question.length)} {t('datasetDocuments.segment.characters')}</span>
</div>
</div>

View File

@ -10,10 +10,11 @@ import ActionButton, { ActionButtonState } from '@/app/components/base/action-bu
type EditSliceProps = SliceProps<{
label: ReactNode
onDelete: () => void
onClick?: () => void
}>
export const EditSlice: FC<EditSliceProps> = (props) => {
const { label, className, text, onDelete, ...rest } = props
const { label, className, text, onDelete, onClick, ...rest } = props
const [delBtnShow, setDelBtnShow] = useState(false)
const [isDelBtnHover, setDelBtnHover] = useState(false)
@ -35,7 +36,10 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
const isDestructive = delBtnShow && isDelBtnHover
return (
<div>
<div onClick={(e) => {
e.stopPropagation()
onClick?.()
}}>
<SliceContainer {...rest}
className={className}
ref={refs.setReference}

View File

@ -44,6 +44,7 @@ const translation = {
openInNewTab: 'Open in new tab',
saveAndRegenerate: 'Save & Regenerate Child Chunks',
close: 'Close',
view: 'View',
viewMore: 'VIEW MORE',
regenerate: 'Regenerate',
},

View File

@ -353,7 +353,7 @@ const translation = {
addAnother: 'Add another',
delete: 'Delete this chunk ?',
chunkAdded: '1 chunk added',
viewAddedChunk: 'View',
childChunkAdded: '1 child chunk added',
regenerationConfirmTitle: 'Do you want to regenerate child chunks?',
regenerationConfirmMessage: 'Regenerating child chunks will overwrite the current child chunks, including edited chunks and newly added chunks. The regeneration cannot be undone.',
regeneratingTitle: 'Regenerating child chunks',

View File

@ -44,6 +44,7 @@ const translation = {
openInNewTab: '在新标签页打开',
saveAndRegenerate: '保存并重新生成子分段',
close: '关闭',
view: '查看',
viewMore: '查看更多',
regenerate: '重新生成',
},

View File

@ -351,7 +351,7 @@ const translation = {
addAnother: '连续新增',
delete: '删除这个分段?',
chunkAdded: '新增一个分段',
viewAddedChunk: '查看',
childChunkAdded: '新增一个子分段',
regenerationConfirmTitle: '是否需要重新生成子分段?',
regenerationConfirmMessage: '重新生成的子分段将会覆盖当前的子分段,包括编辑过的分段和新添加的分段。重新生成操作无法撤销。',
regeneratingTitle: '正在生成子分段',

View File

@ -627,6 +627,7 @@ export type ChildChunkDetail = {
content: string
word_count: number
created_at: number
updated_at: number
type: ChildChunkType
}

View File

@ -85,7 +85,7 @@ export const useChildSegmentList = (
return useQuery({
queryKey: [...useChildSegmentListKey, datasetId, documentId, segmentId, page, limit, keyword],
queryFn: () => {
return get<ChildSegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segment/${segmentId}/child_chunks`, { params })
return get<ChildSegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}/child_chunks`, { params })
},
enabled: !disable,
initialData: disable ? { data: [], total: 0, page: 1, total_pages: 0, limit: 10 } : undefined,
@ -97,7 +97,7 @@ export const useDeleteChildSegment = () => {
mutationKey: [NAME_SPACE, 'childChunk', 'delete'],
mutationFn: (payload: { datasetId: string; documentId: string; segmentId: string; childChunkId: string }) => {
const { datasetId, documentId, segmentId, childChunkId } = payload
return del<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/segment/${segmentId}/child_chunks/${childChunkId}`)
return del<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}/child_chunks/${childChunkId}`)
},
})
}
@ -107,7 +107,17 @@ export const useAddChildSegment = () => {
mutationKey: [NAME_SPACE, 'childChunk', 'add'],
mutationFn: (payload: { datasetId: string; documentId: string; segmentId: string; body: { content: string } }) => {
const { datasetId, documentId, segmentId, body } = payload
return post<{ data: ChildChunkDetail }>(`/datasets/${datasetId}/documents/${documentId}/segment/${segmentId}/child_chunks`, { body })
return post<{ data: ChildChunkDetail }>(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}/child_chunks`, { body })
},
})
}
export const useUpdateChildSegment = () => {
return useMutation({
mutationKey: [NAME_SPACE, 'childChunk', 'update'],
mutationFn: (payload: { datasetId: string; documentId: string; segmentId: string; childChunkId: string; body: { content: string } }) => {
const { datasetId, documentId, segmentId, childChunkId, body } = payload
return patch<{ data: ChildChunkDetail }>(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}/child_chunks/${childChunkId}`, { body })
},
})
}

View File

@ -1,5 +1,12 @@
import dayjs, { type ConfigType } from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
export const isAfter = (date: ConfigType, compare: ConfigType) => {
return dayjs(date).isAfter(dayjs(compare))
}
export const formatTime = ({ date, dateFormat }: { date: ConfigType; dateFormat: string }) => {
return dayjs(date).format(dateFormat)
}