Skip to content

Commit f320e95

Browse files
Ganesh-Mariappan22Ganesh-Mariappan22
committed
Updated.
1 parent f56f53c commit f320e95

File tree

4 files changed

+176
-103
lines changed

4 files changed

+176
-103
lines changed

‎wpf/AI-AssistView/Getting-Started.md‎

Lines changed: 70 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
---
22
layout: post
33
title: Getting Started with WPF AI AssistView control | Syncfusion
4-
description: Learn about getting started with the Syncfusion WinUI AI AssistView (SfAIAssistView) control with its basic features.
4+
description: Learn about getting started with the Syncfusion WPF AI AssistView (SfAIAssistView) control with its basic features.
55
platform: wpf
66
control: AI AssistView
77
documentation: ug
88
---
99

1010
# Getting Started with WPF AI AssistView
1111

12-
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.
12+
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.
1313

14-
## Creating an application with WPF AI AssistView
14+
## Structure of SfAIAssistView
1515

16-
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).
16+
![WPF SfAIAssistView Structure](aiassistview_images/wpf_aiassistview_control_structure.png)
17+
18+
## Adding WPF SfAIAssistview via xaml
19+
20+
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).
1721
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
1822
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
19-
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
20-
21-
## Initialize AI AssistView
23+
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
2224

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

41-
{% endhighlight %}
43+
{% endhighlight %}
44+
{% endtabs %}
4245

46+
## Adding WPF SfAIAssistview via C#
47+
48+
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).
49+
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
50+
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
51+
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
52+
53+
{% tabs %}
4354
{% highlight C# %}
4455

45-
// Creating an instance of the AI AssistView control.
46-
SfAIAssistView aiAssistView = new SfAIAssistView();
56+
using Syncfusion.UI.Xaml.Chat;
57+
58+
namespace GettingStarted
59+
{
60+
/// <summary>
61+
/// Interaction logic for MainWindow.xaml
62+
/// </summary>
63+
public partial class MainWindow : Window
64+
{
65+
public MainWindow()
66+
{
67+
this.InitializeComponent();
68+
// Creating an instance of the AIAssistView control
69+
SfAIAssistView assistView = new SfAIAssistView();
70+
grid.Children.Add(assistView);
71+
}
72+
}
73+
}
4774

4875
{% endhighlight %}
4976
{% endtabs %}
5077

78+
5179
## Creating ViewModel for AI AssistView
5280

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

5583
{% tabs %}
56-
57-
{% highlight xaml %}
58-
59-
<Page
60-
x:Class="GettingStarted.MainPage"
61-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
62-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
63-
xmlns:local="using:GettingStarted"
64-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
65-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
66-
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
67-
mc:Ignorable="d"
68-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
69-
<Grid>
70-
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
71-
Messages="{Binding Chats}"/>
72-
</Grid>
73-
</Page>
74-
75-
{% endhighlight %}
76-
7784
{% highlight C# %}
7885

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

9097
private async void GenerateMessages()
9198
{
92-
this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WinUI?" } );
99+
this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WPF?" } );
93100
await Task.Delay(1000);
94-
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." });
101+
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." });
95102
}
96103

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

146+
## Bind Messages
147+
148+
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.
149+
To populate AI AssistView, bind the chats in ViewModel to Messages property of AI AssistView.
150+
151+
{% tabs %}
152+
{% highlight xaml %}
153+
154+
<Page
155+
x:Class="GettingStarted.MainPage"
156+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
157+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
158+
xmlns:local="using:GettingStarted"
159+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
160+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
161+
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
162+
mc:Ignorable="d"
163+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
164+
<Grid>
165+
<Grid.DataContext>
166+
<local:ViewModel/>
167+
</Grid.DataContext>
168+
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
169+
Messages="{Binding Chats}"/>
170+
</Grid>
171+
</Page>
172+
173+
{% endhighlight %}
174+
{% endtabs %}
175+
139176
![WPF AI AssistView control getting started](aiassistview_images/wpf_aiassistview_gettingstarted.png)

‎wpf/AI-AssistView/Open-AI.md‎

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,11 @@ This section explains about how to connect the AI AssistView with OpenAI.
1313

1414
## Creating an application with NuGet reference.
1515

16-
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).
17-
2. Add reference to [Microsoft Semantic NuGet](https://www.nuget.org/packages/Microsoft.SemanticKernel) NuGet.
16+
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).
17+
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
18+
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
19+
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
20+
5. Add reference to [Microsoft Semantic NuGet](https://www.nuget.org/packages/Microsoft.SemanticKernel) NuGet.
1821

1922
## Creating the OpenAI view model class.
2023

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

2629
{% tabs %}
27-
28-
{% highlight xaml %}
29-
30-
<Page
31-
x:Class="GettingStarted.MainPage"
32-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
34-
xmlns:local="using:GettingStarted"
35-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
36-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
37-
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
38-
mc:Ignorable="d"
39-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
40-
<Grid>
41-
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
42-
Suggestions="{Binding Suggestion}"
43-
ShowTypingIndicator="True"
44-
TypingIndicator="{Binding TypingIndicator}"
45-
Messages="{Binding Chats}"/>
46-
</Grid>
47-
</Page>
48-
49-
{% endhighlight %}
50-
5130
{% highlight C# %}
5231

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

179+
## Bind Messages
180+
181+
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.
182+
183+
{% tabs %}
184+
{% highlight xaml %}
185+
186+
<Page
187+
x:Class="GettingStarted.MainPage"
188+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
189+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
190+
xmlns:local="using:GettingStarted"
191+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
192+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
193+
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
194+
mc:Ignorable="d"
195+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
196+
<Grid>
197+
<Grid.DataContext>
198+
<local:ViewModel/>
199+
</Grid.DataContext>
200+
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
201+
Suggestions="{Binding Suggestion}"
202+
ShowTypingIndicator="True"
203+
TypingIndicator="{Binding TypingIndicator}"
204+
Messages="{Binding Chats}"/>
205+
</Grid>
206+
</Page>
207+
208+
{% endhighlight %}
209+
{% endtabs %}
210+
200211
![WPF AI AssistView control open ai](aiassistview_images/wpf_aiassistview_openai.gif)

‎wpf/AI-AssistView/Suggestions.md‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,11 @@ documentation: ug
1111

1212
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.
1313

14-
{% tabs %}
14+
## Create a ViewModel class with suggestion property
1515

16-
{% highlight xaml %}
17-
18-
<Page
19-
x:Class="GettingStarted.MainPage"
20-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
21-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
22-
xmlns:local="using:GettingStarted"
23-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
24-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
25-
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
26-
mc:Ignorable="d"
27-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
28-
<Grid>
29-
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
30-
Suggestions="{Binding Suggestion}"
31-
Messages="{Binding Chats}"/>
32-
</Grid>
33-
</Page>
34-
35-
{% endhighlight %}
16+
Create a simple suggestion collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.
3617

18+
{% tabs %}
3719
{% highlight C# %}
3820

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

99+
100+
## Bind the Suggestion
101+
102+
{% tabs %}
103+
{% highlight xaml %}
104+
105+
<Page
106+
x:Class="GettingStarted.MainPage"
107+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
108+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
109+
xmlns:local="using:GettingStarted"
110+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
111+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
112+
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
113+
mc:Ignorable="d"
114+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
115+
<Grid>
116+
<Grid.DataContext>
117+
<local:ViewModel/>
118+
</Grid.DataContext>
119+
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
120+
Suggestions="{Binding Suggestion}"
121+
Messages="{Binding Chats}"/>
122+
</Grid>
123+
</Page>
124+
125+
{% endhighlight %}
126+
{% endtabs %}
127+
117128
![WPF AI AssistView control suggestion](aiassistview_images/wpf_aiassistview_suggestions.png)

‎wpf/AI-AssistView/Typing-Indicator.md‎

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,11 @@ documentation: ug
1111

1212
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
1313

14-
{% tabs %}
14+
## Create a ViewModel class with TypingIndicator
1515

16-
{% highlight xaml %}
17-
18-
<Page
19-
x:Class="GettingStarted.MainPage"
20-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
21-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
22-
xmlns:local="using:GettingStarted"
23-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
24-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
25-
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
26-
mc:Ignorable="d"
27-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
28-
<Grid>
29-
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
30-
Suggestions="{Binding Suggestion}"
31-
ShowTypingIndicator="True"
32-
TypingIndicator="{Binding TypingIndicator}"
33-
Messages="{Binding Chats}"/>
34-
</Grid>
35-
</Page>
36-
37-
{% endhighlight %}
16+
Create a simple suggestion collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.
3817

18+
{% tabs %}
3919
{% highlight C# %}
4020

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

115+
## Bind the TypingIndicator
116+
117+
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.
118+
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.
119+
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.
120+
121+
{% tabs %}
122+
{% highlight xaml %}
123+
124+
<Window
125+
x:Class="GettingStarted.MainPage"
126+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
127+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
128+
xmlns:local="using:GettingStarted"
129+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
130+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
131+
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat"
132+
mc:Ignorable="d"
133+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
134+
<Grid>
135+
<Grid.DataContext>
136+
<local:ViewModel/>
137+
</Grid.DataContext>
138+
<syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
139+
Suggestions="{Binding Suggestion}"
140+
ShowTypingIndicator="True"
141+
TypingIndicator="{Binding TypingIndicator}"
142+
Messages="{Binding Chats}"/>
143+
</Grid>
144+
</Window>
145+
146+
{% endhighlight %}
147+
{% endtabs %}
148+
135149
![WPF AI AssistView control typing indicator](aiassistview_images/wpf_aiassistview_typing_indicator.gif)

0 commit comments

Comments
 (0)