delivery method item

2026-02-01 16:41:58 +08:00 · 2025-08-05 14:42:57 +08:00 · 2025-08-05 14:42:57 +08:00 · 3ed561d943
commit 3ed561d943
parent bb8d54c48b
7 changed files with 184 additions and 7 deletions
--- 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>
  )
 }
--- 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
@ -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
--- 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>
--- 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>
--- 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,
--- 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: {
--- 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: {