feat: handle value picker in body file selector

web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx

@@ -8,6 +8,7 @@ import {
 } from '@remixicon/react'
 import produce from 'immer'
 import { useStoreApi } from 'reactflow'
+import RemoveButton from '../remove-button'
 import VarReferencePopup from './var-reference-popup'
 import { getNodeInfoById, isConversationVar, isENV, isSystemVar } from './utils'
 import ConstantField from './constant-field'
@@ -52,6 +53,8 @@ type Props = {
   isAddBtnTrigger?: boolean
   schema?: Partial<CredentialFormSchema>
   valueTypePlaceHolder?: string
+  isInTable?: boolean
+  onRemove?: () => void
 }
 
 const VarReferencePicker: FC<Props> = ({
@@ -71,6 +74,8 @@ const VarReferencePicker: FC<Props> = ({
   isAddBtnTrigger,
   schema,
   valueTypePlaceHolder,
+  isInTable,
+  onRemove,
 }) => {
   const { t } = useTranslation()
   const store = useStoreApi()
@@ -243,14 +248,15 @@ const VarReferencePicker: FC<Props> = ({
           if (readonly)
             return
           !isConstant ? setOpen(!open) : setControlFocus(Date.now())
-        }} className='!flex'>
+        }} className='!flex group/picker-trigger-wrap relative'>
+          <>
             {isAddBtnTrigger
               ? (
                 <div>
                   <AddButton onClick={() => { }}></AddButton>
                 </div>
               )
-            : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-gray-100 border')}>
+              : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-gray-100 border', isInTable && 'bg-transparent border-none')}>
                 {isSupportConstantValue
                   ? <div onClick={(e) => {
                     e.stopPropagation()
@@ -332,7 +338,7 @@ const VarReferencePicker: FC<Props> = ({
 
                     </VarPickerWrap>
                   )}
-              {(hasValue && !readonly) && (<div
+                {(hasValue && !readonly && !isInTable) && (<div
                   className='invisible group-hover/wrap:visible absolute h-5 right-1 top-[50%] translate-y-[-50%] group p-1 rounded-md hover:bg-black/5 cursor-pointer'
                   onClick={handleClearVar}
                 >
@@ -346,6 +352,13 @@ const VarReferencePicker: FC<Props> = ({
                   />
                 )}
               </div>)}
+            {!readonly && isInTable && (
+              <RemoveButton
+                className='group-hover/picker-trigger-wrap:block hidden absolute right-1 top-0.5'
+                onClick={() => onRemove?.()}
+              />
+            )}
+          </>
         </WrapElem>
         <PortalToFollowElemContent style={{
           zIndex: 100,

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx

@@ -54,7 +54,7 @@ const KeyValueItem: FC<Props> = ({
       })
       onChange(newPayload)
     }
-  }, [onChange, onAdd, isLastItem, payload])
+  }, [onChange, payload])
 
   const filterOnlyFileVariable = (varPayload: Var) => {
     return [VarType.file, VarType.arrayFile].includes(varPayload.type)
@@ -109,6 +109,8 @@ const KeyValueItem: FC<Props> = ({
               value={payload.file || []}
               onChange={handleChange('file')}
               filterVar={filterOnlyFileVariable}
+              isInTable
+              onRemove={onRemove}
             />
           )
           : (