Skip to content
BlazorUI

AI

AiImagePartView

Bit.BlazorUI.AI

BitAiImagePartView shows an image part of a message - one a model generated or a tool returned - in a figure with its caption. It declares the intrinsic size of the image where the part knows it, so the message list does not jump as the image decodes, and loads it lazily, so a long transcript only fetches the images that scroll into view. The alternative text of the part is the accessible name of the image. Like the images of Markdown, it follows the image policy of the options: an image the policy holds back is a button that loads it, and one it blocks is its alternative text.

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 chat renders it for every BitAiImagePart of a message (through BitAiMessagePartView); render it yourself to show an image part anywhere else. It needs no chat session, only the part. A chat session adds an image part to the answer for every BitAiImageEvent its transport sends - its Url, Alt, Width and Height become those of the part (a caption is set on the part by the app). A model will not always describe the image it returns: ask for an alternative text in the prompt or supply one, since without it the image is marked decorative and a screen reader skips it.

The image follows the image policy of the options (BitAiUiOptions.Images, a BitAiImagePolicy), as the images written inside Markdown do: one the policy loads only on request is a placeholder that loads it on click, and one it blocks is replaced by its alternative text. A relative URL is resolved against the base address of the document before the policy is asked, so listing the app's own host with AllowListedHosts shows its images; a URL of a scheme that can run script is never loaded, whatever the policy.

Usage

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

Basic

Part is the BitAiImagePart to show: its Url (absolute, relative or a data URL), its Alt text and, where known, its intrinsic Width and Height, which reserve the room the image takes before it has loaded. It is never wider than its container, and its height follows its width.

Green northern lights over a snowy ridge at night

Caption

A Caption of the part is rendered under the image as the caption of its figure.

A range of snow-covered peaks under a blue sky
Generated for the prompt "a winter landscape in the Alps".

Decorative image

A part without an Alt renders an empty alternative text, which marks the image decorative: assistive technologies skip it. Without a Width and a Height the room for the image is only known once it has loaded.

Data URL

A generated image often arrives inline, as a data: URL - an image a tool drew or a model returned as base64 - and is shown like any other, with no request made for it. Since nothing is fetched, the image policy shows it under every mode but Block, unless its AllowDataImages is turned off.

A bar chart of five values, the last one the highest
Drawn by a tool and returned inline.

Image policy

The image follows BitAiUiOptions.Images, the BitAiImagePolicy the images of Markdown follow too, cascaded here by a BitAiOptionsProvider. Under ClickToLoad (the first) nothing is fetched until the reader presses the placeholder, a button named after the Alt of the part that hands the focus on to the image it loads; under Block (the second) the alternative text stands in for the image. The caption is shown either way. A relative URL, like this one, is resolved against the base address of the page before the policy is asked, so AllowListedHosts with the app's own host shows it.

Shown only as the image policy allows.

A range of snow-covered peaks under a blue sky
Shown only as the image policy allows.

Cascading parameters

BitParams with a BitAiImagePartViewParams sets the look of every image part view inside it - inside a chat, the images of every message. Which images are loaded is not one of them: that is the image policy of the AI options. It is a default, not an override: a view keeps what it sets itself (the second one sets Styles of its own, which replace the cascaded ones).

A range of snow-covered peaks under a blue sky
Generated for the prompt "a winter landscape in the Alps".

A bar chart of five values, the last one the highest
Drawn by a tool and returned inline.

Style & Class

Style and Class reach the root figure, Styles and Classes its Image and its Caption - and ImagePlaceholder and BlockedImage, what stands in for an image the policy holds back (the last two, under the ClickToLoad and Block options of the Image policy example). The public --bit-AiImagePartView-* variables (see the CSS variables table) restyle every image part view under the element they are set on.

A winding road above a lake between hills, snowy mountains behind
A caption
A winding road above a lake between hills, snowy mountains behind
A caption
A winding road above a lake between hills, snowy mountains behind
A caption
A winding road above a lake between hills, snowy mountains behind
A caption
A winding road above a lake between hills, snowy mountains behind
A caption
A caption
A winding road above a lake between hills, snowy mountains behind
A caption

RTL

In right-to-left text the caption is set from the right, whether the direction comes from Dir or from a dir attribute around the figure.

شفق قطبی سبز بر فراز تپه‌ای برفی در شب
تصویری که برای درخواست «شفق قطبی» ساخته شد.

شفق قطبی سبز بر فراز تپه‌ای برفی در شب
تصویری که برای درخواست «شفق قطبی» ساخته شد.

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.

BitAiImagePartView CSS variables

Name Default value Description
--bit-AiImagePartView-radius var(--bit-shp-radius-surface) Corner radius of the image.
--bit-AiImagePartView-caption-color var(--bit-clr-fg-ter) Text color of the caption.
--bit-AiImagePartView-caption-font-size var(--bit-tpg-fs-xs) Text size of the caption.
--bit-AiImagePartView-muted-color var(--bit-clr-fg-sec) Text color of the alternative text shown in place of an image the image policy blocks.

API

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

BitAiImagePartView parameters

Name Type Default value Description
Classes BitAiImagePartViewClassStyles? null Custom CSS classes for different parts of the image part view.
Part BitAiImagePart The image to render (required): its URL, its alternative text, its caption and its intrinsic size. The view reads it each time it renders rather than subscribing to it, so a change to a part already shown appears when the parent renders again. A source the user loaded under a policy that asks first stays loaded until the view is handed another one.
Styles BitAiImagePartViewClassStyles? null Custom CSS styles for different parts of the image part 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.

BitAiImagePartViewClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element (the figure) of the BitAiImagePartView.
Image string? null Custom CSS classes/styles for the image of the BitAiImagePartView.
ImagePlaceholder BitActionButtonClassStyles? null Custom CSS classes/styles for the button (a BitActionButton) the BitAiImagePartView shows in place of an image the image policy loads only on request.
BlockedImage string? null Custom CSS classes/styles for the alternative text the BitAiImagePartView shows in place of an image the image policy blocks.
Caption string? null Custom CSS classes/styles for the caption of the BitAiImagePartView.

BitAiImagePart properties

An image inside a message - one a model generated or a tool returned. Created with new BitAiImagePart(url, partId = null), where url is an absolute, relative or data URL (required) and partId the identifier a transport addresses the part by (one is generated when it is null). A transport sends one as a BitAiImageEvent. It is a BitAiMessagePart, so it also has the Message, Version and Changed of every part (see AiMessagePartView).

Name Type Default value Description
Url string The source of the image: an absolute, relative or data URL, loaded as the image policy of the options decides. Set through the constructor.
Alt string? null The alternative text, which becomes the accessible name of the image. Without it the image is marked decorative (an empty alt). It is also what the part contributes to the plain text of its message ([image: alt]).
Caption string? null A caption rendered under the image.
Width int? null The intrinsic width of the image in pixels, which (with Height) reserves its room before it has loaded.
Height int? null The intrinsic height of the image in pixels.
Kind string "image" The part kind (BitAiMessagePartKinds.Image), which picks the renderer of the part in a message.
PartId string The identifier of the part, given to the constructor or generated.

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.