Adds generating patch message

Author: d13

src/ai/aiProviderService.ts

@@ -522,3 +522,17 @@ export async function getApiKey(
 
 	return apiKey;
 }
+
+export function extractDraftMessage(
+	message: string,
+	splitter = '\n\n',
+): { title: string; description: string | undefined } {
+	const firstBreak = message.indexOf(splitter) ?? 0;
+	const title = firstBreak > -1 ? message.substring(0, firstBreak) : message;
+	const description = firstBreak > -1 ? message.substring(firstBreak + splitter.length) : undefined;
+
+	return {
+		title: title,
+		description: description,
+	};
+}

src/plus/webviews/patchDetails/patchDetailsWebview.ts

@@ -1,5 +1,6 @@
 import type { ConfigurationChangeEvent } from 'vscode';
 import { Disposable, env, Uri, window } from 'vscode';
+import { extractDraftMessage } from '../../../ai/aiProviderService';
 import { getAvatarUri } from '../../../avatars';
 import type { ContextKeys, Sources } from '../../../constants';
 import { Commands, GlyphChars, previewBadge } from '../../../constants';
@@ -56,6 +57,7 @@ import type {
 	CreateDraft,
 	CreatePatchParams,
 	DidExplainParams,
+	DidGenerateParams,
 	DraftPatchCheckedParams,
 	DraftUserSelection,
 	ExecuteFileActionParams,
@@ -81,6 +83,7 @@ import {
 	DidChangePreferencesNotification,
 	DraftPatchCheckedCommand,
 	ExplainRequest,
+	GenerateRequest,
 	OpenFileCommand,
 	OpenFileComparePreviousCommand,
 	OpenFileCompareWorkingCommand,
@@ -240,6 +243,10 @@ export class PatchDetailsWebviewProvider
 				void this.explainRequest(ExplainRequest, e);
 				break;
 
+			case GenerateRequest.is(e):
+				void this.generateRequest(GenerateRequest, e);
+				break;
+
 			case OpenFileComparePreviousCommand.is(e):
 				void this.openFileComparisonWithPrevious(e.params);
 				break;
@@ -823,6 +830,48 @@ export class PatchDetailsWebviewProvider
 		void this.host.respond(requestType, msg, params);
 	}
 
+	private async generateRequest<T extends typeof GenerateRequest>(requestType: T, msg: IpcCallMessageType<T>) {
+		let repo: Repository | undefined;
+		if (this._context.create?.changes != null) {
+			for (const change of this._context.create.changes.values()) {
+				if (change.repository) {
+					repo = change.repository;
+					break;
+				}
+			}
+		}
+
+		if (!repo) {
+			void this.host.respond(requestType, msg, { error: { message: 'Unable to find changes' } });
+			return;
+		}
+
+		let params: DidGenerateParams;
+
+		try {
+			// TODO@eamodio HACK -- only works for the first patch
+			// const patch = await this.getDraftPatch(this._context.draft);
+			// if (patch == null) throw new Error('Unable to find patch');
+
+			// const commit = await this.getOrCreateCommitForPatch(patch.gkRepositoryId);
+			// if (commit == null) throw new Error('Unable to find commit');
+
+			const summary = await (
+				await this.container.ai
+			)?.generateDraftMessage(repo, {
+				progress: { location: { viewId: this.host.id } },
+			});
+			if (summary == null) throw new Error('Error retrieving content');
+
+			params = extractDraftMessage(summary);
+		} catch (ex) {
+			debugger;
+			params = { error: { message: ex.message } };
+		}
+
+		void this.host.respond(requestType, msg, params);
+	}
+
 	private async openPatchContents(_params: ExecuteFileActionParams) {
 		// TODO@eamodio Open the patch contents for the selected repo in an untitled editor
 	}

src/plus/webviews/patchDetails/protocol.ts

@@ -275,6 +275,15 @@ export type DidExplainParams =
 	| { error: { message: string } };
 export const ExplainRequest = new IpcRequest<void, DidExplainParams>(scope, 'explain');
 
+export type DidGenerateParams =
+	| {
+			title: string | undefined;
+			description: string | undefined;
+			error?: undefined;
+	  }
+	| { error: { message: string } };
+export const GenerateRequest = new IpcRequest<void, DidGenerateParams>(scope, 'generate');
+
 // NOTIFICATIONS
 
 export interface DidChangeParams {

src/webviews/apps/plus/patchDetails/components/gl-patch-create.ts

@@ -54,6 +54,13 @@ export interface CreatePatchUpdateSelectionEventDetail {
 	role: Exclude<DraftRole, 'owner'> | 'remove';
 }
 
+interface GenerateState {
+	cancelled?: boolean;
+	error?: { message: string };
+	title?: string;
+	description?: string;
+}
+
 // Can only import types from 'vscode'
 const BesideViewColumn = -2; /*ViewColumn.Beside*/
 
@@ -63,6 +70,12 @@ export class GlPatchCreate extends GlTreeBase {
 
 	@property({ type: Boolean }) review = false;
 
+	@property({ type: Object })
+	generate?: GenerateState;
+
+	@state()
+	generateBusy = false;
+
 	// @state()
 	// patchTitle = this.create.title ?? '';
 
@@ -75,6 +88,9 @@ export class GlPatchCreate extends GlTreeBase {
 	@query('#desc')
 	descInput!: HTMLInputElement;
 
+	@query('#generate-ai')
+	generateAiButton!: HTMLElement;
+
 	@state()
 	validityMessage?: string;
 
@@ -126,6 +142,12 @@ export class GlPatchCreate extends GlTreeBase {
 		defineGkElement(Avatar, Button, Menu, MenuItem, Popover);
 	}
 
+	override updated(changedProperties: Map<string, any>) {
+		if (changedProperties.has('generate')) {
+			this.generateBusy = false;
+			this.generateAiButton.scrollIntoView();
+		}
+	}
 	protected override firstUpdated() {
 		window.requestAnimationFrame(() => {
 			this.titleInput.focus();
@@ -258,16 +280,35 @@ export class GlPatchCreate extends GlTreeBase {
 						${this.renderUserSelectionList()}
 					`,
 				)}
-				<div class="message-input">
+				<div class="message-input message-input--with-menu">
 					<input
 						id="title"
 						type="text"
 						class="message-input__control"
 						placeholder="Title (required)"
 						maxlength="100"
 						.value=${this.create.title ?? ''}
+						?disabled=${this.generateBusy}
 						@input=${(e: InputEvent) => this.onDebounceTitleInput(e)}
 					/>
+					${when(
+						this.state?.orgSettings.ai === true,
+						() =>
+							html`<div class="message-input__menu">
+								<gl-button
+									id="generate-ai"
+									appearance="toolbar"
+									density="compact"
+									tooltip="Generate Title and Description..."
+									@click=${(e: MouseEvent) => this.onGenerateTitleClick(e)}
+									?disabled=${this.generateBusy}
+									><code-icon
+										icon=${this.generateBusy ? 'loading' : 'sparkle'}
+										modifier="${this.generateBusy ? 'spin' : ''}"
+									></code-icon
+								></gl-button>
+							</div>`,
+					)}
 				</div>
 				<div class="message-input">
 					<textarea
@@ -276,6 +317,7 @@ export class GlPatchCreate extends GlTreeBase {
 						placeholder="Description (optional)"
 						maxlength="10000"
 						.value=${this.create.description ?? ''}
+						?disabled=${this.generateBusy}
 						@input=${(e: InputEvent) => this.onDebounceDescriptionInput(e)}
 					></textarea>
 				</div>
@@ -663,6 +705,15 @@ export class GlPatchCreate extends GlTreeBase {
 		this.fireMetadataUpdate();
 	}
 
+	private onGenerateTitleClick(_e: Event) {
+		this.generateBusy = true;
+		this.emit('gl-patch-generate-title', {
+			title: this.create.title!,
+			description: this.create.description,
+			visibility: this.create.visibility,
+		});
+	}
+
 	private fireMetadataUpdate() {
 		this.emit('gl-patch-create-update-metadata', {
 			title: this.create.title!,
@@ -786,6 +837,7 @@ declare global {
 		'gl-patch-file-open': CustomEvent<ExecuteFileActionParams>;
 		'gl-patch-file-stage': CustomEvent<ExecuteFileActionParams>;
 		'gl-patch-file-unstage': CustomEvent<ExecuteFileActionParams>;
+		'gl-patch-generate-title': CustomEvent<CreatePatchMetadataEventDetail>;
 		'gl-patch-create-invite-users': CustomEvent<undefined>;
 		'gl-patch-create-update-selection': CustomEvent<CreatePatchUpdateSelectionEventDetail>;
 		'gl-patch-create-cancelled': CustomEvent<undefined>;

src/webviews/apps/plus/patchDetails/components/patch-details-app.ts

@@ -14,6 +14,13 @@ interface ExplainState {
 	summary?: string;
 }
 
+interface GenerateState {
+	cancelled?: boolean;
+	error?: { message: string };
+	title?: string;
+	description?: string;
+}
+
 export interface ApplyPatchDetail {
 	draft: DraftDetails;
 	target?: 'current' | 'branch' | 'worktree';
@@ -45,6 +52,9 @@ export class GlPatchDetailsApp extends GlElement {
 	@property({ type: Object })
 	explain?: ExplainState;
 
+	@property({ type: Object })
+	generate?: GenerateState;
+
 	@property({ attribute: false, type: Object })
 	app?: PatchDetailsApp;
 
@@ -111,7 +121,7 @@ export class GlPatchDetailsApp extends GlElement {
 					${when(
 						this.mode === 'view',
 						() => html`<gl-draft-details .state=${this.state} .explain=${this.explain}></gl-draft-details>`,
-						() => html`<gl-patch-create .state=${this.state}></gl-patch-create>`,
+						() => html`<gl-patch-create .state=${this.state} .generate=${this.generate}></gl-patch-create>`,
 					)}
 				</main>
 			</div>

src/webviews/apps/plus/patchDetails/patchDetails.scss

@@ -216,6 +216,12 @@ gk-menu-item {
 			outline-offset: -1px;
 		}
 
+		&:disabled {
+			opacity: 0.4;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+
 		&--text {
 			overflow: hidden;
 			white-space: nowrap;
@@ -266,12 +272,22 @@ gk-menu-item {
 		padding-right: 2.4rem;
 	}
 
+	&__menu {
+		position: absolute;
+		top: 0.8rem;
+		right: 0;
+	}
+
 	&--group {
 		display: flex;
 		flex-direction: row;
 		align-items: stretch;
 		gap: 0.6rem;
 	}
+
+	&--with-menu {
+		position: relative;
+	}
 }
 
 textarea.message-input__control {

src/webviews/apps/plus/patchDetails/patchDetails.ts

@@ -17,6 +17,7 @@ import {
 	DraftPatchCheckedCommand,
 	ExecuteFileActionCommand,
 	ExplainRequest,
+	GenerateRequest,
 	OpenFileCommand,
 	OpenFileComparePreviousCommand,
 	OpenFileCompareWorkingCommand,
@@ -129,6 +130,9 @@ export class PatchDetailsApp extends App<Serialized<State>> {
 				'gl-patch-create-repo-checked',
 				e => this.onCreateCheckRepo(e.detail),
 			),
+			DOM.on<GlPatchCreate, CreatePatchMetadataEventDetail>('gl-patch-create', 'gl-patch-generate-title', e =>
+				this.onCreateGenerateTitle(e.detail),
+			),
 			DOM.on<GlPatchCreate, CreatePatchMetadataEventDetail>(
 				'gl-patch-create',
 				'gl-patch-create-update-metadata',
@@ -255,6 +259,36 @@ export class PatchDetailsApp extends App<Serialized<State>> {
 		this.sendCommand(UpdateCreatePatchMetadataCommand, e);
 	}
 
+	private async onCreateGenerateTitle(_e: CreatePatchMetadataEventDetail) {
+		try {
+			const result = await this.sendRequest(GenerateRequest, undefined);
+
+			if (result.error) {
+				this.component.generate = { error: { message: result.error.message ?? 'Error retrieving content' } };
+			} else if (result.title || result.description) {
+				this.component.generate = {
+					title: result.title,
+					description: result.description,
+				};
+
+				this.state = {
+					...this.state,
+					create: {
+						...this.state.create!,
+						title: result.title ?? this.state.create?.title,
+						description: result.description ?? this.state.create?.description,
+					},
+				};
+				this.setState(this.state);
+				this.debouncedAttachState();
+			} else {
+				this.component.generate = undefined;
+			}
+		} catch (ex) {
+			this.component.generate = { error: { message: 'Error retrieving content' } };
+		}
+	}
+
 	private onDraftUpdateMetadata(e: { visibility: DraftVisibility }) {
 		this.sendCommand(UpdatePatchDetailsMetadataCommand, e);
 	}