AIPrompt Output View
The Output view shows the responses generated by the underlying AI service. Each response renders in its dedicated output card and provides two options to the user—to copy the content of the response or to retry the request. The Output view is activated through interaction—once the user fills out a prompt within the Prompt view and requests a response, the Output view will become active.
If OutputActions are configured at the component level, the output card also features two additional options to upvote and downvote the response. To handle this interaction, you can use the OnOutputActionClick event. For more information on how to handle the event, refer to the AIPrompt events article.
By default, the Output view is rendered and is part of the predefined views. However, if you provide a render fragment of type AIPromptViews to the TelerikAIPrompt tag, you override the default rendering, meaning you must explicitly add AIPromptOutputView tag within it.
Use the
ButtonTextandButtonIconto alter the appearance of view button.
<TelerikAIPrompt @bind-Prompt="@Prompt">
<AIPromptViews>
<AIPromptPromptView ButtonText="Prompt View" ButtonIcon="@SvgIcon.Sparkles" />
<AIPromptOutputView ButtonText="Output View" ButtonIcon="@SvgIcon.Comment" />
</AIPromptViews>
</TelerikAIPrompt>
@code {
private string Prompt { get; set; }
}Use
OutputActionsto include visuals related to upvoting or downvoting a specific output.
<TelerikAIPrompt @bind-Prompt="@Prompt"
OnPromptRequest="@OnPromptRequestHandler"
OutputActions="@OutputActions"
OnOutputActionClick="@OnOutputActionClick">
<AIPromptViews>
<AIPromptPromptView ButtonText="Prompt View" ButtonIcon="@SvgIcon.Sparkles" />
<AIPromptOutputView ButtonText="Output View" ButtonIcon="@SvgIcon.Comment" />
</AIPromptViews>
</TelerikAIPrompt>
@code {
private string Prompt { get; set; }
private void OnOutputActionClick(AIPromptOutputActionClickEventArgs args)
{
// Handle the output action click event
Console.WriteLine($"Action clicked: {args.Action.Name}");
}
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 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() { Name = "Thumbs Up", Icon = SvgIcon.ThumbUp },
new AIPromptOutputActionDescriptor() { Name = "Thumbs Down", Icon = SvgIcon.ThumbDown }
};
}