Feat: sync input variable names to main() function (#21667)

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

@@ -65,10 +65,11 @@ const VarList: FC<Props> = ({
   }, [list, onVarNameChange, onChange])
 
   const handleVarReferenceChange = useCallback((index: number) => {
-    return (value: ValueSelector | string, varKindType: VarKindType) => {
+    return (value: ValueSelector | string, varKindType: VarKindType, varInfo?: Var) => {
       const newList = produce(list, (draft) => {
         if (!isSupportConstantValue || varKindType === VarKindType.variable) {
           draft[index].value_selector = value as ValueSelector
+          draft[index].value_type = varInfo?.type
           if (isSupportConstantValue)
             draft[index].variable_type = VarKindType.variable
 

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

@@ -14,6 +14,7 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
 import type { NodePanelProps } from '@/app/components/workflow/types'
+import SyncButton from '@/app/components/base/button/sync-button'
 const i18nPrefix = 'workflow.nodes.code'
 
 const codeLanguages = [
@@ -40,6 +41,7 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
     handleVarListChange,
     handleAddVariable,
     handleRemoveVariable,
+    handleSyncFunctionSignature,
     handleCodeChange,
     handleCodeLanguageChange,
     handleVarsChange,
@@ -68,7 +70,12 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.inputVars`)}
           operations={
-            !readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
+            !readOnly ? (
+              <div className="flex gap-2">
+                <SyncButton popupContent={t(`${i18nPrefix}.syncFunctionSignature`)} onClick={handleSyncFunctionSignature} />
+                <AddButton onClick={handleAddVariable} />
+              </div>
+            ) : undefined
           }
         >
           <VarList

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

@@ -84,6 +84,65 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     setInputs(newInputs)
   }, [allLanguageDefault, inputs, setInputs])
 
+  const handleSyncFunctionSignature = useCallback(() => {
+      const generateSyncSignatureCode = (code: string) => {
+      let mainDefRe
+      let newMainDef
+      if (inputs.code_language === CodeLanguage.javascript) {
+        mainDefRe = /function\s+main\b\s*\([\s\S]*?\)/g
+        newMainDef = 'function main({{var_list}})'
+        let param_list = inputs.variables?.map(item => item.variable).join(', ') || ''
+        param_list = param_list ? `{${param_list}}` : ''
+        newMainDef = newMainDef.replace('{{var_list}}', param_list)
+      }
+
+      else if (inputs.code_language === CodeLanguage.python3) {
+        mainDefRe = /def\s+main\b\s*\([\s\S]*?\)/g
+        const param_list = []
+        for (const item of inputs.variables) {
+          let param = item.variable
+          let param_type = ''
+          switch (item.value_type) {
+            case VarType.string:
+              param_type = ': str'
+              break
+            case VarType.number:
+              param_type = ': float'
+              break
+            case VarType.object:
+              param_type = ': dict'
+              break
+            case VarType.array:
+              param_type = ': list'
+              break
+            case VarType.arrayNumber:
+              param_type = ': list[float]'
+              break
+            case VarType.arrayString:
+              param_type = ': list[str]'
+              break
+            case VarType.arrayObject:
+              param_type = ': list[dict]'
+              break
+          }
+          param += param_type
+          param_list.push(`${param}`)
+        }
+
+        newMainDef = `def main(${param_list.join(', ')})`
+      }
+      else { return code }
+
+      const newCode = code.replace(mainDefRe, newMainDef)
+      return newCode
+    }
+
+    const newInputs = produce(inputs, (draft) => {
+      draft.code = generateSyncSignatureCode(draft.code)
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   const {
     handleVarsChange,
     handleAddVariable: handleAddOutputVariable,
@@ -119,6 +178,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     handleVarListChange,
     handleAddVariable,
     handleRemoveVariable,
+    handleSyncFunctionSignature,
     handleCodeChange,
     handleCodeLanguageChange,
     handleVarsChange,

web/app/components/workflow/types.ts

@@ -136,6 +136,7 @@ export type Variable = {
     variable: string
   }
   value_selector: ValueSelector
+  value_type?: VarType
   variable_type?: VarKindType
   value?: string
   options?: string[]