From a6d2392c6cabbb6c0464dd12503e8cadf9bd7191 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 1 Aug 2025 15:36:02 +0800
Subject: [PATCH] method selector

---
 .../components/delivery-method/index.tsx      | 11 ++++++---
 .../delivery-method/method-selector.tsx       | 24 ++++++++++++-------
 .../workflow/nodes/human-input/panel.tsx      |  2 +-
 3 files changed, 25 insertions(+), 12 deletions(-)

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 f56ad7ed3d..6013268c67 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
@@ -2,10 +2,15 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import MethodSelector from './method-selector'
+import type { DeliveryMethod } from '../../types'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
-const DeliveryMethod: React.FC = () => {
+type Props = {
+  value: DeliveryMethod[]
+}
+
+const DeliveryMethodForm: React.FC<Props> = ({ value }) => {
   const { t } = useTranslation()
 
   return (
@@ -19,7 +24,7 @@ const DeliveryMethod: React.FC = () => {
           </div>
           <div className='flex items-center px-1'>
             <MethodSelector
-              onEdit={() => { /* Add edit action logic here */ }}
+              data={value}
             />
           </div>
         </div>
@@ -28,4 +33,4 @@ const DeliveryMethod: React.FC = () => {
   )
 }
 
-export default DeliveryMethod
+export default DeliveryMethodForm
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 d9d471fb4a..c3ef38fd21 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
@@ -13,16 +13,18 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import type { DeliveryMethod } from '../../types'
+import { DeliveryMethodType } from '../../types'
 import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
 type Props = {
-  onEdit: () => void
+  data: DeliveryMethod[]
 }
 
 const MethodSelector: FC<Props> = ({
-  onEdit,
+  data,
 }) => {
   const { t } = useTranslation()
   const [open, doSetOpen] = useState(false)
@@ -56,23 +58,29 @@ 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='relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover'>
-              <div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5'>
+            <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('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>
-              <div className='p-1'>
+              <div className={cn('p-1', data.some(method => method.type === DeliveryMethodType.WebApp) && 'opacity-50')}>
                 <div className='system-sm-medium mb-0.5 truncate text-text-primary'>{t(`${i18nPrefix}.deliveryMethod.types.webapp.title`)}</div>
                 <div className='system-xs-regular truncate text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.types.webapp.description`)}</div>
               </div>
+              {data.some(method => method.type === DeliveryMethodType.WebApp) && (
+                <div className='system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.added`)}</div>
+              )}
             </div>
-            <div className='relative flex cursor-pointer items-center gap-1 rounded-lg p-1 pl-3 hover:bg-state-base-hover'>
-              <div className='rounded-[4px] border border-divider-regular bg-components-icon-bg-indigo-solid p-0.5'>
+            <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('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>
-              <div className='p-1'>
+              <div className={cn('p-1', data.some(method => method.type === DeliveryMethodType.Email) && 'opacity-50')}>
                 <div className='system-sm-medium mb-0.5 truncate text-text-primary'>{t(`${i18nPrefix}.deliveryMethod.types.email.title`)}</div>
                 <div className='system-xs-regular truncate text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.types.email.description`)}</div>
               </div>
+              {data.some(method => method.type === DeliveryMethodType.Email) && (
+                <div className='system-xs-regular absolute right-[12px] top-[13px] text-text-tertiary'>{t(`${i18nPrefix}.deliveryMethod.added`)}</div>
+              )}
             </div>
           </div>
         </div>
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 6829a40e99..0b6dac3e07 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -33,7 +33,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
   return (
     <div className='py-2'>
       {/* delivery methods */}
-      <DeliveryMethod />
+      <DeliveryMethod value={inputs.deliveryMethod || []} />
       <div className='px-4 py-2'>
         <Divider className='!my-0 !h-px !bg-divider-subtle' />
       </div>