Feat/attachments (#9526)

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

web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -10,6 +10,7 @@ import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
 import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
+import Badge from '@/app/components/base/badge'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 
 type Props = {
@@ -19,6 +20,7 @@ type Props = {
   onRemove?: () => void
   rightContent?: JSX.Element
   varKeys?: string[]
+  showLegacyBadge?: boolean
 }
 
 const VarItem: FC<Props> = ({
@@ -28,6 +30,7 @@ const VarItem: FC<Props> = ({
   onRemove = () => { },
   rightContent,
   varKeys = [],
+  showLegacyBadge = false,
 }) => {
   const { t } = useTranslation()
 
@@ -50,6 +53,12 @@ const VarItem: FC<Props> = ({
         {payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
           <div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div>
         </>)}
+        {showLegacyBadge && (
+          <Badge
+            text='LEGACY'
+            className='shrink-0 border-text-accent-secondary text-text-accent-secondary'
+          />
+        )}
       </div>
       <div className='shrink-0 ml-2 flex items-center'>
         {rightContent || (<>
@@ -79,6 +88,7 @@ const VarItem: FC<Props> = ({
         isShowEditVarModal && (
           <ConfigVarModal
             isShow
+            supportFile
             payload={payload}
             onClose={hideEditVarModal}
             onConfirm={handlePayloadChange}