styling update

Author: rebornix

src/vs/workbench/contrib/notebook/browser/media/notebookCellChat.css

@@ -2,6 +2,15 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
+
+.monaco-workbench .notebookOverlay .cell-chat-part {
+	display: none;
+	color: inherit;
+	padding: 6px;
+	border-radius: 6px;
+	border: 1px solid var(--vscode-inlineChat-border);
+	background: var(--vscode-inlineChat-background);
+}
 .monaco-workbench .notebookOverlay .cell-chat-part .cell-chat-container {
 	padding: 8px 12px 0px 8px;
 }

src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts

@@ -235,7 +235,7 @@ export interface ICellViewModel extends IGenericCellViewModel {
 	readonly model: NotebookCellTextModel;
 	readonly id: string;
 	readonly textBuffer: IReadonlyTextBuffer;
-	readonly layoutInfo: { totalHeight: number; bottomToolbarOffset: number; editorWidth: number; editorHeight: number; statusBarHeight: number };
+	readonly layoutInfo: { totalHeight: number; bottomToolbarOffset: number; editorWidth: number; editorHeight: number; statusBarHeight: number; chatHeight: number };
 	readonly onDidChangeLayout: Event<ICommonCellViewModelLayoutChangeInfo>;
 	readonly onDidChangeCellStatusBarItems: Event<void>;
 	readonly onCellDecorationsChanged: Event<{ added: INotebookCellDecorationOptions[]; removed: INotebookCellDecorationOptions[] }>;

src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

@@ -860,6 +860,13 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 		}
 		`);
 
+		// chat
+		styleSheets.push(`
+		.monaco-workbench .notebookOverlay .cell-chat-part {
+			margin: 0 ${cellRightMargin}px 8px 6px;
+		}
+		`);
+
 		this._styleElement.textContent = styleSheets.join('\n');
 	}
 

src/vs/workbench/contrib/notebook/browser/view/cellParts/cellExecution.ts

@@ -78,7 +78,7 @@ export class CellExecutionPart extends CellContentPart {
 			DOM.hide(this._executionOrderLabel);
 		} else {
 			DOM.show(this._executionOrderLabel);
-			const top = element.layoutInfo.editorHeight - 22 + element.layoutInfo.statusBarHeight;
+			const top = element.layoutInfo.editorHeight - 22 + element.layoutInfo.statusBarHeight + element.layoutInfo.chatHeight;
 			this._executionOrderLabel.style.top = `${top}px`;
 		}
 	}

src/vs/workbench/contrib/notebook/browser/view/cellParts/cellFocusIndicator.ts

@@ -80,14 +80,16 @@ export class CellFocusIndicator extends CellContentPart {
 			this.bottom.domNode.style.transform = `translateY(${indicatorPostion.bottomIndicatorTop}px)`;
 			this.left.setHeight(indicatorPostion.verticalIndicatorHeight);
 			this.right.setHeight(indicatorPostion.verticalIndicatorHeight);
-			this.codeFocusIndicator.setHeight(indicatorPostion.verticalIndicatorHeight - this.getIndicatorTopMargin() * 2);
+			this.codeFocusIndicator.setTop(element.layoutInfo.chatHeight);
+			this.codeFocusIndicator.setHeight(indicatorPostion.verticalIndicatorHeight - this.getIndicatorTopMargin() * 2 - element.layoutInfo.chatHeight);
 		} else {
 			const cell = element as CodeCellViewModel;
 			const layoutInfo = this.notebookEditor.notebookOptions.getLayoutConfiguration();
 			const bottomToolbarDimensions = this.notebookEditor.notebookOptions.computeBottomToolbarDimensions(this.notebookEditor.textModel?.viewType);
 			const indicatorHeight = cell.layoutInfo.codeIndicatorHeight + cell.layoutInfo.outputIndicatorHeight + cell.layoutInfo.commentHeight;
 			this.left.setHeight(indicatorHeight);
 			this.right.setHeight(indicatorHeight);
+			this.codeFocusIndicator.setTop(cell.layoutInfo.chatHeight);
 			this.codeFocusIndicator.setHeight(cell.layoutInfo.codeIndicatorHeight);
 			this.outputFocusIndicator.setHeight(Math.max(cell.layoutInfo.outputIndicatorHeight - cell.viewContext.notebookOptions.getLayoutConfiguration().focusIndicatorGap, 0));
 			this.bottom.domNode.style.transform = `translateY(${cell.layoutInfo.totalHeight - bottomToolbarDimensions.bottomToolbarGap - layoutInfo.cellBottomMargin}px)`;

src/vs/workbench/contrib/notebook/browser/view/cellParts/chat/cellChatController.ts

@@ -444,7 +444,7 @@ registerAction2(class extends NotebookCellAction {
 		if (!newCell) {
 			return;
 		}
-		await context.notebookEditor.focusNotebookCell(newCell, 'editor');
+		await context.notebookEditor.focusNotebookCell(newCell, 'container');
 		const ctrl = NotebookCellChatController.get(newCell);
 		if (!ctrl) {
 			return;

src/vs/workbench/contrib/notebook/browser/view/cellParts/chat/cellChatWidget.ts

@@ -63,7 +63,7 @@ export class CellChatWidget extends Disposable {
 
 	constructor(
 		private readonly _notebookEditor: INotebookEditorDelegate,
-		_partContainer: HTMLElement,
+		private readonly _partContainer: HTMLElement,
 		@IModelService private readonly _modelService: IModelService,
 		@IInstantiationService private readonly _instantiationService: IInstantiationService,
 		@IContextKeyService private readonly _contextKeyService: IContextKeyService
@@ -130,7 +130,7 @@ export class CellChatWidget extends Disposable {
 	}
 
 	show(element: ICellViewModel) {
-		this._elements.root.style.display = 'block';
+		this._partContainer.style.display = 'block';
 
 		this._activeCell = element;
 
@@ -143,11 +143,11 @@ export class CellChatWidget extends Disposable {
 
 		this.layout();
 		this._inputEditor.focus();
-		this._activeCell.chatHeight = 62;
+		this._activeCell.chatHeight = 82 + 8 /* bottom margin*/;
 	}
 
 	hide() {
-		this._elements.root.style.display = 'none';
+		this._partContainer.style.display = 'none';
 		if (this._activeCell) {
 			this._activeCell.chatHeight = 0;
 		}

src/vs/workbench/contrib/notebook/browser/view/cellParts/codeCell.ts

@@ -346,7 +346,7 @@ export class CodeCell extends Disposable {
 			this.templateData.editor?.focus();
 		}
 
-		this.templateData.container.classList.toggle('cell-editor-focus', this.viewCell.focusMode === CellFocusMode.Editor || this.viewCell.focusMode === CellFocusMode.ChatInput);
+		this.templateData.container.classList.toggle('cell-editor-focus', this.viewCell.focusMode === CellFocusMode.Editor);
 		this.templateData.container.classList.toggle('cell-output-focus', this.viewCell.focusMode === CellFocusMode.Output);
 	}
 

src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

@@ -260,14 +260,14 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 
 		// This is also the drag handle
 		const focusIndicatorLeft = new FastDomNode(DOM.append(container, DOM.$('.cell-focus-indicator.cell-focus-indicator-side.cell-focus-indicator-left')));
+		const cellChatPart = DOM.append(container, $('.cell-chat-part'));
 		const cellContainer = DOM.append(container, $('.cell.code'));
 		const runButtonContainer = DOM.append(cellContainer, $('.run-button-container'));
 		const cellInputCollapsedContainer = DOM.append(cellContainer, $('.input-collapse-container'));
 		cellInputCollapsedContainer.style.display = 'none';
 		const executionOrderLabel = DOM.append(focusIndicatorLeft.domNode, $('div.execution-count-label'));
 		executionOrderLabel.title = localize('cellExecutionOrderCountLabel', 'Execution Order');
 		const editorPart = DOM.append(cellContainer, $('.cell-editor-part'));
-		const cellChatPart = DOM.append(editorPart, $('.cell-chat-part'));
 		const editorContainer = DOM.append(editorPart, $('.cell-editor-container'));
 		const cellCommentPartContainer = DOM.append(container, $('.cell-comment-container'));
 

src/vs/workbench/contrib/notebook/browser/viewModel/codeCellViewModel.ts

@@ -253,7 +253,7 @@ export class CodeCellViewModel extends BaseCellViewModel implements ICellViewMod
 			}
 
 			const statusBarHeight = this.viewContext.notebookOptions.computeEditorStatusbarHeight(this.internalMetadata, this.uri);
-			const codeIndicatorHeight = chatHeight + editorHeight + statusBarHeight;
+			const codeIndicatorHeight = editorHeight + statusBarHeight;
 			const outputIndicatorHeight = outputTotalHeight + outputShowMoreContainerHeight;
 			const outputContainerOffset = notebookLayoutConfiguration.editorToolbarHeight
 				+ notebookLayoutConfiguration.cellTopMargin // CELL_TOP_MARGIN