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 six 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.
Awaiting you
Frozen aurora edge — rests until accepted or dismissed.
Proposals — accept or dismiss
AiState.Proposed: the AI is done and a human decides. The frozen aurora edge rests until you choose — Accept sends a wave from where you clicked into Generated, Dismiss is the host removing the content. The library never ends a proposal by itself; one DrylAiIndicator announces the count instead of every card announcing itself.
Team sync
Moved from Wednesday — it clashed with a client call.
Focus time
Your calendar has no free block before the deadline.
Call back M. Ortiz
Asked for a reply this week in her last email.
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 AI 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
}