From 54133dfbdefb9fbc938ef57c6dd0b79c1873bce0 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Sep 2024 15:39:25 +0800
Subject: [PATCH] files in log

---
 .../base/file-uploader/file-list-in-log.tsx   | 86 +++++++++++++++++++
 .../components/base/file-uploader/utils.ts    | 10 +++
 .../nodes/_base/components/editor/base.tsx    |  9 ++
 .../components/editor/code-editor/index.tsx   | 15 +++-
 4 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/base/file-uploader/file-list-in-log.tsx

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
new file mode 100644
index 0000000000..9c28fc0eaa
--- /dev/null
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+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: FileEntity[]
+}
+
+const FileListInLog = ({ fileList }: Props) => {
+  const [expanded, setExpanded] = useState(false)
+
+  if (!fileList.length)
+    return null
+  return (
+    <div className={cn('border-t border-divider-subtle px-3 py-2', expanded && 'py-3')}>
+      <div className='flex justify-between gap-1'>
+        {expanded && (
+          <div></div>
+        )}
+        {!expanded && (
+          <div className='flex'>
+            {fileList.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'>DETAIL</div>}
+          <RiArrowRightSLine className={cn('w-4 h-4 text-text-tertiary', expanded && 'rotate-90')} />
+        </div>
+      </div>
+      {expanded && (
+        <div className='flex flex-col gap-1'>
+          {fileList.map(file => (
+            <FileItem
+              key={file.id}
+              file={file}
+              showDeleteAction={false}
+              showDownloadAction
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default FileListInLog
diff --git a/web/app/components/base/file-uploader/utils.ts b/web/app/components/base/file-uploader/utils.ts
index 178f070daa..a51df6cb89 100644
--- a/web/app/components/base/file-uploader/utils.ts
+++ b/web/app/components/base/file-uploader/utils.ts
@@ -1,4 +1,5 @@
 import mime from 'mime'
+import { flatten } from 'lodash-es'
 import { FileAppearanceTypeEnum } from './types'
 import type { FileEntity } from './types'
 import { upload } from '@/service/base'
@@ -148,3 +149,12 @@ export const getSupportFileExtensionList = (allowFileTypes: string[], allowFileE
 export const isAllowedFileExtension = (fileName: string, fileMimetype: string, allowFileTypes: string[], allowFileExtensions: string[]) => {
   return getSupportFileExtensionList(allowFileTypes, allowFileExtensions).includes(getFileExtension(fileName, fileMimetype).toUpperCase())
 }
+
+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]
+    return undefined
+  }).filter(Boolean)).filter(item => item?.model_identity === '__dify__file__')
+  return getProcessedFilesFromResponse(originalFiles)
+}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 12b77c6499..e34c84fed8 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -11,6 +11,8 @@ import {
 } from '@/app/components/base/icons/src/vender/line/files'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import FileListInLog from '@/app/components/base/file-uploader/file-list-in-log'
 
 type Props = {
   className?: string
@@ -21,6 +23,8 @@ type Props = {
   value: string
   isFocus: boolean
   isInNode?: boolean
+  fileList?: FileEntity[]
+  showFileList?: boolean
 }
 
 const Base: FC<Props> = ({
@@ -32,6 +36,8 @@ const Base: FC<Props> = ({
   value,
   isFocus,
   isInNode,
+  fileList = [],
+  showFileList,
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   const {
@@ -87,6 +93,9 @@ const Base: FC<Props> = ({
             {children}
           </div>
         </PromptEditorHeightResizeWrap>
+        {showFileList && fileList.length > 0 && (
+          <FileListInLog fileList={fileList} />
+        )}
       </div>
     </Wrap>
   )
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
index 8f77f96bde..21e0d142e5 100644
--- 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
@@ -1,10 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import Editor, { loader } from '@monaco-editor/react'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Base from '../base'
 import cn from '@/utils/classnames'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import {
+  getFilesInLogs,
+} from '@/app/components/base/file-uploader/utils'
 
 import './style.css'
 
@@ -27,6 +30,7 @@ export type Props = {
   onMount?: (editor: any, monaco: any) => void
   noWrapper?: boolean
   isExpand?: boolean
+  showFileList?: boolean
 }
 
 const languageMap = {
@@ -58,6 +62,7 @@ const CodeEditor: FC<Props> = ({
   onMount,
   noWrapper,
   isExpand,
+  showFileList,
 }) => {
   const [isFocus, setIsFocus] = React.useState(false)
   const [isMounted, setIsMounted] = React.useState(false)
@@ -69,6 +74,12 @@ const CodeEditor: FC<Props> = ({
     valueRef.current = value
   }, [value])
 
+  const fileList = useMemo(() => {
+    if (typeof value === 'object')
+      return getFilesInLogs(value)
+    return []
+  }, [value])
+
   const editorRef = useRef<any>(null)
   const resizeEditorToContent = () => {
     if (editorRef.current) {
@@ -189,6 +200,8 @@ const CodeEditor: FC<Props> = ({
             isFocus={isFocus && !readOnly}
             minHeight={minHeight}
             isInNode={isInNode}
+            fileList={fileList}
+            showFileList={showFileList}
           >
             {main}
           </Base>