refactor: enhance email delivery method handling and improve debug mode display in HumanInputContent

web/app/components/base/chat/chat/answer/human-input-content/index.tsx

@@ -1,14 +1,20 @@
 import type { HumanInputContentProps } from './type'
+import { Trans, useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
+import { useSelector as useAppSelector } from '@/context/app-context'
 import HumanInputForm from './human-input-form'
 
 const HumanInputContent = ({
   formData,
   showEmailTip = false,
+  isEmailDebugMode = false,
   showDebugModeTip = false,
   showTimeout = false,
   onSubmit,
 }: HumanInputContentProps) => {
+  const { t } = useTranslation()
+  const email = useAppSelector(s => s.userProfile.email)
+
   return (
     <>
       <HumanInputForm
@@ -20,8 +26,19 @@ const HumanInputContent = ({
         <>
           <Divider className="!my-2 w-[30px]" />
           <div className="space-y-1 pt-1">
-            {showEmailTip && <div className="system-xs-regular text-text-secondary">humanInputEmailTip</div>}
-            {showDebugModeTip && <div className="system-xs-medium text-text-warning">humanInputWebappTip</div>}
+            {showEmailTip && !isEmailDebugMode && (
+              <div className="system-xs-regular text-text-secondary">{t('workflow.common.humanInputEmailTip')}</div>
+            )}
+            {showEmailTip && isEmailDebugMode && (
+              <div className="system-xs-regular text-text-secondary">
+                <Trans
+                  i18nKey="workflow.common.humanInputEmailTipInDebugMode"
+                  components={{ email: <span className="system-xs-semibold"></span> }}
+                  values={{ email }}
+                />
+              </div>
+            )}
+            {showDebugModeTip && <div className="system-xs-medium text-text-warning">{t('workflow.common.humanInputWebappTip')}</div>}
           </div>
         </>
       )}

web/app/components/base/chat/chat/answer/human-input-content/type.ts

@@ -10,6 +10,7 @@ export type HumanInputContentProps = {
   formData: HumanInputFormData
   executedAction?: ExecutedAction
   showEmailTip?: boolean
+  isEmailDebugMode?: boolean
   showDebugModeTip?: boolean
   showTimeout?: boolean
   expirationTime?: number

web/app/components/base/chat/chat/answer/index.tsx

@@ -87,13 +87,16 @@ const Answer: FC<AnswerProps> = ({
     if (!deliveryMethodsConfig.length) {
       return {
         showEmailTip: false,
+        isEmailDebugMode: false,
         showDebugModeTip: false,
       }
     }
     const isWebappEnabled = deliveryMethodsConfig.some((method: DeliveryMethod) => method.type === DeliveryMethodType.WebApp && method.enabled)
     const isEmailEnabled = deliveryMethodsConfig.some((method: DeliveryMethod) => method.type === DeliveryMethodType.Email && method.enabled)
+    const isEmailDebugMode = deliveryMethodsConfig.some((method: DeliveryMethod) => method.type === DeliveryMethodType.Email && method.config?.debug_mode)
     return {
       showEmailTip: isEmailEnabled,
+      isEmailDebugMode,
       showDebugModeTip: !isWebappEnabled,
     }
   }, [getHumanInputNodeData, humanInputFormData?.node_id])
@@ -201,6 +204,7 @@ const Answer: FC<AnswerProps> = ({
               <HumanInputContent
                 formData={humanInputFormData}
                 showEmailTip={deliveryMethodsConfig.showEmailTip}
+                isEmailDebugMode={deliveryMethodsConfig.isEmailDebugMode}
                 showDebugModeTip={deliveryMethodsConfig.showDebugModeTip}
                 onSubmit={onHumanInputFormSubmit}
               />

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

@@ -76,7 +76,6 @@ const MethodSelector: FC<Props> = ({
                   id: uuid4(),
                   type: DeliveryMethodType.WebApp,
                   enabled: true,
-                  config: {},
                 })
               }}
             >
@@ -100,7 +99,6 @@ const MethodSelector: FC<Props> = ({
                   id: uuid4(),
                   type: DeliveryMethodType.Email,
                   enabled: false,
-                  config: null,
                 })
               }}
             >

web/app/components/workflow/nodes/human-input/types.ts

@@ -43,7 +43,7 @@ export type DeliveryMethod = {
   id: string
   type: DeliveryMethodType
   enabled: boolean
-  config?: EmailConfig | {} | null
+  config?: EmailConfig
 }
 
 export enum UserActionButtonType {

web/i18n/en-US/workflow.ts

@@ -124,6 +124,7 @@ const translation = {
     tagBound: 'Number of apps using this tag',
     humanInputWebappTip: 'Debug preview only, user will not see this in web app.',
     humanInputEmailTip: 'Email (Delivery Method) sent to your configured recipients',
+    humanInputEmailTipInDebugMode: 'Email (Delivery Method) sent to <email>{{email}}</email>',
   },
   publishLimit: {
     startNodeTitlePrefix: 'Upgrade to',

web/i18n/zh-Hans/workflow.ts

@@ -124,6 +124,7 @@ const translation = {
     tagBound: '使用此标签的应用数量',
     humanInputWebappTip: '仅调试预览，用户在 Web 应用中看不到此内容。',
     humanInputEmailTip: '电子邮件（传递方式）发送到您配置的收件人。',
+    humanInputEmailTipInDebugMode: '电子邮件（传递方式）发送到 <email>{{email}}</email>',
   },
   publishLimit: {
     startNodeTitlePrefix: '升级以',