198 lines
15 KiB
TypeScript
198 lines
15 KiB
TypeScript
import { Check, ChevronDown, FolderInput, MoreHorizontal, Pencil, RefreshCw, Search, Trash2, X } from "lucide-react";
|
|
import { useEffect, useRef, useState, type CSSProperties, type RefObject } from "react";
|
|
import { Button } from "@/shared/ui/button";
|
|
import { Input } from "@/shared/ui/input";
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/shared/ui/dialog";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "@/shared/ui/dropdown-menu";
|
|
import { Separator } from "@/shared/ui/separator";
|
|
import { cn } from "@/shared/ui/cn";
|
|
import { StatusBadge } from "@/shared/ui/status";
|
|
import { copySelectedText } from "@/shared/ai-elements/paragraph-copy";
|
|
import type { AgentChatSessionSummary, AgentTopic } from "../api/client";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
triggerRef: RefObject<HTMLButtonElement | null>;
|
|
scopeLabel: string;
|
|
activeSessionId?: string | null;
|
|
loading: boolean;
|
|
loadingSessionId: string | null;
|
|
sessions: AgentChatSessionSummary[];
|
|
topics?: AgentTopic[];
|
|
topicId?: string;
|
|
onTopicChange?: (id: string | undefined) => void;
|
|
onMoveSessionToTopic?: (sessionId: string, topicId: string | null) => Promise<void>;
|
|
query?: string;
|
|
onQueryChange?: (value: string) => void;
|
|
hasMore?: boolean;
|
|
loadingMore?: boolean;
|
|
error?: string;
|
|
pendingUpdate?: boolean;
|
|
onLoadMore?: () => Promise<unknown> | void;
|
|
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({ open, onOpenChange, triggerRef, scopeLabel, activeSessionId, loading, loadingSessionId,
|
|
sessions, query = "", onQueryChange, hasMore, loadingMore, error, pendingUpdate, onLoadMore, onRefresh,
|
|
topics = [], topicId, onTopicChange, onMoveSessionToTopic, onSelectSession, onRenameSession, onDeleteSession }: Props) {
|
|
const [search, setSearch] = useState(query);
|
|
const [movingId, setMovingId] = useState<string | null>(null);
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
const [title, setTitle] = useState("");
|
|
const [busy, setBusy] = useState<string | null>(null);
|
|
const [actionError, setActionError] = useState<string | null>(null);
|
|
const searchRef = useRef<HTMLInputElement>(null);
|
|
const [viewport, setViewport] = useState<{ height: number; top: number } | null>(null);
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const visual = window.visualViewport;
|
|
const update = () => {
|
|
const next = { height: visual?.height ?? window.innerHeight, top: visual?.offsetTop ?? 0 };
|
|
setViewport((current) => current?.height === next.height && current.top === next.top ? current : next);
|
|
};
|
|
update();
|
|
visual?.addEventListener("resize", update);
|
|
visual?.addEventListener("scroll", update);
|
|
window.addEventListener("resize", update);
|
|
return () => {
|
|
visual?.removeEventListener("resize", update);
|
|
visual?.removeEventListener("scroll", update);
|
|
window.removeEventListener("resize", update);
|
|
};
|
|
}, [open]);
|
|
useEffect(() => {
|
|
if (!open || search === query) return;
|
|
const timer = setTimeout(() => onQueryChange?.(search.trim()), 250);
|
|
return () => clearTimeout(timer);
|
|
}, [onQueryChange, open, query, search]);
|
|
const perform = async (id: string, action: () => Promise<void> | void) => {
|
|
setBusy(id); setActionError(null);
|
|
try { await action(); setEditingId(null); setDeletingId(null); }
|
|
catch (reason) { setActionError(reason instanceof Error ? reason.message : "操作失败，请重试"); }
|
|
finally { setBusy(null); }
|
|
};
|
|
let previousGroup = "";
|
|
return <Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent onCopy={copySelectedText} showCloseButton={false} data-agent-theme="chat"
|
|
overlayClassName="agent-history-overlay motion-reduce:animate-none"
|
|
className="agent-history-dialog flex flex-col gap-0 overflow-hidden bg-card p-0 text-foreground motion-reduce:animate-none"
|
|
style={viewport ? { "--history-viewport-height": `${viewport.height}px`, "--history-viewport-top": `${viewport.top}px` } as CSSProperties : undefined}
|
|
onOpenAutoFocus={(event) => { event.preventDefault(); searchRef.current?.focus(); }}
|
|
onCloseAutoFocus={(event) => { event.preventDefault(); triggerRef.current?.focus(); }}>
|
|
<div data-agent-history-header className="shrink-0 space-y-4 p-4 sm:p-6 sm:pb-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<DialogHeader className="min-w-0 text-left">
|
|
<DialogTitle>历史对话</DialogTitle>
|
|
<DialogDescription className="break-words">{scopeLabel}</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<Button variant="ghost" size="icon-sm" aria-label="刷新 Agent 历史记录" loading={loadingMore}
|
|
onClick={() => void perform("refresh", () => onRefresh?.())}><RefreshCw aria-hidden="true" /></Button>
|
|
<Button variant="ghost" size="icon-sm" aria-label="关闭历史对话" onClick={() => onOpenChange(false)}><X aria-hidden="true" /></Button>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<Search aria-hidden="true" className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input ref={searchRef} type="search" maxLength={200} aria-label="搜索标题和对话内容" placeholder="搜索标题或对话内容"
|
|
value={search} onChange={(event) => setSearch(event.target.value)} className="pl-9" />
|
|
</div>
|
|
{onTopicChange || pendingUpdate ? <div className="flex flex-wrap items-center justify-between gap-2">
|
|
{onTopicChange ? <DropdownMenu><DropdownMenuTrigger asChild><Button variant="outline" size="sm" aria-label="筛选历史主题" className="max-w-full">
|
|
<FolderInput aria-hidden="true" /><span className="truncate">{topicId === "unclassified" ? "未分类" : topics.find((topic) => topic.id === topicId)?.name ?? "全部主题"}</span><ChevronDown aria-hidden="true" />
|
|
</Button></DropdownMenuTrigger><DropdownMenuContent data-agent-theme="chat" align="start" className="z-[112] max-h-64 overflow-y-auto">
|
|
<DropdownMenuRadioGroup value={topicId ?? "all"} onValueChange={(id) => onTopicChange(id === "all" ? undefined : id)}>
|
|
<DropdownMenuRadioItem value="all">全部主题</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="unclassified">未分类</DropdownMenuRadioItem>
|
|
{topics.map((topic) => <DropdownMenuRadioItem key={topic.id} value={topic.id}>{topic.name}</DropdownMenuRadioItem>)}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent></DropdownMenu> : null}
|
|
{pendingUpdate ? <Button variant="link" className="text-xs" onClick={() => void perform("refresh", () => onRefresh?.())}>
|
|
历史记录有更新，点击刷新
|
|
</Button> : null}
|
|
</div> : null}
|
|
{error || actionError ? <p role="alert" className="text-sm text-destructive">{actionError ?? error}</p> : null}
|
|
</div>
|
|
<Separator />
|
|
<div role="region" aria-label="Agent 历史记录" aria-busy={loading || undefined}
|
|
className="agent-history-list min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-4 sm:px-4">
|
|
{loading && !sessions.length ? <p role="status" className="px-3 py-8 text-center text-sm text-muted-foreground">正在加载历史对话…</p>
|
|
: !sessions.length ? <p className="px-3 py-8 text-center text-sm text-muted-foreground">{error ? "历史记录暂不可用，请刷新重试" : query ? "没有找到匹配的会话" : "暂无历史记录"}</p> : null}
|
|
{sessions.map((session) => {
|
|
const group = historyGroup(session.updatedAt);
|
|
const showGroup = group !== previousGroup;
|
|
previousGroup = group;
|
|
const active = session.id === activeSessionId;
|
|
const editing = session.id === editingId;
|
|
const deleting = session.id === deletingId;
|
|
const itemBusy = busy === session.id || loadingSessionId === session.id;
|
|
return <div key={session.id}>
|
|
{showGroup ? <h3 className="px-3 pb-2 pt-4 text-xs font-medium text-muted-foreground">{group}</h3> : null}
|
|
<div className={cn("agent-history-item flex items-center gap-3 rounded-md p-3", active ? "agent-history-item-active bg-accent" : "hover:bg-accent/50")}>
|
|
{editing ? <form className="flex min-w-0 flex-1 flex-wrap items-center gap-2" onSubmit={(event) => {
|
|
event.preventDefault(); if (title.trim()) void perform(session.id, () => onRenameSession?.(session.id, title.trim()));
|
|
}} onKeyDown={(event) => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); setEditingId(null); } }}>
|
|
<Input autoFocus aria-label="会话标题" value={title} disabled={itemBusy} onChange={(event) => setTitle(event.target.value)} className="min-w-0 flex-1" />
|
|
<Button type="submit" size="icon" aria-label="保存对话标题" loading={itemBusy} disabled={!title.trim()}><Check aria-hidden="true" /></Button>
|
|
<Button type="button" size="icon" variant="ghost" aria-label="取消重命名" onClick={() => setEditingId(null)}><X aria-hidden="true" /></Button>
|
|
</form> : movingId === session.id ? <div className="min-w-0 flex-1 space-y-2">
|
|
<p className="text-xs font-medium text-muted-foreground">移入主题</p>
|
|
<div className="flex max-h-48 flex-col gap-1 overflow-y-auto">
|
|
{[{ id: "", name: "未分类" }, ...topics].map((topic) => <Button key={topic.id} variant="ghost" disabled={Boolean(busy)} className="h-auto min-h-9 justify-start whitespace-normal break-words text-left" onClick={() => void perform(session.id, async () => {
|
|
await onMoveSessionToTopic?.(session.id, topic.id || null); setMovingId(null);
|
|
})}>{topic.name}</Button>)}
|
|
</div><Button size="sm" variant="ghost" onClick={() => setMovingId(null)}>取消移动</Button>
|
|
</div> : deleting ? <div className="flex min-w-0 flex-1 flex-wrap items-center justify-between gap-2">
|
|
<div className="min-w-0 flex-1"><p className="break-words text-sm">删除“{session.title}”？</p><p className="mt-1 text-xs text-muted-foreground">删除后无法从历史记录中恢复</p></div>
|
|
<Button variant="destructive" loading={itemBusy} onClick={() => void perform(session.id, () => onDeleteSession?.(session.id))}>确认</Button>
|
|
<Button variant="ghost" size="icon" aria-label="取消删除" onClick={() => setDeletingId(null)}><X aria-hidden="true" /></Button>
|
|
</div> : <>
|
|
<button type="button" className="agent-history-session-trigger min-w-0 flex-1 rounded-sm text-left outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
aria-current={active ? "true" : undefined}
|
|
disabled={itemBusy || Boolean(loadingSessionId)} onClick={() => onSelectSession(session.id)}>
|
|
<span className="line-clamp-2 break-words text-sm font-medium leading-6 text-foreground" title={session.title}>{session.title}</span>
|
|
<span className="mt-1 block truncate text-xs text-muted-foreground">{topics.find((topic) => topic.id === session.topicId)?.name ?? session.topicName ?? "未分类"}</span>
|
|
{session.searchSnippet ? <span className="mt-1 line-clamp-2 break-words text-xs leading-5 text-muted-foreground">{session.searchSnippet}</span> : null}
|
|
<span className="mt-1 block text-xs tabular-nums text-muted-foreground">{formatUpdatedAt(session.updatedAt)}{itemBusy ? " · 正在打开" : ""}</span>
|
|
</button>
|
|
<span className="flex shrink-0 flex-col items-end gap-1">
|
|
{session.purpose === "task_collaboration" ? <StatusBadge tone="neutral">任务协作</StatusBadge> : null}
|
|
{active ? <StatusBadge tone="info">当前</StatusBadge> : null}
|
|
{session.needsInput ? <StatusBadge tone="warning">需要确认</StatusBadge> : null}
|
|
{session.isStreaming || session.runStatus === "running" ? <StatusBadge tone="info">处理中</StatusBadge> : null}
|
|
{session.runStatus === "error" ? <StatusBadge tone="danger">处理失败</StatusBadge> : null}
|
|
</span>
|
|
<DropdownMenu><DropdownMenuTrigger asChild><Button size="icon" variant="ghost" disabled={Boolean(loadingSessionId)} aria-label={`会话操作：${session.title}`}><MoreHorizontal aria-hidden="true" /></Button></DropdownMenuTrigger>
|
|
<DropdownMenuContent data-agent-theme="chat" align="end" className="z-[112]">
|
|
<DropdownMenuItem disabled={!onRenameSession} onSelect={() => { setEditingId(session.id); setDeletingId(null); setTitle(session.title); }}><Pencil aria-hidden="true" />重命名对话</DropdownMenuItem>
|
|
<DropdownMenuItem disabled={!onMoveSessionToTopic} onSelect={() => { setMovingId(session.id); setEditingId(null); setDeletingId(null); }}><FolderInput aria-hidden="true" />移入主题</DropdownMenuItem>
|
|
<DropdownMenuItem disabled={!onDeleteSession} onSelect={() => { setDeletingId(session.id); setEditingId(null); }}><Trash2 aria-hidden="true" />删除对话</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>}
|
|
</div>
|
|
</div>;
|
|
})}
|
|
{hasMore ? <div className="px-3 pt-4"><Button className="w-full" variant="outline" loading={loadingMore} onClick={() => void onLoadMore?.()}>加载更多</Button></div> : null}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>;
|
|
}
|
|
|
|
function historyGroup(value: number) {
|
|
const now = new Date();
|
|
const day = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
|
|
const date = new Date(value);
|
|
const start = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
|
|
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1).getTime();
|
|
const week = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 7).getTime();
|
|
return start >= day ? "今天" : start === yesterday ? "昨天" : start >= week ? "近 7 天" : "更早";
|
|
}
|
|
function formatUpdatedAt(value: number) {
|
|
return new Intl.DateTimeFormat("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }).format(value);
|
|
}
|