✨ feat: add functionality to generate branch name based on file diffs and update branch name if it doesn't match the generated name

packages/ui/src/lib/api/cloud/api.ts

@@ -191,6 +191,15 @@ export function getCloudApiClient(
 						// 'X-Auth-Token': token
 					},
 					body: JSON.stringify(params)
+				}).then(parseResponseJSON),
+			branch: (token: string, params: { diff: string }): Promise<{ message: string }> =>
+				fetch(getUrl('summarize_branch_name/branch.json'), {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+						'X-Auth-Token': token
+					},
+					body: JSON.stringify(params)
 				}).then(parseResponseJSON)
 		},
 		chat: {

packages/ui/src/routes/repo/[projectId]/BranchLane.svelte

@@ -30,6 +30,7 @@
 	import { sortLikeFileTree } from '$lib/vbranches/filetree';
 	import CommitDialog from './CommitDialog.svelte';
 	import { writable } from 'svelte/store';
+	import { computedAddedRemoved } from '$lib/vbranches/fileStatus';
 
 	const [send, receive] = crossfade({
 		duration: (d) => Math.sqrt(d * 200),
@@ -134,6 +135,34 @@
 		commitDialogShown = false;
 	}
 
+	function generateBranchName() {
+		const diff = branch.files
+			.map((f) => f.hunks)
+			.flat()
+			.map((h) => h.diff)
+			.flat()
+			.join('\n')
+			.slice(0, 5000);
+
+		if ($user) {
+			cloud.summarize.branch($user.access_token, { diff }).then((result) => {
+				console.log(result);
+				if (result.message && result.message !== branch.name) {
+					branch.name = result.message;
+					handleBranchNameChange();
+				}
+			});
+		}
+	}
+
+	$: linesTouched = computedAddedRemoved(...branch.files);
+	$: if (
+		branch.name.toLowerCase().includes('virtual branch') &&
+		linesTouched.added + linesTouched.removed > 0
+	) {
+		generateBranchName();
+	}
+
 	// We have to create this manually for now.
 	// TODO: Use document.body.addEventListener to avoid having to use backdrop
 	let popupMenu = new BranchLanePopupMenu({
@@ -157,6 +186,8 @@
 				handleExpandAll();
 			} else if (e.detail == 'collapse') {
 				handleCollapseAll();
+			} else if (e.detail == 'generate-branch-name') {
+				generateBranchName();
 			}
 		});
 	});

packages/ui/src/routes/repo/[projectId]/BranchLanePopupMenu.svelte

@@ -11,7 +11,7 @@
 	let popupMenu: PopupMenu;
 
 	const dispatch = createEventDispatcher<{
-		action: 'expand' | 'collapse';
+		action: 'expand' | 'collapse' | 'generate-branch-name';
 	}>();
 
 	export function openByMouse(e: MouseEvent, item: any) {
@@ -37,6 +37,10 @@
 		>Collapse all</PopupMenuItem
 	>
 
+	<PopupMenuItem on:click={() => dispatch('action', 'generate-branch-name')}
+		>Generate branch name</PopupMenuItem
+	>
+
 	<div class="mx-3">
 		<div class="bg-color-3 my-2 h-[0.0625rem] w-full" />
 	</div>