feat: enhance child segment list and segment card UI with improved styling and new props for EditSlice

web/app/components/datasets/documents/detail/completed/child-segment-list.tsx

@@ -3,6 +3,7 @@ import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { EditSlice } from '../../../formatted-text/flavours/edit-slice'
 import { useDocumentContext } from '../index'
+import { FormattedText } from '../../../formatted-text/formatted'
 import Empty from './common/empty'
 import FullDocListSkeleton from './skeleton/full-doc-list-skeleton'
 import type { ChildChunkDetail } from '@/models/datasets'
@@ -135,9 +136,13 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
       {isLoading ? <FullDocListSkeleton /> : null}
       {((isFullDocMode && !isLoading) || !collapsed)
         ? <div className={classNames('flex items-center gap-x-0.5', isFullDocMode ? 'grow' : '')}>
-          {isParagraphMode && <Divider type='vertical' className='h-auto w-[2px] mx-[7px] bg-text-accent-secondary' />}
+          {isParagraphMode && (
+            <div className='self-stretch my-0.5'>
+              <Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
+            </div>
+          )}
           {childChunks.length > 0
-            ? <div className={classNames('w-full !leading-5 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
+            ? <FormattedText className={classNames('w-full !leading-6 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
               {childChunks.map((childChunk) => {
                 const edited = childChunk.updated_at !== childChunk.created_at
                 return <EditSlice
@@ -146,13 +151,15 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
                   text={childChunk.content}
                   onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
                   className='line-clamp-3'
+                  labelClassName='font-semibold'
+                  contentClassName={'!leading-6'}
                   onClick={(e) => {
                     e.stopPropagation()
                     onClickSlice?.(childChunk)
                   }}
                 />
               })}
-            </div>
+            </FormattedText>
             : inputValue !== ''
               ? <div className='h-full w-full'>
                 <Empty onClearFilter={onClearFilter!} />

web/app/components/datasets/documents/detail/completed/segment-card.tsx

@@ -10,7 +10,6 @@ import { SegmentIndexTag } from './common/segment-index-tag'
 import ParentChunkCardSkeleton from './skeleton/parent-chunk-card-skeleton'
 import { useSegmentListContext } from './index'
 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'
 import { formatNumber } from '@/utils/format'
@@ -157,12 +156,6 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           </div>
           {!isFullDocMode
             ? <div className='flex items-center'>
-              {loading
-                ? (
-                  <Indicator color="gray" />
-                )
-                : (
-                  <>
               <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
               {embeddingAvailable && (
                 <div className="absolute -top-2 -right-2.5 z-20 hidden group-hover/card:flex items-center gap-x-0.5 p-1
@@ -215,8 +208,6 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                   </div>
                 </div>
               )}
-                  </>
-                )}
             </div>
             : null}
         </>

web/app/components/datasets/formatted-text/flavours/edit-slice.tsx

@@ -10,10 +10,12 @@ import ActionButton, { ActionButtonState } from '@/app/components/base/action-bu
 type EditSliceProps = SliceProps<{
   label: ReactNode
   onDelete: () => void
+  labelClassName?: string
+  contentClassName?: string
 }>
 
 export const EditSlice: FC<EditSliceProps> = (props) => {
-  const { label, className, text, onDelete, ...rest } = props
+  const { label, className, text, onDelete, labelClassName, contentClassName, ...rest } = props
   const [delBtnShow, setDelBtnShow] = useState(false)
   const [isDelBtnHover, setDelBtnHover] = useState(false)
 
@@ -44,12 +46,16 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
         <SliceLabel
           className={classNames(
             isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
+            labelClassName,
           )}
         >
           {label}
         </SliceLabel>
         <SliceContent
-          className={classNames(isDestructive && '!bg-state-destructive-hover-alt')}
+          className={classNames(
+            isDestructive && '!bg-state-destructive-hover-alt',
+            contentClassName,
+          )}
         >
           {text}
         </SliceContent>