592 lines
21 KiB
TypeScript
592 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { ChevronDown, ChevronRight, Filter, Copy, Check, Loader2 } from "lucide-react";
|
|
import type { RawTrace } from "@/lib/store";
|
|
import { getRawTraces } from "@/lib/api";
|
|
|
|
interface Props {
|
|
// 会话级模式：传 sessionId，组件内部自行拉取全部 traces
|
|
sessionId?: string;
|
|
// 消息级模式：直接传 rawTraces（向后兼容）
|
|
rawTraces?: RawTrace[];
|
|
// 默认是否展开（固定入口用）
|
|
defaultExpanded?: boolean;
|
|
}
|
|
|
|
type FilterType = "all" | "stop" | "length" | "tool_calls" | "unknown";
|
|
|
|
export default function RawTraceExplorer({ sessionId, rawTraces: propRawTraces, defaultExpanded = false }: Props) {
|
|
const [expanded, setExpanded] = useState(defaultExpanded);
|
|
const [filter, setFilter] = useState<FilterType>("all");
|
|
const [selectedTraceId, setSelectedTraceId] = useState<string | null>(null);
|
|
const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});
|
|
const [copiedId, setCopiedId] = useState<string | null>(null);
|
|
|
|
// 会话级模式：自行拉取 traces
|
|
const [fetchedTraces, setFetchedTraces] = useState<RawTrace[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// 当传入 sessionId 时，自动拉取该会话的全部 traces
|
|
useEffect(() => {
|
|
if (!sessionId) return;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
getRawTraces(sessionId, 50) // 拉取最近 50 条
|
|
.then((data) => {
|
|
setFetchedTraces(data.traces || []);
|
|
})
|
|
.catch((err) => {
|
|
setError(err.message || "拉取报文失败");
|
|
setFetchedTraces([]);
|
|
})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
});
|
|
}, [sessionId]);
|
|
|
|
// 优先使用传入的 rawTraces，否则用拉取的
|
|
const rawTraces = propRawTraces || fetchedTraces;
|
|
|
|
// 如果没有 sessionId 也没有 rawTraces，不显示（向后兼容）
|
|
if (!sessionId && (!propRawTraces || propRawTraces.length === 0)) return null;
|
|
|
|
// 获取 finish_reason，向后兼容 stop_reason
|
|
const getFinishReason = (trace: RawTrace): string => {
|
|
return trace.finish_reason || trace.stop_reason || "unknown";
|
|
};
|
|
|
|
// 按 finish_reason 分类统计
|
|
const counts = {
|
|
all: rawTraces.length,
|
|
stop: rawTraces.filter((t) => getFinishReason(t) === "stop").length,
|
|
length: rawTraces.filter((t) => getFinishReason(t) === "length").length,
|
|
tool_calls: rawTraces.filter((t) => getFinishReason(t) === "tool_calls").length,
|
|
unknown: rawTraces.filter((t) => getFinishReason(t) === "unknown").length,
|
|
};
|
|
|
|
// 过滤后的 traces
|
|
const filteredTraces =
|
|
filter === "all"
|
|
? rawTraces
|
|
: rawTraces.filter((t) => getFinishReason(t) === filter);
|
|
|
|
const handleCopy = async (text: string, id: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
setCopiedId(id);
|
|
setTimeout(() => setCopiedId(null), 2000);
|
|
} catch (err) {
|
|
console.error("复制失败:", err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="mt-2 rounded-xl border border-black/[0.06] bg-gradient-to-br from-indigo-50/50 to-purple-50/50 overflow-hidden animate-fade-in-scale">
|
|
{/* 主标题 */}
|
|
<button
|
|
onClick={() => setExpanded(!expanded)}
|
|
className="w-full flex items-center gap-2 px-3 py-2 text-[12px] hover:bg-black/[0.02] transition-colors"
|
|
>
|
|
{expanded ? (
|
|
<ChevronDown className="w-3.5 h-3.5 text-indigo-500" />
|
|
) : (
|
|
<ChevronRight className="w-3.5 h-3.5 text-indigo-500" />
|
|
)}
|
|
<div className="w-5 h-5 rounded flex items-center justify-center bg-indigo-100">
|
|
<Filter className="w-3 h-3 text-indigo-600" />
|
|
</div>
|
|
<span className="font-semibold text-indigo-700">
|
|
📡 会话报文检索
|
|
{loading ? (
|
|
<Loader2 className="inline-block w-3 h-3 ml-1.5 animate-spin" />
|
|
) : (
|
|
<> ({rawTraces.length} 次调用)</>
|
|
)}
|
|
</span>
|
|
<span className="ml-auto text-[10px] text-indigo-500 font-mono">
|
|
{rawTraces.reduce((sum, t) => sum + (t.usage?.total_tokens || 0), 0)} tokens
|
|
</span>
|
|
</button>
|
|
|
|
{expanded && (
|
|
<div className="border-t border-indigo-100/50 bg-white/40">
|
|
{/* 加载中 / 错误状态 */}
|
|
{loading ? (
|
|
<div className="px-4 py-6 flex items-center justify-center gap-2 text-[11px] text-indigo-600">
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
<span>正在拉取报文...</span>
|
|
</div>
|
|
) : error ? (
|
|
<div className="px-4 py-6 text-center text-[11px] text-red-600">
|
|
❌ {error}
|
|
</div>
|
|
) : rawTraces.length === 0 ? (
|
|
<div className="px-4 py-6 text-center text-[11px] text-gray-400">
|
|
暂无报文记录
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 筛选标签 */}
|
|
<div className="px-4 py-2.5 border-b border-indigo-50/50 flex items-center gap-2 flex-wrap">
|
|
<span className="text-[10px] text-gray-500 font-medium">筛选:</span>
|
|
<FilterButton
|
|
label="全部"
|
|
count={counts.all}
|
|
active={filter === "all"}
|
|
color="gray"
|
|
onClick={() => setFilter("all")}
|
|
/>
|
|
<FilterButton
|
|
label="stop"
|
|
count={counts.stop}
|
|
active={filter === "stop"}
|
|
color="green"
|
|
onClick={() => setFilter("stop")}
|
|
/>
|
|
<FilterButton
|
|
label="length"
|
|
count={counts.length}
|
|
active={filter === "length"}
|
|
color="orange"
|
|
onClick={() => setFilter("length")}
|
|
/>
|
|
<FilterButton
|
|
label="tool_calls"
|
|
count={counts.tool_calls}
|
|
active={filter === "tool_calls"}
|
|
color="blue"
|
|
onClick={() => setFilter("tool_calls")}
|
|
/>
|
|
<FilterButton
|
|
label="unknown"
|
|
count={counts.unknown}
|
|
active={filter === "unknown"}
|
|
color="gray"
|
|
onClick={() => setFilter("unknown")}
|
|
/>
|
|
</div>
|
|
|
|
{/* Trace 列表 */}
|
|
<div className="max-h-[500px] overflow-y-auto">
|
|
{filteredTraces.length === 0 ? (
|
|
<div className="px-4 py-6 text-center text-[11px] text-gray-400">
|
|
无匹配的报文记录
|
|
</div>
|
|
) : (
|
|
filteredTraces.map((trace, idx) => {
|
|
const finishReason = getFinishReason(trace);
|
|
const isSelected = selectedTraceId === trace.trace_id;
|
|
const hasError = !!trace.error;
|
|
|
|
// 提取响应文本摘要
|
|
let responsePreview = "";
|
|
if (trace.response?.generations?.[0]?.text) {
|
|
responsePreview = trace.response.generations[0].text.slice(0, 50);
|
|
}
|
|
|
|
// 提取工具调用信息
|
|
let toolNames: string[] = [];
|
|
if (trace.response?.generations?.[0]?.message?.tool_calls) {
|
|
toolNames = trace.response.generations[0].message.tool_calls.map(
|
|
(tc: any) => tc.name || tc.function?.name || "unknown"
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={trace.trace_id}
|
|
className="border-b border-indigo-50/50 last:border-b-0"
|
|
>
|
|
{/* Trace 摘要行 */}
|
|
<button
|
|
onClick={() =>
|
|
setSelectedTraceId(isSelected ? null : trace.trace_id)
|
|
}
|
|
className="w-full flex items-center gap-2 px-4 py-2 text-[11px] hover:bg-indigo-50/30 transition-colors"
|
|
>
|
|
{isSelected ? (
|
|
<ChevronDown className="w-3 h-3 text-gray-400 shrink-0" />
|
|
) : (
|
|
<ChevronRight className="w-3 h-3 text-gray-400 shrink-0" />
|
|
)}
|
|
<span className="font-mono text-gray-500 shrink-0">
|
|
#{idx + 1}
|
|
</span>
|
|
<span className="font-medium text-gray-700 shrink-0">
|
|
{trace.request.model}
|
|
</span>
|
|
<FinishReasonBadge reason={finishReason} />
|
|
{trace.duration_ms !== undefined && (
|
|
<span className="text-gray-500 shrink-0 text-[10px]">
|
|
{trace.duration_ms}ms
|
|
</span>
|
|
)}
|
|
{toolNames.length > 0 && (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 font-mono shrink-0">
|
|
🔧 {toolNames.join(", ")}
|
|
</span>
|
|
)}
|
|
{responsePreview && (
|
|
<span className="text-[10px] text-gray-400 truncate flex-1 text-left">
|
|
{responsePreview}...
|
|
</span>
|
|
)}
|
|
{hasError && (
|
|
<span className="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-700 font-semibold shrink-0">
|
|
ERROR
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{/* 完整 Trajectory 展开 */}
|
|
{isSelected && (
|
|
<TrajectoryView
|
|
trace={trace}
|
|
expandedSections={expandedSections}
|
|
setExpandedSections={setExpandedSections}
|
|
onCopy={handleCopy}
|
|
copiedId={copiedId}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 筛选按钮 */
|
|
function FilterButton({
|
|
label,
|
|
count,
|
|
active,
|
|
color,
|
|
onClick,
|
|
}: {
|
|
label: string;
|
|
count: number;
|
|
active: boolean;
|
|
color: "gray" | "green" | "orange" | "blue";
|
|
onClick: () => void;
|
|
}) {
|
|
const colorClasses = {
|
|
gray: active
|
|
? "bg-gray-200 text-gray-800 border-gray-300"
|
|
: "bg-gray-50 text-gray-600 border-gray-200",
|
|
green: active
|
|
? "bg-green-100 text-green-800 border-green-300"
|
|
: "bg-green-50 text-green-600 border-green-200",
|
|
orange: active
|
|
? "bg-orange-100 text-orange-800 border-orange-300"
|
|
: "bg-orange-50 text-orange-600 border-orange-200",
|
|
blue: active
|
|
? "bg-blue-100 text-blue-800 border-blue-300"
|
|
: "bg-blue-50 text-blue-600 border-blue-200",
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`px-2 py-0.5 rounded-full border text-[10px] font-medium transition-all hover:scale-105 ${colorClasses[color]}`}
|
|
>
|
|
{label} ({count})
|
|
</button>
|
|
);
|
|
}
|
|
|
|
/** finish_reason 彩色小标签 */
|
|
function FinishReasonBadge({ reason }: { reason: string }) {
|
|
const colorClasses = {
|
|
stop: "bg-green-100 text-green-700 border-green-200",
|
|
length: "bg-orange-100 text-orange-700 border-orange-200",
|
|
tool_calls: "bg-blue-100 text-blue-700 border-blue-200",
|
|
unknown: "bg-gray-100 text-gray-600 border-gray-200",
|
|
};
|
|
|
|
const colorClass =
|
|
colorClasses[reason as keyof typeof colorClasses] || colorClasses.unknown;
|
|
|
|
return (
|
|
<span
|
|
className={`text-[10px] px-1.5 py-0.5 rounded border font-mono shrink-0 ${colorClass}`}
|
|
>
|
|
{reason}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
/** 完整 Trajectory 视图（请求→响应→工具调用→usage） */
|
|
function TrajectoryView({
|
|
trace,
|
|
expandedSections,
|
|
setExpandedSections,
|
|
onCopy,
|
|
copiedId,
|
|
}: {
|
|
trace: RawTrace;
|
|
expandedSections: Record<string, boolean>;
|
|
setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
|
|
onCopy: (text: string, id: string) => void;
|
|
copiedId: string | null;
|
|
}) {
|
|
// 提取响应文本
|
|
let responseText = "";
|
|
let reasoningContent = "";
|
|
if (trace.response?.generations?.[0]) {
|
|
responseText = trace.response.generations[0].text || "";
|
|
// 尝试提取 reasoning_content
|
|
const msg = trace.response.generations[0].message;
|
|
if (msg?.additional_kwargs?.reasoning_content) {
|
|
reasoningContent = msg.additional_kwargs.reasoning_content;
|
|
}
|
|
}
|
|
|
|
// 提取工具调用
|
|
let toolCalls: any[] = [];
|
|
if (trace.response?.generations?.[0]?.message?.tool_calls) {
|
|
toolCalls = trace.response.generations[0].message.tool_calls;
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 pb-3 space-y-2.5 bg-gradient-to-br from-white/60 to-indigo-50/20">
|
|
{/* 时间线可视化 */}
|
|
<div className="flex items-center gap-1.5 text-[10px] text-gray-500 py-2 border-b border-indigo-100/50">
|
|
<span className="font-semibold text-indigo-600">完整路径:</span>
|
|
<span>用户输入</span>
|
|
<span className="text-indigo-400">→</span>
|
|
<span>LLM 请求</span>
|
|
{toolCalls.length > 0 && (
|
|
<>
|
|
<span className="text-indigo-400">→</span>
|
|
<span className="text-blue-600 font-medium">[工具调用]</span>
|
|
</>
|
|
)}
|
|
<span className="text-indigo-400">→</span>
|
|
<span>LLM 响应</span>
|
|
</div>
|
|
|
|
{/* 错误信息 */}
|
|
{trace.error && (
|
|
<div className="p-2 bg-red-50 border border-red-200 rounded-lg">
|
|
<div className="text-[10px] font-semibold text-red-600 mb-1">
|
|
❌ 错误
|
|
</div>
|
|
<pre className="text-[10px] text-red-700 font-mono whitespace-pre-wrap">
|
|
{trace.error.type}: {trace.error.message}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* 1. 请求 messages */}
|
|
<CollapsibleSection
|
|
title="📤 请求 Messages"
|
|
id={`req-messages-${trace.trace_id}`}
|
|
expanded={expandedSections}
|
|
setExpanded={setExpandedSections}
|
|
onCopy={() =>
|
|
onCopy(
|
|
JSON.stringify(trace.request.messages, null, 2),
|
|
`req-messages-${trace.trace_id}`
|
|
)
|
|
}
|
|
copied={copiedId === `req-messages-${trace.trace_id}`}
|
|
>
|
|
<div className="space-y-1.5">
|
|
{trace.request.messages.map((msg: any, idx: number) => (
|
|
<div
|
|
key={idx}
|
|
className="p-2 bg-white/80 rounded border border-gray-200"
|
|
>
|
|
<div className="text-[9px] font-semibold text-gray-500 mb-1">
|
|
{msg.type || msg.role || "message"} {idx + 1}
|
|
</div>
|
|
<pre className="text-[10px] text-gray-700 font-mono whitespace-pre-wrap max-h-32 overflow-y-auto">
|
|
{typeof msg.content === "string"
|
|
? msg.content
|
|
: JSON.stringify(msg.content, null, 2)}
|
|
</pre>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CollapsibleSection>
|
|
|
|
{/* 2. 模型响应文本 */}
|
|
{(responseText || reasoningContent) && (
|
|
<CollapsibleSection
|
|
title="💬 模型响应文本"
|
|
id={`response-text-${trace.trace_id}`}
|
|
expanded={expandedSections}
|
|
setExpanded={setExpandedSections}
|
|
onCopy={() =>
|
|
onCopy(
|
|
reasoningContent
|
|
? `[Reasoning]\n${reasoningContent}\n\n[Response]\n${responseText}`
|
|
: responseText,
|
|
`response-text-${trace.trace_id}`
|
|
)
|
|
}
|
|
copied={copiedId === `response-text-${trace.trace_id}`}
|
|
>
|
|
<div className="space-y-2">
|
|
{reasoningContent && (
|
|
<div className="p-2 bg-purple-50/50 border border-purple-200 rounded">
|
|
<div className="text-[9px] font-semibold text-purple-600 mb-1">
|
|
🧠 Reasoning
|
|
</div>
|
|
<pre className="text-[10px] text-purple-700 font-mono whitespace-pre-wrap max-h-48 overflow-y-auto">
|
|
{reasoningContent}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
<div className="p-2 bg-white/80 border border-gray-200 rounded">
|
|
<div className="text-[9px] font-semibold text-gray-500 mb-1">
|
|
📝 最终文本
|
|
</div>
|
|
<pre className="text-[10px] text-gray-700 font-mono whitespace-pre-wrap max-h-48 overflow-y-auto">
|
|
{responseText}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</CollapsibleSection>
|
|
)}
|
|
|
|
{/* 3. 工具调用 */}
|
|
{toolCalls.length > 0 && (
|
|
<CollapsibleSection
|
|
title="🔧 工具调用"
|
|
id={`tool-calls-${trace.trace_id}`}
|
|
expanded={expandedSections}
|
|
setExpanded={setExpandedSections}
|
|
onCopy={() =>
|
|
onCopy(
|
|
JSON.stringify(toolCalls, null, 2),
|
|
`tool-calls-${trace.trace_id}`
|
|
)
|
|
}
|
|
copied={copiedId === `tool-calls-${trace.trace_id}`}
|
|
>
|
|
<div className="space-y-2">
|
|
{toolCalls.map((tc: any, idx: number) => (
|
|
<div
|
|
key={idx}
|
|
className="p-2 bg-blue-50/50 border border-blue-200 rounded"
|
|
>
|
|
<div className="text-[9px] font-semibold text-blue-600 mb-1">
|
|
🔧 {tc.name || tc.function?.name || `Tool ${idx + 1}`}
|
|
</div>
|
|
<div className="text-[9px] text-gray-500 mb-1">参数:</div>
|
|
<pre className="text-[10px] text-blue-700 font-mono whitespace-pre-wrap max-h-32 overflow-y-auto">
|
|
{JSON.stringify(
|
|
tc.args || tc.function?.arguments || tc,
|
|
null,
|
|
2
|
|
)}
|
|
</pre>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CollapsibleSection>
|
|
)}
|
|
|
|
{/* 4. Usage 摘要 */}
|
|
{trace.usage && (
|
|
<div className="p-2 bg-gradient-to-r from-green-50/50 to-blue-50/50 border border-green-200 rounded-lg">
|
|
<div className="text-[9px] font-semibold text-green-600 mb-1">
|
|
📊 Token 使用情况
|
|
</div>
|
|
<div className="flex items-center gap-4 text-[10px] text-gray-700">
|
|
<span>
|
|
输入: <span className="font-mono font-semibold">{trace.usage.input_tokens}</span>
|
|
</span>
|
|
<span>
|
|
输出: <span className="font-mono font-semibold">{trace.usage.output_tokens}</span>
|
|
</span>
|
|
<span>
|
|
总计: <span className="font-mono font-semibold">{trace.usage.total_tokens}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 完整原始 JSON（可选） */}
|
|
<CollapsibleSection
|
|
title="📋 完整原始 JSON"
|
|
id={`full-json-${trace.trace_id}`}
|
|
expanded={expandedSections}
|
|
setExpanded={setExpandedSections}
|
|
onCopy={() =>
|
|
onCopy(JSON.stringify(trace, null, 2), `full-json-${trace.trace_id}`)
|
|
}
|
|
copied={copiedId === `full-json-${trace.trace_id}`}
|
|
defaultClosed
|
|
>
|
|
<pre className="text-[10px] text-gray-700 font-mono whitespace-pre-wrap overflow-x-auto max-h-96 overflow-y-auto leading-relaxed">
|
|
{JSON.stringify(trace, null, 2)}
|
|
</pre>
|
|
</CollapsibleSection>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** 可折叠区域 */
|
|
function CollapsibleSection({
|
|
title,
|
|
id,
|
|
children,
|
|
expanded,
|
|
setExpanded,
|
|
onCopy,
|
|
copied,
|
|
defaultClosed = false,
|
|
}: {
|
|
title: string;
|
|
id: string;
|
|
children: React.ReactNode;
|
|
expanded: Record<string, boolean>;
|
|
setExpanded: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
|
|
onCopy: () => void;
|
|
copied: boolean;
|
|
defaultClosed?: boolean;
|
|
}) {
|
|
const isOpen = expanded[id] ?? !defaultClosed;
|
|
|
|
return (
|
|
<div className="border border-indigo-200 rounded-lg overflow-hidden bg-white/60">
|
|
<div className="flex items-center gap-2 px-2 py-1.5 bg-indigo-50/80 border-b border-indigo-200">
|
|
<button
|
|
onClick={() => setExpanded((p) => ({ ...p, [id]: !p[id] }))}
|
|
className="flex items-center gap-1.5 text-[10px] font-semibold text-indigo-700 hover:text-indigo-900 transition-colors flex-1"
|
|
>
|
|
{isOpen ? (
|
|
<ChevronDown className="w-3 h-3" />
|
|
) : (
|
|
<ChevronRight className="w-3 h-3" />
|
|
)}
|
|
{title}
|
|
</button>
|
|
<button
|
|
onClick={onCopy}
|
|
className="p-1 hover:bg-indigo-100 rounded transition-colors"
|
|
title="复制内容"
|
|
>
|
|
{copied ? (
|
|
<Check className="w-3 h-3 text-green-600" />
|
|
) : (
|
|
<Copy className="w-3 h-3 text-indigo-500" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
{isOpen && <div className="p-2">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|