From 45c9d1a5f6e28615c2aad47710b68a24f44780f7 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Fri, 15 Sep 2023 11:26:09 +0200
Subject: [PATCH] chore: refactor commit message generation logic and add UI
 support for toggling options

The commit message generation logic in the server.ts file has been refactored to improve readability and maintainability. The `trimNonLetters` function has been removed as it was not necessary. Additionally, UI support has been added to toggle options for generating commit messages. The options include "Extra concise" and "Use emojis", which can be enabled or disabled based on user preferences
---
 packages/ui/src/lib/api/cloud/api.ts          |   2 +-
 packages/ui/src/lib/config/config.ts          |  10 ++
 .../routes/repo/[projectId]/BranchLane.svelte |   2 +-
 .../repo/[projectId]/CommitDialog.svelte      | 100 +++++++++++++-----
 4 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/packages/ui/src/lib/api/cloud/api.ts b/packages/ui/src/lib/api/cloud/api.ts
index edf44371e..73e41a799 100644
--- a/packages/ui/src/lib/api/cloud/api.ts
+++ b/packages/ui/src/lib/api/cloud/api.ts
@@ -173,7 +173,7 @@ export function getCloudApiClient(
 		summarize: {
 			commit: (
 				token: string,
-				params: { diff: string; uid?: string }
+				params: { diff: string; uid?: string, brief?: boolean, emoji?: boolean }
 			): Promise<{ message: string }> =>
 				fetch(getUrl('summarize/commit.json'), {
 					method: 'POST',
diff --git a/packages/ui/src/lib/config/config.ts b/packages/ui/src/lib/config/config.ts
index ec51e0f98..4fb935115 100644
--- a/packages/ui/src/lib/config/config.ts
+++ b/packages/ui/src/lib/config/config.ts
@@ -9,3 +9,13 @@ export function projectMergeUpstreamWarningDismissed(projectId: string): Persist
 	const key = 'projectMergeUpstreamWarningDismissed_';
 	return persisted(false, key + projectId);
 }
+
+export function projectCommitGenerationExtraConcise(projectId: string): Persisted<boolean> {
+	const key = 'projectCommitGenerationExtraConcise_';
+	return persisted(false, key + projectId);
+}
+
+export function projectCommitGenerationUseEmojis(projectId: string): Persisted<boolean> {
+	const key = 'projectCommitGenerationUseEmojis_';
+	return persisted(false, key + projectId);
+}
diff --git a/packages/ui/src/routes/repo/[projectId]/BranchLane.svelte b/packages/ui/src/routes/repo/[projectId]/BranchLane.svelte
index 02a0a0133..0a0ee363d 100644
--- a/packages/ui/src/routes/repo/[projectId]/BranchLane.svelte
+++ b/packages/ui/src/routes/repo/[projectId]/BranchLane.svelte
@@ -507,7 +507,7 @@
 	</div>
 	{#if !maximized}
 		<Resizer
-			minWidth={180}
+			minWidth={330}
 			viewport={rsViewport}
 			direction="horizontal"
 			class="z-30"
diff --git a/packages/ui/src/routes/repo/[projectId]/CommitDialog.svelte b/packages/ui/src/routes/repo/[projectId]/CommitDialog.svelte
index 7e0c99566..66aebe37b 100644
--- a/packages/ui/src/routes/repo/[projectId]/CommitDialog.svelte
+++ b/packages/ui/src/routes/repo/[projectId]/CommitDialog.svelte
@@ -7,7 +7,11 @@
 	import type { getCloudApiClient } from '$lib/api/cloud/api';
 	import type { User } from '$lib/api/cloud';
 	import { Button, Tooltip } from '$lib/components';
-	import { IconAISparkles } from '$lib/icons';
+	import { IconAISparkles, IconLoading, IconTriangleDown, IconTriangleUp } from '$lib/icons';
+	import {
+		projectCommitGenerationExtraConcise,
+		projectCommitGenerationUseEmojis
+	} from '$lib/config/config';
 	import { createEventDispatcher } from 'svelte';
 	import type { Ownership } from '$lib/vbranches/ownership';
 
@@ -22,7 +26,8 @@
 	const dispatch = createEventDispatcher<{ close: null }>();
 
 	let commitMessage: string;
-	$: messageRows = Math.min(Math.max(commitMessage ? commitMessage.split('\n').length : 0, 1), 10);
+	$: messageRows =
+		Math.min(Math.max(commitMessage ? commitMessage.split('\n').length : 0, 1), 10) + 2;
 
 	function commit() {
 		branchController.commitBranch({
@@ -46,12 +51,8 @@
 	$: checkCommitsAnnotated();
 
 	let isGeneratingCommigMessage = false;
-	function trimNonLetters(input: string): string {
-		const regex = /^[^a-zA-Z]+|[^a-zA-Z]+$/g;
-		const trimmedString = input.replace(regex, '');
-		return trimmedString;
-	}
 	async function generateCommitMessage(files: File[]) {
+		expanded = false;
 		const diff = files
 			.map((f) => f.hunks)
 			.flat()
@@ -66,15 +67,15 @@
 		cloud.summarize
 			.commit(user.access_token, {
 				diff,
-				uid: projectId
+				uid: projectId,
+				brief: $commitGenerationExtraConcise,
+				emoji: $commitGenerationUseEmojis
 			})
 			.then(({ message }) => {
 				const firstNewLine = message.indexOf('\n');
 				const summary = firstNewLine > -1 ? message.slice(0, firstNewLine).trim() : message;
 				const description = firstNewLine > -1 ? message.slice(firstNewLine + 1).trim() : '';
-				commitMessage = trimNonLetters(
-					description.length > 0 ? `${summary}\n\n${description}` : summary
-				);
+				commitMessage = description.length > 0 ? `${summary}\n\n${description}` : summary;
 			})
 			.catch(() => {
 				toasts.error('Failed to generate commit message');
@@ -83,6 +84,9 @@
 				isGeneratingCommigMessage = false;
 			});
 	}
+	let expanded = false;
+	const commitGenerationExtraConcise = projectCommitGenerationExtraConcise(projectId);
+	const commitGenerationUseEmojis = projectCommitGenerationUseEmojis(projectId);
 </script>
 
 <div class="bg-color-3 flex w-full flex-col" transition:slide={{ duration: 150 }}>
@@ -108,21 +112,69 @@
 		/>
 	</div>
 	<div class="flex flex-grow justify-end gap-2 p-3 px-5">
-		<div>
+		<div class="relative flex flex-grow">
 			{#if cloudEnabled && user}
-				<Button
-					disabled={isGeneratingCommigMessage}
-					tabindex={-1}
-					kind="outlined"
-					class="text-light-500"
-					height="small"
-					id="generate-ai-message"
-					icon={IconAISparkles}
-					loading={isGeneratingCommigMessage}
-					on:click={() => generateCommitMessage(branch.files)}
+				<div
+					class="bg-color-3 border-color-3 absolute flex h-fit w-fit flex-col items-center whitespace-nowrap rounded border
+				"
 				>
-					<span class="text-4">Generate message</span>
-				</Button>
+					<div class="flex h-6 flex-row items-center justify-center font-medium leading-5">
+						<button
+							disabled={isGeneratingCommigMessage}
+							class="hover:bg-color-2 flex h-full items-center justify-center gap-1 rounded-l pl-1.5 pr-1"
+							on:click={() => generateCommitMessage(branch.files)}
+						>
+							{#if isGeneratingCommigMessage}
+								<IconLoading
+									class="text-color-4 h-4 w-4 animate-spin fill-purple-600 dark:fill-purple-200"
+								/>
+							{:else}
+								<IconAISparkles class="text-color-4 h-4 w-4"></IconAISparkles>
+							{/if}
+							<span>Generate message</span>
+						</button>
+						<button
+							id="close-button"
+							disabled={isGeneratingCommigMessage}
+							class="hover:bg-color-2 flex h-full items-center justify-center rounded-r pl-1 pr-1.5"
+							on:click={() => (expanded = !expanded)}
+						>
+							{#if expanded}
+								<IconTriangleUp></IconTriangleUp>
+							{:else}
+								<IconTriangleDown></IconTriangleDown>
+							{/if}
+						</button>
+					</div>
+					{#if expanded}
+						<div class="border-color-4 z-50 w-full border-t px-2 py-0.5">
+							<label class="flex items-center gap-1">
+								<input
+									type="checkbox"
+									bind:checked={$commitGenerationExtraConcise}
+									on:change={(e) => {
+										if (e.target instanceof HTMLInputElement) {
+											commitGenerationExtraConcise.set(e.target.checked);
+										}
+									}}
+								/>
+								Extra concise
+							</label>
+							<label class="flex items-center gap-1">
+								<input
+									type="checkbox"
+									bind:checked={$commitGenerationUseEmojis}
+									on:change={(e) => {
+										if (e.target instanceof HTMLInputElement) {
+											commitGenerationUseEmojis.set(e.target.checked);
+										}
+									}}
+								/>
+								Use emojis
+							</label>
+						</div>
+					{/if}
+				</div>
 			{:else}
 				<Tooltip
 					label="Summary generation requres that you are logged in and have cloud sync enabled for the project"