branching wip (#98)

Author: TGlide

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

@@ -22,6 +22,9 @@
 	import { parseThinkingTokens } from "$lib/utils/thinking.js";
 	import IconChevronDown from "~icons/carbon/chevron-down";
 	import IconChevronRight from "~icons/carbon/chevron-right";
+	import ArrowSplitRounded from "~icons/material-symbols/arrow-split-rounded";
+	import { addToast } from "$lib/components/toaster.svelte.js";
+	import { projects } from "$lib/state/projects.svelte";
 
 	type Props = {
 		conversation: ConversationClass;
@@ -341,6 +344,34 @@
 					</div>
 				</Tooltip>
 
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<button
+							tabindex="0"
+							onclick={async () => {
+								try {
+									await projects.branch(projects.activeId, index);
+								} catch (error) {
+									addToast({
+										title: "Error",
+										description: error instanceof Error ? error.message : "Failed to create branch",
+										variant: "error",
+									});
+								}
+							}}
+							type="button"
+							class="grid size-7 place-items-center border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100
+					hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100
+					focus:outline-hidden dark:border-gray-600 dark:bg-gray-800
+					dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+							{...tooltip.trigger}
+						>
+							<ArrowSplitRounded />
+						</button>
+					{/snippet}
+					Branch from here
+				</Tooltip>
+
 				<Tooltip>
 					{#snippet trigger(tooltip)}
 						<button
@@ -399,3 +430,23 @@
 		{/each}
 	</div>
 </div>
+
+{#if projects.current?.branchedFromId && projects.current?.branchedFromMessageIndex === index}
+	<div class="mt-4 flex items-center justify-center">
+		<div
+			class="flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1.5 text-sm text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+		>
+			<ArrowSplitRounded class="mr-1 size-4" />
+			<span>Branched from</span>
+			<button
+				onclick={() => {
+					if (!projects.current?.branchedFromId) return;
+					projects.activeId = projects.current.branchedFromId;
+				}}
+				class="font-medium text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+			>
+				{projects.getBranchedFromProject(projects.current.id)?.name || "original project"}
+			</button>
+		</div>
+	</div>
+{/if}

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

@@ -10,6 +10,7 @@
 	import IconHistory from "~icons/carbon/recently-viewed";
 	import IconSave from "~icons/carbon/save";
 	import IconDelete from "~icons/carbon/trash-can";
+	import ArrowSplitRounded from "~icons/material-symbols/arrow-split-rounded";
 	import Dialog from "../dialog.svelte";
 	import { prompt } from "../prompts.svelte";
 	import Tooltip from "../tooltip.svelte";
@@ -114,7 +115,21 @@
 			>
 				<div class="flex items-center gap-2">
 					{name}
-					{#if hasCheckpoints}
+					{#if projects.all.find(p => p.id === id)?.branchedFromId}
+						{@const originalProject = projects.getBranchedFromProject(id)}
+						<Tooltip>
+							{#snippet trigger(tooltip)}
+								<div
+									class="text-3xs grid aspect-square place-items-center rounded bg-blue-300 p-0.5 text-blue-700 dark:bg-blue-400/25 dark:text-blue-400"
+									aria-label="Branched project"
+									{...tooltip.trigger}
+								>
+									<ArrowSplitRounded />
+								</div>
+							{/snippet}
+							Branched from {originalProject?.name || "unknown project"}
+						</Tooltip>
+					{:else if hasCheckpoints}
 						<div
 							class="text-3xs grid aspect-square place-items-center rounded bg-yellow-300 p-0.5 text-yellow-700 dark:bg-yellow-400/25 dark:text-yellow-400"
 							aria-label="Project has checkpoints"

src/lib/state/conversations.svelte.ts

@@ -157,9 +157,24 @@ export class ConversationClass {
 		});
 	};
 
+	checkAndClearBranchStatus = async (deletionIndex: number) => {
+		const currentProject = projects.current;
+
+		if (!currentProject?.branchedFromId || typeof currentProject?.branchedFromMessageIndex !== "number") return;
+
+		// If we're deleting messages at or before the branch point, clear branch status
+		if (deletionIndex <= currentProject.branchedFromMessageIndex) {
+			await projects.clearBranchStatus(currentProject.id);
+		}
+	};
+
 	deleteMessage = async (idx: number) => {
 		if (!this.data.messages) return;
 		const imgKeys = this.data.messages.flatMap(m => m.images).filter(isString);
+
+		// Check if we need to clear branch status
+		await this.checkAndClearBranchStatus(idx);
+
 		await Promise.all([
 			...imgKeys.map(k => images.delete(k)),
 			this.update({
@@ -174,6 +189,9 @@ export class ConversationClass {
 		const sliced = this.data.messages.slice(0, from);
 		const notSliced = this.data.messages.slice(from);
 
+		// Check if we need to clear branch status
+		await this.checkAndClearBranchStatus(from);
+
 		const imgKeys = notSliced.flatMap(m => m.images).filter(isString);
 		await Promise.all([
 			...imgKeys.map(k => images.delete(k)),
@@ -380,6 +398,42 @@ class Conversations {
 		);
 	};
 
+	duplicateUpToMessage = async (from: ProjectEntity["id"], to: ProjectEntity["id"], messageIndex: number) => {
+		const fromArr = this.#conversations[from] ?? [];
+
+		// Clear any existing conversations for the target project first
+		this.#conversations[to] = [];
+
+		// Delete any existing conversations in the database for this project
+		const existingConversations = await conversationsRepo.find({ where: { projectId: to } });
+		await Promise.all(existingConversations.map(c => conversationsRepo.delete(c.id)));
+
+		const newConversations: ConversationClass[] = [];
+
+		for (const c of fromArr) {
+			// Copy only messages up to the specified index with deep clone
+			const truncatedMessages =
+				c.data.messages?.slice(0, messageIndex + 1).map(msg => ({
+					...msg,
+					images: msg.images ? [...msg.images] : undefined,
+				})) || [];
+
+			const conversationData = {
+				...snapshot(c.data),
+				projectId: to,
+				messages: truncatedMessages,
+				id: undefined, // Let the database generate a new ID
+			};
+
+			// Use conversationsRepo directly to avoid default conversation merging
+			const saved = await conversationsRepo.save(conversationData);
+			newConversations.push(new ConversationClass(saved));
+		}
+
+		// Update the in-memory cache
+		this.#conversations[to] = newConversations;
+	};
+
 	genNextMessages = async (conv: "left" | "right" | "both" | ConversationClass = "both") => {
 		if (!token.value) {
 			token.showModal = true;

src/lib/state/projects.svelte.ts

@@ -15,6 +15,12 @@ export class ProjectEntity {
 
 	@Fields.string()
 	systemMessage?: string;
+
+	@Fields.string()
+	branchedFromId?: string | null;
+
+	@Fields.number()
+	branchedFromMessageIndex?: number | null;
 }
 
 export type ProjectEntityMembers = MembersOnly<ProjectEntity>;
@@ -72,14 +78,6 @@ class Projects {
 		return id;
 	};
 
-	setCurrent = async (id: string) => {
-		await checkpoints.migrate(id, this.activeId);
-		conversations.migrate(this.activeId, id).then(() => {
-			this.#activeId.current = id;
-		});
-		this.activeId = id;
-	};
-
 	get current() {
 		return this.#projects[this.activeId];
 	}
@@ -105,6 +103,46 @@ class Projects {
 			this.activeId = DEFAULT_PROJECT_ID;
 		}
 	}
+
+	branch = async (fromProjectId: string, messageIndex: number): Promise<string> => {
+		const fromProject = this.#projects[fromProjectId];
+		if (!fromProject) throw new Error("Source project not found");
+
+		// Create new project with branching info
+		const newProjectId = await this.create({
+			name: `${fromProject.name} (branch)`,
+			systemMessage: fromProject.systemMessage,
+			branchedFromId: fromProjectId,
+			branchedFromMessageIndex: messageIndex,
+		});
+
+		// Copy conversations up to the specified message index
+		await conversations.duplicateUpToMessage(fromProjectId, newProjectId, messageIndex);
+
+		// Switch to the new project
+		this.activeId = newProjectId;
+
+		return newProjectId;
+	};
+
+	getBranchedFromProject = (projectId: string) => {
+		const project = this.#projects[projectId];
+		if (!project?.branchedFromId) return null;
+
+		const originalProject = this.#projects[project.branchedFromId];
+		return originalProject;
+	};
+
+	clearBranchStatus = async (projectId: string) => {
+		const project = this.#projects[projectId];
+		if (!project?.branchedFromId) return;
+
+		await this.update({
+			...project,
+			branchedFromId: null,
+			branchedFromMessageIndex: null,
+		});
+	};
 }
 
 export const projects = new Projects();