diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx index f3179492ce..f965a86f31 100644 --- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx +++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx @@ -6,12 +6,15 @@ import { PortalToFollowElemTrigger, } from '@/app/components/base/portal-to-follow-elem' import Button from '@/app/components/base/button' +import type { AgentLogItemWithChildren } from '@/types/workflow' type AgentLogNavMoreProps = { options: { id: string; label: string }[] + onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void } const AgentLogNavMore = ({ options, + onShowAgentOrToolLog, }: AgentLogNavMoreProps) => { const [open, setOpen] = useState(false) @@ -40,6 +43,10 @@ const AgentLogNavMore = ({
{ + onShowAgentOrToolLog(option as AgentLogItemWithChildren) + setOpen(false) + }} > {option.label}
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 00166b398b..50501ef026 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,15 +1,28 @@ import { RiArrowLeftLine } from '@remixicon/react' import AgentLogNavMore from './agent-log-nav-more' import Button from '@/app/components/base/button' +import type { AgentLogItemWithChildren } from '@/types/workflow' + +type AgentLogNavProps = { + agentOrToolLogItemStack: { id: string; label: string }[] + agentOrToolLogListMap: Record + onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void +} +const AgentLogNav = ({ + agentOrToolLogItemStack, + agentOrToolLogListMap, + onShowAgentOrToolLog, +}: AgentLogNavProps) => { + const top = agentOrToolLogItemStack[agentOrToolLogItemStack.length - 1] + const options = agentOrToolLogListMap[top.id] -const AgentLogNav = () => { return (
/
/
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 150d1d713d..825f59f085 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,7 +6,7 @@ import type { type AgentLogTriggerProps = { nodeInfo: NodeTracing - onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void + onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void } const AgentLogTrigger = ({ nodeInfo, 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 8055ec3486..fe40d751d3 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,21 +3,25 @@ import AgentLogNav from './agent-log-nav' import type { AgentLogItemWithChildren } from '@/types/workflow' type AgentResultPanelProps = { - agentOrToolLogIdStack: string[] + agentOrToolLogItemStack: { id: string; label: string }[] agentOrToolLogListMap: Record - onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void + onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void } const AgentResultPanel = ({ - agentOrToolLogIdStack, + agentOrToolLogItemStack, agentOrToolLogListMap, onShowAgentOrToolLog, }: AgentResultPanelProps) => { - const top = agentOrToolLogIdStack[agentOrToolLogIdStack.length - 1] - const list = agentOrToolLogListMap[top] + const top = agentOrToolLogItemStack[agentOrToolLogItemStack.length - 1] + const list = agentOrToolLogListMap[top.id] return (
- + {
{ diff --git a/web/app/components/workflow/run/hooks.ts b/web/app/components/workflow/run/hooks.ts index d14e39ce47..b9c879a204 100644 --- a/web/app/components/workflow/run/hooks.ts +++ b/web/app/components/workflow/run/hooks.ts @@ -33,22 +33,27 @@ export const useLogs = () => { setIterationResultDurationMap(iterDurationMap) }, [setShowIteratingDetailTrue, setIterationResultList, setIterationResultDurationMap]) - const [agentOrToolLogIdStack, setAgentOrToolLogIdStack] = useState([]) - const agentOrToolLogIdStackRef = useRef(agentOrToolLogIdStack) + const [agentOrToolLogItemStack, setAgentOrToolLogItemStack] = useState<{ id: string; label: string }[]>([]) + const agentOrToolLogItemStackRef = useRef(agentOrToolLogItemStack) const [agentOrToolLogListMap, setAgentOrToolLogListMap] = useState>({}) 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) + const handleShowAgentOrToolLog = useCallback((detail?: AgentLogItemWithChildren) => { + if (!detail) { + setAgentOrToolLogItemStack([]) + agentOrToolLogItemStackRef.current = [] + return + } + const { id, label, children } = detail + let currentAgentOrToolLogItemStack = agentOrToolLogItemStackRef.current.slice() + const index = currentAgentOrToolLogItemStack.findIndex(logItem => logItem.id === id) if (index > -1) - currentAgentOrToolLogIdStack = currentAgentOrToolLogIdStack.slice(0, index + 1) + currentAgentOrToolLogItemStack = currentAgentOrToolLogItemStack.slice(0, index + 1) else - currentAgentOrToolLogIdStack = [...currentAgentOrToolLogIdStack.slice(), id] + currentAgentOrToolLogItemStack = [...currentAgentOrToolLogItemStack.slice(), { id, label }] - setAgentOrToolLogIdStack(currentAgentOrToolLogIdStack) - agentOrToolLogIdStackRef.current = currentAgentOrToolLogIdStack + setAgentOrToolLogItemStack(currentAgentOrToolLogItemStack) + agentOrToolLogItemStackRef.current = currentAgentOrToolLogItemStack if (children) { setAgentOrToolLogListMap({ @@ -56,10 +61,10 @@ export const useLogs = () => { [id]: children, }) } - }, [setAgentOrToolLogIdStack, setAgentOrToolLogListMap]) + }, [setAgentOrToolLogItemStack, setAgentOrToolLogListMap]) return { - showSpecialResultPanel: showRetryDetail || showIteratingDetail || !!agentOrToolLogIdStack.length, + showSpecialResultPanel: showRetryDetail || showIteratingDetail || !!agentOrToolLogItemStack.length, showRetryDetail, setShowRetryDetailTrue, setShowRetryDetailFalse, @@ -76,7 +81,7 @@ export const useLogs = () => { setIterationResultDurationMap, handleShowIterationResultList, - agentOrToolLogIdStack, + agentOrToolLogItemStack, agentOrToolLogListMap, handleShowAgentOrToolLog, } diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx index 010a3db22a..2fdab2bb7b 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 - onShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void + onShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void notShowIterationNav?: boolean } diff --git a/web/app/components/workflow/run/result-panel.tsx b/web/app/components/workflow/run/result-panel.tsx index 727536ced3..a39bfe40ab 100644 --- a/web/app/components/workflow/run/result-panel.tsx +++ b/web/app/components/workflow/run/result-panel.tsx @@ -34,7 +34,7 @@ type ResultPanelProps = { execution_metadata?: any handleShowIterationResultList?: (detail: NodeTracing[][], iterDurationMap: any) => void onShowRetryDetail?: (detail: NodeTracing[]) => void - handleShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void + handleShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void } const ResultPanel: FC = ({ diff --git a/web/app/components/workflow/run/special-result-panel.tsx b/web/app/components/workflow/run/special-result-panel.tsx index ec3e93417c..f32487146d 100644 --- a/web/app/components/workflow/run/special-result-panel.tsx +++ b/web/app/components/workflow/run/special-result-panel.tsx @@ -17,9 +17,9 @@ export type SpecialResultPanelProps = { iterationResultList?: NodeTracing[][] iterationResultDurationMap?: IterationDurationMap - agentOrToolLogIdStack?: string[] + agentOrToolLogItemStack?: { id: string; label: string }[] agentOrToolLogListMap?: Record - handleShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void + handleShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void } const SpecialResultPanel = ({ showRetryDetail, @@ -31,7 +31,7 @@ const SpecialResultPanel = ({ iterationResultList, iterationResultDurationMap, - agentOrToolLogIdStack, + agentOrToolLogItemStack, agentOrToolLogListMap, handleShowAgentOrToolLog, }: SpecialResultPanelProps) => { @@ -55,9 +55,9 @@ const SpecialResultPanel = ({ ) } { - !!agentOrToolLogIdStack?.length && agentOrToolLogListMap && handleShowAgentOrToolLog && ( + !!agentOrToolLogItemStack?.length && agentOrToolLogListMap && handleShowAgentOrToolLog && ( diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx index 557c58c532..d65b7b73eb 100644 --- a/web/app/components/workflow/run/tracing-panel.tsx +++ b/web/app/components/workflow/run/tracing-panel.tsx @@ -79,7 +79,7 @@ const TracingPanel: FC = ({ iterationResultDurationMap, handleShowIterationResultList, - agentOrToolLogIdStack, + agentOrToolLogItemStack, agentOrToolLogListMap, handleShowAgentOrToolLog, } = useLogs() @@ -158,7 +158,7 @@ const TracingPanel: FC = ({ iterationResultList={iterationResultList} iterationResultDurationMap={iterationResultDurationMap} - agentOrToolLogIdStack={agentOrToolLogIdStack} + agentOrToolLogItemStack={agentOrToolLogItemStack} agentOrToolLogListMap={agentOrToolLogListMap} handleShowAgentOrToolLog={handleShowAgentOrToolLog} />