fix reset; add some tests (#90)

e2e/home.test.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import { TEST_IDS } from "../src/lib/constants.js";
 
 const HF_TOKEN = "hf_aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
 const HF_TOKEN_STORAGE_KEY = "hf_token";
@@ -59,5 +60,52 @@ test.describe.serial("Token Handling and Subsequent Tests", () => {
 			await expect(userInputAfterReload).toBeVisible();
 			expect(await userInputAfterReload.inputValue()).toBe("Hello Hugging Face!");
 		});
+
+		test("checkpoints, resetting, and restoring", async ({ page }) => {
+			await page.goto("/");
+			const userMsg = "user message: hi";
+			const assistantMsg = "assistant message: hey";
+
+			// Fill user message
+			await page.getByRole("textbox", { name: "Enter user message" }).click();
+			await page.getByRole("textbox", { name: "Enter user message" }).fill(userMsg);
+			// Blur
+			await page.locator(".relative > div:nth-child(2) > div").first().click();
+
+			// Fill assistant message
+			await page.getByRole("button", { name: "Add message" }).click();
+			await page.getByRole("textbox", { name: "Enter assistant message" }).fill(assistantMsg);
+			// Blur
+			await page.locator(".relative > div:nth-child(2) > div").first().click();
+
+			// Create Checkpoint
+			await page.locator(`[data-test-id="${TEST_IDS.checkpoints_trigger}"]`).click();
+			await page.getByRole("button", { name: "Create new" }).click();
+
+			// Check that there are checkpoints
+			await expect(page.locator(`[data-test-id="${TEST_IDS.checkpoint}"] `)).toBeVisible();
+
+			// Get out of menu
+			await page.locator(`[data-test-id="${TEST_IDS.checkpoints_menu}"] `).press("Escape");
+			await page.locator(`[data-test-id="${TEST_IDS.checkpoints_menu}"] `).press("Escape");
+
+			// Reset
+			await page.locator(`[data-test-id="${TEST_IDS.reset}"]`).click();
+
+			// Check that messages are gone now
+			await expect(page.getByRole("textbox", { name: "Enter user message" })).toHaveValue("");
+
+			// Call in a checkpoint
+			await page.locator(`[data-test-id="${TEST_IDS.checkpoints_trigger}"]`).click();
+			await page.locator(`[data-test-id="${TEST_IDS.checkpoint}"] `).click();
+
+			// Get out of menu
+			await page.locator(`[data-test-id="${TEST_IDS.checkpoints_menu}"] `).press("Escape");
+			await page.locator(`[data-test-id="${TEST_IDS.checkpoints_menu}"] `).press("Escape");
+
+			// Check that the messages are back
+			await expect(page.getByRole("textbox", { name: "Enter user message" })).toHaveValue(userMsg);
+			await expect(page.getByRole("textbox", { name: "Enter assistant message" })).toHaveValue(assistantMsg);
+		});
 	});
 });

playwright.config.ts

@@ -2,8 +2,9 @@ import { defineConfig } from "@playwright/test";
 
 export default defineConfig({
 	webServer: {
-		command: "npm run build && npm run preview",
-		port: 4173,
+		command: process.env.CI ? "npm run build && npm run preview" : "",
+		port: process.env.CI ? 4173 : 5173,
+		reuseExistingServer: !process.env.CI,
 		timeout: 1000 * 60 * 10,
 	},
 	testDir: "e2e",

src/lib/components/inference-playground/checkpoints-menu.svelte

@@ -12,6 +12,7 @@
 	import IconStar from "~icons/carbon/star";
 	import IconStarFilled from "~icons/carbon/star-filled";
 	import IconDelete from "~icons/carbon/trash-can";
+	import { TEST_IDS } from "$lib/constants.js";
 
 	const popover = new Popover({
 		floatingConfig: {
@@ -27,7 +28,7 @@
 	const projCheckpoints = $derived(checkpoints.for(projects.activeId));
 </script>
 
-<button class="btn relative size-[32px] p-0" {...popover.trigger}>
+<button class="btn relative size-[32px] p-0" {...popover.trigger} data-test-id={TEST_IDS.checkpoints_trigger}>
 	<IconHistory />
 	{#if projCheckpoints.length > 0}
 		<div class="absolute -top-1 -right-1 size-2.5 rounded-full bg-amber-500" aria-label="Project has checkpoints"></div>
@@ -39,6 +40,7 @@
 	class="mb-2 !overflow-visible rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
 	{@attach clickOutside(() => (popover.open = false))}
 	{...popover.content}
+	data-test-id={TEST_IDS.checkpoints_menu}
 >
 	<div
 		class="size-4 translate-x-3 rounded-tl border-t border-l border-gray-200 dark:border-gray-700"
@@ -74,6 +76,7 @@
 					<div
 						class="mb-2 flex w-full items-center rounded-md px-3 hover:bg-gray-100 dark:hover:bg-gray-700"
 						{...tooltip.trigger}
+						data-test-id={TEST_IDS.checkpoint}
 					>
 						<button
 							class="flex flex-1 flex-col py-2 text-left text-sm transition-colors"

src/lib/components/inference-playground/message.svelte

@@ -15,6 +15,7 @@
 	import IconCustom from "../icon-custom.svelte";
 	import LocalToasts from "../local-toasts.svelte";
 	import ImgPreview from "./img-preview.svelte";
+	import { TEST_IDS } from "$lib/constants.js";
 
 	type Props = {
 		conversation: ConversationClass;
@@ -106,6 +107,7 @@
 				class="grow resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 				rows="1"
 				data-message
+				data-test-id={TEST_IDS.message}
 				{@attach autofocusAction(autofocus)}
 				{@attach autosized.attachment}
 			></textarea>

src/lib/components/inference-playground/playground.svelte

@@ -29,6 +29,7 @@
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
+	import { TEST_IDS } from "$lib/constants.js";
 
 	const multiple = $derived(conversations.active.length > 1);
 
@@ -153,7 +154,13 @@
 				{/if}
 				<Tooltip>
 					{#snippet trigger(tooltip)}
-						<button type="button" onclick={conversations.reset} class="btn size-[39px]" {...tooltip.trigger}>
+						<button
+							type="button"
+							onclick={conversations.reset}
+							class="btn size-[39px]"
+							{...tooltip.trigger}
+							data-test-id={TEST_IDS.reset}
+						>
 							<IconDelete />
 						</button>
 					{/snippet}

src/lib/components/inference-playground/structured-output-modal.svelte

@@ -99,11 +99,7 @@
 		});
 	}
 
-	let textarea = $state<HTMLTextAreaElement>();
-	new TextareaAutosize({
-		element: () => textarea,
-		input: () => tempSchema,
-	});
+	const autosized = new TextareaAutosize();
 </script>
 
 <Dialog class="!w-2xl max-w-[90vw]" title="Edit Structured Output" {open} onClose={() => (open = false)}>
@@ -262,7 +258,6 @@
 				{/await}
 			</div>
 			<textarea
-				bind:this={textarea}
 				autofocus
 				value={conversation.data.structuredOutput?.schema ?? ""}
 				{...onchange(v => {
@@ -270,6 +265,7 @@
 				})}
 				{...oninput(v => (tempSchema = v))}
 				class="relative z-10 h-120 w-full resize-none overflow-hidden rounded-lg bg-transparent whitespace-pre-wrap text-transparent caret-black outline-none @2xl:px-3 dark:caret-white"
+				{@attach autosized.attachment}
 			></textarea>
 		</div>
 	{/if}

src/lib/constants.ts

@@ -0,0 +1,9 @@
+export enum TEST_IDS {
+	checkpoints_trigger,
+	checkpoints_menu,
+	checkpoint,
+
+	reset,
+
+	message,
+}

src/lib/state/checkpoints.svelte.ts

@@ -63,6 +63,11 @@ class Checkpoints {
 			})
 		);
 
+		// Hack because dates are formatted to string by save
+		newCheckpoint.conversations.forEach((c, i) => {
+			newCheckpoint.conversations[i] = { ...c, createdAt: new Date(c.createdAt) };
+		});
+
 		const prev: Checkpoint[] = this.#checkpoints[projectId] ?? [];
 		this.#checkpoints[projectId] = [...prev, newCheckpoint];
 	}
@@ -85,8 +90,8 @@ class Checkpoints {
 		// conversations.deleteAllFrom(cloned.projectId);
 		const prev = conversations.for(modified.projectId);
 		modified.conversations.forEach((c, i) => {
-			const p = prev[i];
-			if (p) return p.update(c);
+			const prevC = prev[i];
+			if (prevC) return prevC.update({ ...c });
 			conversations.create({
 				...c,
 				projectId: modified.projectId,

src/lib/state/conversations.svelte.ts

@@ -110,7 +110,7 @@ export class ConversationClass {
 		return this.isStructuredOutputAllowed && this.data.structuredOutput?.enabled;
 	}
 
-	async update(data: Partial<ConversationEntityMembers>) {
+	update = async (data: Partial<ConversationEntityMembers>) => {
 		if (this.data.id === -1) return;
 		// if (this.data.id === undefined) return;
 		const cloned = snapshot({ ...this.data, ...data });
@@ -122,16 +122,16 @@ export class ConversationClass {
 			await conversationsRepo.update(this.data.id, cloned);
 			this.#data = cloned;
 		}
-	}
+	};
 
-	async addMessage(message: ConversationMessage) {
+	addMessage = async (message: ConversationMessage) => {
 		this.update({
 			...this.data,
 			messages: [...this.data.messages, snapshot(message)],
 		});
-	}
+	};
 
-	async updateMessage(args: { index: number; message: Partial<ConversationMessage> }) {
+	updateMessage = async (args: { index: number; message: Partial<ConversationMessage> }) => {
 		const prev = await poll(() => this.data.messages[args.index], { interval: 10, maxAttempts: 200 });
 
 		if (!prev) return;
@@ -144,9 +144,9 @@ export class ConversationClass {
 				...this.data.messages.slice(args.index + 1),
 			],
 		});
-	}
+	};
 
-	async deleteMessage(idx: number) {
+	deleteMessage = async (idx: number) => {
 		const imgKeys = this.data.messages.flatMap(m => m.images).filter(isString);
 		await Promise.all([
 			...imgKeys.map(k => images.delete(k)),
@@ -155,9 +155,9 @@ export class ConversationClass {
 				messages: this.data.messages.slice(0, idx),
 			}),
 		]);
-	}
+	};
 
-	async deleteMessages(from: number) {
+	deleteMessages = async (from: number) => {
 		const sliced = this.data.messages.slice(0, from);
 		const notSliced = this.data.messages.slice(from);
 
@@ -169,9 +169,9 @@ export class ConversationClass {
 				messages: sliced,
 			}),
 		]);
-	}
+	};
 
-	async genNextMessage() {
+	genNextMessage = async () => {
 		this.generating = true;
 		const startTime = performance.now();
 
@@ -223,7 +223,7 @@ export class ConversationClass {
 		const endTime = performance.now();
 		this.generationStats.latency = Math.round(endTime - startTime);
 		this.generating = false;
-	}
+	};
 
 	stopGenerating = () => {
 		this.abortManager.abortAll();
@@ -236,7 +236,7 @@ class Conversations {
 	generationStats = $derived(this.active.map(c => c.generationStats));
 	loaded = $state(false);
 
-	#active = $derived(this.for(projects.activeId));
+	#active = $derived.by(() => this.for(projects.activeId));
 
 	init = createInit(() => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -271,7 +271,9 @@ class Conversations {
 		return this.#active;
 	}
 
-	async create(args: { projectId: ProjectEntity["id"]; modelId?: Model["id"] } & Partial<ConversationEntityMembers>) {
+	create = async (
+		args: { projectId: ProjectEntity["id"]; modelId?: Model["id"] } & Partial<ConversationEntityMembers>
+	) => {
 		const conv = snapshot({
 			...getDefaultConversation(args.projectId),
 			...args,
@@ -286,9 +288,9 @@ class Conversations {
 		};
 
 		return id;
-	}
+	};
 
-	for(projectId: ProjectEntity["id"]): ConversationClass[] {
+	for = (projectId: ProjectEntity["id"]): ConversationClass[] => {
 		// Async load from db
 		if (!this.#conversations[projectId]?.length) {
 			conversationsRepo.find({ where: { projectId } }).then(c => {
@@ -310,27 +312,27 @@ class Conversations {
 		return res.slice(0, 2).toSorted((a, b) => {
 			return a.data.createdAt.getTime() - b.data.createdAt.getTime();
 		});
-	}
+	};
 
-	async delete({ id, projectId }: ConversationEntityMembers) {
+	delete = async ({ id, projectId }: ConversationEntityMembers) => {
 		if (!id) return;
 
 		await conversationsRepo.delete(id);
 
 		const prev = this.#conversations[projectId] ?? [];
 		this.#conversations = { ...this.#conversations, [projectId]: prev.filter(c => c.data.id != id) };
-	}
+	};
 
-	async deleteAllFrom(projectId: string) {
+	deleteAllFrom = async (projectId: string) => {
 		this.for(projectId).forEach(c => this.delete(c.data));
-	}
+	};
 
-	async reset() {
-		this.active.forEach(c => this.delete(c.data));
+	reset = async () => {
+		await Promise.allSettled(this.active.map(c => this.delete(c.data)));
 		this.create(getDefaultConversation(projects.activeId));
-	}
+	};
 
-	async migrate(from: ProjectEntity["id"], to: ProjectEntity["id"]) {
+	migrate = async (from: ProjectEntity["id"], to: ProjectEntity["id"]) => {
 		const fromArr = this.#conversations[from] ?? [];
 		await Promise.allSettled(fromArr.map(c => c.update({ projectId: to })));
 		this.#conversations = {
@@ -338,18 +340,18 @@ class Conversations {
 			[to]: [...fromArr],
 			[from]: [],
 		};
-	}
+	};
 
-	async duplicate(from: ProjectEntity["id"], to: ProjectEntity["id"]) {
+	duplicate = async (from: ProjectEntity["id"], to: ProjectEntity["id"]) => {
 		const fromArr = this.#conversations[from] ?? [];
 		await Promise.allSettled(
 			fromArr.map(async c => {
 				conversations.create({ ...c.data, projectId: to });
 			})
 		);
-	}
+	};
 
-	async genNextMessages(conv: "left" | "right" | "both" | ConversationClass = "both") {
+	genNextMessages = async (conv: "left" | "right" | "both" | ConversationClass = "both") => {
 		if (!token.value) {
 			token.showModal = true;
 			return;
@@ -402,7 +404,7 @@ class Conversations {
 				addToast({ title: "Error", description: "An unknown error occurred", variant: "error" });
 			}
 		}
-	}
+	};
 
 	stopGenerating = () => {
 		this.active.forEach(c => c.abortManager.abortAll());