dify/web/app/components/base/file-uploader/file-list-in-log.tsx

import React, { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { RiArrowRightSLine } from '@remixicon/react'
import FileImageRender from './file-image-render'
import FileTypeIcon from './file-type-icon'
import FileItem from './file-uploader-in-attachment/file-item'
import type { FileEntity } from './types'
import {
  getFileAppearanceType,
} from './utils'
import Tooltip from '@/app/components/base/tooltip'
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'

type Props = {
  fileList: {
    varName: string
    list: FileEntity[]
  }[]
  isExpanded?: boolean
  noBorder?: boolean
  noPadding?: boolean
}

const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPadding = false }: Props) => {
  const { t } = useTranslation()
  const [expanded, setExpanded] = useState(isExpanded)
  const fullList = useMemo(() => {
    return fileList.reduce((acc: FileEntity[], { list }) => {
      return [...acc, ...list]
    }, [])
  }, [fileList])

  if (!fileList.length)
    return null

  return (
    <div className={cn('px-3 py-2', expanded && 'py-3', !noBorder && 'border-t border-divider-subtle', noPadding && '!p-0')}>
      <div className='flex justify-between gap-1'>
        {expanded && (
          <div className='grow py-1 text-text-secondary system-xs-semibold-uppercase cursor-pointer' onClick={() => setExpanded(!expanded)}>{t('appLog.runDetail.fileListLabel')}</div>
        )}
        {!expanded && (
          <div className='flex gap-1'>
            {fullList.map((file) => {
              const { id, name, type, supportFileType, base64Url, url } = file
              const isImageFile = supportFileType === SupportUploadFileTypes.image
              return (
                <>
                  {isImageFile && (
                    <Tooltip
                      popupContent={name}
                    >
                      <div key={id}>
                        <FileImageRender
                          className='w-8 h-8'
                          imageUrl={base64Url || url || ''}
                        />
                      </div>
                    </Tooltip>
                  )}
                  {!isImageFile && (
                    <Tooltip
                      popupContent={name}
                    >
                      <div key={id} className='p-1.5 rounded-md bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border shadow-xs'>
                        <FileTypeIcon
                          type={getFileAppearanceType(name, type)}
                          size='md'
                        />
                      </div>
                    </Tooltip>
                  )}
                </>
              )
            })}
          </div>
        )}
        <div className='flex items-center gap-1 cursor-pointer' onClick={() => setExpanded(!expanded)}>
          {!expanded && <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appLog.runDetail.fileListDetail')}</div>}
          <RiArrowRightSLine className={cn('w-4 h-4 text-text-tertiary', expanded && 'rotate-90')} />
        </div>
      </div>
      {expanded && (
        <div className='flex flex-col gap-3'>
          {fileList.map(item => (
            <div key={item.varName} className='flex flex-col gap-1 system-xs-regular'>
              <div className='py-1 text-text-tertiary '>{item.varName}</div>
              {item.list.map(file => (
                <FileItem
                  key={file.id}
                  file={file}
                  showDeleteAction={false}
                  showDownloadAction
                  canPreview
                />
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export default FileListInLog