-
{title}
-
{description}
+
+
+
+
+
+
{title}
+
{description}
+
{fields.map((field) =>
field.kind === "datetime" ? (
@@ -347,6 +338,7 @@ function FollowUpForm({
/>
) : (
- {submitting ? "正在发送…" : "发送补充资料"}
+ {submitting ? submitMode === "draft" ? "正在处理…" : "正在发送…" : submitMode === "draft" ? "带入对话" : "发送补充资料"}
{feedback ? (
diff --git a/src/features/agent/answer-ui/contract.ts b/src/features/agent/answer-ui/contract.ts
index c898979..a56b485 100644
--- a/src/features/agent/answer-ui/contract.ts
+++ b/src/features/agent/answer-ui/contract.ts
@@ -16,6 +16,19 @@ const payloadSchema = z
})
.strict();
+// Stored reports remain readable if one presentation component is no longer supported.
+export const storedAnswerUiBlockSchema = z.object({
+ version: z.string(),
+ block_id: key,
+ fallback_text: z.string().min(1).max(4000),
+ spec: z.unknown()
+});
+export const reportUiBlocksSchema = z.array(z.object({
+ block: storedAnswerUiBlockSchema,
+ evidence_refs: z.array(z.string().min(1).max(128)).min(1).max(100)
+}).strict()).max(8);
+export type StoredReportUiBlock = z.infer[number];
+
export type AnswerUiBlock = {
version: typeof ANSWER_UI_VERSION;
block_id: string;
diff --git a/src/features/agent/answer-ui/interactive-chart.tsx b/src/features/agent/answer-ui/interactive-chart.tsx
new file mode 100644
index 0000000..8f7d611
--- /dev/null
+++ b/src/features/agent/answer-ui/interactive-chart.tsx
@@ -0,0 +1,126 @@
+import { useState } from "react";
+import ReactECharts from "echarts-for-react";
+import { BarChart3, ChevronDown, Database, SlidersHorizontal, Table2, TrendingUp } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/ui/tabs";
+import { Button } from "@/shared/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/shared/ui/select";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/shared/ui/collapsible";
+import { InteractiveDataTable } from "./interactive-data-table";
+import { AskAboutContent } from "./answer-ui-interactions";
+
+export type AnswerChartProps = {
+ title: string;
+ chart_type: "line" | "bar";
+ x_data: string[];
+ series: Array<{ name: string; data: number[] }>;
+ source: string;
+};
+const colors = ["#2563eb", "#059669", "#d97706", "#7c3aed", "#0891b2", "#e11d48", "#475569", "#a16207"];
+function PointSelect({ label, value, labels, onChange }: {
+ label: string; value: number; labels: string[]; onChange: (value: number) => void;
+}) {
+ return ;
+}
+export function InteractiveChart(props: AnswerChartProps) {
+ const [view, setView] = useState(props.chart_type);
+ const [hidden, setHidden] = useState([]);
+ const [range, setRange] = useState<[number, number]>([0, props.x_data.length - 1]);
+ const [point, setPoint] = useState(0);
+ const visible = props.series.filter((_, index) => !hidden.includes(index));
+ const labels = props.x_data.slice(range[0], range[1] + 1);
+ const pointIndex = Math.min(range[1], Math.max(range[0], point));
+ const fullRange = range[0] === 0 && range[1] === props.x_data.length - 1;
+ const option = (type: "line" | "bar") => ({
+ animation: false,
+ color: colors.filter((_, index) => !hidden.includes(index)),
+ aria: { enabled: true },
+ tooltip: { trigger: "axis", renderMode: "richText" },
+ grid: { top: 16, right: 12, bottom: 38, left: 12, containLabel: true },
+ xAxis: { type: "category", data: labels, axisLabel: { fontSize: 11, color: "#64748b", hideOverlap: true } },
+ yAxis: { type: "value", axisLabel: { fontSize: 11, color: "#64748b" }, splitLine: { lineStyle: { color: "#e2e8f0" } } },
+ series: visible.map((series) => ({ name: series.name, type, data: series.data.slice(range[0], range[1] + 1),
+ showSymbol: true, symbolSize: 7, emphasis: { focus: "series" } }))
+ });
+ return
+
+ {props.title}
+ {labels.length} / {props.x_data.length} 个数据点 · {visible.length} 组序列
+
+
+
+
+ 折线
+ 柱状
+ 数据
+
+
+ {props.series.map((series, index) => )}
+
+
+
+
+
+
+
+ {fullRange ? "全部数据" : `${props.x_data[range[0]]} 至 ${props.x_data[range[1]]}`}
+
+
+
+
+
setRange([start, Math.max(start, range[1])])} />
+ 至
+ setRange([Math.min(range[0], end), end])} />
+
+ {
+ if (event.componentType === "series" && typeof event.dataIndex === "number")
+ setPoint(range[0] + event.dataIndex);
+ } }} />
+
+ )}
+
+ series.name)]}
+ rows={labels.map((label, index) => [label, ...visible.map((series) => String(series.data[range[0] + index]))])}
+ source={props.source} />
+
+
+
+
查看数据点
+
setPoint(range[0] + index)} />
+
+
+ {visible.map((series, index) =>
+
- {series.name}
+ - {series.data[pointIndex]}
+ )}
+
+
`${series.name}：${series.data[pointIndex]}`).join("\n")}\n来源：${props.source}`} />
+
+ 来源：{props.source}。区间操作仅查看已加载数据。
+
+
+ ;
+}
diff --git a/src/features/agent/answer-ui/interactive-data-table.tsx b/src/features/agent/answer-ui/interactive-data-table.tsx
new file mode 100644
index 0000000..80f4092
--- /dev/null
+++ b/src/features/agent/answer-ui/interactive-data-table.tsx
@@ -0,0 +1,70 @@
+import { useMemo, useState } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { Input } from "@/shared/ui/input";
+import { Button } from "@/shared/ui/button";
+import { Checkbox } from "@/shared/ui/checkbox";
+import { cn } from "@/shared/ui/cn";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui/table";
+import { AskAboutContent } from "./answer-ui-interactions";
+
+export function InteractiveDataTable({ title, columns, rows, source }: {
+ title: string; columns: string[]; rows: string[][]; source?: string;
+}) {
+ const [query, setQuery] = useState("");
+ const [sort, setSort] = useState<{ column: number; descending: boolean } | null>(null);
+ const [selection, setSelection] = useState([]);
+ const filtered = useMemo(() => {
+ const items = rows.map((cells, id) => ({ cells, id }))
+ .filter(({ cells }) => cells.join(" ").toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
+ if (sort) items.sort((a, b) => {
+ const aValue = a.cells[sort.column], bValue = b.cells[sort.column];
+ const compared = /^[-+]?\d+(\.\d+)?%?$/.test(aValue) && /^[-+]?\d+(\.\d+)?%?$/.test(bValue)
+ ? Number.parseFloat(aValue) - Number.parseFloat(bValue)
+ : aValue.localeCompare(bValue, "zh-CN", { numeric: true });
+ return sort.descending ? -compared : compared;
+ });
+ return items;
+ }, [rows, sort, query]);
+ const selected = filtered.filter(({ id }) => selection.includes(id));
+ const quote = selected.map(({ cells }) => cells.map((cell, index) => `${columns[index]}：${cell}`).join("；")).join("\n");
+ return
+
+ { setQuery(event.currentTarget.value); setSelection([]); }} />
+ {filtered.length} / {rows.length} 行
+
+
+
+ {title}
+
+ 选择行
+ {columns.map((column, index) =>
+
+ )}
+
+
+ {filtered.map(({ cells, id }) =>
+ setSelection((current) => event.target.checked ? [...current, id] : current.filter((value) => value !== id))} />
+ {cells.map((cell, index) => {cell})}
+ )}
+ {!filtered.length ?
+ {rows.length ? "当前筛选没有匹配的数据。" : "没有已加载的数据。"}
+ : null}
+
+
+
+ {selected.length ?
+
已选 {selected.length} 行
+
+
:
筛选与排序仅作用于已加载数据；勾选行可继续提问。
}
+
+ {running ? (
+
+
+ 正在回复
+
+ ) : interactive ? (
+
+ 交互回答
+
+ ) : null}
+
+ );
+}
+
+export function AgentChatMessageActions({ parts }: { parts: AnswerUiPart[] }) {
+ const [copied, setCopied] = useState(false);
+ const [error, setError] = useState(false);
+ const text = parts
+ .map((part) => (part.type === "text" ? part.text : part.block.fallback_text))
+ .join("\n\n");
+ if (!text.trim()) return null;
+
+ return (
+
+ {
+ try {
+ await navigator.clipboard.writeText(text);
+ setCopied(true);
+ setError(false);
+ } catch {
+ setCopied(false);
+ setError(true);
+ }
+ }}
+ >
+ {copied ? : }
+ {copied ? "已复制" : "复制回复"}
+
+
+ {error ? "复制失败，请选择文字复制" : copied ? "已复制回复文字与交互内容摘要" : ""}
+
+
+ );
+}
diff --git a/src/features/agent/components/agent-collapsed-rail.tsx b/src/features/agent/components/agent-collapsed-rail.tsx
index d58e14a..6165337 100644
--- a/src/features/agent/components/agent-collapsed-rail.tsx
+++ b/src/features/agent/components/agent-collapsed-rail.tsx
@@ -1,7 +1,8 @@
-import { ChevronRight } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
import type { PersonaState } from "@/shared/ai-elements/persona";
-import { cn } from "@/shared/ui/cn";
+import { Button } from "@/shared/ui/button";
import { AgentPersona } from "./agent-persona";
+import { agentLayoutTransition } from "./agent-motion";
type AgentCollapsedRailProps = {
personaState?: PersonaState;
@@ -15,26 +16,27 @@ export function AgentCollapsedRail({
onExpand
}: AgentCollapsedRailProps) {
const expandLabel = `展开 Agent 助手面板，当前状态：${statusLabel}`;
+ const prefersReducedMotion = useReducedMotion();
return (
-
+
+
+
);
}
diff --git a/src/features/agent/components/agent-command-panel.tsx b/src/features/agent/components/agent-command-panel.tsx
index 793d3dc..d658d93 100644
--- a/src/features/agent/components/agent-command-panel.tsx
+++ b/src/features/agent/components/agent-command-panel.tsx
@@ -1,16 +1,14 @@
import type { AnswerUiMapTarget } from "../answer-ui/answer-ui-view";
import { AnswerPartsView } from "../answer-ui/answer-parts-view";
+import type { AnswerUiSelection } from "../answer-ui/answer-ui-interaction-context";
+import { ExpandableReading } from "@/shared/ui/reading-workspace";
import { getAnswerPresentation } from "../answer-ui/answer-presentation";
import { Disclosure } from "@/shared/ui/disclosure";
import {
- Activity,
- ArrowUpRight,
CheckCircle2,
ChevronDown,
ChevronsUpDown,
ChevronLeft,
- Folder,
- FolderPlus,
History,
LoaderCircle,
Mic,
@@ -22,7 +20,8 @@ import {
Shield,
ShieldCheck,
Square,
- UserRound,
+ Sparkles,
+ Zap,
Volume2,
X
} from "lucide-react";
@@ -30,7 +29,6 @@ import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/
import {
useCallback,
useEffect,
- useId,
useLayoutEffect,
useMemo,
useRef,
@@ -46,6 +44,7 @@ import { Agent, AgentContent } from "@/shared/ai-elements/agent";
import {
Conversation,
ConversationContent,
+ ConversationEmptyState,
ConversationScrollButton
} from "@/shared/ai-elements/conversation";
import type { PersonaState } from "@/shared/ai-elements/persona";
@@ -69,17 +68,23 @@ import {
DropdownMenuTrigger
} from "@/shared/ui/dropdown-menu";
import { Button } from "@/shared/ui/button";
+import { Separator } from "@/shared/ui/separator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shared/ui/tooltip";
import { cn } from "@/shared/ui/cn";
-import { StatusBadge, StatusDot, type StatusTone } from "@/shared/ui/status";
+import { StatusDot, type StatusTone } from "@/shared/ui/status";
import type { AgentChatSessionSummary, AgentInputDelivery, AgentResponseInput } from "../api/client";
-import { AgentPersona } from "./agent-persona";
+import { AgentChatMessageActions, AgentChatMessageHeader } from "./agent-chat-message-chrome";
import {
+ agentLayoutTransition,
agentPanelItemVariants,
agentPanelListVariants,
agentPanelSectionVariants
} from "./agent-motion";
+import { AgentPersona } from "./agent-persona";
+import { AgentTopicControls } from "./agent-topic-controls";
import { AgentHistoryPanel } from "./agent-history-panel";
import { AgentMessageInbox } from "./agent-message-inbox";
+import { AgentPendingInputs } from "./agent-pending-inputs";
import type { ComponentProps } from "react";
import { AgentMessageDetails, AgentMessageProgress } from "./agent-message-details";
import { AgentUiEnvelopeRenderer } from "./agent-ui-envelope-renderer";
@@ -111,10 +116,6 @@ export type AgentWorkspaceContextItem = {
tone?: "neutral" | "info" | "warning";
};
-export type AgentConversationProjectOption = {
- id: string;
- name: string;
-};
type AgentCommandPanelProps = {
presentation?: AgentCommandPanelPresentation;
@@ -123,6 +124,21 @@ type AgentCommandPanelProps = {
sessionTitle?: string;
sessionHistory?: AgentChatSessionSummary[];
sessionHistoryLoading?: boolean;
+ historyQuery?: string;
+ historyHasMore?: boolean;
+ historyLoadingMore?: boolean;
+ historyError?: string;
+ historyPendingUpdate?: boolean;
+ onHistoryQueryChange?: (value: string) => void;
+ onHistoryOpen?: () => Promise | void;
+ onHistoryClose?: () => void;
+ onLoadMoreHistory?: () => Promise | void;
+ hasOlderMessages?: boolean;
+ loadingOlderMessages?: boolean;
+ onLoadOlderMessages?: () => Promise | void;
+ backgroundStatus?: string;
+ readingPosition?: { messageId?: string; offset: number; atBottom: boolean };
+ onReadingPositionChange?: (position: { messageId?: string; offset: number; atBottom: boolean }) => void;
promptSuggestions?: Array<{ question: string; sourceLabel?: string }>;
promptSuggestionsLoading?: boolean;
promptSuggestionsUnavailable?: boolean;
@@ -135,17 +151,18 @@ type AgentCommandPanelProps = {
pendingInputs?: AgentResponseInput[];
onInputDeliveryChange?: (delivery: AgentInputDelivery) => void;
onPendingInputDeliveryChange?: (id: string, delivery: AgentInputDelivery) => Promise | void;
+ onPendingInputEdit?: (id: string) => Promise | void;
+ onPendingInputCancel?: (id: string) => Promise | void;
+ onDownloadFile?: (path: string) => Promise | void;
messages?: AgentChatMessage[];
streamRenderState?: AgentStreamRenderState;
modelOptions?: AgentModelOption[];
selectedModel?: string;
- conversationScope?: "personal" | "project";
- onConversationScopeChange?: (scope: "personal" | "project") => Promise | void;
- conversationProjects?: AgentConversationProjectOption[];
- selectedConversationProjectId?: string | null;
- onConversationProjectChange?: (projectId: string) => Promise | void;
currentProjectName?: string | null;
- onOpenProjectCreator?: () => void;
+ topicControls?: ComponentProps;
+ historyTopicId?: string;
+ onHistoryTopicChange?: (id: string | undefined) => void;
+ onMoveSessionToTopic?: (sessionId: string, topicId: string | null) => Promise;
approvalMode?: AgentApprovalMode;
uiResults?: AgentUiResult[];
reviewPanel?: ReactNode;
@@ -154,6 +171,8 @@ type AgentCommandPanelProps = {
prompt: string;
promptFocusRequest?: number;
promptReference?: { title: string; detail?: string; placeholder?: string };
+ contentReference?: AnswerUiSelection;
+ onContentReferenceChange?: (selection: AnswerUiSelection | undefined) => void;
onCollapse: () => void;
onPromptChange: Dispatch>;
onRefreshHistory?: () => Promise | void;
@@ -181,6 +200,10 @@ export function AgentCommandPanel({
sessionTitle = "新对话",
sessionHistory = [],
sessionHistoryLoading = false,
+ historyQuery, historyHasMore, historyLoadingMore, historyError, historyPendingUpdate,
+ onHistoryQueryChange, onHistoryOpen, onHistoryClose, onLoadMoreHistory,
+ hasOlderMessages, loadingOlderMessages, onLoadOlderMessages, backgroundStatus,
+ readingPosition, onReadingPositionChange,
promptSuggestions = [],
promptSuggestionsLoading = false,
promptSuggestionsUnavailable = false,
@@ -192,17 +215,15 @@ export function AgentCommandPanel({
pendingInputs = [],
onInputDeliveryChange,
onPendingInputDeliveryChange,
+ onPendingInputEdit,
+ onPendingInputCancel,
+ onDownloadFile,
messages = [],
streamRenderState = {},
modelOptions = [],
selectedModel = "",
- conversationScope = "project",
- onConversationScopeChange,
- conversationProjects = [],
- selectedConversationProjectId,
- onConversationProjectChange,
currentProjectName,
- onOpenProjectCreator,
+ topicControls, historyTopicId, onHistoryTopicChange, onMoveSessionToTopic,
approvalMode = "request",
uiResults = [],
reviewPanel,
@@ -210,6 +231,8 @@ export function AgentCommandPanel({
prompt,
promptFocusRequest = 0,
promptReference,
+ contentReference,
+ onContentReferenceChange,
onCollapse,
onPromptChange,
onRefreshHistory,
@@ -227,23 +250,21 @@ export function AgentCommandPanel({
onRejectQuestion
}: AgentCommandPanelProps) {
const [historyOpen, setHistoryOpen] = useState(false);
+ const [historySelectionError, setHistorySelectionError] = useState();
const [loadingSessionId, setLoadingSessionId] = useState(null);
const [scrollRequestId, setScrollRequestId] = useState(0);
- const historyPanelId = useId();
+ const prefersReducedMotion = useReducedMotion();
const historyTriggerRef = useRef(null);
- const historyPanelRef = useRef(null);
const promptRestoreGenerationRef = useRef(0);
- const composerRef = useRef(null);
const promptTextareaRef = useRef(null);
- const composerStartRectRef = useRef(null);
- const composerTransitionRef = useRef(null);
const mountedRef = useRef(true);
const desktopFloating = presentation === "desktop-floating";
- const floatingPresentation = desktopFloating || presentation === "mobile-sheet";
+ const floatingPresentation = desktopFloating;
const hasConversation = messages.length > 0 || streaming || Boolean(messageInbox?.messages.length);
- const centeredComposer = !hasConversation && (presentation === "desktop-dock" || Boolean(promptReference));
+ // Existing task state and loading/errors stay visible even before a first message.
+ const centeredComposer = !hasConversation && !loadingSessionId && !reviewPanel
+ && uiResults.length === 0 && !messageInbox?.loading && !messageInbox?.error;
const showStartSuggestions = centeredComposer && !qaOnly && !promptReference;
- const prefersReducedMotion = useReducedMotion();
const trimmedPrompt = prompt.trim();
useEffect(() => {
if (!promptFocusRequest) return;
@@ -254,10 +275,7 @@ export function AgentCommandPanel({
});
return () => cancelAnimationFrame(frame);
}, [promptFocusRequest]);
- const selectedConversationProject = conversationProjects.find(
- (project) => project.id === selectedConversationProjectId
- );
- const selectedProjectName = selectedConversationProject?.name ?? currentProjectName ?? "当前项目";
+
const {
speechState,
speakingMessageId,
@@ -287,12 +305,6 @@ export function AgentCommandPanel({
isSupported: isRecognitionSupported
} = useAgentSpeechRecognition(appendRecognitionResult);
- useEffect(() => {
- if (historyOpen) {
- void Promise.resolve(onRefreshHistory?.());
- }
- }, [historyOpen, onRefreshHistory]);
-
useEffect(() => {
mountedRef.current = true;
return () => {
@@ -301,46 +313,6 @@ export function AgentCommandPanel({
};
}, []);
- useEffect(() => {
- if (!historyOpen) {
- return;
- }
-
- const closeHistoryOnOutsidePointer = (event: PointerEvent) => {
- const target = event.target;
- if (!(target instanceof Node)) {
- return;
- }
-
- if (
- historyPanelRef.current?.contains(target) ||
- historyTriggerRef.current?.contains(target)
- ) {
- return;
- }
-
- setHistoryOpen(false);
- };
- const closeHistoryOnEscape = (event: KeyboardEvent) => {
- if (event.key !== "Escape") {
- return;
- }
-
- event.preventDefault();
- event.stopPropagation();
- setHistoryOpen(false);
- window.requestAnimationFrame(() => historyTriggerRef.current?.focus());
- };
-
- document.addEventListener("pointerdown", closeHistoryOnOutsidePointer, true);
- document.addEventListener("keydown", closeHistoryOnEscape);
-
- return () => {
- document.removeEventListener("pointerdown", closeHistoryOnOutsidePointer, true);
- document.removeEventListener("keydown", closeHistoryOnEscape);
- };
- }, [historyOpen]);
-
useEffect(() => {
stopSpeech();
}, [activeSessionId, stopSpeech]);
@@ -349,53 +321,50 @@ export function AgentCommandPanel({
if (streaming) stopListening();
}, [stopListening, streaming]);
- useLayoutEffect(() => {
- if (centeredComposer || !composerStartRectRef.current || !composerRef.current) return;
- const start = composerStartRectRef.current;
- composerStartRectRef.current = null;
- const end = composerRef.current.getBoundingClientRect();
- if (prefersReducedMotion || (start.x === end.x && start.y === end.y)) return;
- composerTransitionRef.current?.cancel();
- composerTransitionRef.current = composerRef.current.animate(
- [
- { transform: `translate(${start.x - end.x}px, ${start.y - end.y}px)` },
- { transform: "translate(0, 0)" }
- ],
- { duration: 280, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }
- );
- }, [centeredComposer, prefersReducedMotion]);
-
const submitPrompt = (nextPrompt: string) => {
if (!nextPrompt) {
return;
}
const restoreGeneration = promptRestoreGenerationRef.current + 1;
promptRestoreGenerationRef.current = restoreGeneration;
- if (centeredComposer && !prefersReducedMotion && composerRef.current) {
- composerStartRectRef.current = composerRef.current.getBoundingClientRect();
- }
onPromptChange("");
stopListening();
setScrollRequestId((requestId) => requestId + 1);
- void Promise.resolve(onSubmitPrompt(nextPrompt)).catch(() => {
+ const submittedReference = contentReference;
+ const message = submittedReference
+ ? `${nextPrompt}\n\n引用内容：${submittedReference.title}\n${submittedReference.text}`
+ : nextPrompt;
+ onContentReferenceChange?.(undefined);
+ void Promise.resolve(onSubmitPrompt(message)).catch(() => {
if (!mountedRef.current || promptRestoreGenerationRef.current !== restoreGeneration) {
return;
}
onPromptChange((current) => current || nextPrompt);
+ if (submittedReference) onContentReferenceChange?.(submittedReference);
});
};
const historyPanel = (
{ setHistoryOpen(open); if (!open) onHistoryClose?.(); }}
+ triggerRef={historyTriggerRef}
+ scopeLabel={currentProjectName ?? "当前项目"}
+ query={historyQuery} onQueryChange={onHistoryQueryChange}
+ hasMore={historyHasMore} loadingMore={historyLoadingMore} error={historySelectionError ?? historyError}
+ pendingUpdate={historyPendingUpdate} onLoadMore={onLoadMoreHistory}
activeSessionId={activeSessionId}
loadingSessionId={loadingSessionId}
loading={sessionHistoryLoading}
sessions={sessionHistory}
+ topics={topicControls?.topics} topicId={historyTopicId} onTopicChange={onHistoryTopicChange} onMoveSessionToTopic={onMoveSessionToTopic}
onRefresh={onRefreshHistory}
onSelectSession={(nextSessionId) => {
promptRestoreGenerationRef.current += 1;
setLoadingSessionId(nextSessionId);
+ setHistorySelectionError(undefined);
void Promise.resolve(onLoadHistorySession?.(nextSessionId))
- .then(() => setHistoryOpen(false))
+ .then(() => { setHistoryOpen(false); onHistoryClose?.(); })
+ .catch((error: unknown) => setHistorySelectionError(error instanceof Error ? error.message : "无法打开这个历史会话"))
.finally(() => setLoadingSessionId(null));
}}
onRenameSession={onRenameHistorySession}
@@ -404,10 +373,24 @@ export function AgentCommandPanel({
);
return (
-
| 
|
+
+## 2. 尺寸与定位
+
+| 使用位置 | 画布尺寸 | 布局要求 |
+| --- | --- | --- |
+| `AgentPersona` 默认 | 64 × 64px | 固定尺寸，不随状态变化 |
+| 桌面收起入口 | 64 × 64px | 画布填满按钮命中范围 |
+| 桌面与手机面板标题栏 | 64 × 64px | 与名称、状态共同形成身份区 |
+| 手机地图入口 | 40 × 40px | 使用同一资源，适应地图工具栏 |
+
+桌面收起入口距地图左侧 **12px**，距顶部导航下沿 **12px**。两个方向由同一定位层的内边距控制；当前导航高 56px，因此入口左上角为视口中的 `(12px, 68px)`。这里的顶部距离以导航下沿为起点。
+
+尺寸指整个 Rive 画布，包含资源固有的羽化留白。放大时保留画板比例，不裁掉外围水纹。悬浮入口仅显示 Persona；状态通过按钮名称与悬停提示提供，避免增加卡片、状态点、箭头或底圈。
+
+## 3. Agent 标题区
+
+身份行高 **80px**，左右内边距 12px、上下 8px。左侧为 64px Persona，旁边上下排列名称“供水助手”和连接状态；右侧集中排列对话操作。
+
+| 内容 | 规格与行为 |
+| --- | --- |
+| 名称 | 14px、半粗，与现有标题排版一致 |
+| 连接状态 | 12px 辅助文字配共享 `StatusDot`；显示实际的“连接中 / 在线 / 离线” |
+| 操作 | 新建对话、历史、折叠；手机末项为关闭，每项命中范围 40 × 40px |
+| 上下文行 | 高 36px，保留会话标题与项目或个人范围切换 |
+
+身份行与上下文行保持连续的浅色表面，在标题区底部使用分隔线。历史展开、键盘导航和关闭后焦点恢复沿用现有行为。320px 手机宽度下，名称、状态和三个操作均应完整显示且互不重叠。
+
+## 4. 动画与状态
+
+动画由 Rive WebGL2 的同一个 `default` 状态机驱动，业务层提供真实状态。在线水纹持续流动；离线保持完整球体，通过节奏与光圈变化表达连接不可用。
+
+| 状态 | 呈现 |
+| --- | --- |
+| `idle` | 原生待机流动与外围水纹 |
+| `thinking` | 原生处理状态动画 |
+| `listening` | 原生等待输入动画，具体含义由业务映射决定，不单凭形象表示麦克风录音 |
+| `speaking` | 原生输出状态动画 |
+| `asleep` | 内部柔光低速、小幅流动，外围三层光圈透明度为 0 |
+| `hover` | 鼠标附近的局部白色反射随指针移动，与当前业务状态叠加 |
+
+离线设计称为“静水待机”。在线与离线以 **600ms** 混合切换，可见实例保持挂载；离线球体持续运动，恢复在线后恢复外围光圈。离线悬停也不重新打开外围光圈。
+
+离线三层循环周期为 **15s / 19.25s / 31.375s**，位移与呼吸振幅为原来的 25%，完整旋转保持循环闭合。时间轴速率由 60 调至 24，约为原速 40%；此值不代表屏幕渲染帧率上限。详细图层参数见 [obsidian-offline.json](../design/agent/obsidian-offline.json)。
+
+## 5. 悬停与点击
+
+悬停沿用原版三层反射的尺寸、渐变、亮度和淡入淡出。白色高光跟随鼠标所在位置：从左侧移到右侧时，高光随之移动；鼠标离开后恢复常态。不能只打开 `hover` 布尔值而遗漏坐标，否则原生指针目标停在默认中心，造成球体中间大片变白。球体、点击范围和常态外围水纹尺寸均保持原定义。
+
+共享 `Persona` 保留 Rive 原生指针监听，将主指针的进入、移动、离开和取消转交给画布；坐标转换与资源内的跟随约束由 Rive 完成。触摸及按压不转交动画，不绑定 View Model。悬浮入口和标题形象共用这条通路，画布就绪后才接收交互。
+
+点击、触摸轻点及 Enter / Space 展开对话，离线时同样可用。球体不添加 Motion 按压缩放、弹簧回弹或按下变暗；触摸按下不模拟 hover。外层面板的布局动画独立维护，Resizable 连续调宽保持直接响应。
+
+## 6. 加载、降级与缓存
+
+首次加载显示当前资源导出的静态帧。Rive 加载后先等待 600ms 完成原生进入动画，再以 **180ms CSS 透明度渐变**衔接，尺寸和位置保持固定。在线、离线分别使用相应的本地 PNG，避免银灰占位与蓝色动画之间的突变。
+
+系统开启“减少动态效果”时显示静态帧，不初始化 Rive；资源失败时保留相应静态形象与按钮功能。强制颜色模式显示高对比轮廓，保留焦点和键盘操作。元素离开视口或页面隐藏时卸载渲染实例，可见后恢复。
+
+客户端按页面内存、Cache Storage、网络的顺序取得资源。仅共享不可变 `.riv` 字节，每个可见入口独立创建动画实例；不共享实例或绑定 View Model。资源重建时同步生成 SHA-256 版本，URL 带版本参数，使旧缓存自然更新。缓存范围与校验逻辑见 [动画资源说明](agent-persona-resource.md)。
+
+## 7. 实现与维护
+
+| 入口 | 文件 |
+| --- | --- |
+| 业务形象与降级 | [AgentPersona](../src/features/agent/components/agent-persona.tsx) |
+| 原生状态机接入 | [Persona](../src/shared/ai-elements/persona.tsx) |
+| 桌面悬浮按钮 | [AgentCollapsedRail](../src/features/agent/components/agent-collapsed-rail.tsx) |
+| 标题区 | [AgentCommandPanel](../src/features/agent/components/agent-command-panel.tsx) |
+| 资源生成与原版还原 | [build-agent-persona.mjs](../scripts/build-agent-persona.mjs) |
+| 资源版本与缓存 | [persona-resource.ts](../src/shared/ai-elements/persona-resource.ts) |
+
+材质与离线参数以对应 JSON 为准，悬停沿用原始资源中的几何与指针约束；改动时同步本文与资源说明。原始解析数据保留以便逐字节还原 `.riv`；该数据不等于作者完整的 `.rev` 编辑器工程。
+
+验收时检查 64px 桌面入口、64px 标题形象与 40px 手机入口，覆盖默认、悬停进入与退出、快速切换、离线和恢复在线。桌面检查 1024/1440px 视口及 400/640px 面板，手机检查 320/375px。确认左上间距一致、按压无缩放、首次加载无画面硬切、底色能遮蔽地图、离线无外围光圈、缓存刷新后仍加载当前版本。
+
+资源级检查使用固定时间步对照原版与修改版：在线状态保持相同材质下的逐像素一致；悬停检查左右移动时局部高光跟随指针，移出后完全恢复。工作台检查鼠标坐标实际到达悬浮入口和标题形象的 Rive 监听器，不能仅断言 hover 开关变化。离线检查完整球体、持续变化和光圈关闭。运行命令见 [资源说明](agent-persona-resource.md)，各次实际验证结果记录在 [实施记录](history/agent-chat-ui-implementation-notes.md)。
diff --git a/docs/agent-persona-resource.md b/docs/agent-persona-resource.md
new file mode 100644
index 0000000..913a649
--- /dev/null
+++ b/docs/agent-persona-resource.md
@@ -0,0 +1,91 @@
+# Agent 动画资源与离线水纹
+
+Agent 保留原版 Obsidian 图形与运动结构，采用经实际动画对比选定的 02「冰水蓝」配色，并在 Rive 文件内部增加“静水待机”离线设计。在线保留外围水纹光圈；离线关闭外围三层光圈，仅保留球体内部的缓慢流动。在线、离线和交互使用同一个 `default` 状态机。
+
+当前视觉规格、尺寸、标题区与交互约定统一见 [Persona 设计](agent-persona-design.md)。本文维护资源结构、生成过程与缓存实现。
+
+## 文件与再生成
+
+| 文件 | 用途 |
+| --- | --- |
+| [运行时源数据](../design/agent/obsidian-runtime.json) | 从原版解析的 775 个对象，包含图形、属性、关键帧、状态机和绑定数据 |
+| [冰水蓝材质参数](../design/agent/obsidian-material.json) | 已确认的水体、暗部、白色高光和水纹颜色，以及球面底色遮蔽度 |
+| [离线设计参数](../design/agent/obsidian-offline.json) | 可编辑的播放速度、振幅、混合时长和三层柔光/反射强度 |
+| [生成脚本](../scripts/build-agent-persona.mjs) | 验证原版重编码、修改离线动画，生成本地资源 |
+| [应用资源](../public/agent/obsidian-water-v1.riv) | 前端加载的 9,879 字节资源 |
+| [缓存版本清单](../src/shared/ai-elements/persona-resource-manifest.json) | 生成脚本同步输出的路径、SHA-256 和字节数，用于客户端缓存更新 |
+| [静态帧生成脚本](../scripts/render-agent-persona-stills.mjs) | 从实际资源渲染在线、离线 PNG，供首次加载、减少动态效果和失败兜底使用 |
+| [资源对照测试](../tests/browser/agent-persona-resource.e2e.ts) | 真实 WebGL2 运行时定时推进，比较原版与修改版画面 |
+
+在前端仓库运行：
+
+```bash
+node scripts/build-agent-persona.mjs
+node scripts/render-agent-persona-stills.mjs
+node scripts/build-agent-persona.mjs --check
+# 将原版还原到一个尚不存在的文件，应用资源不会被替换
+node scripts/build-agent-persona.mjs --restore-original /tmp/obsidian-original.riv
+pnpm test:browser tests/browser/agent-persona-resource.e2e.ts tests/browser/agent-orb.e2e.ts --workers=1
+```
+
+JSON 保存原始运行数据；脚本负责可审查的定制。`--check` 验证原始数据能逐字节恢复，并检查生成结果与应用资源一致。基线 SHA-256 为 `c6ae7d08f5787a560e38d3453ba155c28250acf2db75e6acf2b0d1a0cd6017db`。替换上游基线时需重新解析和验证，不应只修改散列值跳过检查。
+
+配色编辑 `obsidian-material.json`，其中 `bodyColor` 只控制球面底色，`bodyOpacity` 控制它在待机/活动时的遮蔽度，其他蓝色反射沿用 `colors` 映射；离线动画编辑 `obsidian-offline.json`；重新生成 `.riv` 和静态帧后刷新前端。静态帧脚本使用已安装的 Playwright、esbuild 与 Rive WASM，无需访问外部动画服务。`fps` 控制离线时间轴速度，`amplitude` 控制位移与缩放的变化幅度，`transitionMs` 控制在线/离线的混合时长。各层 `opacity` 中的 `rest` 和 `crest` 是相对原始透明度的比例，分别对应循环开始/结束与中点。数值需满足 `0 ≤ rest ≤ crest ≤ 1`；保留循环端点一致，避免接缝。外围三个光圈均固定为 `0`。
+
+`--restore-original` 使用只创建模式，目标文件已存在时会报错，避免覆盖已有编辑。原版还原文件与基线逐字节相同，包含原版离线消失的行为；前端继续加载带离线设计的应用资源。
+
+## 冰水蓝与离线设计
+
+材质采用经原生 Rive 预览选定的 02 方案：水体 `#299FDF`、同色相暗部 `#1482BC`、白色高光 `#FFFFFF`、外围水纹 `#4C9ECC`。外围水纹从初选时的 `#B0E3FF` 加深，以提高浅色地图上的辨识度；光圈粗细、渐变 alpha 和运动保持原定义。球面底色独立设置为 `#DCEFFA`，待机/活动时的不透明度为 94%/98%，同步调整对应的活动状态关键帧。浅色且高遮蔽度的底层减少地图道路穿过球体的现象，蓝色反射仍由原来的运动图层呈现；暗部沿用蓝色调，避免叠加灰黑阴影。渐变位置、羽化、裁剪、运动曲线及其他节点的原有 alpha 保留，不添加 CSS 滤镜或 View Model 绑定。
+
+此前 A「水务蓝」使用灰蓝主体、浅蓝高光与 78%/90% 的底色不透明度，在白底实际动画中显得发灰、浑浊，已被本方案替换。后续调整以同一背景下的真实动画及 40/64px 入口效果为准，不以色卡单独判断材质。
+
+离线以“水面逐渐平静”表达连接不可用：外围三层光圈在 600ms 混合期间消退至完全不可见，内部柔光降低并保持缓慢流动。球体整体透明度和缩放保持完整；悬停不会重新打开离线光圈。恢复在线时重新显现光圈与在线节奏。业务状态仍由入口按钮的可访问名称和提示提供。
+
+| 层 | 柔光强度 | 反射强度 | 循环周期 |
+| --- | --- | --- | --- |
+| 内层与下侧柔光 | 56%–68% | 0，关闭 | 15 秒 |
+| 中层与内部柔光 | 48%–62% | 0，关闭 | 19.25 秒 |
+| 外层与上侧柔光 | 60%–72% | 0，关闭 | 31.375 秒 |
+
+上表是设计参数当前值的解释。内部柔光以原版贝塞尔缓动从 `rest` 升到 `crest` 再回落，周期错开，避免同步闪烁；光圈透明度保持为零。40/64px 入口共用同一资源，状态切换不改变布局尺寸。
+
+参数中的图层名称是根据运行时结构补充的语义别名，不是恢复出的作者原始命名。`objectId` 是画板组件编号，不能用 JSON 对象数组的索引替代：绑定记录不占组件编号。
+
+## 解析结果与修改
+
+原版有 1 个 `Obsidian` 画板、20 段动画、13 个状态机层和 5 个布尔输入。`asleep` 动画在第 45 帧将节点 4 的透明度从 1 降至 0，并将节点 3、190、199、208 的缩放降至 0.6–0.8，因此离线时球体消失。
+
+修改版保留原有图形、渐变结构、羽化、裁剪和在线运动，改变以下部分：
+
+- 根据已选定的配色映射 RGB，并独立设置底色填充节点 189 的颜色、节点 186 的静止及活动透明度；原始 JSON 不改动，仍可完整还原银灰原版 `.riv`。
+- `asleep` / `wake` 的透明度与缩放关键帧保持 1，避免隐藏或缩小球体。
+- 在原有 20 段动画后追加 `offline_loop_1`、`offline_loop_2`、`offline_loop_3`，保持原有动画编号。
+- 离线循环复用原版三层水纹，时间轴速率从 60 改为 24，约为原速的 40%；这是时间轴播放速度，不是将屏幕渲染限制为 24fps。
+- 位移和呼吸振幅缩至原来的 25%；完整旋转保留首尾角度，避免循环接缝。
+- 离线循环增加六个柔光/光圈节点的透明度轨道，其中节点 190、199、208 的光圈透明度固定为零；在线循环对应增加原始透明度常量轨道，确保恢复连接后完整恢复。
+- 三个循环层根据既有 `asleep` 输入切换，使用 600ms 状态混合。其他输入、状态层和交互保持原定义。
+
+生成结果包含 957 个对象、23 段动画。调整设计参数后需再生成并运行对照测试；无需修改前端组件或安装额外依赖。
+
+## 前端接入与生命周期
+
+悬停沿用原版节点 110 的反射尺寸，以及节点 129 对指针目标 1 的跟随约束。`Persona` 保留 Rive 监听器，通过外层 Pointer Events 向画布转交鼠标的进入、移动和离开坐标，Rive 自行完成画布与画板坐标转换。画布内部不直接命中鼠标或触摸，只有就绪的外层接收并筛选主指针；不转交触摸和按压，因此手机点击不会触发白色高光。仅手动设置 `hover` 而禁用原生监听，会使目标停在中心，造成中央大片变白。这个问题由事件通路修复，不通过缩小光圈或改变材质补偿。
+
+`persona-resource.ts` 加载同源的 `/agent/obsidian-water-v1.riv?v=