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

web/app/components/base/features/feature-panel/index.tsx

@@ -13,16 +13,19 @@ import TextToSpeech from './text-to-speech'
 import SpeechToText from './speech-to-text'
 import Citation from './citation'
 import Moderation from './moderation'
+import type { InputVar } from '@/app/components/workflow/types'
 
 export type FeaturePanelProps = {
   onChange?: OnFeaturesChange
   openingStatementProps: OpeningStatementProps
   disabled?: boolean
+  workflowVariables: InputVar[]
 }
 const FeaturePanel = ({
   onChange,
   openingStatementProps,
   disabled,
+  workflowVariables,
 }: FeaturePanelProps) => {
   const { t } = useTranslation()
   const features = useFeatures(s => s.features)
@@ -60,6 +63,7 @@ const FeaturePanel = ({
                     {...openingStatementProps}
                     onChange={onChange}
                     readonly={disabled}
+                    workflowVariables={workflowVariables}
                   />
                 )
               }

web/app/components/base/features/feature-panel/opening-statement/index.tsx

@@ -24,6 +24,7 @@ import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/conf
 import { getNewVar } from '@/utils/var'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
 import type { PromptVariable } from '@/models/debug'
+import type { InputVar } from '@/app/components/workflow/types'
 
 const MAX_QUESTION_NUM = 5
 
@@ -32,6 +33,7 @@ export type OpeningStatementProps = {
   readonly?: boolean
   promptVariables?: PromptVariable[]
   onAutoAddPromptVariable: (variable: PromptVariable[]) => void
+  workflowVariables?: InputVar[]
 }
 
 // regex to match the {{}} and replace it with a span
@@ -42,6 +44,7 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
   readonly,
   promptVariables = [],
   onAutoAddPromptVariable,
+  workflowVariables = [],
 }) => {
   const { t } = useTranslation()
   const featureStore = useFeaturesStore()
@@ -96,14 +99,18 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
   const handleConfirm = () => {
     const keys = getInputKeys(tempValue)
     const promptKeys = promptVariables.map(item => item.key)
+    const workflowVariableKeys = workflowVariables.map(item => item.variable)
     let notIncludeKeys: string[] = []
 
-    if (promptKeys.length === 0) {
+    if (promptKeys.length === 0 && workflowVariables.length === 0) {
       if (keys.length > 0)
         notIncludeKeys = keys
     }
     else {
-      notIncludeKeys = keys.filter(key => !promptKeys.includes(key))
+      if (workflowVariables.length > 0)
+        notIncludeKeys = keys.filter(key => !workflowVariableKeys.includes(key))
+
+      else notIncludeKeys = keys.filter(key => !promptKeys.includes(key))
     }
 
     if (notIncludeKeys.length > 0) {

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>