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>
|
||
);
|
||
}
|