dify/web/app/components/workflow/nodes/agent-v2/node.tsx

import type { NodeProps } from '../../types'
import type { AgentV2NodeType } from './types'
import type { AppIconType } from '@/types/app'
import { useTranslation } from 'react-i18next'
import AppIcon from '@/app/components/base/app-icon'
import { SettingItem } from '../_base/components/setting-item'
import { useAgentRosterDetail, useWorkflowInlineAgentDetail } from './hooks'
import { hasInlineAgentBinding, hasValidRosterAgentBinding } from './types'

const getAppIconType = (iconType?: string | null): AppIconType | null => {
  if (iconType === 'emoji' || iconType === 'image' || iconType === 'link')
    return iconType

  return null
}

function AgentNodeAvatar({
  agent,
  isInlineAgent,
}: {
  agent?: ReturnType<typeof useAgentRosterDetail>['data']
  isInlineAgent: boolean
}) {
  if (isInlineAgent) {
    return (
      <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-background-default-burn text-text-tertiary">
        <span aria-hidden className="i-custom-vender-agent-v2-robot-3 size-5" />
      </span>
    )
  }

  if (!agent)
    return <span aria-hidden className="size-8 shrink-0 rounded-full bg-text-quaternary/20" />

  return (
    <AppIcon
      size="small"
      iconType={getAppIconType(agent.icon_type)}
      icon={agent.icon ?? undefined}
      background={agent.icon_background}
      imageUrl={agent.icon ?? undefined}
    />
  )
}

function AgentNodeAvatarPlaceholder() {
  return <span aria-hidden className="size-8 shrink-0 rounded-full bg-text-quaternary/20" />
}

function AgentNodeModel({
  data,
  agent,
  inlineAgentName,
  isLoading,
}: {
  data: AgentV2NodeType
  agent?: ReturnType<typeof useAgentRosterDetail>['data']
  inlineAgentName?: string
  isLoading: boolean
}) {
  const { t } = useTranslation()
  const isInlineAgent = hasInlineAgentBinding(data)
  const name = isInlineAgent ? (inlineAgentName || t('nodes.agent.roster.inlineSetup.name', { ns: 'workflow' })) : agent?.name
  const role = isInlineAgent ? t('nodes.agent.roster.inlineSetup.type', { ns: 'workflow' }) : ''
  const showPlaceholder = isLoading || (!isInlineAgent && !agent)

  return (
    <div className="flex flex-col gap-0.5 py-1">
      <div className="px-2.5 py-0.5 system-2xs-medium-uppercase text-text-tertiary">
        {t('nodes.agent.roster.label', { ns: 'workflow' })}
      </div>
      <div className="px-2.5">
        <div className="flex min-w-0 items-center gap-1 rounded-lg bg-workflow-block-parma-bg p-1">
          {showPlaceholder
            ? <AgentNodeAvatarPlaceholder />
            : <AgentNodeAvatar agent={agent} isInlineAgent={isInlineAgent} />}
          <div className="flex min-w-0 flex-1 flex-col justify-center">
            {showPlaceholder
              ? (
                  <div aria-hidden className="flex flex-col gap-1.5 py-0.5">
                    <span className="h-2 w-20 rounded-xs bg-text-quaternary/20" />
                    <span className="h-2 w-14 rounded-xs bg-text-quaternary/15" />
                  </div>
                )
              : (
                  <>
                    <div className="truncate system-xs-regular text-text-secondary">
                      {name}
                    </div>
                    <div className="truncate system-2xs-regular text-text-tertiary">
                      {role}
                    </div>
                  </>
                )}
          </div>
        </div>
      </div>
    </div>
  )
}

export function AgentV2Node({ id, data }: NodeProps<AgentV2NodeType>) {
  const { t } = useTranslation()
  const hasValidAgent = hasValidRosterAgentBinding(data)
  const isInlineAgent = hasInlineAgentBinding(data)
  const rosterAgentId = data.agent_binding?.binding_type === 'roster_agent' ? data.agent_binding.agent_id : undefined
  const inlineAgentId = data.agent_binding?.binding_type === 'inline_agent' ? data.agent_binding.agent_id : undefined
  const rosterAgentQuery = useAgentRosterDetail(rosterAgentId)
  const inlineAgentQuery = useWorkflowInlineAgentDetail(id, inlineAgentId)
  const isInlineAgentDetailLoading = isInlineAgent && !!inlineAgentId && inlineAgentQuery.isPending

  if (isInlineAgent || hasValidAgent)
    return <AgentNodeModel data={data} agent={rosterAgentQuery.data} inlineAgentName={inlineAgentQuery.data?.agent?.name} isLoading={isInlineAgentDetailLoading} />

  return (
    <div className="mb-1 space-y-1 px-3">
      <SettingItem
        label={t('nodes.agent.roster.label', { ns: 'workflow' })}
        status={hasValidAgent ? undefined : 'error'}
        tooltip={hasValidAgent ? undefined : t('errorMsg.fieldRequired', { ns: 'workflow', field: t('nodes.agent.roster.label', { ns: 'workflow' }) })}
      >
        {rosterAgentQuery.data?.name}
      </SettingItem>
    </div>
  )
}