1278 lines
41 KiB
TypeScript
1278 lines
41 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Activity,
|
|
ArrowRight,
|
|
Camera,
|
|
ChartLine,
|
|
CheckCircle2,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
CircleDot,
|
|
Eye,
|
|
GitBranch,
|
|
ImageIcon,
|
|
Loader2,
|
|
MessageSquareText,
|
|
MonitorSmartphone,
|
|
MoreHorizontal,
|
|
Pause,
|
|
Play,
|
|
Server,
|
|
Trash2,
|
|
Wrench,
|
|
XCircle,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import { SectionAnchorTabs } from "@/components/editor/section-anchor-tabs";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { DataList, type DataListColumn } from "@/components/ui/data-list";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { FilterPills } from "@/components/ui/filter-pills";
|
|
import { ListToolbar } from "@/components/ui/list-toolbar";
|
|
import {
|
|
ListPageLayout,
|
|
ListPageSection,
|
|
} from "@/components/layout/list-page-layout";
|
|
import { SearchInput } from "@/components/ui/search-input";
|
|
import {
|
|
API_BASE,
|
|
conversationsApi,
|
|
type Conversation,
|
|
type ConversationDetail,
|
|
type ConversationMessage,
|
|
} from "@/lib/api";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const PAGE_SIZE = 5;
|
|
const channelFilters = ["全部", "WebRTC", "WebSocket"] as const;
|
|
type ChannelFilter = (typeof channelFilters)[number];
|
|
type SortOrder = "newest" | "oldest";
|
|
type DetailTabId = "session" | "analysis";
|
|
|
|
const detailTabs = [
|
|
{ id: "session", label: "会话信息" },
|
|
{ id: "analysis", label: "分析" },
|
|
] as const;
|
|
|
|
function formatDate(value?: string | null): string {
|
|
if (!value) return "—";
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return "—";
|
|
return date.toLocaleString("zh-CN", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
});
|
|
}
|
|
|
|
function durationLabel(row: Conversation): string {
|
|
if (!row.endedAt) return "进行中";
|
|
const seconds = Math.max(
|
|
0,
|
|
Math.round(
|
|
(new Date(row.endedAt).getTime() - new Date(row.startedAt).getTime()) /
|
|
1000,
|
|
),
|
|
);
|
|
const minutes = Math.floor(seconds / 60);
|
|
return minutes ? `${minutes} 分 ${seconds % 60} 秒` : `${seconds} 秒`;
|
|
}
|
|
|
|
function channelLabel(channel: string): string {
|
|
if (channel === "webrtc") return "WebRTC";
|
|
if (channel === "websocket") return "WebSocket";
|
|
return channel;
|
|
}
|
|
|
|
function channelValue(filter: ChannelFilter): string | undefined {
|
|
if (filter === "WebRTC") return "webrtc";
|
|
if (filter === "WebSocket") return "websocket";
|
|
return undefined;
|
|
}
|
|
|
|
function statusLabel(status: string): string {
|
|
if (status === "active") return "进行中";
|
|
if (status === "failed") return "失败";
|
|
return "已结束";
|
|
}
|
|
|
|
type TraceEvent = Record<string, unknown>;
|
|
type WorkflowNode = { label: string; type: string };
|
|
type TraceTone = "default" | "success" | "error" | "user";
|
|
|
|
type TracePresentation = {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
tone: TraceTone;
|
|
};
|
|
|
|
function recordValue(value: unknown): Record<string, unknown> {
|
|
return value && typeof value === "object" && !Array.isArray(value)
|
|
? (value as Record<string, unknown>)
|
|
: {};
|
|
}
|
|
|
|
function textValue(value: unknown): string {
|
|
return typeof value === "string" ? value : "";
|
|
}
|
|
|
|
function numberValue(value: unknown): number | null {
|
|
return typeof value === "number" && Number.isFinite(value) ? value : null;
|
|
}
|
|
|
|
function workflowNodes(detail: ConversationDetail): Map<string, WorkflowNode> {
|
|
const snapshot = recordValue(detail.extra.workflow?.snapshot);
|
|
const nodes = Array.isArray(snapshot.nodes) ? snapshot.nodes : [];
|
|
return new Map(
|
|
nodes.flatMap((rawNode) => {
|
|
const node = recordValue(rawNode);
|
|
const id = textValue(node.id);
|
|
if (!id) return [];
|
|
const data = recordValue(node.data);
|
|
const type = textValue(node.type) || "node";
|
|
return [
|
|
[
|
|
id,
|
|
{
|
|
label: textValue(data.name) || type,
|
|
type,
|
|
},
|
|
] as const,
|
|
];
|
|
}),
|
|
);
|
|
}
|
|
|
|
function nodeLabel(nodes: Map<string, WorkflowNode>, nodeId: unknown): string {
|
|
const id = textValue(nodeId);
|
|
const node = nodes.get(id);
|
|
return node ? `「${node.label}」` : id ? `「${id}」` : "当前节点";
|
|
}
|
|
|
|
function toolLabel(toolType: unknown): string {
|
|
if (toolType === "client") return "客户端工具";
|
|
if (toolType === "http") return "HTTP 服务端工具";
|
|
if (toolType === "mcp") return "MCP 服务端工具";
|
|
if (toolType === "system") return "系统工具";
|
|
return "工具";
|
|
}
|
|
|
|
function tracePresentation(
|
|
event: TraceEvent,
|
|
nodes: Map<string, WorkflowNode>,
|
|
startedEvent?: TraceEvent,
|
|
): TracePresentation {
|
|
const eventName = textValue(event.event);
|
|
const node = nodeLabel(nodes, event.nodeId);
|
|
const outcome = recordValue(event.outcome);
|
|
const duration = numberValue(outcome.durationMs);
|
|
const tool = toolLabel(event.toolType ?? startedEvent?.toolType);
|
|
|
|
switch (eventName) {
|
|
case "node_entered":
|
|
return {
|
|
title: `进入节点 ${node}`,
|
|
description: `节点类型：${textValue(event.nodeType) || nodes.get(textValue(event.nodeId))?.type || "未知"}`,
|
|
icon: CircleDot,
|
|
tone: "default",
|
|
};
|
|
case "node_exited":
|
|
return {
|
|
title: `离开节点 ${node}`,
|
|
description: "当前节点处理完成，准备选择下一步。",
|
|
icon: ArrowRight,
|
|
tone: "default",
|
|
};
|
|
case "edge_selected":
|
|
return {
|
|
title: `节点转移：${nodeLabel(nodes, event.sourceNodeId)} → ${nodeLabel(nodes, event.targetNodeId)}`,
|
|
description: `路由方式：${textValue(event.edgeMode) || "always"}`,
|
|
icon: GitBranch,
|
|
tone: "default",
|
|
};
|
|
case "action_started":
|
|
return {
|
|
title: `开始调用${tool}`,
|
|
description: `${node} · ${textValue(event.toolId) || "未命名工具"}`,
|
|
icon: tool === "客户端工具" ? MonitorSmartphone : Server,
|
|
tone: "default",
|
|
};
|
|
case "action_completed":
|
|
return {
|
|
title: `${tool}执行成功`,
|
|
description: `${node}${duration === null ? "" : ` · ${duration} ms`}`,
|
|
icon: CheckCircle2,
|
|
tone: "success",
|
|
};
|
|
case "action_failed":
|
|
case "action_cancelled":
|
|
return {
|
|
title: `${tool}${eventName === "action_failed" ? "执行失败" : "已取消"}`,
|
|
description: textValue(recordValue(outcome.error).message) || node,
|
|
icon: XCircle,
|
|
tone: "error",
|
|
};
|
|
case "tool_started":
|
|
return {
|
|
title: `开始调用${tool}`,
|
|
description: `${node} · ${textValue(event.toolName) || textValue(event.functionName) || textValue(event.toolId) || "未命名工具"}`,
|
|
icon: tool === "客户端工具" ? MonitorSmartphone : Server,
|
|
tone: "default",
|
|
};
|
|
case "tool_completed":
|
|
return {
|
|
title: `${tool}调用成功`,
|
|
description: `${textValue(event.toolName) || textValue(event.functionName) || node}${numberValue(event.durationMs) === null ? "" : ` · ${numberValue(event.durationMs)} ms`}`,
|
|
icon: CheckCircle2,
|
|
tone: "success",
|
|
};
|
|
case "tool_failed":
|
|
return {
|
|
title: `${tool}调用失败`,
|
|
description: textValue(event.error) || textValue(event.toolName) || node,
|
|
icon: XCircle,
|
|
tone: "error",
|
|
};
|
|
case "client_tool_started":
|
|
return {
|
|
title:
|
|
event.functionName === "show_message"
|
|
? "向客户端显示交互消息"
|
|
: "向客户端下发工具调用",
|
|
description: textValue(event.functionName) || "客户端工具",
|
|
icon: MonitorSmartphone,
|
|
tone: "default",
|
|
};
|
|
case "client_tool_completed": {
|
|
const userAction = textValue(event.userAction);
|
|
return {
|
|
title: userAction === "confirmed" ? "用户已确认" : "客户端交互已完成",
|
|
description: userAction
|
|
? `用户操作：${userAction}`
|
|
: textValue(event.functionName) || textValue(event.status) || "执行成功",
|
|
icon: CheckCircle2,
|
|
tone: userAction ? "user" : "success",
|
|
};
|
|
}
|
|
case "client_tool_failed":
|
|
return {
|
|
title: "客户端交互失败",
|
|
description: textValue(event.error) || textValue(event.functionName),
|
|
icon: XCircle,
|
|
tone: "error",
|
|
};
|
|
case "message_started":
|
|
return event.requiresConfirmation
|
|
? {
|
|
title: "等待用户确认",
|
|
description: `${node}向客户端显示了确认消息。`,
|
|
icon: MonitorSmartphone,
|
|
tone: "user",
|
|
}
|
|
: {
|
|
title: "开始播放固定消息",
|
|
description: node,
|
|
icon: Activity,
|
|
tone: "default",
|
|
};
|
|
case "message_completed": {
|
|
const action = textValue(event.action);
|
|
return {
|
|
title: action === "confirmed" ? "用户已确认" : "消息步骤已完成",
|
|
description: `${node}${action ? ` · 操作：${action}` : ""}`,
|
|
icon: CheckCircle2,
|
|
tone: action ? "user" : "success",
|
|
};
|
|
}
|
|
case "message_interrupted":
|
|
return {
|
|
title: "用户输入打断消息",
|
|
description: node,
|
|
icon: Activity,
|
|
tone: "user",
|
|
};
|
|
case "message_failed":
|
|
return {
|
|
title: "消息步骤失败",
|
|
description: textValue(event.error) || node,
|
|
icon: XCircle,
|
|
tone: "error",
|
|
};
|
|
case "variables_updated": {
|
|
const names = Array.isArray(event.variableNames)
|
|
? event.variableNames.filter((name): name is string => typeof name === "string")
|
|
: [];
|
|
return {
|
|
title: "会话变量已更新",
|
|
description: names.length ? names.join("、") : node,
|
|
icon: Wrench,
|
|
tone: "default",
|
|
};
|
|
}
|
|
case "variables_snapshot":
|
|
return {
|
|
title: "记录会话变量快照",
|
|
description: node,
|
|
icon: Wrench,
|
|
tone: "default",
|
|
};
|
|
case "workflow_ended":
|
|
return {
|
|
title: "工作流已结束",
|
|
description: `${node} · ${textValue(event.outcome) || "success"}`,
|
|
icon: CheckCircle2,
|
|
tone: "success",
|
|
};
|
|
default:
|
|
return {
|
|
title: eventName || "运行事件",
|
|
description: node,
|
|
icon: Activity,
|
|
tone: "default",
|
|
};
|
|
}
|
|
}
|
|
|
|
function artifactUrl(path: string): string {
|
|
if (/^(https?:|data:|blob:)/.test(path)) return path;
|
|
return `${API_BASE}${path.startsWith("/") ? path : `/${path}`}`;
|
|
}
|
|
|
|
export function HistoryPage() {
|
|
const [rows, setRows] = useState<Conversation[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [search, setSearch] = useState("");
|
|
const [filter, setFilter] = useState<ChannelFilter>("全部");
|
|
const [sortOrder, setSortOrder] = useState<SortOrder>("newest");
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadError, setLoadError] = useState("");
|
|
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [detail, setDetail] = useState<ConversationDetail | null>(null);
|
|
const [detailLoading, setDetailLoading] = useState(false);
|
|
const [detailError, setDetailError] = useState("");
|
|
const [detailTab, setDetailTab] = useState<DetailTabId>("session");
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
const skipRowClickRef = useRef(false);
|
|
|
|
const clearSkipRowClick = useCallback(() => {
|
|
window.setTimeout(() => {
|
|
skipRowClickRef.current = false;
|
|
}, 200);
|
|
}, []);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
setLoadError("");
|
|
try {
|
|
const result = await conversationsApi.list({
|
|
page: currentPage,
|
|
pageSize: PAGE_SIZE,
|
|
search: search.trim() || undefined,
|
|
channel: channelValue(filter),
|
|
sortOrder,
|
|
});
|
|
setRows(result.items);
|
|
setTotal(result.total);
|
|
} catch (error) {
|
|
setLoadError(error instanceof Error ? error.message : "加载历史记录失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [currentPage, filter, search, sortOrder]);
|
|
|
|
useEffect(() => {
|
|
// Initial and query-driven external API synchronization.
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
void load();
|
|
}, [load]);
|
|
|
|
const openDetail = useCallback(async (conversation: Conversation) => {
|
|
setDialogOpen(true);
|
|
setDetailTab("session");
|
|
setDetail(null);
|
|
setDetailError("");
|
|
setDetailLoading(true);
|
|
try {
|
|
setDetail(await conversationsApi.get(conversation.id));
|
|
} catch (error) {
|
|
setDetailError(
|
|
error instanceof Error ? error.message : "对话内容加载失败",
|
|
);
|
|
} finally {
|
|
setDetailLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
!dialogOpen ||
|
|
!detail ||
|
|
!["pending", "processing"].includes(detail.analysis.status)
|
|
) {
|
|
return;
|
|
}
|
|
let stopped = false;
|
|
let loadingLatest = false;
|
|
const timer = window.setInterval(() => {
|
|
if (loadingLatest) return;
|
|
loadingLatest = true;
|
|
void conversationsApi
|
|
.get(detail.id)
|
|
.then((latest) => {
|
|
if (!stopped) setDetail(latest);
|
|
})
|
|
.catch(() => undefined)
|
|
.finally(() => {
|
|
loadingLatest = false;
|
|
});
|
|
}, 2000);
|
|
return () => {
|
|
stopped = true;
|
|
window.clearInterval(timer);
|
|
};
|
|
}, [detail, dialogOpen]);
|
|
|
|
const remove = useCallback(
|
|
async (conversation: Conversation) => {
|
|
const label = conversation.assistantName || "调试会话";
|
|
skipRowClickRef.current = true;
|
|
const confirmed = window.confirm(`确认删除对话“${label}”？`);
|
|
if (!confirmed) {
|
|
clearSkipRowClick();
|
|
return;
|
|
}
|
|
setDeletingId(conversation.id);
|
|
try {
|
|
await conversationsApi.remove(conversation.id);
|
|
if (detail?.id === conversation.id) {
|
|
setDialogOpen(false);
|
|
setDetail(null);
|
|
}
|
|
if (rows.length === 1 && currentPage > 1) {
|
|
setCurrentPage(currentPage - 1);
|
|
} else {
|
|
await load();
|
|
}
|
|
} catch (error) {
|
|
setLoadError(error instanceof Error ? error.message : "删除失败");
|
|
} finally {
|
|
setDeletingId(null);
|
|
clearSkipRowClick();
|
|
}
|
|
},
|
|
[clearSkipRowClick, currentPage, detail, load, rows.length],
|
|
);
|
|
|
|
const handleRowClick = useCallback(
|
|
(conversation: Conversation) => {
|
|
if (skipRowClickRef.current) return;
|
|
void openDetail(conversation);
|
|
},
|
|
[openDetail],
|
|
);
|
|
|
|
function changeSearch(value: string) {
|
|
setSearch(value);
|
|
setCurrentPage(1);
|
|
}
|
|
|
|
function changeFilter(value: ChannelFilter) {
|
|
setFilter(value);
|
|
setCurrentPage(1);
|
|
}
|
|
|
|
function toggleSortOrder() {
|
|
setSortOrder((value) => (value === "newest" ? "oldest" : "newest"));
|
|
setCurrentPage(1);
|
|
}
|
|
|
|
const columns = useMemo<DataListColumn<Conversation>[]>(
|
|
() => [
|
|
{
|
|
key: "assistant",
|
|
header: "助手名称",
|
|
width: "md:w-[360px]",
|
|
cell: (row) => (
|
|
<>
|
|
<div className="truncate font-medium text-foreground">
|
|
{row.assistantName || "调试会话"}
|
|
</div>
|
|
<div className="mt-1 truncate font-mono text-xs text-muted-soft">
|
|
{row.id}
|
|
</div>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
key: "channel",
|
|
header: "接入通道",
|
|
width: "md:w-[150px]",
|
|
cell: (row) => (
|
|
<Badge
|
|
variant="secondary"
|
|
className="h-6 bg-surface-strong px-3 text-muted-foreground"
|
|
>
|
|
{channelLabel(row.channel)}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
key: "status",
|
|
header: "状态",
|
|
width: "md:w-[120px]",
|
|
cell: (row) => (
|
|
<Badge
|
|
variant={row.status === "failed" ? "destructive" : "outline"}
|
|
className="h-6 px-3"
|
|
>
|
|
{statusLabel(row.status)}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
key: "messages",
|
|
header: "消息数",
|
|
width: "md:w-[100px]",
|
|
cellClassName: "tabular-nums text-muted-foreground",
|
|
cell: (row) => `${row.messageCount} 条`,
|
|
},
|
|
{
|
|
key: "duration",
|
|
header: "对话时长",
|
|
width: "md:w-[130px]",
|
|
cellClassName: "tabular-nums text-muted-foreground",
|
|
cell: durationLabel,
|
|
},
|
|
{
|
|
key: "startedAt",
|
|
width: "md:w-[190px]",
|
|
header: (
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
toggleSortOrder();
|
|
}}
|
|
className="caption-label -mx-2 inline-flex items-center gap-1 rounded-md px-2 py-1 text-muted-soft transition-colors hover:bg-surface-strong hover:text-foreground"
|
|
aria-label={
|
|
sortOrder === "newest"
|
|
? "当前按最近开始排序，点击切换为最早开始"
|
|
: "当前按最早开始排序，点击切换为最近开始"
|
|
}
|
|
>
|
|
开始时间
|
|
{sortOrder === "newest" ? (
|
|
<ChevronDown size={13} />
|
|
) : (
|
|
<ChevronUp size={13} />
|
|
)}
|
|
</button>
|
|
),
|
|
cellClassName:
|
|
"whitespace-nowrap tabular-nums text-muted-foreground",
|
|
cell: (row) => formatDate(row.startedAt),
|
|
},
|
|
{
|
|
key: "actions",
|
|
header: "操作",
|
|
align: "right",
|
|
cell: (row) => (
|
|
<div
|
|
className="flex justify-end gap-2"
|
|
onClick={(event) => event.stopPropagation()}
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="gap-1.5 border-hairline-strong text-xs text-muted-foreground hover:text-foreground"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
void openDetail(row);
|
|
}}
|
|
>
|
|
<Eye size={14} />
|
|
查看
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="icon-sm"
|
|
className="border-hairline-strong text-muted-foreground hover:text-foreground"
|
|
aria-label={`${row.assistantName || row.id} 更多操作`}
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<MoreHorizontal size={15} />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-32 min-w-32 rounded-xl border border-hairline bg-popover p-1"
|
|
>
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
className="rounded-lg"
|
|
disabled={deletingId === row.id}
|
|
onSelect={(event) => {
|
|
event.preventDefault();
|
|
window.setTimeout(() => void remove(row), 0);
|
|
}}
|
|
>
|
|
{deletingId === row.id ? (
|
|
<Loader2 size={14} className="animate-spin" />
|
|
) : (
|
|
<Trash2 size={14} />
|
|
)}
|
|
删除
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
[deletingId, openDetail, remove, sortOrder],
|
|
);
|
|
|
|
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
|
const safeCurrentPage = Math.min(currentPage, totalPages);
|
|
const pageStart = (safeCurrentPage - 1) * PAGE_SIZE;
|
|
const pageEnd = pageStart + rows.length;
|
|
|
|
return (
|
|
<>
|
|
<ListPageLayout
|
|
title="历史记录"
|
|
description="按会话查看对话、照片、工具调用、用户操作与工作流运行轨迹。"
|
|
>
|
|
<ListPageSection>
|
|
<ListToolbar
|
|
filters={
|
|
<FilterPills
|
|
options={channelFilters}
|
|
value={filter}
|
|
onChange={changeFilter}
|
|
/>
|
|
}
|
|
search={
|
|
<SearchInput
|
|
value={search}
|
|
onChange={changeSearch}
|
|
placeholder="搜索助手名称或会话 ID"
|
|
className="lg:w-[320px]"
|
|
/>
|
|
}
|
|
/>
|
|
|
|
<DataList
|
|
columns={columns}
|
|
rows={rows}
|
|
rowKey={(row) => row.id}
|
|
loading={loading}
|
|
error={loadError || null}
|
|
onRetry={() => void load()}
|
|
onRowClick={handleRowClick}
|
|
empty={{
|
|
title:
|
|
total === 0 && !search && filter === "全部"
|
|
? "暂无对话记录"
|
|
: "未找到匹配的对话记录",
|
|
description:
|
|
total === 0 && !search && filter === "全部"
|
|
? "完成一次助手通话后，文本历史会显示在这里。"
|
|
: "请调整关键词或筛选条件后再试。",
|
|
}}
|
|
pagination={{
|
|
page: safeCurrentPage,
|
|
totalPages,
|
|
onPageChange: setCurrentPage,
|
|
summary:
|
|
total === 0
|
|
? "没有数据"
|
|
: `显示 ${pageStart + 1}-${Math.min(pageEnd, total)} / 共 ${total} 次会话`,
|
|
}}
|
|
/>
|
|
</ListPageSection>
|
|
</ListPageLayout>
|
|
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogContent className="flex h-[min(94vh,980px)] w-full max-w-[calc(100%-1.5rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-7xl">
|
|
<DialogHeader className="shrink-0 gap-1.5 px-5 py-4 sm:px-6">
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<MessageSquareText size={18} />
|
|
{detail?.assistantName || "对话详情"}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{detail
|
|
? `${formatDate(detail.startedAt)} · ${channelLabel(detail.channel)} · ${detail.messageCount} 条消息`
|
|
: "查看本次会话的完整对话与运行记录。"}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex min-h-0 flex-1 flex-col overflow-hidden border-t border-hairline sm:flex-row">
|
|
<aside className="flex min-h-0 w-full shrink-0 flex-col border-b border-hairline sm:w-1/2 sm:border-b-0 sm:border-r">
|
|
<SectionAnchorTabs
|
|
ariaLabel="会话详情分区"
|
|
sections={detailTabs}
|
|
activeSectionId={detailTab}
|
|
onSelect={(sectionId) =>
|
|
setDetailTab(sectionId as DetailTabId)
|
|
}
|
|
className="bg-popover px-3 pt-2 sm:px-4"
|
|
/>
|
|
<div className="scrollbar-subtle min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
|
|
{detailLoading && (
|
|
<div className="flex min-h-48 items-center justify-center gap-2 text-muted-foreground">
|
|
<Loader2 size={16} className="animate-spin" />
|
|
正在加载
|
|
</div>
|
|
)}
|
|
{!detailLoading && detailError && (
|
|
<div className="flex min-h-48 items-center justify-center text-sm text-destructive">
|
|
{detailError}
|
|
</div>
|
|
)}
|
|
{detail && detailTab === "session" && (
|
|
<SessionInfoPanel detail={detail} />
|
|
)}
|
|
{detail && detailTab === "analysis" && (
|
|
<AnalysisPanel analysis={detail.analysis} />
|
|
)}
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="flex min-h-0 min-w-0 w-full flex-1 flex-col sm:w-1/2">
|
|
<div className="flex shrink-0 items-center justify-between gap-3 border-b border-hairline px-4 py-2.5 sm:px-5">
|
|
<div className="text-sm font-medium text-foreground">
|
|
对话记录转写
|
|
</div>
|
|
{detail && (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1 bg-surface-strong text-muted-foreground"
|
|
>
|
|
<MessageSquareText size={11} />
|
|
{detail.messages.length}
|
|
</Badge>
|
|
{detail.messages.some((message) =>
|
|
(message.artifacts ?? []).some(
|
|
(item) => item.kind === "image",
|
|
),
|
|
) && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1 bg-surface-strong text-muted-foreground"
|
|
>
|
|
<ImageIcon size={11} />
|
|
含图片
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="scrollbar-subtle min-h-0 flex-1 overflow-y-auto p-4 sm:p-5">
|
|
{detailLoading && (
|
|
<div className="flex min-h-48 items-center justify-center gap-2 text-muted-foreground">
|
|
<Loader2 size={16} className="animate-spin" />
|
|
正在加载对话内容
|
|
</div>
|
|
)}
|
|
{!detailLoading && detailError && (
|
|
<div className="flex min-h-48 items-center justify-center text-destructive">
|
|
{detailError}
|
|
</div>
|
|
)}
|
|
{detail && <TranscriptPanel detail={detail} />}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<HistoryPlaybackBar key={detail?.id ?? "empty"} detail={detail} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Metadata({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="min-w-0">
|
|
<div className="text-xs text-muted-soft">{label}</div>
|
|
<div className="mt-1 truncate font-medium text-foreground">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SessionInfoPanel({ detail }: { detail: ConversationDetail }) {
|
|
const nodes = workflowNodes(detail);
|
|
const trace = (detail.extra.workflowTrace ?? []).map(recordValue);
|
|
const toolCount = trace.filter(
|
|
(event) => event.event === "action_started" || event.event === "tool_started",
|
|
).length;
|
|
const transitionCount = trace.filter(
|
|
(event) => event.event === "edge_selected",
|
|
).length;
|
|
const imageCount = detail.messages.reduce(
|
|
(count, message) =>
|
|
count +
|
|
(message.artifacts ?? []).filter((item) => item.kind === "image").length,
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<Metadata label="接入通道" value={channelLabel(detail.channel)} />
|
|
<Metadata label="运行模式" value={detail.runtimeMode} />
|
|
<Metadata label="对话时长" value={durationLabel(detail)} />
|
|
<Metadata label="状态" value={statusLabel(detail.status)} />
|
|
<Metadata label="开始时间" value={formatDate(detail.startedAt)} />
|
|
<Metadata label="结束时间" value={formatDate(detail.endedAt)} />
|
|
<Metadata label="会话 ID" value={detail.id} />
|
|
<Metadata
|
|
label="助手 ID"
|
|
value={detail.assistantId || "调试会话"}
|
|
/>
|
|
</div>
|
|
|
|
<div className="border-t border-hairline pt-4">
|
|
<div className="caption-label mb-2 text-muted-soft">统计</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1.5 bg-surface-strong text-muted-foreground"
|
|
>
|
|
<MessageSquareText size={12} />
|
|
{detail.messages.length} 条对话
|
|
</Badge>
|
|
{imageCount > 0 && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1.5 bg-surface-strong text-muted-foreground"
|
|
>
|
|
<ImageIcon size={12} />
|
|
{imageCount} 张照片
|
|
</Badge>
|
|
)}
|
|
{toolCount > 0 && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1.5 bg-surface-strong text-muted-foreground"
|
|
>
|
|
<Wrench size={12} />
|
|
{toolCount} 次工具
|
|
</Badge>
|
|
)}
|
|
{transitionCount > 0 && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1.5 bg-surface-strong text-muted-foreground"
|
|
>
|
|
<GitBranch size={12} />
|
|
{transitionCount} 次转移
|
|
</Badge>
|
|
)}
|
|
{nodes.size > 0 && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="gap-1.5 bg-surface-strong text-muted-foreground"
|
|
>
|
|
工作流 {nodes.size} 节点
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function analysisValue(value: unknown): string {
|
|
if (value === null || value === undefined || value === "") return "未提取到";
|
|
if (typeof value === "boolean") return value ? "是" : "否";
|
|
if (typeof value === "object") return JSON.stringify(value);
|
|
return String(value);
|
|
}
|
|
|
|
function AnalysisPanel({
|
|
analysis,
|
|
}: {
|
|
analysis: ConversationDetail["analysis"];
|
|
}) {
|
|
if (analysis.status === "pending" || analysis.status === "processing") {
|
|
return (
|
|
<div className="flex min-h-48 items-center justify-center gap-2 text-sm text-muted-foreground">
|
|
<Loader2 size={16} className="animate-spin" />
|
|
正在分析通话内容
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (analysis.status === "failed") {
|
|
return (
|
|
<div className="rounded-2xl border border-destructive/25 bg-destructive/5 px-4 py-4">
|
|
<div className="text-sm font-medium text-destructive">分析失败</div>
|
|
<p className="mt-1.5 break-words text-xs leading-5 text-muted-foreground">
|
|
{analysis.error || "分析服务没有返回有效结果。"}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (analysis.status === "completed") {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="caption-label text-muted-soft">关键信息</div>
|
|
{analysis.completedAt && (
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
完成于 {formatDate(analysis.completedAt)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="divide-y divide-hairline overflow-hidden rounded-2xl border border-hairline bg-background">
|
|
{analysis.fields.map((field) => (
|
|
<div
|
|
key={field.name}
|
|
className="grid grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] gap-4 px-4 py-3"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="break-all text-sm font-medium text-foreground">
|
|
{field.name}
|
|
</div>
|
|
<div className="mt-0.5 text-[11px] text-muted-soft">
|
|
{field.type}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"break-words text-sm text-foreground",
|
|
(field.value === null || field.value === undefined) &&
|
|
"text-muted-soft",
|
|
)}
|
|
>
|
|
{analysisValue(field.value)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-48 flex-col items-center justify-center rounded-2xl border border-dashed border-hairline-strong bg-canvas-soft px-5 py-10 text-center">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-strong text-foreground">
|
|
<ChartLine size={18} />
|
|
</div>
|
|
<div className="mt-4 text-sm font-medium text-foreground">
|
|
暂无分析结果
|
|
</div>
|
|
<p className="mt-1.5 max-w-xs text-xs leading-5 text-muted-foreground">
|
|
该会话未开启通话后分析，或没有可分析的对话内容。
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TranscriptPanel({ detail }: { detail: ConversationDetail }) {
|
|
const nodes = workflowNodes(detail);
|
|
const trace = (detail.extra.workflowTrace ?? []).map(recordValue);
|
|
const startedByInvocation = new Map<string, TraceEvent>();
|
|
trace.forEach((event) => {
|
|
if (event.event === "action_started" || event.event === "tool_started") {
|
|
const invocationId = textValue(event.invocationId);
|
|
if (invocationId) startedByInvocation.set(invocationId, event);
|
|
}
|
|
});
|
|
|
|
const entries: TimelineEntry[] = [
|
|
...detail.messages.map((message) => ({
|
|
kind: "message" as const,
|
|
timestamp: message.occurredAt,
|
|
order: message.sequence,
|
|
message,
|
|
})),
|
|
...trace.map((event, index) => ({
|
|
kind: "trace" as const,
|
|
timestamp: textValue(event.timestamp),
|
|
order: numberValue(event.sequence) ?? index + 1,
|
|
event,
|
|
})),
|
|
].sort(
|
|
(a, b) =>
|
|
timestampOrder(a.timestamp) - timestampOrder(b.timestamp) ||
|
|
a.order - b.order,
|
|
);
|
|
|
|
if (entries.length === 0) {
|
|
return (
|
|
<div className="flex min-h-48 items-center justify-center text-sm text-muted-foreground">
|
|
本次会话没有产生可展示的记录
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{entries.map((entry, index) =>
|
|
entry.kind === "message" ? (
|
|
<TimelineMessage
|
|
key={`message-${entry.message.id}`}
|
|
message={entry.message}
|
|
/>
|
|
) : (
|
|
<TimelineTrace
|
|
key={`trace-${textValue(entry.event.eventId) || index}`}
|
|
event={entry.event}
|
|
nodes={nodes}
|
|
startedEvent={startedByInvocation.get(
|
|
textValue(recordValue(entry.event.outcome).invocationId) ||
|
|
textValue(entry.event.invocationId),
|
|
)}
|
|
/>
|
|
),
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatPlaybackClock(seconds: number): string {
|
|
const total = Math.max(0, Math.floor(seconds));
|
|
const m = Math.floor(total / 60);
|
|
const s = total % 60;
|
|
return `${m}:${String(s).padStart(2, "0")}`;
|
|
}
|
|
|
|
/** 底部录音回放区（Mock：会话录音尚未接入后端时可演示进度）。 */
|
|
function HistoryPlaybackBar({
|
|
detail,
|
|
}: {
|
|
detail: ConversationDetail | null;
|
|
}) {
|
|
const durationSec = useMemo(() => {
|
|
if (!detail?.endedAt) return 0;
|
|
const ms =
|
|
new Date(detail.endedAt).getTime() - new Date(detail.startedAt).getTime();
|
|
return Number.isFinite(ms) ? Math.max(0, Math.round(ms / 1000)) : 0;
|
|
}, [detail]);
|
|
|
|
const [playing, setPlaying] = useState(false);
|
|
const [elapsed, setElapsed] = useState(0);
|
|
const hasRecording = false;
|
|
|
|
useEffect(() => {
|
|
if (!playing || durationSec <= 0) return;
|
|
const id = window.setInterval(() => {
|
|
setElapsed((current) => {
|
|
if (current + 0.2 >= durationSec) {
|
|
window.clearInterval(id);
|
|
queueMicrotask(() => setPlaying(false));
|
|
return durationSec;
|
|
}
|
|
return current + 0.2;
|
|
});
|
|
}, 200);
|
|
return () => window.clearInterval(id);
|
|
}, [playing, durationSec]);
|
|
|
|
const progress = durationSec > 0 ? Math.min(1, elapsed / durationSec) : 0;
|
|
|
|
return (
|
|
<div className="shrink-0 border-t border-hairline bg-canvas-soft/40">
|
|
<div className="flex items-center gap-3 px-4 py-2 sm:px-5">
|
|
<Button
|
|
type="button"
|
|
size="icon-sm"
|
|
variant="outline"
|
|
className="shrink-0 border-hairline-strong"
|
|
disabled={!detail || durationSec <= 0}
|
|
aria-label={playing ? "暂停" : "播放"}
|
|
onClick={() => {
|
|
setPlaying((value) => !value);
|
|
}}
|
|
>
|
|
{playing ? <Pause size={14} /> : <Play size={14} />}
|
|
</Button>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center justify-between gap-3 text-[11px] tabular-nums text-muted-soft">
|
|
<span>{formatPlaybackClock(elapsed)}</span>
|
|
<span className="truncate text-muted-foreground">
|
|
{hasRecording ? "会话录音" : "录音回放（Mock，尚未接入录音文件）"}
|
|
</span>
|
|
<span>{formatPlaybackClock(durationSec)}</span>
|
|
</div>
|
|
<div className="mt-1 h-1 overflow-hidden rounded-full bg-surface-strong">
|
|
<div
|
|
className="h-full rounded-full bg-primary transition-[width] duration-150"
|
|
style={{ width: `${progress * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type TimelineEntry =
|
|
| {
|
|
kind: "message";
|
|
timestamp: string;
|
|
order: number;
|
|
message: ConversationMessage;
|
|
}
|
|
| {
|
|
kind: "trace";
|
|
timestamp: string;
|
|
order: number;
|
|
event: TraceEvent;
|
|
};
|
|
|
|
function timestampOrder(value: string): number {
|
|
const parsed = Date.parse(value);
|
|
return Number.isNaN(parsed) ? Number.MAX_SAFE_INTEGER : parsed;
|
|
}
|
|
|
|
function TimelineMessage({ message }: { message: ConversationMessage }) {
|
|
const isUser = message.role === "user";
|
|
const images = (message.artifacts ?? []).filter((item) => item.kind === "image");
|
|
const isImageMessage = message.contentType === "image" || images.length > 0;
|
|
|
|
return (
|
|
<div className={cn("flex", isUser ? "justify-end" : "justify-start")}>
|
|
<div className="max-w-[88%] sm:max-w-[78%]">
|
|
<div
|
|
className={cn(
|
|
"mb-1.5 flex items-center gap-1.5 text-xs text-muted-soft",
|
|
isUser && "justify-end",
|
|
)}
|
|
>
|
|
{isImageMessage && <Camera size={12} />}
|
|
{isUser ? "用户" : "助手"} · {formatDate(message.occurredAt)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"overflow-hidden rounded-2xl text-left leading-6",
|
|
isUser
|
|
? "rounded-br-md bg-primary text-primary-foreground"
|
|
: "rounded-bl-md border border-hairline bg-background text-foreground shadow-sm",
|
|
isImageMessage ? "p-1" : "px-4 py-3",
|
|
)}
|
|
>
|
|
{images.map((image) => {
|
|
const url = artifactUrl(image.contentUrl);
|
|
return (
|
|
<a
|
|
key={image.id}
|
|
href={url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="block overflow-hidden rounded-[0.8rem] bg-black/10"
|
|
title="在新窗口查看原图"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={url}
|
|
alt="用户在通话中拍摄的照片"
|
|
className="max-h-[28rem] w-full object-contain"
|
|
/>
|
|
</a>
|
|
);
|
|
})}
|
|
{isImageMessage && images.length === 0 && (
|
|
<div className="flex min-h-40 min-w-56 flex-col items-center justify-center gap-2 rounded-[0.8rem] bg-background/10 px-6 text-center text-sm opacity-75">
|
|
<ImageIcon size={22} />
|
|
图片附件不可用
|
|
</div>
|
|
)}
|
|
{message.content && (
|
|
<div className={isImageMessage ? "px-3 py-2" : ""}>{message.content}</div>
|
|
)}
|
|
</div>
|
|
{(message.extra.source || message.extra.node_id) && (
|
|
<div className={cn("mt-1.5 text-[11px] text-muted-soft", isUser && "text-right")}>
|
|
{[message.extra.source, message.extra.node_id].filter(Boolean).join(" · ")}
|
|
</div>
|
|
)}
|
|
{message.extra.interrupted && (
|
|
<div className="mt-1.5 text-xs text-muted-foreground">
|
|
回复在生成中被打断
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TimelineTrace({
|
|
event,
|
|
nodes,
|
|
startedEvent,
|
|
}: {
|
|
event: TraceEvent;
|
|
nodes: Map<string, WorkflowNode>;
|
|
startedEvent?: TraceEvent;
|
|
}) {
|
|
const presentation = tracePresentation(event, nodes, startedEvent);
|
|
const Icon = presentation.icon;
|
|
const iconClass = {
|
|
default: "bg-surface-strong text-muted-foreground",
|
|
success: "bg-success/10 text-success",
|
|
error: "bg-destructive/10 text-destructive",
|
|
user: "bg-primary/10 text-primary",
|
|
}[presentation.tone];
|
|
|
|
return (
|
|
<div className="flex gap-3 rounded-xl border border-hairline-soft bg-background/65 p-3">
|
|
<div className={cn("flex size-8 shrink-0 items-center justify-center rounded-full", iconClass)}>
|
|
<Icon size={15} />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-1">
|
|
<div>
|
|
<div className="text-sm font-medium text-foreground">{presentation.title}</div>
|
|
<div className="mt-0.5 text-xs leading-5 text-muted-foreground">
|
|
{presentation.description}
|
|
</div>
|
|
</div>
|
|
<time className="shrink-0 text-[11px] tabular-nums text-muted-soft">
|
|
{formatDate(textValue(event.timestamp))}
|
|
</time>
|
|
</div>
|
|
<details className="mt-2 text-xs text-muted-foreground">
|
|
<summary className="w-fit cursor-pointer select-none hover:text-foreground">
|
|
详细数据
|
|
</summary>
|
|
<pre className="mt-2 max-h-64 overflow-auto rounded-lg bg-surface-strong p-3 font-mono text-[11px] leading-5 text-foreground">
|
|
{JSON.stringify(event, null, 2)}
|
|
</pre>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|