# AiImagePartView
## Description
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.
## 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. |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| 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. |
## Examples
\n**Basic**:
```razor
```
```csharp
private readonly BitAiImagePart policyImage = new("_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img2.jpg")
{
Alt = "A range of snow-covered peaks under a blue sky",
Caption = "Shown only as the image policy allows.",
Width = 1000,
Height = 350,
};
// An app sets the policy once, for every view (AddBitBlazorUIAIServices(ai => ai.ConfigureUi(...)) or a provider
// around the whole chat); here each provider sets its own.
private readonly BitAiUiOptions clickToLoadOptions = BitAiUiOptions.Default with { Images = BitAiImagePolicy.ClickToLoad };
private readonly BitAiUiOptions blockOptions = BitAiUiOptions.Default with { Images = BitAiImagePolicy.Block };
```
\n**Cascading parameters**:
```razor
```
```csharp
// mountainImage and chartImage are the ones of the Caption and Data URL examples.
private readonly BitAiImagePartViewParams[] imagePartViewParams =
[
new()
{
Style = "max-width: 24rem;",
Styles = new() { Image = "border: 2px solid var(--bit-clr-pri);", Caption = "font-style: italic;" },
},
];
```
\n**Style & Class**:
```razor
```
```csharp
private readonly BitAiImagePart styledImage = new("_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img4.jpg")
{
Alt = "A winding road above a lake between hills, snowy mountains behind",
Caption = "A caption",
Width = 1000,
Height = 350,
};
// clickToLoadOptions and blockOptions are the ones of the Image policy example.
```
\n**RTL**:
```razor