dify/web/app/components/datasets/documents/detail/embedding/components/segment-progress.tsx

import type { FC } from 'react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'

type SegmentProgressProps = {
  completedSegments?: number
  totalSegments?: number
  percent: number
}

const SegmentProgress: FC<SegmentProgressProps> = React.memo(({
  completedSegments,
  totalSegments,
  percent,
}) => {
  const { t } = useTranslation()

  const completed = completedSegments ?? '--'
  const total = totalSegments ?? '--'

  return (
    <div className="flex w-full items-center">
      <span className="system-xs-medium text-text-secondary">
        {`${t('embedding.segments', { ns: 'datasetDocuments' })} ${completed}/${total} · ${percent}%`}
      </span>
    </div>
  )
})

SegmentProgress.displayName = 'SegmentProgress'

export default SegmentProgress