diff --git a/wpf/AI-AssistView/Getting-Started.md b/wpf/AI-AssistView/Getting-Started.md index e83dfbe22..ed31e2a11 100644 --- a/wpf/AI-AssistView/Getting-Started.md +++ b/wpf/AI-AssistView/Getting-Started.md @@ -15,7 +15,7 @@ This section explains the steps required to add the Wpf [SfAIAssistView](https:/ ![WPF SfAIAssistView Structure](aiassistview_images/wpf_aiassistview_control_structure.png) -## Adding WPF SfAIAssistview via xaml +## 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. @@ -43,7 +43,7 @@ This section explains the steps required to add the Wpf [SfAIAssistView](https:/ {% endhighlight %} {% endtabs %} -## Adding WPF SfAIAssistview via C# +## 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. diff --git a/wpf/AI-AssistView/Getting-started.md b/wpf/AI-AssistView/Getting-started.md deleted file mode 100644 index e83dfbe22..000000000 --- a/wpf/AI-AssistView/Getting-started.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -layout: post -title: Getting Started with WPF AI AssistView control | Syncfusion -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 Wpf [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control with its basic features. - -## Structure of SfAIAssistView - -![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/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control. - -{% tabs %} -{% highlight xaml %} - - - - - - - -{% 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# %} - -using Syncfusion.UI.Xaml.Chat; - -namespace GettingStarted -{ - /// - /// Interaction logic for MainWindow.xaml - /// - 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 C# %} - - public class ViewModel : INotifyPropertyChanged - { - private ObservableCollection chats; - private Author currentUser; - public ViewModel() - { - this.Chats = new ObservableCollection(); - this.CurrentUser = new Author { Name="John"}; - this.GenerateMessages(); - } - - private async void GenerateMessages() - { - 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 = "WPF is a user interface layer that contains modern controls and styles for building Windows apps." }); - } - - public ObservableCollection Chats - { - get - { - return this.chats; - } - set - { - this.chats = value; - RaisePropertyChanged("Messages"); - } - } - - public Author CurrentUser - { - get - { - return this.currentUser; - } - set - { - this.currentUser = value; - RaisePropertyChanged("CurrentUser"); - } - } - - - public void RaisePropertyChanged(string propName) - { - if (PropertyChanged != null) - { - PropertyChanged(this, new PropertyChangedEventArgs(propName)); - } - } - - - public event PropertyChangedEventHandler PropertyChanged; - } - -{% 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 %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -![WPF AI AssistView control getting started](aiassistview_images/wpf_aiassistview_gettingstarted.png) diff --git a/wpf/AI-AssistView/Typing-indicator.md b/wpf/AI-AssistView/Typing-indicator.md deleted file mode 100644 index 0269c35b0..000000000 --- a/wpf/AI-AssistView/Typing-indicator.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -layout: post -title: TypingIndicator in WPF AI AssistView control | Syncfusion -description: Learn about the typing indicator feature displayed in the AI AssistView control while the AI processes or generates a response. -platform: wpf -control: SfAIAssistView -documentation: ug ---- - -# Initialize the typing indicator in WPF AI AssistView - -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 - -## Create a ViewModel class with TypingIndicator - -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 - { - private ObservableCollection chats; - private Author currentUser; - private IEnumerable suggestion; - private TypingIndicator typingIndicator; - - public ViewModel() - { - this.Chats = new ObservableCollection(); - this.CurrentUser = new Author { Name="John"}; - Suggestion = new ObservableCollection(); - TypingIndicator = new TypingIndicator { Author = new Author { Name = "AI" } }; - this.GenerateMessages(); - } - - private async void GenerateMessages() - { - 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 = "WPF is a user interface layer that contains modern controls and styles for building Windows apps." }); - Suggestion = new ObservableCollection {"What is the future of WPF?", "What is XAML?", "What is the difference between WPF 2 and WPF 3?" }; - } - - - public IEnumerable Suggestion - { - get - { - return this.suggestion; - } - set - { - this.suggestion = value; - RaisePropertyChanged("Suggestion"); - } - } - - public ObservableCollection Chats - { - get - { - return this.chats; - } - set - { - this.chats = value; - RaisePropertyChanged("Messages"); - } - } - - public Author CurrentUser - { - get - { - return this.currentUser; - } - set - { - this.currentUser = value; - RaisePropertyChanged("CurrentUser"); - } - } - - - public TypingIndicator TypingIndicator - { - get - { - return this.typingIndicator; - } - set - { - this.typingIndicator = value; - RaisePropertyChanged("TypingIndicator"); - } - } - - - public void RaisePropertyChanged(string propName) - { - if (PropertyChanged != null) - { - PropertyChanged(this, new PropertyChangedEventArgs(propName)); - } - } - - - public event PropertyChangedEventHandler PropertyChanged; - } - -{% 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 %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -![WPF AI AssistView control typing indicator](aiassistview_images/wpf_aiassistview_typing_indicator.gif) \ No newline at end of file diff --git a/wpf/AI-AssistView/open-ai.md b/wpf/AI-AssistView/open-ai.md deleted file mode 100644 index 4702e700b..000000000 --- a/wpf/AI-AssistView/open-ai.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -layout: post -title: TypingIndicator in WPF AI AssistView control | Syncfusion -description: Learn about how to connect the AI AssistView control with OpenAI and chat gpt conversation experience. -platform: wpf -control: SfAIAssistView -documentation: ug ---- - -# OpenAI connection for AI AssistView - -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/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. - -To connect with OpenAI, we need the following details. -* OPENAI_KEY: A string variable where we should add our valid OpenAI API key. -* OPENAI_MODEL: A string variable representing the OpenAI language model we want to use. -* API_ENDPOINT: A string variable representing the URL endpoint of the OpenAI API. - -{% tabs %} -{% highlight C# %} - - public class ViewModel : INotifyPropertyChanged - { - AIAssistChatService service; - - private ObservableCollection chats; - public ObservableCollection Chats - { - get - { - return this.chats; - } - set - { - this.chats = value; - RaisePropertyChanged("Messages"); - } - } - public DataTemplate AIIcon { get; set; } - private ObservableCollection suggestion; - - public void RaisePropertyChanged(string propName) - { - if (PropertyChanged != null) - { - PropertyChanged(this, new PropertyChangedEventArgs(propName)); - } - } - - public event PropertyChangedEventHandler PropertyChanged; - - private Author currentUser; - public Author CurrentUser - { - get - { - return this.currentUser; - } - set - { - this.currentUser = value; - RaisePropertyChanged("CurrentUser"); - } - } - - private bool showTypingIndicator; - public bool ShowTypingIndicator - { - get - { - return this.showTypingIndicator; - } - set - { - this.showTypingIndicator = value; - RaisePropertyChanged("ShowTypingIndicator"); - } - } - - public ObservableCollection Suggestion - { - get - { - return this.suggestion; - } - set - { - this.suggestion = value; - RaisePropertyChanged("Suggestion"); - } - } - - private TypingIndicator typingIndicator; - public TypingIndicator TypingIndicator - { - get - { - return this.typingIndicator; - } - set - { - this.typingIndicator = value; - RaisePropertyChanged("TypingIndicator"); - } - } - - public ViewModel() - { - this.Chats = new ObservableCollection(); - this.Chats.CollectionChanged += Chats_CollectionChanged; - this.CurrentUser = new Author() { Name = "User" }; - this.TypingIndicator = new TypingIndicator() { Author = new Author { ContentTemplate = AIIcon } }; - service = new AIAssistChatService(); - service.Initialize(); - - } - - private async void Chats_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) - { - var item = e.NewItems?[0] as ITextMessage; - if (item != null) - { - if (item.Author.Name == currentUser.Name) - { - ShowTypingIndicator = true; - await service.NonStreamingChat(item.Text); - Chats.Add(new TextMessage - { - Author = new Author { Name = "Bot", ContentTemplate = AIIcon }, - DateTime = DateTime.Now, - Text = service.Response - }); - ShowTypingIndicator = false; - } - } - } - - public class AIAssistChatService - { - IChatCompletionService gpt; - Kernel kernel; - private string OPENAI_KEY = "";// Add a valid OpenAI key here. - - private string OPENAI_MODEL = "gpt-4o-mini"; - - private string API_ENDPOINT = "https://openai.azure.com"; - - public string Response { get; set; } - public async Task Initialize() - { - var builder = Kernel.CreateBuilder().AddAzureOpenAIChatCompletion( - OPENAI_MODEL, API_ENDPOINT, OPENAI_KEY); - - kernel = builder.Build(); - gpt = kernel.GetRequiredService(); - } - public async Task NonStreamingChat(string line) - { - Response = string.Empty; - var response = await gpt.GetChatMessageContentAsync(line); - Response = response.ToString(); - } - } - } - -{% 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 %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -![WPF AI AssistView control open ai](aiassistview_images/wpf_aiassistview_openai.gif) \ No newline at end of file