Add streaming token animation to chat #287904
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds a visual animation feature that creates a blur-to-focus effect for tokens as they stream into chat responses, enhancing the user experience during live AI responses.
Changes:
- New streaming token animation module with character-by-character tokenization and staggered animation delays
- Configuration setting
chat.streamingTokenAnimation(default: true) to control the feature - CSS animations with accessibility support via
prefers-reduced-motionmedia query
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/common/constants.ts | Adds StreamingTokenAnimation configuration constant |
| src/vs/workbench/contrib/chat/browser/widget/chatWidget.ts | Implements dynamic CSS class toggling based on configuration changes |
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatMarkdownPart.css | Defines blur-to-focus keyframe animation and responsive styles |
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatStreamingAnimation.ts | Core animation logic including DOM tokenization, node classification, and animation application |
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatMarkdownContentPart.ts | Integrates streaming animation into markdown rendering pipeline |
| src/vs/workbench/contrib/chat/browser/chat.contribution.ts | Registers user-facing configuration setting |
src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatStreamingAnimation.ts
Outdated
Show resolved
Hide resolved
| export function applyStreamingAnimation( | ||
| domNode: HTMLElement, | ||
| element: IChatResponseViewModel, | ||
| enabled: boolean | ||
| ): void { | ||
| if (!enabled || element.isCanceled) { | ||
| return; | ||
| } | ||
|
|
||
| const previouslyAnimatedLength = animatedTextLengths.get(element) ?? 0; | ||
| const currentTextLength = domNode.textContent?.length ?? 0; | ||
| const isLoadingCompletedResponse = element.isComplete && previouslyAnimatedLength === 0; | ||
|
|
||
| if (isLoadingCompletedResponse) { | ||
| // Mark as fully animated so we don't re-check on future renders | ||
| animatedTextLengths.set(element, currentTextLength); | ||
| return; | ||
| } | ||
|
|
||
| if (currentTextLength <= previouslyAnimatedLength) { | ||
| return; // No new content | ||
| } | ||
|
|
||
| const { newTokens, totalTextLength } = tokenizeChatMarkdownDomForStreaming(domNode, element); | ||
| applyStaggeredAnimationDelays(newTokens); | ||
| animatedTextLengths.set(element, totalTextLength); | ||
| } |
There was a problem hiding this comment.
The new streaming animation functionality lacks test coverage. The tokenization logic, node classification, and wrapping behavior in chatStreamingAnimation.ts are testable and should have unit tests, similar to other chat content parts like chatTodoListWidget.test.ts and chatInlineAnchorWidget.test.ts. Consider adding tests for edge cases such as handling elements that span the previously-animated boundary, proper skipping of code blocks, and correct handling of animatable widgets.
There was a problem hiding this comment.
@roblourens / @justschen what do you think on this one? I'm not familiar with the testing patterns we have for this part of the codebase
There was a problem hiding this comment.
Probably copilot could write some reasonable ones :)
Resolves #287175
Adds a smooth blur-to-focus animation effect for new tokens as they stream in during chat responses.
Changes:
chatStreamingAnimation.tsmodule that tokenizes incoming markdown content and applies staggered animation delays to new characterschat.streamingTokenAnimationsetting (enabled by default) to toggle the featureprefers-reduced-motionfor accessibilityWeakMapto avoid re-animating on DOM re-renderschat-motion.mov