dify/web/app/components/workflow/run/agent-log/agent-log-item.tsx

import type { AgentLogItemWithChildren } from '@/types/workflow'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { RiArrowRightSLine, RiListView } from '@remixicon/react'
import { useMemo, useState } from 'react'
import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
import BlockIcon from '@/app/components/workflow/block-icon'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { BlockEnum } from '@/app/components/workflow/types'

type AgentLogItemProps = {
  item: AgentLogItemWithChildren
  onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void
}
const AgentLogItem = ({ item, onShowAgentOrToolLog }: AgentLogItemProps) => {
  const { label, status, children, data, metadata } = item
  const [expanded, setExpanded] = useState(false)
  const { getIconUrl } = useGetIcon()
  const toolIcon = useMemo(() => {
    const icon = metadata?.icon

    if (icon) {
      if (icon.includes('http')) return icon

      return getIconUrl(icon)
    }

    return ''
  }, [getIconUrl, metadata?.icon])

  const mergeStatus = useMemo(() => {
    if (status === 'start') return 'running'

    return status
  }, [status])

  return (
    <div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default">
      <div
        className={cn('flex cursor-pointer items-center py-2 pr-3 pl-1.5', expanded && 'pb-1')}
        onClick={() => setExpanded(!expanded)}
      >
        {expanded ? (
          <RiArrowRightSLine className="size-4 shrink-0 rotate-90 text-text-quaternary" />
        ) : (
          <RiArrowRightSLine className="size-4 shrink-0 text-text-quaternary" />
        )}
        <BlockIcon
          className="mr-1.5 shrink-0"
          type={toolIcon ? BlockEnum.Tool : BlockEnum.Agent}
          toolIcon={toolIcon}
        />
        <div
          className="grow truncate system-sm-semibold-uppercase text-text-secondary"
          title={label}
        >
          {label}
        </div>
        {!!metadata?.elapsed_time && (
          <div className="mr-2 shrink-0 system-xs-regular text-text-tertiary">
            {metadata?.elapsed_time?.toFixed(3)}s
          </div>
        )}
        <NodeStatusIcon status={mergeStatus} />
      </div>
      {expanded && (
        <div className="p-1 pt-0">
          {!!children?.length && (
            <Button
              className="mb-1 flex w-full items-center justify-between"
              variant="tertiary"
              onClick={() => onShowAgentOrToolLog(item)}
            >
              <div className="flex items-center">
                <RiListView className="mr-1 size-4 shrink-0 text-components-button-tertiary-text" />
                {`${children.length} Action Logs`}
              </div>
              <div className="flex">
                <RiArrowRightSLine className="size-4 shrink-0 text-components-button-tertiary-text" />
              </div>
            </Button>
          )}
          {data && (
            <CodeEditor
              readOnly
              title={<div>{'data'.toLocaleUpperCase()}</div>}
              language={CodeLanguage.json}
              value={data}
              isJSONStringifyBeauty
            />
          )}
        </div>
      )}
    </div>
  )
}

export default AgentLogItem