Inline chat fixes (microsoft#218318)

* fix microsoft#218059 * Change enablement of "Toggle Changes" instead of visibility mitigates/fixes microsoft#218099 * have padding per part (actions, input, list) fixes microsoft#218083 * fixes microsoft#218021 * fix notebook button groups for inline chat * tweak inline chat content widget when text btn are enabled
c-claeys · Jun 26, 2024 · e5d157c · e5d157c
1 parent 979ad0a
commit e5d157c
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 18 deletions.
diff --git a/src/vs/workbench/contrib/chat/browser/chatListRenderer.ts b/src/vs/workbench/contrib/chat/browser/chatListRenderer.ts
@@ -255,7 +255,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 			//       | value
 			// -----------------------------------------------------
 			const lhsContainer = dom.append(rowContainer, $('.column.left'));
-			const rhsContainer = dom.append(rowContainer, $('.column'));
+			const rhsContainer = dom.append(rowContainer, $('.column.right'));
 
 			headerParent = lhsContainer;
 			detailContainerParent = rhsContainer;

diff --git a/src/vs/workbench/contrib/chat/browser/media/chat.css b/src/vs/workbench/contrib/chat/browser/media/chat.css
@@ -348,8 +348,14 @@
 }
 
 .interactive-item-container.minimal .column.left {
-	width: 20px;
 	padding-top: 2px;
+	display: inline-block;
+	flex-grow: 0;
+}
+
+.interactive-item-container.minimal .column.right {
+	display: inline-block;
+	flex-grow: 1;
 }
 
 .interactive-item-container.minimal .user > .username {

diff --git a/src/vs/workbench/contrib/inlineChat/browser/inlineChatActions.ts b/src/vs/workbench/contrib/inlineChat/browser/inlineChatActions.ts
@@ -525,9 +525,9 @@ export class ToggleDiffForChange extends AbstractInlineChatAction {
 			},
 			menu: {
 				id: MENU_INLINE_CHAT_WIDGET_STATUS,
-				group: 'more',
-				when: ContextKeyExpr.and(CTX_INLINE_CHAT_EDIT_MODE.isEqualTo(EditMode.Live), CTX_INLINE_CHAT_CHANGE_HAS_DIFF),
-				order: 10,
+				group: 'zzz',
+				when: ContextKeyExpr.and(CTX_INLINE_CHAT_EDIT_MODE.isEqualTo(EditMode.Live)),
+				order: 1,
 			}
 		});
 	}

diff --git a/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts b/src/vs/workbench/contrib/inlineChat/browser/inlineChatContentWidget.ts
@@ -101,9 +101,9 @@ export class InlineChatContentWidget implements IContentWidget {
 		this._domNode.appendChild(this._inputContainer);
 
 		this._toolbarContainer.classList.add('toolbar');
-		if (!configurationService.getValue<boolean>(InlineChatConfigKeys.ExpTextButtons)) {
-			this._toolbarContainer.style.display = 'none';
-			this._domNode.style.paddingBottom = '6px';
+		if (configurationService.getValue<boolean>(InlineChatConfigKeys.ExpTextButtons)) {
+			this._toolbarContainer.style.display = 'inherit';
+			this._domNode.style.paddingBottom = '4px';
 		}
 		this._domNode.appendChild(this._toolbarContainer);
 
@@ -188,7 +188,6 @@ export class InlineChatContentWidget implements IContentWidget {
 			this._focusNext = true;
 
 			this._editor.revealRangeNearTopIfOutsideViewport(Range.fromPositions(position), ScrollType.Immediate);
-			this._widget.inputEditor.setValue('');
 
 			const wordInfo = this._editor.getModel()?.getWordAtPosition(position);
 
@@ -202,6 +201,7 @@ export class InlineChatContentWidget implements IContentWidget {
 		if (this._visible) {
 			this._visible = false;
 			this._editor.removeContentWidget(this);
+			this._widget.inputEditor.setValue('');
 			this._widget.saveState();
 			this._widget.setVisible(false);
 		}

diff --git a/src/vs/workbench/contrib/inlineChat/browser/inlineChatWidget.ts b/src/vs/workbench/contrib/inlineChat/browser/inlineChatWidget.ts
@@ -361,7 +361,7 @@ export class InlineChatWidget {
 	}
 
 	protected _getExtraHeight(): number {
-		return 4 /* padding */ + 2 /*border*/ + 12 /*shadow*/;
+		return 4 /* padding */ + 2 /*border*/ + 4 /*shadow*/;
 	}
 
 	updateProgress(show: boolean) {

diff --git a/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css b/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css
@@ -13,14 +13,16 @@
 
 .monaco-workbench .inline-chat {
 	color: inherit;
-	padding: 0 8px;
 	border-radius: 4px;
 	border: 1px solid var(--vscode-inlineChat-border);
 	box-shadow: 0 2px 4px 0 var(--vscode-widget-shadow);
-	margin-top: 8px;
 	background: var(--vscode-inlineChat-background);
 }
 
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part {
+	padding: 4px 6px 0 6px;
+}
+
 .monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part .interactive-execute-toolbar {
 	margin-bottom: 1px;
 }
@@ -35,8 +37,10 @@
 }
 
 .monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact {
-	padding: 2px 0;
 	gap: 6px;
+	padding-top: 2px;
+	padding-right: 20px;
+	padding-left: 6px;
 }
 
 .monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact .header .avatar {
@@ -53,6 +57,10 @@
 	border: none;
 }
 
+.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.minimal > .header {
+	right: 10px;
+}
+
 /* progress bit */
 
 .monaco-workbench .inline-chat .progress {
@@ -66,10 +74,11 @@
 
 /* status */
 
-.monaco-workbench .inline-chat .status {
+.monaco-workbench .inline-chat > .status {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	padding: 4px 6px 0 6px
 }
 
 .monaco-workbench .inline-chat .status .actions.hidden {
@@ -147,7 +156,6 @@
 
 	display: flex;
 	height: 18px;
-	padding: 3px 0; /* makes space for action focus borders: https://github.com/microsoft/vscode-copilot/issues/5814 */
 
 	.actions-container {
 		gap: 3px

diff --git a/src/vs/workbench/contrib/inlineChat/browser/media/inlineChatContentWidget.css b/src/vs/workbench/contrib/inlineChat/browser/media/inlineChatContentWidget.css
@@ -5,7 +5,7 @@
 
 .monaco-workbench .inline-chat-content-widget {
 	z-index: 50;
-	padding: 6px 6px 0px 6px;
+	padding: 6px;
 	border-radius: 4px;
 	background-color: var(--vscode-inlineChat-background);
 	box-shadow: 0 4px 8px var(--vscode-inlineChat-shadow);
@@ -23,3 +23,8 @@
 .monaco-workbench .inline-chat-content-widget.interactive-session .interactive-input-part.compact {
 	padding: 0;
 }
+
+.monaco-workbench .inline-chat-content-widget.interactive-session .toolbar {
+	display: none;
+	padding-top: 4px;
+}
diff --git a/src/vs/workbench/contrib/notebook/browser/controller/chat/cellChatActions.ts b/src/vs/workbench/contrib/notebook/browser/controller/chat/cellChatActions.ts
@@ -258,7 +258,7 @@ registerAction2(class extends NotebookAction {
 				menu: [
 					{
 						id: MENU_CELL_CHAT_WIDGET_STATUS,
-						group: 'inline',
+						group: '0_main',
 						order: 0,
 						when: CTX_INLINE_CHAT_RESPONSE_TYPE.notEqualsTo(InlineChatResponseType.Messages),
 					}
@@ -286,7 +286,7 @@ registerAction2(class extends NotebookAction {
 				},
 				menu: {
 					id: MENU_CELL_CHAT_WIDGET_STATUS,
-					group: 'main',
+					group: '0_main',
 					order: 1
 				},
 				f1: false