HxSmartTextArea #

Smart TextArea is an AI upgrade to the traditional textarea. It provides suggested autocompletions to whole sentences based on its configuration and what the user is currently typing.
HxSmartTextArea derives from SmartTextArea, a component created by the Microsoft Blazor team. It extends the original component with Bootstrap styling and Hx-component features.

Basic usage #

Start typing your message, AI will help you with autocompletions.
<HxSmartTextArea Label="Employee enquiry response"
				 @bind-Value="comment"
				 Hint="Start typing your message, AI will help you with autocompletions."
				 UserRole="@userRole"
				 UserPhrases="userPhrases" />

@code {
	private string comment;
	private readonly string userRole = "HR administrator replying to an employee enquiry";
	private readonly string[] userPhrases =
	[
		"Thank you for your message.",
		"Full-time employees have 28 days paid vacation per year.",
		"We have no further information about the company sale at this time.",
		"We always welcome your feedback about this system. Please fill out our survey at https://example.com/hrsurvey",
		"Full details about the vacation policy can be found at https://example.com/policies/vacation",
		"Information about the company car scheme is at https://example.com/benefits/car",
		"Pets are not allowed in the office, as detailed at https://example.com/policies/pets.",
		"If you have further questions, you can always email us at hr@example.com or ask your manager.",
		"Could you provide further details about NEED_INFO",
	];
}

API #

Parameters #

Name Type Description
UserRoleREQUIRED string Describes who is typing and for what reason, optionally giving other contextual information.
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
ChipTemplate RenderFragment
CssClass string
DisplayName string Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
GenerateChip bool
Hint string
HintTemplate RenderFragment
InputCssClass string
InputMode InputMode? Hint to browsers as to the type of virtual keyboard configuration to use when editing.
The default is null (not set).
InputSize InputSize? Size of the input.
Label string
LabelCssClass string
LabelTemplate RenderFragment
LabelType LabelType?
MaxLength int? The maximum number of characters (UTF-16 code units) that the user can enter.
If the parameter value isn't specified, the MaxLengthAttribute of the Value is checked and used.
If not specified either, the user can enter an unlimited number of characters.
Parameters string An arbitrary string you can use to communicate any state or context information you want into the inference backend (it arrives as a property on the SmartTextAreaConfig.
Placeholder string Placeholder for the input.
Settings InputTextSettings Set of settings to be applied to the component instance (overrides HxInputText.Defaults, overridden by individual parameters).
UserPhrases string<> Helps the language model reply using your preferred tone/voice, common phrases, and give any information you wish about policies, URLs, or anything else that may be relevant to incorporate into the suggested completions.
ValidationMessageMode ValidationMessageMode?
Value string Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<string> A callback that updates the bound value.
ValueExpression Expression<Func<string>> An expression that identifies the bound value.

Methods #

Method Returns Description
FocusAsync() ValueTask

Static properties #

Property Type Description
Defaults InputTextSettings Application-wide defaults for the HxInputFile and derived components.
Full documentation and demos: https://havit.blazor.eu/components/HxInputText.
An unhandled error has occurred. Reload 🗙