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/base/agent-log-modal/detail.tsx
+++ b/dify/web/app/components/base/agent-log-modal/detail.tsx
@@ -0,0 +1,132 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import { flatten, uniq } from 'lodash-es'
+import ResultPanel from './result'
+import TracingPanel from './tracing'
+import cn from '@/utils/classnames'
+import { ToastContext } from '@/app/components/base/toast'
+import Loading from '@/app/components/base/loading'
+import { fetchAgentLogDetail } from '@/service/log'
+import type { AgentIteration, AgentLogDetailResponse } from '@/models/log'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import type { IChatItem } from '@/app/components/base/chat/chat/type'
+
+export type AgentLogDetailProps = {
+  activeTab?: 'DETAIL' | 'TRACING'
+  conversationID: string
+  log: IChatItem
+  messageID: string
+}
+
+const AgentLogDetail: FC<AgentLogDetailProps> = ({
+  activeTab = 'DETAIL',
+  conversationID,
+  messageID,
+  log,
+}) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const [currentTab, setCurrentTab] = useState<string>(activeTab)
+  const appDetail = useAppStore(s => s.appDetail)
+  const [loading, setLoading] = useState<boolean>(true)
+  const [runDetail, setRunDetail] = useState<AgentLogDetailResponse>()
+  const [list, setList] = useState<AgentIteration[]>([])
+
+  const tools = useMemo(() => {
+    const res = uniq(flatten(runDetail?.iterations.map((iteration) => {
+      return iteration.tool_calls.map((tool: any) => tool.tool_name).filter(Boolean)
+    })).filter(Boolean))
+    return res
+  }, [runDetail])
+
+  const getLogDetail = useCallback(async (appID: string, conversationID: string, messageID: string) => {
+    try {
+      const res = await fetchAgentLogDetail({
+        appID,
+        params: {
+          conversation_id: conversationID,
+          message_id: messageID,
+        },
+      })
+      setRunDetail(res)
+      setList(res.iterations)
+    }
+    catch (err) {
+      notify({
+        type: 'error',
+        message: `${err}`,
+      })
+    }
+  }, [notify])
+
+  const getData = async (appID: string, conversationID: string, messageID: string) => {
+    setLoading(true)
+    await getLogDetail(appID, conversationID, messageID)
+    setLoading(false)
+  }
+
+  const switchTab = async (tab: string) => {
+    setCurrentTab(tab)
+  }
+
+  useEffect(() => {
+    // fetch data
+    if (appDetail)
+      getData(appDetail.id, conversationID, messageID)
+  }, [appDetail, conversationID, messageID])
+
+  return (
+    <div className='relative flex grow flex-col'>
+      {/* tab */}
+      <div className='flex shrink-0 items-center border-b-[0.5px] border-divider-regular px-4'>
+        <div
+          className={cn(
+            'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+            currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-text-secondary',
+          )}
+          onClick={() => switchTab('DETAIL')}
+        >{t('runLog.detail')}</div>
+        <div
+          className={cn(
+            'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+            currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-text-secondary',
+          )}
+          onClick={() => switchTab('TRACING')}
+        >{t('runLog.tracing')}</div>
+      </div>
+      {/* panel detail */}
+      <div className={cn('h-0 grow overflow-y-auto rounded-b-2xl bg-components-panel-bg', currentTab !== 'DETAIL' && '!bg-background-section')}>
+        {loading && (
+          <div className='flex h-full items-center justify-center bg-components-panel-bg'>
+            <Loading />
+          </div>
+        )}
+        {!loading && currentTab === 'DETAIL' && runDetail && (
+          <ResultPanel
+            inputs={log.input}
+            outputs={log.content}
+            status={runDetail.meta.status}
+            error={runDetail.meta.error}
+            elapsed_time={runDetail.meta.elapsed_time}
+            total_tokens={runDetail.meta.total_tokens}
+            created_at={runDetail.meta.start_time}
+            created_by={runDetail.meta.executor}
+            agentMode={runDetail.meta.agent_mode}
+            tools={tools}
+            iterations={runDetail.iterations.length}
+          />
+        )}
+        {!loading && currentTab === 'TRACING' && (
+          <TracingPanel
+            list={list}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AgentLogDetail