From 586f9d8d891c17efe2e1958a97abf2762f9c59f9 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Wed, 8 Jan 2025 16:46:07 +0800
Subject: [PATCH] fix: agent log

---
 .../workflow/run/agent-log/agent-log-item.tsx |  2 +-
 .../workflow/run/agent-log/agent-log-nav.tsx  | 55 +++++++++++++------
 .../run/agent-log/agent-log-trigger.tsx       |  6 +-
 .../run/agent-log/agent-result-panel.tsx      | 10 ++--
 web/i18n/en-US/run-log.ts                     |  2 +
 web/i18n/zh-Hans/run-log.ts                   |  2 +
 6 files changed, 53 insertions(+), 24 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 8403dd68dc..36b1d78bc6 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
@@ -27,7 +27,7 @@ const AgentLogItem = ({
   const [expanded, setExpanded] = useState(false)
 
   return (
-    <div className='border-[0.5px] border-components-panel-border rounded-[10px]'>
+    <div className='bg-background-default border-[0.5px] border-components-panel-border rounded-[10px]'>
       <div
         className={cn(
           'flex items-center pl-1.5 pt-2 pr-3 pb-2 cursor-pointer',
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
index d0cffc6a58..0506f5ded0 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
@@ -1,4 +1,5 @@
 import { RiArrowLeftLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import AgentLogNavMore from './agent-log-nav-more'
 import Button from '@/app/components/base/button'
 import type { AgentLogItemWithChildren } from '@/types/workflow'
@@ -11,10 +12,14 @@ const AgentLogNav = ({
   agentOrToolLogItemStack,
   onShowAgentOrToolLog,
 }: AgentLogNavProps) => {
-  const options = agentOrToolLogItemStack.slice(2)
+  const { t } = useTranslation()
+  const agentOrToolLogItemStackLength = agentOrToolLogItemStack.length
+  const first = agentOrToolLogItemStack[0]
+  const mid = agentOrToolLogItemStack.slice(1, -1)
+  const end = agentOrToolLogItemStack.at(-1)
 
   return (
-    <div className='flex items-center p-1 pr-3 h-8'>
+    <div className='flex items-center p-1 pr-3 h-8 bg-components-panel-bg'>
       <Button
         className='shrink-0 px-[5px]'
         size='small'
@@ -24,32 +29,48 @@ const AgentLogNav = ({
         }}
       >
         <RiArrowLeftLine className='mr-1 w-3.5 h-3.5' />
-        Agent
+        AGENT
       </Button>
       <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
-      <Button
-        className='shrink-0 px-[5px]'
-        size='small'
-        variant='ghost-accent'
-        onClick={() => {}}
-      >
-        Agent strategy
-      </Button>
       {
-        !!options.length && (
+        agentOrToolLogItemStackLength > 1
+          ? (
+            <Button
+              className='shrink-0 px-[5px]'
+              size='small'
+              variant='ghost-accent'
+              onClick={() => onShowAgentOrToolLog(first)}
+            >
+              {t('workflow.nodes.agent.strategy.label')}
+            </Button>
+          )
+          : (
+            <div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
+              {t('workflow.nodes.agent.strategy.label')}
+            </div>
+          )
+      }
+      {
+        !!mid.length && (
           <>
             <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
             <AgentLogNavMore
-              options={options}
+              options={mid}
               onShowAgentOrToolLog={onShowAgentOrToolLog}
             />
           </>
         )
       }
-      <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
-      <div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
-        Run Actions
-      </div>
+      {
+        !!end && agentOrToolLogItemStackLength > 2 && (
+          <>
+            <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
+            <div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
+              {end.label}
+            </div>
+          </>
+        )
+      }
     </div>
   )
 }
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 987c3afc2a..589624f559 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
@@ -1,4 +1,5 @@
 import { RiArrowRightLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import type {
   AgentLogItemWithChildren,
   NodeTracing,
@@ -12,12 +13,13 @@ const AgentLogTrigger = ({
   nodeInfo,
   onShowAgentOrToolLog,
 }: AgentLogTriggerProps) => {
+  const { t } = useTranslation()
   const { agentLog } = nodeInfo
 
   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
+        {t('workflow.nodes.agent.strategy.label')}
       </div>
       <div className='flex items-center pl-3 pt-1 pr-2 pb-1.5'>
         <div className='shrink-0 w-5 h-5'></div>
@@ -28,7 +30,7 @@ const AgentLogTrigger = ({
             onShowAgentOrToolLog({ id: nodeInfo.id, children: agentLog || [] } as AgentLogItemWithChildren)
           }}
         >
-          Detail
+          {t('runLog.detail')}
           <RiArrowRightLine className='ml-0.5 w-3.5 h-3.5' />
         </div>
       </div>
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 d02e69f8da..e2d2b24966 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
@@ -1,4 +1,5 @@
 import { RiAlertFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import AgentLogItem from './agent-log-item'
 import AgentLogNav from './agent-log-nav'
 import type { AgentLogItemWithChildren } from '@/types/workflow'
@@ -13,17 +14,18 @@ const AgentResultPanel = ({
   agentOrToolLogListMap,
   onShowAgentOrToolLog,
 }: AgentResultPanelProps) => {
+  const { t } = useTranslation()
   const top = agentOrToolLogItemStack[agentOrToolLogItemStack.length - 1]
   const list = agentOrToolLogListMap[top.id]
 
   return (
-    <div className='overflow-y-auto'>
+    <div className='bg-background-section overflow-y-auto'>
       <AgentLogNav
         agentOrToolLogItemStack={agentOrToolLogItemStack}
         onShowAgentOrToolLog={onShowAgentOrToolLog}
       />
       {
-        <div className='p-2'>
+        <div className='p-2 space-y-1'>
           {
             list.map(item => (
               <AgentLogItem
@@ -37,7 +39,7 @@ const AgentResultPanel = ({
       }
       {
         top.hasCircle && (
-          <div className='flex items-center rounded-xl px-3 pr-2 border border-components-panel-border bg-components-panel-bg-blur shadow-md'>
+          <div className='flex items-center mt-1 rounded-xl px-3 pr-2 border border-components-panel-border bg-components-panel-bg-blur shadow-md'>
             <div
               className='absolute inset-0 opacity-[0.4] rounded-xl'
               style={{
@@ -46,7 +48,7 @@ const AgentResultPanel = ({
             ></div>
             <RiAlertFill className='mr-1.5 w-4 h-4 text-text-warning-secondary' />
             <div className='system-xs-medium text-text-primary'>
-              There is circular invocation of tools/nodes in the current workflow.
+              {t('runLog.circularInvocationTip')}
             </div>
           </div>
         )
diff --git a/web/i18n/en-US/run-log.ts b/web/i18n/en-US/run-log.ts
index 33fe5c1735..3c851f4548 100644
--- a/web/i18n/en-US/run-log.ts
+++ b/web/i18n/en-US/run-log.ts
@@ -24,6 +24,8 @@ const translation = {
     link: 'detail panel',
     tipRight: ' view it.',
   },
+  actionLogs: 'Action Logs',
+  circularInvocationTip: 'There is circular invocation of tools/nodes in the current workflow.',
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/run-log.ts b/web/i18n/zh-Hans/run-log.ts
index 225874d827..dc93e9aeb0 100644
--- a/web/i18n/zh-Hans/run-log.ts
+++ b/web/i18n/zh-Hans/run-log.ts
@@ -24,6 +24,8 @@ const translation = {
     link: '详细信息面板',
     tipRight: '查看它。',
   },
+  actionLogs: 'Action 日志',
+  circularInvocationTip: '当前工作流中存在工具/节点的循环调用。',
 }
 
 export default translation