From 3dbd8f5d31121c4090dcfd297b87fe00aa9aece0 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Thu, 12 Dec 2024 17:14:33 +0800
Subject: [PATCH] feat: enhance child segment list with total count and input
 value handling

---
 .../detail/completed/child-segment-list.tsx      | 16 ++++++++++++----
 .../documents/detail/completed/index.tsx         | 13 ++++++++-----
 .../documents/detail/completed/segment-card.tsx  |  2 +-
 .../formatted-text/flavours/edit-slice.tsx       |  8 ++------
 4 files changed, 23 insertions(+), 16 deletions(-)

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 34cbd1c96e..c1f44648fb 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
@@ -15,6 +15,8 @@ type IChildSegmentCardProps = {
   enabled: boolean
   onDelete?: (segId: string, childChunkId: string) => Promise<void>
   onClickSlice?: (childChunk: ChildChunkDetail) => void
+  total?: number
+  inputValue?: string
 }
 
 const ChildSegmentList: FC<IChildSegmentCardProps> = ({
@@ -25,6 +27,8 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
   enabled,
   onDelete,
   onClickSlice,
+  total,
+  inputValue,
 }) => {
   const parentMode = useDocumentContext(s => s.parentMode)
 
@@ -63,7 +67,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
                 : (<RiArrowDownSLine className='w-4 h-4 text-text-secondary mr-0.5' />)
               : null
           }
-          <span className='text-text-secondary system-sm-semibold-uppercase'>{`${childChunks.length} CHILD CHUNKS`}</span>
+          <span className='text-text-secondary system-sm-semibold-uppercase'>{`${total} CHILD CHUNKS`}</span>
           <span className={classNames('text-text-quaternary text-xs font-medium pl-1.5', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}>·</span>
           <button
             className={classNames('px-1.5 py-1 text-components-button-secondary-accent-text system-xs-semibold', isParagraphMode ? 'hidden group-hover/card:inline-block' : '')}
@@ -80,7 +84,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
             showLeftIcon
             showClearIcon
             wrapperClassName='!w-52'
-            value={''}
+            value={inputValue}
             onChange={e => handleInputChange?.(e.target.value)}
             onClear={() => handleInputChange?.('')}
           />
@@ -94,10 +98,14 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
               const edited = childChunk.updated_at !== childChunk.created_at
               return <EditSlice
                 key={childChunk.id}
-                label={`C-${childChunk.position}${edited ? '·EDITED' : ''}`}
+                label={`C-${childChunk.position}${edited ? ' · EDITED' : ''}`}
                 text={childChunk.content}
                 onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
-                onClick={() => onClickSlice?.(childChunk)}
+                className='line-clamp-3'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onClickSlice?.(childChunk)
+                }}
               />
             })}
           </div>
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index fb38868a01..f3525a4956 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -125,8 +125,8 @@ const Completed: FC<ICompletedProps> = ({
       datasetId,
       documentId,
       params: {
-        page: currentPage,
-        limit,
+        page: isFullDocMode ? 1 : currentPage,
+        limit: isFullDocMode ? 10 : limit,
         keyword: isFullDocMode ? '' : searchValue,
         enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
       },
@@ -497,7 +497,7 @@ const Completed: FC<ICompletedProps> = ({
       {/* Segment list */}
       {
         isFullDocMode
-          ? <div className='h-full flex flex-col'>
+          ? <>
             <SegmentCard
               detail={segments[0]}
               onClick={() => onClickCard(segments[0])}
@@ -511,8 +511,10 @@ const Completed: FC<ICompletedProps> = ({
               handleAddNewChildChunk={handleAddNewChildChunk}
               onClickSlice={onClickSlice}
               enabled={!archived}
+              total={childChunkListData?.total || 0}
+              inputValue={inputValue}
             />
-          </div>
+          </>
           : <SegmentList
             ref={segmentListRef}
             embeddingAvailable={embeddingAvailable}
@@ -533,9 +535,10 @@ const Completed: FC<ICompletedProps> = ({
       <Pagination
         current={currentPage - 1}
         onChange={cur => setCurrentPage(cur + 1)}
-        total={segmentListData?.total || 0}
+        total={(isFullDocMode ? childChunkListData?.total : segmentListData?.total) || 0}
         limit={limit}
         onLimitChange={limit => setLimit(limit)}
+        className={isFullDocMode ? 'px-3' : ''}
       />
       {/* Edit or view segment detail */}
       <FullScreenDrawer
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card.tsx b/web/app/components/datasets/documents/detail/completed/segment-card.tsx
index a3d25c214d..030f684457 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card.tsx
@@ -207,7 +207,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           <>
             <div className={cn('text-text-secondary body-md-regular -tracking-[0.07px] mt-0.5',
               textOpacity,
-              isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
+              isFullDocMode ? 'line-clamp-3' : isCollapsed ? 'line-clamp-2' : 'line-clamp-20',
             )}>
               {renderContent()}
             </div>
diff --git a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
index 00d836e517..1fe81180c4 100644
--- a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
@@ -10,11 +10,10 @@ 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, onClick, ...rest } = props
+  const { label, className, text, onDelete, ...rest } = props
   const [delBtnShow, setDelBtnShow] = useState(false)
   const [isDelBtnHover, setDelBtnHover] = useState(false)
 
@@ -36,10 +35,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
   const isDestructive = delBtnShow && isDelBtnHover
 
   return (
-    <div onClick={(e) => {
-      e.stopPropagation()
-      onClick?.()
-    }}>
+    <div>
       <SliceContainer {...rest}
         className={className}
         ref={refs.setReference}