Chat - add fontSize and fontFamily settings (microsoft#263299)

* Chat - add fontSize and fontFamily settings

* Chat - add fontSize and fontFamily settings

Author: lszomoru

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

@@ -54,6 +54,8 @@
 		"--vscode-chat-avatarForeground",
 		"--vscode-chat-checkpointSeparator",
 		"--vscode-chat-editedFileForeground",
+		"--vscode-chat-font-family",
+		"--vscode-chat-font-size",
 		"--vscode-chat-linesAddedForeground",
 		"--vscode-chat-linesRemovedForeground",
 		"--vscode-chat-requestBackground",
@@ -965,4 +967,4 @@
 		"--animation-opacity",
 		"--chat-setup-dialog-glow-angle"
 	]
-}
+}

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

@@ -127,6 +127,18 @@ configurationRegistry.registerConfiguration({
 	title: nls.localize('interactiveSessionConfigurationTitle', "Chat"),
 	type: 'object',
 	properties: {
+		'chat.fontSize': {
+			type: 'number',
+			description: nls.localize('chat.fontSize', "Controls the font size in pixels in chat messages."),
+			default: 13,
+			minimum: 13,
+			maximum: 100
+		},
+		'chat.fontFamily': {
+			type: 'string',
+			description: nls.localize('chat.fontFamily', "Controls the font family in chat messages."),
+			default: 'default'
+		},
 		'chat.editor.fontSize': {
 			type: 'number',
 			description: nls.localize('interactiveSession.editor.fontSize', "Controls the font size in pixels in chat codeblocks."),

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

@@ -35,7 +35,7 @@ import { IInstantiationService } from '../../../../platform/instantiation/common
 import { ServiceCollection } from '../../../../platform/instantiation/common/serviceCollection.js';
 import { WorkbenchObjectTree } from '../../../../platform/list/browser/listService.js';
 import { ILogService } from '../../../../platform/log/common/log.js';
-import { bindContextKey } from '../../../../platform/observable/common/platformObservableUtils.js';
+import { bindContextKey, observableConfigValue } from '../../../../platform/observable/common/platformObservableUtils.js';
 import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
 import { buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground } from '../../../../platform/theme/common/colorRegistry.js';
 import { asCssVariable } from '../../../../platform/theme/common/colorUtils.js';
@@ -604,6 +604,17 @@ export class ChatWidget extends Disposable implements IChatWidget {
 			this.scrollToEnd();
 		}));
 
+		const chatFontSize = observableConfigValue<number>('chat.fontSize', 13, this.configurationService);
+		const chatFontFamily = observableConfigValue<string>('chat.fontFamily', 'default', this.configurationService);
+
+		this._register(autorun(r => {
+			const fontSize = chatFontSize.read(r);
+			const fontFamily = chatFontFamily.read(r);
+
+			this.container.style.setProperty('--vscode-chat-font-family', fontFamily === 'default' ? null : fontFamily);
+			this.container.style.setProperty('--vscode-chat-font-size', `${fontSize}px`);
+		}));
+
 		this._register(this.editorOptions.onDidChange(() => this.onDidStyleChange()));
 		this.onDidStyleChange();
 

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

@@ -334,30 +334,33 @@
 }
 
 .interactive-item-container .value .rendered-markdown h1 {
-	font-size: 20px;
+	font-size: calc(var(--vscode-chat-font-size, 13px) * 1.54); /* 20px when base is 13px */
 	font-weight: 600;
 	margin: 16px 0 8px 0;
+	font-family: var(--vscode-chat-font-family, inherit);
 
 }
 
 .interactive-item-container .value .rendered-markdown h2 {
-	font-size: 16px;
+	font-size: calc(var(--vscode-chat-font-size, 13px) * 1.23); /* 16px when base is 13px */
 	font-weight: 600;
 	margin: 16px 0 8px 0;
+	font-family: var(--vscode-chat-font-family, inherit);
 }
 
 .interactive-item-container .value .rendered-markdown h3 {
-	font-size: 14px;
+	font-size: calc(var(--vscode-chat-font-size, 13px) * 1.08); /* 14px when base is 13px */
 	font-weight: 600;
 	margin: 16px 0 8px 0;
+	font-family: var(--vscode-chat-font-family, inherit);
 }
 
 .interactive-item-container.editing-session .value .rendered-markdown p:has(+ [data-code] > .chat-codeblock-pill-widget) {
 	margin-bottom: 8px;
 }
 
 .interactive-item-container.editing-session .value .rendered-markdown h3 {
-	font-size: 13px;
+	font-size: var(--vscode-chat-font-size, 13px);
 	margin: 0 0 8px 0;
 	font-weight: unset;
 }
@@ -414,7 +417,10 @@
 }
 
 .interactive-item-container .value .rendered-markdown {
+	letter-spacing: 0.01em;
 	line-height: 1.5em;
+	font-size: var(--vscode-chat-font-size, 13px);
+	font-family: var(--vscode-chat-font-family, inherit);
 }
 
 .interactive-item-container .value > .rendered-markdown p {
@@ -589,7 +595,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
 	.monaco-tokenized-source,
 	code {
 		font-family: var(--monaco-monospace-font);
-		font-size: 12px;
+		font-size: calc(var(--vscode-chat-font-size, 13px) * 0.92); /* 12px when base is 13px */
 		color: var(--vscode-textPreformat-foreground);
 		background-color: var(--vscode-textPreformat-background);
 		padding: 1px 3px;