syncfusion-winforms-ai-assistview

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing AI AssistView

实现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.
Syncfusion Windows Forms AI AssistView(SfAIAssistView)是一款功能强大的对话界面控件,用于构建AI驱动的聊天应用,支持建议功能、输入指示器、自定义视图,以及与OpenAI/ChatGPT的无缝集成。

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
当用户需要以下功能时,可使用本技能:
  • 在Windows Forms应用中构建AI驱动的聊天界面
  • 将OpenAI、ChatGPT或Azure OpenAI服务集成到桌面应用中
  • 创建带有消息气泡和聊天历史的对话式UI
  • 显示AI生成的回复建议,方便用户快速响应
  • 在AI异步生成回复期间显示输入指示器
  • 通过自定义BotView和UserView来定制聊天消息的外观
  • 通过验证和自定义操作处理用户提示
  • 构建支持横幅自定义的智能助手
  • 通过数据绑定实现实时聊天体验

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
核心功能:
  • 建议功能:显示可选择的回复建议,加快对话流程
  • 输入指示器:AI处理期间显示加载动画
  • 横幅自定义:可自定义标题栏,支持欢迎消息和AI服务信息展示
  • 自定义视图:创建自定义BotView和UserView来呈现消息
  • 主题支持:自动适配浅色/深色主题
  • OpenAI集成:通过Semantic Kernel与OpenAI服务无缝连接
  • 事件支持:PromptRequest事件用于输入验证和自定义操作
  • 数据绑定:全面支持ObservableCollection和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
📄 阅读: references/getting-started.md
  • 程序集部署与NuGet包
  • 创建包含SfAIAssistView的Windows Forms项目
  • 通过设计器和代码添加控件
  • 创建带有消息集合的ViewModel
  • 消息绑定与Author配置
  • 基础聊天功能实现

Suggestions

建议功能

📄 Read: references/suggestions.md
  • Displaying AI-driven suggestions
  • Binding suggestions to ViewModel
  • Quick response scenarios
  • Dynamic suggestion updates
📄 阅读: references/suggestions.md
  • 显示AI生成的建议内容
  • 将建议内容绑定到ViewModel
  • 快速回复场景应用
  • 动态更新建议内容

Typing Indicator

输入指示器

📄 Read: references/typing-indicator.md
  • ShowTypingIndicator property
  • Async communication feedback
  • Customizing indicator appearance
  • Author and DisplayText configuration
📄 阅读: references/typing-indicator.md
  • ShowTypingIndicator属性
  • 异步通信反馈
  • 自定义指示器外观
  • Author与DisplayText配置

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
📄 阅读: references/customization.md
  • 使用SetBannerView自定义BannerView
  • 创建自定义BotView并通过SetBotView设置
  • 创建自定义UserView并通过SetUserView设置
  • 机器人回复中的交互按钮
  • 自定义样式与布局

Events

事件处理

📄 Read: references/events.md
  • PromptRequest event handling
  • Input validation
  • Custom action triggers
  • Handled property usage
📄 阅读: references/events.md
  • PromptRequest事件处理
  • 输入验证
  • 自定义操作触发
  • Handled属性的使用

OpenAI Integration

OpenAI集成

📄 Read: references/openai-integration.md
  • Connecting to OpenAI/ChatGPT
  • Microsoft Semantic Kernel setup
  • API credentials configuration
  • NonStreamingChat implementation
  • Async response handling
  • Complete working example
📄 阅读: references/openai-integration.md
  • 连接OpenAI/ChatGPT
  • Microsoft Semantic Kernel配置
  • API凭证配置
  • NonStreamingChat实现
  • 异步回复处理
  • 完整工作示例

Quick Start Example

快速入门示例

Basic Chat Interface

基础聊天界面

csharp
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));
        }
    }
}
csharp
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();
            
            // 创建AI AssistView
            SfAIAssistView sfAIAssistView1 = new SfAIAssistView();
            sfAIAssistView1.Dock = DockStyle.Fill;
            this.Controls.Add(sfAIAssistView1);
            
            // 绑定消息
            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()
        {
            // 用户消息
            this.Chats.Add(new TextMessage 
            { 
                Author = CurrentUser, 
                Text = "What is Windows Forms?" 
            });
            
            await Task.Delay(1000);
            
            // 机器人回复
            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

模式1:带建议功能的聊天

csharp
// 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);
csharp
// 在ViewModel中
private IEnumerable<string> suggestion;

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

// 机器人回复后设置建议内容
Suggestion = new ObservableCollection<string> 
{ 
    "Tell me more", 
    "What are alternatives?" 
};

// 在窗体中
sfAIAssistView1.DataBindings.Add("Suggestions", viewModel, "Suggestion", 
    true, DataSourceUpdateMode.OnPropertyChanged);

Pattern 2: Typing Indicator During AI Processing

模式2:AI处理期间显示输入指示器

csharp
// 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";
csharp
// 在ViewModel中
private bool showTypingIndicator;

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

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

// 在窗体中
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

模式3:自定义横幅

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

模式4:提示验证

csharp
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);
};
csharp
sfAIAssistView1.PromptRequest += (sender, e) =>
{
    var message = e.Message as TextMessage;
    if (message == null) return;
    
    // 验证输入
    if (string.IsNullOrWhiteSpace(message.Text))
    {
        e.Handled = true; // 阻止添加到消息列表
        MessageBox.Show("Please enter a message.");
        return;
    }
    
    // 自定义处理
    LogUserInput(message.Text);
};

Key Properties and Methods

关键属性与方法

Property/MethodTypeDescription
Messages
ObservableCollection<object>Chat message collection
Suggestions
IEnumerable<string>Response suggestion items
ShowTypingIndicator
boolShows/hides typing indicator
TypingIndicator
TypingIndicatorTyping indicator configuration
User
AuthorCurrent user information
SetBannerView()
MethodCustomize banner appearance
SetBotView()
MethodSet custom bot message view
SetUserView()
MethodSet custom user message view
PromptRequest
EventFires when user submits prompt
属性/方法类型描述
Messages
ObservableCollection<object>聊天消息集合
Suggestions
IEnumerable<string>回复建议项
ShowTypingIndicator
bool显示/隐藏输入指示器
TypingIndicator
TypingIndicator输入指示器配置
User
Author当前用户信息
SetBannerView()
方法自定义横幅外观
SetBotView()
方法设置自定义机器人消息视图
SetUserView()
方法设置自定义用户消息视图
PromptRequest
事件用户提交提示时触发

Common Use Cases

常见应用场景

Use Case 1: Customer Support Chatbot

应用场景1:客户支持聊天机器人

Build an AI-powered customer support interface with suggestion chips for common questions and typing indicators during response generation.
构建AI驱动的客户支持界面,包含常见问题的建议选项,以及回复生成期间的输入指示器。

Use Case 2: Virtual Assistant

应用场景2:虚拟助手

Create an intelligent desktop assistant with custom branded banner, personalized bot responses, and OpenAI integration for natural conversations.
创建智能桌面助手,支持自定义品牌横幅、个性化机器人回复,并集成OpenAI实现自然对话。

Use Case 3: Interactive Documentation

应用场景3:交互式文档

Implement a conversational documentation browser where users ask questions about software features and receive AI-generated explanations.
实现对话式文档浏览器,用户可询问软件功能相关问题,获取AI生成的解释内容。

Use Case 4: Training Simulator

应用场景4:培训模拟器

Build interactive training applications where AI guides users through procedures with step-by-step conversational instructions.
构建交互式培训应用,AI通过分步对话式指导引导用户完成操作流程。

Installation

安装

powershell
Install-Package Syncfusion.SfAIAssistView.WinForms
For OpenAI integration:
powershell
Install-Package Microsoft.SemanticKernel
powershell
Install-Package Syncfusion.SfAIAssistView.WinForms
OpenAI集成所需包:
powershell
Install-Package Microsoft.SemanticKernel

Troubleshooting

故障排除

Messages not displaying:
  • Verify data binding is set correctly
  • Ensure ObservableCollection is used (not List<T>)
  • 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<string> 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
消息不显示:
  • 验证数据绑定设置是否正确
  • 确保使用ObservableCollection而非List<T>
  • 确认集合更新时调用了RaisePropertyChanged
输入指示器不显示:
  • 异步操作前设置
    ShowTypingIndicator = true
  • 配置
    TypingIndicator.Author
    属性
  • 确保已为ShowTypingIndicator建立绑定
建议内容不显示:
  • 将Suggestions属性绑定到ViewModel
  • 使用IEnumerable<string>类型
  • 机器人回复后更新建议内容
OpenAI连接问题:
  • 验证API密钥有效且未过期
  • 检查API端点URL是否正确
  • 确保已安装Microsoft.SemanticKernel NuGet包
  • 确认网络连接正常