Development to master

MAUI/AI-Coding-Assistant/prompt-library.md

@@ -1,11 +1,10 @@
 ---
 layout: post
 title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion
-description: Enhance .NET MAUI productivity with the Syncfusion AI Coding Assistant Prompt Library: prompts for code generation, configuration, and contextual guidance.
-control: Syncfusion AI Coding Assistant Prompt Library
+description: Enhance .NET MAUI productivity with the Syncfusion AI Coding Assistant Prompt Library, prompts for code generation, configuration, and contextual guidance.
 platform: MAUI
+control: Syncfusion AI Coding Assistant Prompt Library
 documentation: ug
-domainurl: ##DomainURL##
 ---
 
 # Prompt Library - AI Coding Assistant

MAUI/AIAssistView/items.md

@@ -481,4 +481,167 @@ public class ViewModel : INotifyPropertyChanged
 {% endhighlight %}
 {% endtabs %}
 
-![Error message in .NET MAUI AI AssistView](images/maui-aiassistview-error-message.png)
+![Error message in .NET MAUI AI AssistView](images/maui-aiassistview-error-message.png)
+
+## Customizable views
+
+The `SfAIAssistView` allows you to customize specific parts of request and response items without changing the entire UI. You can apply styles, templates, or subclass these views to create custom visuals and behavior.
+
+The following views can be customized individually:
+
+- `RequestTextView` – Represents the user request text content.
+- `RequestAssistImageView` – Represents the user request image content.
+- `RequestHyperlinkUrlLabelView` – Represents the user request URL label area.
+- `RequestHyperLinkDetailsViewFrameView` – Represents the user request URL details/preview frame area.
+- `ResponseTextView` – Represents the AI response text content.
+- `ResponseAssistImageView` – Represents the AI response image content.
+- `ResponseHyperlinkUrlLabelView` – Represents the AI response URL label area.
+- `ResponseHyperLinkDetailsViewFrameView` – Represents the AI response URL details/preview frame area.
+- `ResponseCardView` – Represents the container for card-based AI responses.
+- `CardItemView` – Represents a single card item within a response.
+- `CardButtonView` – Represents an action button inside a card item; exposes Title and Value bindable properties
+
+{% tabs %}
+{% highlight xaml hl_lines="14 30" %}
+
+<?xml version="1.0" encoding="utf-8"?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:syncfusion="clr-namespace:Syncfusion.Maui.AIAssistView;assembly=Syncfusion.Maui.AIAssistView"
+    x:Class="MauiAIAssistView.MainPage">
+
+    <ContentPage.BindingContext>
+            <local:ViewModel/>
+    </ContentPage.BindingContext>
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <!-- Request text customization -->
+            <Style TargetType="syncfusion:RequestTextView">
+                <Setter Property="ControlTemplate">
+                    <Setter.Value>
+                        <ControlTemplate>
+                            <Grid Padding="8" BackgroundColor="{DynamicResource SecondaryContainer}">
+                                <Label
+                                    Text="{Binding Text}"
+                                    FontSize="13"
+                                    TextColor="{DynamicResource OnSecondaryContainer}" />
+                            </Grid>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
+
+            <!-- Response text customization -->
+            <Style TargetType="syncfusion:ResponseTextView">
+                <Setter Property="ControlTemplate">
+                    <Setter.Value>
+                        <ControlTemplate>
+                            <Grid Padding="10" BackgroundColor="{DynamicResource PrimaryContainer}">
+                                <Label
+                                    Text="{Binding Text}"
+                                    FontSize="13"
+                                    FontAttributes="Italic"
+                                    TextColor="{DynamicResource OnPrimaryContainer}" />
+                            </Grid>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+            </Style>
+            ...
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <ContentPage.Content>
+        <syncfusion:SfAIAssistView x:Name="AssistView"
+                                   AssistItems="{Binding AssistItems}" />
+    </ContentPage.Content>
+</ContentPage>
+
+{% endhighlight %}
+{% highlight c# hl_lines="23 47" %}
+
+using Syncfusion.Maui.AIAssistView;
+
+namespace MauiAIAssistView
+{
+    public partial class MainPage : ContentPage
+    {
+        SfAIAssistView assistView;
+        ViewModel viewModel;
+
+        public MainPage()
+        {
+            InitializeComponent();
+            viewModel = new ViewModel();
+
+            assistView = new SfAIAssistView
+            {
+                AssistItems = viewModel.AssistItems;
+            };
+
+            var resources = new ResourceDictionary();
+
+            // Request text customization
+            var requestTextStyle = new Style(typeof(RequestTextView))
+            {
+                Setters =
+                {
+                    new Setter
+                    {
+                        Property = RequestTextView.ControlTemplateProperty,
+                        Value = new ControlTemplate(() =>
+                        {
+                            var grid = new Grid { Padding = 8, BackgroundColor = Colors.Beige };
+                            var label = new Label
+                            {
+                                FontSize = 13,
+                                TextColor = Colors.Black
+                            };
+                            label.SetBinding(Label.TextProperty, "Text");
+                            grid.Children.Add(label);
+                            return grid;
+                        })
+                    }
+                }
+            };
+
+            // Response text customization 
+            var responseTextStyle = new Style(typeof(ResponseTextView))
+            {
+                Setters =
+                {
+                    new Setter
+                    {
+                        Property = ResponseTextView.ControlTemplateProperty,
+                        Value = new ControlTemplate(() =>
+                        {
+                            var grid = new Grid { Padding = 10, BackgroundColor = Colors.LightSkyBlue };
+                            var label = new Label
+                            {
+                                FontSize = 13,
+                                FontAttributes = FontAttributes.Italic,
+                                TextColor = Colors.White
+                            };
+                            label.SetBinding(Label.TextProperty, "Text");
+                            grid.Children.Add(label);
+                            return grid;
+                        })
+                    }
+                }
+            };
+
+            ...
+
+            resources.Add(requestTextStyle);
+            resources.Add(responseTextStyle);
+
+            this.Resources = resources;
+            this.Content = assistView;
+            this.BindingContext = viewModel;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}

MAUI/AIAssistView/styles.md

@@ -1181,3 +1181,179 @@ public MainPage()
 {% endtabs %}
 
 ![Common suggestion style in .NET MAUI AI AssistView](Images/styles/maui-aiassistview-styles-commonsuggestion.png)
+
+## Scroll to bottom button style
+
+To style the scroll to bottom button 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> SfAIAssistViewScrollToBottomButtonBackground </td>
+<td> Background color of the scroll to bottom button view. </td>
+</tr>
+<tr>
+<td> SfAIAssistViewScrollToBottomButtonIconColor </td>
+<td> Color of the scroll to bottom button. </td>
+</tr>
+</table>
+
+{% tabs %}
+{% highlight xaml %}
+
+<ContentPage.Resources>
+    <core:SyncfusionThemeDictionary>
+        <core:SyncfusionThemeDictionary.MergedDictionaries>
+            <ResourceDictionary>
+                <x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
+                <Color x:Key="SfAIAssistViewScrollToBottomButtonBackground">Orange</Color>
+                <Color x:Key="SfAIAssistViewScrollToBottomButtonIconColor">White</Color>
+            </ResourceDictionary>
+        </core:SyncfusionThemeDictionary.MergedDictionaries>
+    </core:SyncfusionThemeDictionary>
+</ContentPage.Resources>
+
+{% endhighlight %}
+{% highlight c# %}
+
+public MainPage()
+{
+    InitializeComponent();
+    ResourceDictionary dictionary = new ResourceDictionary();
+    dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
+    dictionary.Add("SfAIAssistViewScrollToBottomButtonBackground", Colors.Orange);
+    dictionary.Add("SfAIAssistViewScrollToBottomButtonIconColor", Colors.White);
+    this.Resources.Add(dictionary);
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Action button style
+
+To style the action button 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> SfAIAssistViewActionButtonBackground </td>
+<td> Background color of the action button. </td>
+</tr>
+<tr>
+<td> SfAIAssistViewActionButtonIconColor </td>
+<td> Color of the action button. </td>
+</tr>
+<tr>
+<td> SfAIAssistViewActionButtonViewTextColor </td>
+<td> Text color of an item in the action button. </td>
+</tr>
+<tr>
+<td> SfAIAssistViewActionButtonsPopupBackground </td>
+<td> Background color of the action buttons view. </td>
+</tr>
+</table>
+
+{% tabs %}
+{% highlight xaml %}
+
+<ContentPage.Resources>
+    <core:SyncfusionThemeDictionary>
+        <core:SyncfusionThemeDictionary.MergedDictionaries>
+            <ResourceDictionary>
+                <x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
+                <Color x:Key="SfAIAssistViewActionButtonBackground">Orange</Color>
+                <Color x:Key="SfAIAssistViewActionButtonIconColor">White</Color>
+                <Color x:Key="SfAIAssistViewActionButtonViewTextColor">Black</Color>
+                <Color x:Key="SfAIAssistViewActionButtonsPopupBackground">LightGray</Color>
+            </ResourceDictionary>
+        </core:SyncfusionThemeDictionary.MergedDictionaries>
+    </core:SyncfusionThemeDictionary>
+</ContentPage.Resources>
+
+{% endhighlight %}
+{% highlight c# %}
+
+public MainPage()
+{
+    InitializeComponent();
+    ResourceDictionary dictionary = new ResourceDictionary();
+    dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
+    dictionary.Add("SfAIAssistViewActionButtonBackground", Colors.Orange);
+    dictionary.Add("SfAIAssistViewActionButtonIconColor", Colors.White);
+    dictionary.Add("SfAIAssistViewActionButtonViewTextColor", Colors.Black);
+    dictionary.Add("SfAIAssistViewActionButtonsPopupBackground", Colors.LightGray);
+    this.Resources.Add(dictionary);
+}
+
+{% 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 %}