syncfusion-wpf-ai-assistview

实现 SfAIAssistView（WPF）

何时使用此技能

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

• 在 WPF 中构建 AI 聊天或助手界面
• 显示包含用户和 AI 回复的消息线程
• 将 OpenAI 或 SemanticKernel 集成到聊天界面
• 在 AI 处理回复时显示输入指示器
• 在 AI 回复后添加建议标签
• 自定义输入和回复工具栏
• 处理 PromptRequest 事件或“停止响应”功能
• 通过 ViewTemplateSelector 渲染 AI 回复中的 Markdown
• 通过对话历史记录保存和切换多个对话
• 在用户输入前于输入框中显示占位提示
• 在没有消息时渲染空状态（欢迎消息、行动号召）

NuGet 包： Syncfusion.SfChat.Wpf 命名空间： Syncfusion.UI.Xaml.Chat 关键类： SfAIAssistView、TextMessage、AIMessage、Author、TypingIndicator、AssistConversationItem

---

快速入门

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Chat;assembly=Syncfusion.SfChat.WPF">
    <Grid>
        <Grid.DataContext>
            <local:ViewModel/>
        </Grid.DataContext>
        <syncfusion:SfAIAssistView
            Messages="{Binding Chats}"
            CurrentUser="{Binding CurrentUser}"
            Suggestions="{Binding Suggestions}"
            ShowTypingIndicator="{Binding ShowTypingIndicator}"
            TypingIndicator="{Binding TypingIndicator}" />
    </Grid>
</Window>

// ViewModel.cs
public class ViewModel : INotifyPropertyChanged
{
    public ObservableCollection<object> Chats { get; set; }
    public Author CurrentUser { get; set; }

    public ViewModel()
    {
        Chats = new ObservableCollection<object>();
        CurrentUser = new Author { Name = "User" };
        Chats.Add(new TextMessage
        {
            Author = CurrentUser,
            Text = "Hello, how can you help me?"
        });
        Chats.Add(new TextMessage
        {
            Author = new Author { Name = "AI" },
            Text = "I can answer questions and help with tasks."
        });
    }
}

---

文档与导航指南

入门

📄 阅读： references/getting-started.md

• NuGet 安装和程序集引用
• XAML 命名空间和控件声明
• 使用 ObservableCollection<object> 设置 ViewModel
• TextMessage + Author 绑定模式
• CurrentUser 配置
• 主题集成

OpenAI 集成

📄 阅读： references/openai-integration.md

• Microsoft.SemanticKernel NuGet 配置
• IChatCompletionService + Kernel 配置
• 用于异步响应的 AIAssistChatService 模式
• 通过 CollectionChanged 触发 AI 调用
• 使用 ContentTemplate 的 AIMessage（AI 图标）
• 通过 MdXaml 使用 ViewTemplateSelector 渲染 Markdown
• 协调 ShowTypingIndicator 与异步操作

建议与输入指示器

📄 阅读： references/suggestions-and-typing-indicator.md

• 绑定 Suggestions 属性（IEnumerable<string>）
• 在 AI 回复后更新建议标签
• 在 ViewModel 中设置 TypingIndicator 对象
• ShowTypingIndicator 属性
• 通过异步 AI 调用切换指示器的显示状态

输入工具栏

📄 阅读： references/input-toolbar.md

• IsInputToolbarVisible 属性
• InputToolbarPosition（Left/Right）
• InputToolbarItem（ItemTemplate、IsEnabled、Tooltip、Visible）
• 处理 InputToolbarItemClicked 事件
• 用于文件上传样式标题的 InputToolbarHeaderTemplate

回复工具栏

📄 阅读： references/response-toolbar.md

• IsResponseToolbarVisible 属性
• 内置工具栏项：复制、重新生成、赞、踩
• 包含 Index、ItemType、ItemTemplate 的 ResponseToolbarItem
• 处理 ResponseToolbarItemClicked 事件
• 自定义项模板示例

事件与停止响应

📄 阅读： references/events-and-stop-responding.md

• PromptRequest 事件 + PromptRequestEventArgs
• InputMessage 和 Handled 属性模式
• EnableStopResponding 属性
• StopResponding 事件和 StopRespondingCommand（MVVM）
• 自定义 StopRespondingTemplate

对话历史记录

📄 阅读： references/conversation-history.md

• 使用 ShowNavigationView 属性显示或隐藏历史记录窗格
• Conversations（ObservableCollection<AssistConversationItem>）数据源
• 包含 Title、DateTime 和 AssistItems 消息的 AssistConversationItem
• 用于导航窗格标题文本的 NavigationHeader
• 内置新建聊天和对话选择行为

自定义（空视图、占位符）

📄 阅读： references/customization.md

• 使用 EmptyView 在空状态中显示简单文本或对象
• 使用 EmptyViewTemplate 创建内容丰富的 DataTemplate 空状态
• 使用 InputPlaceholderText 设置输入框提示文本
• 了解 EmptyView 与 BannerTemplate 的交互方式

---

关键属性

属性	类型	用途
Messages	ObservableCollection<object>	聊天消息集合
CurrentUser	Author	标识本地用户
Suggestions	IEnumerable<string>	AI 回复后显示的建议选项
ShowTypingIndicator	bool	显示/隐藏输入动画
TypingIndicator	TypingIndicator	带有 Author 的输入指示器
IsInputToolbarVisible	bool	显示自定义输入工具栏（默认值：false）
IsResponseToolbarVisible	bool	显示回复工具栏（默认值：true）
EnableStopResponding	bool	启用“停止回复”按钮（默认值：false）
ViewTemplateSelector	DataTemplateSelector	为不同消息类型自定义呈现方式
ShowNavigationView	bool	显示/隐藏对话历史导航窗格（默认值：false）
Conversations	ObservableCollection<AssistConversationItem>	在历史记录窗格中显示的已存档对话
NavigationHeader	string	导航窗格的标题文本（默认值：空）
EmptyView	object	在空状态中显示的简单内容
EmptyViewTemplate	DataTemplate	在空状态中显示的丰富模板
InputPlaceholderText	string	输入框中的占位符/提示文本

---

常见模式

用户发送消息 → AI 回复

// Subscribe to CollectionChanged on Chats
Chats.CollectionChanged += async (s, e) =>
{
    if (e.Action == NotifyCollectionChangedAction.Add
        && e.NewItems[0] is TextMessage msg
        && msg.Author.Name == CurrentUser.Name)
    {
        ShowTypingIndicator = true;
        var reply = await aiService.GetResponseAsync(msg.Text);
        Chats.Add(new AIMessage { Author = aiAuthor, Text = reply });
        ShowTypingIndicator = false;
    }
};

在 AI 回复后添加建议

Suggestions = new List<string> { "Tell me more", "Give an example", "Summarize" };

处理 PromptRequest 事件

<syncfusion:SfAIAssistView PromptRequest="OnPromptRequest" />

private void OnPromptRequest(object sender, PromptRequestEventArgs e)
{
    // e.InputMessage contains the user's text
    e.Handled = true; // Prevent default processing
}

显示对话历史

<syncfusion:SfAIAssistView
    Messages="{Binding Chats}"
    CurrentUser="{Binding CurrentUser}"
    Conversations="{Binding Conversations}"
    ShowNavigationView="True"
    NavigationHeader="Sync AI Assist" />

Conversations = new ObservableCollection<AssistConversationItem>
{
    new AssistConversationItem
    {
        Title = "Scotland",
        DateTime = DateTime.Today,
        AssistItems = new ObservableCollection<object>
        {
            new TextMessage { Author = CurrentUser, Text = "Tell me about Scotland." },
            new TextMessage { Author = new Author { Name = "AI" }, Text = "Scotland is known for its castles and landscapes." }
        }
    }
};

带占位符和欢迎模板的空状态

<syncfusion:SfAIAssistView
    Messages="{Binding Chats}"
    CurrentUser="{Binding CurrentUser}"
    InputPlaceholderText="Type your message here...">
    <syncfusion:SfAIAssistView.EmptyViewTemplate>
        <DataTemplate>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Hi, how can I help you?" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" />
                <TextBlock Text="Ask anything to get started." FontSize="16" HorizontalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </syncfusion:SfAIAssistView.EmptyViewTemplate>
</syncfusion:SfAIAssistView>