武阳
421 lines
12 KiB
TypeScript
421 lines
12 KiB
TypeScript
import {
|
|
bindExternalStoreMessage,
|
|
type ExportedMessageRepository,
|
|
type ThreadMessage,
|
|
} from "@assistant-ui/core";
|
|
import {
|
|
AuiIf,
|
|
ThreadListItemMorePrimitive,
|
|
ThreadListItemPrimitive,
|
|
ThreadListPrimitive,
|
|
} from "@assistant-ui/react";
|
|
import type { UIMessage } from "ai";
|
|
import {
|
|
ArchiveIcon,
|
|
HistoryIcon,
|
|
MoreHorizontalIcon,
|
|
PlusIcon,
|
|
} from "lucide-react";
|
|
import { type FC, useEffect, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { useClawSessionReplay } from "@/lib/claw-session-replay";
|
|
|
|
type ClawSession = {
|
|
session_id: string;
|
|
turns: number;
|
|
tool_calls: number;
|
|
preview: string;
|
|
modified_at: number;
|
|
};
|
|
|
|
type ClawStoredMessage = {
|
|
role?: string;
|
|
content?: string;
|
|
name?: string;
|
|
tool_call_id?: string;
|
|
tool_calls?: ClawStoredToolCall[];
|
|
metadata?: {
|
|
elapsed_ms?: unknown;
|
|
};
|
|
};
|
|
|
|
type ClawStoredSession = {
|
|
session_id: string;
|
|
messages?: ClawStoredMessage[];
|
|
};
|
|
|
|
type ClawStoredToolCall = {
|
|
id?: string;
|
|
name?: string;
|
|
arguments?: unknown;
|
|
function?: {
|
|
name?: string;
|
|
arguments?: unknown;
|
|
};
|
|
};
|
|
|
|
export const ThreadList: FC = () => {
|
|
return (
|
|
<ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex flex-col gap-1">
|
|
<ThreadListNew />
|
|
<AuiIf condition={({ threads }) => threads.isLoading}>
|
|
<ThreadListSkeleton />
|
|
</AuiIf>
|
|
<AuiIf condition={({ threads }) => !threads.isLoading}>
|
|
<ThreadListPrimitive.Items>
|
|
{() => <ThreadListItem />}
|
|
</ThreadListPrimitive.Items>
|
|
</AuiIf>
|
|
<ClawSessionList />
|
|
</ThreadListPrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const ThreadListNew: FC = () => {
|
|
return (
|
|
<div
|
|
onClickCapture={() => {
|
|
window.localStorage.removeItem("claw.activeSessionId");
|
|
window.dispatchEvent(new Event("claw-active-session-cleared"));
|
|
}}
|
|
>
|
|
<ThreadListPrimitive.New asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="aui-thread-list-new h-9 w-full justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted data-active:bg-muted"
|
|
>
|
|
<PlusIcon className="size-4" />
|
|
New Thread
|
|
</Button>
|
|
</ThreadListPrimitive.New>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ThreadListSkeleton: FC = () => {
|
|
const skeletonKeys = ["one", "two", "three", "four", "five"];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1">
|
|
{skeletonKeys.map((key) => (
|
|
<div
|
|
key={key}
|
|
role="status"
|
|
aria-label="Loading threads"
|
|
className="aui-thread-list-skeleton-wrapper flex h-9 items-center px-3"
|
|
>
|
|
<Skeleton className="aui-thread-list-skeleton h-4 w-full" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ThreadListItem: FC = () => {
|
|
return (
|
|
<ThreadListItemPrimitive.Root className="aui-thread-list-item group flex h-9 items-center gap-2 rounded-lg transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none data-active:bg-muted">
|
|
<ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center truncate px-3 text-start text-sm">
|
|
<ThreadListItemPrimitive.Title fallback="New Chat" />
|
|
</ThreadListItemPrimitive.Trigger>
|
|
<ThreadListItemMore />
|
|
</ThreadListItemPrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const ThreadListItemMore: FC = () => {
|
|
return (
|
|
<ThreadListItemMorePrimitive.Root>
|
|
<ThreadListItemMorePrimitive.Trigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="aui-thread-list-item-more mr-2 size-7 p-0 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100 group-data-active:opacity-100"
|
|
>
|
|
<MoreHorizontalIcon className="size-4" />
|
|
<span className="sr-only">More options</span>
|
|
</Button>
|
|
</ThreadListItemMorePrimitive.Trigger>
|
|
<ThreadListItemMorePrimitive.Content
|
|
side="bottom"
|
|
align="start"
|
|
className="aui-thread-list-item-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
|
|
>
|
|
<ThreadListItemPrimitive.Archive asChild>
|
|
<ThreadListItemMorePrimitive.Item className="aui-thread-list-item-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
|
|
<ArchiveIcon className="size-4" />
|
|
Archive
|
|
</ThreadListItemMorePrimitive.Item>
|
|
</ThreadListItemPrimitive.Archive>
|
|
</ThreadListItemMorePrimitive.Content>
|
|
</ThreadListItemMorePrimitive.Root>
|
|
);
|
|
};
|
|
|
|
const ClawSessionList: FC = () => {
|
|
const { replaySession } = useClawSessionReplay();
|
|
const [sessions, setSessions] = useState<ClawSession[]>([]);
|
|
const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
|
|
const [loadingSessionId, setLoadingSessionId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setActiveSessionId(window.localStorage.getItem("claw.activeSessionId"));
|
|
const clearActiveSession = () => setActiveSessionId(null);
|
|
window.addEventListener("claw-active-session-cleared", clearActiveSession);
|
|
fetch("/api/claw/sessions")
|
|
.then((res) => (res.ok ? res.json() : []))
|
|
.then((payload) => {
|
|
if (Array.isArray(payload))
|
|
setSessions(dedupeSessions(payload).slice(0, 8));
|
|
})
|
|
.catch(() => setSessions([]));
|
|
return () => {
|
|
window.removeEventListener(
|
|
"claw-active-session-cleared",
|
|
clearActiveSession,
|
|
);
|
|
};
|
|
}, []);
|
|
|
|
if (!sessions.length) return null;
|
|
|
|
return (
|
|
<div className="mt-4 border-t pt-3">
|
|
<div className="mb-2 flex items-center justify-between gap-2 px-3">
|
|
<div className="flex items-center gap-2 font-medium text-muted-foreground text-xs">
|
|
<HistoryIcon className="size-3.5" />
|
|
Claw 历史会话
|
|
</div>
|
|
{activeSessionId ? (
|
|
<button
|
|
type="button"
|
|
className="text-muted-foreground text-xs hover:text-foreground"
|
|
onClick={() => {
|
|
window.localStorage.removeItem("claw.activeSessionId");
|
|
setActiveSessionId(null);
|
|
}}
|
|
>
|
|
取消续接
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{sessions.map((session) => {
|
|
const active = activeSessionId === session.session_id;
|
|
return (
|
|
<button
|
|
key={`claw-session-${session.session_id}-${session.modified_at}`}
|
|
type="button"
|
|
className="rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted data-[active=true]:bg-muted"
|
|
data-active={active}
|
|
onClick={async () => {
|
|
window.localStorage.setItem(
|
|
"claw.activeSessionId",
|
|
session.session_id,
|
|
);
|
|
setActiveSessionId(session.session_id);
|
|
setLoadingSessionId(session.session_id);
|
|
try {
|
|
const response = await fetch(
|
|
`/api/claw/sessions/${session.session_id}`,
|
|
);
|
|
if (!response.ok) return;
|
|
const payload = (await response.json()) as ClawStoredSession;
|
|
replaySession(
|
|
session.session_id,
|
|
toReplayRepository(payload, session.session_id),
|
|
);
|
|
} finally {
|
|
setLoadingSessionId(null);
|
|
}
|
|
}}
|
|
>
|
|
<span className="block truncate">
|
|
{session.preview || session.session_id}
|
|
</span>
|
|
<span className="mt-0.5 block truncate text-muted-foreground text-xs">
|
|
{active ? "下一条消息将续接此会话 · " : ""}
|
|
{loadingSessionId === session.session_id ? "回放中 · " : ""}
|
|
{session.turns} 轮 · {session.tool_calls} 次工具
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function dedupeSessions(payload: unknown[]) {
|
|
const byId = new Map<string, ClawSession>();
|
|
for (const item of payload) {
|
|
if (!isClawSession(item)) continue;
|
|
const previous = byId.get(item.session_id);
|
|
if (!previous || item.modified_at >= previous.modified_at) {
|
|
byId.set(item.session_id, item);
|
|
}
|
|
}
|
|
return [...byId.values()].sort((a, b) => b.modified_at - a.modified_at);
|
|
}
|
|
|
|
function isClawSession(value: unknown): value is ClawSession {
|
|
if (!value || typeof value !== "object") return false;
|
|
const item = value as Partial<ClawSession>;
|
|
return (
|
|
typeof item.session_id === "string" && typeof item.modified_at === "number"
|
|
);
|
|
}
|
|
|
|
function toReplayRepository(
|
|
session: ClawStoredSession,
|
|
fallbackSessionId: string,
|
|
): ExportedMessageRepository {
|
|
const messages: ExportedMessageRepository["messages"] = [];
|
|
const toolResults = collectToolResults(session.messages ?? []);
|
|
let previousId: string | null = null;
|
|
for (const [index, message] of (session.messages ?? []).entries()) {
|
|
if (message.role === "tool") continue;
|
|
if (message.role !== "user" && message.role !== "assistant") continue;
|
|
const content = cleanStoredContent(message.content ?? "");
|
|
if (!content) continue;
|
|
if (content.trimStart().startsWith("<system-reminder>")) continue;
|
|
const id = `${fallbackSessionId}-${index}`;
|
|
const toolParts =
|
|
message.role === "assistant"
|
|
? toToolParts(message.tool_calls ?? [], toolResults)
|
|
: [];
|
|
const elapsedMs =
|
|
typeof message.metadata?.elapsed_ms === "number"
|
|
? message.metadata.elapsed_ms
|
|
: undefined;
|
|
const reasoningParts =
|
|
message.role === "assistant" &&
|
|
(toolParts.length > 0 || elapsedMs !== undefined)
|
|
? [
|
|
{
|
|
type: "reasoning",
|
|
text: formatHistoricalReasoning(toolParts.length, elapsedMs),
|
|
},
|
|
]
|
|
: [];
|
|
const parts = (
|
|
message.role === "assistant" &&
|
|
(reasoningParts.length || toolParts.length)
|
|
? [...reasoningParts, ...toolParts, { type: "text", text: content }]
|
|
: [{ type: "text", text: content }]
|
|
) as UIMessage["parts"];
|
|
const uiMessage: UIMessage = {
|
|
id,
|
|
role: message.role,
|
|
parts,
|
|
...(message.role === "assistant"
|
|
? { metadata: { sessionId: session.session_id ?? fallbackSessionId } }
|
|
: {}),
|
|
} as UIMessage;
|
|
const threadMessage = {
|
|
id,
|
|
role: message.role,
|
|
createdAt: new Date(),
|
|
content: toThreadMessageContent(parts),
|
|
...(message.role === "assistant"
|
|
? {
|
|
status: { type: "complete", reason: "stop" },
|
|
metadata: {
|
|
unstable_state: null,
|
|
unstable_annotations: [],
|
|
unstable_data: [],
|
|
steps: [],
|
|
custom: { sessionId: session.session_id ?? fallbackSessionId },
|
|
},
|
|
}
|
|
: { metadata: { custom: {} } }),
|
|
} as ThreadMessage;
|
|
bindExternalStoreMessage(threadMessage, uiMessage);
|
|
messages.push({ message: threadMessage, parentId: previousId });
|
|
previousId = id;
|
|
}
|
|
return {
|
|
headId: previousId,
|
|
messages,
|
|
};
|
|
}
|
|
|
|
function cleanStoredContent(content: string) {
|
|
const markers = ["\n\n[当前会话目录]", "\n[当前会话目录]"];
|
|
for (const marker of markers) {
|
|
if (content.includes(marker)) return content.split(marker, 1)[0].trim();
|
|
}
|
|
return content.trim();
|
|
}
|
|
|
|
function collectToolResults(messages: readonly ClawStoredMessage[]) {
|
|
const results = new Map<string, string>();
|
|
for (const message of messages) {
|
|
if (message.role === "tool" && message.tool_call_id) {
|
|
results.set(message.tool_call_id, message.content ?? "");
|
|
}
|
|
}
|
|
return results;
|
|
}
|
|
|
|
function toToolParts(
|
|
toolCalls: readonly ClawStoredToolCall[],
|
|
toolResults: Map<string, string>,
|
|
) {
|
|
return toolCalls.flatMap((call) => {
|
|
const toolCallId = call.id;
|
|
const toolName = call.function?.name ?? call.name;
|
|
if (!toolCallId || !toolName) return [];
|
|
const input = parseToolInput(call.function?.arguments ?? call.arguments);
|
|
const output = toolResults.get(toolCallId);
|
|
return [
|
|
{
|
|
type: "dynamic-tool",
|
|
toolName,
|
|
toolCallId,
|
|
state: output === undefined ? "input-available" : "output-available",
|
|
input,
|
|
...(output === undefined ? {} : { output }),
|
|
},
|
|
];
|
|
});
|
|
}
|
|
|
|
function formatHistoricalReasoning(toolCount: number, elapsedMs?: number) {
|
|
const duration =
|
|
elapsedMs === undefined ? "" : `，用时 ${formatDuration(elapsedMs)}`;
|
|
if (toolCount <= 0) return `历史记录：思考完成${duration}。`;
|
|
return `历史记录：本轮调用了 ${toolCount} 个工具${duration}。`;
|
|
}
|
|
|
|
function formatDuration(ms: number) {
|
|
if (ms < 1000) return `${ms}ms`;
|
|
return `${(ms / 1000).toFixed(1)}s`;
|
|
}
|
|
|
|
function toThreadMessageContent(parts: UIMessage["parts"]) {
|
|
return parts.map((part) => {
|
|
if (part.type === "text" || part.type === "reasoning") return part;
|
|
if (part.type === "dynamic-tool") {
|
|
return {
|
|
type: "tool-call",
|
|
toolName: part.toolName,
|
|
toolCallId: part.toolCallId,
|
|
args: part.input ?? {},
|
|
argsText: JSON.stringify(part.input ?? {}),
|
|
...(part.state === "output-available" ? { result: part.output } : {}),
|
|
};
|
|
}
|
|
return part;
|
|
});
|
|
}
|
|
|
|
function parseToolInput(value: unknown) {
|
|
if (typeof value !== "string") return value ?? {};
|
|
try {
|
|
return JSON.parse(value);
|
|
} catch {
|
|
return value;
|
|
}
|
|
}
|