Loading...
Loading...
Guide for implementing the Syncfusion WinUI AI AssistView control for creating AI chat interfaces and conversational UI. Use this skill when implementing AI chat interfaces, AI assistants, conversational UI, or chatbots in WinUI applications. Essential for creating AI-powered chat experiences, integrating AI services, displaying AI responses, showing typing indicators, providing AI suggestions, or implementing conversational interfaces with AI services in WinUI.
npx skill4agent add syncfusion/winui-ui-components-skills syncfusion-winui-ai-assistviewSyncfusion.UI.Xaml.ChatSyncfusion.Chat.WinUI<Page
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat">
<Grid>
<syncfusion:SfAIAssistView
x:Name="aiAssistView"
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
Suggestions="{Binding Suggestions}"
ShowTypingIndicator="{Binding IsProcessing}"
TypingIndicator="{Binding TypingIndicator}"/>
</Grid>
</Page>using Syncfusion.UI.Xaml.Chat;
using System.Collections.ObjectModel;
public class ViewModel : INotifyPropertyChanged
{
private ObservableCollection<object> chats;
private Author currentUser;
private IEnumerable<string> suggestions;
private TypingIndicator typingIndicator;
private bool isProcessing;
public ViewModel()
{
this.CurrentUser = new Author { Name = "User" };
this.Chats = new ObservableCollection<object>();
this.TypingIndicator = new TypingIndicator { Author = new Author { Name = "AI" } };
this.Suggestions = new ObservableCollection<string>();
InitializeChat();
}
private async void InitializeChat()
{
// User asks a question
this.Chats.Add(new TextMessage
{
Author = CurrentUser,
Text = "What is WinUI?"
});
// Show typing indicator
IsProcessing = true;
await Task.Delay(1000);
// AI responds
IsProcessing = false;
this.Chats.Add(new TextMessage
{
Author = new Author { Name = "AI" },
Text = "WinUI is a user interface layer that contains modern controls and styles for building Windows apps."
});
// Update suggestions
Suggestions = new ObservableCollection<string>
{
"What is the future of WinUI?",
"What is XAML?",
"What is the difference between WinUI 2 and WinUI 3?"
};
}
public ObservableCollection<object> Chats
{
get => chats;
set { chats = value; RaisePropertyChanged(nameof(Chats)); }
}
public Author CurrentUser
{
get => currentUser;
set { currentUser = value; RaisePropertyChanged(nameof(CurrentUser)); }
}
public IEnumerable<string> Suggestions
{
get => suggestions;
set { suggestions = value; RaisePropertyChanged(nameof(Suggestions)); }
}
public TypingIndicator TypingIndicator
{
get => typingIndicator;
set { typingIndicator = value; RaisePropertyChanged(nameof(TypingIndicator)); }
}
public bool IsProcessing
{
get => isProcessing;
set { isProcessing = value; RaisePropertyChanged(nameof(IsProcessing)); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName) =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"/>public class ViewModel
{
public Author CurrentUser { get; set; } = new Author { Name = "John" };
public ObservableCollection<object> Chats { get; set; } = new();
public ViewModel()
{
Chats.Add(new TextMessage { Author = CurrentUser, Text = "Hello!" });
Chats.Add(new TextMessage { Author = new Author { Name = "Bot" }, Text = "Hi! How can I help you?" });
}
}<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
ShowTypingIndicator="{Binding IsAIProcessing}"
TypingIndicator="{Binding TypingIndicator}"/>private async void SendMessageToAI(string userMessage)
{
Chats.Add(new TextMessage { Author = CurrentUser, Text = userMessage });
// Show typing indicator
IsAIProcessing = true;
// Call AI service
var aiResponse = await CallAIService(userMessage);
// Hide typing indicator and show response
IsAIProcessing = false;
Chats.Add(new TextMessage { Author = new Author { Name = "AI" }, Text = aiResponse });
}<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
Suggestions="{Binding CurrentSuggestions}"/>private void UpdateSuggestions(string lastAIResponse)
{
// Generate contextual suggestions based on AI response
CurrentSuggestions = new ObservableCollection<string>
{
"Tell me more",
"Show me an example",
"What are the alternatives?"
};
}<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
IsResponseToolbarVisible="True"
ResponseToolbarItemClicked="ResponseToolbar_ItemClicked"/>private void ResponseToolbar_ItemClicked(object sender, ResponseToolbarItemClickedEventArgs e)
{
switch (e.Item.ItemType)
{
case ResponseToolbarItemType.Copy:
CopyToClipboard(e.Message.Text);
break;
case ResponseToolbarItemType.Regenerate:
RegenerateAIResponse(e.Message);
break;
case ResponseToolbarItemType.Like:
SendFeedback("like", e.Message);
break;
case ResponseToolbarItemType.Dislike:
SendFeedback("dislike", e.Message);
break;
}
}<syncfusion:SfAIAssistView IsInputToolbarVisible="True">
<syncfusion:SfAIAssistView.InputToolbarItems>
<syncfusion:InputToolbarItem Tooltip="Attach file">
<syncfusion:InputToolbarItem.ItemTemplate>
<DataTemplate><Button Click="AttachFile_Click"><SymbolIcon Symbol="Attach"/></Button></DataTemplate>
</syncfusion:InputToolbarItem.ItemTemplate>
</syncfusion:InputToolbarItem>
</syncfusion:SfAIAssistView.InputToolbarItems>
</syncfusion:SfAIAssistView><syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
EnableStopResponding="True"
StopResponding="StopResponding_Event"/>private CancellationTokenSource aiCancellationToken;
private async void SendToAI(string prompt)
{
aiCancellationToken = new CancellationTokenSource();
try
{
var response = await CallAIServiceAsync(prompt, aiCancellationToken.Token);
Chats.Add(new TextMessage { Author = new Author { Name = "AI" }, Text = response });
}
catch (OperationCanceledException)
{
Chats.Add(new TextMessage { Author = new Author { Name = "AI" }, Text = "Response canceled." });
}
}
private void StopResponding_Event(object sender, EventArgs e)
{
aiCancellationToken?.Cancel();
}private void PromptRequest_Event(object sender, PromptRequestEventArgs e)
{
if (string.IsNullOrWhiteSpace(e.InputMessage.Text))
{
e.Handled = true;
ShowError("Please enter a message.");
}
}private async Task<string> CallOpenAI(string prompt)
{
var client = new OpenAIClient(apiKey);
var response = await client.CompleteChatAsync("gpt-4", new ChatCompletionOptions
{
Messages = { new SystemChatMessage("You are a helpful assistant."), new UserChatMessage(prompt) }
});
return response.Value.Content[0].Text;
}| Property | Type | Default | Description |
|---|---|---|---|
| ObservableCollection<object> | null | Collection of chat messages (TextMessage objects). |
| Author | null | Current user author information. Required to distinguish user messages from AI responses. |
| IEnumerable<string> | null | AI-driven suggestions displayed in bottom-right corner for quick responses. |
| bool | false | Shows/hides typing indicator during AI processing. |
| TypingIndicator | null | Typing indicator configuration (author, text). |
| bool | true | Shows/hides response toolbar (Copy, Regenerate, Like, Dislike). |
| ObservableCollection<ResponseToolbarItem> | Built-in items | Custom toolbar items for response actions. |
| bool | false | Shows/hides input toolbar in text input area. |
| ObservableCollection<InputToolbarItem> | null | Custom toolbar items for input area (e.g., attach file). |
| ToolbarPosition | Right | Position of input toolbar (Left or Right). |
| DataTemplate | null | Custom template for input area header (e.g., file upload info). |
| bool | false | Enables stop responding button to cancel ongoing AI responses. |
| DataTemplate | null | Custom template for stop responding button. |
| ICommand | null | Command executed when stop responding button is clicked. |
| ElementTheme | Default | Theme for the control (Light, Dark, or Default). Set in App.xaml. |
| Event | Description |
|---|---|
| Fired when user submits a prompt. Provides InputMessage and Handled properties. |
| Fired when response toolbar item is clicked. Provides item details. |
| Fired when input toolbar item is clicked. Provides item details. |
| Fired when stop responding button is clicked. Use to cancel AI operations. |