diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx index ab1c7a6189..b7a94412e7 100644 --- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx +++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx @@ -1,7 +1,7 @@ import type { Recipient as RecipientItem } from '../../../types' import type { Member } from '@/models/common' import * as React from 'react' -import { useMemo, useRef, useState } from 'react' +import { useCallback, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { PortalToFollowElem, @@ -46,6 +46,8 @@ const EmailInput = ({ }) }, [list, value]) + const isErrorMember = useCallback((emailItem: RecipientItem) => emailItem.type === 'member' && list.every(item => item.id !== emailItem.user_id), [list]) + const placeholder = useMemo(() => { return (selectedEmails.length === 0 || isFocus) ? t(`${i18nPrefix}.deliveryMethod.emailConfigure.memberSelector.placeholder`, { ns: 'workflow' }) @@ -135,6 +137,7 @@ const EmailInput = ({ data={item as unknown as Member} onDelete={onDelete} disabled={disabled} + isError={isErrorMember(item)} /> ))} {!disabled && ( diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx index 9d00565dbc..be26c9bece 100644 --- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx +++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx @@ -1,16 +1,17 @@ import type { Recipient as RecipientItem } from '../../../types' import type { Member } from '@/models/common' -import { RiCloseCircleFill } from '@remixicon/react' +import { RiCloseCircleFill, RiErrorWarningFill } from '@remixicon/react' import * as React from 'react' import { useTranslation } from 'react-i18next' import Avatar from '@/app/components/base/avatar' +import { cn } from '@/utils/classnames' type Props = { email: string data: Member disabled?: boolean onDelete: (recipient: RecipientItem) => void - + isError: boolean } const EmailItem = ({ @@ -18,15 +19,22 @@ const EmailItem = ({ data, onDelete, disabled = false, + isError, }: Props) => { const { t } = useTranslation() return (
e.stopPropagation()} > - + {isError && ( + + )} + {!isError && }
{email === data.email ? data.name : data.email} {email === data.email && {t('members.you', { ns: 'common' })}}