Merge branch 'development' of https://github.com/syncfusion-content/maui-docs into datagrid-liquidglassUG

Author: ShanmuganSekar-SF4698

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,21 +376,20 @@ 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" %} 
 
 <syncfusion:SfAIAssistView x:Name="sfAIAssistView" 
                            ShowActionButtons="True"
                            AssistItems="{Binding AssistItems}"> 
     <syncfusion:SfAIAssistView.ActionButtons> 
-        <syncfusion:ActionButton Text="Copy" Icon="copy.png" Command="{Binding CopyCommand}" /> 
-        <syncfusion:ActionButton Text="Clear" Icon="trash.png" Command="{Binding ClearCommand}" /> 
-        <syncfusion:ActionButton Text="Share" Icon="share.png" Command="{Binding ShareCommand}" /> 
+        <syncfusion:ActionButton Text="Upload images" Icon="image.png" Command="{Binding UploadCommand}" /> 
+        <syncfusion:ActionButton Text="Search in web" Icon="web.png" Command="{Binding SearchCommand}" />
     </syncfusion:SfAIAssistView.ActionButtons> 
 </syncfusion:SfAIAssistView>
 
 {% endhighlight %}
 
-{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="15 17 23 29" %} 
+{% highlight c# hl_lines="15 17 23" %} 
 
 using Syncfusion.Maui.AIAssistView;
 
@@ -410,22 +409,16 @@ public partial class MainPage : ContentPage
         {
             new ActionButton
             {
-                Text = "Copy",
-                Icon = ImageSource.FromFile("copy.png"),
-                Command = this.viewModel.CopyCommand
+                Text = "Upload images",
+                Icon = ImageSource.FromFile("image.png"),
+                Command = this.viewModel.UploadCommand
             },
             new ActionButton
             {
-                Text = "Clear",
-                Icon = ImageSource.FromFile("trash.png"),
-                Command = this.viewModel.ClearCommand
+                Text = "Search in web",
+                Icon = ImageSource.FromFile("web.png"),
+                Command = this.viewModel.SearchCommand
             },
-            new ActionButton
-            {
-                Text = "Share",
-                Icon = ImageSource.FromFile("share.png"),
-                Command = this.viewModel.ShareCommand
-            }
         };
 
         this.Content = sfAIAssistView;
@@ -1008,14 +1001,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 +1034,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 +1050,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;
 

MAUI/AIAssistView/suggestions.md

@@ -7,9 +7,9 @@ control: SfAutocomplete
 documentation: ug
 ---
 
-# Liquid glass support
+# Liquid Glass Support for .NET MAUI Autocomplete
 
-The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) supports a liquid `glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectsView](). You can customize the effect using properties such as [EffectType](), [EnableShadowEffect](), and round the corners using [CornerRadius](). This approach improves visual depth and readability when SfAutocomplete is placed over images or colorful layouts. Additionally, the dropdown portion of SfAutocomplete applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
+The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) supports a `liquid glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectView](). You can customize the effect using properties such as [EffectType](), [EnableShadowEffect](), and round the corners using [CornerRadius](). This approach improves visual depth and readability when SfAutocomplete is placed over images or colorful layouts. Additionally, the dropdown portion of SfAutocomplete applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
 
 ## Availability
 
@@ -19,12 +19,12 @@ The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.
 
 ## Prerequisites
 
-- Add the Syncfusion.Maui.Core package (for SfGlassEffectsView) and Syncfusion.Maui.Inputs (for SfAutocomplete).
+- Add the Syncfusion.Maui.Core package (for SfGlassEffectView) and Syncfusion.Maui.Inputs (for SfAutocomplete).
 
-XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
+XAML example Wrap the SfAutocomplete in an SfGlassEffectView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
 
 {% tabs %}
-{% highlight xaml hl_lines="49 52" %}
+{% highlight xaml hl_lines="19 22" %}
 
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage
@@ -37,29 +37,30 @@ XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the d
     <Grid>
         <!-- Background to make acrylic blur visible -->
         <Image Source="wallpaper.jpg" Aspect="AspectFill" />
-            <core:SfGlassEffectsView
+            <core:SfGlassEffectView
                 CornerRadius="20"
                 HeightRequest="40"
                 EffectType="Regular"
                 EnableShadowEffect="True">
 
                 <inputs:SfAutocomplete
                     EnableLiquidGlassEffect="True"
+                    Background="Transparent"
                     ItemsSource="{Binding Employees}"
                     DisplayMemberPath="Name"
                     DropDownBackground="Transparent"
                     Placeholder="Select employee"/>
-            </core:SfGlassEffectsView>
+            </core:SfGlassEffectView>
     </Grid>
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="14 17" %}
 
 using Syncfusion.Maui.Core;
 using Syncfusion.Maui.Inputs;
 
-var glassEffects = new SfGlassEffectsView
+var glassEffects = new SfGlassEffectView
 {
     CornerRadius=20,
     HeightRequest=40,
@@ -72,6 +73,7 @@ var Autocomplete = new SfAutocomplete
     EnableLiquidGlassEffect = true, // Dropdown glass effect
     ItemsSource = viewModel.Employees,
     DisplayMemberPath = "Name",
+    Background=Colors.Transparent,
     DropDownBackground= Colors.Transparent,
     Placeholder = "Select employee",
 };
@@ -82,4 +84,6 @@ glassEffects.Content = Autocomplete;
 {% endtabs %}
 
 
-The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.
+The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.
+
+![Autocomplete editor with liquid glass support](Images/UICustomization/Autocomplete_liquidglass.png)

MAUI/AIAssistView/working-with-aiassistview.md

@@ -7,7 +7,7 @@ control: SfButton
 documentation: ug
 ---
 
-# Liquid glass support
+# Liquid Glass Support for .NET MAUI Buttons
 
 The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfButton.html) provides `liquid glass` effect that gives the button a frosted, translucent appearance blending with the content behind it. When the glass effect is enabled, the button also scales while it is pressed, delivering a subtle, responsive interaction cue. This enhances visual depth and interactivity, especially when the button is placed over images or colorful layouts.
 
@@ -20,7 +20,7 @@ The [SfButton](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Buttons.SfBut
 XAML example Enable the glass effect on `SfButton`. When pressed, the button will `scale` while the effect is enabled.
 
 {% tabs %}
-{% highlight xaml hl_lines="49 52" %}
+{% highlight xaml hl_lines="16 17" %}
 
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage
@@ -38,6 +38,7 @@ XAML example Enable the glass effect on `SfButton`. When pressed, the button wil
                 x:Name="GlassButton"
                 Text="Continue"
                 EnableLiquidGlassEffect="True"
+                Background="Transparent"
                 WidthRequest="180"
                 CornerRadius="24"
                 HeightRequest="48" />
@@ -46,7 +47,7 @@ XAML example Enable the glass effect on `SfButton`. When pressed, the button wil
 </ContentPage>
 
 {% endhighlight %}
-{% highlight c# hl_lines="74 77" %}
+{% highlight c# hl_lines="7 9" %}
 
 using Syncfusion.Maui.Buttons;
 
@@ -56,10 +57,13 @@ var glassButton = new SfButton
     AutomationId = "Acrylic Button",
     EnableLiquidGlassEffect = true, // Enables glass look and press-time scaling
     WidthRequest = 180,
+    Background=Colors.Transparent;
     HeightRequest = 48
 };
 
 {% endhighlight %}
 {% endtabs %}
 
-The following screenshot illustrates SfButton with the glass effect enabled and the pressed-state scaling behavior over a wallpaper background.
+The following screenshot illustrates SfButton with the glass effect enabled and the pressed-state scaling behavior over a wallpaper background.
+
+![button with liquid glass support](Images/customization-images/Button_liquidglass.png)