diff --git a/winui-toc.html b/winui-toc.html index 528951c8..d35e30b5 100644 --- a/winui-toc.html +++ b/winui-toc.html @@ -77,8 +77,10 @@
  • diff --git a/winui/AI-AssistView/Getting-started.md b/winui/AI-AssistView/Getting-started.md index 0db53ed4..deae1d64 100644 --- a/winui/AI-AssistView/Getting-started.md +++ b/winui/AI-AssistView/Getting-started.md @@ -14,9 +14,9 @@ This section explains the steps required to add the WinUI [SfAIAssistView](https ## Creating an application with WinUI AIAssistView 1. Create a [WinUI 3 desktop app for C# and .NET 6](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop). -2. Add reference to [Syncfusion.Core.WinUI](https://www.nuget.org/packages/Syncfusion.Core.WinUI) NuGet. -3. Import the control namespace `Syncfusion.UI.Xaml.Core` in XAML or C# code. -4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.SfAIAssistView.html) control. +2. Add reference to [Syncfusion.Chat.WinUI](https://www.nuget.org/packages/Syncfusion.Chat.WinUI) 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 AIAssistView diff --git a/winui/AI-AssistView/Overview.md b/winui/AI-AssistView/Overview.md index 37c6e93a..e35fee44 100644 --- a/winui/AI-AssistView/Overview.md +++ b/winui/AI-AssistView/Overview.md @@ -13,7 +13,7 @@ The Syncfusion .NET [WinUI AIAssistView control](https://www.syncfusion.com/winu ## Key features -* `Suggestions`: Offers selectable response suggestions to expedite the conversation flow. -* `Typing indicator`: Displays a loading indicator to represent asynchronous communication with AI services. -* `Formatted responses`: Visualizes responses using customizable templates. -* `Styling`: Allows customization of the appearance of both request and response items. \ No newline at end of file +* **Suggestions**: Offers selectable response suggestions to expedite the conversation flow. +* **Typing indicator** : Displays a loading indicator to represent asynchronous communication with AI services. +* **Formatted responses** : Visualizes responses using customizable templates. +* **Styling**: Allows customization of the appearance of both request and response items. \ No newline at end of file diff --git a/winui/AI-AssistView/Themes.md b/winui/AI-AssistView/Themes.md new file mode 100644 index 00000000..f5f63a2e --- /dev/null +++ b/winui/AI-AssistView/Themes.md @@ -0,0 +1,50 @@ +--- +layout: post +title: About .NET WinUI AI Assist View control | Syncfusion +description: Learn here all about Theme support in Syncfusion WinUI AI AssistView(SfAIAssistView) control and more. +platform: WinUI +control: SfAIAssistView +documentation: ug +--- + +# Theme support in WinUI AI AssistView Control + +This section explains AIAssistView Control's various themes. + +## Set the Themes in AI AssistView Control + +The AI AssistView Control provides various themes to be applied by setting the theme name in `RequestedTheme` property in the App.xaml file. + +### Dark Theme + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} +{% endtabs %} + +![WinUI AI AssistView Control with Dark Theme](aiassistview_images/winui_aiassistview_dark_theme.png) + +### Light Theme + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} +{% endtabs %} + +![WinUI AI AssistView Control with Dark Theme](aiassistview_images/winui_aiassistview_light_theme.png) \ No newline at end of file diff --git a/winui/AI-AssistView/Typing-indicator.md b/winui/AI-AssistView/Typing-indicator.md index 6ec3b8a7..fe440179 100644 --- a/winui/AI-AssistView/Typing-indicator.md +++ b/winui/AI-AssistView/Typing-indicator.md @@ -132,4 +132,4 @@ By using the `TypingIndicator` property, a typing indicator is shown while the A {% endhighlight %} {% endtabs %} -![Suggestion feature in WinUI SfAIAssistView control](aiassistview_images/winui_aiassistview_typingindicator.png) \ No newline at end of file +![Suggestion feature in WinUI SfAIAssistView control](aiassistview_images/winui_aiassistview_typingindicator.gif) \ No newline at end of file diff --git a/winui/AI-AssistView/aiassistview_images/winui_aiassistview_dark_theme.png b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_dark_theme.png new file mode 100644 index 00000000..7d6723ce Binary files /dev/null and b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_dark_theme.png differ diff --git a/winui/AI-AssistView/aiassistview_images/winui_aiassistview_light_theme.png b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_light_theme.png new file mode 100644 index 00000000..347280b5 Binary files /dev/null and b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_light_theme.png differ diff --git a/winui/AI-AssistView/aiassistview_images/winui_aiassistview_openai.gif b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_openai.gif new file mode 100644 index 00000000..ab2e10ae Binary files /dev/null and b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_openai.gif differ diff --git a/winui/AI-AssistView/aiassistview_images/winui_aiassistview_typingindicator.gif b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_typingindicator.gif new file mode 100644 index 00000000..ab2e10ae Binary files /dev/null and b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_typingindicator.gif differ diff --git a/winui/AI-AssistView/aiassistview_images/winui_aiassistview_typingindicator.png b/winui/AI-AssistView/aiassistview_images/winui_aiassistview_typingindicator.png deleted file mode 100644 index c77ffdd9..00000000 Binary files a/winui/AI-AssistView/aiassistview_images/winui_aiassistview_typingindicator.png and /dev/null differ diff --git a/winui/AI-AssistView/open-ai.md b/winui/AI-AssistView/open-ai.md new file mode 100644 index 00000000..85ad3f90 --- /dev/null +++ b/winui/AI-AssistView/open-ai.md @@ -0,0 +1,200 @@ +--- +layout: post +title: TypingIndicator in WinUI AI AssistView control | Syncfusion +description: Learn about how to connect the AIAssistView control with OpenAI and chat gpt conversation experience. +platform: WinUI +control: SfAIAssistView +documentation: ug +--- + +# OpenAI connection for AIAssistView + +This section explains about how to connect the AIAssistView with OpenAI. + +## Creating an application with NuGet reference. + +1. Create a [WinUI 3 desktop app for C# and .NET 6](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop). +2. 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 xaml %} + + + + + + + +{% endhighlight %} + +{% 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 %} + +![OpenAI in WinUI SfAIAssistView control](aiassistview_images/winui_aiassistview_openai.gif) \ No newline at end of file