syncfusion-winui-ai-assistview

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing 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:
Syncfusion.UI.Xaml.Chat

NuGet Package:
Syncfusion.Chat.WinUI

Platform: 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,内置支持建议功能、输入指示器、响应工具栏,还支持自定义外观。
命名空间:
Syncfusion.UI.Xaml.Chat

NuGet包:
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

核心属性

PropertyTypeDefaultDescription
Messages
ObservableCollection<object>nullCollection of chat messages (TextMessage objects).
CurrentUser
AuthornullCurrent user author information. Required to distinguish user messages from AI responses.
Suggestions
IEnumerable<string>nullAI-driven suggestions displayed in bottom-right corner for quick responses.
ShowTypingIndicator
boolfalseShows/hides typing indicator during AI processing.
TypingIndicator
TypingIndicatornullTyping indicator configuration (author, text).
IsResponseToolbarVisible
booltrueShows/hides response toolbar (Copy, Regenerate, Like, Dislike).
ResponseToolbarItems
ObservableCollection<ResponseToolbarItem>Built-in itemsCustom toolbar items for response actions.
IsInputToolbarVisible
boolfalseShows/hides input toolbar in text input area.
InputToolbarItems
ObservableCollection<InputToolbarItem>nullCustom toolbar items for input area (e.g., attach file).
InputToolbarPosition
ToolbarPositionRightPosition of input toolbar (Left or Right).
InputToolbarHeaderTemplate
DataTemplatenullCustom template for input area header (e.g., file upload info).
EnableStopResponding
boolfalseEnables stop responding button to cancel ongoing AI responses.
StopRespondingTemplate
DataTemplatenullCustom template for stop responding button.
StopRespondingCommand
ICommandnullCommand executed when stop responding button is clicked.
RequestedTheme
ElementThemeDefaultTheme for the control (Light, Dark, or Default). Set in App.xaml.
属性类型默认值说明
Messages
ObservableCollection<object>null聊天消息集合(TextMessage对象)。
CurrentUser
Authornull当前用户的作者信息,用于区分用户消息与AI响应,必填。
Suggestions
IEnumerable<string>nullAI驱动的建议内容,显示在右下角用于快速回复。
ShowTypingIndicator
boolfalseAI处理时显示/隐藏输入指示器。
TypingIndicator
TypingIndicatornull输入指示器配置(作者、文本)。
IsResponseToolbarVisible
booltrue显示/隐藏响应工具栏(复制、重新生成、点赞、点踩)。
ResponseToolbarItems
ObservableCollection<ResponseToolbarItem>内置项用于响应操作的自定义工具栏项。
IsInputToolbarVisible
boolfalse显示/隐藏文本输入区域的输入工具栏。
InputToolbarItems
ObservableCollection<InputToolbarItem>null输入区域的自定义工具栏项(例如附件上传)。
InputToolbarPosition
ToolbarPositionRight输入工具栏的位置(左侧或右侧)。
InputToolbarHeaderTemplate
DataTemplatenull输入区域头部的自定义模板(例如文件上传信息)。
EnableStopResponding
boolfalse启用终止响应按钮,可取消进行中的AI响应。
StopRespondingTemplate
DataTemplatenull终止响应按钮的自定义模板。
StopRespondingCommand
ICommandnull点击终止响应按钮时执行的命令。
RequestedTheme
ElementThemeDefault控件的主题(浅色、深色或默认),在App.xaml中设置。

Key Events

核心事件

EventDescription
PromptRequest
Fired when user submits a prompt. Provides InputMessage and Handled properties.
ResponseToolbarItemClicked
Fired when response toolbar item is clicked. Provides item details.
InputToolbarItemClicked
Fired when input toolbar item is clicked. Provides item details.
StopResponding
Fired when stop responding button is clicked. Use to cancel AI operations.
事件说明
PromptRequest
用户提交提示词时触发,提供InputMessage和Handled属性。
ResponseToolbarItemClicked
点击响应工具栏项时触发,提供项的详细信息。
InputToolbarItemClicked
点击输入工具栏项时触发,提供项的详细信息。
StopResponding
点击终止响应按钮时触发,用于取消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

实现提示

  1. Message Management: Use ObservableCollection for Messages to automatically update UI when adding/removing messages.
  2. Typing Indicator: Show during async AI calls, hide when response arrives. Bind to ViewModel boolean property.
  3. Suggestions: Update dynamically based on conversation context. Clear after user selects or after few exchanges.
  4. Error Handling: Use PromptRequest event to validate input. Catch AI service errors gracefully.
  5. Performance: For long conversations, consider implementing message pagination or limiting visible message count.
  6. AI Service Integration: Use async/await for AI service calls. Implement cancellation tokens with stop responding feature.
  7. Response Toolbar: Default items (Copy, Regenerate, Like, Dislike) work automatically. Handle ResponseToolbarItemClicked for custom logic.
  8. Input Toolbar: Use for frequently needed actions like file upload, voice input, or emoji picker.
  9. Theme Support: Set RequestedTheme in App.xaml for app-wide theme. Control auto-adapts to light/dark mode.
  10. Accessibility: Set Author.Name for screen readers. Ensure sufficient contrast in custom templates.
  1. 消息管理: 使用ObservableCollection作为Messages的类型,添加/删除消息时可自动更新UI。
  2. 输入指示器: 异步调用AI服务时显示,响应返回后隐藏,绑定到ViewModel的布尔属性即可。
  3. 建议功能: 根据会话上下文动态更新,用户选中建议或几轮交互后清空即可。
  4. 错误处理: 使用PromptRequest事件校验输入,优雅捕获AI服务的报错。
  5. 性能优化: 长会话场景可考虑实现消息分页或限制可见消息数量。
  6. AI服务集成: AI服务调用使用async/await,结合终止响应功能实现取消令牌。
  7. 响应工具栏: 默认项(复制、重新生成、点赞、点踩)可自动工作,处理ResponseToolbarItemClicked事件即可实现自定义逻辑。
  8. 输入工具栏: 可用于高频操作,例如文件上传、语音输入、表情选择器。
  9. 主题支持: 在App.xaml中设置RequestedTheme即可实现应用全局主题,控件会自动适配浅色/深色模式。
  10. 无障碍适配: 为屏幕阅读器设置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