fix thinking flickering

[justschen]

main branch for #282003

[Copilot]

Pull request overview

This PR fixes flickering issues in the chat thinking content by implementing proper code block rendering during streaming. The changes ensure that code blocks within thinking content are styled consistently and handle incomplete code blocks during streaming.

Key Changes

• Added custom code block renderer (codeBlockRendererSync) to handle streaming code blocks in thinking content
• Implemented logic to detect incomplete code blocks using the codeblockHasClosingBackticks utility
• Added CSS styling for code blocks within thinking content using the [data-code] selector

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/vs/workbench/contrib/chat/browser/chatContentParts/media/chatThinkingContent.css	Added CSS styling for [data-code] elements within thinking markdown content, providing background color, padding, border-radius, and white-space handling
src/vs/workbench/contrib/chat/browser/chatContentParts/chatThinkingContentPart.ts	Imported codeblockHasClosingBackticks utility and implemented custom code block renderer with streaming support, including incomplete code block detection and rendering options

[Copilot]

[nitpick] Consider adding a descendant selector for the code element inside [data-code] to ensure proper styling and prevent potential conflicts with the general code selector. For example:

[data-code] code {
    font-family: var(--monaco-monospace-font);
    font-size: var(--vscode-chat-font-size-body-s);
    color: var(--vscode-textPreformat-foreground);
    background: none;
    padding: 0;
}

This ensures the code element has appropriate typography while the wrapper div handles the background and padding.

Suggested change

	}
	}
	[data-code] code {
	font-family: var(--monaco-monospace-font);
	font-size: var(--vscode-chat-font-size-body-s);
	color: var(--vscode-textPreformat-foreground);
	background: none;
	padding: 0;
	}