'use client' import type { FC } from 'react' import React, { useCallback, useEffect, useMemo, useState } from 'react' import { useContext } from 'use-context-selector' import { useTranslation } from 'react-i18next' import { flatten, uniq } from 'lodash-es' import ResultPanel from './result' import TracingPanel from './tracing' import cn from '@/utils/classnames' import { ToastContext } from '@/app/components/base/toast' import Loading from '@/app/components/base/loading' import { fetchAgentLogDetail } from '@/service/log' import type { AgentIteration, AgentLogDetailResponse } from '@/models/log' import { useStore as useAppStore } from '@/app/components/app/store' import type { IChatItem } from '@/app/components/base/chat/chat/type' export type AgentLogDetailProps = { activeTab?: 'DETAIL' | 'TRACING' conversationID: string log: IChatItem messageID: string } const AgentLogDetail: FC = ({ activeTab = 'DETAIL', conversationID, messageID, log, }) => { const { t } = useTranslation() const { notify } = useContext(ToastContext) const [currentTab, setCurrentTab] = useState(activeTab) const appDetail = useAppStore(s => s.appDetail) const [loading, setLoading] = useState(true) const [runDetail, setRunDetail] = useState() const [list, setList] = useState([]) const tools = useMemo(() => { const res = uniq(flatten(runDetail?.iterations.map((iteration: any) => { return iteration.tool_calls.map((tool: any) => tool.tool_name).filter(Boolean) })).filter(Boolean)) return res }, [runDetail]) const getLogDetail = useCallback(async (appID: string, conversationID: string, messageID: string) => { try { const res = await fetchAgentLogDetail({ appID, params: { conversation_id: conversationID, message_id: messageID, }, }) setRunDetail(res) setList(res.iterations) } catch (err) { notify({ type: 'error', message: `${err}`, }) } }, [notify]) const getData = async (appID: string, conversationID: string, messageID: string) => { setLoading(true) await getLogDetail(appID, conversationID, messageID) setLoading(false) } const switchTab = async (tab: string) => { setCurrentTab(tab) } useEffect(() => { // fetch data if (appDetail) getData(appDetail.id, conversationID, messageID) }, [appDetail, conversationID, messageID]) return (
{/* tab */}
switchTab('DETAIL')} >{t('runLog.detail')}
switchTab('TRACING')} >{t('runLog.tracing')}
{/* panel detail */}
{loading && (
)} {!loading && currentTab === 'DETAIL' && runDetail && ( )} {!loading && currentTab === 'TRACING' && ( )}
) } export default AgentLogDetail