Bits | Freelancer Bits

AI textarea with a send button and optional attachment and voice input buttons

Contents

Default

Keep keyboard open on valid submit

To add attachments, the showAttachmentsButton input must be true, and the attachmentsControl input is required. The attachmentsControl is a FormControl<readonly File[]> like fl-file-select.

In this example, that control has a value change handler that rejects duplicate files. The error is shown below the textarea as a validation error. Meanwhile, the text control has a validator that requires at least 6 characters.

The footer shows a single error using recency. When both the text and the attachments are invalid, whichever the user triggered most recently is shown. To see it, submit with too few characters (text error), then attach the same file twice (attachment error takes over), then submit again (text error returns).

Attached (0):

Nothing yet.

While the consumer uploads a file, set loading on its attachment preview to show a blue progress circle (driven by progress, from 0 to 100) on a plain tile. Set error instead to show the failed state, which is a warning icon in the center. Uploading and failed tiles stay clickable, the media viewer shows a status caption instead of a preview. Files can still be removed.

Inputs in Attachments

attachmentsControl ?: any = new FormControl<readonly File[]>([], { nonNullable: true, })

Only used when `showAttachmentsButton` is true.

showAttachmentsButton ?: boolean = false

Also set in this example

control : FormControl<string>

placeholder ?: string = ''

Outputs

onAttachmentsClick ?: any = new EventEmitter<void>()

onBlur ?: any = new EventEmitter<void>()

onFocus ?: any = new EventEmitter<void>()

onInputHandled ?: any = new EventEmitter<void>()

onSkip ?: any = new EventEmitter<void>()

onSubmit ?: any = new EventEmitter<void>()

onVoiceInputClick ?: any = new EventEmitter<void>()

Ai

Cards

Controls

Freelancer domain

Loading

Modals

Structure

Text & links

Ai textarea