DrylAiIndicator
AI-aware
DRYL components are designed for seamless AI integration. Set Ai="AiState.X" on any
AI-aware component to mark it as AI-driven — rotating gradient border, breathing glow, one-shot
reveals. Pair it with Microsoft.Extensions.AI tool calling so the UI breathes with
the model.
States — DrylCard with Ai
The same surface in each of the five states. Spotlight disabled so the AI ring is the only signal.
Default
No AI styling.
AI mode on
Persistent ambient border.
Tool call in flight
Faster pulse, brighter glow.
Tokens arriving
Moderate pulse.
Just finished
One-shot accent wash.
Lifecycle simulation
Walk a card through None → Thinking → Streaming → Generated → Active.
Ready when you are.
Press Generate to see the card move through every AI state.
Inputs — DrylInputText & DrylTextarea
The same five states wrapping the form field itself — useful for chat prompts and AI-bound inputs.
Streaming rows — DrylTable with Ai
Stream rows the way a model would: a tool call fires, rows arrive one by one, only new rows animate.
| No leads yet. Click Stream rows to ask the model. |
Buttons — DrylButton with Ai
The AI parameter is additive: the variant's fill stays, a rotating gradient ring is drawn around it.
Expansion panels — DrylExpansion with Ai
Signal that a panel's content was produced by or is waiting on the model. The first panel streams its body in real time.
DrylAiIndicator
Tiny status pill that adapts label and pulse speed to the AI state; announces changes via aria-live.
Integration sketch
Wiring with Microsoft.Extensions.AI.
private AiState _state = AiState.None;
private async Task AskAi()
{
_state = AiState.Thinking;
var response = await chatClient.GetStreamingResponseAsync(prompt);
_state = AiState.Streaming;
await foreach (var chunk in response)
{
_text += chunk.Text;
StateHasChanged();
}
_state = AiState.Generated; // one-shot wash
await Task.Delay(900);
_state = AiState.Active; // settle back to idle AI mode
}