From 543503c3980c3768e1f88976c33e87a992b74db0 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 26 Sep 2024 16:32:11 +0800
Subject: [PATCH] fix: file progress

---
 .../file-uploader-in-attachment/file-item.tsx             | 3 ++-
 .../file-uploader-in-chat-input/file-image-item.tsx       | 3 ++-
 .../file-uploader-in-chat-input/file-item.tsx             | 3 ++-
 web/app/components/base/file-uploader/utils.ts            | 8 ++++++++
 web/app/components/workflow/panel/inputs-panel.tsx        | 7 +++++--
 5 files changed, 19 insertions(+), 5 deletions(-)

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
index be81c8ea4a..4b889bc6e8 100644
--- 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
@@ -5,6 +5,7 @@ import {
 } from '@remixicon/react'
 import FileTypeIcon from '../file-type-icon'
 import {
+  fileIsUploaded,
   getFileAppearanceType,
   getFileExtension,
 } from '../utils'
@@ -81,7 +82,7 @@ const FileInAttachmentItem = ({
       </div>
       <div className='shrink-0 flex items-center'>
         {
-          progress >= 0 && !file.uploadedId && (
+          progress >= 0 && !fileIsUploaded(file) && (
             <ProgressCircle
               className='mr-2.5'
               percentage={progress}
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
index c1277be050..aee1abc808 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@@ -1,6 +1,7 @@
 import { RiCloseLine } from '@remixicon/react'
 import FileImageRender from '../file-image-render'
 import type { FileEntity } from '../types'
+import { fileIsUploaded } from '../utils'
 import Button from '@/app/components/base/button'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
@@ -39,7 +40,7 @@ const FileImageItem = ({
         showDownloadAction={showDownloadAction}
       />
       {
-        progress > 0 && progress < 100 && (
+        progress >= 0 && !fileIsUploaded(file) && (
           <div className='absolute inset-0 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt z-10'>
             <ProgressCircle
               percentage={progress}
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index 148228a2e2..8627483a86 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -3,6 +3,7 @@ import {
   RiDownloadLine,
 } from '@remixicon/react'
 import {
+  fileIsUploaded,
   getFileAppearanceType,
   getFileExtension,
 } from '../utils'
@@ -84,7 +85,7 @@ const FileItem = ({
           )
         }
         {
-          progress >= 0 && !file.uploadedId && (
+          progress >= 0 && !fileIsUploaded(file) && (
             <ProgressCircle
               percentage={progress}
               size={12}
diff --git a/web/app/components/base/file-uploader/utils.ts b/web/app/components/base/file-uploader/utils.ts
index a51df6cb89..3c14be9d4a 100644
--- a/web/app/components/base/file-uploader/utils.ts
+++ b/web/app/components/base/file-uploader/utils.ts
@@ -6,6 +6,7 @@ import { upload } from '@/service/base'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import type { FileResponse } from '@/types/workflow'
+import { TransferMethod } from '@/types/app'
 
 type FileUploadParams = {
   file: File
@@ -158,3 +159,10 @@ export const getFilesInLogs = (rawData: any) => {
   }).filter(Boolean)).filter(item => item?.model_identity === '__dify__file__')
   return getProcessedFilesFromResponse(originalFiles)
 }
+
+export const fileIsUploaded = (file: FileEntity) => {
+  const localFileUploaded = file.transferMethod === TransferMethod.local_file && file.uploadedId
+  const fromUrlFileUploaded = file.transferMethod === TransferMethod.remote_url && file.progress === 100
+
+  return localFileUploaded || fromUrlFileUploaded
+}
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index ac83e69ee0..f08155c7b0 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -20,6 +20,9 @@ import type { StartNodeType } from '../nodes/start/types'
 import { TransferMethod } from '../../base/text-generation/types'
 import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import {
+  getProcessedInputs,
+} from '@/app/components/base/chat/chat/utils'
 
 type Props = {
   onRun: () => void
@@ -76,8 +79,8 @@ const InputsPanel = ({ onRun }: Props) => {
 
   const doRun = useCallback(() => {
     onRun()
-    handleRun({ inputs, files })
-  }, [files, handleRun, inputs, onRun])
+    handleRun({ inputs: getProcessedInputs(inputs, variables as any), files })
+  }, [files, handleRun, inputs, onRun, variables])
 
   const canRun = useMemo(() => {
     if (files?.some(item => (item.transfer_method as any) === TransferMethod.local_file && !item.upload_file_id))