chat: show ask-questions header as title, full question text below with multi-line options#296902
chat: show ask-questions header as title, full question text below with multi-line options#296902digitarald wants to merge 1 commit intomainfrom
Conversation
…th multi-line options
There was a problem hiding this comment.
Pull request overview
This PR improves the vscode_askQuestions tool UI by separating the question display into a two-tier layout: a compact header bar showing the short title parameter, and a separate message body showing the optional message parameter with multi-line and markdown support. Options in the list can now wrap across multiple lines with top-aligned number badges.
Changes:
- Split question rendering into separate header (title) and body (message) sections
- Added support for multi-line option labels with proper badge alignment
- Removed obsolete parentheses-splitting logic for subtitles
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
chatQuestionCarouselPart.ts |
Refactored to render title in header bar and message in separate body element with markdown support; removed parentheses-splitting logic |
chatQuestionCarousel.css |
Adjusted padding for header/footer alignment, added .chat-question-message styles, changed list items to flex-start alignment for multi-line labels |
| // 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); | ||
| } |
There was a problem hiding this comment.
The existing test at line 89-106 in chatQuestionCarouselPart.test.ts expects markdown content to be rendered inside .chat-question-title, but this change moves markdown rendering from message to a new .chat-question-message element. This will cause the test "renders markdown in question message" to fail because it queries for .chat-question-title .rendered-markdown. The test needs to be updated to query .chat-question-message instead when checking markdown rendering.
1 participant
Summary
I keep having long questions and answers where the UI simply hides too much vital information. If questions get complex, we should give them the room they need to be easy to understand and answer.
Before:
After:
Blocker, long answers need scrolling container:
Improves the
vscode_askQuestionstool UI with a clearer two-tier layout:headerparameter as a compact plain-text title (same height as the footer, matching4pxtop/bottom padding)questionparameter text below the header — supports multi-line and markdown, with proper wrappingChanges
chatQuestionCarouselPart.tsquestionText = message ?? titlerendering into two separate elements:question.title→ header bar (plain text),question.message→ new.chat-question-messageblock below header (markdown-aware)chat-question-title-main/chat-question-title-subtitle) — no longer neededchatQuestionCarousel.csspadding-top: 4px; padding-bottom: 4pxto match footer height; removed container'spadding-top.chat-question-messagerule:padding-top: 8px, body-s font,word-wrap: break-word,line-height: 1.4, with.rendered-markdownlink/paragraph stylesalign-items: flex-starton list items for top-aligned badges; label changed fromwhite-space: nowrap/text-overflow: ellipsistoword-wrap: break-word+padding-top: 2px