Views Overview

The AIPrompt component provides three predefined views and also lets you create custom views. Only one of these views is displayed at a time, and the user can switch the views via the TabView headers at the top.

The available built-in views are:

The Views is part of Telerik UI for .NET MAUI, the most comprehensive UI suite for .NET MAUI! To try it out, sign up for a free 30-day trial and kickstart your cross-platform app development today.

Download Free Trial

• Input View—Displays the input area of the AIPrompt.
• Output View—Displays the output area of the AIPrompt.
• Commands View—Displays a list of custom AIPrompt commands.

Define the Views

You can use two approaches for defining the views depending on the AutoGenerateViews property.

• AutoGenerateViews(bool)—Indicates whether the AIPrompt views will be auto-generated. Its default value is True.

Automatic Views Generation

By default, the .NET MAUI AIPrompt component will always render both the Input and the Output views. The Commands view will be rendered only if you pass a custom set of commands through the Commands property.

Manual Views Generation

To manually define the views, set AutoGenerateViews to False and add the views to the AIPrompt control:

• XAML

<telerik:RadAIPrompt x:Name="aiPrompt"
                     InputText="{Binding InputText}"
                     PromptRequestCommand="{Binding PromptRequestCommand}"
                     OutputItems="{Binding OutputItems}"
                     AutoGenerateViews="False">
    <telerik:RadAIPrompt.BindingContext>
        <local:ViewModel />
    </telerik:RadAIPrompt.BindingContext>
    <telerik:AIPromptInputView />
    <telerik:AIPromptOutputView />
    <telerik:AIPromptCommandView />
</telerik:RadAIPrompt>

Here is a sample ViewModel class used in the example:

• C#

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");
    }
}

Common Properties

Each view that is supported by the AIPrompt extends the AIPromptView class. This class exposes the following properties that you can set for each view:

• ControlTemplate(ControlTemplate)—Sets the template that defines the visual appearance of the view.
• HeaderText(string)—Defines the text that resides in the TabView Header for switching the views.
• HeaderImageSource(ImageSource)—Defines the image source that resides in the TabView Header for switching the views.