AI
AiAttachmentChip
Bit.BlazorUI.AIFileChip
BitAiAttachmentChip shows one BitAiAttachment as a chip - a BitTag: a thumbnail for an image and the glyph of its kind for anything else, its name, and under it its size, the progress of an upload still arriving, or why the upload failed. Its dismiss button removes the attachment, there only while OnRemove is set. The composer stages files as these chips, and a message shows its files with them.
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 chip only shows a BitAiAttachment - it reads no file and needs no service. The
BitAiPromptInput makes one per staged file, and a
BitAiChatMessage one per file of the message; see the
attachments scenario for both. A thumbnail is decoration beside the
name (an empty alt), and the remove button is named after the file (Remove quarterly-report.pdf). Only an image is
drawn from its own content, and only as the image policy in force (BitAiUiOptions.Images) allows, so point
ThumbnailUrl or Url only at an image you trust to be one. Its texts - the Remove of the button, the
UploadFailed of a failed upload without an Error, and the formatted size (FormatBytes) - come from the
strings in force, which a BitAiOptionsProvider localizes.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Give it an Attachment: the chip shows its name, its size under it, and the glyph of its kind. A name too long
for the chip is cut short and is its tooltip.
quarterly-report.pdf471 KB
minutes-of-the-planning-meeting-with-the-whole-team.docx23 KB
Kinds
The Kind of an attachment picks what stands before its name: an image shows its ThumbnailUrl (or its
Url), audio, video and any other file the glyph of their kind. BitAiAttachment.InferKind works the kind
out of a MIME type and a file name, the way the composer does.
aurora.jpg1.8 MBvoice-note.m4a402 KB
screen-recording.webm9.4 MB
contract.pdf215 KB
data.csv5 KB
Image policy
The picture of an image follows BitAiUiOptions.Images, the
BitAiImagePolicy every image of a chat follows,
cascaded here by a BitAiOptionsProvider. A chip is too small
for a placeholder, so an image the policy does not show outright - held back by ClickToLoad or a host
AllowListedHosts does not list, or hidden by Block - gets the glyph of its kind instead: the first chip
is under the default policy, the second under Block. An address with a script-capable scheme is never drawn,
whatever the policy.
aurora.jpg1.8 MBaurora.jpg1.8 MB
Status
The Status of an upload shows under the name: the size while it is Pending - press the button to send
it - then the Progress of one still Uploading, and the size again once it is Ready; the
Error of one that Failed (the UploadFailed text of the strings in force when it has none) shows in
the error color, the state of the file rather than a look of the chip.
site-survey.zip3.0 MB
backup.tarOver the 100 MB limit of the server
OnRemove
OnRemove adds the dismiss button of the tag, named after the file, and hands over the attachment it removes;
without it the chip has no button at all. The button goes with its chip, so the focus is handed on with
FocusAsync: to the chip that took its place, or the last one, or the button that brings them back.
aurora.jpg1.8 MBnotes.txt1 KB
budget.xlsx48 KB
Disabled
A disabled chip is dimmed and its remove button cannot be pressed.
quarterly-report.pdf471 KB
Cascading parameters
BitParams with a BitAiAttachmentChipParams sets the look of every attachment chip inside it - its
Styles, Classes and the common parameters such as Dir or Disabled; the attachment and
OnRemove stay on each chip. A parameter of the chip itself still wins: the last one sets its own Styles.
quarterly-report.pdf471 KB
aurora.jpg1.8 MBminutes-of-the-planning-meeting-with-the-whole-team.docx23 KB
Style & Class
Style and Class reach the root, Styles and Classes the tag (BitTagClassStyles), the
thumbnail and the glyph. The public --bit-AiAttachmentChip-* variables (see the CSS variables table) size the
chip and its thumbnail, from :root, an ancestor or Style; the rest of the chip is a BitTag, restyled
through its own --bit-Tag-* variables.
quarterly-report.pdf471 KB
aurora.jpg1.8 MBquarterly-report.pdf471 KB
aurora.jpg1.8 MBminutes-of-the-planning-meeting-with-the-whole-team.docx23 KB
RTL
In right-to-left text the thumbnail stands at the right of the name and the remove button at its left, whether the
direction comes from Dir or from a dir attribute around the chip.
گزارش-فصلی.pdf471 KB
شفق-قطبی.jpg1.8 MBRemoved: nothing yet
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.
BitAiAttachmentChip CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AiAttachmentChip-max-width | spacing(32) | Widest the chip gets before its name is cut short. |
| --bit-AiAttachmentChip-thumbnail-size | spacing(4.25) | Width and height of the thumbnail of an image, and of the box holding the glyph of any other file. |
| --bit-AiAttachmentChip-thumbnail-radius | var(--bit-shp-radius-sm) | Corner of the thumbnail. |
| --bit-AiAttachmentChip-thumbnail-background | var(--bit-clr-bg-sec) | Fill behind the glyph, or behind a picture that does not cover its box. |
| --bit-AiAttachmentChip-thumbnail-color | var(--bit-clr-fg-sec) | Color of the glyph shown in place of a picture. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiAttachmentChip parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Attachment | BitAiAttachment | The attachment to show: its Name, its Kind (the thumbnail or glyph before the name) and, under the name, its Size, its upload Progress or its Error, as its Status says. Required. | |
| Classes | BitAiAttachmentChipClassStyles? | null | Custom CSS classes for different parts of the attachment chip. |
| OnRemove | EventCallback<BitAiAttachment> | Raised with the attachment when the user removes it. The remove button - the dismiss button of the tag, named Remove and the file name - is there only while this is set. | |
| Styles | BitAiAttachmentChipClassStyles? | null | Custom CSS styles for different parts of the attachment chip. |
BitAiAttachmentChip public members
| Name | Type | Default value | Description |
|---|---|---|---|
| FocusAsync | ValueTask | Gives the keyboard focus to the remove button of the chip - what a row of chips hands the focus on with after removing one, since the button that was pressed goes with its chip. A chip without OnRemove has no button and nothing to focus. |
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. |
BitAiAttachmentChipClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiAttachmentChip. |
| Tag | BitTagClassStyles? | null | Custom CSS classes/styles for the BitTag of the BitAiAttachmentChip that carries the name, the details and the remove button. |
| Thumbnail | string? | null | Custom CSS classes/styles for the thumbnail of the BitAiAttachmentChip: the picture of an image, or the box holding the glyph of any other kind of file. |
| Icon | string? | null | Custom CSS classes/styles for the glyph of the BitAiAttachmentChip shown in place of a picture. |
BitAiAttachment properties
A file carried by a message or staged in the composer: new BitAiAttachment(attachmentId, name) { ... }. It holds no byte array of its own, so Blazor Server never keeps a multi-megabyte upload in circuit memory: its content is referenced through Url, Data or ContentFactory and only read when something needs it.
| Name | Type | Default value | Description |
|---|---|---|---|
| AttachmentId | string | An identifier unique within its message or composer, a good @key. Required; it cannot be empty. | |
| Name | string | The file name shown to the user. | |
| ContentType | string? | null | The MIME type, for example image/png. |
| Size | long? | null | The size in bytes, when known. The chip shows it, formatted (FormatBytes of the strings in force), once the file is ready. |
| Kind | BitAiAttachmentKind | BitAiAttachmentKind.File | The category that decides the preview: a thumbnail for an image, the glyph of its kind otherwise. InferKind works it out of a MIME type and a file name. |
| Status | BitAiAttachmentStatus | BitAiAttachmentStatus.Ready | Where the upload of the file is. |
| Progress | double? | null | The progress of the upload, from 0 to 1, while the Status is Uploading. |
| Error | string? | null | Why the upload failed, when the Status is Failed. When null, the UploadFailed text of the strings in force is shown. |
| Url | string? | null | An addressable URL for the content, which may be a data URL for a small inline file. The chip shows it for an image without a ThumbnailUrl. |
| ThumbnailUrl | string? | null | A URL for a small preview image, distinct from the full-size content, which the chip prefers for an image. |
| Data | ReadOnlyMemory<byte>? | null | Inline bytes, for small attachments that are cheap to keep in memory. |
| ContentFactory | Func<CancellationToken, ValueTask<Stream>>? | null | Opens the content on demand. Preferred over Data for anything large; never serialized. |
| Metadata | IReadOnlyDictionary<string, object?>? | null | App-defined values carried through to custom attachment renderers. |
| HasInlineData | bool | false | Whether the content can be read without a round trip (Data is set). |
| OpenReadAsync(CancellationToken cancellationToken) | ValueTask<Stream> | Opens the content from whichever source there is: the ContentFactory, else the Data. Throws an InvalidOperationException for an attachment carrying neither. | |
| InferKind(string? contentType, string? fileName) | static BitAiAttachmentKind | Infers the kind from a MIME type (image/*, audio/*, video/*, application/pdf), or from the extension of the file name when the type is missing or generic. |
BitAiAttachmentKind enum
| Name | Value | Description |
|---|---|---|
| File | 0 | Anything without a more specific category. The chip shows the glyph of a page. |
| Image | 1 | A raster or vector image. The chip shows its ThumbnailUrl, else its Url, where the image policy shows it outright, and the glyph of a picture otherwise. |
| Audio | 2 | An audio clip. The chip shows the glyph of a microphone. |
| Video | 3 | A video clip. The chip shows the glyph of a video camera. |
| Document | 4 | A PDF or other paginated document. The chip shows the glyph of a page, as for any other file. |
BitAiAttachmentStatus enum
| Name | Value | Description |
|---|---|---|
| Pending | 0 | Selected locally and not yet uploaded. The chip shows the size, as it does once the file is ready. |
| Uploading | 1 | Upload in progress. The chip shows the Progress as a percentage (0% while it is null). |
| Ready | 2 | Available to the model. The chip shows the size, when it is known. |
| Failed | 3 | The upload failed. The chip shows the Error (the UploadFailed text of the strings in force when it is null) in the error color. |
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.