fix: http attr key rerender

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

@@ -69,7 +69,7 @@ const KeyValueList: FC<Props> = ({
       {
         list.map((item, index) => (
           <KeyValueItem
-            key={item.key + index}
+            key={item.id}
             nodeId={nodeId}
             payload={item}
             onChange={handleChange(index)}

web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts

@@ -1,16 +1,30 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useBoolean } from 'ahooks'
+import { uniqueId } from 'lodash'
 import type { KeyValue } from '../types'
 
+const UNIQUE_ID_PREFIX = 'key-value-'
 const strToKeyValueList = (value: string) => {
   return value.split('\n').map((item) => {
     const [key, value] = item.split(':')
-    return { key: key.trim(), value: value?.trim() }
+    return {
+      id: uniqueId(UNIQUE_ID_PREFIX),
+      key: key.trim(),
+      value: value?.trim(),
+    }
   })
 }
 
 const useKeyValueList = (value: string, onChange: (value: string) => void, noFilter?: boolean) => {
-  const [list, setList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  const [list, doSetList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  const setList = (l: KeyValue[]) => {
+    doSetList(l.map((item) => {
+      return {
+        ...item,
+        id: item.id || uniqueId(UNIQUE_ID_PREFIX),
+      }
+    }))
+  }
   useEffect(() => {
     if (noFilter)
       return
@@ -21,8 +35,12 @@ const useKeyValueList = (value: string, onChange: (value: string) => void, noFil
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [list, noFilter])
   const addItem = useCallback(() => {
-    setList(prev => [...prev, { key: '', value: '' }])
+    setList([...list, {
-  }, [])
+      id: uniqueId(UNIQUE_ID_PREFIX),
+      key: '',
+      value: '',
+    }])
+  }, [list])
 
   const [isKeyValueEdit, {
     toggle: toggleIsKeyValueEdit,

web/app/components/workflow/nodes/http/types.ts

@@ -18,6 +18,7 @@ export enum BodyType {
 }
 
 export type KeyValue = {
+  id?: string
   key: string
   value: string
 }

web/app/components/workflow/nodes/tool/panel.tsx

@@ -28,6 +28,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
     inputs,
     toolInputVarSchema,
     setInputVar,
+    handleOnVarOpen,
     filterVar,
     toolSettingSchema,
     toolSettingValue,
@@ -83,6 +84,7 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
                 onChange={setInputVar}
                 filterVar={filterVar}
                 isSupportConstantValue
+                onOpen={handleOnVarOpen}
               />
             </Field>
           )}

web/app/components/workflow/nodes/tool/use-config.ts

@@ -94,10 +94,19 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     })
   }, [inputs, setInputs])
 
-  const filterVar = useCallback((varPayload: Var) => {
+  const [currVarIndex, setCurrVarIndex] = useState(-1)
-    return [VarVarType.string, VarVarType.number].includes(varPayload.type)
+  const currVarType = toolInputVarSchema[currVarIndex]?._type
+  const handleOnVarOpen = useCallback((index: number) => {
+    setCurrVarIndex(index)
   }, [])
 
+  const filterVar = useCallback((varPayload: Var) => {
+    if (currVarType)
+      return varPayload.type === currVarType
+
+    return varPayload.type !== VarVarType.arrayFile
+  }, [currVarType])
+
   const isLoading = currTool && (isBuiltIn ? !currCollection : false)
 
   // single run
@@ -144,7 +153,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
 
   const varInputs = getInputVars(hadVarParams.map((p) => {
     if (p.type === VarType.variable)
-      return `#${[p.value as ValueSelector].join('.')}#`
+      return `{{#${[p.value as ValueSelector].join('.')}#}}`
 
     return p.value as string
   }))
@@ -176,6 +185,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
     setToolSettingValue,
     toolInputVarSchema,
     setInputVar,
+    handleOnVarOpen,
     filterVar,
     currCollection,
     isShowAuthBtn,