enhancement: add error style for wrong member in email configure of delivery methods

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 && (

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 (
     <div
-      className="flex h-6 items-center gap-1 rounded-full border border-components-panel-border-subtle bg-components-badge-white-to-dark p-1 shadow-xs"
+      className={cn(
+        'flex h-6 items-center gap-1 rounded-full border border-components-panel-border-subtle bg-components-badge-white-to-dark p-1 shadow-xs',
+        isError && 'border-state-destructive-hover-alt bg-state-destructive-hover',
+      )}
       onClick={e => e.stopPropagation()}
     >
-      <Avatar avatar={data.avatar_url} size={16} name={data.name || data.email} />
+      {isError && (
+        <RiErrorWarningFill className="h-4 w-4 text-text-destructive" />
+      )}
+      {!isError && <Avatar avatar={data.avatar_url} size={16} name={data.name || data.email} />}
       <div title={data.email} className="system-xs-regular max-w-[500px] truncate text-text-primary">
         {email === data.email ? data.name : data.email}
         {email === data.email && <span className="system-xs-regular text-text-tertiary">{t('members.you', { ns: 'common' })}</span>}