chat bubbles for requests (microsoft#249681)

* chat style update

* add back css accidentally deleted

* both in text bubbles

* with border and right aligned

* better css for bubbles

* better logic using toggle

* make margins better

* better css

* better scenarios for showing bubbles

* remove unused import

* better code blocks

* move some stuff around

* chat blocks but on right side only

* fix chat rendering code blocks

* pass on no bubbles in inline

* handle bubbles in not inline chat

* add new variables for chat bubbles

* cleanup

Author: justschen

build/lib/stylelint/vscode-known-variables.json

@@ -57,6 +57,8 @@
 		"--vscode-chat-requestBorder",
 		"--vscode-chat-slashCommandBackground",
 		"--vscode-chat-slashCommandForeground",
+		"--vscode-chat-requestCodeBorder",
+		"--vscode-chat-requestBubbleBackground",
 		"--vscode-checkbox-background",
 		"--vscode-checkbox-border",
 		"--vscode-checkbox-disabled-background",

src/vs/workbench/contrib/chat/browser/chatListRenderer.ts

@@ -91,6 +91,7 @@ interface IChatListItemTemplate {
 	renderedParts?: IChatContentPart[];
 	readonly rowContainer: HTMLElement;
 	readonly titleToolbar?: MenuWorkbenchToolBar;
+	readonly header?: HTMLElement;
 	readonly footerToolbar: MenuWorkbenchToolBar;
 	readonly avatarContainer: HTMLElement;
 	readonly username: HTMLElement;
@@ -305,16 +306,6 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 		}
 
 		const header = dom.append(headerParent, $('.header'));
-		const user = dom.append(header, $('.user'));
-		const avatarContainer = dom.append(user, $('.avatar-container'));
-		const username = dom.append(user, $('h3.username'));
-		username.tabIndex = 0;
-		const detailContainer = dom.append(detailContainerParent ?? user, $('span.detail-container'));
-		const detail = dom.append(detailContainer, $('span.detail'));
-		dom.append(detailContainer, $('span.chat-animated-ellipsis'));
-		const value = dom.append(valueParent, $('.value'));
-		const elementDisposables = new DisposableStore();
-
 		const contextKeyService = templateDisposables.add(this.contextKeyService.createScoped(rowContainer));
 		const scopedInstantiationService = templateDisposables.add(this.instantiationService.createChild(new ServiceCollection([IContextKeyService, contextKeyService])));
 
@@ -331,6 +322,17 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 				},
 			}));
 		}
+		const user = dom.append(header, $('.user'));
+		const avatarContainer = dom.append(user, $('.avatar-container'));
+		const username = dom.append(user, $('h3.username'));
+		username.tabIndex = 0;
+		const detailContainer = dom.append(detailContainerParent ?? user, $('span.detail-container'));
+		const detail = dom.append(detailContainer, $('span.detail'));
+		dom.append(detailContainer, $('span.chat-animated-ellipsis'));
+		const value = dom.append(valueParent, $('.value'));
+		const elementDisposables = new DisposableStore();
+
+
 
 		const footerToolbarContainer = dom.append(rowContainer, $('.chat-footer-toolbar'));
 		const footerToolbar = templateDisposables.add(scopedInstantiationService.createInstance(MenuWorkbenchToolBar, footerToolbarContainer, MenuId.ChatMessageFooter, {
@@ -367,7 +369,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 				this.hoverService.hideHover();
 			}
 		}));
-		const template: IChatListItemTemplate = { avatarContainer, username, detail, value, rowContainer, elementDisposables, templateDisposables, contextKeyService, instantiationService: scopedInstantiationService, agentHover, titleToolbar, footerToolbar };
+		const template: IChatListItemTemplate = { header, avatarContainer, username, detail, value, rowContainer, elementDisposables, templateDisposables, contextKeyService, instantiationService: scopedInstantiationService, agentHover, titleToolbar, footerToolbar };
 		return template;
 	}
 
@@ -437,6 +439,10 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 			this.renderConfirmationAction(element, templateData);
 		}
 
+		// TODO: @justschen decide if we want to hide the header for requests or not
+		// const shouldShowHeader = isResponseVM(element) && !this.rendererOptions.noHeader;
+		// templateData.header?.classList.toggle('hidden', !shouldShowHeader);
+
 		// Do a progressive render if
 		// - This the last response in the list
 		// - And it has some content

src/vs/workbench/contrib/chat/browser/codeBlockPart.css

@@ -64,8 +64,15 @@
 }
 
 .interactive-result-code-block {
+	box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.10);
+}
+
+.interactive-session .interactive-request .interactive-result-code-block {
+	border: 1px solid var(--vscode-chat-requestCodeBorder);
+}
+
+.interactive-session .interactive-response .interactive-result-code-block {
 	border: 1px solid var(--vscode-input-border, transparent);
-	background-color: var(--vscode-interactive-result-editor-background-color);
 }
 
 .interactive-result-code-block:has(.monaco-editor.focused) {
@@ -165,3 +172,8 @@
 .interactive-result-code-block.compare.no-diff .interactive-result-editor {
 	display: none;
 }
+
+.interactive-session .interactive-request .value .interactive-result-code-block .monaco-editor .overflow-guard,
+.interactive-session .interactive-request .value .monaco-editor {
+	width: 100% !important;
+}

src/vs/workbench/contrib/chat/browser/media/chat.css

@@ -156,9 +156,9 @@
 	padding: 2px;
 }
 
-.interactive-item-container .header .monaco-toolbar {
+.interactive-item-container.interactive-response .header .monaco-toolbar {
 	position: absolute;
-	right: 0px;
+	left: 0px;
 	background-color: var(--vscode-chat-list-background);
 }
 
@@ -285,7 +285,8 @@
 }
 
 .interactive-item-container .value > :last-child,
-.interactive-item-container .value > :last-child.rendered-markdown > :last-child {
+.interactive-item-container .value > :last-child.rendered-markdown > :last-child,
+.interactive-item-container.interactive-request .value .rendered-markdown > :last-child {
 	margin-bottom: 0px;
 }
 
@@ -1309,18 +1310,10 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	flex-wrap: wrap;
 }
 
-.interactive-session .interactive-item-container.interactive-request .chat-attached-context {
-	margin-top: -8px;
-}
-
 .interactive-session .interactive-item-container.interactive-item-compact.interactive-request .chat-attached-context {
 	margin-top: -4px;
 }
 
-.interactive-session .interactive-item-container.editing-session.interactive-request .chat-attached-context {
-	margin-top: 0px;
-}
-
 .interactive-session .chat-attached-context .chat-attached-context-attachment.implicit {
 	display: flex;
 	gap: 4px;
@@ -1821,9 +1814,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	bottom: 7px;
 	right: 12px;
 	border-radius: 100%;
-	width: initial;
-	width: 27px;
-	height: 27px;
 	width: 27px;
 	height: 27px;
 
@@ -1877,6 +1867,58 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	display: none;
 }
 
+.pane-body,
+.quick-input-html-widget {
+
+	.interactive-item-container.interactive-request {
+		align-items: flex-end;
+		padding-bottom: 0px;
+	}
+
+	.interactive-item-container.interactive-request .value .rendered-markdown {
+		background-color: var(--vscode-chat-requestBubbleBackground);
+		border-radius: 8px;
+		padding: 8px 12px;
+		max-width: 90%;
+		margin-left: auto;
+		width: fit-content;
+		margin-bottom: 5px;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+		position: relative;
+	}
+
+	.interactive-item-container.interactive-request .value .rendered-markdown {
+		margin-left: auto;
+	}
+
+	.interactive-item-container.interactive-request .value .rendered-markdown > :last-child {
+		margin-bottom: 0px;
+	}
+
+	.interactive-item-container.interactive-request .value > .rendered-markdown p {
+		margin-left: auto;
+		width: fit-content;
+	}
+
+	.interactive-session .interactive-item-container.interactive-request .chat-attached-context {
+		margin-top: 10px;
+		max-width: 100%;
+		width: fit-content;
+		justify-content: flex-end;
+		margin-left: auto;
+	}
+
+	.hc-black .interactive-item-container.interactive-request .value,
+	.hc-light .interactive-item-container.interactive-request .value {
+		outline: 1px solid var(--vscode-chat-requestBorder);
+		box-shadow: none;
+	}
+
+	.interactive-session .interactive-request .header.hidden {
+		display: none;
+	}
+}
+
 .chat-buttons-container {
 	display: flex;
 	gap: 8px;

src/vs/workbench/contrib/chat/common/chatColors.ts

@@ -5,7 +5,7 @@
 
 import { Color, RGBA } from '../../../../base/common/color.js';
 import { localize } from '../../../../nls.js';
-import { badgeBackground, badgeForeground, contrastBorder, editorBackground, editorWidgetBackground, foreground, registerColor, transparent } from '../../../../platform/theme/common/colorRegistry.js';
+import { badgeBackground, badgeForeground, contrastBorder, editorBackground, editorSelectionBackground, editorWidgetBackground, foreground, registerColor, transparent } from '../../../../platform/theme/common/colorRegistry.js';
 
 export const chatRequestBorder = registerColor(
 	'chat.requestBorder',
@@ -53,3 +53,7 @@ export const chatEditedFileForeground = registerColor(
 	},
 	localize('chat.editedFileForeground', 'The foreground color of a chat edited file in the edited file list.')
 );
+
+export const chatRequestCodeBorder = registerColor('chat.requestCodeBorder', { dark: '#004972B8', light: '#0e639c40', hcDark: null, hcLight: null }, localize('chat.requestCodeBorder', 'Border color of code blocks within the chat request bubble.'), true);
+
+export const chatRequestBubbleBackground = registerColor('chat.requestBubbleBackground', { light: transparent(editorSelectionBackground, 0.3), dark: transparent(editorSelectionBackground, 0.3), hcDark: null, hcLight: null }, localize('chat.requestBubbleBackground', "Background color of the chat request bubble."), true);