AI
AiAgentRunView
Bit.BlazorUI.AI
BitAiAgentRunView makes a multi-step agent run legible: what it is trying to do, which step it is on, what each step produced and how long it took, what the whole run cost, and what it needs from the user. Every step is visible with its own state and timing, the clock keeps moving while the run does - so a stalled run looks stalled - and a run blocked on the user shows its question with one-tap suggested answers and a field for an answer of the user's own.
Notes
To use this component, you need to install the
Bit.BlazorUI.AI(opens in a new tab)
nuget package, as described in the Optional steps of the
Getting started page.
The view draws a BitAiAgentRun. A BitAiChatSession builds one from the agent events its transport
streams (BitAiAgentRunStartedEvent, BitAiAgentPlanEvent, the step events and
BitAiAgentInputRequestedEvent) and keeps it in Conversation.Runs; an application driving an agent
of its own builds and moves the run in code, as the first examples here do. The view follows the run's own
Changed event, coalesced into one render per frame interval, so nothing has to call StateHasChanged.
Accessibility: the status is a polite live region, the progress bar is named after the plan and read out as a
count of steps, the clock is a timer (read when asked, never every second), and the answer field is named
by the question it answers. See it in a chat in the
Multi-step agent,
Agent asks a question and
Agent failure scenarios.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Hand the view a Run. Here the page drives one itself: a new run is Idle, SetPlan lays out the
steps and moves it to Planning, SetStatus moves it to Running, each step is Started and
then Completed with a summary, and SetStatus ends the run as Completed. The view follows the run
as it changes - the badge says each status, the step that is running pulses, the bar and the count follow the
completed steps, and the clock (which only runs while the run is under way) stops when the run ends.
Failure
A step that fails is completed as Failed with the BitAiError it failed with, and SetError
ends the run as failed and shows the error under the steps, with its detail one click away. The steps the run
will no longer reach are completed as Skipped as it ends.
Cancellation
A run the user stops ends as Cancelled - through SetStatus, or SetError with an error of the
Cancelled kind - and the badge says Stopped: the clock stops, and the steps the run will no longer finish, the
one it was on included, are completed as Skipped. Start the backup and stop it before it ends.
Asking the user
RequestInput blocks the run on a question, with optional suggested answers, and the step running with it.
The view shows them as one-tap buttons beside a field for an answer of the user's own, and hands the answer to
OnRespond; the page then ResolveInputs the run and carries on from the step it stopped at. The
question goes with the answer, and the steps take the focus it had.
With a session
A BitAiChatSession builds the run from the agent events of its transport - here the scripted agents of
this site. Without an OnRespond, an answer goes to the Session (RespondToAgentAsync), which
appends it as a user message and continues the turn, so the transport picks the run up where it stopped. The
Session also lets each step show the tool calls it made by name - the first step of Research
searches the web.
Usage & clock
With ShowUsage on in the BitAiUiOptions in force (cascaded here by a BitAiOptionsProvider,
or registered through ConfigureUi), the header shows the total usage of every model request the run made
(AddUsage), its cost included. ClockInterval sets how often the elapsed time moves while the run
is active (a second by default); nothing ticks once it ends.
Disabled
A Disabled view is drawn dimmed and turns off everything that answers or discloses - the suggested answers,
the answer field and its button, the disclosure of the detail of a failed step and the tool tags of the steps - and
drops the activation handlers the page put on it. The run is still drawn as it goes on: its status, its steps and its
clock.
Deploy agentWaiting for your answer
Ship the release
0 / 2
6ms
- Run the test suite0msFailed3 of 812 tests failed.
- DeployWaiting for you
Three tests of the checkout failed. Deploy anyway?
Cascading parameters
BitParams with a BitAiAgentRunViewParams sets the defaults of every run view inside it - the pace
of the clock and the look - and a view's own value still wins (the second keeps its own Styles). The run,
the session and the callback are never cascaded.
Style & Class
Style and Class reach the root, Styles and Classes every part - the header, the goal,
the progress row, the steps (as a BitAiAgentStepViewClassStyles), the question and its buttons. The public
--bit-AiAgentRunView-* variables re-skin the panel from :root, an ancestor or Style; what it
renders of the library keeps its own (--bit-Tag-*, --bit-Progress-*, --bit-AiAgentStepView-*).
The three views below draw one run: answer it in any of them.
Travel agentWaiting for your answer
Book the team offsite
0 / 2
8ms
- Agree on the datesWaiting for you
- Book the venueNot started
Which week suits the team?
Travel agentWaiting for your answer
Book the team offsite
0 / 2
8ms
- Agree on the datesWaiting for you
- Book the venueNot started
Which week suits the team?
Travel agentWaiting for your answer
Book the team offsite
0 / 2
8ms
- Agree on the datesWaiting for you
- Book the venueNot started
Which week suits the team?
RTL
In right-to-left text the header, the timeline, the progress row and the question are mirrored - whether the
direction comes from Dir or from a dir attribute around the view. The words of the view are the
BitAiStrings of the options in force - here a subclass of them, cascaded by a BitAiOptionsProvider.
دستیار سفرمنتظر پاسخ شما
رزرو سفر کاری تیم
0 از 2
10 میلیثانیه
- توافق بر سر تاریخمنتظر شما
- رزرو محلشروع نشده
کدام هفته برای تیم مناسب است؟
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitAiAgentRunView CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AiAgentRunView-background | var(--bit-clr-bg-sec) | Surface of the panel and its header. |
| --bit-AiAgentRunView-body-background | var(--bit-clr-bg-pri) | Surface of the body under the header. |
| --bit-AiAgentRunView-border-color | var(--bit-clr-brd-sec) | Edge of the panel, and the line under its header. |
| --bit-AiAgentRunView-border-width | var(--bit-shp-brd-width) | Width of that edge and line. |
| --bit-AiAgentRunView-radius | var(--bit-shp-radius-surface) | Corner of the panel. |
| --bit-AiAgentRunView-header-color | var(--bit-clr-fg-sec) | Icon and words of the header. |
| --bit-AiAgentRunView-text-color | var(--bit-clr-fg-sec) | The goal, the count of the steps and the clock. |
| --bit-AiAgentRunView-prompt-background | var(--bit-clr-wrn-tint) | Surface of the question the run asks the user. |
| --bit-AiAgentRunView-progress-max-width | spacing(24) | Width the progress bar stops growing at. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiAgentRunView parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Classes | BitAiAgentRunViewClassStyles? | null | Custom CSS classes for different parts of the agent run view. |
| ClockInterval | TimeSpan | TimeSpan.FromSeconds(1) | How often the elapsed time is refreshed while the run is active. The clock starts with the run and stops the moment it ends (completed, failed or cancelled), so a finished run costs nothing to keep on screen; a new interval takes effect at once, also while the run goes on. Each tick is one coalesced render of the view. |
| OnRespond | EventCallback<string> | The callback for when the user answers the question the run is blocked on - a suggested answer or one typed into the field (Enter or the Answer button). When set, the answer is handed to the callback alone and the Session is not called, so one answer is never delivered twice; the callback is then what resolves the run (ResolveInput) and carries it on. The answer buttons are disabled while it runs. | |
| Run | BitAiAgentRun | The run to render (required). The view subscribes to its Changed event, and re-renders at most once per render interval as it changes, so the run can be moved from any thread without calling StateHasChanged. | |
| Session | BitAiChatSession? | null | The session the run belongs to. Without an OnRespond, an answer is handed to its RespondToAgentAsync, which resolves the run, appends the answer as a user message and continues the turn. Its conversation also lets each step show the tool calls it made by name and status. |
| Styles | BitAiAgentRunViewClassStyles? | null | Custom CSS styles for different parts of the agent run view. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitAiAgentRunViewClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiAgentRunView. |
| Header | string? | null | Custom CSS classes/styles for the header of the BitAiAgentRunView. |
| HeaderIcon | string? | null | Custom CSS classes/styles for the icon of the header of the BitAiAgentRunView. |
| Title | string? | null | Custom CSS classes/styles for the title (the name of the agent, or "Plan") of the BitAiAgentRunView. |
| Usage | BitAiTokenUsageViewClassStyles? | null | Custom CSS classes/styles for the BitAiTokenUsageView of the header of the BitAiAgentRunView. |
| StatusBadge | BitAiAgentStatusBadgeClassStyles? | null | Custom CSS classes/styles for the BitAiAgentStatusBadge of the header of the BitAiAgentRunView. |
| Body | string? | null | Custom CSS classes/styles for the body of the BitAiAgentRunView. |
| Goal | string? | null | Custom CSS classes/styles for the goal of the BitAiAgentRunView. |
| Progress | string? | null | Custom CSS classes/styles for the progress row (the count, the bar and the clock) of the BitAiAgentRunView. |
| Count | string? | null | Custom CSS classes/styles for the count of the completed steps of the BitAiAgentRunView. |
| ProgressBar | BitProgressClassStyles? | null | Custom CSS classes/styles for the BitProgress of the BitAiAgentRunView. |
| Elapsed | string? | null | Custom CSS classes/styles for the elapsed time of the BitAiAgentRunView. |
| Steps | string? | null | Custom CSS classes/styles for the list of the steps of the BitAiAgentRunView, which takes the focus once an answer has taken the question away. |
| StepItem | string? | null | Custom CSS classes/styles for each item of the list of the steps of the BitAiAgentRunView. |
| Step | BitAiAgentStepViewClassStyles? | null | Custom CSS classes/styles for the BitAiAgentStepView of each step of the BitAiAgentRunView. |
| Prompt | string? | null | Custom CSS classes/styles for the prompt (the question the run asks the user, its suggested answers and the answer row) of the BitAiAgentRunView. |
| Question | string? | null | Custom CSS classes/styles for the text of the question of the BitAiAgentRunView. |
| SuggestionButton | BitButtonClassStyles? | null | Custom CSS classes/styles for the BitButton of each suggested answer of the BitAiAgentRunView. |
| Answer | string? | null | Custom CSS classes/styles for the answer row (the field and its button) of the BitAiAgentRunView. |
| AnswerField | BitTextFieldClassStyles? | null | Custom CSS classes/styles for the BitTextField of the answer of the BitAiAgentRunView. |
| AnswerButton | BitButtonClassStyles? | null | Custom CSS classes/styles for the BitButton sending the answer of the BitAiAgentRunView. |
| Error | string? | null | Custom CSS classes/styles for the error (the wrapper of the compact BitAiErrorView of a failed run) of the BitAiAgentRunView. |
BitAiAgentRun properties
A multi-step agent execution: a plan, the steps as they run, and the aggregate result. A BitAiChatSession builds one from the agent events of its transport and keeps it in Conversation.Runs; an application driving an agent of its own creates one with new BitAiAgentRun(runId, agentName) - both optional, a run id is generated when none is given - and moves it with the methods below. Every change raises Changed. Thread-safe to read while it is moved from another thread.
| Name | Type | Default value | Description |
|---|---|---|---|
| RunId | string | The run identifier - the one the agent events address the run by. | |
| AgentName | string? | null | The name of the agent, the title of the run view. The view reads "Plan" (BitAiStrings.Plan) without one. |
| Goal | string? | null | The goal the run is pursuing, shown above the steps. |
| Status | BitAiAgentRunStatus | BitAiAgentRunStatus.Idle | Where the run is in its lifecycle. Moved by SetPlan (Idle to Planning), SetStatus, RequestInput (WaitingForInput), ResolveInput (back to Running) and SetError (Failed or Cancelled). |
| Steps | IReadOnlyList<BitAiAgentStep> | [] | The steps, in execution order. |
| CurrentStep | BitAiAgentStep? | null | The step currently running, else the one blocked on the user, else null. |
| PendingPrompt | string? | null | What the agent is waiting for, while the run is blocked on the user. |
| PendingSuggestions | IReadOnlyList<string>? | null | The suggested answers to PendingPrompt, rendered as one-tap choices. |
| StartedAt | DateTimeOffset | When the run started (when it was created). | |
| CompletedAt | DateTimeOffset? | null | When the run ended: set the first time it moves to Completed, Failed or Cancelled. |
| Elapsed | TimeSpan | How long the run took, or has taken so far. | |
| Usage | BitAiTokenUsage | The token usage of every model request made within the run, each counted once with the last usage its stream reported. Shown in the header of the view when BitAiUiOptions.ShowUsage is on. | |
| Error | BitAiError? | null | The failure that ended the run, when it failed. The view shows it under the steps as a compact BitAiErrorView. |
| CompletedStepCount | int | 0 | How many steps have finished successfully. |
| Progress | double? | null | Completion in the range 0..1 (the completed steps over all of them), or null while there is no plan - in which case the view shows no progress row. |
| Version | int | 0 | Increments on every change, for cheap render checks. |
| Changed | event Action<BitAiAgentRun>? | Raised after the run (or any of its steps) changes. | |
| SetPlan | void | SetPlan(IReadOnlyList<BitAiAgentPlanStep> steps): replaces the plan. A step whose StepId survives the revision keeps its state and timings (its title and detail are updated); a repeated id counts once. Moves an Idle run to Planning. | |
| GetOrAddStep | BitAiAgentStep | GetOrAddStep(string stepId, string? title = null): finds a step, creating it at the end when the agent starts one that was never planned. A title given renames the step. | |
| SetStatus | void | SetStatus(BitAiAgentRunStatus status): moves the run to a new status. Completed, Failed and Cancelled end it: CompletedAt is set and any pending question is cleared. Failed and Cancelled also complete every step the run did not finish (pending, running or blocked) as Skipped. | |
| RequestInput | void | RequestInput(string prompt, IReadOnlyList<string>? suggestions = null): blocks the run on the user until they answer; the run moves to WaitingForInput, and the steps running with it to Blocked. | |
| ResolveInput | void | ResolveInput(): clears the pending question, moves a waiting run back to Running, and starts the blocked steps again (keeping when they first started). | |
| AddUsage | void | AddUsage(BitAiTokenUsage usage): adds the final token usage of one request to the run total. | |
| SetError | void | SetError(BitAiError error): records the failure that ended the run, and ends it as Failed - or Cancelled, for an error whose Kind is Cancelled. |
BitAiAgentPlanStep properties
One entry of an agent plan, handed to BitAiAgentRun.SetPlan or carried by a BitAiAgentPlanEvent: new BitAiAgentPlanStep(stepId, title, detail). A readonly record struct.
| Name | Type | Default value | Description |
|---|---|---|---|
| StepId | string | The stable identifier of the step, preserved across plan revisions. | |
| Title | string | What the step does. | |
| Detail | string? | null | An optional elaboration, shown under the title of the step. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.