From acf6872a509a6dbe0b9e749f9ecc6977f70df000 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Wed, 30 Apr 2025 16:54:36 +0800
Subject: [PATCH] fix: variable selector

---
 .../field/variable-or-constant-input.tsx      | 32 ++++++++++++++-
 .../components/field/variable-selector.tsx    | 41 +++++++++++++++++++
 .../workflow/nodes/data-source/panel.tsx      | 17 ++++++--
 3 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/base/form/components/field/variable-selector.tsx

diff --git a/web/app/components/base/form/components/field/variable-or-constant-input.tsx b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
index 7092275519..a07e356fa2 100644
--- a/web/app/components/base/form/components/field/variable-or-constant-input.tsx
+++ b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
@@ -1,8 +1,11 @@
+import type { ChangeEvent } from 'react'
 import { useState } from 'react'
 import { RiEditLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import SegmentedControl from '@/app/components/base/segmented-control'
 import { VariableX } from '@/app/components/base/icons/src/vender/workflow'
+import Input from '@/app/components/base/input'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import type { LabelProps } from '../label'
 import Label from '../label'
 
@@ -22,12 +25,10 @@ const VariableOrConstantInputField = ({
   const options = [
     {
       Icon: VariableX,
-      text: '',
       value: 'variable',
     },
     {
       Icon: RiEditLine,
-      text: '',
       value: 'constant',
     },
   ]
@@ -36,6 +37,14 @@ const VariableOrConstantInputField = ({
     setVariableType(value)
   }
 
+  const handleVariableValueChange = () => {
+    console.log('Variable value changed')
+  }
+
+  const handleConstantValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    console.log('Constant value changed:', e.target.value)
+  }
+
   return (
     <div className={cn('flex flex-col gap-y-0.5', className)}>
       <Label
@@ -50,6 +59,25 @@ const VariableOrConstantInputField = ({
           onChange={handleVariableOrConstantChange as any}
           options={options as any}
         />
+        {
+          variableType === 'variable' && (
+            <VarReferencePicker
+              className='grow'
+              nodeId=''
+              readonly={false}
+              value={[]}
+              onChange={handleVariableValueChange}
+            />
+          )
+        }
+        {
+          variableType === 'constant' && (
+            <Input
+              className='ml-1'
+              onChange={handleConstantValueChange}
+            />
+          )
+        }
       </div>
     </div>
   )
diff --git a/web/app/components/base/form/components/field/variable-selector.tsx b/web/app/components/base/form/components/field/variable-selector.tsx
new file mode 100644
index 0000000000..3c4042b118
--- /dev/null
+++ b/web/app/components/base/form/components/field/variable-selector.tsx
@@ -0,0 +1,41 @@
+import cn from '@/utils/classnames'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import type { LabelProps } from '../label'
+import Label from '../label'
+
+type VariableOrConstantInputFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  className?: string
+}
+
+const VariableOrConstantInputField = ({
+  className,
+  label,
+  labelOptions,
+}: VariableOrConstantInputFieldProps) => {
+  const handleVariableValueChange = () => {
+    console.log('Variable value changed')
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={'variable-or-constant'}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <div className='flex items-center'>
+        <VarReferencePicker
+          className='grow'
+          nodeId=''
+          readonly={false}
+          value={[]}
+          onChange={handleVariableValueChange}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default VariableOrConstantInputField
diff --git a/web/app/components/workflow/nodes/data-source/panel.tsx b/web/app/components/workflow/nodes/data-source/panel.tsx
index 0d6d95586f..7083dfcc3f 100644
--- a/web/app/components/workflow/nodes/data-source/panel.tsx
+++ b/web/app/components/workflow/nodes/data-source/panel.tsx
@@ -3,14 +3,25 @@ import { memo } from 'react'
 import type { DataSourceNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import VariableOrConstantInputField from '@/app/components/base/form/components/field/variable-or-constant-input'
+import VariableSelector from '@/app/components/base/form/components/field/variable-selector'
 
 const Panel: FC<NodePanelProps<DataSourceNodeType>> = () => {
   return (
     <div className='mb-2 mt-2 space-y-4 px-4'>
       datasource
-      <VariableOrConstantInputField
-        label='Parent maximum chunk length'
-      />
+      <div className='space-y-1'>
+        <VariableSelector
+          className='py-1'
+          label='Child delimiter'
+          labelOptions={{
+            isRequired: true,
+          }}
+        />
+        <VariableOrConstantInputField
+          className='py-1'
+          label='Parent maximum chunk length'
+        />
+      </div>
     </div>
   )
 }