Output View
The Output View shows the responses generated by the underlying AI service. Each response renders in its dedicated output item and provides two options to the user—to copy the content of the response or to retry the request. The Output View is activated as soon as output items are added to the AIPrompt'OutputItems collection.
Once the user fills out a prompt within the Input View and requests a response, the AIPrompt control will raise PromptRequest event/PromptRequestCommand command. In it, you can contact your AI model with the request. When the responses are generated by the AI service, you can create an AIPromptOutputItem object for each response and add it to the OutputItems collection. Once items are added to the OutputItems collection, the Output View will become active.
Each output item will also feature two additional options-to upvote or downvote the response. To handle this interaction, you can use the OutputItemRatingChangedCommand command.
The AiPromptOutputItem provides the following properties:
-
Title(string)—Defines the response title. -
InputText(string)—Defines the input text (the end-user's request) that was sent to the AI -
ResponseText(string`)—Defines the response from the AI model. -
Rating(double)—Defines the end-user rating for this response.
The Output View is represented by the AIPromptOutputView class and provides the following properties:
-
OutputItems(IList<AIPromptOutputItem>)—Defines a collection of the generated response items. -
OutputItemCopyCommand(ICommand)—Defines a command executed when the copy button of the generated response item is pressed. -
OutputItemRetryCommand(ICommand)—Defines a command executed when the retry button of the generated response item is pressed. -
OutputItemRatingChangedCommand(ICommand)—Defines a command executed when the rating of the generated response is changed through the UI.
Here is an example of a simple AIPromptOutputView:
<telerik:RadAIPrompt x:Name="aiPrompt"
AutoGenerateViews="False">
<telerik:RadAIPrompt.BindingContext>
<local:ViewModel />
</telerik:RadAIPrompt.BindingContext>
<telerik:AIPromptInputView InputText="{Binding InputText}"
PromptRequestCommand="{Binding PromptRequestCommand}" />
<telerik:AIPromptOutputView OutputItems="{Binding OutputItems}"
OutputItemCopyCommand="{Binding CopyCommand}"
OutputItemRetryCommand="{Binding RetryCommand}"
OutputItemRatingChangedCommand="{Binding OutputItemRatingChangedCommand}" />
</telerik:RadAIPrompt>
and the referenced ViewModel class:
public class ViewModel : NotifyPropertyChangedBase
{
private string inputText = string.Empty;
private IList<AIPromptOutputItem> outputItems = new ObservableCollection<AIPromptOutputItem>();
private ICommand promptRequestCommand;
private ICommand copyCommand;
private ICommand retryCommand;
private IList<AIPromptCommandBase> commands = new ObservableCollection<AIPromptCommandBase>();
private ICommand commandTappedCommand;
private ICommand outputItemRatingChangedCommand;
public ViewModel()
{
this.promptRequestCommand = new Command(this.ExecutePromptRequestCommand, this.CanExecutePromptRequestCommand);
this.copyCommand = new Command(this.ExecuteCopyCommand);
this.retryCommand = new Command(this.ExecuteRetryCommand);
this.commands.Add(new AIPromptCommand { ImageSource = new FontImageSource() { FontFamily = TelerikFont.Name, Size = 12, Glyph = TelerikFont.IconPaste}, Text = "Simplify", });
this.commands.Add(new AIPromptCommand { ImageSource = new FontImageSource() { FontFamily = TelerikFont.Name, Size = 12, Glyph = TelerikFont.IconReset }, Text = "Check Syntax" });
this.commandTappedCommand = new Command(this.ExecuteCommandTappedCommand);
this.outputItemRatingChangedCommand = new Command(this.ExecuteOutputItemRatingChangedCommand);
}
public string InputText { get { return this.inputText; } set { this.UpdateValue(ref this.inputText, value); } }
public IList<AIPromptOutputItem> OutputItems { get { return this.outputItems; } }
public ICommand PromptRequestCommand { get { return this.promptRequestCommand; } }
public ICommand CopyCommand { get { return this.copyCommand; } }
public ICommand RetryCommand { get { return this.retryCommand; } }
public IList<AIPromptCommandBase> Commands { get { return this.commands; } }
public ICommand CommandTappedCommand { get { return this.commandTappedCommand; } }
public ICommand OutputItemRatingChangedCommand { get { return this.outputItemRatingChangedCommand; } }
private bool CanExecutePromptRequestCommand(object arg)
{
string text = (string)arg;
return !string.IsNullOrEmpty(text?.Trim());
}
private void ExecutePromptRequestCommand(object arg)
{
AIPromptOutputItem outputItem = new AIPromptOutputItem
{
Title = "Generated with AI:",
InputText = arg?.ToString(),
ResponseText = "This is the response from the AI in relation to your request. For real prompt processing, please connect the component to a preferred AI service."
};
this.OutputItems.Insert(0, outputItem);
this.InputText = string.Empty;
}
private async void ExecuteCopyCommand(object arg)
{
AIPromptOutputItem outputItem = (AIPromptOutputItem)arg;
await Clipboard.Default.SetTextAsync(outputItem.ResponseText);
await Application.Current.MainPage.DisplayAlert("Copied to clipboard:", outputItem.ResponseText, "Ok");
}
private void ExecuteRetryCommand(object arg)
{
AIPromptOutputItem outputItem = (AIPromptOutputItem)arg;
this.ExecutePromptRequestCommand(outputItem.InputText);
this.InputText = string.Empty;
}
private void ExecuteOutputItemRatingChangedCommand(object arg)
{
AIPromptOutputItem outputItem = (AIPromptOutputItem)arg;
Application.Current.MainPage.DisplayAlert("Response rating changed:", $"The rating of response {outputItems.IndexOf(outputItem)} has changed.", "Ok");
}
private void ExecuteCommandTappedCommand(object arg)
{
AIPromptCommand aiPromptCommand = arg as AIPromptCommand;
if (aiPromptCommand == null)
{
return;
}
Application.Current.MainPage.DisplayAlert("Command executed:", aiPromptCommand.Text + " command has been executed.", "Ok");
}
}