dify/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx

import { Button } from '@langgenius/dify-ui/button'
import { RiSearchEyeLine } from '@remixicon/react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'

type HeaderProps = {
  onReset: () => void
  resetDisabled: boolean
  previewDisabled: boolean
  onPreview?: () => void
}

const Header = ({
  onReset,
  resetDisabled,
  previewDisabled,
  onPreview,
}: HeaderProps) => {
  const { t } = useTranslation()

  return (
    <div className="flex items-center gap-x-1 px-4 py-2">
      <div className="grow system-sm-semibold-uppercase text-text-secondary">
        {t($ => $['addDocuments.stepTwo.chunkSettings'], { ns: 'datasetPipeline' })}
      </div>
      <Button variant="ghost" disabled={resetDisabled} onClick={onReset}>
        {t($ => $['operation.reset'], { ns: 'common' })}
      </Button>
      <Button
        variant="secondary-accent"
        onClick={onPreview}
        className="gap-x-0.5"
        disabled={previewDisabled}
      >
        <RiSearchEyeLine className="size-4" />
        <span className="px-0.5">{t($ => $['addDocuments.stepTwo.previewChunks'], { ns: 'datasetPipeline' })}</span>
      </Button>
    </div>
  )
}

export default React.memo(Header)