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 PromptRequest events 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 + Author binding pattern
• CurrentUser configuration
• Theme integration

OpenAI Integration

📄 Read: references/openai-integration.md

• Microsoft.SemanticKernel NuGet setup
• IChatCompletionService + Kernel configuration
• AIAssistChatService pattern for async responses
• CollectionChanged trigger to invoke AI calls
• AIMessage with ContentTemplate (AI icon)
• ViewTemplateSelector for Markdown rendering via MdXaml
• Coordinating ShowTypingIndicator with async operations

Suggestions & Typing Indicator

📄 Read: references/suggestions-and-typing-indicator.md

• Suggestions property (IEnumerable<string>) binding
• Updating suggestion chips after AI response
• TypingIndicator object setup in ViewModel
• ShowTypingIndicator property
• Toggling indicator on/off with async AI calls

Input Toolbar

📄 Read: references/input-toolbar.md

• IsInputToolbarVisible property
• InputToolbarPosition (Left/Right)
• InputToolbarItem (ItemTemplate, IsEnabled, Tooltip, Visible)
• InputToolbarItemClicked event handling
• InputToolbarHeaderTemplate for file-upload-style headers

Response Toolbar

📄 Read: references/response-toolbar.md

• IsResponseToolbarVisible property
• Built-in toolbar items: Copy, Regenerate, Like, Dislike
• ResponseToolbarItem with Index, ItemType, ItemTemplate
• ResponseToolbarItemClicked event handling
• Custom item template examples

Events & Stop Responding

📄 Read: references/events-and-stop-responding.md

• PromptRequest event + PromptRequestEventArgs
• InputMessage and Handled property pattern
• EnableStopResponding property
• StopResponding event and StopRespondingCommand (MVVM)
• StopRespondingTemplate customization

---

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
}