mlogclub
541e4c5874
- Updated skill handling to use skill IDs instead of skill codes in various components, services, and models. - Modified tests to reflect changes in skill identification. - Removed references to skill codes in favor of skill IDs for consistency and clarity. - Updated localization files to remove skill code references and adjust error messages accordingly.
369 lines
13 KiB
TypeScript
369 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useState } from "react"
|
|
import { SearchIcon } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
|
|
import { DashboardListPage } from "@/components/dashboard/list"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { AgentRunLogDetailDialog } from "./_components/detail"
|
|
import {
|
|
fetchAgentRunLogs,
|
|
fetchAIAgentsAll,
|
|
type AIAgent,
|
|
type AgentRunLog,
|
|
} from "@/lib/api/admin"
|
|
import { useI18n } from "@/i18n/provider"
|
|
import { formatDateTime } from "@/lib/utils"
|
|
|
|
type TFunction = (key: string, values?: Record<string, string | number>) => string
|
|
|
|
function getActionOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("agentRunLog.allActions") },
|
|
{ value: "rag", label: "RAG" },
|
|
{ value: "skill", label: "Skill" },
|
|
{ value: "tool", label: "Tool" },
|
|
{ value: "graph", label: "Graph" },
|
|
{ value: "handoff", label: t("agentRunLog.handoff") },
|
|
{ value: "reply", label: t("agentRunLog.reply") },
|
|
{ value: "fallback", label: t("agentRunLog.fallback") },
|
|
]
|
|
}
|
|
|
|
function getFinalStatusOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("agentRunLog.allStatus") },
|
|
{ value: "completed", label: "completed" },
|
|
{ value: "interrupted", label: "interrupted" },
|
|
{ value: "expired", label: "expired" },
|
|
{ value: "error", label: "error" },
|
|
{ value: "fallback", label: "fallback" },
|
|
]
|
|
}
|
|
|
|
function getHitlStatusOptions(t: TFunction) {
|
|
return [
|
|
{ value: "all", label: t("agentRunLog.allHitl") },
|
|
{ value: "pending", label: t("agentRunLog.hitlPending") },
|
|
{ value: "confirmed", label: t("agentRunLog.hitlConfirmed") },
|
|
{ value: "cancelled", label: t("agentRunLog.hitlCancelled") },
|
|
{ value: "expired", label: t("agentRunLog.hitlExpired") },
|
|
{ value: "triggered", label: t("agentRunLog.hitlTriggered") },
|
|
]
|
|
}
|
|
|
|
function getHitlStatusLabel(status: string | undefined, t: TFunction) {
|
|
switch (status) {
|
|
case "pending":
|
|
return t("agentRunLog.hitlPending")
|
|
case "confirmed":
|
|
return t("agentRunLog.hitlConfirmed")
|
|
case "cancelled":
|
|
return t("agentRunLog.hitlCancelled")
|
|
case "expired":
|
|
return t("agentRunLog.hitlExpired")
|
|
case "triggered":
|
|
return t("agentRunLog.hitlTriggered")
|
|
default:
|
|
return ""
|
|
}
|
|
}
|
|
|
|
function actionBadgeVariant(action: string) {
|
|
switch (action) {
|
|
case "handoff":
|
|
return "destructive" as const
|
|
case "skill":
|
|
return "default" as const
|
|
case "tool":
|
|
return "default" as const
|
|
case "graph":
|
|
return "default" as const
|
|
case "rag":
|
|
return "secondary" as const
|
|
case "fallback":
|
|
return "outline" as const
|
|
default:
|
|
return "secondary" as const
|
|
}
|
|
}
|
|
|
|
export default function DashboardAgentRunLogsPage() {
|
|
const t = useI18n()
|
|
const [detailOpen, setDetailOpen] = useState(false)
|
|
const [activeLogId, setActiveLogId] = useState<number | null>(null)
|
|
const [aiAgents, setAiAgents] = useState<AIAgent[]>([])
|
|
const actionOptions = useMemo(() => getActionOptions(t), [t])
|
|
const finalStatusOptions = useMemo(() => getFinalStatusOptions(t), [t])
|
|
const hitlStatusOptions = useMemo(() => getHitlStatusOptions(t), [t])
|
|
|
|
const aiAgentOptions = useMemo(
|
|
() => [
|
|
{ value: "all", label: t("agentRunLog.allAgents") },
|
|
...aiAgents.map((item) => ({
|
|
value: String(item.id),
|
|
label: item.name,
|
|
})),
|
|
],
|
|
[aiAgents, t]
|
|
)
|
|
|
|
useEffect(() => {
|
|
async function loadAIAgents() {
|
|
try {
|
|
const data = await fetchAIAgentsAll()
|
|
setAiAgents(data)
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("agentRunLog.loadAgentsFailed"))
|
|
}
|
|
}
|
|
void loadAIAgents()
|
|
}, [t])
|
|
|
|
return (
|
|
<>
|
|
<DashboardListPage<AgentRunLog>
|
|
filters={[
|
|
{
|
|
name: "userMessage",
|
|
label: t("agentRunLog.filterUserMessage"),
|
|
placeholder: t("agentRunLog.filterUserMessage"),
|
|
defaultValue: "",
|
|
trim: true,
|
|
className: "min-w-0",
|
|
inputClassName: "pl-9",
|
|
icon: <SearchIcon className="size-4" />,
|
|
},
|
|
{
|
|
name: "plannedAction",
|
|
label: t("agentRunLog.plannedAction"),
|
|
type: "select",
|
|
defaultValue: "all",
|
|
allValue: "all",
|
|
options: actionOptions,
|
|
placeholder: t("agentRunLog.plannedAction"),
|
|
searchPlaceholder: t("agentRunLog.searchAction"),
|
|
emptyText: t("agentRunLog.emptyAction"),
|
|
className: "min-w-0",
|
|
},
|
|
{
|
|
name: "finalAction",
|
|
label: t("agentRunLog.finalAction"),
|
|
type: "select",
|
|
defaultValue: "all",
|
|
allValue: "all",
|
|
options: actionOptions,
|
|
placeholder: t("agentRunLog.finalAction"),
|
|
searchPlaceholder: t("agentRunLog.searchAction"),
|
|
emptyText: t("agentRunLog.emptyAction"),
|
|
className: "min-w-0",
|
|
},
|
|
{
|
|
name: "finalStatus",
|
|
label: t("agentRunLog.finalStatus"),
|
|
type: "select",
|
|
defaultValue: "all",
|
|
allValue: "all",
|
|
options: finalStatusOptions,
|
|
placeholder: t("agentRunLog.finalStatus"),
|
|
searchPlaceholder: t("agentRunLog.searchStatus"),
|
|
emptyText: t("agentRunLog.emptyStatus"),
|
|
className: "min-w-0",
|
|
},
|
|
{
|
|
name: "hitlStatus",
|
|
label: t("agentRunLog.hitlStatus"),
|
|
type: "select",
|
|
defaultValue: "all",
|
|
allValue: "all",
|
|
options: hitlStatusOptions,
|
|
placeholder: t("agentRunLog.hitlStatus"),
|
|
searchPlaceholder: t("agentRunLog.searchHitl"),
|
|
emptyText: t("agentRunLog.emptyStatus"),
|
|
className: "min-w-0",
|
|
},
|
|
{
|
|
name: "aiAgentId",
|
|
label: t("agentRunLog.selectAgent"),
|
|
type: "select",
|
|
defaultValue: "all",
|
|
allValue: "all",
|
|
options: aiAgentOptions,
|
|
placeholder: t("agentRunLog.selectAgent"),
|
|
searchPlaceholder: t("agentRunLog.searchAgent"),
|
|
emptyText: t("agentRunLog.emptyAgent"),
|
|
className: "min-w-0",
|
|
},
|
|
]}
|
|
fetchList={fetchAgentRunLogs}
|
|
renderContent={({ result, loading }) =>
|
|
!loading && result.results.length === 0 ? (
|
|
<div className="py-14 text-center text-sm text-muted-foreground">
|
|
{t("agentRunLog.emptyRows")}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div className="hidden grid-cols-[160px_minmax(0,1.8fr)_110px_minmax(0,1.2fr)_130px_90px_76px] gap-3 border-b bg-muted/40 px-4 py-3 text-sm text-muted-foreground lg:grid">
|
|
<div>{t("agentRunLog.time")}</div>
|
|
<div>{t("agentRunLog.userMessage")}</div>
|
|
<div>{t("agentRunLog.plannedAction")}</div>
|
|
<div>{t("agentRunLog.skillTool")}</div>
|
|
<div>{t("agentRunLog.finalStatus")}</div>
|
|
<div className="text-right">{t("agentRunLog.duration")}</div>
|
|
<div className="text-right">{t("agentRunLog.actions")}</div>
|
|
</div>
|
|
|
|
<div className="divide-y">
|
|
{result.results.map((item) => (
|
|
<article
|
|
key={item.id}
|
|
className="grid grid-cols-1 gap-2 px-4 py-3 lg:grid-cols-[160px_minmax(0,1.8fr)_110px_minmax(0,1.2fr)_130px_90px_76px] lg:items-center lg:gap-3"
|
|
>
|
|
<div className="min-w-0 text-sm text-muted-foreground">
|
|
{formatDateTime(item.createdAt)}
|
|
</div>
|
|
|
|
<div className="min-w-0">
|
|
<UserMessagePreview value={item.userMessage} t={t} />
|
|
{item.errorMessage ? (
|
|
<div className="truncate text-xs text-destructive">{item.errorMessage}</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="min-w-0">
|
|
<Badge variant={actionBadgeVariant(item.plannedAction)}>
|
|
{item.plannedAction || "-"}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="min-w-0 text-sm">
|
|
{item.plannedSkillId || item.graphToolCode || item.plannedToolCode ? (
|
|
<div className="min-w-0 space-y-1">
|
|
<div className="truncate font-medium">
|
|
{item.plannedSkillName ||
|
|
(item.plannedSkillId
|
|
? `Skill #${item.plannedSkillId}`
|
|
: "") ||
|
|
item.graphToolCode ||
|
|
item.plannedToolCode}
|
|
</div>
|
|
{item.plannedSkillId ? (
|
|
<div className="truncate text-xs text-muted-foreground">
|
|
Skill #{item.plannedSkillId}
|
|
</div>
|
|
) : item.handoffReason ? (
|
|
<div className="truncate text-xs text-muted-foreground">
|
|
{t("agentRunLog.handoffReason", { reason: item.handoffReason })}
|
|
</div>
|
|
) : item.recommendedAction ? (
|
|
<div className="truncate text-xs text-muted-foreground">
|
|
{t("agentRunLog.routingRecommendation", { action: item.recommendedAction })}
|
|
{item.riskLevel ? ` / ${item.riskLevel} risk` : ""}
|
|
{item.ticketDraftReady ? ` / ${t("agentRunLog.draftReady")}` : ""}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground">-</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="min-w-0">
|
|
<div className="space-y-1">
|
|
<Badge variant={actionBadgeVariant(item.finalAction)}>
|
|
{item.finalAction || "-"}
|
|
</Badge>
|
|
<div className="truncate text-xs text-muted-foreground">
|
|
{getHitlStatusLabel(item.hitlStatus, t)
|
|
? `${getHitlStatusLabel(item.hitlStatus, t)} / ${item.finalStatus || "-"}`
|
|
: item.finalStatus || "-"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground lg:text-right">
|
|
{item.latencyMs} ms
|
|
</div>
|
|
|
|
<div className="lg:text-right">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
setActiveLogId(item.id)
|
|
setDetailOpen(true)
|
|
}}
|
|
>
|
|
{t("agentRunLog.detail")}
|
|
</Button>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
labels={{
|
|
refresh: t("agentRunLog.refresh"),
|
|
query: t("agentRunLog.query"),
|
|
loading: t("agentRunLog.loadingRows"),
|
|
empty: t("agentRunLog.emptyRows"),
|
|
loadFailed: t("agentRunLog.loadFailed"),
|
|
}}
|
|
/>
|
|
<AgentRunLogDetailDialog
|
|
open={detailOpen}
|
|
logId={activeLogId}
|
|
onOpenChange={(open) => {
|
|
setDetailOpen(open)
|
|
if (!open) {
|
|
setActiveLogId(null)
|
|
}
|
|
}}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function UserMessagePreview({ value, t }: { value?: string; t: TFunction }) {
|
|
const preview = useMemo(() => summarizeUserMessage(value, t), [value, t])
|
|
|
|
return (
|
|
<div className="truncate text-sm text-foreground">
|
|
{preview}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function summarizeUserMessage(value: string | undefined, t: TFunction) {
|
|
const normalized = value?.trim()
|
|
if (!normalized) {
|
|
return "-"
|
|
}
|
|
const text = extractTextFromHTML(normalized).replace(/\s+/g, " ").trim()
|
|
if (text) {
|
|
return text
|
|
}
|
|
if (containsHTML(normalized)) {
|
|
if (/<img[\s>]/i.test(normalized)) {
|
|
return t("agentRunLog.imageMessage")
|
|
}
|
|
return t("agentRunLog.richMessage")
|
|
}
|
|
return normalized
|
|
}
|
|
|
|
function containsHTML(value: string) {
|
|
return /<[^>]+>/.test(value)
|
|
}
|
|
|
|
function extractTextFromHTML(value: string) {
|
|
if (typeof window === "undefined") {
|
|
return value
|
|
}
|
|
const doc = new DOMParser().parseFromString(value, "text/html")
|
|
return doc.body.textContent || ""
|
|
}
|