refactor: simplify SegmentIndexTag usage and improve label prefix handling

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -28,7 +28,6 @@ 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 { Chunk } from '@/app/components/base/icons/src/public/knowledge'
 import { useInvalid } from '@/service/use-base'
 
 const DEFAULT_LIMIT = 10
@@ -51,26 +50,6 @@ export const useSegmentListContext = (selector: (value: SegmentListContextValue)
   return useContextSelector(SegmentListContext, selector)
 }
 
-export const SegmentIndexTag: FC<{ positionId?: string | number; label?: string; className?: string; isParentChildRetrieval?: boolean }> = React.memo(({ positionId, label, className, isParentChildRetrieval }) => {
-  const prefix = `${isParentChildRetrieval ? 'Parent-' : ''}Chunk`
-  const localPositionId = useMemo(() => {
-    const positionIdStr = String(positionId)
-    if (positionIdStr.length >= 3)
-      return `${prefix}-${positionId}`
-    return `${prefix}-${positionIdStr.padStart(2, '0')}`
-  }, [positionId])
-  return (
-    <div className={cn('flex items-center', className)}>
-      <Chunk className='w-3 h-3 p-[1px] text-text-tertiary mr-0.5' />
-      <div className='text-text-tertiary system-xs-medium'>
-        {label || localPositionId}
-      </div>
-    </div>
-  )
-})
-
-SegmentIndexTag.displayName = 'SegmentIndexTag'
-
 type ICompletedProps = {
   embeddingAvailable: boolean
   showNewSegmentModal: boolean

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

@@ -64,6 +64,10 @@ const SegmentCard: FC<ISegmentCardProps> = ({
     return mode === 'custom'
   }, [mode])
 
+  const isParentChildMode = useMemo(() => {
+    return mode === 'hierarchical'
+  }, [mode])
+
   const isFullDocMode = useMemo(() => {
     return mode === 'hierarchical' && parentMode === 'full-doc'
   }, [mode, parentMode])
@@ -109,7 +113,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
       <div className='h-5 relative flex items-center justify-between'>
         <>
           <div className='flex items-center gap-x-2'>
-            <SegmentIndexTag positionId={position} className={textOpacity} labelPrefix={isGeneralMode ? 'Chunk' : 'Parent-Chunk'} />
+            <SegmentIndexTag positionId={position} className={textOpacity} labelPrefix={`${isParentChildMode ? 'Parent-' : ''}Chunk`} />
             <Dot />
             <div className={cn('text-text-tertiary system-xs-medium', textOpacity)}>{`${formatNumber(word_count)} Characters`}</div>
             <Dot />

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

@@ -85,7 +85,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
         <div className='flex flex-col'>
           <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' : 'Chunk'} />
+            <SegmentIndexTag positionId={segInfo?.position || ''} labelPrefix={`${isParentChildMode ? 'Parent-' : ''}Chunk`} />
             <span className='text-text-quaternary system-xs-medium'>·</span>
             <span className='text-text-tertiary system-xs-medium'>{formatNumber(isEditMode ? question.length : segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
           </div>

web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { SegmentIndexTag } from '../../documents/detail/completed'
+import { SegmentIndexTag } from '../../documents/detail/completed/common/segment-index-tag'
 import Dot from '../../documents/detail/completed/common/dot'
 import Score from './score'
 import ChildChunksItem from './child-chunks-item'
@@ -44,7 +44,7 @@ const ChunkDetailModal: FC<Props> = ({
           <div className='flex justify-between items-center'>
             <div className='grow flex items-center space-x-2'>
               <SegmentIndexTag
-                isParentChildRetrieval={isParentChildRetrieval}
+                labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`}
                 positionId={position}
                 className={cn('w-fit group-hover:opacity-100')}
               />

web/app/components/datasets/hit-testing/components/result-item.tsx

@@ -44,7 +44,7 @@ const ResultItem: FC<Props> = ({
       <div className='flex justify-between items-center px-3'>
         <div className='flex items-center space-x-2'>
           <SegmentIndexTag
-            isParentChildRetrieval={isParentChildRetrieval}
+            labelPrefix={`${isParentChildRetrieval ? 'Parent-' : ''}Chunk`}
             positionId={position}
             className={cn('w-fit group-hover:opacity-100')}
           />