refact workflow run log

web/app/components/workflow/run/agent-log/agent-log-trigger.tsx

@@ -0,0 +1,29 @@
+import { RiArrowRightLine } from '@remixicon/react'
+
+type AgentLogTriggerProps = {
+  onDetail?: () => void
+}
+const AgentLogTrigger = ({
+  onDetail,
+}: AgentLogTriggerProps) => {
+  return (
+    <div className='bg-components-button-tertiary-bg rounded-[10px]'>
+      <div className='flex items-center px-3 pt-2 system-2xs-medium-uppercase text-text-tertiary'>
+        Agent strategy
+      </div>
+      <div className='flex items-center pl-3 pt-1 pr-2 pb-1.5'>
+        <div className='shrink-0 w-5 h-5'></div>
+        <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={onDetail}
+        >
+          Detail
+          <RiArrowRightLine className='ml-0.5 w-3.5 h-3.5' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AgentLogTrigger

web/app/components/workflow/run/agent-log/agent-result-panel.tsx

@@ -0,0 +1,43 @@
+import Button from '@/app/components/base/button'
+import { RiArrowLeftLine } from '@remixicon/react'
+import TracingPanel from '../tracing-panel'
+
+type AgentResultPanelProps = {
+  onBack: () => void
+}
+const AgentResultPanel = ({
+  onBack,
+}: AgentResultPanelProps) => {
+  return (
+    <div className='overflow-y-auto'>
+      <div className='flex items-center p-1 pr-3 h-8'>
+        <Button
+          className='shrink-0 px-[5px]'
+          size='small'
+          variant='ghost-accent'
+          onClick={onBack}
+        >
+          <RiArrowLeftLine className='mr-1 w-3.5 h-3.5' />
+          Back
+        </Button>
+        <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
+        <div className='grow px-[5px] system-xs-medium-uppercase'>
+          Agent strategy
+        </div>
+        <Button
+          className='px-[5px]'
+          size='small'
+          variant='ghost-accent'
+          onClick={onBack}
+        >
+          close
+        </Button>
+      </div>
+      <TracingPanel
+        list={[]}
+      />
+    </div>
+  )
+}
+
+export default AgentResultPanel

web/app/components/workflow/run/agent-log/tool-call-result-panel.tsx

@@ -0,0 +1,45 @@
+import Button from '@/app/components/base/button'
+import { RiArrowLeftLine } from '@remixicon/react'
+import TracingPanel from '../tracing-panel'
+
+type ToolCallResultPanelProps = {
+  onBack: () => void
+  onClose: () => void
+}
+const ToolCallResultPanel = ({
+  onBack,
+  onClose,
+}: ToolCallResultPanelProps) => {
+  return (
+    <div className='overflow-y-auto'>
+      <div className='flex items-center p-1 pr-3 h-8'>
+        <Button
+          className='shrink-0 px-[5px]'
+          size='small'
+          variant='ghost-accent'
+          onClick={onBack}
+        >
+          <RiArrowLeftLine className='mr-1 w-3.5 h-3.5' />
+          Back
+        </Button>
+        <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
+        <div className='grow px-[5px] system-xs-medium-uppercase'>
+          10 Logs
+        </div>
+        <Button
+          className='px-[5px]'
+          size='small'
+          variant='ghost-accent'
+          onClick={onClose}
+        >
+          close
+        </Button>
+      </div>
+      <TracingPanel
+        list={[]}
+      />
+    </div>
+  )
+}
+
+export default ToolCallResultPanel

web/app/components/workflow/run/hooks.ts

@@ -0,0 +1,48 @@
+import {
+  useCallback,
+  useState,
+} from 'react'
+import { useBoolean } from 'ahooks'
+import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
+
+export const useLogs = () => {
+  const [showRetryDetail, {
+    setTrue: setShowRetryDetailTrue,
+    setFalse: setShowRetryDetailFalse,
+  }] = useBoolean(false)
+  const [retryResultList, setRetryResultList] = useState<NodeTracing[]>([])
+  const handleShowRetryResultList = useCallback((detail: NodeTracing[]) => {
+    setShowRetryDetailTrue()
+    setRetryResultList(detail)
+  }, [setShowRetryDetailTrue, setRetryResultList])
+
+  const [showIteratingDetail, {
+    setTrue: setShowIteratingDetailTrue,
+    setFalse: setShowIteratingDetailFalse,
+  }] = useBoolean(false)
+  const [iterationResultList, setIterationResultList] = useState<NodeTracing[][]>([])
+  const [iterationResultDurationMap, setIterationResultDurationMap] = useState<IterationDurationMap>({})
+  const handleShowIterationResultList = useCallback((detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => {
+    setShowIteratingDetailTrue()
+    setIterationResultList(detail)
+    setIterationResultDurationMap(iterDurationMap)
+  }, [setShowIteratingDetailTrue, setIterationResultList, setIterationResultDurationMap])
+
+  return {
+    showSpecialResultPanel: !showRetryDetail && !showIteratingDetail,
+    showRetryDetail,
+    setShowRetryDetailTrue,
+    setShowRetryDetailFalse,
+    retryResultList,
+    setRetryResultList,
+    handleShowRetryResultList,
+    showIteratingDetail,
+    setShowIteratingDetailTrue,
+    setShowIteratingDetailFalse,
+    iterationResultList,
+    setIterationResultList,
+    iterationResultDurationMap,
+    setIterationResultDurationMap,
+    handleShowIterationResultList,
+  }
+}

web/app/components/workflow/run/index.tsx

@@ -3,17 +3,16 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import { useBoolean } from 'ahooks'
 import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
-import IterationResultPanel from './iteration-result-panel'
+import SpecialResultPanel from './special-result-panel'
-import RetryResultPanel from './retry-result-panel'
+import { useLogs } from './hooks'
 import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
-import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
+import type { NodeTracing } from '@/types/workflow'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import formatNodeList from './utils/format-log'
@@ -106,41 +105,18 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
     adjustResultHeight()
   }, [loading])
 
-  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
+  const {
-  const [iterDurationMap, setIterDurationMap] = useState<IterationDurationMap>({})
+    showRetryDetail,
-  const [retryRunResult, setRetryRunResult] = useState<NodeTracing[]>([])
+    setShowRetryDetailFalse,
-  const [isShowIterationDetail, {
+    retryResultList,
-    setTrue: doShowIterationDetail,
+    handleShowRetryResultList,
-    setFalse: doHideIterationDetail,
+    showIteratingDetail,
-  }] = useBoolean(false)
+    setShowIteratingDetailFalse,
-  const [isShowRetryDetail, {
+    iterationResultList,
-    setTrue: doShowRetryDetail,
+    iterationResultDurationMap,
-    setFalse: doHideRetryDetail,
+    handleShowIterationResultList,
-  }] = useBoolean(false)
+    showSpecialResultPanel,
-
+  } = useLogs()
-  const handleShowIterationDetail = useCallback((detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => {
-    setIterationRunResult(detail)
-    doShowIterationDetail()
-    setIterDurationMap(iterDurationMap)
-  }, [doShowIterationDetail, setIterationRunResult, setIterDurationMap])
-
-  const handleShowRetryDetail = useCallback((detail: NodeTracing[]) => {
-    setRetryRunResult(detail)
-    doShowRetryDetail()
-  }, [doShowRetryDetail, setRetryRunResult])
-
-  if (isShowIterationDetail) {
-    return (
-      <div className='grow relative flex flex-col'>
-        <IterationResultPanel
-          list={iterationRunResult}
-          onHide={doHideIterationDetail}
-          onBack={doHideIterationDetail}
-          iterDurationMap={iterDurationMap}
-        />
-      </div>
-    )
-  }
 
   return (
     <div className='grow relative flex flex-col'>
@@ -198,19 +174,25 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
             exceptionCounts={runDetail.exceptions_count}
           />
         )}
-        {!loading && currentTab === 'TRACING' && !isShowRetryDetail && (
+        {!loading && currentTab === 'TRACING' && !showSpecialResultPanel && (
           <TracingPanel
             className='bg-background-section-burn'
             list={list}
-            onShowIterationDetail={handleShowIterationDetail}
+            onShowIterationDetail={handleShowIterationResultList}
-            onShowRetryDetail={handleShowRetryDetail}
+            onShowRetryDetail={handleShowRetryResultList}
           />
         )}
         {
-          !loading && currentTab === 'TRACING' && isShowRetryDetail && (
+          !loading && currentTab === 'TRACING' && showSpecialResultPanel && (
-            <RetryResultPanel
+            <SpecialResultPanel
-              list={retryRunResult}
+              showRetryDetail={showRetryDetail}
-              onBack={doHideRetryDetail}
+              setShowRetryDetailFalse={setShowRetryDetailFalse}
+              retryResultList={retryResultList}
+
+              showIteratingDetail={showIteratingDetail}
+              setShowIteratingDetailFalse={setShowIteratingDetailFalse}
+              iterationResultList={iterationResultList}
+              iterationResultDurationMap={iterationResultDurationMap}
             />
           )
         }

web/app/components/workflow/run/node.tsx

@@ -187,10 +187,10 @@ const NodePanel: FC<Props> = ({
                 onClick={handleOnShowRetryDetail}
               >
                 <div className='flex items-center'>
-                  <RiRestartFill className='mr-0.5 w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                  <RiRestartFill className='mr-0.5 w-4 h-4 text-components-button-tertiary-text shrink-0' />
                   {t('workflow.nodes.common.retry.retries', { num: nodeInfo.retryDetail?.length })}
                 </div>
-                <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
               </Button>
             )}
             <div className={cn('mb-1', hideInfo && '!px-2 !py-0.5')}>

web/app/components/workflow/run/special-result-panel.tsx

@@ -0,0 +1,49 @@
+import RetryResultPanel from './retry-result-panel'
+import IterationResultPanel from './iteration-result-panel'
+import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
+
+type SpecialResultPanelProps = {
+  showRetryDetail: boolean
+  setShowRetryDetailFalse: () => void
+  retryResultList: NodeTracing[]
+
+  showIteratingDetail: boolean
+  setShowIteratingDetailFalse: () => void
+  iterationResultList: NodeTracing[][]
+  iterationResultDurationMap: IterationDurationMap
+}
+const SpecialResultPanel = ({
+  showRetryDetail,
+  setShowRetryDetailFalse,
+  retryResultList,
+
+  showIteratingDetail,
+  setShowIteratingDetailFalse,
+  iterationResultList,
+  iterationResultDurationMap,
+}: SpecialResultPanelProps) => {
+  return (
+    <>
+      {
+        showRetryDetail && (
+          <RetryResultPanel
+            list={retryResultList}
+            onBack={setShowRetryDetailFalse}
+          />
+        )
+      }
+      {
+        showIteratingDetail && (
+          <IterationResultPanel
+            list={iterationResultList}
+            onHide={setShowIteratingDetailFalse}
+            onBack={setShowIteratingDetailFalse}
+            iterDurationMap={iterationResultDurationMap}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default SpecialResultPanel