dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/dify/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -0,0 +1,156 @@
+import {
+  RiCloseLine,
+  RiDownloadLine,
+} from '@remixicon/react'
+import { useState } from 'react'
+import {
+  downloadFile,
+  fileIsUploaded,
+  getFileAppearanceType,
+  getFileExtension,
+} from '../utils'
+import FileTypeIcon from '../file-type-icon'
+import type { FileEntity } from '../types'
+import cn from '@/utils/classnames'
+import { formatFileSize } from '@/utils/format'
+import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
+import ActionButton from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
+import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
+import VideoPreview from '@/app/components/base/file-uploader/video-preview'
+
+type FileItemProps = {
+  file: FileEntity
+  showDeleteAction?: boolean
+  showDownloadAction?: boolean
+  canPreview?: boolean
+  onRemove?: (fileId: string) => void
+  onReUpload?: (fileId: string) => void
+}
+const FileItem = ({
+  file,
+  showDeleteAction,
+  showDownloadAction = true,
+  onRemove,
+  onReUpload,
+  canPreview,
+}: FileItemProps) => {
+  const { id, name, type, progress, url, base64Url, isRemote } = file
+  const [previewUrl, setPreviewUrl] = useState('')
+  const ext = getFileExtension(name, type, isRemote)
+  const uploadError = progress === -1
+
+  let tmp_preview_url = url || base64Url
+  if (!tmp_preview_url && file?.originalFile)
+    tmp_preview_url = URL.createObjectURL(file.originalFile.slice()).toString()
+  const download_url = url ? `${url}&as_attachment=true` : base64Url
+
+  return (
+    <>
+      <div
+        className={cn(
+          'group/file-item relative h-[68px] w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg p-2 shadow-xs',
+          !uploadError && 'hover:bg-components-card-bg-alt',
+          uploadError && 'border border-state-destructive-border bg-state-destructive-hover',
+          uploadError && 'bg-state-destructive-hover-alt hover:border-[0.5px] hover:border-state-destructive-border',
+        )}
+      >
+        {
+          showDeleteAction && (
+            <Button
+              className='absolute -right-1.5 -top-1.5 z-[11] hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex'
+              onClick={() => onRemove?.(id)}
+            >
+              <RiCloseLine className='h-4 w-4 text-components-button-secondary-text' />
+            </Button>
+          )
+        }
+        <div
+          className='system-xs-medium mb-1 line-clamp-2 h-8 cursor-pointer break-all text-text-tertiary'
+          title={name}
+          onClick={() => canPreview && setPreviewUrl(tmp_preview_url || '')}
+        >
+          {name}
+        </div>
+        <div className='relative flex items-center justify-between'>
+          <div className='system-2xs-medium-uppercase flex items-center text-text-tertiary'>
+            <FileTypeIcon
+              size='sm'
+              type={getFileAppearanceType(name, type)}
+              className='mr-1'
+            />
+            {
+              ext && (
+                <>
+                  {ext}
+                  <div className='mx-1'>·</div>
+                </>
+              )
+            }
+            {
+              !!file.size && formatFileSize(file.size)
+            }
+          </div>
+          {
+            showDownloadAction && download_url && (
+              <ActionButton
+                size='m'
+                className='absolute -right-1 -top-1 hidden group-hover/file-item:flex'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  downloadFile(download_url || '', name)
+                }}
+              >
+                <RiDownloadLine className='h-3.5 w-3.5 text-text-tertiary' />
+              </ActionButton>
+            )
+          }
+          {
+            progress >= 0 && !fileIsUploaded(file) && (
+              <ProgressCircle
+                percentage={progress}
+                size={12}
+                className='shrink-0'
+              />
+            )
+          }
+          {
+            uploadError && (
+              <ReplayLine
+                className='h-4 w-4 text-text-tertiary'
+                onClick={() => onReUpload?.(id)}
+              />
+            )
+          }
+        </div>
+      </div>
+      {
+        type.split('/')[0] === 'audio' && canPreview && previewUrl && (
+          <AudioPreview
+            title={name}
+            url={previewUrl}
+            onCancel={() => setPreviewUrl('')}
+          />
+        )
+      }
+      {
+        type.split('/')[0] === 'video' && canPreview && previewUrl && (
+          <VideoPreview
+            title={name}
+            url={previewUrl}
+            onCancel={() => setPreviewUrl('')}
+          />
+        )
+      }
+      {
+        type.split('/')[1] === 'pdf' && canPreview && previewUrl && (
+          <PdfPreview url={previewUrl} onCancel={() => { setPreviewUrl('') }} />
+        )
+      }
+    </>
+  )
+}
+
+export default FileItem