diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx index 787c9b6e94..b0d8bc7f02 100644 --- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx +++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx @@ -1,4 +1,4 @@ -import { type FC, useState } from 'react' +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' @@ -9,33 +9,46 @@ import classNames from '@/utils/classnames' import Divider from '@/app/components/base/divider' type IChildSegmentCardProps = { - child_chunks: ChildChunkDetail[] - onSave: () => void + childChunks: ChildChunkDetail[] handleInputChange: (value: string) => void + enabled: boolean } const ChildSegmentList: FC = ({ - child_chunks, - onSave, + childChunks, handleInputChange, + enabled, }) => { - let parentMode = useDocumentContext(s => s.parentMode) - parentMode = 'paragraph' + const parentMode = useDocumentContext(s => s.parentMode) + const [collapsed, setCollapsed] = useState(true) const toggleCollapse = () => { setCollapsed(!collapsed) } + const isParagraphMode = useMemo(() => { + return parentMode === 'paragraph' + }, [parentMode]) + + const isFullDocMode = useMemo(() => { + return parentMode === 'full-doc' + }, [parentMode]) + + const contentOpacity = useMemo(() => { + return enabled ? '' : 'opacity-50 group-hover/card:opacity-100' + }, [enabled]) + return ( -
-
-
{ +
+ {isFullDocMode ? : null} +
+
{ event.stopPropagation() toggleCollapse() }}> { - parentMode === 'paragraph' + isParagraphMode ? collapsed ? ( @@ -43,11 +56,18 @@ const ChildSegmentList: FC = ({ : () : null } - {`${child_chunks.length} CHILD CHUNKS`} - · - + {`${childChunks.length} CHILD CHUNKS`} + · +
- {parentMode === 'full-doc' + {isFullDocMode ? = ({ /> : null}
- {(parentMode === 'full-doc' || !collapsed) - ?
- - - {child_chunks.map((childChunk, index) => { + {(isFullDocMode || !collapsed) + ?
+ {isParagraphMode && } + + {childChunks.map((childChunk) => { return {}} @@ -73,7 +93,6 @@ const ChildSegmentList: FC = ({ })}
- : null}
) diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx index 492fa458cc..46f8470a4e 100644 --- a/web/app/components/datasets/documents/detail/completed/index.tsx +++ b/web/app/components/datasets/documents/detail/completed/index.tsx @@ -11,7 +11,9 @@ import SegmentList from './segment-list' import DisplayToggle from './display-toggle' import BatchAction from './batch-action' import SegmentDetail from './segment-detail' -import { mockSegments } from './mock-data' +import { mockChildSegments, mockSegments } from './mock-data' +import SegmentCard from './segment-card' +import ChildSegmentList from './child-segment-list' import cn from '@/utils/classnames' import { formatNumber } from '@/utils/format' import Modal from '@/app/components/base/modal' @@ -260,12 +262,16 @@ const Completed: FC = ({ return segmentList?.total ? formatNumber(segmentList.total) : '--' }, [segmentList?.total]) + const isFullDocMode = useMemo(() => { + return mode === 'hierarchical' && parentMode === 'full-doc' + }, [mode, parentMode]) + return ( setIsCollapsed(!isCollapsed), }}> -
+ {!isFullDocMode &&
= ({ /> -
- - { }} className='!max-w-[640px] !overflow-visible'> +
} + { + isFullDocMode + ?
+ onClickCard(segments[0])} + loading={false} + /> + {}} + enabled={!archived} + /> +
+ : + } + {}} className='!max-w-[640px] !overflow-visible'> = ({ } = detail as Required['detail'] const [showModal, setShowModal] = useState(false) const isCollapsed = useSegmentListContext(s => s.isCollapsed) - const mode = useDocumentContext(s => s.mode) + const [mode, parentMode] = useDocumentContext(s => [s.mode, s.parentMode]) const isDocScene = useMemo(() => { return scene === 'doc' }, [scene]) + const isGeneralMode = useMemo(() => { + return mode === 'custom' + }, [mode]) + + const isFullDocMode = useMemo(() => { + return mode === 'hierarchical' && parentMode === 'full-doc' + }, [mode, parentMode]) + // todo: change to real logic const chunkEdited = useMemo(() => { - return true - }, []) + return mode !== 'hierarchical' || parentMode !== 'full-doc' + }, [mode, parentMode]) const textOpacity = useMemo(() => { - return enabled ? '' : 'opacity-50' + return enabled ? '' : 'opacity-50 group-hover/card:opacity-100' }, [enabled]) + const handleClickCard = useCallback(() => { + if (!isFullDocMode) + onClick?.() + }, [isFullDocMode, onClick]) + const renderContent = () => { if (answer) { return ( @@ -156,8 +169,11 @@ const SegmentCard: FC = ({ } return ( -
onClick?.()}> -
+
+
{isDocScene ? <>
@@ -166,63 +182,67 @@ const SegmentCard: FC = ({
{`${formatNumber(word_count)} Characters`}
{`${formatNumber(hit_count)} Retrieval Count`}
- {chunkEdited && ( - + <> + + + )}
-
- {loading - ? ( - - ) - : ( - <> - - {embeddingAvailable && ( -
+ ) + : ( + <> + + {embeddingAvailable && ( +
- {!archived && ( - <> -
{ - e.stopPropagation() - onClickEdit?.() - }}> - -
-
{ - e.stopPropagation() - setShowModal(true) - } - }> - -
- - - )} -
) => - e.stopPropagation() - } - className="flex items-center" - > - { - await onChangeSwitch?.(val, id) - }} - /> + {!archived && ( + <> +
{ + e.stopPropagation() + onClickEdit?.() + }}> + +
+
{ + e.stopPropagation() + setShowModal(true) + } + }> + +
+ + + )} +
) => + e.stopPropagation() + } + className="flex items-center" + > + { + await onChangeSwitch?.(val, id) + }} + /> +
-
- )} - - )} -
+ )} + + )} +
+ : null} : ( score !== null @@ -244,18 +264,26 @@ const SegmentCard: FC = ({ : ( isDocScene ? <> -
+
{renderContent()}
- {mode === 'custom' &&
+ {isGeneralMode &&
{keywords?.map(keyword => )}
} + { + isFullDocMode + ? + : null + } { child_chunks.length > 0 && {}} + childChunks={child_chunks} handleInputChange={() => {}} + enabled={enabled} /> } diff --git a/web/app/components/datasets/documents/detail/completed/segment-list.tsx b/web/app/components/datasets/documents/detail/completed/segment-list.tsx index 6e6c849ab3..a0e8ba37e7 100644 --- a/web/app/components/datasets/documents/detail/completed/segment-list.tsx +++ b/web/app/components/datasets/documents/detail/completed/segment-list.tsx @@ -5,6 +5,7 @@ import type { 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' +import classNames from '@/utils/classnames' type ISegmentListProps = { isLoading: boolean @@ -32,7 +33,7 @@ const SegmentList: FC = ({ if (isLoading) return return ( -
+
{ items.map((segItem) => { const isLast = items[items.length - 1].id === segItem.id @@ -44,7 +45,7 @@ const SegmentList: FC = ({ checked={selectedSegmentIds.includes(segItem.id)} onCheck={() => onSelected(segItem.id)} /> -
+
= ({ datasetId, documentId }) => { detailMutate() } + const mode = useMemo(() => { + return documentDetail?.dataset_process_rule?.mode + }, [documentDetail]) + + const parentMode = useMemo(() => { + return documentDetail?.dataset_process_rule.rules.parent_mode + }, [documentDetail]) + + const isFullDocMode = useMemo(() => { + return mode === 'hierarchical' && parentMode === 'full-doc' + }, [mode, parentMode]) + return (
@@ -222,7 +234,7 @@ const DocumentDetail: FC = ({ datasetId, documentId }) => {
{isDetailLoading ? - :
+ :
{embedding ? :