dify/web/app/components/datasets/settings/chunk-structure/index.tsx

import type { ChunkingMode } from '@/models/datasets'
import React from 'react'
import { useChunkStructure } from './hooks'
import OptionCard from '../option-card'

type ChunkStructureProps = {
  chunkStructure: ChunkingMode
  onChunkStructureChange: (value: ChunkingMode) => void
}

const ChunkStructure = ({
  chunkStructure,
  onChunkStructureChange,
}: ChunkStructureProps) => {
  const {
    options,
  } = useChunkStructure()

  return (
    <div className='flex flex-col gap-y-1'>
      {
        options.map(option => (
          <OptionCard
            key={option.id}
            id={option.id}
            icon={option.icon}
            title={option.title}
            description={option.description}
            onClick={() => {
              onChunkStructureChange(option.id)
            }}
            showHighlightBorder={chunkStructure === option.id}
            effectColor={option.effectColor}
            showEffectColor
            className='gap-x-1.5 p-3 pr-4'
          />
        ))
      }
    </div>
  )
}

export default React.memo(ChunkStructure)