Implementing SfAIAssistView (WPF)

When to Use This Skill

• 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

Syncfusion.SfChat.Wpf

Syncfusion.UI.Xaml.Chat

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

• 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

• 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

• 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

• IsInputToolbarVisible

  property

• InputToolbarPosition

  (Left/Right)

• InputToolbarItem

  (ItemTemplate, IsEnabled, Tooltip, Visible)

• InputToolbarItemClicked

  event handling

• InputToolbarHeaderTemplate

  for file-upload-style headers

Response Toolbar

• 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

• PromptRequest

  event +

  PromptRequestEventArgs

• InputMessage

  and

  Handled

  property pattern

• EnableStopResponding

  property

• StopResponding

  event and

  StopRespondingCommand

  (MVVM)

• StopRespondingTemplate

  customization

Key Properties

Messages

ObservableCollection<object>

CurrentUser

Author

Suggestions

IEnumerable<string>

ShowTypingIndicator

bool

TypingIndicator

TypingIndicator

IsInputToolbarVisible

bool

IsResponseToolbarVisible

bool

EnableStopResponding

bool

ViewTemplateSelector

DataTemplateSelector

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
}