Updates explain changes in Inspect view

Author: d13

src/webviews/apps/commitDetails/components/gl-commit-details.ts

@@ -151,19 +151,37 @@ export class GlCommitDetails extends GlDetailsBase {
 						></commit-identity>
 					`,
 				)}
-				<div class="message-block">
+				<div>
+					<div class="message-block">
+						${when(
+							index === -1,
+							() =>
+								html`<p class="message-block__text scrollable" data-region="message">
+									<strong>${unsafeHTML(message)}</strong>
+								</p>`,
+							() =>
+								html`<p class="message-block__text scrollable" data-region="message">
+									<strong>${unsafeHTML(message.substring(0, index))}</strong><br /><span
+										>${unsafeHTML(message.substring(index + 3))}</span
+									>
+								</p>`,
+						)}
+					</div>
 					${when(
-						index === -1,
-						() =>
-							html`<p class="message-block__text scrollable" data-region="message">
-								<strong>${unsafeHTML(message)}</strong>
-							</p>`,
-						() =>
-							html`<p class="message-block__text scrollable" data-region="message">
-								<strong>${unsafeHTML(message.substring(0, index))}</strong><br /><span
-									>${unsafeHTML(message.substring(index + 3))}</span
-								>
-							</p>`,
+						this.state?.orgSettings.ai !== false,
+						() => html`
+							<div class="message-block-actions">
+								<action-item
+									label="Explain this ${this.isStash ? 'Stash' : 'Commit'}"
+									icon="sparkle"
+									data-action="explain-commit"
+									aria-busy="${this.explainBusy ? 'true' : nothing}"
+									?disabled="${this.explainBusy ? true : nothing}"
+									@click=${this.onExplainChanges}
+									@keydown=${this.onExplainChanges}
+								></action-item>
+							</div>
+						`,
 					)}
 				</div>
 			</div>
@@ -429,59 +447,6 @@ export class GlCommitDetails extends GlDetailsBase {
 		`;
 	}
 
-	private renderExplainAi() {
-		if (this.state?.orgSettings.ai === false) return undefined;
-
-		const markdown =
-			this.explain?.result != null ? `${this.explain.result.summary}\n\n${this.explain.result.body}` : undefined;
-
-		// TODO: add loading and response states
-		return html`
-			<webview-pane collapsable data-region="explain-pane">
-				<span slot="title">Explain (AI)</span>
-				<action-nav slot="actions">
-					<action-item
-						data-action="switch-ai"
-						label="Switch AI Provider/Model"
-						icon="arrow-swap"
-					></action-item>
-				</action-nav>
-
-				<div class="section">
-					<p>Let AI assist in understanding the changes made with this commit.</p>
-					<p class="button-container">
-						<span class="button-group button-group--single">
-							<gl-button
-								full
-								class="button--busy"
-								data-action="explain-commit"
-								aria-busy="${this.explainBusy ? 'true' : nothing}"
-								@click=${this.onExplainChanges}
-								@keydown=${this.onExplainChanges}
-								><code-icon icon="loading" modifier="spin" slot="prefix"></code-icon>Explain
-								Changes</gl-button
-							>
-						</span>
-					</p>
-					${markdown
-						? html`<div class="ai-content" data-region="commit-explanation">
-								<gl-markdown
-									class="ai-content__summary scrollable"
-									markdown="${markdown}"
-								></gl-markdown>
-						  </div>`
-						: this.explain?.error
-						  ? html`<div class="ai-content has-error" data-region="commit-explanation">
-									<p class="ai-content__summary scrollable">
-										${this.explain.error.message ?? 'Error retrieving content'}
-									</p>
-						    </div>`
-						  : undefined}
-				</div>
-			</webview-pane>
-		`;
-	}
-
 	override render(): unknown {
 		if (this.state?.commit == null) {
 			return this.renderEmptyContent();
@@ -495,7 +460,6 @@ export class GlCommitDetails extends GlDetailsBase {
 					this.isStash ? 'stash' : 'commit',
 					this.renderCommitStats(this.state.commit.stats),
 				)}
-				${this.renderExplainAi()}
 			</webview-pane-group>
 		`;
 	}

src/webviews/apps/shared/styles/details-base.scss

@@ -166,6 +166,15 @@ ul {
 	}
 }
 
+.message-block-actions {
+	background: var(--color-background--level-075);
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	border-radius: 0 0 2px 2px;
+}
+
 .commit-detail-panel {
 	max-height: 100vh;
 	overflow: auto;

src/webviews/commitDetails/commitDetailsWebview.ts

@@ -1126,14 +1126,14 @@ export class CommitDetailsWebviewProvider
 	private async explainRequest<T extends typeof ExplainRequest>(requestType: T, msg: IpcCallMessageType<T>) {
 		let params: DidExplainParams;
 		try {
-			const result = await this.container.ai.explainCommit(
-				this._context.commit!,
-				{ source: 'inspect', type: isStash(this._context.commit) ? 'stash' : 'commit' },
-				{ progress: { location: { viewId: this.host.id } } },
-			);
-			if (result == null) throw new Error('Error retrieving content');
+			const isStashCommit = isStash(this._context.commit);
+			await executeCommand(isStashCommit ? 'gitlens.ai.explainStash' : 'gitlens.ai.explainCommit', {
+				repoPath: this._context.commit!.repoPath,
+				ref: this._context.commit!.sha,
+				source: { source: 'inspect', type: isStashCommit ? 'stash' : 'commit' },
+			});
 
-			params = { result: result?.parsed };
+			params = { result: { summary: '', body: '' } };
 		} catch (ex) {
 			debugger;
 			params = { error: { message: ex.message } };