fix: agent log structure

This commit is contained in:
zxhlyh 2024-12-30 10:23:03 +08:00
parent b5ad9a58f7
commit 84febd5e94
8 changed files with 74 additions and 32 deletions

View File

@ -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' />

View File

@ -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' />

View File

@ -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}
/>
))
}

View File

@ -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,
}
}

View File

@ -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}
/>
)
}

View File

@ -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}
/>
)
}

View File

@ -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}
/>
)
}

View File

@ -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}
/>
)
}