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 the ShowOutputRating is enabled on the component level, the output card will also feature two additional options-to upvote or downvote the response. To handle this interaction, you can use the OnOutputRate 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 ButtonText and ButtonIcon to 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 the ShowOutputRating to include visuals related to upvoting or downvoting a specific output.
<TelerikAIPrompt @bind-Prompt="@Prompt" ShowOutputRating="true" OnOutputRate="@OnOutputRateHandler">
<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 OnOutputRateHandler(AIPromptOutputRateEventArgs args)
{
// Handle the output rate event here
}
}