feat(human-input): add formContent prop to delivery method components for enhanced email configuration

web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx

@@ -1,8 +1,4 @@
 import type { EmailConfig } from '../../types'
-import type {
-  Node,
-  NodeOutPutVar,
-} from '@/app/components/workflow/types'
 import { RiBugLine, RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/compat'
 import { memo, useCallback, useState } from 'react'
@@ -24,8 +20,6 @@ type EmailConfigureModalProps = {
   onClose: () => void
   onConfirm: (data: any) => void
   config?: EmailConfig
-  nodesOutputVars?: NodeOutPutVar[]
-  availableNodes?: Node[]
 }
 
 const EmailConfigureModal = ({
@@ -33,8 +27,6 @@ const EmailConfigureModal = ({
   onClose,
   onConfirm,
   config,
-  nodesOutputVars = [],
-  availableNodes = [],
 }: EmailConfigureModalProps) => {
   const { t } = useTranslation()
   const { userProfile } = useAppContext()
@@ -43,7 +35,7 @@ const EmailConfigureModal = ({
   const [body, setBody] = useState(config?.body || '')
   const [debugMode, setDebugMode] = useState(config?.debug_mode || false)
 
-  const checkValidConfig = () => {
+  const checkValidConfig = useCallback(() => {
     if (!subject.trim()) {
       Toast.notify({
         type: 'error',
@@ -73,7 +65,7 @@ const EmailConfigureModal = ({
       return false
     }
     return true
-  }
+  }, [recipients, subject, body, t])
 
   const handleConfirm = useCallback(() => {
     if (!checkValidConfig())
@@ -84,7 +76,7 @@ const EmailConfigureModal = ({
       body,
       debug_mode: debugMode,
     })
-  }, [recipients, subject, body, debugMode, onConfirm])
+  }, [checkValidConfig, onConfirm, recipients, subject, body, debugMode])
 
   return (
     <Modal
@@ -118,8 +110,6 @@ const EmailConfigureModal = ({
           <MailBodyInput
             value={body}
             onChange={setBody}
-            nodesOutputVars={nodesOutputVars}
-            availableNodes={availableNodes}
           />
         </div>
         <div>

web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx

@@ -17,6 +17,7 @@ type Props = {
   value: DeliveryMethod[]
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
+  formContent?: string
   onChange: (value: DeliveryMethod[]) => void
 }
 
@@ -25,6 +26,7 @@ const DeliveryMethodForm: React.FC<Props> = ({
   value,
   nodesOutputVars,
   availableNodes,
+  formContent,
   onChange,
 }) => {
   const { t } = useTranslation()
@@ -78,6 +80,7 @@ const DeliveryMethodForm: React.FC<Props> = ({
               onDelete={handleMethodDelete}
               nodesOutputVars={nodesOutputVars}
               availableNodes={availableNodes}
+              formContent={formContent}
             />
           ))}
         </div>

web/app/components/workflow/nodes/human-input/components/delivery-method/mail-body-input.tsx

@@ -1,30 +1,18 @@
-import type {
-  Node,
-  NodeOutPutVar,
-} from '@/app/components/workflow/types'
-import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import Placeholder from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder'
-import { BlockEnum } from '@/app/components/workflow/types'
 import { cn } from '@/utils/classnames'
 
 type MailBodyInputProps = {
   readOnly?: boolean
-  nodesOutputVars?: NodeOutPutVar[]
-  availableNodes?: Node[]
   value?: string
   onChange?: (text: string) => void
 }
 
 const MailBodyInput = ({
   readOnly = false,
-  nodesOutputVars,
-  availableNodes = [],
   value = '',
   onChange,
 }: MailBodyInputProps) => {
-  const { t } = useTranslation()
-
   return (
     <PromptEditor
       wrapperClassName={cn(
@@ -35,23 +23,6 @@ const MailBodyInput = ({
       className="caret:text-text-accent min-h-[128px]"
       editable={!readOnly}
       value={value}
-      workflowVariableBlock={{
-        show: true,
-        variables: nodesOutputVars || [],
-        workflowNodesMap: availableNodes.reduce((acc, node) => {
-          acc[node.id] = {
-            title: node.data.title,
-            type: node.data.type,
-          }
-          if (node.data.type === BlockEnum.Start) {
-            acc.sys = {
-              title: t('blocks.start', { ns: 'workflow' }),
-              type: BlockEnum.Start,
-            }
-          }
-          return acc
-        }, {} as any),
-      }}
       requestURLBlock={{
         show: true,
         selectable: true,

web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx

@@ -29,6 +29,7 @@ type Props = {
   method: DeliveryMethod
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
+  formContent?: string
   onChange: (method: DeliveryMethod) => void
   onDelete: (type: DeliveryMethodType) => void
 }
@@ -38,6 +39,7 @@ const DeliveryMethodItem: React.FC<Props> = ({
   method,
   nodesOutputVars,
   availableNodes,
+  formContent,
   onChange,
   onDelete,
 }) => {
@@ -125,8 +127,6 @@ const DeliveryMethodItem: React.FC<Props> = ({
         <EmailConfigureModal
           isShow={showEmailModal}
           config={method.config as EmailConfig}
-          nodesOutputVars={nodesOutputVars}
-          availableNodes={availableNodes}
           onClose={() => setShowEmailModal(false)}
           onConfirm={(data) => {
             handleConfigChange(data)
@@ -140,13 +140,10 @@ const DeliveryMethodItem: React.FC<Props> = ({
           deliveryId={method.id}
           isShow={showTestEmailModal}
           config={method.config as EmailConfig}
+          formContent={formContent}
           nodesOutputVars={nodesOutputVars}
           availableNodes={availableNodes}
           onClose={() => setShowTestEmailModal(false)}
-          onConfirm={(data) => {
-            handleConfigChange(data)
-            setShowTestEmailModal(false)
-          }}
         />
       )}
     </>

web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx

@@ -34,8 +34,8 @@ type EmailConfigureModalProps = {
   deliveryId: string
   isShow: boolean
   onClose: () => void
-  onConfirm: (data: any) => void
   config?: EmailConfig
+  formContent?: string
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
 }
@@ -67,8 +67,8 @@ const EmailSenderModal = ({
   deliveryId,
   isShow,
   onClose,
-  onConfirm,
   config,
+  formContent,
   nodesOutputVars = [],
   availableNodes = [],
 }: EmailConfigureModalProps) => {
@@ -86,7 +86,7 @@ const EmailSenderModal = ({
   const accounts = members?.accounts || []
 
   const generatedInputs = useMemo(() => {
-    const valueSelectors = doGetInputVars(config?.body || '')
+    const valueSelectors = doGetInputVars(formContent || '')
     const variables = unionBy(valueSelectors, item => item.join('.')).map((item) => {
       const varInfo = getNodeInfoById(availableNodes, item[0])?.data
 
@@ -120,7 +120,7 @@ const EmailSenderModal = ({
       }
     })
     return varInputs
-  }, [availableNodes, config?.body, nodesOutputVars])
+  }, [availableNodes, formContent, nodesOutputVars])
 
   const [inputs, setInputs] = useState<Record<string, any>>({})
   const [collapsed, setCollapsed] = useState(true)
@@ -147,7 +147,7 @@ const EmailSenderModal = ({
     finally {
       setSendingEmail(false)
     }
-  }, [appDetail, onConfirm, nodeId, deliveryId, testEmailSender])
+  }, [appDetail, nodeId, deliveryId, testEmailSender])
 
   if (done) {
     return (

web/app/components/workflow/nodes/human-input/panel.tsx

@@ -78,6 +78,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
       <DeliveryMethod
         nodeId={id}
         value={inputs.delivery_methods || []}
+        formContent={inputs.form_content}
         nodesOutputVars={availableVars}
         availableNodes={availableNodesWithParent}
         onChange={handleDeliveryMethodChange}