syncfusion-winforms-ai-assistview

实现 AI AssistView

Syncfusion Windows Forms AI AssistView（SfAIAssistView）是一款功能强大的对话界面控件，可用于构建 AI 驱动的聊天应用，并支持建议、输入指示器、自定义视图以及与 OpenAI/ChatGPT 的无缝集成。

何时使用此技能

在以下情况下使用此技能：

• 在 Windows Forms 应用程序中构建 AI 驱动的聊天界面
• 将 OpenAI、ChatGPT 或 Azure OpenAI 服务集成到桌面应用中
• 创建包含消息气泡和聊天记录的对话式 UI
• 显示 AI 驱动的回复建议，方便用户快速回复
• 在异步生成 AI 回复期间显示输入指示器
• 使用自定义 BotView 和 UserView 自定义聊天消息外观
• 通过验证和自定义操作处理用户提示词
• 通过自定义横幅构建智能助手
• 通过数据绑定实现实时聊天体验

组件概述

主要功能：

• 建议：显示可选的回复建议，加快对话进程
• 输入指示器：在 AI 处理期间显示加载动画
• 横幅自定义：可自定义标题，其中包含欢迎消息和 AI 服务信息
• 自定义视图：创建自定义 BotView 和 UserView 来呈现消息
• 主题支持：自动适配浅色/深色主题
• OpenAI 集成：通过 Semantic Kernel 无缝连接 OpenAI 服务
• 事件：使用 PromptRequest 事件进行输入验证和自定义操作
• 数据绑定：全面支持 ObservableCollection 和 INotifyPropertyChanged

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 程序集部署和 NuGet 包
• 创建包含 SfAIAssistView 的 Windows Forms 项目
• 通过 Designer 和代码添加控件
• 创建包含消息集合的 ViewModel
• 消息绑定和 Author 配置
• 基本聊天实现

建议

📄 阅读： references/suggestions.md

• 显示 AI 驱动的建议
• 将建议绑定到 ViewModel
• 快速回复场景
• 动态更新建议

输入指示器

📄 阅读： references/typing-indicator.md

• ShowTypingIndicator 属性
• 异步通信反馈
• 自定义指示器外观
• Author 和 DisplayText 配置

自定义

📄 阅读： references/customization.md

• 使用 SetBannerView 自定义 BannerView
• 使用 SetBotView 创建自定义 BotView
• 使用 SetUserView 创建自定义 UserView
• 在 Bot 回复中添加交互式按钮
• 自定义样式和布局

事件

📄 阅读： references/events.md

• 处理 PromptRequest 事件
• 输入验证
• 自定义操作触发
• Handled 属性的用法

OpenAI 集成

📄 阅读： references/openai-integration.md

• 连接 OpenAI/ChatGPT
• 配置 Microsoft Semantic Kernel
• 配置 API 凭据
• NonStreamingChat 实现
• 异步回复处理
• 完整的可运行示例

快速入门示例

基本聊天界面

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

常见模式

模式 1：带建议的聊天

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

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

// 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";

模式 3：自定义横幅

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

模式 4：提示词验证

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

主要属性和方法

属性/方法	类型	说明
Messages	ObservableCollection	聊天消息集合
Suggestions	IEnumerable	回复建议项
ShowTypingIndicator	bool	显示/隐藏输入指示器
TypingIndicator	TypingIndicator	输入指示器配置
User	Author	当前用户信息
SetBannerView()	Method	自定义横幅外观
SetBotView()	Method	设置自定义机器人消息视图
SetUserView()	Method	设置自定义用户消息视图
PromptRequest	Event	用户提交提示词时触发

常见用例

用例 1：客户支持聊天机器人

构建 AI 驱动的客户支持界面，提供常见问题的建议标签，并在生成回复时显示输入指示器。

用例 2：虚拟助手

创建智能桌面助手，配有自定义品牌横幅、个性化机器人回复，并集成 OpenAI，实现自然对话。

用例 3：交互式文档

实现对话式文档浏览器，让用户可以询问软件功能相关问题，并获取 AI 生成的说明。

用例 4：培训模拟器

构建交互式培训应用，让 AI 通过循序渐进的对话式说明引导用户完成操作流程。

安装

Install-Package Syncfusion.SfAIAssistView.WinForms

集成 OpenAI：

Install-Package Microsoft.SemanticKernel

故障排除

消息未显示：

• 验证数据绑定设置是否正确
• 确保使用 ObservableCollection（而非 List）
• 检查在集合更新时是否调用了 RaisePropertyChanged

输入指示器未显示：

• 在异步操作前设置 ShowTypingIndicator = true
• 配置 TypingIndicator.Author 属性
• 确保已为 ShowTypingIndicator 建立绑定

建议未显示：

• 将 Suggestions 属性绑定到 ViewModel
• 使用 IEnumerable 类型
• 在机器人回复后更新建议

OpenAI 连接问题：

• 验证 API 密钥是否有效且未过期
• 检查 API 端点 URL 是否正确
• 确保已安装 Microsoft.SemanticKernel NuGet
• 确认网络连接正常