From 84febd5e94f85ff53e1eabd6fe9de9f36120f47f Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Mon, 30 Dec 2024 10:23:03 +0800
Subject: [PATCH] fix: agent log structure

---
 .../workflow/run/agent-log/agent-log-item.tsx |  4 ++-
 .../run/agent-log/agent-log-trigger.tsx       |  6 ++--
 .../run/agent-log/agent-result-panel.tsx      | 13 ++++++--
 web/app/components/workflow/run/hooks.ts      | 33 ++++++++++++++++---
 web/app/components/workflow/run/node.tsx      |  8 ++---
 .../components/workflow/run/result-panel.tsx  | 13 +++++---
 .../workflow/run/special-result-panel.tsx     | 17 ++++++----
 .../components/workflow/run/tracing-panel.tsx | 12 ++++---
 8 files changed, 74 insertions(+), 32 deletions(-)

diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index d9e7616e8c..26c734874d 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -12,9 +12,11 @@ import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
 type AgentLogItemProps = {
   item: AgentLogItemWithChildren
+  onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void
 }
 const AgentLogItem = ({
   item,
+  onShowAgentOrToolLog,
 }: AgentLogItemProps) => {
   const {
     label,
@@ -51,7 +53,7 @@ const AgentLogItem = ({
                 <Button
                   className='flex items-center justify-between mb-1 w-full'
                   variant='tertiary'
-                  onClick={() => {}}
+                  onClick={() => onShowAgentOrToolLog(item)}
                 >
                   <div className='flex items-center'>
                     <RiListView className='mr-1 w-4 h-4 text-components-button-tertiary-text shrink-0' />
diff --git a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
index d50b5b4c55..150d1d713d 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-trigger.tsx
@@ -6,11 +6,11 @@ import type {
 
 type AgentLogTriggerProps = {
   nodeInfo: NodeTracing
-  onShowAgentResultList: (agentLogs: AgentLogItemWithChildren[]) => void
+  onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void
 }
 const AgentLogTrigger = ({
   nodeInfo,
-  onShowAgentResultList,
+  onShowAgentOrToolLog,
 }: AgentLogTriggerProps) => {
   const { agentLog } = nodeInfo
 
@@ -24,7 +24,7 @@ const AgentLogTrigger = ({
         <div className='grow mx-0.5 px-1 system-xs-medium text-text-secondary'></div>
         <div
           className='shrink-0 flex items-center px-[1px] system-xs-regular-uppercase text-text-tertiary cursor-pointer'
-          onClick={() => onShowAgentResultList(agentLog || [])}
+          onClick={() => onShowAgentOrToolLog({ id: nodeInfo.id, children: agentLog || [] } as AgentLogItemWithChildren)}
         >
           Detail
           <RiArrowRightLine className='ml-0.5 w-3.5 h-3.5' />
diff --git a/web/app/components/workflow/run/agent-log/agent-result-panel.tsx b/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
index 79b207c657..8055ec3486 100644
--- a/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-result-panel.tsx
@@ -3,12 +3,18 @@ import AgentLogNav from './agent-log-nav'
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 
 type AgentResultPanelProps = {
-  list: AgentLogItemWithChildren[]
-  setAgentResultList: (list: AgentLogItemWithChildren[]) => void
+  agentOrToolLogIdStack: string[]
+  agentOrToolLogListMap: Record<string, AgentLogItemWithChildren[]>
+  onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void
 }
 const AgentResultPanel = ({
-  list,
+  agentOrToolLogIdStack,
+  agentOrToolLogListMap,
+  onShowAgentOrToolLog,
 }: AgentResultPanelProps) => {
+  const top = agentOrToolLogIdStack[agentOrToolLogIdStack.length - 1]
+  const list = agentOrToolLogListMap[top]
+
   return (
     <div className='overflow-y-auto'>
       <AgentLogNav />
@@ -19,6 +25,7 @@ const AgentResultPanel = ({
               <AgentLogItem
                 key={item.id}
                 item={item}
+                onShowAgentOrToolLog={onShowAgentOrToolLog}
               />
             ))
           }
diff --git a/web/app/components/workflow/run/hooks.ts b/web/app/components/workflow/run/hooks.ts
index 9b835202f6..d14e39ce47 100644
--- a/web/app/components/workflow/run/hooks.ts
+++ b/web/app/components/workflow/run/hooks.ts
@@ -1,5 +1,6 @@
 import {
   useCallback,
+  useRef,
   useState,
 } from 'react'
 import { useBoolean } from 'ahooks'
@@ -32,10 +33,33 @@ export const useLogs = () => {
     setIterationResultDurationMap(iterDurationMap)
   }, [setShowIteratingDetailTrue, setIterationResultList, setIterationResultDurationMap])
 
-  const [agentResultList, setAgentResultList] = useState<AgentLogItemWithChildren[]>([])
+  const [agentOrToolLogIdStack, setAgentOrToolLogIdStack] = useState<string[]>([])
+  const agentOrToolLogIdStackRef = useRef(agentOrToolLogIdStack)
+  const [agentOrToolLogListMap, setAgentOrToolLogListMap] = useState<Record<string, AgentLogItemWithChildren[]>>({})
+  const agentOrToolLogListMapRef = useRef(agentOrToolLogListMap)
+  const handleShowAgentOrToolLog = useCallback((detail: AgentLogItemWithChildren) => {
+    const { id, children } = detail
+    let currentAgentOrToolLogIdStack = agentOrToolLogIdStackRef.current.slice()
+    const index = currentAgentOrToolLogIdStack.findIndex(logId => logId === id)
+
+    if (index > -1)
+      currentAgentOrToolLogIdStack = currentAgentOrToolLogIdStack.slice(0, index + 1)
+    else
+      currentAgentOrToolLogIdStack = [...currentAgentOrToolLogIdStack.slice(), id]
+
+    setAgentOrToolLogIdStack(currentAgentOrToolLogIdStack)
+    agentOrToolLogIdStackRef.current = currentAgentOrToolLogIdStack
+
+    if (children) {
+      setAgentOrToolLogListMap({
+        ...agentOrToolLogListMapRef.current,
+        [id]: children,
+      })
+    }
+  }, [setAgentOrToolLogIdStack, setAgentOrToolLogListMap])
 
   return {
-    showSpecialResultPanel: showRetryDetail || showIteratingDetail || !!agentResultList.length,
+    showSpecialResultPanel: showRetryDetail || showIteratingDetail || !!agentOrToolLogIdStack.length,
     showRetryDetail,
     setShowRetryDetailTrue,
     setShowRetryDetailFalse,
@@ -52,7 +76,8 @@ export const useLogs = () => {
     setIterationResultDurationMap,
     handleShowIterationResultList,
 
-    agentResultList,
-    setAgentResultList,
+    agentOrToolLogIdStack,
+    agentOrToolLogListMap,
+    handleShowAgentOrToolLog,
   }
 }
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index b35e3d89bc..010a3db22a 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -34,7 +34,7 @@ type Props = {
   hideProcessDetail?: boolean
   onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
   onShowRetryDetail?: (detail: NodeTracing[]) => void
-  onShowAgentResultList?: (detail: AgentLogItemWithChildren[]) => void
+  onShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void
   notShowIterationNav?: boolean
 }
 
@@ -46,7 +46,7 @@ const NodePanel: FC<Props> = ({
   hideProcessDetail,
   onShowIterationDetail,
   onShowRetryDetail,
-  onShowAgentResultList,
+  onShowAgentOrToolLog,
   notShowIterationNav,
 }) => {
   const [collapseState, doSetCollapseState] = useState<boolean>(true)
@@ -144,10 +144,10 @@ const NodePanel: FC<Props> = ({
               />
             )}
             {
-              isAgentNode && onShowAgentResultList && (
+              isAgentNode && onShowAgentOrToolLog && (
                 <AgentLogTrigger
                   nodeInfo={nodeInfo}
-                  onShowAgentResultList={onShowAgentResultList}
+                  onShowAgentOrToolLog={onShowAgentOrToolLog}
                 />
               )
             }
diff --git a/web/app/components/workflow/run/result-panel.tsx b/web/app/components/workflow/run/result-panel.tsx
index ce86c73b9f..727536ced3 100644
--- a/web/app/components/workflow/run/result-panel.tsx
+++ b/web/app/components/workflow/run/result-panel.tsx
@@ -6,7 +6,10 @@ import MetaData from './meta'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/error-handle/error-handle-tip'
-import type { NodeTracing } from '@/types/workflow'
+import type {
+  AgentLogItemWithChildren,
+  NodeTracing,
+} from '@/types/workflow'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { hasRetryNode } from '@/app/components/workflow/utils'
 import { IterationLogTrigger } from '@/app/components/workflow/run/iteration-log'
@@ -31,7 +34,7 @@ type ResultPanelProps = {
   execution_metadata?: any
   handleShowIterationResultList?: (detail: NodeTracing[][], iterDurationMap: any) => void
   onShowRetryDetail?: (detail: NodeTracing[]) => void
-  onShowAgentResultList?: () => void
+  handleShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void
 }
 
 const ResultPanel: FC<ResultPanelProps> = ({
@@ -51,7 +54,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
   execution_metadata,
   handleShowIterationResultList,
   onShowRetryDetail,
-  onShowAgentResultList,
+  handleShowAgentOrToolLog,
 }) => {
   const { t } = useTranslation()
   const isIterationNode = nodeInfo?.node_type === BlockEnum.Iteration
@@ -87,10 +90,10 @@ const ResultPanel: FC<ResultPanelProps> = ({
           )
         }
         {
-          isAgentNode && onShowAgentResultList && (
+          isAgentNode && handleShowAgentOrToolLog && (
             <AgentLogTrigger
               nodeInfo={nodeInfo}
-              onShowAgentResultList={onShowAgentResultList}
+              onShowAgentOrToolLog={handleShowAgentOrToolLog}
             />
           )
         }
diff --git a/web/app/components/workflow/run/special-result-panel.tsx b/web/app/components/workflow/run/special-result-panel.tsx
index 4bf125b15e..ec3e93417c 100644
--- a/web/app/components/workflow/run/special-result-panel.tsx
+++ b/web/app/components/workflow/run/special-result-panel.tsx
@@ -17,8 +17,9 @@ export type SpecialResultPanelProps = {
   iterationResultList?: NodeTracing[][]
   iterationResultDurationMap?: IterationDurationMap
 
-  agentResultList?: AgentLogItemWithChildren[]
-  setAgentResultList?: (list: AgentLogItemWithChildren[]) => void
+  agentOrToolLogIdStack?: string[]
+  agentOrToolLogListMap?: Record<string, AgentLogItemWithChildren[]>
+  handleShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void
 }
 const SpecialResultPanel = ({
   showRetryDetail,
@@ -30,8 +31,9 @@ const SpecialResultPanel = ({
   iterationResultList,
   iterationResultDurationMap,
 
-  agentResultList,
-  setAgentResultList,
+  agentOrToolLogIdStack,
+  agentOrToolLogListMap,
+  handleShowAgentOrToolLog,
 }: SpecialResultPanelProps) => {
   return (
     <>
@@ -53,10 +55,11 @@ const SpecialResultPanel = ({
         )
       }
       {
-        !!agentResultList?.length && setAgentResultList && (
+        !!agentOrToolLogIdStack?.length && agentOrToolLogListMap && handleShowAgentOrToolLog && (
           <AgentResultPanel
-            list={agentResultList}
-            setAgentResultList={setAgentResultList}
+            agentOrToolLogIdStack={agentOrToolLogIdStack}
+            agentOrToolLogListMap={agentOrToolLogListMap}
+            onShowAgentOrToolLog={handleShowAgentOrToolLog}
           />
         )
       }
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 29b8838825..557c58c532 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -79,8 +79,9 @@ const TracingPanel: FC<TracingPanelProps> = ({
     iterationResultDurationMap,
     handleShowIterationResultList,
 
-    agentResultList,
-    setAgentResultList,
+    agentOrToolLogIdStack,
+    agentOrToolLogListMap,
+    handleShowAgentOrToolLog,
   } = useLogs()
 
   const renderNode = (node: NodeTracing) => {
@@ -136,7 +137,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
             nodeInfo={node!}
             onShowIterationDetail={handleShowIterationResultList}
             onShowRetryDetail={handleShowRetryResultList}
-            onShowAgentResultList={setAgentResultList}
+            onShowAgentOrToolLog={handleShowAgentOrToolLog}
             hideInfo={hideNodeInfo}
             hideProcessDetail={hideNodeProcessDetail}
           />
@@ -157,8 +158,9 @@ const TracingPanel: FC<TracingPanelProps> = ({
         iterationResultList={iterationResultList}
         iterationResultDurationMap={iterationResultDurationMap}
 
-        agentResultList={agentResultList}
-        setAgentResultList={setAgentResultList}
+        agentOrToolLogIdStack={agentOrToolLogIdStack}
+        agentOrToolLogListMap={agentOrToolLogListMap}
+        handleShowAgentOrToolLog={handleShowAgentOrToolLog}
       />
     )
   }