- 事件流按会话缓存最近 30 条会话的已读事件,切回时直接用缓存渲染,再从最后一个 seq 之后补读 - 消息区跟随:一次多出一屏以上直接跳到底,流式小段增长才平滑跟随 (原来只有第一次 ResizeObserver 回调算首屏,事件补读回来时整段平滑滚动) Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
153 lines
6.9 KiB
TypeScript
153 lines
6.9 KiB
TypeScript
import type { AgentRunEvent } from "@umt/contracts";
|
|
import { createElement } from "react";
|
|
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it } from "vitest";
|
|
import { runGroup } from "~/api/agent.ts";
|
|
import { followBehavior } from "~/components/agentui/message-scroller.tsx";
|
|
import {
|
|
agentListHref,
|
|
agentRunHref,
|
|
DRAFT_DRAWER_GOAL,
|
|
DRAFT_PAGE_GOAL,
|
|
groupFromSearch,
|
|
readDraft,
|
|
resolveGroup,
|
|
revealScrollTop,
|
|
runDraftKey,
|
|
writeDraft,
|
|
} from "./agent-nav.ts";
|
|
import { CompactPager } from "./agent-session-list.tsx";
|
|
import { isAgentPage, outletKey } from "./agent-store.ts";
|
|
import { cachedRunEvents, cacheRunEvents } from "./use-agent-stream.ts";
|
|
|
|
// 智能体页面切换的状态逻辑:整页重挂载 key、分栏与 URL、草稿、滚动策略、快捷键在智能体页面的行为。
|
|
|
|
describe("主内容区重挂载 key", () => {
|
|
it("列表页与各会话页共用一个 key,切换会话不重挂载", () => {
|
|
expect(outletKey("/console/agent")).toBe("/console/agent");
|
|
expect(outletKey("/console/agent/0b1c")).toBe("/console/agent");
|
|
expect(outletKey("/console/agent/9f2e")).toBe(outletKey("/console/agent/0b1c"));
|
|
});
|
|
it("其它页面仍按路径重挂载", () => {
|
|
expect(outletKey("/console/library")).toBe("/console/library");
|
|
expect(outletKey("/console/agents-x")).toBe("/console/agents-x");
|
|
expect(isAgentPage("/console/agentx")).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe("分栏:对话 / 自动巡检", () => {
|
|
it("会话所在分栏:巡检 / 事件在自动巡检,子会话随父会话,父会话未知归对话", () => {
|
|
expect(runGroup({ trigger: "schedule" })).toBe("auto");
|
|
expect(runGroup({ trigger: "event" })).toBe("auto");
|
|
expect(runGroup({ trigger: "user" })).toBe("conversation");
|
|
expect(runGroup({ trigger: "subagent" }, { trigger: "schedule" })).toBe("auto");
|
|
expect(runGroup({ trigger: "subagent" }, { trigger: "user" })).toBe("conversation");
|
|
expect(runGroup({ trigger: "subagent" })).toBe("conversation");
|
|
});
|
|
it("URL 的 tab 只认两个取值", () => {
|
|
expect(groupFromSearch("?tab=auto&mock=1")).toBe("auto");
|
|
expect(groupFromSearch("?tab=conversation")).toBe("conversation");
|
|
expect(groupFromSearch("?tab=xx")).toBeNull();
|
|
expect(groupFromSearch("")).toBeNull();
|
|
});
|
|
it("取值顺序:URL > 当前会话 > 上次 > 对话", () => {
|
|
expect(resolveGroup({ fromUrl: "conversation", activeRun: "auto", remembered: "auto" })).toBe("conversation");
|
|
expect(resolveGroup({ fromUrl: null, activeRun: "auto", remembered: "conversation" })).toBe("auto");
|
|
// 打开巡检会话、快照还没到:沿用点它时所在的分栏,不先闪到「对话」
|
|
expect(resolveGroup({ fromUrl: null, activeRun: null, remembered: "auto" })).toBe("auto");
|
|
expect(resolveGroup({ fromUrl: null })).toBe("conversation");
|
|
});
|
|
it("链接:会话页不带 tab(由会话决定),列表页只在自动巡检时带,保留演示开关", () => {
|
|
expect(agentRunHref("r1")).toBe("/console/agent/r1");
|
|
expect(agentRunHref("r1", true)).toBe("/console/agent/r1?mock=1");
|
|
expect(agentListHref()).toBe("/console/agent");
|
|
expect(agentListHref("auto")).toBe("/console/agent?tab=auto");
|
|
expect(agentListHref("auto", true)).toBe("/console/agent?tab=auto&mock=1");
|
|
expect(agentListHref("conversation", true)).toBe("/console/agent?mock=1");
|
|
});
|
|
});
|
|
|
|
describe("当前会话滚进可见区", () => {
|
|
const vp = { scrollTop: 200, height: 300 };
|
|
it("已经完整可见不滚", () => {
|
|
expect(revealScrollTop({ top: 250, height: 40 }, vp)).toBeNull();
|
|
});
|
|
it("在上方:滚到顶边对齐;在下方:滚到底边刚好露出", () => {
|
|
expect(revealScrollTop({ top: 120, height: 40 }, vp)).toBe(120);
|
|
expect(revealScrollTop({ top: 600, height: 40 }, vp)).toBe(340);
|
|
});
|
|
});
|
|
|
|
describe("会话列表分页(窄列表一行)", () => {
|
|
const pager = (p: Partial<Parameters<typeof CompactPager>[0]>) =>
|
|
renderToStaticMarkup(
|
|
createElement(CompactPager, { page: 1, pageSize: 20, total: 0, onPageChange: () => {}, ...p }),
|
|
);
|
|
it("只有一页不显示", () => {
|
|
expect(pager({ total: 12 })).toBe("");
|
|
});
|
|
it("多页:总数 + 当前页 / 页数,没有每页条数选择", () => {
|
|
const html = pager({ total: 48, page: 2 });
|
|
expect(html).toContain("共 48 条");
|
|
expect(html).toContain("2 / 3");
|
|
expect(html).not.toContain("每页");
|
|
});
|
|
it("还能往后加载时标出已加载条数和「+」", () => {
|
|
const html = pager({ total: 20, hasMore: true });
|
|
expect(html).toContain("已加载 20 条");
|
|
expect(html).toContain("1 / 1+");
|
|
});
|
|
});
|
|
|
|
describe("输入草稿", () => {
|
|
it("按会话分开记,切走再回来还在,不串到别的会话", () => {
|
|
writeDraft(runDraftKey("a"), "A 的草稿");
|
|
writeDraft(runDraftKey("b"), "B 的草稿");
|
|
expect(readDraft(runDraftKey("a"))).toBe("A 的草稿");
|
|
expect(readDraft(runDraftKey("b"))).toBe("B 的草稿");
|
|
expect(readDraft(runDraftKey("c"))).toBe("");
|
|
});
|
|
it("清空(发送成功)后不再恢复;只有空白也算清空", () => {
|
|
writeDraft(runDraftKey("a"), "");
|
|
writeDraft(runDraftKey("b"), " ");
|
|
expect(readDraft(runDraftKey("a"))).toBe("");
|
|
expect(readDraft(runDraftKey("b"))).toBe("");
|
|
});
|
|
it("列表页与抽屉的新对话输入框各记各的;没有键时不记", () => {
|
|
writeDraft(DRAFT_PAGE_GOAL, "页面里写了一半");
|
|
writeDraft(DRAFT_DRAWER_GOAL, "抽屉里写了一半");
|
|
writeDraft(undefined, "不记");
|
|
expect(readDraft(DRAFT_PAGE_GOAL)).toBe("页面里写了一半");
|
|
expect(readDraft(DRAFT_DRAWER_GOAL)).toBe("抽屉里写了一半");
|
|
expect(readDraft(undefined)).toBe("");
|
|
});
|
|
});
|
|
|
|
describe("消息区滚动策略", () => {
|
|
it("流式的小段增长平滑跟随", () => {
|
|
expect(followBehavior({ gap: 48, viewport: 600, reduce: false })).toBe("smooth");
|
|
});
|
|
it("一次多出一屏以上(打开 / 切回会话铺开历史)直接跳到底", () => {
|
|
expect(followBehavior({ gap: 1400, viewport: 600, reduce: false })).toBe("auto");
|
|
});
|
|
it("减少动态效果时一律直接跳", () => {
|
|
expect(followBehavior({ gap: 48, viewport: 600, reduce: true })).toBe("auto");
|
|
});
|
|
});
|
|
|
|
describe("切回看过的会话:事件缓存", () => {
|
|
const ev = (seq: number) => ({ seq, at: "2026-10-06T00:00:00Z", type: "text_delta", delta: "x" }) as AgentRunEvent;
|
|
it("记住最近读到的事件,切回时直接可用", () => {
|
|
cacheRunEvents("live:a", [ev(0), ev(1)]);
|
|
expect(cachedRunEvents("live:a").map((e) => e.seq)).toEqual([0, 1]);
|
|
expect(cachedRunEvents("mock:a")).toEqual([]);
|
|
});
|
|
it("空列表不覆盖已有缓存;超过 30 条会话丢掉最早看的", () => {
|
|
cacheRunEvents("live:a", []);
|
|
expect(cachedRunEvents("live:a")).toHaveLength(2);
|
|
for (let i = 0; i < 30; i++) cacheRunEvents(`live:n${i}`, [ev(i)]);
|
|
expect(cachedRunEvents("live:a")).toEqual([]);
|
|
expect(cachedRunEvents("live:n29")).toHaveLength(1);
|
|
});
|
|
});
|