syncfusion-wpf-ai-assistview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing SfAIAssistView (WPF)

实现SfAIAssistView（WPF）

When to Use This Skill

何时使用本技能

Use this skill when:

Building AI chat or assistant UIs in WPF
Displaying message threads with user and AI responses
Integrating OpenAI or SemanticKernel with a chat interface
Showing typing indicators while AI processes a response
Adding suggestion chips after AI responses
Customizing input/response toolbars
Handling
```
PromptRequest
```
events or Stop Responding functionality
Rendering Markdown in AI responses via
```
ViewTemplateSelector
```

NuGet Package:

Syncfusion.SfChat.Wpf

Namespace:

Syncfusion.UI.Xaml.Chat

Key Classes:

SfAIAssistView

TextMessage

AIMessage

Author

TypingIndicator

在以下场景使用本技能：

在WPF中构建AI聊天或助手UI
显示包含用户和AI回复的消息线程
将OpenAI或SemanticKernel与聊天界面集成
在AI处理回复时显示输入指示器
在AI回复后添加建议芯片
自定义输入/回复工具栏
处理
```
PromptRequest
```
事件或停止回复功能
通过
```
ViewTemplateSelector
```
在AI回复中渲染Markdown

NuGet包：

Syncfusion.SfChat.Wpf

命名空间：

Syncfusion.UI.Xaml.Chat

核心类：

SfAIAssistView

TextMessage

AIMessage

Author

TypingIndicator

Quick Start

快速开始

xaml

<!-- MainWindow.xaml -->
<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>

csharp

// 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."
        });
    }
}

xaml

<!-- MainWindow.xaml -->
<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>

csharp

// 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."
        });
    }
}

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

NuGet installation and assembly references
XAML namespace and control declaration
ViewModel setup with
```
ObservableCollection<object>
```
```
TextMessage
```
+
```
Author
```
binding pattern
```
CurrentUser
```
configuration
Theme integration

📄 阅读： references/getting-started.md

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

OpenAI Integration

OpenAI集成

📄 Read: references/openai-integration.md

```
Microsoft.SemanticKernel
```
NuGet setup
```
IChatCompletionService
```
+
```
Kernel
```
configuration
```
AIAssistChatService
```
pattern for async responses
```
CollectionChanged
```
trigger to invoke AI calls
```
AIMessage
```
with
```
ContentTemplate
```
(AI icon)
```
ViewTemplateSelector
```
for Markdown rendering via MdXaml
Coordinating
```
ShowTypingIndicator
```
with async operations

📄 阅读： references/openai-integration.md

```
Microsoft.SemanticKernel
```
NuGet设置
```
IChatCompletionService
```
+
```
Kernel
```
配置
用于异步回复的
```
AIAssistChatService
```
模式
触发AI调用的
```
CollectionChanged
```
事件
带
```
ContentTemplate
```
（AI图标）的
```
AIMessage
```
通过MdXaml实现Markdown渲染的
```
ViewTemplateSelector
```
异步操作中协调
```
ShowTypingIndicator
```

Suggestions & Typing Indicator

建议功能与输入指示器

📄 Read: references/suggestions-and-typing-indicator.md

```
Suggestions
```
property (
```
IEnumerable<string>
```
) binding
Updating suggestion chips after AI response
```
TypingIndicator
```
object setup in ViewModel
```
ShowTypingIndicator
```
property
Toggling indicator on/off with async AI calls

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

```
Suggestions
```
属性（
```
IEnumerable<string>
```
）绑定
AI回复后更新建议芯片
ViewModel中的
```
TypingIndicator
```
对象设置
```
ShowTypingIndicator
```
属性
通过异步AI调用切换指示器的显示/隐藏

Input Toolbar

输入工具栏

📄 Read: references/input-toolbar.md

```
IsInputToolbarVisible
```
property
```
InputToolbarPosition
```
(Left/Right)
```
InputToolbarItem
```
(ItemTemplate, IsEnabled, Tooltip, Visible)
```
InputToolbarItemClicked
```
event handling
```
InputToolbarHeaderTemplate
```
for file-upload-style headers

📄 阅读： references/input-toolbar.md

```
IsInputToolbarVisible
```
属性
```
InputToolbarPosition
```
（左/右）
```
InputToolbarItem
```
（ItemTemplate、IsEnabled、Tooltip、Visible）
```
InputToolbarItemClicked
```
事件处理
用于文件上传样式头部的
```
InputToolbarHeaderTemplate
```

Response Toolbar

回复工具栏

📄 Read: references/response-toolbar.md

```
IsResponseToolbarVisible
```
property
Built-in toolbar items: Copy, Regenerate, Like, Dislike

ResponseToolbarItem

with

Index

ItemType

ItemTemplate

```
ResponseToolbarItemClicked
```
event handling
Custom item template examples

📄 阅读： references/response-toolbar.md

```
IsResponseToolbarVisible
```
属性
内置工具栏项：复制、重新生成、点赞、点踩

带

Index

、

ItemType

、

ItemTemplate

的

ResponseToolbarItem

```
ResponseToolbarItemClicked
```
事件处理
自定义项模板示例

Events & Stop Responding

事件与停止回复

📄 Read: references/events-and-stop-responding.md

```
PromptRequest
```
event +
```
PromptRequestEventArgs
```
```
InputMessage
```
and
```
Handled
```
property pattern
```
EnableStopResponding
```
property
```
StopResponding
```
event and
```
StopRespondingCommand
```
(MVVM)
```
StopRespondingTemplate
```
customization

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

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

Key Properties

核心属性

Property	Type	Purpose
`Messages`	`ObservableCollection<object>`	Chat message collection
`CurrentUser`	`Author`	Identifies the local user
`Suggestions`	`IEnumerable<string>`	Suggestion chips shown after AI response
`ShowTypingIndicator`	`bool`	Shows/hides typing animation
`TypingIndicator`	`TypingIndicator`	Typing indicator with Author
`IsInputToolbarVisible`	`bool`	Shows custom input toolbar (default: false)
`IsResponseToolbarVisible`	`bool`	Shows response toolbar (default: true)
`EnableStopResponding`	`bool`	Enables Stop Responding button (default: false)
`ViewTemplateSelector`	`DataTemplateSelector`	Custom rendering per message type

属性	类型	用途
`Messages`	`ObservableCollection<object>`	聊天消息集合
`CurrentUser`	`Author`	标识本地用户
`Suggestions`	`IEnumerable<string>`	AI回复后显示的建议芯片
`ShowTypingIndicator`	`bool`	显示/隐藏输入动画
`TypingIndicator`	`TypingIndicator`	带作者信息的输入指示器
`IsInputToolbarVisible`	`bool`	显示自定义输入工具栏（默认：false）
`IsResponseToolbarVisible`	`bool`	显示回复工具栏（默认：true）
`EnableStopResponding`	`bool`	启用停止回复按钮（默认：false）
`ViewTemplateSelector`	`DataTemplateSelector`	按消息类型自定义渲染

Common Patterns

常见模式

User sends message → AI responds

用户发送消息 → AI回复

csharp

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

csharp

// 订阅Chats的CollectionChanged事件
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;
    }
};

Adding suggestions after AI response

AI回复后添加建议

csharp

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

csharp

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

Handling PromptRequest event

处理PromptRequest事件

xaml

<syncfusion:SfAIAssistView PromptRequest="OnPromptRequest" />

csharp

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

xaml

<syncfusion:SfAIAssistView PromptRequest="OnPromptRequest" />

csharp

private void OnPromptRequest(object sender, PromptRequestEventArgs e)
{
    // e.InputMessage包含用户输入的文本
    e.Handled = true; // 阻止默认处理
}