chat: show ask-questions header as title, full question text below with multi-line options (#296902)

Author: digitarald

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatQuestionCarouselPart.ts

@@ -489,11 +489,10 @@ export class ChatQuestionCarouselPart extends Disposable implements IChatContent
 		// Render question header row with title and close button
 		const headerRow = dom.$('.chat-question-header-row');
 
-		// Render question message with title styling (no progress prefix)
-		// Fall back to question.title if message is not provided
-		const questionText = question.message ?? question.title;
-		if (questionText) {
+		// Render question title (short header) in the header bar as plain text
+		if (question.title) {
 			const title = dom.$('.chat-question-title');
+			const questionText = question.title;
 			const messageContent = this.getQuestionText(questionText);
 
 			title.setAttribute('aria-label', messageContent);
@@ -529,6 +528,18 @@ export class ChatQuestionCarouselPart extends Disposable implements IChatContent
 
 		this._questionContainer.appendChild(headerRow);
 
+		// Render full question text below the header row (supports multi-line and markdown)
+		if (question.message) {
+			const messageEl = dom.$('.chat-question-message');
+			if (isMarkdownString(question.message)) {
+				const renderedMessage = questionRenderStore.add(this._markdownRendererService.render(MarkdownString.lift(question.message)));
+				messageEl.appendChild(renderedMessage.element);
+			} else {
+				messageEl.textContent = this.getQuestionText(question.message);
+			}
+			this._questionContainer.appendChild(messageEl);
+		}
+
 		const isSingleQuestion = this.carousel.questions.length === 1;
 		// Update step indicator in footer
 		if (this._stepIndicator) {

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatQuestionCarousel.css

@@ -43,38 +43,44 @@
 
 	.chat-question-header-row {
 		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 8px;
-		min-width: 0;
-		padding-bottom: 5px;
-		margin-left: -16px;
-		margin-right: -16px;
-		padding-left: 16px;
-		padding-right: 16px;
-		border-bottom: 1px solid var(--vscode-chat-requestBorder);
+		flex-direction: column;
+		background: var(--vscode-chat-requestBackground);
+		padding: 0 16px 10px 16px;
+		overflow: hidden;
 
 		.chat-question-title {
 			flex: 1;
 			min-width: 0;
-			word-wrap: break-word;
-			overflow-wrap: break-word;
-			font-weight: 500;
-			font-size: var(--vscode-chat-font-size-body-s);
-			margin: 0;
+			padding-top: 4px;
+			padding-bottom: 4px;
+			margin-left: -16px;
+			margin-right: -16px;
+			padding-left: 16px;
+			padding-right: 16px;
+			border-bottom: 1px solid var(--vscode-chat-requestBorder);
+
+			.chat-question-title {
+				flex: 1;
+				min-width: 0;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				font-weight: 500;
+				font-size: var(--vscode-chat-font-size-body-s);
+				margin: 0;
 
-			.rendered-markdown {
-				a {
-					color: var(--vscode-textLink-foreground);
-				}
+				.rendered-markdown {
+					a {
+						color: var(--vscode-textLink-foreground);
+					}
 
-				a:hover,
-				a:active {
-					color: var(--vscode-textLink-activeForeground);
-				}
+					a:hover,
+					a:active {
+						color: var(--vscode-textLink-activeForeground);
+					}
 
-				p {
-					margin: 0;
+					p {
+						margin: 0;
+					}
 				}
 			}
 
@@ -105,6 +111,29 @@
 				background: var(--vscode-toolbar-hoverBackground) !important;
 			}
 		}
+
+		.chat-question-message {
+			padding-top: 8px;
+			font-size: var(--vscode-chat-font-size-body-s);
+			word-wrap: break-word;
+			overflow-wrap: break-word;
+			line-height: 1.4;
+
+			.rendered-markdown {
+				a {
+					color: var(--vscode-textLink-foreground);
+				}
+
+				a:hover,
+				a:active {
+					color: var(--vscode-textLink-activeForeground);
+				}
+
+				p {
+					margin: 0;
+				}
+			}
+		}
 	}
 }
 
@@ -142,7 +171,7 @@
 
 		.chat-question-list-item {
 			display: flex;
-			align-items: center;
+			align-items: flex-start;
 			gap: 8px;
 			padding: 3px 8px;
 			cursor: pointer;
@@ -167,9 +196,9 @@
 			.chat-question-list-label {
 				font-size: var(--vscode-chat-font-size-body-s);
 				flex: 1;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+				word-wrap: break-word;
+				overflow-wrap: break-word;
+				padding-top: 2px;
 			}
 
 			.chat-question-list-label-title {

src/vs/workbench/contrib/chat/test/browser/widget/chatContentParts/chatQuestionCarouselPart.test.ts

@@ -99,13 +99,15 @@ suite('ChatQuestionCarouselPart', () => {
 
 			const title = widget.domNode.querySelector('.chat-question-title');
 			assert.ok(title, 'title element should exist');
-			assert.ok(title?.querySelector('.rendered-markdown'), 'markdown content should be rendered');
-			assert.strictEqual(title?.textContent?.includes('**details**'), false, 'markdown syntax should not be shown as raw text');
-			const link = title?.querySelector('a') as HTMLAnchorElement | null;
+			const messageEl = widget.domNode.querySelector('.chat-question-message');
+			assert.ok(messageEl, 'message element should exist');
+			assert.ok(messageEl?.querySelector('.rendered-markdown'), 'markdown content should be rendered');
+			assert.strictEqual(messageEl?.textContent?.includes('**details**'), false, 'markdown syntax should not be shown as raw text');
+			const link = messageEl?.querySelector('a') as HTMLAnchorElement | null;
 			assert.ok(link, 'markdown link should render as anchor');
 		});
 
-		test('renders markdown in plain string question message', () => {
+		test('renders plain string question message as text', () => {
 			const carousel = createMockCarousel([
 				{
 					id: 'q1',
@@ -116,12 +118,10 @@ suite('ChatQuestionCarouselPart', () => {
 			]);
 			createWidget(carousel);
 
-			const title = widget.domNode.querySelector('.chat-question-title');
-			assert.ok(title, 'title element should exist');
-			assert.ok(title?.querySelector('.rendered-markdown'), 'markdown content should be rendered for plain string messages');
-			assert.strictEqual(title?.textContent?.includes('**details**'), false, 'markdown syntax should not be shown as raw text');
-			const link = title?.querySelector('a') as HTMLAnchorElement | null;
-			assert.ok(link, 'markdown link should render as anchor');
+			const messageEl = widget.domNode.querySelector('.chat-question-message');
+			assert.ok(messageEl, 'message element should exist');
+			assert.ok(messageEl?.textContent?.includes('details'), 'plain text content should be rendered');
+			assert.strictEqual(messageEl?.querySelector('.rendered-markdown'), null, 'plain string message should not use markdown renderer');
 		});
 
 		test('renders progress indicator correctly', () => {