AI scenarios
Attachments
Bit.BlazorUI.AI Scripted transportPick, drag, or paste files into the composer. Images preview; everything else gets a card; anything over the limit is turned away before a byte is read.
Live demo
Drag a file onto the composer, paste a screenshot, or use the paperclip, and send: the reply says what arrived and sends it back. Files over 2 MB are turned away, and listed beside the chat.
Three ways in, one limit
How it works
- The paperclip opens the file picker.
- Dragging files over the composer highlights it, and dropping attaches them.
- Pasting attaches what the clipboard holds, which is how screenshots actually arrive.
All three share one size limit (MaxAttachmentSize, 2 MB here) and one type filter (the
composer's Accept, which a BitAiPromptInputParams cascades into the chat's
composer). The size is checked in the browser before a byte is read, and accepted files are streamed rather
than sent as one message, so a large paste cannot overrun the Blazor Server message limit. What is turned
away is reported through OnAttachmentRejected - the composer already tells the user; that
callback is where an app logs or counts it.
Sending puts the files on the user message (BitAiChatSession.SubmitAsync(text, attachments)),
so the transport finds them on the request: IBitAiMessage.Attachments, each a
BitAiAttachment with its Name, ContentType, Size and
Kind. A file within the composer's MaxInlineSize (256 KB) carries its bytes
(Data) and a data URL (Url), which suits screenshots; a larger one stays in the
browser and is read when something opens it (OpenReadAsync, through its
ContentFactory), so nothing large is held in circuit memory. An application that accepts large
uploads handles OnSubmit instead, uploads to its own storage, and attaches a URL.
Files go the other way too. A model that generates an image sends it with a BitAiImageEvent
(its Url, the Alt text that names it, and a Width and
Height that reserve its space), which becomes a BitAiImagePart drawn under the image
policy (BitAiUiOptions.Images); any other file arrives as a BitAiFileEvent carrying
a BitAiAttachment, which becomes a BitAiFilePart drawn as a chip. This transport
lists what it received - inline or read on demand - and sends each file back that way: images as images,
the rest as files.
The microphone of AllowDictation appears only where the browser can transcribe, and no audio
leaves the device.
Components used
BitAiPromptInput- the composer: picker, drop target, paste and the limit.BitAiAttachmentChip- each attached file, in the composer, in the message, and in the reply that sends it back.BitAiImagePartView- an image the reply sends.BitAiVoiceInput- the dictation button.BitAiChat- the chat that hands its attachment settings to the composer.
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.