Implementing SfAIAssistView (WPF)
When to Use This Skill
Use this skill when:
- Building AI chat or assistant UIs in WPF
- Displaying message threads with user and AI responses
- Integrating OpenAI or SemanticKernel with a chat interface
- Showing typing indicators while AI processes a response
- Adding suggestion chips after AI responses
- Customizing input/response toolbars
- Handling
PromptRequestevents or Stop Responding functionality - Rendering Markdown in AI responses via
ViewTemplateSelector
NuGet Package: Syncfusion.SfChat.Wpf Namespace: Syncfusion.UI.Xaml.Chat Key Classes: SfAIAssistView, TextMessage, AIMessage, Author, TypingIndicator
Quick Start
<!-- MainWindow.xaml -->
<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Chat;assembly=Syncfusion.SfChat.WPF">
<Grid>
<Grid.DataContext>
<local:ViewModel/>
</Grid.DataContext>
<syncfusion:SfAIAssistView
Messages="{Binding Chats}"
CurrentUser="{Binding CurrentUser}"
Suggestions="{Binding Suggestions}"
ShowTypingIndicator="{Binding ShowTypingIndicator}"
TypingIndicator="{Binding TypingIndicator}" />
</Grid>
</Window>// ViewModel.cs
public class ViewModel : INotifyPropertyChanged
{
public ObservableCollection<object> Chats { get; set; }
public Author CurrentUser { get; set; }
public ViewModel()
{
Chats = new ObservableCollection<object>();
CurrentUser = new Author { Name = "User" };
Chats.Add(new TextMessage
{
Author = CurrentUser,
Text = "Hello, how can you help me?"
});
Chats.Add(new TextMessage
{
Author = new Author { Name = "AI" },
Text = "I can answer questions and help with tasks."
});
}
}Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- NuGet installation and assembly references
- XAML namespace and control declaration
- ViewModel setup with
ObservableCollection<object> TextMessage+Authorbinding patternCurrentUserconfiguration- Theme integration
OpenAI Integration
📄 Read: references/openai-integration.md
Microsoft.SemanticKernelNuGet setupIChatCompletionService+KernelconfigurationAIAssistChatServicepattern for async responsesCollectionChangedtrigger to invoke AI callsAIMessagewithContentTemplate(AI icon)ViewTemplateSelectorfor Markdown rendering via MdXaml- Coordinating
ShowTypingIndicatorwith async operations
Suggestions & Typing Indicator
📄 Read: references/suggestions-and-typing-indicator.md
Suggestionsproperty (IEnumerable<string>) binding- Updating suggestion chips after AI response
TypingIndicatorobject setup in ViewModelShowTypingIndicatorproperty- Toggling indicator on/off with async AI calls
Input Toolbar
📄 Read: references/input-toolbar.md
IsInputToolbarVisiblepropertyInputToolbarPosition(Left/Right)InputToolbarItem(ItemTemplate, IsEnabled, Tooltip, Visible)InputToolbarItemClickedevent handlingInputToolbarHeaderTemplatefor file-upload-style headers
Response Toolbar
📄 Read: references/response-toolbar.md
IsResponseToolbarVisibleproperty- Built-in toolbar items: Copy, Regenerate, Like, Dislike
ResponseToolbarItemwithIndex,ItemType,ItemTemplateResponseToolbarItemClickedevent handling- Custom item template examples
Events & Stop Responding
📄 Read: references/events-and-stop-responding.md
PromptRequestevent +PromptRequestEventArgsInputMessageandHandledproperty patternEnableStopRespondingpropertyStopRespondingevent andStopRespondingCommand(MVVM)StopRespondingTemplatecustomization
Key Properties
| Property | Type | Purpose |
|---|---|---|
Messages | ObservableCollection<object> | Chat message collection |
CurrentUser | Author | Identifies the local user |
Suggestions | IEnumerable<string> | Suggestion chips shown after AI response |
ShowTypingIndicator | bool | Shows/hides typing animation |
TypingIndicator | TypingIndicator | Typing indicator with Author |
IsInputToolbarVisible | bool | Shows custom input toolbar (default: false) |
IsResponseToolbarVisible | bool | Shows response toolbar (default: true) |
EnableStopResponding | bool | Enables Stop Responding button (default: false) |
ViewTemplateSelector | DataTemplateSelector | Custom rendering per message type |
Common Patterns
User sends message → AI responds
// Subscribe to CollectionChanged on Chats
Chats.CollectionChanged += async (s, e) =>
{
if (e.Action == NotifyCollectionChangedAction.Add
&& e.NewItems[0] is TextMessage msg
&& msg.Author.Name == CurrentUser.Name)
{
ShowTypingIndicator = true;
var reply = await aiService.GetResponseAsync(msg.Text);
Chats.Add(new AIMessage { Author = aiAuthor, Text = reply });
ShowTypingIndicator = false;
}
};Adding suggestions after AI response
Suggestions = new List<string> { "Tell me more", "Give an example", "Summarize" };Handling PromptRequest event
<syncfusion:SfAIAssistView PromptRequest="OnPromptRequest" />private void OnPromptRequest(object sender, PromptRequestEventArgs e)
{
// e.InputMessage contains the user's text
e.Handled = true; // Prevent default processing
}