Implementing WinUI AI AssistView

When to Use This Skill

Use this skill when the user needs to:

Create an AI chat interface or conversational UI
Implement an AI assistant or chatbot
Integrate with AI services (OpenAI, Azure AI, etc.)
Display AI-generated responses with formatting
Show typing indicators during AI processing
Provide AI-driven suggestions for quick responses
Add custom toolbars for chat actions (copy, regenerate, like/dislike)
Allow users to stop long-running AI responses
Build customer support bots or help systems
Create intelligent conversational applications

Always apply this skill when the user mentions: AI chat, AI assistant, chatbot, conversational UI, AI responses, chat interface, AI integration, typing indicator, AI suggestions, or AI-powered conversations in WinUI applications.

Component Overview

SfAIAssistView is a Syncfusion WinUI control that provides a comprehensive AI chat interface for building intelligent and responsive applications with AI services. It offers a user-friendly conversational UI with built-in support for suggestions, typing indicators, response toolbars, and customizable appearance.

Namespace: Syncfusion.UI.Xaml.Chat
NuGet Package: Syncfusion.Chat.WinUI
Platform: WinUI 3 Desktop (.NET 5+, Windows App SDK 1.0+)

Key Advantage: Provides a complete AI chat experience out-of-the-box with built-in toolbars, suggestions, typing indicators, and stop responding features—no need to build a chat UI from scratch.

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and NuGet package setup (Syncfusion.Chat.WinUI)
Namespace imports (Syncfusion.UI.Xaml.Chat)
Basic SfAIAssistView initialization
CurrentUser and Messages properties
Creating ViewModel with TextMessage and Author classes
First complete AI chat example
License registration

AI Suggestions

📄 Read: references/suggestions.md

Suggestions property for AI-driven suggestions
Displaying quick response options
Bottom-right corner positioning
Dynamic suggestion updates
Handling suggestion selection
Use cases for expediting conversation flow

Response Toolbar

📄 Read: references/response-toolbar.md

Built-in toolbar items (Copy, Regenerate, Like, Dislike)
ResponseToolbarItem class and properties
Custom toolbar items with ItemTemplate
IsResponseToolbarVisible property
ResponseToolbarItemClicked event
Customizing toolbar appearance
Adding custom actions to responses

Input Toolbar

📄 Read: references/input-toolbar.md

InputToolbarItem class for custom input actions
Adding toolbar items to text input area
InputToolbarPosition (Left, Right)
IsInputToolbarVisible property
InputToolbarItemClicked event
InputToolbarHeaderTemplate for file uploads
Custom input area actions

Typing Indicator and Stop Responding

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

TypingIndicator property for AI processing feedback
ShowTypingIndicator boolean property
Real-time feedback during AI response generation
EnableStopResponding property
StopResponding event and command
StopRespondingTemplate customization
Canceling ongoing AI responses

Theming and Events

📄 Read: references/theming-and-events.md

RequestedTheme property (Dark, Light themes)
Theme support in App.xaml
PromptRequest event
InputMessage and Handled properties
Validating user input before processing
Custom actions on prompt submission
Theme customization

Quick Start Example

<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));
}

Common Patterns

1. Basic AI Chat with Messages

<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?" });
    }
}

When to use: Simple AI chat without suggestions or typing indicators.

2. AI Chat with Typing Indicator

<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 });
}

When to use: Show real-time feedback while AI generates responses.

3. AI Suggestions for Quick Responses

<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?"
    };
}

When to use: Expedite conversation flow with contextual quick responses.

4. Custom Response Toolbar with Actions

<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;
    }
}

When to use: Allow users to interact with AI responses (copy, regenerate, rate).

5. Custom Input Toolbar with File Upload

<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>

When to use: Allow users to attach files to AI prompts. See input-toolbar.md for full implementation.

6. Stop Responding Feature for Long AI Responses

<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();
}

When to use: Allow users to cancel long-running AI responses.

7. PromptRequest Event for Input Validation

private void PromptRequest_Event(object sender, PromptRequestEventArgs e)
{
    if (string.IsNullOrWhiteSpace(e.InputMessage.Text))
    {
        e.Handled = true;
        ShowError("Please enter a message.");
    }
}

When to use: Validate or preprocess user input before AI processing.

8. OpenAI Integration Pattern

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;
}

When to use: Integrate with OpenAI GPT models. See theming-and-events.md for theme configuration.

Key Properties

Property	Type	Default	Description
`Messages`	ObservableCollection<object>	null	Collection of chat messages (TextMessage objects).
`CurrentUser`	Author	null	Current user author information. Required to distinguish user messages from AI responses.
`Suggestions`	IEnumerable<string>	null	AI-driven suggestions displayed in bottom-right corner for quick responses.
`ShowTypingIndicator`	bool	false	Shows/hides typing indicator during AI processing.
`TypingIndicator`	TypingIndicator	null	Typing indicator configuration (author, text).
`IsResponseToolbarVisible`	bool	true	Shows/hides response toolbar (Copy, Regenerate, Like, Dislike).
`ResponseToolbarItems`	ObservableCollection<ResponseToolbarItem>	Built-in items	Custom toolbar items for response actions.
`IsInputToolbarVisible`	bool	false	Shows/hides input toolbar in text input area.
`InputToolbarItems`	ObservableCollection<InputToolbarItem>	null	Custom toolbar items for input area (e.g., attach file).
`InputToolbarPosition`	ToolbarPosition	Right	Position of input toolbar (Left or Right).
`InputToolbarHeaderTemplate`	DataTemplate	null	Custom template for input area header (e.g., file upload info).
`EnableStopResponding`	bool	false	Enables stop responding button to cancel ongoing AI responses.
`StopRespondingTemplate`	DataTemplate	null	Custom template for stop responding button.
`StopRespondingCommand`	ICommand	null	Command executed when stop responding button is clicked.
`RequestedTheme`	ElementTheme	Default	Theme for the control (Light, Dark, or Default). Set in App.xaml.

Key Events

Event	Description
`PromptRequest`	Fired when user submits a prompt. Provides InputMessage and Handled properties.
`ResponseToolbarItemClicked`	Fired when response toolbar item is clicked. Provides item details.
`InputToolbarItemClicked`	Fired when input toolbar item is clicked. Provides item details.
`StopResponding`	Fired when stop responding button is clicked. Use to cancel AI operations.

Common Use Cases

AI Chatbots and Assistants

Customer support chatbots
Virtual assistants
Help desk automation
FAQ bots
Product recommendation assistants

Best Approach: Use Messages for conversation history, Suggestions for common queries, typing indicator for feedback.

AI-Powered Development Tools

Code generation assistants
Documentation generators
Code review bots
Debugging assistants

Best Approach: Enable response toolbar for copying code, regenerating responses. Use input toolbar for file/code uploads.

Educational AI Tutors

Interactive learning assistants
Homework help bots
Language learning tutors
Subject-specific tutors

Best Approach: Use suggestions for learning paths, response toolbar for rating answers, typing indicator for engagement.

Content Generation

Writing assistants
Email drafters
Social media content creators
Marketing copy generators

Best Approach: Enable copy/regenerate in response toolbar, use suggestions for content variations.

Data Analysis and Insights

Business intelligence assistants
Data query interfaces
Report generation bots
Analytics helpers

Best Approach: Use input toolbar for data uploads, stop responding for long queries, response toolbar for export actions.

Implementation Tips

Message Management: Use ObservableCollection for Messages to automatically update UI when adding/removing messages.
Typing Indicator: Show during async AI calls, hide when response arrives. Bind to ViewModel boolean property.
Suggestions: Update dynamically based on conversation context. Clear after user selects or after few exchanges.
Error Handling: Use PromptRequest event to validate input. Catch AI service errors gracefully.
Performance: For long conversations, consider implementing message pagination or limiting visible message count.
AI Service Integration: Use async/await for AI service calls. Implement cancellation tokens with stop responding feature.
Response Toolbar: Default items (Copy, Regenerate, Like, Dislike) work automatically. Handle ResponseToolbarItemClicked for custom logic.
Input Toolbar: Use for frequently needed actions like file upload, voice input, or emoji picker.
Theme Support: Set RequestedTheme in App.xaml for app-wide theme. Control auto-adapts to light/dark mode.
Accessibility: Set Author.Name for screen readers. Ensure sufficient contrast in custom templates.

syncfusion-winui-ai-assistview