syncfusion-winforms-ai-assistview
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing 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/Method | Type | Description |
|---|---|---|
| ObservableCollection<object> | Chat message collection |
| IEnumerable<string> | Response suggestion items |
| bool | Shows/hides typing indicator |
| TypingIndicator | Typing indicator configuration |
| Author | Current user information |
| Method | Customize banner appearance |
| Method | Set custom bot message view |
| Method | Set custom user message view |
| Event | Fires when user submits prompt |
| 属性/方法 | 类型 | 描述 |
|---|---|---|
| ObservableCollection<object> | 聊天消息集合 |
| IEnumerable<string> | 回复建议项 |
| bool | 显示/隐藏输入指示器 |
| TypingIndicator | 输入指示器配置 |
| Author | 当前用户信息 |
| 方法 | 自定义横幅外观 |
| 方法 | 设置自定义机器人消息视图 |
| 方法 | 设置自定义用户消息视图 |
| 事件 | 用户提交提示时触发 |
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.WinFormsFor OpenAI integration:
powershell
Install-Package Microsoft.SemanticKernelpowershell
Install-Package Syncfusion.SfAIAssistView.WinFormsOpenAI集成所需包:
powershell
Install-Package Microsoft.SemanticKernelTroubleshooting
故障排除
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 before async operation
ShowTypingIndicator = true - Configure property
TypingIndicator.Author - 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包
- 确认网络连接正常