Add inline animated text segments with tracked segment support #71
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements opt-in tracked segments for StreamingTextNode that enable inline animations (spinners, timers, etc.) with the ability to replace or remove them later. Key features: - Caller-provided SegmentId (like HTML div IDs) - no ID tracking needed - AppendTracked(id, segment) - append tracked segments with known IDs - Replace(id, segment, keepTracked) - replace with tracked or untracked content - Remove(id) - remove tracked segments - ITextSegment, IAnimatedTextSegment, ICompositeTextSegment interfaces - SpinnerSegment with 6 animation styles (Dots, Line, Arrow, Bounce, Box, Circle) - StaticTextSegment for trackable static text - Single ChatOutput stream handles all operations (append, replace, remove) Updated streaming demo to show inline spinner that appears after "Assistant:" prefix and disappears when first text chunk arrives. This architecture enables any inline animated element (timers, progress bars, blinks, highlighters) with minimal overhead for untracked content.
Replaces ChatTextSegment struct with clean message protocol using IChatMessage interface and sealed record types. This eliminates optional field checking in favor of pattern matching. Message types: - AppendText - regular text with styling - AppendTrackedSegment - tracked segments that can be mutated - RemoveTrackedSegment - remove by ID - ReplaceTrackedSegment - replace with tracked or untracked content Benefits: - Self-describing messages (type indicates intent) - No optional field checking - Clean pattern matching in Page - Better separation of concerns - More extensible for future message types
Added extensive documentation section covering: - Tracked vs untracked segments - Caller-provided IDs (like HTML div IDs) - Static and animated text segments - SpinnerSegment with 6 animation styles - Operations: AppendTracked, Remove, Replace - ID reuse patterns - Real-world chat example with thinking indicator - Custom animated segment implementation - Performance considerations - Use cases (spinners, timers, progress bars, etc.) Organized component sidebar into logical categories: - Display Components - Input Components - Container Components - Reactive Components - Utility Components Updated API Reference with tracked segment methods.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds support for independently animated text elements (spinners, timers, etc.) that appear inline in streaming text and can be replaced or removed later. Implements opt-in tracked segment system with caller-provided IDs.
Key Features
Implementation
New Types
SegmentId- Integer-based value object for segment identifiersITextSegment- Base interface for all text segmentsIAnimatedTextSegment- Interface for animated segments with invalidation eventsStaticTextSegment- Wrapper for static trackable textSpinnerSegment- Animated spinner with 6 styles (Dots, Line, Arrow, Bounce, Box, Circle)Modified Components
StreamingTextNode- Enhanced with tracked segment supportAppendTracked(SegmentId, ITextSegment)- Append tracked segmentRemove(SegmentId)- Remove tracked segmentReplace(SegmentId, ITextSegment, bool keepTracked)- Replace segmentDemo Updates
Documentation
Testing