dify/web/app/components/datasets/common/image-list/index.tsx

import type { ImageInfo } from '../image-previewer'
import type { FileEntity } from '@/app/components/base/file-thumb'
import { cn } from '@langgenius/dify-ui/cn'
import { useCallback, useMemo, useState } from 'react'
import FileThumb from '@/app/components/base/file-thumb'
import ImagePreviewer from '../image-previewer'
import More from './more'

type Image = {
  name: string
  mimeType: string
  sourceUrl: string
  size: number
  extension: string
}

type ImageListProps = {
  images: Image[]
  size: 'sm' | 'md'
  limit?: number
  className?: string
}

const ImageList = ({ images, size, limit = 9, className }: ImageListProps) => {
  const [showMore, setShowMore] = useState(false)
  const [previewIndex, setPreviewIndex] = useState(0)
  const [previewImages, setPreviewImages] = useState<ImageInfo[]>([])

  const limitedImages = useMemo(() => {
    return showMore ? images : images.slice(0, limit)
  }, [images, limit, showMore])

  const handleShowMore = useCallback(() => {
    setShowMore(true)
  }, [])

  const handleImageClick = useCallback(
    (file: FileEntity) => {
      const index = limitedImages.findIndex((image) => image.sourceUrl === file.sourceUrl)
      if (index === -1) return
      setPreviewIndex(index)
      setPreviewImages(
        limitedImages.map((image) => ({
          url: image.sourceUrl,
          name: image.name,
          size: image.size,
        })),
      )
    },
    [limitedImages],
  )

  const handleClosePreview = useCallback(() => {
    setPreviewImages([])
  }, [])

  return (
    <>
      <div className={cn('flex flex-wrap gap-1', className)}>
        {limitedImages.map((image) => (
          <FileThumb key={image.sourceUrl} file={image} size={size} onClick={handleImageClick} />
        ))}
        {images.length > limit && !showMore && (
          <More count={images.length - limitedImages.length} onClick={handleShowMore} />
        )}
      </div>
      {previewImages.length > 0 && (
        <ImagePreviewer
          images={previewImages}
          initialIndex={previewIndex}
          onClose={handleClosePreview}
        />
      )}
    </>
  )
}

export default ImageList