Skip to content

AI scenarios

Attachments

Bit.BlazorUI.AI Scripted transport

Pick, 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

Attach something
Drag a file onto the composer, paste a screenshot, or use the paperclip. Files over 2 MB are turned away.

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

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.