Skip to content
BlazorUI

AI

AiRendererBoundary

Bit.BlazorUI.AI

BitAiRendererBoundary contains a failure inside one custom renderer, so the rest of the conversation survives it. Custom renderers are handed data a model produced - shapes their author did not anticipate, and values that are still streaming - and without a boundary one such shape throws during rendering and takes the whole page with it. With one, the failed piece is replaced by a notice that says which piece failed, and the next render tries it again. It adds no element around content that renders.

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.

Every renderer registered with BitAiRendererRegistry - for a part kind (BitAiMessagePartView), a tool (BitAiToolCallView), a structured schema (BitAiStructuredDataView), an artifact kind (BitAiArtifactView), a code language, the math or the citations of the Markdown (BitAiMarkdownView) - is already rendered inside one, labelled with the RendererFailed text of the strings and the name it was registered for; so is every component a model generates (BitAiGenerativeUiView, labelled with ComponentFailed). Wrap your own templates of model output in one the same way. It is Blazor's ErrorBoundary: it catches what its content throws while rendering, in its lifecycle methods and in its event handlers - never what a fire-and-forget task throws - and Blazor logs each failure it catches. The message of the exception is the tooltip of the notice, so keep secrets out of the exceptions a renderer throws. See the Custom tool UI and Structured output scenarios.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Wrap the renderer in it. Content that renders is rendered as it is, with no element of the boundary's own around it. Content that throws - here a card written for a degrees field, handed a forecast without one - is replaced by a notice; point at it for the message of the exception. Whatever is outside the boundary goes on as before.

Oslo
-3 °C, Snow
This content could not be rendered

Label

Label is what the notice says once the content has failed - the RenderFailed text of the BitAiStrings in force when it is not set. Name the piece that failed: the built-in views say The renderer for '...' failed, with the tool, part kind or schema it was registered for.

The weather card could not show this forecast

Recovery

Every render of the boundary by its parent tries the content again, which is how a renderer that fails on a partial value recovers once the value is complete. The forecast below streams in a few characters at a time: the card fails on every part of it that is not yet whole JSON, and renders once it is.



nothing received yet

Cascading parameters

BitParams with a BitAiRendererBoundaryParams sets the look of every boundary inside it - the boundaries the built-in views render around the renderers registered with them included, so a BitParams around a chat restyles the notice of every renderer that fails in it. The content and the Label are not among them: they are what makes one boundary the one it is. It is a default, not an override: a boundary keeps what it sets itself (the last one sets Styles of its own, which replace the cascaded ones).

Oslo
-3 °C, Snow
This content could not be rendered This content could not be rendered

Style & Class

The boundary has no element of its own while its content renders, so Style, Class, Styles.Root and Classes.Root land on the notice that stands in for failed content - a block holding a BitTag, which Styles.Notice and Classes.Notice (BitTagClassStyles) and the --bit-Tag-* variables restyle. The tag is an outlined one in the error color, which its own color variables do not change.

This content could not be rendered This content could not be rendered This content could not be rendered This content could not be rendered
This content could not be rendered

RTL

In right-to-left text the notice reads from the right, its icon at the right of its label. Dir sets the direction of the notice alone; the content the boundary protects takes the direction of the page around it.

کارت آب و هوا نتوانست این پیش‌بینی را نشان دهد

API

Every parameter, public member, sub-class and enum this component exposes.

BitAiRendererBoundary parameters

Name Type Default value Description
ChildContent RenderFragment? null The content to protect - typically a custom renderer of model output. It is rendered with no element of the boundary's own around it. What it throws while it renders, in the lifecycle methods of its components or in their event handlers replaces it with the notice; what a fire-and-forget task throws does not reach the boundary. For a throw to be caught it has to happen inside a component of the content: a RenderFragment that throws while the boundary itself builds it is the parent's failure.
Classes BitAiRendererBoundaryClassStyles? null Custom CSS classes for different parts of the renderer boundary.
Label string? null What the notice says once the content has failed. Left null, the RenderFailed text of the BitAiStrings in force ("This content could not be rendered") is shown. The message of the exception is the notice's tooltip either way.
Styles BitAiRendererBoundaryClassStyles? null Custom CSS styles for different parts of the renderer boundary.

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.

BitAiRendererBoundaryClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitAiRendererBoundary, which is rendered only once its content has failed: the block the notice stands in.
Notice BitTagClassStyles? null Custom CSS classes/styles for the notice (a BitTag) the BitAiRendererBoundary renders in place of its failed content.

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.