fix(workflow): Implement automatic variable addition from opening statement to start node (#9450)

web/app/components/workflow/features.tsx

@@ -4,16 +4,21 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
+import { useNodes } from 'reactflow'
 import { useStore } from './store'
 import {
   useIsChatMode,
   useNodesReadOnly,
   useNodesSyncDraft,
 } from './hooks'
+import { type CommonNodeType, type InputVar, InputVarType, type Node } from './types'
+import useConfig from './nodes/start/use-config'
+import type { StartNodeType } from './nodes/start/types'
 import {
   FeaturesChoose,
   FeaturesPanel,
 } from '@/app/components/base/features'
+import type { PromptVariable } from '@/models/debug'
 
 const Features = () => {
   const { t } = useTranslation()
@@ -21,6 +26,24 @@ const Features = () => {
   const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
   const { nodesReadOnly } = useNodesReadOnly()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const nodes = useNodes<CommonNodeType>()
+
+  const startNode = nodes.find(node => node.data.type === 'start')
+  const { id, data } = startNode as Node<StartNodeType>
+  const { handleAddVariable } = useConfig(id, data)
+
+  const handleAddOpeningStatementVariable = (variables: PromptVariable[]) => {
+    const newVariable = variables[0]
+    const startNodeVariable: InputVar = {
+      variable: newVariable.key,
+      label: newVariable.name,
+      type: InputVarType.textInput,
+      max_length: newVariable.max_length,
+      required: newVariable.required || false,
+      options: [],
+    }
+    handleAddVariable(startNodeVariable)
+  }
 
   const handleFeaturesChange = useCallback(() => {
     handleSyncWorkflowDraft()
@@ -55,8 +78,9 @@ const Features = () => {
           disabled={nodesReadOnly}
           onChange={handleFeaturesChange}
           openingStatementProps={{
-            onAutoAddPromptVariable: () => {},
+            onAutoAddPromptVariable: handleAddOpeningStatementVariable,
           }}
+          workflowVariables={data.variables}
         />
       </div>
     </div>