Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

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