Add incremental chat rendering experiment (#310801)

Author: pwang347

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

@@ -936,6 +936,8 @@
 		"--background-light",
 		"--chat-editing-last-edit-shift",
 		"--chat-current-response-min-height",
+		"--chat-smooth-delay",
+		"--chat-smooth-duration",
 		"--inline-chat-frame-progress",
 		"--insert-border-color",
 		"--last-tab-margin-right",

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

@@ -349,6 +349,40 @@ configurationRegistry.registerConfiguration({
 			description: nls.localize('chat.experimental.detectParticipant.enabled', "Enables chat participant autodetection for panel chat."),
 			default: null
 		},
+		[ChatConfiguration.IncrementalRendering]: {
+			type: 'boolean',
+			description: nls.localize('chat.experimental.incrementalRendering.enabled', "Enables incremental rendering with optional block-level animation when streaming chat responses."),
+			default: false,
+			tags: ['experimental'],
+		},
+		[ChatConfiguration.IncrementalRenderingStyle]: {
+			type: 'string',
+			enum: ['none', 'fade', 'rise', 'blur', 'scale', 'slide', 'reveal'],
+			enumDescriptions: [
+				nls.localize('chat.experimental.incrementalRendering.animationStyle.none', "No animation. Content appears instantly."),
+				nls.localize('chat.experimental.incrementalRendering.animationStyle.fade', "Simple opacity fade from 0 to 1."),
+				nls.localize('chat.experimental.incrementalRendering.animationStyle.rise', "Content fades in while rising upward."),
+				nls.localize('chat.experimental.incrementalRendering.animationStyle.blur', "Content fades in from a blurred state."),
+				nls.localize('chat.experimental.incrementalRendering.animationStyle.scale', "Content scales up from slightly smaller."),
+				nls.localize('chat.experimental.incrementalRendering.animationStyle.slide', "Content slides in from the left."),
+				nls.localize('chat.experimental.incrementalRendering.animationStyle.reveal', "Content reveals top-to-bottom with a soft gradient edge."),
+			],
+			description: nls.localize('chat.experimental.incrementalRendering.animationStyle', "Controls the animation style for incremental rendering."),
+			default: 'fade',
+			tags: ['experimental'],
+		},
+		[ChatConfiguration.IncrementalRenderingBuffering]: {
+			type: 'string',
+			enum: ['off', 'word', 'paragraph'],
+			enumDescriptions: [
+				nls.localize('chat.experimental.incrementalRendering.buffering.off', "Renders content immediately as tokens arrive."),
+				nls.localize('chat.experimental.incrementalRendering.buffering.word', "Reveals content word by word."),
+				nls.localize('chat.experimental.incrementalRendering.buffering.paragraph', "Buffers content until a paragraph break before rendering."),
+			],
+			description: nls.localize('chat.experimental.incrementalRendering.buffering', "Controls how content is buffered before rendering during incremental rendering. Lower buffering levels render faster but may show incomplete sentences or partially formed markdown."),
+			default: 'word',
+			tags: ['experimental'],
+		},
 		'chat.detectParticipant.enabled': {
 			type: 'boolean',
 			description: nls.localize('chat.detectParticipant.enabled', "Enables chat participant autodetection for panel chat."),

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatIncrementalRendering/animations/animation.ts

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/**
+ * Animation strategy for incremental rendering. Applied as a post-processing
+ * decoration after the markdown has been correctly rendered.
+ *
+ * Animation is separate from buffering — it controls *how* rendered
+ * content appears, while buffering controls *when* we render.
+ */
+export interface IIncrementalRenderingAnimation {
+	/**
+	 * Apply entrance animation to newly appeared DOM children.
+	 *
+	 * @param children The live HTMLCollection of the container's children.
+	 * @param fromIndex Index of the first new child to animate.
+	 * @param currentCount Total number of children currently in the DOM.
+	 * @param elapsed Milliseconds since the animation batch started.
+	 */
+	animate(children: HTMLCollection, fromIndex: number, currentCount: number, elapsed: number): void;
+}

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatIncrementalRendering/animations/animationRegistry.ts

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IIncrementalRenderingAnimation } from './animation.js';
+import { BlockAnimation } from './blockAnimations.js';
+
+/**
+ * Registry of all available animation styles.
+ * To add a new animation, add an entry here.
+ */
+export const ANIMATION_STYLES = {
+	none: (): IIncrementalRenderingAnimation => ({ animate() { } }),
+	fade: (): IIncrementalRenderingAnimation => new BlockAnimation('fade'),
+	rise: (): IIncrementalRenderingAnimation => new BlockAnimation('rise'),
+	blur: (): IIncrementalRenderingAnimation => new BlockAnimation('blur'),
+	scale: (): IIncrementalRenderingAnimation => new BlockAnimation('scale'),
+	slide: (): IIncrementalRenderingAnimation => new BlockAnimation('slide'),
+	reveal: (): IIncrementalRenderingAnimation => new BlockAnimation('reveal'),
+} as const satisfies Record<string, () => IIncrementalRenderingAnimation>;
+
+export type AnimationStyleName = keyof typeof ANIMATION_STYLES;

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatIncrementalRendering/animations/blockAnimations.ts

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IIncrementalRenderingAnimation } from './animation.js';
+
+/** Duration of the animation applied to newly rendered blocks. */
+export const ANIMATION_DURATION_MS = 600;
+
+/**
+ * Delay (ms) between each successive new child's animation start.
+ * Creates a cascading top-to-bottom reveal across a batch of new
+ * block-level elements.
+ */
+const STAGGER_DELAY_MS = 150;
+
+/**
+ * Block-level CSS animation styles: fade, rise, blur, scale, slide,
+ * and lineFade. Each applies a CSS class and staggered timing
+ * variables to new top-level children so they reveal sequentially.
+ */
+export class BlockAnimation implements IIncrementalRenderingAnimation {
+
+	constructor(private readonly _style: 'fade' | 'rise' | 'blur' | 'scale' | 'slide' | 'reveal') { }
+
+	animate(children: HTMLCollection, fromIndex: number, currentCount: number, elapsed: number): void {
+		const className = `chat-smooth-animate-${this._style}`;
+
+		for (let i = fromIndex; i < currentCount; i++) {
+			const child = children[i] as HTMLElement;
+			if (!child.classList) {
+				continue;
+			}
+
+			const staggerOffset = (i - fromIndex) * STAGGER_DELAY_MS;
+			const childDelay = -elapsed + staggerOffset;
+
+			child.classList.add(className);
+			child.style.setProperty('--chat-smooth-duration', `${ANIMATION_DURATION_MS}ms`);
+			child.style.setProperty('--chat-smooth-delay', `${childDelay}ms`);
+
+			child.addEventListener('animationend', (e) => {
+				if (e.target !== child) {
+					return;
+				}
+				child.classList.remove(className);
+				child.style.removeProperty('--chat-smooth-duration');
+				child.style.removeProperty('--chat-smooth-delay');
+			}, { once: true });
+		}
+	}
+}

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatIncrementalRendering/buffers/buffer.ts

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/**
+ * A buffering strategy determines how much incoming markdown content
+ * must accumulate before a render is triggered.
+ *
+ * Buffering is separate from animation — it controls *when* we render,
+ * while animation controls *how* rendered content appears.
+ */
+export interface IIncrementalRenderingBuffer {
+	/**
+	 * Given the full markdown string and the markdown that was last
+	 * rendered to the real DOM, return `true` if the buffer should
+	 * be handled entirely within _flushRender (e.g. shadow measurement).
+	 * In that case the orchestrator should pass everything through
+	 * without updating `_renderedMarkdown`.
+	 */
+	readonly handlesFlush: boolean;
+
+	/**
+	 * Determine the renderable prefix of `fullMarkdown`. The returned
+	 * string must be a prefix of `fullMarkdown` (or `fullMarkdown`
+	 * itself). Content beyond the returned prefix stays buffered.
+	 *
+	 * @param fullMarkdown The complete markdown accumulated so far.
+	 * @param lastRendered The markdown last rendered to the DOM.
+	 * @returns The prefix to render now.
+	 */
+	getRenderable(fullMarkdown: string, lastRendered: string): string;
+
+	/**
+	 * For buffers that handle flushing themselves (e.g. line buffer
+	 * with shadow DOM measurement), this is called during
+	 * `_flushRender` to decide whether to commit the pending content.
+	 *
+	 * @param markdown The pending markdown to potentially commit.
+	 * @returns The markdown to actually commit, or `undefined` to skip.
+	 */
+	filterFlush?(markdown: string): string | undefined;
+
+	/**
+	 * Whether the buffer needs another rAF frame to continue revealing
+	 * content (e.g. typewriter drip-feeding words). When `true`, the
+	 * orchestrator re-schedules a render after the current flush.
+	 */
+	readonly needsNextFrame?: boolean;
+
+	/**
+	 * Called when the buffer is no longer needed.
+	 */
+	dispose?(): void;
+}

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatIncrementalRendering/buffers/bufferRegistry.ts

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IIncrementalRenderingBuffer } from './buffer.js';
+import { OffBuffer } from './offBuffer.js';
+import { ParagraphBuffer } from './paragraphBuffer.js';
+import { WordBuffer } from './wordBuffer.js';
+
+/**
+ * Registry of all available buffering strategies.
+ * To add a new buffer, add an entry here.
+ */
+export const BUFFER_MODES = {
+	off: (_domNode: HTMLElement): IIncrementalRenderingBuffer => new OffBuffer(),
+	word: (_domNode: HTMLElement): IIncrementalRenderingBuffer => new WordBuffer(),
+	paragraph: (_domNode: HTMLElement): IIncrementalRenderingBuffer => new ParagraphBuffer(),
+} as const satisfies Record<string, (domNode: HTMLElement) => IIncrementalRenderingBuffer>;
+
+export type BufferModeName = keyof typeof BUFFER_MODES;

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatIncrementalRendering/buffers/offBuffer.ts

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IIncrementalRenderingBuffer } from './buffer.js';
+
+/**
+ * No buffering — renders everything immediately as tokens arrive.
+ * Content is still rAF-coalesced by the orchestrator.
+ */
+export class OffBuffer implements IIncrementalRenderingBuffer {
+	readonly handlesFlush = false;
+
+	getRenderable(fullMarkdown: string, _lastRendered: string): string {
+		return fullMarkdown;
+	}
+}

src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatIncrementalRendering/buffers/paragraphBuffer.ts

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IIncrementalRenderingBuffer } from './buffer.js';
+
+/**
+ * Maximum number of characters that may accumulate beyond the last
+ * paragraph boundary before a render is forced.
+ */
+const MAX_BUFFERED_CHARS = 4000;
+
+/**
+ * Finds the last `\n\n` block boundary that is NOT inside an open
+ * fenced code block. This prevents splitting a render in the middle
+ * of a code fence, which would cause the code block element to update
+ * in place (same DOM index) without triggering a new-child animation.
+ *
+ * The scan counts backtick-fence openings/closings from the start of
+ * the string. A `\n\n` is only a valid boundary when the fence depth
+ * is 0 (i.e. outside any code block).
+ *
+ * @internal Exported for testing.
+ */
+export function lastBlockBoundary(text: string): number {
+	let lastValid = -1;
+	let inFence = false;
+
+	for (let i = 0; i < text.length; i++) {
+		// Detect fenced code blocks: ``` or ~~~ at the start of a line.
+		if ((i === 0 || text[i - 1] === '\n') &&
+			((text[i] === '`' && text[i + 1] === '`' && text[i + 2] === '`') ||
+				(text[i] === '~' && text[i + 1] === '~' && text[i + 2] === '~'))) {
+			inFence = !inFence;
+			i += 2; // skip past the triple backtick/tilde
+			continue;
+		}
+		// Detect block boundary outside code fences.
+		if (!inFence && text[i] === '\n' && text[i + 1] === '\n') {
+			lastValid = i;
+		}
+	}
+
+	return lastValid;
+}
+
+/**
+ * Buffers content at paragraph boundaries (`\n\n` outside code fences).
+ * This avoids rendering partially formed blocks — text mid-paragraph,
+ * incomplete list groups, or half a code fence.
+ */
+export class ParagraphBuffer implements IIncrementalRenderingBuffer {
+	readonly handlesFlush = false;
+
+	getRenderable(fullMarkdown: string, lastRendered: string): string {
+		const lastBlock = lastBlockBoundary(fullMarkdown);
+		let renderable = lastBlock === -1
+			? lastRendered   // no complete block yet — keep current
+			: fullMarkdown.slice(0, lastBlock + 2);
+
+		// Escape hatch: if too much content has accumulated without a
+		// block boundary, render what we have.
+		if (fullMarkdown.length - renderable.length > MAX_BUFFERED_CHARS) {
+			renderable = fullMarkdown;
+		}
+
+		return renderable;
+	}
+}