syncfusion-winui-ai-assistview
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing WinUI AI AssistView
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.
当用户需要实现以下需求时可使用本指南:
- 创建AI聊天界面或会话式UI
- 实现AI助手或聊天机器人
- 对接AI服务(OpenAI、Azure AI等)
- 展示带格式的AI生成响应
- 在AI处理请求时显示输入指示器
- 提供AI驱动的快速回复建议
- 添加用于聊天操作的自定义工具栏(复制、重新生成、点赞/点踩)
- 允许用户终止运行时间过长的AI响应
- 搭建客户支持机器人或帮助系统
- 构建智能会话类应用
当用户提及WinUI应用中的以下内容时务必使用本指南: AI聊天、AI助手、聊天机器人、会话式UI、AI响应、聊天界面、AI集成、输入指示器、AI建议、AI驱动会话。
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:
NuGet Package:
Platform: WinUI 3 Desktop (.NET 5+, Windows App SDK 1.0+)
Syncfusion.UI.Xaml.ChatNuGet Package:
Syncfusion.Chat.WinUIPlatform: 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.
SfAIAssistView 是Syncfusion推出的WinUI控件,提供了完整的AI聊天界面,可用于对接AI服务构建智能响应式应用。它提供了用户友好的会话式UI,内置支持建议功能、输入指示器、响应工具栏,还支持自定义外观。
命名空间:
NuGet包:
支持平台: WinUI 3 桌面端(.NET 5+,Windows App SDK 1.0+)
Syncfusion.UI.Xaml.ChatNuGet包:
Syncfusion.Chat.WinUI支持平台: WinUI 3 桌面端(.NET 5+,Windows App SDK 1.0+)
核心优势: 开箱即用提供完整的AI聊天体验,内置工具栏、建议、输入指示器和终止响应功能,无需从零搭建聊天UI。
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
📄 阅读: references/getting-started.md
- 安装与NuGet包配置(Syncfusion.Chat.WinUI)
- 命名空间导入(Syncfusion.UI.Xaml.Chat)
- SfAIAssistView基础初始化
- CurrentUser与Messages属性说明
- 使用TextMessage和Author类创建ViewModel
- 首个完整AI聊天示例
- 许可证注册
AI Suggestions
AI建议功能
📄 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
📄 阅读: references/suggestions.md
- 用于存储AI驱动建议的Suggestions属性
- 展示快速回复选项
- 右下角定位配置
- 动态更新建议
- 处理建议选中事件
- 加速会话流程的使用场景
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
📄 阅读: references/response-toolbar.md
- 内置工具栏项(复制、重新生成、点赞、点踩)
- ResponseToolbarItem类与属性说明
- 使用ItemTemplate自定义工具栏项
- IsResponseToolbarVisible属性说明
- ResponseToolbarItemClicked事件说明
- 自定义工具栏外观
- 为响应添加自定义操作
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
📄 阅读: references/input-toolbar.md
- 用于自定义输入操作的InputToolbarItem类
- 为文本输入区域添加工具栏项
- InputToolbarPosition(左侧、右侧)配置
- IsInputToolbarVisible属性说明
- InputToolbarItemClicked事件说明
- 用于文件上传的InputToolbarHeaderTemplate
- 自定义输入区域操作
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
📄 阅读: references/typing-and-stop-responding.md
- 用于AI处理状态反馈的TypingIndicator属性
- ShowTypingIndicator布尔属性说明
- AI生成响应时的实时反馈
- EnableStopResponding属性说明
- StopResponding事件与命令说明
- StopRespondingTemplate自定义配置
- 取消进行中的AI响应
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
📄 阅读: references/theming-and-events.md
- RequestedTheme属性(深色、浅色主题)
- App.xaml中的主题支持
- PromptRequest事件说明
- InputMessage与Handled属性说明
- 处理前的用户输入校验
- 提交提示词时的自定义操作
- 主题自定义
Quick Start Example
快速入门示例
xaml
<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>csharp
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));
}xaml
<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>csharp
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
1. 带消息的基础AI聊天
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"/>csharp
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.
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"/>csharp
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?" });
}
}适用场景: 无需建议或输入指示器的简单AI聊天场景。
2. AI Chat with Typing Indicator
2. 带输入指示器的AI聊天
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
ShowTypingIndicator="{Binding IsAIProcessing}"
TypingIndicator="{Binding TypingIndicator}"/>csharp
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.
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
ShowTypingIndicator="{Binding IsAIProcessing}"
TypingIndicator="{Binding TypingIndicator}"/>csharp
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 });
}适用场景: AI生成响应时需要展示实时反馈的场景。
3. AI Suggestions for Quick Responses
3. 提供快速回复的AI建议功能
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
Suggestions="{Binding CurrentSuggestions}"/>csharp
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.
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
Suggestions="{Binding CurrentSuggestions}"/>csharp
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?"
};
}适用场景: 需要通过上下文相关的快速回复加速会话流程的场景。
4. Custom Response Toolbar with Actions
4. 带操作的自定义响应工具栏
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
IsResponseToolbarVisible="True"
ResponseToolbarItemClicked="ResponseToolbar_ItemClicked"/>csharp
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).
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
IsResponseToolbarVisible="True"
ResponseToolbarItemClicked="ResponseToolbar_ItemClicked"/>csharp
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;
}
}适用场景: 需要允许用户与AI响应交互(复制、重新生成、评分)的场景。
5. Custom Input Toolbar with File Upload
5. 支持文件上传的自定义输入工具栏
xaml
<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.
xaml
<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>适用场景: 需要允许用户向AI提示词附加文件的场景。完整实现请参考 input-toolbar.md。
6. Stop Responding Feature for Long AI Responses
6. 针对长AI响应的终止响应功能
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
EnableStopResponding="True"
StopResponding="StopResponding_Event"/>csharp
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.
xaml
<syncfusion:SfAIAssistView
CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"
EnableStopResponding="True"
StopResponding="StopResponding_Event"/>csharp
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();
}适用场景: 需要允许用户取消运行时间过长的AI响应的场景。
7. PromptRequest Event for Input Validation
7. 用于输入校验的PromptRequest事件
csharp
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.
csharp
private void PromptRequest_Event(object sender, PromptRequestEventArgs e)
{
if (string.IsNullOrWhiteSpace(e.InputMessage.Text))
{
e.Handled = true;
ShowError("Please enter a message.");
}
}适用场景: 需要在AI处理前校验或预处理用户输入的场景。
8. OpenAI Integration Pattern
8. OpenAI集成模式
csharp
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.
csharp
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;
}适用场景: 需要对接OpenAI GPT模型的场景。主题配置请参考 theming-and-events.md。
Key Properties
核心属性
| Property | Type | Default | Description |
|---|---|---|---|
| ObservableCollection<object> | null | Collection of chat messages (TextMessage objects). |
| Author | null | Current user author information. Required to distinguish user messages from AI responses. |
| IEnumerable<string> | null | AI-driven suggestions displayed in bottom-right corner for quick responses. |
| bool | false | Shows/hides typing indicator during AI processing. |
| TypingIndicator | null | Typing indicator configuration (author, text). |
| bool | true | Shows/hides response toolbar (Copy, Regenerate, Like, Dislike). |
| ObservableCollection<ResponseToolbarItem> | Built-in items | Custom toolbar items for response actions. |
| bool | false | Shows/hides input toolbar in text input area. |
| ObservableCollection<InputToolbarItem> | null | Custom toolbar items for input area (e.g., attach file). |
| ToolbarPosition | Right | Position of input toolbar (Left or Right). |
| DataTemplate | null | Custom template for input area header (e.g., file upload info). |
| bool | false | Enables stop responding button to cancel ongoing AI responses. |
| DataTemplate | null | Custom template for stop responding button. |
| ICommand | null | Command executed when stop responding button is clicked. |
| ElementTheme | Default | Theme for the control (Light, Dark, or Default). Set in App.xaml. |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| ObservableCollection<object> | null | 聊天消息集合(TextMessage对象)。 |
| Author | null | 当前用户的作者信息,用于区分用户消息与AI响应,必填。 |
| IEnumerable<string> | null | AI驱动的建议内容,显示在右下角用于快速回复。 |
| bool | false | AI处理时显示/隐藏输入指示器。 |
| TypingIndicator | null | 输入指示器配置(作者、文本)。 |
| bool | true | 显示/隐藏响应工具栏(复制、重新生成、点赞、点踩)。 |
| ObservableCollection<ResponseToolbarItem> | 内置项 | 用于响应操作的自定义工具栏项。 |
| bool | false | 显示/隐藏文本输入区域的输入工具栏。 |
| ObservableCollection<InputToolbarItem> | null | 输入区域的自定义工具栏项(例如附件上传)。 |
| ToolbarPosition | Right | 输入工具栏的位置(左侧或右侧)。 |
| DataTemplate | null | 输入区域头部的自定义模板(例如文件上传信息)。 |
| bool | false | 启用终止响应按钮,可取消进行中的AI响应。 |
| DataTemplate | null | 终止响应按钮的自定义模板。 |
| ICommand | null | 点击终止响应按钮时执行的命令。 |
| ElementTheme | Default | 控件的主题(浅色、深色或默认),在App.xaml中设置。 |
Key Events
核心事件
| Event | Description |
|---|---|
| Fired when user submits a prompt. Provides InputMessage and Handled properties. |
| Fired when response toolbar item is clicked. Provides item details. |
| Fired when input toolbar item is clicked. Provides item details. |
| Fired when stop responding button is clicked. Use to cancel AI operations. |
| 事件 | 说明 |
|---|---|
| 用户提交提示词时触发,提供InputMessage和Handled属性。 |
| 点击响应工具栏项时触发,提供项的详细信息。 |
| 点击输入工具栏项时触发,提供项的详细信息。 |
| 点击终止响应按钮时触发,用于取消AI操作。 |
Common Use Cases
常见使用场景
AI Chatbots and Assistants
AI聊天机器人与助手
- 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.
- 客户支持聊天机器人
- 虚拟助手
- 服务台自动化
- FAQ机器人
- 产品推荐助手
最佳实践: 使用Messages存储会话历史,Suggestions提供常见查询,输入指示器提供状态反馈。
AI-Powered Development Tools
AI驱动开发工具
- 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
教育AI导师
- 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.
-
消息管理: 使用ObservableCollection作为Messages的类型,添加/删除消息时可自动更新UI。
-
输入指示器: 异步调用AI服务时显示,响应返回后隐藏,绑定到ViewModel的布尔属性即可。
-
建议功能: 根据会话上下文动态更新,用户选中建议或几轮交互后清空即可。
-
错误处理: 使用PromptRequest事件校验输入,优雅捕获AI服务的报错。
-
性能优化: 长会话场景可考虑实现消息分页或限制可见消息数量。
-
AI服务集成: AI服务调用使用async/await,结合终止响应功能实现取消令牌。
-
响应工具栏: 默认项(复制、重新生成、点赞、点踩)可自动工作,处理ResponseToolbarItemClicked事件即可实现自定义逻辑。
-
输入工具栏: 可用于高频操作,例如文件上传、语音输入、表情选择器。
-
主题支持: 在App.xaml中设置RequestedTheme即可实现应用全局主题,控件会自动适配浅色/深色模式。
-
无障碍适配: 为屏幕阅读器设置Author.Name,自定义模板需确保足够的对比度。
Related Documentation
相关文档
- Getting Started: See references/getting-started.md for setup and basic usage
- Suggestions: See references/suggestions.md for AI-driven quick responses
- Response Toolbar: See references/response-toolbar.md for response actions
- Input Toolbar: See references/input-toolbar.md for input area customization
- Typing & Stop: See references/typing-and-stop-responding.md for indicators and cancellation
- Theming & Events: See references/theming-and-events.md for themes and events
- 入门指南: 配置与基础用法参考 references/getting-started.md
- 建议功能: AI驱动快速回复实现参考 references/suggestions.md
- 响应工具栏: 响应操作实现参考 references/response-toolbar.md
- 输入工具栏: 输入区域自定义参考 references/input-toolbar.md
- 输入指示器与终止响应: 状态提示与取消功能参考 references/typing-and-stop-responding.md
- 主题与事件: 主题与事件配置参考 references/theming-and-events.md