Merge pull request #3884 from syncfusion-content/998547

998547: Prepare UG documentation for 2025 Volume 4 features - MAUI AssistView, TreeView

Author: Lakshminatarajan

MAUI/AIAssistView/Images/suggestions/maui-aiassistview-suggestion-headertext.png

@@ -502,7 +502,7 @@ The following views can be customized individually:
 - `CardButtonView` – Represents an action button inside a card item; exposes Title and Value bindable properties
 
 {% tabs %}
-{% highlight xaml hl_lines="12 27" %}
+{% highlight xaml hl_lines="14 30" %}
 
 <?xml version="1.0" encoding="utf-8"?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
@@ -559,7 +559,7 @@ The following views can be customized individually:
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="18 41" %}
+{% highlight c# hl_lines="23 47" %}
 
 using Syncfusion.Maui.AIAssistView;
 

MAUI/AIAssistView/Images/working-with-aiassistview/maui-aiassistview-editoption.gif

@@ -1293,3 +1293,67 @@ public MainPage()
 
 {% endhighlight %}
 {% endtabs %}
+
+## Response suggestion header text style
+
+To style the response suggestion header text view based on its appearance, set values to the in-built keys in the resource dictionary.
+
+<table>
+<tr>
+<th> Key </th>
+<th> Description </th>
+</tr>
+<tr>
+<td> SfAIAssistViewSuggestionHeaderTextColor </td>
+<td> Text color of response suggestion header text. </td>
+</tr>
+<tr>
+<td> SfAIAssistViewSuggestionHeaderFontSize </td>
+<td> Font size of response suggestion header text. </td>
+</tr>
+<tr>
+<td> SfAIAssistViewSuggestionHeaderFontFamily </td>
+<td> Font family of response suggestion header text. </td>
+</tr>
+<tr>
+<td> SfAIAssistViewSuggestionHeaderFontAttributes </td>
+<td> Font attributes of response suggestion header text. </td>
+</tr>
+</table>
+
+{% tabs %}
+{% highlight xaml %}
+
+<ContentPage.Resources>
+    <syncTheme:SyncfusionThemeDictionary>
+        <syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
+            <ResourceDictionary>
+                <x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
+                <Color x:Key="SfAIAssistViewSuggestionHeaderTextColor">DarkBlue</Color>
+                <x:Double x:Key="SfAIAssistViewSuggestionHeaderFontSize">14</x:Double>
+                <x:String x:Key="SfAIAssistViewSuggestionHeaderFontFamily">Roboto-Medium</x:String>
+                <FontAttributes x:Key="SfAIAssistViewSuggestionHeaderFontAttributes">Bold</FontAttributes>
+            </ResourceDictionary>
+        </syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
+    </syncTheme:SyncfusionThemeDictionary>
+</ContentPage.Resources>
+
+{% endhighlight %}
+{% highlight c# %}
+
+public MainPage()
+{
+    ....
+    InitializeComponent();
+    ResourceDictionary dictionary = new ResourceDictionary();
+    dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
+    dictionary.Add("SfAIAssistViewSuggestionHeaderTextColor", Colors.DarkBlue);
+    dictionary.Add("SfAIAssistViewSuggestionHeaderFontSize", 14);
+    dictionary.Add("SfAIAssistViewSuggestionHeaderFontFamily", "Roboto-Medium");
+    dictionary.Add("SfAIAssistViewSuggestionHeaderFontAttributes", FontAttributes.Bold);
+    this.Resources.Add(dictionary);
+    ....
+}
+
+{% endhighlight %}
+{% endtabs %}

MAUI/AIAssistView/items.md

@@ -384,6 +384,44 @@ The [AssistItemSuggestion.ItemSpacing](https://help.syncfusion.com/cr/maui/Syncf
 {% endhighlight %}
 {% endtabs %}
 
+### Response item suggestion header
+
+The `SfAIAssistView` control allows you to define the header text for each response suggestion by setting a custom text to the `AssistItem.SuggestionHeaderText` property, ensuring clear identification and context for each suggestion group displayed to users.
+
+{% tabs %}
+{% highlight c# tabtitle="ViewModel.cs" hl_lines="19" %}
+
+	...
+	private async Task GetResult(AssistItem requestItem)
+    {
+        await Task.Delay(1000).ConfigureAwait(true);
+
+        AssistItem responseItem = new AssistItem()
+        {
+           Text = "MAUI stands for .NET Multi-platform App UI. It's a .NET framework for building cross-platform apps with a single C# codebase for iOS, Android, macOS, and Windows. Sure! Here's a link to learn more about .NET MAUI",
+        };
+		
+		var assistSuggestions = new AssistItemSuggestion();
+
+        suggestions = new ObservableCollection<ISuggestion>();
+        suggestions.Add(new AssistSuggestion() { Text = "Get started with .NET MAUI" });
+        suggestions.Add(new AssistSuggestion() { Text = "Build your first MAUI app" });
+
+        assistSuggestions.Items = suggestions;
+		
+		assistSuggestions.SuggestionHeaderText = "Related Topics";
+		
+		// Assign suggestions to response item.
+		responseItem.Suggestion = assistSuggestions;
+        this.AssistItems.Add(responseItem);
+    }
+    ...
+ 
+{% endhighlight %}
+{% endtabs %}
+
+![Suggestion Header Text in .NET MAUI AI AssistView](Images/suggestions/maui-aiassistview-suggestion-headertext.png)
+
 ### Response item suggestion customization
 The `SfAIAssistView` control allows you to fully customize the appearance of the response suggestion items using the [ResponseSuggestionTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.SfAIAssistView.html#Syncfusion_Maui_AIAssistView_SfAIAssistView_ResponseSuggestionTemplate) property. This property lets you define a custom layout and style for the suggestion item UI.
 
@@ -435,7 +473,6 @@ public partial class MainPage : ContentPage
 
 ![Suggestion Template in .NET MAUI AI AssistView](Images/suggestions/maui-aiassistview-suggestiontemplate.png)
 
-
 ## Event and Commands
 
 When a user selects a suggestion, the [SuggestionItemSelected](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.SfAIAssistView.html#Syncfusion_Maui_AIAssistView_SfAIAssistView_SuggestionItemSelected) event and [SuggestionItemSelectedCommand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.SfAIAssistView.html#Syncfusion_Maui_AIAssistView_SfAIAssistView_SuggestionItemSelectedCommand) are triggered, providing [SuggestionItemSelectedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.SuggestionItemSelectedEventArgs.html) as arguments. This arguments contains the following details about the selected suggestion item.

MAUI/AIAssistView/styles.md

@@ -267,7 +267,7 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/custom-control-
 
 The `SfAIAssistView` allows you to edit a previously sent request. This feature lets users review and refine the prompt and resubmit from the editor to get more accurate responses. Each request shows an Edit icon; when tapped, the request text is placed in the editor (InputView) to redefine.
 
-N> Interaction: On desktop (Windows, macOS), hover over a request to reveal the Edit icon. On mobile (Android, iOS), tap the request to show the Edit option.
+N> **Interaction**: On desktop (Windows, macOS), hover over a request to reveal the Edit icon. On mobile (Android, iOS), tap the request to show the Edit option.
 
 ![Edit Option in .NET MAUI AI AssistView](Images/working-with-aiassistview/maui-aiassistview-editoption.gif)
 
@@ -276,7 +276,7 @@ N> Interaction: On desktop (Windows, macOS), hover over a request to reveal the
 The `SfAIAssistView` control allows you to fully customize the editor's appearance by using the [EditorViewTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.AIAssistView.SfAIAssistView.html#Syncfusion_Maui_AIAssistView_SfAIAssistView_EditorViewTemplate) property. This property lets you define a custom layout and style for the editor.
 
 {% tabs %}
-{% highlight xaml tabtitle="MainPage.xaml" hl_lines="13" %}
+{% highlight xaml hl_lines="13" %}
 
 <ContentPage.Resources>
     <ResourceDictionary>
@@ -340,14 +340,14 @@ public partial class MainPage : ContentPage
 The `SfAIAssistView` can display a quick action icon inside the editor. To enable the action button, set the `ShowActionButtons` property to `true`.
 
 {% tabs %} 
-{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %} 
+{% highlight xaml hl_lines="2" %} 
 
 <syncfusion:SfAIAssistView x:Name="sfAIAssistView" 
                            ShowActionButtons="True" />
 
 {% endhighlight %}
 
-{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="10" %} 
+{% highlight c# hl_lines="10" %} 
 
 using Syncfusion.Maui.AIAssistView;
 
@@ -376,7 +376,7 @@ Bind the `ActionButtons` collection with one or more `ActionButton` items to pop
 - `CommandParameter`: Passes a parameter to the command when executed.
 
 {% tabs %} 
-{% highlight xaml tabtitle="MainPage.xaml" hl_lines="4 5 6 7 8" %} 
+{% highlight xaml hl_lines="4 5 6 7 8" %} 
 
 <syncfusion:SfAIAssistView x:Name="sfAIAssistView" 
                            ShowActionButtons="True"
@@ -390,7 +390,7 @@ Bind the `ActionButtons` collection with one or more `ActionButton` items to pop
 
 {% endhighlight %}
 
-{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="15 17 23 29" %} 
+{% highlight c# hl_lines="15 17 23 29" %} 
 
 using Syncfusion.Maui.AIAssistView;
 
@@ -1008,14 +1008,14 @@ public partial class MainPage : ContentPage
 The `SfAIAssistView` control provides an option to display a scroll-to-bottom button that helps users quickly navigate back to the latest responses when they have scrolled up in the AI conversation. To enable this, set the `ShowScrollToBottomButton` property to `true`.
 
 {% tabs %}
-{% highlight xaml tabtitle="MainPage.xaml" hl_lines="3" %}
+{% highlight xaml hl_lines="3" %}
 
 <syncfusion:SfAIAssistView x:Name="sfAIAssistView"
                            AssistItems="{Binding AssistItems}"
                            ShowScrollToBottomButton="True" />
 
 {% endhighlight %}
-{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="10" %}
+{% highlight c# hl_lines="10" %}
 
 using Syncfusion.Maui.AIAssistView;
 
@@ -1041,7 +1041,7 @@ public partial class MainPage : ContentPage
 The `SfAIAssistView` control allows you to fully customize the scroll-to-bottom button appearance by using the `ScrollToBottomButtonTemplate` property. This property lets you define a custom layout and style.
 
 {% tabs %}
-{% highlight xaml tabtitle="MainPage.xaml" hl_lines="12" %}
+{% highlight xaml hl_lines="12" %}
 
 <ContentPage.Resources>
         <ResourceDictionary>
@@ -1057,7 +1057,7 @@ The `SfAIAssistView` control allows you to fully customize the scroll-to-bottom
                            ScrollToBottomButtonTemplate="{StaticResource scrollToBottomButtonTemplate}" />
 
 {% endhighlight %}
-{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="10" %}
+{% highlight c# hl_lines="11" %}
 
 using Syncfusion.Maui.AIAssistView;