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.
EXPERIMENTAL, UNDER DEVELOPMENT
Smart components are available as separate NuGet package:Havit.Blazor.Components.Web.Bootstrap.Smart
.
<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",
];
}
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. |
Method | Returns | Description |
---|---|---|
FocusAsync() | ValueTask |
Property | Type | Description |
---|---|---|
Defaults | InputTextSettings |
Application-wide defaults for the HxInputFile and derived components.Full documentation and demos: https://havit.blazor.eu/components/HxInputText. |