diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx index 1d29b4de41..95e25855ac 100644 --- a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx +++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx @@ -9,7 +9,7 @@ import Input from '@/app/components/base/input' import Modal from '@/app/components/base/modal' import Switch from '@/app/components/base/switch' import Toast from '@/app/components/base/toast' -import { useAppContext } from '@/context/app-context' +import { useSelector as useAppContextWithSelector } from '@/context/app-context' import MailBodyInput from './mail-body-input' import Recipient from './recipient' @@ -29,7 +29,7 @@ const EmailConfigureModal = ({ config, }: EmailConfigureModalProps) => { const { t } = useTranslation() - const { userProfile } = useAppContext() + const email = useAppContextWithSelector(s => s.userProfile.email) const [recipients, setRecipients] = useState(config?.recipients || { whole_workspace: false, items: [] }) const [subject, setSubject] = useState(config?.subject || '') const [body, setBody] = useState(config?.body || '') @@ -132,8 +132,8 @@ const EmailConfigureModal = ({ {userProfile.email} }} - values={{ email: userProfile.email }} + components={{ email: {email} }} + values={{ email }} />
{t(`${i18nPrefix}.deliveryMethod.emailConfigure.debugModeTip2`, { ns: 'workflow' })}
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 index def66c5b70..5e20a6ddfd 100644 --- 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 @@ -1,3 +1,4 @@ +import type { FC } from 'react' import type { DeliveryMethod, EmailConfig } from '../../types' import type { Node, @@ -10,13 +11,15 @@ import { RiRobot2Fill, RiSendPlane2Line, } from '@remixicon/react' -import * as React from 'react' +import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import ActionButton, { ActionButtonState } from '@/app/components/base/action-button' import Badge from '@/app/components/base/badge/index' import Button from '@/app/components/base/button' import Switch from '@/app/components/base/switch' +import Tooltip from '@/app/components/base/tooltip' import Indicator from '@/app/components/header/indicator' +import { useSelector as useAppContextWithSelector } from '@/context/app-context' import { cn } from '@/utils/classnames' import { DeliveryMethodType } from '../../types' import EmailConfigureModal from './email-configure-modal' @@ -24,7 +27,7 @@ import TestEmailSender from './test-email-sender' const i18nPrefix = 'nodes.humanInput' -type Props = { +type DeliveryMethodItemProps = { nodeId: string method: DeliveryMethod nodesOutputVars?: NodeOutPutVar[] @@ -35,7 +38,7 @@ type Props = { readonly?: boolean } -const DeliveryMethodItem: React.FC = ({ +const DeliveryMethodItem: FC = ({ nodeId, method, nodesOutputVars, @@ -46,9 +49,10 @@ const DeliveryMethodItem: React.FC = ({ readonly, }) => { const { t } = useTranslation() - const [isHovering, setIsHovering] = React.useState(false) - const [showEmailModal, setShowEmailModal] = React.useState(false) - const [showTestEmailModal, setShowTestEmailModal] = React.useState(false) + const email = useAppContextWithSelector(s => s.userProfile.email) + const [isHovering, setIsHovering] = useState(false) + const [showEmailModal, setShowEmailModal] = useState(false) + const [showTestEmailModal, setShowTestEmailModal] = useState(false) const handleEnableStatusChange = (enabled: boolean) => { onChange({ @@ -64,10 +68,23 @@ const DeliveryMethodItem: React.FC = ({ }) } + const emailSenderTooltipContent = useMemo(() => { + if (method.type !== DeliveryMethodType.Email) { + return '' + } + if (method.config?.debug_mode) { + return t(`${i18nPrefix}.deliveryMethod.emailSender.testSendTipInDebugMode`, { ns: 'workflow', email }) + } + return t(`${i18nPrefix}.deliveryMethod.emailSender.testSendTip`, { ns: 'workflow' }) + }, [method.type, method.config?.debug_mode, t, email]) + return ( <>
{method.type === DeliveryMethodType.WebApp && ( @@ -88,25 +105,41 @@ const DeliveryMethodItem: React.FC = ({
{method.type === DeliveryMethodType.Email && method.config && ( <> - setShowTestEmailModal(true)}> - - - setShowEmailModal(true)}> - - + + setShowTestEmailModal(true)}> + + + + + setShowEmailModal(true)}> + + + + )} -
setIsHovering(true)} - onMouseLeave={() => setIsHovering(false)} + - onDelete(method.type)} +
setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} > - - -
+ onDelete(method.type)} + > + + +
+
)} {(method.config || method.type === DeliveryMethodType.WebApp) && ( diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json index 9cce64df69..d20bf3b82b 100644 --- a/web/i18n/en-US/workflow.json +++ b/web/i18n/en-US/workflow.json @@ -531,6 +531,8 @@ "nodes.humanInput.deliveryMethod.emailSender.done": "Email Sent", "nodes.humanInput.deliveryMethod.emailSender.optional": "(optional)", "nodes.humanInput.deliveryMethod.emailSender.send": "Send Email", + "nodes.humanInput.deliveryMethod.emailSender.testSendTip": "Send test emails to your configured recipients", + "nodes.humanInput.deliveryMethod.emailSender.testSendTipInDebugMode": "Send a test email to {{email}}", "nodes.humanInput.deliveryMethod.emailSender.tip": "It is recommended to enable Debug Mode for testing email delivery.", "nodes.humanInput.deliveryMethod.emailSender.title": "Test Email Sender", "nodes.humanInput.deliveryMethod.emailSender.vars": "Variables in Form Content", diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json index 1086951c8b..7301b5dfec 100644 --- a/web/i18n/zh-Hans/workflow.json +++ b/web/i18n/zh-Hans/workflow.json @@ -531,6 +531,8 @@ "nodes.humanInput.deliveryMethod.emailSender.done": "邮件已发送", "nodes.humanInput.deliveryMethod.emailSender.optional": "(可选)", "nodes.humanInput.deliveryMethod.emailSender.send": "发送邮件", + "nodes.humanInput.deliveryMethod.emailSender.testSendTip": "发送测试邮件到您的配置收件人", + "nodes.humanInput.deliveryMethod.emailSender.testSendTipInDebugMode": "发送测试邮件到 {{email}}", "nodes.humanInput.deliveryMethod.emailSender.tip": "建议为测试邮件发送启用 调试模式。", "nodes.humanInput.deliveryMethod.emailSender.title": "测试邮件发送器", "nodes.humanInput.deliveryMethod.emailSender.vars": "表单内容中的变量",