Feat/attachments (#9526)

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

web/app/components/workflow/run/result-text.tsx

@@ -4,12 +4,16 @@ import { useTranslation } from 'react-i18next'
 import { ImageIndentLeft } from '@/app/components/base/icons/src/vender/line/editor'
 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'
 
 type ResultTextProps = {
   isRunning?: boolean
   outputs?: any
   error?: string
   onClick?: () => void
+  allFiles?: FileEntity[]
 }
 
 const ResultText: FC<ResultTextProps> = ({
@@ -17,10 +21,11 @@ const ResultText: FC<ResultTextProps> = ({
   outputs,
   error,
   onClick,
+  allFiles,
 }) => {
   const { t } = useTranslation()
   return (
-    <div className='bg-gray-50 py-2'>
+    <div className='bg-background-section-burn py-2'>
       {isRunning && !outputs && (
         <div className='pt-4 pl-[26px]'>
           <LoadingAnim type='text' />
@@ -28,9 +33,9 @@ const ResultText: FC<ResultTextProps> = ({
       )}
       {!isRunning && error && (
         <div className='px-4'>
-          <div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs'>
-            <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
-          </div>
+          <StatusContainer status='failed'>
+            {error}
+          </StatusContainer>
         </div>
       )}
       {!isRunning && !outputs && !error && (
@@ -47,6 +52,14 @@ const ResultText: FC<ResultTextProps> = ({
       {outputs && (
         <div className='px-4 py-2'>
           <Markdown content={outputs} />
+          {!!allFiles?.length && (
+            <FileList
+              files={allFiles}
+              showDeleteAction={false}
+              showDownloadAction
+              canPreview
+            />
+          )}
         </div>
       )}
     </div>