pipeline header

web/app/components/workflow/nodes/knowledge-base/components/input-variable.tsx

@@ -1,12 +1,18 @@
 import { memo } from 'react'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
+import type { ValueSelector } from '@/app/components/workflow/types'
 
-const InputVariable = () => {
-  const handleChange = () => {
-    console.log('')
-  }
-
+type InputVariableProps = {
+  nodeId: string
+  inputVariable?: string[]
+  onInputVariableChange: (inputVariable: string | ValueSelector) => void
+}
+const InputVariable = ({
+  nodeId,
+  inputVariable = [],
+  onInputVariableChange,
+}: InputVariableProps) => {
   return (
     <Field
       fieldTitleProps={{
@@ -15,10 +21,10 @@ const InputVariable = () => {
       }}
     >
       <VarReferencePicker
-        nodeId={''}
+        nodeId={nodeId}
         isShowNodeName
-        value={[]}
-        onChange={handleChange}
+        value={inputVariable}
+        onChange={onInputVariableChange}
         readonly={false}
       />
     </Field>

web/app/components/workflow/nodes/knowledge-base/hooks/use-config.ts

@@ -3,6 +3,7 @@ import {
 } from 'react'
 import { useStoreApi } from 'reactflow'
 import { useNodeDataUpdate } from '@/app/components/workflow/hooks'
+import type { ValueSelector } from '@/app/components/workflow/types'
 import type {
   ChunkStructureEnum,
   HybridSearchModeEnum,
@@ -147,6 +148,12 @@ export const useConfig = (id: string) => {
     })
   }, [getNodeData, handleNodeDataUpdate])
 
+  const handleInputVariableChange = useCallback((inputVariable: string | ValueSelector) => {
+    handleNodeDataUpdate({
+      index_chunk_variable_selector: Array.isArray(inputVariable) ? inputVariable : [],
+    })
+  }, [handleNodeDataUpdate])
+
   return {
     handleChunkStructureChange,
     handleIndexMethodChange,
@@ -159,5 +166,6 @@ export const useConfig = (id: string) => {
     handleTopKChange,
     handleScoreThresholdChange,
     handleScoreThresholdEnabledChange,
+    handleInputVariableChange,
   }
 }

web/app/components/workflow/nodes/knowledge-base/panel.tsx

@@ -35,12 +35,17 @@ const Panel: FC<NodePanelProps<KnowledgeBaseNodeType>> = ({
     handleTopKChange,
     handleScoreThresholdChange,
     handleScoreThresholdEnabledChange,
+    handleInputVariableChange,
   } = useConfig(id)
 
   return (
     <div>
       <GroupWithBox boxProps={{ withBorderBottom: true }}>
-        <InputVariable />
+        <InputVariable
+          nodeId={id}
+          inputVariable={data.index_chunk_variable_selector}
+          onInputVariableChange={handleInputVariableChange}
+        />
       </GroupWithBox>
       <Group
         className='py-3'