Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated the UG documentation for the AIAssistView control. #1628

Merged
merged 2 commits into from
Jan 15, 2025
Merged

Updated the UG documentation for the AIAssistView control. #1628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f320e95
Updated.
Ganesh-Mariappan Dec 19, 2024
9fcb5ec
Updated
Ganesh-Mariappan Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 70 additions & 33 deletions wpf/AI-AssistView/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
---
layout: post
title: Getting Started with WPF AI AssistView control | Syncfusion
description: Learn about getting started with the Syncfusion WinUI AI AssistView (SfAIAssistView) control with its basic features.
description: Learn about getting started with the Syncfusion WPF AI AssistView (SfAIAssistView) control with its basic features.
platform: wpf
control: AI AssistView
documentation: ug
---

# Getting Started with WPF AI AssistView

This section explains the steps required to add the WinUI [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control with its basic features.
This section explains the steps required to add the Wpf [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control with its basic features.

## Creating an application with WPF AI AssistView
## Structure of SfAIAssistView

1. Create a [Wpf desktop app for C# and .NET 6](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop).
![WPF SfAIAssistView Structure](aiassistview_images/wpf_aiassistview_control_structure.png)

## Adding WPF SfAIAssistview via xaml

1. Create a [Wpf desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-9.0).
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.

## Initialize AI AssistView
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.

{% tabs %}
{% highlight xaml %}
Expand All @@ -38,42 +40,47 @@ This section explains the steps required to add the WinUI [SfAIAssistView](https
</Grid>
</Page>

{% endhighlight %}
{% endhighlight %}
{% endtabs %}

## Adding WPF SfAIAssistview via C#

1. Create a [Wpf desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-9.0).
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.

{% tabs %}
{% highlight C# %}

// Creating an instance of the AI AssistView control.
SfAIAssistView aiAssistView = new SfAIAssistView();
using Syncfusion.UI.Xaml.Chat;

namespace GettingStarted
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
// Creating an instance of the AIAssistView control
SfAIAssistView assistView = new SfAIAssistView();
grid.Children.Add(assistView);
}
}
}

{% endhighlight %}
{% endtabs %}


## Creating ViewModel for AI AssistView

Create a simple chat collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.

{% tabs %}

{% highlight xaml %}

<Page
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"/>
</Grid>
</Page>

{% endhighlight %}

{% highlight C# %}

public class ViewModel : INotifyPropertyChanged
Expand All @@ -89,9 +96,9 @@ Create a simple chat collection as shown in the following code example in a new

private async void GenerateMessages()
{
this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WinUI?" } );
this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WPF?" } );
await Task.Delay(1000);
this.Chats.Add( new TextMessage { Author = new Author { Name = "Bot" }, Text = "WinUI is a user interface layer that contains modern controls and styles for building Windows apps." });
this.Chats.Add( new TextMessage { Author = new Author { Name = "Bot" }, Text = "WPF is a user interface layer that contains modern controls and styles for building Windows apps." });
}

public ObservableCollection<object> Chats
Expand Down Expand Up @@ -136,4 +143,34 @@ Create a simple chat collection as shown in the following code example in a new
{% endhighlight %}
{% endtabs %}

## Bind Messages

Set the ViewModel as the DataContext for the AI AssistView or the parent window. This allows data binding between the UI and the ViewModel properties.
To populate AI AssistView, bind the chats in ViewModel to Messages property of AI AssistView.

{% tabs %}
{% highlight xaml %}

<Page
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.DataContext>
<local:ViewModel/>
</Grid.DataContext>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"/>
</Grid>
</Page>

{% endhighlight %}
{% endtabs %}

![WPF AI AssistView control getting started](aiassistview_images/wpf_aiassistview_gettingstarted.png)
63 changes: 37 additions & 26 deletions wpf/AI-AssistView/Open-AI.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,11 @@ This section explains about how to connect the AI AssistView with OpenAI.

## Creating an application with NuGet reference.

1. Create a [WPF desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/?view=netframeworkdesktop-4.8).
2. Add reference to [Microsoft Semantic NuGet](https://www.nuget.org/packages/Microsoft.SemanticKernel) NuGet.
1. Create a [Wpf desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-9.0).
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
5. Add reference to [Microsoft Semantic NuGet](https://www.nuget.org/packages/Microsoft.SemanticKernel) NuGet.

## Creating the OpenAI view model class.

Expand All @@ -24,30 +27,6 @@ To connect with OpenAI, we need the following details.
* API_ENDPOINT: A string variable representing the URL endpoint of the OpenAI API.

{% tabs %}

{% highlight xaml %}

<Page
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Suggestions="{Binding Suggestion}"
ShowTypingIndicator="True"
TypingIndicator="{Binding TypingIndicator}"
Messages="{Binding Chats}"/>
</Grid>
</Page>

{% endhighlight %}

{% highlight C# %}

public class ViewModel : INotifyPropertyChanged
Expand Down Expand Up @@ -197,4 +176,36 @@ To connect with OpenAI, we need the following details.
{% endhighlight %}
{% endtabs %}

## Bind Messages

Set the ViewModel as the DataContext for the AI AssistView or the parent window. This allows data binding between the UI and the ViewModel properties.

{% tabs %}
{% highlight xaml %}

<Page
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.DataContext>
<local:ViewModel/>
</Grid.DataContext>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Suggestions="{Binding Suggestion}"
ShowTypingIndicator="True"
TypingIndicator="{Binding TypingIndicator}"
Messages="{Binding Chats}"/>
</Grid>
</Page>

{% endhighlight %}
{% endtabs %}

![WPF AI AssistView control open ai](aiassistview_images/wpf_aiassistview_openai.gif)
53 changes: 32 additions & 21 deletions wpf/AI-AssistView/Suggestions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,11 @@ documentation: ug

By using the [Suggestions](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html#Syncfusion_UI_Xaml_Chat_SfAIAssistView_Suggestions) property, the AssistView displays AI-driven suggestions in the bottom right corner, making it easy for users to quickly respond or choose from relevant options.

{% tabs %}
## Create a ViewModel class with suggestion property

{% highlight xaml %}

<Page
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Suggestions="{Binding Suggestion}"
Messages="{Binding Chats}"/>
</Grid>
</Page>

{% endhighlight %}
Create a simple suggestion collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.

{% tabs %}
{% highlight C# %}

public class ViewModel : INotifyPropertyChanged
Expand Down Expand Up @@ -114,4 +96,33 @@ By using the [Suggestions](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml
{% endhighlight %}
{% endtabs %}


## Bind the Suggestion

{% tabs %}
{% highlight xaml %}

<Page
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.DataContext>
<local:ViewModel/>
</Grid.DataContext>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Suggestions="{Binding Suggestion}"
Messages="{Binding Chats}"/>
</Grid>
</Page>

{% endhighlight %}
{% endtabs %}

![WPF AI AssistView control suggestion](aiassistview_images/wpf_aiassistview_suggestions.png)
60 changes: 37 additions & 23 deletions wpf/AI-AssistView/Typing-Indicator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,11 @@ documentation: ug

By using the [TypingIndicator](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html#Syncfusion_UI_Xaml_Chat_SfAIAssistView_TypingIndicator) property, a typing indicator is shown while the AI is processing or generating a response, giving users real-time feedback and enhancing conversational flow

{% tabs %}
## Create a ViewModel class with TypingIndicator

{% highlight xaml %}

<Page
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Suggestions="{Binding Suggestion}"
ShowTypingIndicator="True"
TypingIndicator="{Binding TypingIndicator}"
Messages="{Binding Chats}"/>
</Grid>
</Page>

{% endhighlight %}
Create a simple suggestion collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.

{% tabs %}
{% highlight C# %}

public class ViewModel : INotifyPropertyChanged
Expand Down Expand Up @@ -132,4 +112,38 @@ By using the [TypingIndicator](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.
{% endhighlight %}
{% endtabs %}

## Bind the TypingIndicator

Set the ViewModel as the DataContext for the AI AssistView or the parent window. This allows data binding between the UI and the ViewModel properties.
To populate AI AssistView, bind the [TypingIndicator](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html#Syncfusion_UI_Xaml_Chat_SfAIAssistView_TypingIndicator) in ViewModel to Messages property of AI AssistView.
When the application runs, the TypingIndicator will show an animation representing the AI or user typing a message. This indicator is shown when the [ShowTypingIndicator](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html#Syncfusion_UI_Xaml_Chat_SfAIAssistView_ShowTypingIndicator) property value as true.

{% tabs %}
{% highlight xaml %}

<Window
x:Class="GettingStarted.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GettingStarted"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.DataContext>
<local:ViewModel/>
</Grid.DataContext>
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Suggestions="{Binding Suggestion}"
ShowTypingIndicator="True"
TypingIndicator="{Binding TypingIndicator}"
Messages="{Binding Chats}"/>
</Grid>
</Window>

{% endhighlight %}
{% endtabs %}

![WPF AI AssistView control typing indicator](aiassistview_images/wpf_aiassistview_typing_indicator.gif)
Binary file added wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_control_structure.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.