AI
AiToolResultView
Bit.BlazorUI.AI
BitAiToolResultView shows a tool result carried on its own (a BitAiToolResultPart) rather than on the call it answers - a conversation imported from a store that keeps each result as a message of its own: a card headed by the tool's name, with the result as it was written, as a JSON tree when it is structured, or as a compact error when it failed. A result streamed in by a transport always goes to its call and is shown by the BitAiToolCallView of that call.
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.
A tool result a transport streams in always goes to the BitAiToolCallView
of its call, matched by ToolCallId: the stream processor holds a result that arrives ahead of its call until the call starts,
and drops one whose call never does (BitAiChatSessionOptions.ToolResultHoldTime, ten seconds by default) with an error part on
the message. This view is for a result carried on its own - a part of the tool-result kind an app adds itself, for a
conversation imported from a store that keeps each result as a message of its own - and BitAiMessagePartView renders it
for such a part. The result is the tool's: it is shown as text and as a JSON tree, never as markup. See the
Tools scenario.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Hand it the Part (a BitAiToolResultPart). The card is headed by the ToolName of the part, as it is written
(no tool definition is read for it), under the wrench of a tool; a result that carries Text is shown as it was written - its
line breaks kept, a long token wrapped. Text wins over a Value the outcome carries as well.
read_logs
3 errors in the last hour:
12:04 payment-api Timeout after 30s calling the ledger
12:31 payment-api Timeout after 30s calling the ledger
12:58 search Index rebuild failed: out of disk space
Structured result
A result that carries only a Value is shown as a BitAiJsonView tree.
Without a ToolName, the card is headed Result (the BitAiStrings.Result of the options in force).
get_weather
"city": "Oslo""degrees": -3"condition": "Snow""humidity": 81]}
Result
"deleted": 128}
Failure
A failed result (BitAiToolOutcome.Failure) is shown as a compact
BitAiErrorView, titled by its message, with its detail behind a disclosure.
deploy
The deployment was rejected: the branch has failing checks.
In a message
In a conversation the part is one of the parts of an assistant message, and
BitAiMessagePartView renders it with this view, like any other part.
I checked the logs of the last hour:
read_logs
3 errors, 2 of them timeouts of payment-api.
Both timeouts come from the ledger, so that is where to look first.
Cascading parameters
BitParams with a BitAiToolResultViewParams sets the defaults of every result view inside it - here a dashed outline
and an italic title - the ones a BitAiMessagePartView renders included. It is a default, not an override: a view keeps what
it sets itself (the last one brings its own Styles). The part itself is never cascaded.
read_logs
3 errors in the last hour:
12:04 payment-api Timeout after 30s calling the ledger
12:31 payment-api Timeout after 30s calling the ledger
12:58 search Index rebuild failed: out of disk space
deploy
The deployment was rejected: the branch has failing checks.
get_weather
"city": "Oslo""degrees": -3"condition": "Snow""humidity": 81]}
Style & Class
Style and Class land on the root, Styles and Classes on the header, its icon and title, the body and
a textual result. The public --bit-AiToolResultView-* variables (see the CSS variables table) inherit, so a container
restyles every card under it.
read_logs
3 errors in the last hour:
12:04 payment-api Timeout after 30s calling the ledger
12:31 payment-api Timeout after 30s calling the ledger
12:58 search Index rebuild failed: out of disk space
read_logs
3 errors in the last hour:
12:04 payment-api Timeout after 30s calling the ledger
12:31 payment-api Timeout after 30s calling the ledger
12:58 search Index rebuild failed: out of disk space
read_logs
3 errors in the last hour:
12:04 payment-api Timeout after 30s calling the ledger
12:31 payment-api Timeout after 30s calling the ledger
12:58 search Index rebuild failed: out of disk space
read_logs
3 errors in the last hour:
12:04 payment-api Timeout after 30s calling the ledger
12:31 payment-api Timeout after 30s calling the ledger
12:58 search Index rebuild failed: out of disk space
get_weather
"city": "Oslo""degrees": -3"condition": "Snow""humidity": 81]}
RTL
In right-to-left text the card is laid out from the right - the icon leads the title on the right, and the result reads from it -
whether the direction comes from Dir or from a dir attribute around the card. The heading of a result with no
ToolName is the Result text of the BitAiStrings in force - here a subclass of them, cascaded by a
BitAiOptionsProvider.
آب و هوا
تهران: ۱۸ درجه، آفتابی
رطوبت: ۲۰٪
نتیجه
۱۲۸ رکورد حذف شد.
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.
BitAiToolResultView CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AiToolResultView-background | var(--bit-clr-bg-sec) | Surface of the card. |
| --bit-AiToolResultView-border-color | var(--bit-clr-brd-sec) | Outline of the card, and the rule under its header. |
| --bit-AiToolResultView-radius | var(--bit-shp-radius-surface) | Corner radius of the card. |
| --bit-AiToolResultView-header-color | var(--bit-clr-fg-sec) | Text and icon of the header. |
| --bit-AiToolResultView-body-background | var(--bit-clr-bg-pri) | Surface of the body. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiToolResultView parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Classes | BitAiToolResultViewClassStyles? | null | Custom CSS classes for different parts of the tool result view. |
| Part | BitAiToolResultPart | The result to render (required). The card is headed by its ToolName (else by the Result text of the BitAiStrings in force) and shows its Outcome: a failure as a compact BitAiErrorView, a Text as it was written, else the Value as a BitAiJsonView. | |
| Styles | BitAiToolResultViewClassStyles? | null | Custom CSS styles for different parts of the tool result 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. |
BitAiToolResultViewClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiToolResultView. |
| Header | string? | null | Custom CSS classes/styles for the header of the BitAiToolResultView. |
| Icon | string? | null | Custom CSS classes/styles for the tool icon of the BitAiToolResultView. |
| Title | string? | null | Custom CSS classes/styles for the title of the BitAiToolResultView. |
| Body | string? | null | Custom CSS classes/styles for the body of the BitAiToolResultView. |
| Text | string? | null | Custom CSS classes/styles for a textual result of the BitAiToolResultView. |
BitAiToolResultPart properties
A tool result carried on its own (Kind "tool-result") rather than on the BitAiToolCallPart it answers. The stream processor never adds one: it gives a result to the call of its id, holding one that arrives ahead of its call for ToolResultHoldTime and dropping one whose call never starts. An app adds one to a message it builds itself - a conversation imported from a store that keeps each result as a message of its own.
| Name | Type | Default value | Description |
|---|---|---|---|
| BitAiToolResultPart(toolCallId, outcome, partId?) | constructor | Creates a result of the call identified by toolCallId; partId is generated when left out. | |
| ToolCallId | string | The call the result answers. | |
| ToolName | string? | null | The tool that produced the result, when known. It heads the card. |
| Outcome | BitAiToolOutcome | The result itself: its Value, Text or Error. | |
| PartId | string | The identifier of the part (inherited from BitAiMessagePart, like the four members below): the partId given to the constructor, else a generated one. | |
| Kind | string | "tool-result" | The kind of the part (BitAiMessagePartKinds.ToolResult), which BitAiMessagePartView renders with this view. |
| Version | int | 0 | Increments on every change of the part. |
| Message | BitAiMessage? | null | The message the part belongs to, once it has been added to one. |
| Changed | event Action<BitAiMessagePart> | Raised after a part changes - which a result part never does: its Outcome is fixed, and setting its ToolName raises nothing. The view does not listen to it, so a ToolName set afterwards is drawn with the next render of the page. |
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.