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

langgenius · Dec 5, 2024 · 09f565f · 09f565f
2 parents 4dad3de + 2bddfec
commit 09f565f
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 47 deletions.
diff --git a/web/app/components/app/text-generate/item/result-tab.tsx b/web/app/components/app/text-generate/item/result-tab.tsx
@@ -8,7 +8,7 @@ import { Markdown } from '@/app/components/base/markdown'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
-import { FileList } from '@/app/components/base/file-uploader'
+import FileListInLog from '@/app/components/base/file-uploader/file-list-in-log'
 
 const ResultTab = ({
   data,
@@ -58,11 +58,11 @@ const ResultTab = ({
           <>
             {data?.resultText && <Markdown content={data?.resultText || ''} />}
             {!!data?.files?.length && (
-              <FileList
-                files={data?.files}
-                showDeleteAction={false}
-                showDownloadAction
-                canPreview
+              <FileListInLog
+                noBorder
+                noPadding
+                isExpanded
+                fileList={data.files as any[]}
               />
             )}
           </>

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
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowRightSLine } from '@remixicon/react'
 import FileImageRender from './file-image-render'
@@ -13,23 +13,36 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
 type Props = {
-  fileList: FileEntity[]
+  fileList: {
+    varName: string
+    list: FileEntity[]
+  }[]
+  isExpanded?: boolean
+  noBorder?: boolean
+  noPadding?: boolean
 }
 
-const FileListInLog = ({ fileList }: Props) => {
+const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPadding = false }: Props) => {
   const { t } = useTranslation()
-  const [expanded, setExpanded] = useState(false)
+  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('border-t border-divider-subtle px-3 py-2', expanded && 'py-3')}>
+    <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='text-text-tertiary system-xs-medium-uppercase'>{t('appLog.runDetail.fileListLabel')}</div>
+          <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'>
-            {fileList.map((file) => {
+            {fullList.map((file) => {
               const { id, name, type, supportFileType, base64Url, url } = file
               const isImageFile = supportFileType === SupportUploadFileTypes.image
               return (
@@ -69,14 +82,19 @@ const FileListInLog = ({ fileList }: Props) => {
         </div>
       </div>
       {expanded && (
-        <div className='flex flex-col gap-1'>
-          {fileList.map(file => (
-            <FileItem
-              key={file.id}
-              file={file}
-              showDeleteAction={false}
-              showDownloadAction
-            />
+        <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
+                />
+              ))}
+            </div>
           ))}
         </div>
       )}

diff --git a/web/app/components/base/file-uploader/utils.ts b/web/app/components/base/file-uploader/utils.ts
@@ -1,5 +1,4 @@
 import mime from 'mime'
-import { flatten } from 'lodash-es'
 import { FileAppearanceTypeEnum } from './types'
 import type { FileEntity } from './types'
 import { upload } from '@/service/base'
@@ -158,12 +157,22 @@ export const isAllowedFileExtension = (fileName: string, fileMimetype: string, a
 }
 
 export const getFilesInLogs = (rawData: any) => {
-  const originalFiles = flatten(Object.keys(rawData || {}).map((key) => {
-    if (typeof rawData[key] === 'object' || Array.isArray(rawData[key]))
-      return rawData[key]
+  const result = Object.keys(rawData || {}).map((key) => {
+    if (typeof rawData[key] === 'object' && rawData[key].dify_model_identity === '__dify__file__') {
+      return {
+        varName: key,
+        list: getProcessedFilesFromResponse([rawData[key]]),
+      }
+    }
+    if (Array.isArray(rawData[key]) && rawData[key].some(item => item.dify_model_identity === '__dify__file__')) {
+      return {
+        varName: key,
+        list: getProcessedFilesFromResponse(rawData[key]),
+      }
+    }
     return undefined
-  }).filter(Boolean)).filter(item => item?.dify_model_identity === '__dify__file__')
-  return getProcessedFilesFromResponse(originalFiles)
+  }).filter(Boolean)
+  return result
 }
 
 export const fileIsUploaded = (file: FileEntity) => {

diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
@@ -21,7 +21,7 @@ import { sleep } from '@/utils'
 import type { SiteInfo } from '@/models/share'
 import { TEXT_GENERATION_TIMEOUT_MS } from '@/config'
 import {
-  getProcessedFilesFromResponse,
+  getFilesInLogs,
 } from '@/app/components/base/file-uploader/utils'
 
 export type IResultProps = {
@@ -288,7 +288,7 @@ const Result: FC<IResultProps> = ({
             }
             setWorkflowProcessData(produce(getWorkflowProcessData()!, (draft) => {
               draft.status = WorkflowRunningStatus.Succeeded
-              draft.files = getProcessedFilesFromResponse(data.files || [])
+              draft.files = getFilesInLogs(data.outputs || []) as any[]
             }))
             if (!data.outputs) {
               setCompletionRes('')

diff --git a/web/app/components/workflow/hooks/use-workflow-run.ts b/web/app/components/workflow/hooks/use-workflow-run.ts
@@ -24,7 +24,7 @@ import {
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
 import {
-  getProcessedFilesFromResponse,
+  getFilesInLogs,
 } from '@/app/components/base/file-uploader/utils'
 
 export const useWorkflowRun = () => {
@@ -221,7 +221,7 @@ export const useWorkflowRun = () => {
             draft.result = {
               ...draft.result,
               ...data,
-              files: getProcessedFilesFromResponse(data.files || []),
+              files: getFilesInLogs(data.outputs),
             } as any
             if (isStringOutput) {
               draft.resultTabActive = true

diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -27,7 +27,10 @@ type Props = {
   isInNode?: boolean
   onGenerated?: (prompt: string) => void
   codeLanguages?: CodeLanguage
-  fileList?: FileEntity[]
+  fileList?: {
+    varName: string
+    list: FileEntity[]
+  }[]
   showFileList?: boolean
   showCodeGenerator?: boolean
 }

diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -208,7 +208,7 @@ const CodeEditor: FC<Props> = ({
             isInNode={isInNode}
             onGenerated={onGenerated}
             codeLanguages={language}
-            fileList={fileList}
+            fileList={fileList as any}
             showFileList={showFileList}
             showCodeGenerator={showCodeGenerator}
           >

diff --git a/web/app/components/workflow/run/output-panel.tsx b/web/app/components/workflow/run/output-panel.tsx
@@ -87,7 +87,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
             language={CodeLanguage.json}
             value={outputs}
             isJSONStringifyBeauty
-            height={height ? height - 50 - 16 : undefined}
+            height={height ? (height - 16) / 2 : undefined}
           />
         </div>
       )}

diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
@@ -5,15 +5,14 @@ import { ImageIndentLeft } from '@/app/components/base/icons/src/vender/line/edi
 import { Markdown } from '@/app/components/base/markdown'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import StatusContainer from '@/app/components/workflow/run/status-container'
-import { FileList } from '@/app/components/base/file-uploader'
-import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import FileListInLog from '@/app/components/base/file-uploader/file-list-in-log'
 
 type ResultTextProps = {
   isRunning?: boolean
   outputs?: any
   error?: string
   onClick?: () => void
-  allFiles?: FileEntity[]
+  allFiles?: any[]
 }
 
 const ResultText: FC<ResultTextProps> = ({
@@ -50,17 +49,18 @@ const ResultText: FC<ResultTextProps> = ({
         </div>
       )}
       {(outputs || !!allFiles?.length) && (
-        <div className='px-4 py-2'>
-          {outputs && <Markdown content={outputs} />}
+        <>
+          <div className='px-4 py-2'>
+            {outputs && <Markdown content={outputs} />}
+          </div>
           {!!allFiles?.length && (
-            <FileList
-              files={allFiles}
-              showDeleteAction={false}
-              showDownloadAction
-              canPreview
+            <FileListInLog
+              noBorder
+              isExpanded
+              fileList={allFiles}
             />
           )}
-        </div>
+        </>
       )}
     </div>
   )

diff --git a/web/i18n/en-US/app-log.ts b/web/i18n/en-US/app-log.ts
@@ -79,7 +79,7 @@ const translation = {
   runDetail: {
     title: 'Conversation Log',
     workflowTitle: 'Log Detail',
-    fileListLabel: 'File List',
+    fileListLabel: 'File Details',
     fileListDetail: 'Detail',
   },
   promptLog: 'Prompt Log',

diff --git a/web/i18n/zh-Hans/app-log.ts b/web/i18n/zh-Hans/app-log.ts
@@ -79,7 +79,7 @@ const translation = {
   runDetail: {
     title: '对话日志',
     workflowTitle: '日志详情',
-    fileListLabel: '文件列表',
+    fileListLabel: '文件详情',
     fileListDetail: '详情',
   },
   promptLog: 'Prompt 日志',