@btst/stack 4.2.0 → 4.4.0

package/src/plugins/ai-chat/__tests__/classnames-overrides.test.tsx

@@ -219,13 +219,33 @@ describe("ai-chat classNames overrides (issue #36)", () => {
 		expect(list.className).toContain("flex-col");
 	});
 
-	it("applies classNames.container to the widget root", async () => {
-		await render(<ChatLayout layout="widget" />);
+	it("preserves container customizations when the widget expands", async () => {
+		await render(
+			<ChatLayout
+				layout="widget"
+				defaultOpen
+				expandable
+				className="chat-theme right-10 bottom-20 z-40"
+				style={{ fontFamily: "monospace", right: 24, zIndex: 40 }}
+			/>,
+		);
 
 		const trigger = query('[data-testid="widget-trigger"]');
 		const widgetRoot = trigger.parentElement!;
 		expect(widgetRoot.className).toContain(CLASS_NAMES.container);
 		expect(widgetRoot.className).toContain("items-end");
+		await act(async () => query('[aria-label="Expand chat"]').click());
+		const expanded = document.querySelector<HTMLElement>(
+			'[data-slot="dialog-content"]',
+		)!;
+		expect(expanded.className).toContain("chat-theme");
+		expect(expanded.className).toContain(CLASS_NAMES.container);
+		expect(expanded.className).not.toContain("right-10");
+		expect(expanded.className).not.toContain("bottom-20");
+		expect(expanded.className).not.toContain("z-40");
+		expect(expanded.style.fontFamily).toBe("monospace");
+		expect(expanded.style.right).toBe("0px");
+		expect(expanded.style.zIndex).toBe("50");
 	});
 
 	it("leaves base classes untouched when no classNames override is supplied", async () => {

package/src/plugins/ai-chat/__tests__/compaction.test.ts

@@ -0,0 +1,272 @@
+import { describe, expect, it, vi } from "vitest";
+import { createMemoryAdapter } from "@btst/adapter-memory";
+import { MockLanguageModelV2 } from "ai/test";
+import { simulateReadableStream, type ModelMessage, type UIMessage } from "ai";
+import { createBackendStack } from "../../../api";
+import { aiChatBackendPlugin } from "../api";
+import {
+	compactConversation,
+	createStepCompactor,
+	createSummarizer,
+	estimateContextTokens,
+} from "../api/compaction";
+import {
+	captureContextCheckpoint,
+	contextRequest,
+} from "../client/context-checkpoint";
+
+const message = (
+	id: string,
+	role: "user" | "assistant",
+	text: string,
+): UIMessage => ({ id, role, parts: [{ type: "text", text }] });
+const history = [
+	message("u1", "user", "Remember my goal. " + "research ".repeat(2000)),
+	message("a1", "assistant", "https://example.org/source; evidence uncertain"),
+	message("u2", "user", "Compare the alternatives"),
+	message("a2", "assistant", "A comparison"),
+	message("u3", "user", "What was the uncertainty?"),
+];
+
+describe("public context compaction", () => {
+	it("uses size rather than message count and leaves the transcript untouched", async () => {
+		const summarize = vi
+			.fn()
+			.mockResolvedValue("Goal, sources, and uncertainty");
+		const original = structuredClone(history);
+		const result = await compactConversation({
+			messages: history,
+			budget: 3200,
+			overhead: "rules",
+			summarize,
+		});
+		expect(result.throughMessageId).toBe("a1");
+		expect(result.messages.map((m) => m.id)).toEqual(["u2", "a2", "u3"]);
+		expect(summarize.mock.calls[0]?.[0].messages).toEqual(history.slice(0, 2));
+		expect(history).toEqual(original);
+		const short = Array.from({ length: 100 }, (_, i) =>
+			message(String(i), i % 2 ? "assistant" : "user", "Hi"),
+		);
+		await compactConversation({
+			messages: short,
+			budget: 10000,
+			overhead: "",
+			summarize,
+		});
+		expect(summarize).toHaveBeenCalledOnce();
+	});
+
+	it("reuses a checkpoint only while all summarized messages are unchanged", () => {
+		const checkpoint = captureContextCheckpoint(history, "summary", "a1");
+		expect(contextRequest(history, checkpoint)).toEqual({
+			messages: history.slice(2),
+			contextSummary: "summary",
+		});
+		const edited = [
+			message("u1", "user", "Different goal"),
+			...history.slice(1),
+		];
+		expect(contextRequest(edited, checkpoint)).toEqual({ messages: edited });
+		expect(contextRequest(history.slice(0, 1), checkpoint)).toEqual({
+			messages: history.slice(0, 1),
+		});
+		expect(contextRequest([], checkpoint)).toEqual({ messages: [] });
+	});
+
+	it("retains tool pairs, recent questions, and system instructions between steps", async () => {
+		const messages: ModelMessage[] = [
+			{ role: "system", content: "Keep original instructions" },
+			{ role: "user", content: "Read this profile" },
+			{
+				role: "assistant",
+				content: [
+					{
+						type: "tool-call",
+						toolName: "readPage",
+						toolCallId: "read-1",
+						input: { path: "/one" },
+					},
+				],
+			},
+			{
+				role: "tool",
+				content: [
+					{
+						type: "tool-result",
+						toolName: "readPage",
+						toolCallId: "read-1",
+						output: { type: "text", value: "evidence ".repeat(10000) },
+					},
+				],
+			},
+		];
+		const summarize = vi
+			.fn()
+			.mockResolvedValue(
+				"Source /one; preclinical evidence; uncertainty remains.",
+			);
+		const status = vi.fn();
+		const prepare = createStepCompactor({
+			budget: 3000,
+			overhead: "",
+			summarize,
+			onCompacting: status,
+		});
+		const result = await prepare({ messages });
+		expect(result.messages[0]).toEqual(messages[0]);
+		expect(result.messages[1]).toEqual(messages[1]);
+		expect(result.messages[2]).toEqual(messages[2]);
+		expect(JSON.stringify(result.messages[3])).toContain(
+			'"toolCallId":"read-1"',
+		);
+		expect(JSON.stringify(result.messages[3])).toContain(
+			"preclinical evidence",
+		);
+		expect(estimateContextTokens(result.messages)).toBeLessThan(3000);
+		await prepare({
+			messages: [...messages, { role: "assistant", content: "Answer" }],
+		});
+		expect(summarize).toHaveBeenCalledOnce();
+		expect(status.mock.calls).toEqual([[true], [false]]);
+	});
+
+	it("does not discard context when summarization fails", async () => {
+		const original = structuredClone(history);
+		await expect(
+			compactConversation({
+				messages: history,
+				budget: 3000,
+				overhead: "",
+				summarize: async () => {
+					throw new Error("provider unavailable");
+				},
+			}),
+		).rejects.toThrow("provider unavailable");
+		expect(history).toEqual(original);
+	});
+
+	it("chunks oversized Unicode histories and includes earlier summaries", async () => {
+		const model = new MockLanguageModelV2({
+			doGenerate: async () => ({
+				content: [{ type: "text", text: "Retained facts" }],
+				finishReason: "stop",
+				usage: { inputTokens: 100, outputTokens: 10, totalTokens: 110 },
+				warnings: [],
+			}),
+		});
+		await createSummarizer(model, 4096)({ text: "研究".repeat(4000) });
+		expect(model.doGenerateCalls.length).toBeGreaterThan(1);
+		for (const call of model.doGenerateCalls)
+			expect(estimateContextTokens(call.prompt)).toBeLessThan(4096);
+		expect(JSON.stringify(model.doGenerateCalls[1]?.prompt)).toContain(
+			"Retained facts",
+		);
+	});
+
+	it("streams status/checkpoints and continues with a compact model prompt", async () => {
+		const model = new MockLanguageModelV2({
+			doGenerate: async () => ({
+				content: [
+					{
+						type: "text",
+						text: "Earlier goal and uncertain evidence: https://example.org/source",
+					},
+				],
+				finishReason: "stop",
+				usage: { inputTokens: 100, outputTokens: 20, totalTokens: 120 },
+				warnings: [],
+			}),
+			doStream: async () => ({
+				stream: simulateReadableStream({
+					chunks: [
+						{ type: "text-start" as const, id: "t" },
+						{
+							type: "text-delta" as const,
+							id: "t",
+							delta: "Continuing the conversation.",
+						},
+						{ type: "text-end" as const, id: "t" },
+						{
+							type: "finish" as const,
+							finishReason: "stop" as const,
+							usage: { inputTokens: 100, outputTokens: 20, totalTokens: 120 },
+						},
+					],
+					initialDelayInMs: null,
+					chunkDelayInMs: null,
+				}),
+			}),
+		});
+		const before = vi.fn();
+		const app = createBackendStack({
+			basePath: "/api",
+			plugins: {
+				aiChat: aiChatBackendPlugin({
+					model,
+					access: "public",
+					systemPrompt: "Original rules",
+					compaction: { contextWindowTokens: 4096 },
+					hooks: { onBeforeChat: before },
+				}),
+			},
+			adapter: (db) => createMemoryAdapter(db)({}),
+		});
+		const send = (body: unknown) =>
+			app.handler(
+				new Request("http://localhost/api/chat", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify(body),
+				}),
+			);
+		const attachment = await send({
+			messages: [
+				{
+					id: "file",
+					role: "user",
+					parts: [
+						{
+							type: "file",
+							mediaType: "image/png",
+							url: "https://example.org/image.png",
+						},
+					],
+				},
+			],
+		});
+		expect(attachment.status).toBe(400);
+		expect(await attachment.text()).toContain("text-only");
+		expect(model.doGenerateCalls).toHaveLength(0);
+		expect(model.doStreamCalls).toHaveLength(0);
+		const response = await send({ messages: history });
+		expect(response.status).toBe(200);
+		const text = await response.text();
+		expect(text).toContain('"data-context-status"');
+		expect(text).toContain('"throughMessageId":"a1"');
+		expect(text).toContain("Continuing the conversation.");
+		expect(before).toHaveBeenCalledOnce();
+		expect(JSON.stringify(model.doStreamCalls[0]?.prompt)).toContain(
+			"Original rules",
+		);
+		expect(JSON.stringify(model.doStreamCalls[0]?.prompt)).not.toContain(
+			"research ".repeat(100),
+		);
+		const checkpointLine = text
+			.split("\n")
+			.find((line) => line.includes('"data-context-checkpoint"'))!;
+		const checkpoint = JSON.parse(checkpointLine.slice(6)).data;
+		const next = await send({
+			messages: history.slice(2),
+			contextSummary: checkpoint.summary,
+		});
+		await next.text();
+		expect(JSON.stringify(model.doStreamCalls.at(-1)?.prompt)).toContain(
+			"Earlier goal",
+		);
+		const oversized = await send({
+			messages: [message("large", "user", "research ".repeat(4000))],
+		});
+		expect(await oversized.text()).toContain("Shorten it and retry");
+		expect(model.doStreamCalls).toHaveLength(2);
+	});
+});

package/src/plugins/ai-chat/__tests__/page-widget.test.tsx

@@ -124,7 +124,7 @@ async function render(props: ChatLayoutProps, strict = false) {
 	);
 }
 async function click(label: string) {
-	const button = container.querySelector<HTMLButtonElement>(
+	const button = document.querySelector<HTMLButtonElement>(
 		`button[aria-label="${label}"]`,
 	);
 	expect(button).not.toBeNull();
@@ -139,6 +139,29 @@ const page = {
 };
 
 describe("page widget", () => {
+	it("shows a custom launcher icon while closed and keeps the close control", async () => {
+		await render({
+			layout: "widget",
+			triggerIcon: (
+				<span data-testid="custom-trigger-icon" aria-hidden="true" />
+			),
+		});
+		const trigger = () =>
+			container.querySelector('[data-testid="widget-trigger"]');
+		expect(
+			trigger()?.querySelector('[data-testid="custom-trigger-icon"]'),
+		).not.toBeNull();
+		await click("Open chat");
+		expect(trigger()?.getAttribute("aria-label")).toBe("Close chat");
+		expect(
+			trigger()?.querySelector('[data-testid="custom-trigger-icon"]'),
+		).toBeNull();
+		expect(trigger()?.querySelector("svg")).not.toBeNull();
+		await click("Close chat");
+		expect(
+			trigger()?.querySelector('[data-testid="custom-trigger-icon"]'),
+		).not.toBeNull();
+	});
 	it.each([false, true])(
 		"checks readPage authorization for send, edit and retry when enabled: %s",
 		async (pageContent) => {
@@ -374,6 +397,85 @@ describe("page widget", () => {
 		expect(panel.style.height).toBe("400px");
 		expect(trigger.parentElement?.className).not.toContain("fixed");
 	});
+	it("makes expansion opt-in and preserves the chat when expanding, collapsing and closing", async () => {
+		const props = {
+			layout: "widget" as const,
+			defaultOpen: true,
+			widgetWidth: 320,
+			widgetHeight: 400,
+			initialMessages: [
+				{
+					id: "one",
+					role: "user" as const,
+					parts: [{ type: "text" as const, text: "Keep this question" }],
+				},
+			],
+		};
+		await render(props);
+		expect(container.querySelector('[aria-label="Expand chat"]')).toBeNull();
+		await render({ ...props, expandable: true });
+		const panel = container.querySelector<HTMLElement>('[role="dialog"]')!;
+		const input = container.querySelector("textarea")!;
+		const id = options().id;
+		await click("Expand chat");
+		const dialog = document.querySelector('[data-slot="dialog-content"]')!;
+		expect(dialog.querySelector("textarea")).toBe(input);
+		expect(dialog.getAttribute("role")).toBe("dialog");
+		expect(document.body.hasAttribute("data-scroll-locked")).toBe(true);
+		await click("Collapse chat");
+		expect(panel.style.width).toBe("320px");
+		expect(panel.style.height).toBe("400px");
+		expect(panel.querySelector("textarea")).toBe(input);
+		expect(document.body.hasAttribute("data-scroll-locked")).toBe(false);
+		await click("Expand chat");
+		await act(async () => {
+			document.dispatchEvent(
+				new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+			);
+		});
+		expect(panel.querySelector("textarea")).toBe(input);
+		await click("Expand chat");
+		await click("Close chat");
+		expect(panel.classList.contains("hidden")).toBe(true);
+		expect(document.body.hasAttribute("data-scroll-locked")).toBe(false);
+		await click("Open chat");
+		expect(panel.querySelector("textarea")).toBe(input);
+		expect(container.textContent).toContain("Keep this question");
+		expect(options().id).toBe(id);
+		expect(mocks.stop).not.toHaveBeenCalled();
+	});
+	it("restores scrolling when expansion is disabled, the page changes, or the widget unmounts", async () => {
+		const props = {
+			layout: "widget" as const,
+			defaultOpen: true,
+			expandable: true,
+			showTrigger: false,
+			pageKey: "one",
+		};
+		await render(props, true);
+		const input = container.querySelector("textarea");
+		await click("Expand chat");
+		await render({ ...props, expandable: false }, true);
+		expect(document.body.hasAttribute("data-scroll-locked")).toBe(false);
+		await vi.waitFor(() =>
+			expect(document.activeElement).toBe(
+				container.querySelector('[role="dialog"]'),
+			),
+		);
+		await render(props, true);
+		expect(document.body.hasAttribute("data-scroll-locked")).toBe(false);
+		expect(container.querySelector("textarea")).toBe(input);
+		expect(
+			container.querySelector('[aria-label="Expand chat"]'),
+		).not.toBeNull();
+		await click("Expand chat");
+		await render({ ...props, pageKey: "two" }, true);
+		expect(document.body.hasAttribute("data-scroll-locked")).toBe(false);
+		await click("Expand chat");
+		await act(async () => root.render(null));
+		expect(document.body.hasAttribute("data-scroll-locked")).toBe(false);
+	});
+
 	it("emits content-free lifecycle analytics once under StrictMode", async () => {
 		vi.useFakeTimers();
 		await render(