Skip to content

Commit dbed937

Browse files
aiday-maraiday-mar
authored
Merge pull request microsoft#183564 from microsoft/aiday/internalIssue4180
Expand button should not be shown when message not cropped in interactive editor
2 parents 671ab0f + d7ae94f commit dbed937

File tree

3 files changed

+53
-19
lines changed

3 files changed

+53
-19
lines changed

‎src/vs/workbench/contrib/interactiveEditor/browser/interactiveEditorController.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/c
2929
import { IDialogService } from 'vs/platform/dialogs/common/dialogs';
3030
import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
3131
import { ILogService } from 'vs/platform/log/common/log';
32-
import { EditResponse, EmptyResponse, ErrorResponse, IInteractiveEditorSessionService, MarkdownResponse, Session, SessionExchange } from 'vs/workbench/contrib/interactiveEditor/browser/interactiveEditorSession';
32+
import { EditResponse, EmptyResponse, ErrorResponse, ExpansionState, IInteractiveEditorSessionService, MarkdownResponse, Session, SessionExchange } from 'vs/workbench/contrib/interactiveEditor/browser/interactiveEditorSession';
3333
import { EditModeStrategy, LivePreviewStrategy, LiveStrategy, PreviewStrategy } from 'vs/workbench/contrib/interactiveEditor/browser/interactiveEditorStrategies';
3434
import { InteractiveEditorZoneWidget } from 'vs/workbench/contrib/interactiveEditor/browser/interactiveEditorWidget';
3535
import { CTX_INTERACTIVE_EDITOR_HAS_ACTIVE_REQUEST, CTX_INTERACTIVE_EDITOR_LAST_FEEDBACK, IInteractiveEditorRequest, IInteractiveEditorResponse, INTERACTIVE_EDITOR_ID, EditMode, InteractiveEditorResponseFeedbackKind, CTX_INTERACTIVE_EDITOR_LAST_RESPONSE_TYPE, InteractiveEditorResponseType, CTX_INTERACTIVE_EDITOR_DID_EDIT, CTX_INTERACTIVE_EDITOR_HAS_STASHED_SESSION } from 'vs/workbench/contrib/interactiveEditor/common/interactiveEditor';
@@ -271,6 +271,7 @@ export class InteractiveEditorController implements IEditorContribution {
271271
this._zone.value.widget.value = this._activeSession.lastInput ?? '';
272272
this._zone.value.widget.updateInfo(this._activeSession.session.message ?? localize('welcome.1', "AI-generated code may be incorrect"));
273273
this._zone.value.show(this._activeSession.wholeRange.getEndPosition());
274+
this._zone.value.widget.preferredExpansionState = this._activeSession.lastExpansionState;
274275

275276
this._sessionStore.add(this._editor.onDidChangeModel((e) => {
276277
const msg = this._activeSession?.lastExchange
@@ -556,7 +557,7 @@ export class InteractiveEditorController implements IEditorContribution {
556557
this._zone.value.widget.updateStatus('');
557558
this._zone.value.widget.updateMarkdownMessage(renderedMarkdown.element);
558559
this._zone.value.widget.updateToolbar(true);
559-
this._zone.value.widget.updateMarkdownMessageExpansionState(this._activeSession.lastExpansionState);
560+
this._activeSession.lastExpansionState = this._zone.value.widget.expansionState;
560561

561562
} else if (response instanceof EditResponse) {
562563
// edit response -> complex...
@@ -671,8 +672,9 @@ export class InteractiveEditorController implements IEditorContribution {
671672

672673
updateExpansionState(expand: boolean) {
673674
if (this._activeSession) {
674-
this._zone.value.widget.updateMarkdownMessageExpansionState(expand);
675-
this._activeSession.lastExpansionState = expand;
675+
const expansionState = expand ? ExpansionState.EXPANDED : ExpansionState.CROPPED;
676+
this._zone.value.widget.updateMarkdownMessageExpansionState(expansionState);
677+
this._activeSession.lastExpansionState = expansionState;
676678
}
677679
}
678680

‎src/vs/workbench/contrib/interactiveEditor/browser/interactiveEditorSession.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,10 +55,16 @@ type TelemetryDataClassification = {
5555
editMode: { classification: 'SystemMetaData'; purpose: 'FeatureInsight'; comment: 'What edit mode was choosen: live, livePreview, preview' };
5656
};
5757

58+
export enum ExpansionState {
59+
EXPANDED = 'expanded',
60+
CROPPED = 'cropped',
61+
NOT_CROPPED = 'not_cropped'
62+
}
63+
5864
export class Session {
5965

6066
private _lastInput: string | undefined;
61-
private _lastExpansionState: boolean | undefined;
67+
private _lastExpansionState: ExpansionState | undefined;
6268
private _lastTextModelChanges: LineRangeMapping[] | undefined;
6369
private _isUnstashed: boolean = false;
6470
private readonly _exchange: SessionExchange[] = [];
@@ -104,11 +110,11 @@ export class Session {
104110
return this._lastInput;
105111
}
106112

107-
get lastExpansionState() {
108-
return this._lastExpansionState ?? false;
113+
get lastExpansionState(): ExpansionState | undefined {
114+
return this._lastExpansionState;
109115
}
110116

111-
set lastExpansionState(state: boolean) {
117+
set lastExpansionState(state: ExpansionState) {
112118
this._lastExpansionState = state;
113119
}
114120

‎src/vs/workbench/contrib/interactiveEditor/browser/interactiveEditorWidget.ts

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
5050
import { AccessibilityVerbositySettingId } from 'vs/workbench/contrib/accessibility/browser/accessibilityContribution';
5151
import { assertType } from 'vs/base/common/types';
5252
import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels';
53+
import { ExpansionState } from 'vs/workbench/contrib/interactiveEditor/browser/interactiveEditorSession';
5354
import { IdleValue } from 'vs/base/common/async';
5455

5556
const defaultAriaLabel = localize('aria-label', "Interactive Editor Input");
@@ -118,6 +119,9 @@ export interface InteractiveEditorWidgetViewState {
118119
placeholder: string;
119120
}
120121

122+
const MESSAGE_CROPPED_NUMBER_LINES = 3;
123+
const MESSAGE_EXPANDED_NUMBER_LINES = 10;
124+
121125
export class InteractiveEditorWidget {
122126

123127
private static _modelPool: number = 1;
@@ -179,6 +183,8 @@ export class InteractiveEditorWidget {
179183

180184
private _lastDim: Dimension | undefined;
181185
private _isLayouting: boolean = false;
186+
private _preferredExpansionState: ExpansionState | undefined;
187+
private _expansionState: ExpansionState = ExpansionState.NOT_CROPPED;
182188

183189
constructor(
184190
parentEditor: ICodeEditor,
@@ -437,23 +443,49 @@ export class InteractiveEditorWidget {
437443
this._onDidChangeHeight.fire();
438444
}
439445

446+
get expansionState(): ExpansionState {
447+
return this._expansionState;
448+
}
449+
450+
set preferredExpansionState(expansionState: ExpansionState | undefined) {
451+
this._preferredExpansionState = expansionState;
452+
}
453+
440454
updateMarkdownMessage(message: Node | undefined) {
441455
this._elements.markdownMessage.classList.toggle('hidden', !message);
456+
let expansionState: ExpansionState;
442457
if (!message) {
443-
this._ctxMessageCropState.reset();
444458
reset(this._elements.message);
459+
this._ctxMessageCropState.reset();
460+
expansionState = ExpansionState.NOT_CROPPED;
445461

446462
} else {
447-
reset(this._elements.message, message);
448-
if (this._elements.message.scrollHeight > this._elements.message.clientHeight) {
449-
this._ctxMessageCropState.set('cropped');
463+
if (this._preferredExpansionState) {
464+
reset(this._elements.message, message);
465+
expansionState = this._preferredExpansionState;
466+
this._preferredExpansionState = undefined;
450467
} else {
451-
this._ctxMessageCropState.set('not_cropped');
468+
this._elements.message.style.webkitLineClamp = MESSAGE_CROPPED_NUMBER_LINES.toString();
469+
reset(this._elements.message, message);
470+
expansionState = this._elements.message.scrollHeight > this._elements.message.clientHeight ? ExpansionState.CROPPED : ExpansionState.NOT_CROPPED;
452471
}
472+
this._ctxMessageCropState.set(expansionState);
473+
this.updateLineClamp(expansionState);
453474
}
475+
this._expansionState = expansionState;
454476
this._onDidChangeHeight.fire();
455477
}
456478

479+
updateMarkdownMessageExpansionState(expansionState: ExpansionState) {
480+
this._ctxMessageCropState.set(expansionState);
481+
this.updateLineClamp(expansionState);
482+
this._onDidChangeHeight.fire();
483+
}
484+
485+
updateLineClamp(expansionState: ExpansionState) {
486+
this._elements.message.style.webkitLineClamp = expansionState === ExpansionState.NOT_CROPPED ? 'none' : (expansionState === ExpansionState.EXPANDED ? MESSAGE_EXPANDED_NUMBER_LINES.toString() : MESSAGE_CROPPED_NUMBER_LINES.toString());
487+
}
488+
457489
updateInfo(message: string): void {
458490
this._elements.infoLabel.classList.toggle('hidden', !message);
459491
this._elements.infoLabel.innerText = message;
@@ -502,12 +534,6 @@ export class InteractiveEditorWidget {
502534
this._inputEditor.focus();
503535
}
504536

505-
updateMarkdownMessageExpansionState(expand: boolean) {
506-
this._ctxMessageCropState.set(expand ? 'expanded' : 'cropped');
507-
this._elements.message.style.webkitLineClamp = expand ? '10' : '3';
508-
this._onDidChangeHeight.fire();
509-
}
510-
511537
// --- preview
512538

513539
showEditsPreview(textModelv0: ITextModel, edits: ISingleEditOperation[], changes: LineRangeMapping[]) {

0 commit comments

Comments
 (0)