Merge branch 'feat/support-file-download-in-workflow' into deploy/dev

langgenius · Dec 5, 2024 · bc8078e · bc8078e
2 parents 946375c + 3b87699
commit bc8078e
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 78 deletions.
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -92,6 +92,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
                   file={file}
                   showDeleteAction={false}
                   showDownloadAction
+                  canPreview
                 />
               ))}
             </div>

diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
@@ -1,12 +1,15 @@
 import {
   memo,
+  useState,
 } from 'react'
 import {
   RiDeleteBinLine,
   RiDownloadLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import FileTypeIcon from '../file-type-icon'
 import {
+  downloadFile,
   fileIsUploaded,
   getFileAppearanceType,
   getFileExtension,
@@ -19,110 +22,132 @@ import { formatFileSize } from '@/utils/format'
 import cn from '@/utils/classnames'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 
 type FileInAttachmentItemProps = {
   file: FileEntity
   showDeleteAction?: boolean
   showDownloadAction?: boolean
   onRemove?: (fileId: string) => void
   onReUpload?: (fileId: string) => void
+  canPreview?: boolean
 }
 const FileInAttachmentItem = ({
   file,
   showDeleteAction,
   showDownloadAction = true,
   onRemove,
   onReUpload,
+  canPreview,
 }: FileInAttachmentItemProps) => {
   const { id, name, type, progress, supportFileType, base64Url, url, isRemote } = file
   const ext = getFileExtension(name, type, isRemote)
   const isImageFile = supportFileType === SupportUploadFileTypes.image
-
+  const [imagePreviewUrl, setImagePreviewUrl] = useState('')
   return (
-    <div className={cn(
-      'flex items-center pr-3 h-12 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs',
-      progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
-    )}>
-      <div className='flex items-center justify-center w-12 h-12'>
-        {
-          isImageFile && (
-            <FileImageRender
-              className='w-8 h-8'
-              imageUrl={base64Url || url || ''}
-            />
-          )
-        }
-        {
-          !isImageFile && (
-            <FileTypeIcon
-              type={getFileAppearanceType(name, type)}
-              size='lg'
-            />
-          )
-        }
-      </div>
-      <div className='grow w-0 mr-1'>
-        <div
-          className='flex items-center mb-0.5 system-xs-medium text-text-secondary truncate'
-          title={file.name}
-        >
-          <div className='truncate'>{name}</div>
+    <>
+      <div className={cn(
+        'flex items-center pr-3 h-12 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs',
+        progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
+      )}>
+        <div className='flex items-center justify-center w-12 h-12'>
+          {
+            isImageFile && (
+              <FileImageRender
+                className='w-8 h-8'
+                imageUrl={base64Url || url || ''}
+              />
+            )
+          }
+          {
+            !isImageFile && (
+              <FileTypeIcon
+                type={getFileAppearanceType(name, type)}
+                size='lg'
+              />
+            )
+          }
         </div>
-        <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
+        <div className='grow w-0 mr-1'>
+          <div
+            className='flex items-center mb-0.5 system-xs-medium text-text-secondary truncate'
+            title={file.name}
+          >
+            <div className='truncate'>{name}</div>
+          </div>
+          <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
+            {
+              ext && (
+                <span>{ext.toLowerCase()}</span>
+              )
+            }
+            {
+              ext && (
+                <span className='mx-1 system-2xs-medium'>•</span>
+              )
+            }
+            {
+              !!file.size && (
+                <span>{formatFileSize(file.size)}</span>
+              )
+            }
+          </div>
+        </div>
+        <div className='shrink-0 flex items-center'>
+          {
+            progress >= 0 && !fileIsUploaded(file) && (
+              <ProgressCircle
+                className='mr-2.5'
+                percentage={progress}
+              />
+            )
+          }
           {
-            ext && (
-              <span>{ext.toLowerCase()}</span>
+            progress === -1 && (
+              <ActionButton
+                className='mr-1'
+                onClick={() => onReUpload?.(id)}
+              >
+                <ReplayLine className='w-4 h-4 text-text-tertiary' />
+              </ActionButton>
             )
           }
           {
-            ext && (
-              <span className='mx-1 system-2xs-medium'>•</span>
+            showDeleteAction && (
+              <ActionButton onClick={() => onRemove?.(id)}>
+                <RiDeleteBinLine className='w-4 h-4' />
+              </ActionButton>
             )
           }
           {
-            !!file.size && (
-              <span>{formatFileSize(file.size)}</span>
+            canPreview && isImageFile && (
+              <ActionButton className='mr-1' onClick={() => setImagePreviewUrl(url || '')}>
+                <RiEyeLine className='w-4 h-4' />
+              </ActionButton>
+            )
+          }
+          {
+            showDownloadAction && (
+              <ActionButton onClick={(e) => {
+                e.stopPropagation()
+                downloadFile(url || base64Url || '', name)
+              }}>
+                <RiDownloadLine className='w-4 h-4' />
+              </ActionButton>
             )
           }
         </div>
       </div>
-      <div className='shrink-0 flex items-center'>
-        {
-          progress >= 0 && !fileIsUploaded(file) && (
-            <ProgressCircle
-              className='mr-2.5'
-              percentage={progress}
-            />
-          )
-        }
-        {
-          progress === -1 && (
-            <ActionButton
-              className='mr-1'
-              onClick={() => onReUpload?.(id)}
-            >
-              <ReplayLine className='w-4 h-4 text-text-tertiary' />
-            </ActionButton>
-          )
-        }
-        {
-          showDeleteAction && (
-            <ActionButton onClick={() => onRemove?.(id)}>
-              <RiDeleteBinLine className='w-4 h-4' />
-            </ActionButton>
-          )
-        }
-        {
-          showDownloadAction && (
-            <ActionButton
-              size='xs'
-            >
-              <RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
-            </ActionButton>
-          )
-        }
-      </div>
-    </div>
+      {
+        imagePreviewUrl && canPreview && (
+          <ImagePreview
+            title={name}
+            url={imagePreviewUrl}
+            onCancel={() => setImagePreviewUrl('')}
+          />
+        )
+      }
+    </>
   )
 }
 

diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
@@ -24,14 +24,14 @@ const ResultText: FC<ResultTextProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className='bg-background-section-burn py-2'>
+    <div className='bg-background-section-burn'>
       {isRunning && !outputs && (
         <div className='pt-4 pl-[26px]'>
           <LoadingAnim type='text' />
         </div>
       )}
       {!isRunning && error && (
-        <div className='px-4'>
+        <div className='px-4 py-2'>
           <StatusContainer status='failed'>
             {error}
           </StatusContainer>
@@ -50,9 +50,11 @@ const ResultText: FC<ResultTextProps> = ({
       )}
       {(outputs || !!allFiles?.length) && (
         <>
-          <div className='px-4 py-2'>
-            {outputs && <Markdown content={outputs} />}
-          </div>
+          {outputs && (
+            <div className='px-4 py-2'>
+              <Markdown content={outputs} />
+            </div>
+          )}
           {!!allFiles?.length && (
             <FileListInLog
               noBorder