dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/dify/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -0,0 +1,126 @@
+import {
+  useMemo,
+  useState,
+} from 'react'
+import {
+  RiArrowRightSLine,
+  RiListView,
+} from '@remixicon/react'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+import type { AgentLogItemWithChildren } from '@/types/workflow'
+import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
+
+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 pb-2 pl-1.5 pr-3 pt-2',
+          expanded && 'pb-1',
+        )}
+        onClick={() => setExpanded(!expanded)}
+      >
+        {
+          expanded
+            ? <RiArrowRightSLine className='h-4 w-4 shrink-0 rotate-90 text-text-quaternary' />
+            : <RiArrowRightSLine className='h-4 w-4 shrink-0 text-text-quaternary' />
+        }
+        <BlockIcon
+          className='mr-1.5 shrink-0'
+          type={toolIcon ? BlockEnum.Tool : BlockEnum.Agent}
+          toolIcon={toolIcon}
+        />
+        <div
+          className='system-sm-semibold-uppercase grow truncate text-text-secondary'
+          title={label}
+        >
+          {label}
+        </div>
+        {
+          metadata?.elapsed_time && (
+            <div className='system-xs-regular mr-2 shrink-0 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 h-4 w-4 shrink-0 text-components-button-tertiary-text' />
+                    {`${children.length} Action Logs`}
+                  </div>
+                  <div className='flex'>
+                    <RiArrowRightSLine className='h-4 w-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