WinUI-906763 : Prepare the UG documentation for SfAIAssistView control in WinUI platform.

winui-toc.html

@@ -77,8 +77,10 @@
         <ul>
             <li><a href="/winui/ai-assistview/overview">Overview</a></li>
             <li><a href="/winui/ai-assistview/getting-started">Getting Started</a></li>
+            <li><a href="/winui/ai-assistview/open-ai"></a>Open AI</li>
             <li><a href="/winui/ai-assistview/suggestions">Suggestion</a></li>
             <li><a href="/winui/ai-assistview/typing-indicator">Typing indicator</a></li>
+            <li><a href="/winui/ai-assistview/themes">Themes</a></li>
         </ul>
     </li>
     <li>

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
 

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.
+* **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.

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 %}
+
+<Application
+    x:Class="UI_Customization.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:UI_Customization" RequestedTheme="Dark">
+</Application>
+
+{% endhighlight %}
+{% endtabs %} 
+
+![WinUI AI AssistView Control with Dark Theme](aiassistview_images/winui_aiassistview_dark_theme.png)
+
+### Light Theme
+
+{% tabs %}
+{% highlight xaml %}
+
+<Application
+    x:Class="UI_Customization.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:UI_Customization" RequestedTheme="Light">
+</Application>
+
+{% endhighlight %}
+{% endtabs %} 
+
+![WinUI AI AssistView Control with Dark Theme](aiassistview_images/winui_aiassistview_light_theme.png)

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)
+![Suggestion feature in WinUI SfAIAssistView control](aiassistview_images/winui_aiassistview_typingindicator.gif)

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 %}
+
+<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.Core"
+    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
+ {
+     AIAssistChatService service;
+
+     private ObservableCollection<object> chats;
+     public ObservableCollection<object> Chats
+     {
+         get
+         {
+             return this.chats;
+         }
+         set
+         {
+             this.chats = value;
+             RaisePropertyChanged("Messages");
+         }
+     }
+     public DataTemplate AIIcon { get; set; }
+     private ObservableCollection<string> 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<string> 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<object>();
+         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<IChatCompletionService>();
+         }
+         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)