dify/web/app/components/base/file-thumb/index.tsx

import type { VariantProps } from 'class-variance-authority'
import { cn } from '@langgenius/dify-ui/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import { cva } from 'class-variance-authority'
import * as React from 'react'
import { useCallback } from 'react'
import { FileTypeIcon } from '../file-uploader'
import { getFileAppearanceType } from '../file-uploader/utils'
import ImageRender from './image-render'

const FileThumbVariants = cva('flex cursor-pointer items-center justify-center', {
  variants: {
    size: {
      sm: 'size-6',
      md: 'size-8',
    },
  },
  defaultVariants: {
    size: 'sm',
  },
})

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

type FileThumbProps = {
  file: FileEntity
  className?: string
  onClick?: (file: FileEntity) => void
} & VariantProps<typeof FileThumbVariants>

const FileThumb = ({ file, size, className, onClick }: FileThumbProps) => {
  const { name, mimeType, sourceUrl } = file
  const isImage = mimeType.startsWith('image/')

  const handleClick = useCallback(
    (e: React.MouseEvent<HTMLButtonElement>) => {
      e.stopPropagation()
      e.preventDefault()
      onClick?.(file)
    },
    [onClick, file],
  )

  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <button
            type="button"
            aria-label={name}
            className={cn(
              FileThumbVariants({ size, className }),
              'border-0 bg-transparent p-0',
              isImage
                ? 'p-px'
                : 'rounded-md border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs hover:bg-components-panel-on-panel-item-bg-alt',
            )}
            onClick={handleClick}
          >
            {isImage ? (
              <ImageRender sourceUrl={sourceUrl} name={name} />
            ) : (
              <FileTypeIcon type={getFileAppearanceType(name, mimeType)} size="sm" />
            )}
          </button>
        }
      />
      <TooltipContent
        placement="top"
        className="rounded-lg p-1.5 system-xs-medium text-text-secondary"
      >
        {name}
      </TooltipContent>
    </Tooltip>
  )
}

export default React.memo(FileThumb)