How to Work with Items in .NET MAUI SfAIAssistView?
8 Jul 202622 minutes to read
The SfAIAssistView enables working with various item types such as text, image, card, hyperlink, and attachments to represent and manage chat interactions effectively.
Configuring common settings for the AssistItem
| Displays the content of the assist item in the AI Assist view. | |
| Specify the avatar and name of the user using and properties respectively. | |
| Stores the original data of the item. | |
| Displays the time when the item was sent or received. | |
| Gets or sets the rating associated with the request item. | |
| Determines whether the assist item is a request or a response. | |
| Gets the data associated with the request sent by the user for which the response is generated. | |
| Displays the error message for the assist item | |
| Displays list of as a response to a request. | |
| Displays the header text above the suggestions list. | |
| Determines whether the footer, which includes Copy, Retry, Like, Dislike, should be displayed for the assist item. | |
| Displays the list of reference sources associated with the assist item response. |
Text item
The AssistItem is used to display plain text as an item, which is used to represent text-based content.
<ContentPage.BindingContext>
<local:ViewModel />
</ContentPage.BindingContext>
<syncfusion:SfAIAssistView x:Name="sfAIAssistView"
AssistItems="{Binding AssistItems}" />
using Syncfusion.Maui.AIAssistView;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SfAIAssistView sfAIAssistView = new SfAIAssistView();
ViewModel viewModel = new ViewModel();
sfAIAssistView.AssistItems = viewModel.AssistItems;
this.Content = sfAIAssistView;
}
}using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Syncfusion.Maui.AIAssistView;
public class ViewModel : INotifyPropertyChanged
{
private async Task GenerateAssistItems()
{
AssistItem requestItem = new AssistItem()
{
// Adding a user request as a text item
Text = "Hey AI, can you tell me what MAUI is? Could you provide a link to learn more about .NET MAUI?",
IsRequested = true
};
this.AssistItems.Add(requestItem);
// Generating response item
await GetResult(requestItem);
}
private async Task GetResult(AssistItem requestItem)
{
await Task.Delay(1000).ConfigureAwait(true);
AssistItem responseItem = new AssistItem()
{
// Adding a text item as a response from the AI service
Text = "Sure! MAUI stands for .NET Multi-platform App UI. It's a framework that allows you to create cross-platform applications using a single codebase. This powerful framework is an evolution of Xamarin.Forms and is designed to streamline the development process by allowing you to write code once and deploy it across multiple platforms.",
};
// Add the response item to the collection
this.AssistItems.Add(responseItem);
}
}Hyperlink item
The AssistHyperlinkItem is used to send a URL as an item. Along with the link, the thumbnail, title, and description of the URL are displayed if they are provided through the corresponding properties of the AssistHyperlinkItem.
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Syncfusion.Maui.AIAssistView;
public class ViewModel : INotifyPropertyChanged
{
private async Task GenerateAssistItems()
{
AssistItem requestItem = new AssistItem()
{
Text = "Hey AI, can you tell me what MAUI is? Could you provide a link to learn more about .NET MAUI?",
IsRequested = true
};
this.AssistItems.Add(requestItem);
// Generating response item
await GetResult(requestItem);
}
private async Task GetResult(AssistItem requestItem)
{
await Task.Delay(1000).ConfigureAwait(true);
AssistItem responseItem = new AssistHyperlinkItem()
{
// Adding a hyperlink item as a response from the AI service.
Text = "MAUI stands for .NET Multi-platform App UI. It's a .NET framework for building cross-platform apps with a single C# codebase for iOS, Android, macOS, and Windows. Sure! Here's a link to learn more about .NET MAUI",
Url = "https://dotnet.microsoft.com/en-us/apps/maui",
};
// Add the response item to the collection
this.AssistItems.Add(responseItem);
}
}Image item
The AssistImageItem is used to display an image as an item. Using the Source, Size, and Aspect properties, you can display the desired image in the desired height and width as an item in the AI AssistView control.
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Syncfusion.Maui.AIAssistView;
public class ViewModel : INotifyPropertyChanged
{
private async Task GenerateAssistItems()
{
AssistItem requestItem = new AssistItem()
{
Text = "Hey AI, Please share an image of bird.",
IsRequested = true
};
this.AssistItems.Add(requestItem);
// Generating response item
await GetResult(requestItem);
}
private async Task GetResult(AssistItem requestItem)
{
await Task.Delay(1000).ConfigureAwait(true);
// Adding image item as a response from the AI service.
AssistItem responseItem = new AssistImageItem()
{
Aspect = Aspect.AspectFit,
Text = "Here's an image of a bird.",
Source = "bird01.png"
};
// Add the response item to the collection
this.AssistItems.Add(responseItem);
}
}Card item
In AI AssistView, to display a list of interactive cards, each card can contain an image, a list of buttons, and text (title, subtitle, and description) that align with the design used in popular bot frameworks. The Card.Image, Card.Title, Card.Subtitle, and Card.Description properties are used to define and display the image, title, subtitle, and description within each card.
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Syncfusion.Maui.AIAssistView;
public class ViewModel : INotifyPropertyChanged
{
private ObservableCollection<IAssistItem> assistItems;
private ObservableCollection<Card> cardsCollection;
public ObservableCollection<IAssistItem> AssistItems
{
get { return assistItems; }
set { assistItems = value; OnPropertyChanged(nameof(AssistItems)); }
}
public ObservableCollection<Card> CardsCollection
{
get { return cardsCollection; }
set { cardsCollection = value; OnPropertyChanged(nameof(CardsCollection)); }
}
public ViewModel()
{
this.AssistItems = new ObservableCollection<IAssistItem>();
//Generate card items
this.GenerateCards();
//Generate assist items with card responses
this.GenerateAssistItems();
}
private void GenerateCards()
{
CardsCollection = new ObservableCollection<Card>();
Card card1 = new Card()
{
Title = "Miami",
Description = "Miami, officially the City of Miami, is the seat of Miami-Dade County and the cultural, economic and financial center of South Florida in the United States. The city covers an area of about 56 square miles between the Everglades to the west and Biscayne Bay to the east.",
Image = "miami.png",
};
card1.Buttons.Add(new CardButton() { Title = "Choose", Value = "Miami" });
Card card2 = new Card()
{
Title = "San Francisco",
Description = "A popular tourist destination, San Francisco is known for its cool summers, fog, steep rolling hills, eclectic mix of architecture, and landmarks, including the Golden Gate Bridge, cable cars, the former Alcatraz Federal Penitentiary, Fisherman's Wharf, and its Chinatown district.",
Image = "sanfrancisco.png",
};
card2.Buttons.Add(new CardButton() { Title = "Choose", Value = "San Francisco" });
Card card3 = new Card()
{
Title = "Las Vegas",
Description = "Las Vegas is an internationally renowned major resort city, known primarily for its gambling, shopping, fine dining, entertainment, and nightlife. The Las Vegas Valley as a whole serves as the leading financial, commercial, and cultural center for Nevada.",
Image = "lasvegas.png",
};
card3.Buttons.Add(new CardButton() { Title = "Choose", Value = "Las Vegas" });
Card card4 = new Card()
{
Title = "Dallas",
Description = "Dallas, a modern metropolis in north Texas, is a commercial and cultural hub of the region. The Downtown Sixth Floor Museum at Dealey Plaza commemorates the site of President John F. Kennedy's assassination in 1963. In the Arts District, the Dallas Museum of Art and the Crow Collection of Asian Art cover thousands of years of art. The sleek Nasher Sculpture Center showcases contemporary sculpture.",
Image = "dallas.png",
};
card4.Buttons.Add(new CardButton() { Title = "Choose", Value = "Dallas" });
this.CardsCollection.Add(card1);
this.CardsCollection.Add(card2);
this.CardsCollection.Add(card3);
this.CardsCollection.Add(card4);
}
private void GenerateAssistItems()
{
AssistItems.Add(new AssistCardItem()
{
Cards = CardsCollection,
});
}
}Attachment item
The AssistAttachmentItem is used to display the preview for a file or an image as an item. Using the Attachments property, you can display the desired attachments as an item in the AI AssistView control.
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Syncfusion.Maui.AIAssistView;
public class ViewModel : INotifyPropertyChanged
{
private async Task GenerateAssistItems()
{
// Adding a user request as attachments
var requestItem = new AssistAttachmentItem()
{
Text = "Read the following documents",
IsRequested = true,
Attachments = new List<IAttachment> { staticAttachment1, staticAttachment2, staticAttachment3 }
};
this.AssistItems.Add(requestItem);
// Generating response item
await GetResult(requestItem);
}
private async Task GetResult(AssistItem requestItem)
{
await Task.Delay(1000).ConfigureAwait(true);
AssistItem responseItem = new AssistItem()
{
// Adding a text item as a response from the AI service
Text = "Thank you for sharing the documents. I will review the text file, the Excel sheet, and the PDF to provide you with a summary or any insights you need. Please let me know if you have any specific questions about these files.",
IsRequested = false,
};
// Add the response item to the collection
this.AssistItems.Add(responseItem);
}
}Request and response item
The IsRequested property is used to determine whether an item is a Request or a Response. If IsRequested property is set to true, the item is a Request item.
Request item
These are the items sent by the user. They typically appear aligned to the right side of the window to visually differentiate them as user inputs.
using Syncfusion.Maui.AIAssistView;
public class ViewModel
{
public void CreateRequestItem()
{
AssistItem requestItem = new AssistItem()
{
Text = "listening",
IsRequested = true
};
}
}Response item
These are messages generated by the AI in reply to a request. They are usually aligned to the left side of the window to indicate that they are responses.
using Syncfusion.Maui.AIAssistView;
public class ViewModel
{
public void CreateResponseItem()
{
AssistItem responseItem = new AssistItem()
{
Text = "Types of Listening: For good communication, it is not only enough to convey the information efficiently, but it also needs to include good listening skills. Common types of Listening are Active listening and Passive listening.",
IsRequested = false,
};
}
}Show error response
The SfAIAssistView allows to display error responses by setting the error text to the AssistItem.ErrorMessage property, ensuring clear notification when an error occurs during AI interactions.
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Syncfusion.Maui.AIAssistView;
public class ViewModel : INotifyPropertyChanged
{
private async Task GenerateAssistItems()
{
AssistItem requestItem = new AssistItem()
{
Text = "Types of listening",
IsRequested = true
};
this.AssistItems.Add(requestItem);
await GetResultAsync(requestItem);
}
private async Task GetResultAsync(AssistItem requestItem)
{
try
{
await Task.Delay(1000);
// If successful, add the normal response
AssistItem responseItem = new AssistItem()
{
Text = "Active Listening – Fully focusing and responding to the speaker with attention and empathy. Passive Listening – Hearing without reacting or engaging with the speaker. Empathetic Listening – Understanding the speaker's emotions and feelings deeply.",
IsRequested = false,
};
this.AssistItems.Add(responseItem);
}
catch (Exception ex)
{
AssistItem errorItem = new AssistItem()
{
ErrorMessage = "An error occurred. Either the engine you requested does not exist or there was another issue processing your request.",
IsRequested = false,
};
this.AssistItems.Add(errorItem);
}
}
}