297 lines
13 KiB
TypeScript
297 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { Check, Loader2, Pencil, RefreshCw, Trash2, X } from "lucide-react";
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import { useState } from "react";
|
|
import { Input } from "@/shared/ui/input";
|
|
import { cn } from "@/lib/utils";
|
|
import type { AgentChatSessionSummary } from "../api/client";
|
|
import {
|
|
agentLayoutTransition,
|
|
agentPanelItemVariants,
|
|
agentPanelListVariants
|
|
} from "./agent-motion";
|
|
|
|
type AgentHistoryPanelProps = {
|
|
activeSessionId?: string | null;
|
|
loading: boolean;
|
|
loadingSessionId: string | null;
|
|
sessions: AgentChatSessionSummary[];
|
|
onRefresh?: () => Promise<void> | void;
|
|
onSelectSession: (sessionId: string) => void;
|
|
onRenameSession?: (sessionId: string, title: string) => Promise<void> | void;
|
|
onDeleteSession?: (sessionId: string) => Promise<void> | void;
|
|
};
|
|
|
|
export function AgentHistoryPanel({
|
|
activeSessionId,
|
|
loading,
|
|
loadingSessionId,
|
|
sessions,
|
|
onRefresh,
|
|
onSelectSession,
|
|
onRenameSession,
|
|
onDeleteSession
|
|
}: AgentHistoryPanelProps) {
|
|
const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
|
|
const [draftTitle, setDraftTitle] = useState("");
|
|
const [savingSessionId, setSavingSessionId] = useState<string | null>(null);
|
|
const [deletingSessionId, setDeletingSessionId] = useState<string | null>(null);
|
|
const [confirmingDeleteSessionId, setConfirmingDeleteSessionId] = useState<string | null>(null);
|
|
|
|
const beginRename = (session: AgentChatSessionSummary) => {
|
|
setEditingSessionId(session.id);
|
|
setDraftTitle(session.title);
|
|
};
|
|
|
|
const cancelRename = () => {
|
|
setEditingSessionId(null);
|
|
setDraftTitle("");
|
|
};
|
|
|
|
const saveRename = (session: AgentChatSessionSummary) => {
|
|
const normalizedTitle = draftTitle.trim();
|
|
if (!normalizedTitle || normalizedTitle === session.title) {
|
|
cancelRename();
|
|
return;
|
|
}
|
|
|
|
setSavingSessionId(session.id);
|
|
void Promise.resolve(onRenameSession?.(session.id, normalizedTitle))
|
|
.then(cancelRename)
|
|
.finally(() => setSavingSessionId(null));
|
|
};
|
|
|
|
const confirmDelete = (sessionId: string) => {
|
|
setDeletingSessionId(sessionId);
|
|
void Promise.resolve(onDeleteSession?.(sessionId))
|
|
.then(() => setConfirmingDeleteSessionId(null))
|
|
.finally(() => setDeletingSessionId(null));
|
|
};
|
|
|
|
return (
|
|
<div className="px-3 pb-3">
|
|
<div className="agent-panel-control rounded-2xl p-2.5 shadow-sm">
|
|
<div className="mb-2 flex items-center justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-semibold text-slate-950">历史记录</p>
|
|
<p className="mt-0.5 text-xs text-slate-500">{sessions.length ? `${sessions.length} 个会话` : "暂无历史会话"}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
aria-label="刷新 Agent 历史记录"
|
|
title="刷新 Agent 历史记录"
|
|
className="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-white hover:text-slate-950 disabled:cursor-not-allowed disabled:opacity-50"
|
|
disabled={loading}
|
|
onClick={() => void Promise.resolve(onRefresh?.())}
|
|
>
|
|
{loading ? (
|
|
<Loader2 size={15} className="animate-spin" aria-hidden="true" />
|
|
) : (
|
|
<RefreshCw size={15} aria-hidden="true" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<motion.div className="max-h-56 space-y-1 overflow-y-auto pr-1" variants={agentPanelListVariants} animate="animate">
|
|
<AnimatePresence initial={false} mode="popLayout">
|
|
{loading && sessions.length === 0 ? (
|
|
<motion.div
|
|
key="history-loading"
|
|
className="flex items-center gap-2 rounded-xl bg-slate-50 px-3 py-3 text-xs font-semibold text-slate-500"
|
|
initial="initial"
|
|
animate="animate"
|
|
exit="exit"
|
|
variants={agentPanelItemVariants}
|
|
>
|
|
<Loader2 size={14} className="animate-spin" aria-hidden="true" />
|
|
正在加载
|
|
</motion.div>
|
|
) : sessions.length > 0 ? (
|
|
sessions.map((session) => {
|
|
const active = session.id === activeSessionId;
|
|
const itemLoading = loadingSessionId === session.id;
|
|
const editing = editingSessionId === session.id;
|
|
const saving = savingSessionId === session.id;
|
|
const deleting = deletingSessionId === session.id;
|
|
const confirmingDelete = confirmingDeleteSessionId === session.id;
|
|
|
|
return (
|
|
<motion.div
|
|
key={session.id}
|
|
layout
|
|
className={cn(
|
|
"grid w-full grid-cols-[1fr_auto] gap-2 rounded-xl px-3 py-2 text-left transition hover:bg-white",
|
|
active ? "border border-blue-200 bg-blue-50/80" : "border border-transparent bg-slate-50/80"
|
|
)}
|
|
initial="initial"
|
|
animate="animate"
|
|
exit="exit"
|
|
variants={agentPanelItemVariants}
|
|
transition={agentLayoutTransition}
|
|
>
|
|
<AnimatePresence initial={false} mode="popLayout">
|
|
{confirmingDelete ? (
|
|
<motion.div key="confirm-delete" className="min-w-0" initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
|
|
<span className="block truncate text-xs font-semibold text-red-700" title={session.title}>
|
|
删除“{session.title}”？
|
|
</span>
|
|
<span className="mt-0.5 block truncate text-xs text-slate-500">
|
|
删除后无法从历史记录中恢复
|
|
</span>
|
|
</motion.div>
|
|
) : editing ? (
|
|
<motion.form
|
|
key="rename"
|
|
className="min-w-0"
|
|
initial="initial"
|
|
animate="animate"
|
|
exit="exit"
|
|
variants={agentPanelItemVariants}
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
saveRename(session);
|
|
}}
|
|
>
|
|
<Input
|
|
autoFocus
|
|
className="h-8 rounded-lg bg-white text-xs"
|
|
value={draftTitle}
|
|
disabled={saving}
|
|
onChange={(event) => setDraftTitle(event.currentTarget.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Escape") {
|
|
cancelRename();
|
|
}
|
|
}}
|
|
/>
|
|
</motion.form>
|
|
) : (
|
|
<motion.button
|
|
key="session-summary"
|
|
type="button"
|
|
className="min-w-0 text-left"
|
|
disabled={itemLoading || deleting}
|
|
initial="initial"
|
|
animate="animate"
|
|
exit="exit"
|
|
variants={agentPanelItemVariants}
|
|
onClick={() => onSelectSession(session.id)}
|
|
>
|
|
<span className="block truncate text-xs font-semibold text-slate-900" title={session.title}>
|
|
{session.title}
|
|
</span>
|
|
<span className="mt-0.5 block truncate text-xs text-slate-500">
|
|
{formatSessionUpdatedAt(session.updatedAt)}
|
|
</span>
|
|
</motion.button>
|
|
)}
|
|
</AnimatePresence>
|
|
<span className="flex items-center gap-1">
|
|
{session.runStatus === "running" || session.isStreaming ? (
|
|
<span className="h-1.5 w-1.5 rounded-full bg-blue-500" />
|
|
) : null}
|
|
{itemLoading || saving || deleting ? (
|
|
<Loader2 size={13} className="animate-spin text-blue-600" aria-hidden="true" />
|
|
) : null}
|
|
{active && !editing && !confirmingDelete ? (
|
|
<span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-700">
|
|
当前
|
|
</span>
|
|
) : null}
|
|
{confirmingDelete ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="h-7 rounded-lg bg-red-600 px-2 text-xs font-semibold text-white transition hover:bg-red-700 disabled:opacity-50"
|
|
disabled={deleting}
|
|
onClick={() => confirmDelete(session.id)}
|
|
>
|
|
确认
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="取消删除"
|
|
title="取消删除"
|
|
className="grid h-7 w-7 place-items-center rounded-lg text-slate-500 transition hover:bg-white disabled:opacity-50"
|
|
disabled={deleting}
|
|
onClick={() => setConfirmingDeleteSessionId(null)}
|
|
>
|
|
<X size={14} aria-hidden="true" />
|
|
</button>
|
|
</>
|
|
) : editing ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
aria-label="保存对话主题"
|
|
title="保存对话主题"
|
|
className="grid h-7 w-7 place-items-center rounded-lg text-blue-600 transition hover:bg-white disabled:opacity-50"
|
|
disabled={saving}
|
|
onClick={() => saveRename(session)}
|
|
>
|
|
<Check size={14} aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="取消重命名"
|
|
title="取消重命名"
|
|
className="grid h-7 w-7 place-items-center rounded-lg text-slate-500 transition hover:bg-white disabled:opacity-50"
|
|
disabled={saving}
|
|
onClick={cancelRename}
|
|
>
|
|
<X size={14} aria-hidden="true" />
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<button
|
|
type="button"
|
|
aria-label="重命名对话"
|
|
title="重命名对话"
|
|
className="grid h-7 w-7 place-items-center rounded-lg text-slate-500 transition hover:bg-white hover:text-slate-950 disabled:opacity-50"
|
|
disabled={itemLoading || deleting || !onRenameSession}
|
|
onClick={() => beginRename(session)}
|
|
>
|
|
<Pencil size={14} aria-hidden="true" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="删除对话"
|
|
title="删除对话"
|
|
className="grid h-7 w-7 place-items-center rounded-lg text-slate-500 transition hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
|
|
disabled={itemLoading || deleting || !onDeleteSession}
|
|
onClick={() => {
|
|
cancelRename();
|
|
setConfirmingDeleteSessionId(session.id);
|
|
}}
|
|
>
|
|
<Trash2 size={14} aria-hidden="true" />
|
|
</button>
|
|
</>
|
|
)}
|
|
</span>
|
|
</motion.div>
|
|
);
|
|
})
|
|
) : (
|
|
<motion.div key="history-empty" className="rounded-xl bg-slate-50 px-3 py-3 text-xs text-slate-500" initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
|
|
暂无历史记录
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatSessionUpdatedAt(value: number) {
|
|
return new Intl.DateTimeFormat("zh-CN", {
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit"
|
|
}).format(value);
|
|
}
|