syncfusion-winforms-ai-assistview

Implementing AI AssistView

The Syncfusion Windows Forms AI AssistView (SfAIAssistView) is a sophisticated conversational interface control for building AI-powered chat applications with support for suggestions, typing indicators, custom views, and seamless OpenAI/ChatGPT integration.

When to Use This Skill

Use this skill when the user needs to:

• Build AI-powered chat interfaces in Windows Forms applications
• Integrate OpenAI, ChatGPT, or Azure OpenAI services into desktop apps
• Create conversational UI with message bubbles and chat history
• Display AI-driven response suggestions for quick user responses
• Show typing indicators during async AI response generation
• Customize chat message appearance with custom BotView and UserView
• Handle user prompts with validation and custom actions
• Build intelligent assistants with banner customization
• Implement real-time chat experiences with data binding

Component Overview

Key Features:

• Suggestions: Display selectable response suggestions to expedite conversation flow
• Typing Indicator: Show loading animation during AI processing
• Banner Customization: Customizable header with welcome messages and AI service info
• Custom Views: Create custom BotView and UserView for message presentation
• Theme Support: Automatic light/dark theme adaptation
• OpenAI Integration: Seamless connection with OpenAI services via Semantic Kernel
• Events: PromptRequest event for input validation and custom actions
• Data Binding: Full support for ObservableCollection and INotifyPropertyChanged

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Assembly deployment and NuGet packages
• Creating Windows Forms project with SfAIAssistView
• Adding control via Designer and Code
• Creating ViewModel with message collection
• Message binding and Author configuration
• Basic chat implementation

Suggestions

📄 Read: references/suggestions.md

• Displaying AI-driven suggestions
• Binding suggestions to ViewModel
• Quick response scenarios
• Dynamic suggestion updates

Typing Indicator

📄 Read: references/typing-indicator.md

• ShowTypingIndicator property
• Async communication feedback
• Customizing indicator appearance
• Author and DisplayText configuration

Customization

📄 Read: references/customization.md

• BannerView customization with SetBannerView
• Creating custom BotView with SetBotView
• Creating custom UserView with SetUserView
• Interactive buttons in bot responses
• Custom styling and layouts

Events

📄 Read: references/events.md

• PromptRequest event handling
• Input validation
• Custom action triggers
• Handled property usage

OpenAI Integration

📄 Read: references/openai-integration.md

• Connecting to OpenAI/ChatGPT
• Microsoft Semantic Kernel setup
• API credentials configuration
• NonStreamingChat implementation
• Async response handling
• Complete working example

Quick Start Example

Basic Chat Interface

using Syncfusion.WinForms.AIAssistView;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace AIAssistViewDemo
{
    public partial class Form1 : Form
    {
        ViewModel viewModel;
        
        public Form1()
        {
            InitializeComponent();
            viewModel = new ViewModel();
            
            // Create AI AssistView
            SfAIAssistView sfAIAssistView1 = new SfAIAssistView();
            sfAIAssistView1.Dock = DockStyle.Fill;
            this.Controls.Add(sfAIAssistView1);
            
            // Bind messages
            sfAIAssistView1.DataBindings.Add("Messages", viewModel, "Chats", 
                true, DataSourceUpdateMode.OnPropertyChanged);
        }
    }
    
    // ViewModel
    public class ViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<object> chats;
        private Author currentUser;
        
        public ViewModel()
        {
            this.Chats = new ObservableCollection<object>();
            this.CurrentUser = new Author { Name = "John" };
            this.GenerateMessages();
        }
        
        private async void GenerateMessages()
        {
            // User message
            this.Chats.Add(new TextMessage 
            { 
                Author = CurrentUser, 
                Text = "What is Windows Forms?" 
            });
            
            await Task.Delay(1000);
            
            // Bot response
            this.Chats.Add(new TextMessage 
            { 
                Author = new Author { Name = "Bot" }, 
                Text = "Windows Forms is a GUI framework for building Windows desktop applications." 
            });
        }
        
        public ObservableCollection<object> Chats
        {
            get => this.chats;
            set
            {
                this.chats = value;
                RaisePropertyChanged("Chats");
            }
        }
        
        public Author CurrentUser
        {
            get => this.currentUser;
            set
            {
                this.currentUser = value;
                RaisePropertyChanged("CurrentUser");
            }
        }
        
        public event PropertyChangedEventHandler PropertyChanged;
        
        public void RaisePropertyChanged(string propName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        }
    }
}

Common Patterns

Pattern 1: Chat with Suggestions

// In ViewModel
private IEnumerable<string> suggestion;

public IEnumerable<string> Suggestion
{
    get => this.suggestion;
    set
    {
        this.suggestion = value;
        RaisePropertyChanged("Suggestion");
    }
}

// Set suggestions after bot response
Suggestion = new ObservableCollection<string> 
{ 
    "Tell me more", 
    "What are alternatives?" 
};

// In Form
sfAIAssistView1.DataBindings.Add("Suggestions", viewModel, "Suggestion", 
    true, DataSourceUpdateMode.OnPropertyChanged);

Pattern 2: Typing Indicator During AI Processing

// In ViewModel
private bool showTypingIndicator;

public bool ShowTypingIndicator
{
    get => this.showTypingIndicator;
    set
    {
        this.showTypingIndicator = value;
        RaisePropertyChanged("ShowTypingIndicator");
    }
}

// Usage
ShowTypingIndicator = true;
var response = await GetAIResponse(userMessage);
Chats.Add(new TextMessage { Author = botAuthor, Text = response });
ShowTypingIndicator = false;

// In Form
sfAIAssistView1.DataBindings.Add("ShowTypingIndicator", viewModel, 
    "ShowTypingIndicator", true, DataSourceUpdateMode.OnPropertyChanged);
    
sfAIAssistView1.TypingIndicator.Author = new Author 
{ 
    Name = "Bot", 
    AvatarImage = Image.FromFile(@"Assets\bot.png") 
};
sfAIAssistView1.TypingIndicator.DisplayText = "Typing";

Pattern 3: Custom Banner

BannerStyle customStyle = new BannerStyle
{
    TitleFont = new Font("Segoe UI", 14F, FontStyle.Bold),
    SubTitleFont = new Font("Segoe UI", 12F, FontStyle.Italic),
    ImageSize = AvatarSize.Medium,
    SubTitleColor = Color.Gray,
    TitleColor = Color.DarkBlue
};

string title = "AI Assistant";
string subTitle = "Powered by OpenAI";
sfAIAssistView1.SetBannerView(title, subTitle, 
    Image.FromFile(@"Assets\ai-icon.png"), customStyle);

Pattern 4: Prompt Validation

sfAIAssistView1.PromptRequest += (sender, e) =>
{
    var message = e.Message as TextMessage;
    if (message == null) return;
    
    // Validate input
    if (string.IsNullOrWhiteSpace(message.Text))
    {
        e.Handled = true; // Prevent adding to messages
        MessageBox.Show("Please enter a message.");
        return;
    }
    
    // Custom processing
    LogUserInput(message.Text);
};

Key Properties and Methods

Property/Method	Type	Description
Messages	ObservableCollection	Chat message collection
Suggestions	IEnumerable	Response suggestion items
ShowTypingIndicator	bool	Shows/hides typing indicator
TypingIndicator	TypingIndicator	Typing indicator configuration
User	Author	Current user information
SetBannerView()	Method	Customize banner appearance
SetBotView()	Method	Set custom bot message view
SetUserView()	Method	Set custom user message view
PromptRequest	Event	Fires when user submits prompt

Common Use Cases

Use Case 1: Customer Support Chatbot

Build an AI-powered customer support interface with suggestion chips for common questions and typing indicators during response generation.

Use Case 2: Virtual Assistant

Create an intelligent desktop assistant with custom branded banner, personalized bot responses, and OpenAI integration for natural conversations.

Use Case 3: Interactive Documentation

Implement a conversational documentation browser where users ask questions about software features and receive AI-generated explanations.

Use Case 4: Training Simulator

Build interactive training applications where AI guides users through procedures with step-by-step conversational instructions.

Installation

Install-Package Syncfusion.SfAIAssistView.WinForms

For OpenAI integration:

Install-Package Microsoft.SemanticKernel

Troubleshooting

Messages not displaying:

• Verify data binding is set correctly
• Ensure ObservableCollection is used (not List)
• Check that RaisePropertyChanged is called on collection updates

Typing indicator not showing:

• Set ShowTypingIndicator = true before async operation
• Configure TypingIndicator.Author property
• Ensure binding is established for ShowTypingIndicator

Suggestions not appearing:

• Bind Suggestions property to ViewModel
• Use IEnumerable type
• Update suggestions after bot responses

OpenAI connection issues:

• Verify API key is valid and not expired
• Check API endpoint URL is correct
• Ensure Microsoft.SemanticKernel NuGet is installed
• Confirm network connectivity