From 3ed561d94368a2c740b2519e24976a755729eec7 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 5 Aug 2025 14:42:57 +0800
Subject: [PATCH] delivery method item

---
 .../components/delivery-method/index.tsx      | 43 ++++++++-
 .../delivery-method/method-item.tsx           | 93 +++++++++++++++++++
 .../delivery-method/method-selector.tsx       | 26 +++++-
 .../workflow/nodes/human-input/panel.tsx      |  6 +-
 .../workflow/nodes/human-input/use-config.ts  | 13 ++-
 web/i18n/en-US/workflow.ts                    |  5 +
 web/i18n/zh-Hans/workflow.ts                  |  5 +
 7 files changed, 184 insertions(+), 7 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx

diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
index 6013268c67..f1625585d9 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx
@@ -1,18 +1,40 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import produce from 'immer'
 import Tooltip from '@/app/components/base/tooltip'
 import MethodSelector from './method-selector'
-import type { DeliveryMethod } from '../../types'
+import MethodItem from './method-item'
+import type { DeliveryMethod, DeliveryMethodType } from '../../types'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
 type Props = {
   value: DeliveryMethod[]
+  onchange: (value: DeliveryMethod[]) => void
 }
 
-const DeliveryMethodForm: React.FC<Props> = ({ value }) => {
+const DeliveryMethodForm: React.FC<Props> = ({ value, onchange }) => {
   const { t } = useTranslation()
 
+  const handleMethodChange = (target: DeliveryMethod) => {
+    const newMethods = produce(value, (draft) => {
+      const index = draft.findIndex(method => method.type === target.type)
+      if (index !== -1)
+        draft[index] = target
+    })
+    onchange(newMethods)
+  }
+
+  const handleMethodAdd = (newMethod: DeliveryMethod) => {
+    const newMethods = [...value, newMethod]
+    onchange(newMethods)
+  }
+
+  const handleMethodDelete = (type: DeliveryMethodType) => {
+    const newMethods = value.filter(method => method.type !== type)
+    onchange(newMethods)
+  }
+
   return (
     <div className='px-4 py-2'>
         <div className='mb-1 flex items-center justify-between'>
@@ -25,10 +47,25 @@ const DeliveryMethodForm: React.FC<Props> = ({ value }) => {
           <div className='flex items-center px-1'>
             <MethodSelector
               data={value}
+              onAdd={handleMethodAdd}
             />
           </div>
         </div>
-        <div className='system-xs-regular flex items-center justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.emptyTip`)}</div>
+        {!value.length && (
+          <div className='system-xs-regular flex items-center justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.emptyTip`)}</div>
+        )}
+        {value.length > 0 && (
+          <div className='space-y-1'>
+            {value.map((method, index) => (
+              <MethodItem
+                method={method}
+                key={index}
+                onChange={handleMethodChange}
+                onDelete={handleMethodDelete}
+              />
+            ))}
+          </div>
+        )}
       </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
new file mode 100644
index 0000000000..5a49f1ddb9
--- /dev/null
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
@@ -0,0 +1,93 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEqualizer2Line,
+  RiMailSendFill,
+  RiRobot2Fill,
+} from '@remixicon/react'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+import Switch from '@/app/components/base/switch'
+import Indicator from '@/app/components/header/indicator'
+import type { DeliveryMethod } from '../../types'
+import { DeliveryMethodType } from '../../types'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'workflow.nodes.humanInput'
+
+type Props = {
+  method: DeliveryMethod
+  onChange: (method: DeliveryMethod) => void
+  onDelete: (type: DeliveryMethodType) => void
+}
+
+const DeliveryMethodItem: React.FC<Props> = ({ method, onChange, onDelete }) => {
+  const { t } = useTranslation()
+  const [isHovering, setIsHovering] = React.useState(false)
+
+  const handleEnableStatusChange = (enabled: boolean) => {
+    onChange({
+      ...method,
+      enabled,
+    })
+  }
+
+  return (
+    <div
+      className={cn('group flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-1.5 pr-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isHovering && 'border-state-destructive-border bg-state-destructive-hover hover:bg-state-destructive-hover')}
+    >
+      <div className='flex items-center gap-1.5'>
+        {method.type === DeliveryMethodType.WebApp && (
+          <div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5'>
+            <RiRobot2Fill className='h-3.5 w-3.5 text-text-primary-on-surface' />
+          </div>
+        )}
+        {method.type === DeliveryMethodType.Email && (
+          <div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-blue-solid p-0.5'>
+            <RiMailSendFill className='h-3.5 w-3.5 text-text-primary-on-surface' />
+          </div>
+        )}
+        <div className='system-xs-medium capitalize text-text-secondary'>{method.type}</div>
+      </div>
+      <div className='flex items-center gap-1'>
+        <div className='hidden items-end gap-1 group-hover:flex'>
+          {method.type === DeliveryMethodType.Email && method.configure && (
+            <ActionButton>
+              <RiEqualizer2Line className='h-4 w-4' />
+            </ActionButton>
+          )}
+          <div
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+          >
+            <ActionButton
+              state={isHovering ? ActionButtonState.Destructive : ActionButtonState.Default}
+              onClick={() => onDelete(method.type)}
+            >
+              <RiDeleteBinLine className='h-4 w-4' />
+            </ActionButton>
+          </div>
+        </div>
+        {(method.configure || method.type === DeliveryMethodType.WebApp) && (
+          <Switch
+            defaultValue={method.enabled}
+            onChange={handleEnableStatusChange}
+          />
+        )}
+        {method.type === DeliveryMethodType.Email && !method.configure && (
+          <Button
+            className='-mr-1'
+            size='small'
+            onClick={() => onChange({ ...method, enabled: !method.enabled })}
+          >
+            {t(`${i18nPrefix}.deliveryMethod.notConfigured`)}
+            <Indicator color='orange' className='ml-1' />
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DeliveryMethodItem
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
index c3ef38fd21..a7dde0b779 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx
@@ -21,10 +21,12 @@ const i18nPrefix = 'workflow.nodes.humanInput'
 
 type Props = {
   data: DeliveryMethod[]
+  onAdd: (method: DeliveryMethod) => void
 }
 
 const MethodSelector: FC<Props> = ({
   data,
+  onAdd,
 }) => {
   const { t } = useTranslation()
   const [open, doSetOpen] = useState(false)
@@ -58,7 +60,17 @@ const MethodSelector: FC<Props> = ({
       <PortalToFollowElemContent className='z-50'>
         <div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
           <div className='p-1'>
-            <div className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', data.some(method => method.type === DeliveryMethodType.WebApp) && 'cursor-not-allowed bg-transparent hover:bg-transparent')}>
+            <div
+              className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', data.some(method => method.type === DeliveryMethodType.WebApp) && 'cursor-not-allowed bg-transparent hover:bg-transparent')}
+              onClick={() => {
+                if (data.some(method => method.type === DeliveryMethodType.WebApp))
+                  return
+                onAdd({
+                  type: DeliveryMethodType.WebApp,
+                  enabled: true,
+                })
+              }}
+            >
               <div className={cn('rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5', data.some(method => method.type === DeliveryMethodType.WebApp) && 'opacity-50')}>
                 <RiRobot2Fill className='h-3.5 w-3.5 text-text-primary-on-surface' />
               </div>
@@ -70,7 +82,17 @@ const MethodSelector: FC<Props> = ({
                 <div className='system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.added`)}</div>
               )}
             </div>
-            <div className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', data.some(method => method.type === DeliveryMethodType.Email) && 'cursor-not-allowed bg-transparent hover:bg-transparent')}>
+            <div
+              className={cn('relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover', data.some(method => method.type === DeliveryMethodType.Email) && 'cursor-not-allowed bg-transparent hover:bg-transparent')}
+              onClick={() => {
+                if (data.some(method => method.type === DeliveryMethodType.Email))
+                  return
+                onAdd({
+                  type: DeliveryMethodType.Email,
+                  enabled: false,
+                })
+              }}
+            >
               <div className={cn('rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5', data.some(method => method.type === DeliveryMethodType.Email) && 'opacity-50')}>
                 <RiMailSendFill className='h-3.5 w-3.5 text-text-primary-on-surface' />
               </div>
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 0b6dac3e07..9c8b8e5376 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -25,6 +25,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
   const { t } = useTranslation()
   const {
     inputs,
+    handleDeliveryMethodChange,
     handleUserActionAdd,
     handleUserActionChange,
     handleUserActionDelete,
@@ -33,7 +34,10 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
   return (
     <div className='py-2'>
       {/* delivery methods */}
-      <DeliveryMethod value={inputs.deliveryMethod || []} />
+      <DeliveryMethod
+        value={inputs.deliveryMethod || []}
+        onchange={handleDeliveryMethodChange}
+      />
       <div className='px-4 py-2'>
         <Divider className='!my-0 !h-px !bg-divider-subtle' />
       </div>
diff --git a/web/app/components/workflow/nodes/human-input/use-config.ts b/web/app/components/workflow/nodes/human-input/use-config.ts
index 09effafe23..2124d1aa70 100644
--- a/web/app/components/workflow/nodes/human-input/use-config.ts
+++ b/web/app/components/workflow/nodes/human-input/use-config.ts
@@ -1,5 +1,5 @@
 import produce from 'immer'
-import type { HumanInputNodeType, Timeout, UserAction } from './types'
+import type { DeliveryMethod, HumanInputNodeType, Timeout, UserAction } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import {
   useNodesReadOnly,
@@ -8,6 +8,16 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<HumanInputNodeType>(id, payload)
 
+  // 1 check email address valid
+  // 2 use immer to handle delivery method configuration
+
+  const handleDeliveryMethodChange = (methods: DeliveryMethod[]) => {
+    setInputs({
+      ...inputs,
+      deliveryMethod: methods,
+    })
+  }
+
   const handleUserActionAdd = (newAction: UserAction) => {
     setInputs({
       ...inputs,
@@ -45,6 +55,7 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
   return {
     readOnly,
     inputs,
+    handleDeliveryMethodChange,
     handleUserActionAdd,
     handleUserActionChange,
     handleUserActionDelete,
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index e6fda553af..4e107491c6 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -924,6 +924,11 @@ const translation = {
           },
         },
         added: 'Added',
+        notConfigured: 'Not configured',
+        emailConfigure: {
+          title: 'Email',
+          description: 'Send request for input via email',
+        },
       },
       formContent: 'form content',
       userActions: {
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index e3bae9df07..1a2edac61c 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -925,6 +925,11 @@ const translation = {
           },
         },
         added: '已添加',
+        notConfigured: '未配置',
+        emailConfigure: {
+          title: '电子邮件配置',
+          description: '通过电子邮件发送输入请求',
+        },
       },
       formContent: '表单内容',
       userActions: {