align thinking with tool confirmation (#271282)

This commit is contained in:
Justin Chen
2025-10-14 13:35:48 +02:00
committed by GitHub
parent 79820a886d
commit 443cc8e89f
2 changed files with 24 additions and 33 deletions
@@ -4,6 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { $, clearNode } from '../../../../../base/browser/dom.js';
import * as dom from '../../../../../base/browser/dom.js';
import { IChatThinkingPart } from '../../common/chatService.js';
import { IChatContentPartRenderContext, IChatContentPart } from './chatContentParts.js';
import { IChatRendererContent } from '../../common/chatViewModel.js';
@@ -50,7 +51,7 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
private fixedScrollViewport: HTMLElement | undefined;
private fixedContainer: HTMLElement | undefined;
private headerButton: ButtonWithIcon | undefined;
private caret: HTMLElement | undefined;
private statusIcon: HTMLElement | undefined;
private lastExtractedTitle: string | undefined;
private hasMultipleItems: boolean = false;
@@ -131,9 +132,11 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
const button = this.headerButton = this._register(new ButtonWithIcon(header, {}));
button.label = this.defaultTitle;
button.icon = ThemeIcon.modify(Codicon.loading, 'spin');
this.caret = $('.codicon.codicon-chevron-right.chat-thinking-fixed-caret');
button.element.appendChild(this.caret);
button.icon = Codicon.chevronRight;
this.statusIcon = $('.chat-thinking-fixed-title-icon');
const spinnerEl = dom.h(ThemeIcon.asCSSSelector(ThemeIcon.modify(Codicon.loading, 'spin')));
this.statusIcon.appendChild(spinnerEl.root);
button.element.appendChild(this.statusIcon);
this.fixedScrollViewport = this.wrapper;
this.textContainer = $('.chat-thinking-item.markdown-content');
@@ -166,9 +169,8 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
}
this.fixedCollapsed = collapsed;
this.fixedContainer.classList.toggle('collapsed', collapsed);
if (this.caret) {
this.caret.classList.toggle('codicon-chevron-right', collapsed);
this.caret.classList.toggle('codicon-chevron-down', !collapsed);
if (this.headerButton) {
this.headerButton.icon = collapsed ? Codicon.chevronRight : Codicon.chevronDown;
}
if (this.fixedCollapsed && userInitiated) {
const fixedScrollViewport = this.fixedScrollViewport ?? this.wrapper;
@@ -278,7 +280,11 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
}
if (this.headerButton) {
this.headerButton.label = finalLabel;
this.headerButton.icon = Codicon.passFilled;
}
if (this.statusIcon && this.fixedContainer) {
this.fixedContainer.classList.add('finished');
this.setFixedCollapsedState(true);
this.statusIcon.replaceChildren(dom.h(ThemeIcon.asCSSSelector(Codicon.check)).root);
}
this.currentTitle = finalLabel;
@@ -296,14 +302,8 @@ export class ChatThinkingContentPart extends ChatCollapsibleContentPart implemen
this.currentTitle = suffix;
}
if (this.fixedScrollingMode) {
if (this.fixedContainer) {
this.fixedContainer.classList.add('finished');
this.setFixedCollapsedState(true);
if (this.headerButton) {
this.headerButton.icon = Codicon.passFilled;
}
}
if (!this.fixedScrollingMode && this.statusIcon) {
this.statusIcon.replaceChildren(dom.h(ThemeIcon.asCSSSelector(Codicon.check)).root);
}
}
@@ -2909,8 +2909,8 @@ have to be updated for changes to the rules above, or to support more deeply nes
align-items: center;
gap: 4px;
border: 1px solid var(--vscode-chat-requestBorder);
color: var(--vscode-descriptionForeground);
font-weight: 600;
color: var(--vscode-interactive-session-foreground);
opacity: 0.85;
outline: none;
margin: 3px;
border: none;
@@ -2920,20 +2920,14 @@ have to be updated for changes to the rules above, or to support more deeply nes
outline-offset: -1px;
}
.codicon.chat-thinking-fixed-caret {
.chat-thinking-fixed-title-icon {
font-size: 16px;
margin-left: auto;
font-size: 12px;
line-height: 0;
}
.chat-thinking-fixed-spinner {
font-size: 12px;
opacity: 0.8;
}
/* temp icon while we wait for brain icon */
.chat-thinking-fixed-complete {
font-size: 12px;
color: var(--vscode-testing-iconPassed);
.chat-thinking-fixed-title-icon .codicon-check {
color: var(--vscode-debugIcon-startForeground) !important;
}
.monaco-button {
@@ -2942,7 +2936,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
width: 100%;
border: none;
outline: none;
padding-left: 10px;
padding: 3px 8px;
&:hover {
background: var(--vscode-toolbar-hoverBackground);
@@ -2996,9 +2990,6 @@ have to be updated for changes to the rules above, or to support more deeply nes
display: block;
}
&.finished .chat-thinking-fixed-header .codicon-pass-filled {
display: none;
}
}
/* item and dot rendering */