better handling of editor width in request bubbles (microsoft#249923)

Author: justschen

src/vs/workbench/contrib/chat/browser/chatContentParts/chatMarkdownContentPart.ts

@@ -248,10 +248,10 @@ export class ChatMarkdownContentPart extends Disposable implements IChatContentP
 			|| this.codeblocks.at(-1)?.isStreaming && this.codeblocks.at(-1)?.codemapperUri !== undefined && other.content.value.lastIndexOf('```') === this.markdown.content.value.lastIndexOf('```'));
 	}
 
-	layout(width: number): void {
+	layout(width: number, isRequest: boolean): void {
 		this.allRefs.forEach((ref, index) => {
 			if (ref.object instanceof CodeBlockPart) {
-				ref.object.layout(width);
+				ref.object.layout(width, isRequest);
 			} else if (ref.object instanceof CollapsedCodeBlock) {
 				const codeblockModel = this.codeblocks[index];
 				if (codeblockModel.codemapperUri && ref.object.uri?.toString() !== codeblockModel.codemapperUri.toString()) {

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

@@ -1131,7 +1131,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
 		const codeBlockStartIndex = this.getCodeBlockStartIndex(context);
 		const markdownPart = templateData.instantiationService.createInstance(ChatMarkdownContentPart, markdown, context, this._editorPool, fillInIncompleteTokens, codeBlockStartIndex, this.renderer, this._currentLayoutWidth, this.codeBlockModelCollection, {});
 		markdownPart.addDisposable(markdownPart.onDidChangeHeight(() => {
-			markdownPart.layout(this._currentLayoutWidth);
+			markdownPart.layout(this._currentLayoutWidth, isRequestVM(element));
 			this.updateItemHeight(templateData);
 		}));
 

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

@@ -172,8 +172,3 @@
 .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/codeBlockPart.ts

@@ -64,7 +64,7 @@ import { getSimpleEditorOptions } from '../../codeEditor/browser/simpleEditorOpt
 import { IMarkdownVulnerability } from '../common/annotations.js';
 import { ChatContextKeys } from '../common/chatContextKeys.js';
 import { IChatResponseModel, IChatTextEditGroup } from '../common/chatModel.js';
-import { IChatResponseViewModel, isResponseVM } from '../common/chatViewModel.js';
+import { IChatResponseViewModel, isRequestVM, isResponseVM } from '../common/chatViewModel.js';
 import { ChatTreeItem } from './chat.js';
 import { IChatRendererDelegate } from './chatListRenderer.js';
 import { ChatEditorOptions } from './chatOptions.js';
@@ -370,7 +370,7 @@ export class CodeBlockPart extends Disposable {
 		};
 	}
 
-	layout(width: number): void {
+	layout(width: number, isRequest?: boolean): void {
 		const contentHeight = this.getContentHeight();
 
 		let height = contentHeight;
@@ -380,7 +380,7 @@ export class CodeBlockPart extends Disposable {
 
 		const editorBorder = 2;
 		width = width - editorBorder - (this.currentCodeBlockData?.renderOptions?.reserveWidth ?? 0);
-		this.editor.layout({ width, height });
+		this.editor.layout({ width: isRequest ? width * 0.9 : width, height });
 		this.updatePaddingForLayout();
 	}
 
@@ -402,7 +402,7 @@ export class CodeBlockPart extends Disposable {
 		if (this.getEditorOptionsFromConfig().wordWrap === 'on') {
 			// Initialize the editor with the new proper width so that getContentHeight
 			// will be computed correctly in the next call to layout()
-			this.layout(width);
+			this.layout(width, isRequestVM(data.element));
 		}
 
 		await this.updateEditor(data);
@@ -419,7 +419,7 @@ export class CodeBlockPart extends Disposable {
 				ariaLabel: localize('chat.codeBlockLabel', "Code block {0}", data.codeBlockIndex + 1),
 			});
 		}
-		this.layout(width);
+		this.layout(width, isRequestVM(data.element));
 		this.toolbar.setAriaLabel(localize('chat.codeBlockToolbarLabel', "Code block {0}", data.codeBlockIndex + 1));
 		if (data.renderOptions?.hideToolbar) {
 			dom.hide(this.toolbar.getElement());