AIPrompt Events
This article explains the events available in the Telerik AIPrompt for Blazor:
OnOutputActionClick
The OnOutputActionClick event fires when the user clicks an output action button in the output view of the AIPrompt component. Use this event to handle custom actions such as copying, retrying, or providing feedback on the generated output.
To define the available output actions, set the OutputActions parameter to a list of AIPromptOutputActionDescriptor objects. Each action descriptor configures the appearance and behavior of an action button.
The event handler receives an argument of type AIPromptOutputActionClickEventArgs, which provides details about the clicked action, the prompt, the output, and the related command (if any). For a full list of available properties, refer to the AIPromptOutputActionClickEventArgs API reference.
Handle output action clicks in the AIPrompt
<TelerikAIPrompt OutputActions="@OutputActions"
OnOutputActionClick="@OnOutputActionClick"
OnPromptRequest="@HandlePromptRequest">
</TelerikAIPrompt>
@code {
private void OnOutputActionClick(AIPromptOutputActionClickEventArgs args)
{
// Handle the output action click event
Console.WriteLine($"Action clicked: {args.Action.Name}");
}
private List<AIPromptOutputActionDescriptor> OutputActions { get; set; } = new List<AIPromptOutputActionDescriptor>()
{
new AIPromptOutputActionDescriptor() { Name = "Copy", Icon = nameof(SvgIcon.Copy) },
new AIPromptOutputActionDescriptor() { Name = "Retry", Icon = nameof(SvgIcon.Share) },
new AIPromptOutputActionDescriptor() { Icon = SvgIcon.ThumbUp, Name = "Thumbs Up" },
new AIPromptOutputActionDescriptor() { Icon = SvgIcon.ThumbDown, Name = "Thumbs Down" }
};
private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
{
// The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
}
}OnPromptRequest
The OnPromptRequest event fires when the user clicks on the Generate button within the Prompt view or retries a prompt from the Output view.
The event handler receives an argument of type AIPromptPromptRequestEventArgs. See the example below.
| Property | Type | Description |
|---|---|---|
Prompt | string | The prompt text of the request. |
Output | string | The output of the request. The output is based on the prompt text. |
IsCancelled | bool | Whether the event is cancelled and the built-in action is prevented. |
OutputItem | AIPromptOutputItemDescriptor | The output item. This property will be populated only when the user retries an existing output. See AIPromptOutputItemDescriptor. |
Do not use the
OnPromptRequestevent when integrating the AIPrompt component withMicrosoft.Extensions.AI. TheOnPromptRequestevent disables such integration.
OnPromptRequestStop
The OnPromptRequestStop event fires when the user stops a prompt request by clicking the stop floating action button in the output view. This event allows you to handle the cancellation of an ongoing prompt request.
The event handler receives an EventCallback with no arguments.
OnCommandExecute
The OnCommandExecute event fires when the user clicks on a command within the Commands view.
The event handler receives an argument of type AIPromptCommandExecuteEventArgs. See the example below.
| Property | Type | Description |
|---|---|---|
Command | AIPromptCommandDescriptor | The executed command. |
Output | string | The output based on the executed command. |
IsCancelled | bool | Whether the event is cancelled and the built-in action is prevented. |
OutputItem | AIPromptOutputItemDescriptor | The output item. This property will be populated only when the user retries an existing output. See AIPromptOutputItemDescriptor. |
PromptChanged
The PromptChanged event fires when the user changes the prompt text. Use the event to update the AIPrompt's prompt when the Prompt parameter is set with one-way binding, otherwise, the user action will be ignored.
Example
Using AIPrompt events
@* All AIPrompt events *@
<TelerikAIPrompt OnPromptRequest="@OnPromptRequestHandler"
OnCommandExecute="@OnCommandExecuteHandler"
OnOutputRate="@OnOutputRateHandler"
PromptChanged="@OnPromptChanged"
ShowOutputRating="true"
Prompt="@Prompt"
Commands="@PromptCommands">
</TelerikAIPrompt>
@code {
private string Prompt { get; set; }
private List<AIPromptCommandDescriptor> PromptCommands { get; set; } = new List<AIPromptCommandDescriptor>()
{
new AIPromptCommandDescriptor() { Id = "1", Title = "Correct Spelling and grammar", Icon = SvgIcon.SpellChecker },
new AIPromptCommandDescriptor() { Id = "2", Title = "Change Tone", Icon = SvgIcon.TellAFriend,
Children = new List<AIPromptCommandDescriptor>
{
new AIPromptCommandDescriptor() { Id = "3", Title = "Professional" },
new AIPromptCommandDescriptor() { Id = "4", Title = "Conversational" },
new AIPromptCommandDescriptor() { Id = "5", Title = "Humorous" },
new AIPromptCommandDescriptor() { Id = "6", Title = "Empathic" },
new AIPromptCommandDescriptor() { Id = "7", Title = "Academic" },
}
},
};
private void OnPromptRequestHandler(AIPromptPromptRequestEventArgs args)
{
// The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel pretium lectus quam id leo in.";
}
private void OnCommandExecuteHandler(AIPromptCommandExecuteEventArgs args)
{
// The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
args.Output = "Nisl pretium fusce id velit ut tortor pretium. A pellentesque sit amet porttitor eget dolor. Lectus mauris ultrices eros in cursus turpis massa tincidunt.";
}
private void OnOutputRateHandler(AIPromptOutputRateEventArgs args)
{
// The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
}
private void OnPromptChanged(string prompt)
{
Prompt = prompt;
}
}