input field in datasource

web/app/components/workflow/nodes/data-source/default.ts

@@ -11,6 +11,7 @@ const metaData = genNodeMetaData({
 const nodeDefault: NodeDefault<DataSourceNodeType> = {
   metaData,
   defaultValue: {
+    variables: [],
     datasource_parameters: {},
     datasource_configurations: {},
   },

web/app/components/workflow/nodes/data-source/hooks/use-config.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 import { useStoreApi } from 'reactflow'
 import { useNodeDataUpdate } from '@/app/components/workflow/hooks'
+import type { InputVar } from '@/models/pipeline'
 import type { DataSourceNodeType } from '../types'
 
 export const useConfig = (id: string) => {
@@ -28,7 +29,16 @@ export const useConfig = (id: string) => {
     })
   }, [handleNodeDataUpdate, getNodeData])
 
+  const handleInputFieldVariablesChange = useCallback((variables: InputVar[]) => {
+    const nodeData = getNodeData()
+    handleNodeDataUpdate({
+      ...nodeData?.data,
+      variables,
+    })
+  }, [handleNodeDataUpdate, getNodeData])
+
   return {
     handleFileExtensionsChange,
+    handleInputFieldVariablesChange,
   }
 }

web/app/components/workflow/nodes/data-source/panel.tsx

@@ -1,25 +1,79 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
+import { RiAddLine } from '@remixicon/react'
 import type { DataSourceNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import { BoxGroupField } from '@/app/components/workflow/nodes/_base/components/layout'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import TagInput from '@/app/components/base/tag-input'
+import FieldList from '@/app/components/rag-pipeline/components/input-field/field-list/field-list-container'
+import { useFieldList } from '@/app/components/rag-pipeline/components/input-field/field-list/hooks'
+import InputFieldEditor from '@/app/components/rag-pipeline/components/input-field/editor'
+import { useNodesReadOnly } from '@/app/components/workflow/hooks'
 import { useConfig } from './hooks/use-config'
 import { OUTPUT_VARIABLES_MAP } from './constants'
+import ActionButton from '@/app/components/base/action-button'
 
 const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
   const { t } = useTranslation()
+  const { nodesReadOnly } = useNodesReadOnly()
   const {
+    variables,
     provider_type,
     fileExtensions = [],
   } = data
-  const { handleFileExtensionsChange } = useConfig(id)
+  const {
+    handleInputFieldVariablesChange,
+    handleFileExtensionsChange,
+  } = useConfig(id)
   const isLocalFile = provider_type === 'local_file'
+  const {
+    inputFields,
+    handleListSortChange,
+    handleRemoveField,
+    handleOpenInputFieldEditor,
+    showInputFieldEditor,
+    editingField,
+    handleSubmitField,
+    handleCancelInputFieldEditor,
+  } = useFieldList(variables, handleInputFieldVariablesChange)
 
   return (
     <div >
+      {
+        !isLocalFile && (
+          <BoxGroupField
+            boxGroupProps={{
+              boxProps: { withBorderBottom: true },
+            }}
+            fieldProps={{
+              fieldTitleProps: {
+                title: t('workflow.nodes.common.inputVars'),
+                operation: (
+                  <ActionButton
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleOpenInputFieldEditor()
+                    }}
+                  >
+                    <RiAddLine className='h-4 w-4' />
+                  </ActionButton>
+                ),
+              },
+              supportCollapse: true,
+            }}
+          >
+            <FieldList
+              inputFields={inputFields}
+              readonly={nodesReadOnly}
+              onListSortChange={handleListSortChange}
+              onRemoveField={handleRemoveField}
+              onEditField={handleOpenInputFieldEditor}
+            />
+          </BoxGroupField>
+        )
+      }
       {
         isLocalFile && (
           <BoxGroupField
@@ -64,6 +118,14 @@ const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
           )
         }
       </OutputVars>
+      {showInputFieldEditor && (
+        <InputFieldEditor
+          show={showInputFieldEditor}
+          initialData={editingField}
+          onSubmit={handleSubmitField}
+          onClose={handleCancelInputFieldEditor}
+        />
+      )}
     </div>
   )
 }