Skip to content

Commit 52019f3

Browse files
MohanrajM-SF4782MohanrajM-SF4782
committed
Merge branch 'development' of https://github.com/syncfusion-content/maui-docs into 998547
2 parents 875fa55 + 7259a91 commit 52019f3

File tree

64 files changed

+3202
-252
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+3202
-252
lines changed

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

-126 KB
Loading

‎MAUI/AIAssistView/items.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -502,7 +502,7 @@ The following views can be customized individually:
502502
- `CardButtonView` – Represents an action button inside a card item; exposes Title and Value bindable properties
503503

504504
{% tabs %}
505-
{% highlight xaml hl_lines="12 27" %}
505+
{% highlight xaml hl_lines="14 30" %}
506506

507507
<?xml version="1.0" encoding="utf-8"?>
508508
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
@@ -559,7 +559,7 @@ The following views can be customized individually:
559559
</ContentPage>
560560

561561
{% endhighlight %}
562-
{% highlight c# hl_lines="18 41" %}
562+
{% highlight c# hl_lines="21 47" %}
563563

564564
using Syncfusion.Maui.AIAssistView;
565565

‎MAUI/AIAssistView/styles.md‎

Lines changed: 75 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1182,30 +1182,22 @@ public MainPage()
11821182

11831183
![Common suggestion style in .NET MAUI AI AssistView](Images/styles/maui-aiassistview-styles-commonsuggestion.png)
11841184

1185-
## Scroll to buttom buttom style
1185+
## Scroll to bottom button style
11861186

11871187
To style the scroll to bottom button view based on its appearance, set values to the in-built keys in the resource dictionary.
11881188

11891189
<table>
11901190
<tr>
1191-
<th>Key</th>
1192-
<th>Description</th>
1193-
</tr>
1194-
<tr>
1195-
<td>ScrollToBottomButtonBackground</td>
1196-
<td>Background color of the scroll to bottom button view.</td>
1197-
</tr>
1198-
<tr>
1199-
<td>ScrollToBottomButtonIconColor</td>
1200-
<td>Color of the scroll to bottom button.</td>
1191+
<th> Key </th>
1192+
<th> Description </th>
12011193
</tr>
12021194
<tr>
1203-
<td>HoveredScrollToBottomButtonBackground</td>
1204-
<td>Background color of scroll to bottom button in hover state.</td>
1195+
<td> SfAIAssistViewScrollToBottomButtonBackground </td>
1196+
<td> Background color of the scroll to bottom button view. </td>
12051197
</tr>
12061198
<tr>
1207-
<td>PressedScrollToBottomButtonBackground</td>
1208-
<td>Background color when the scroll to bottom button is pressed.</td>
1199+
<td> SfAIAssistViewScrollToBottomButtonIconColor </td>
1200+
<td> Color of the scroll to bottom button. </td>
12091201
</tr>
12101202
</table>
12111203

@@ -1219,8 +1211,6 @@ To style the scroll to bottom button view based on its appearance, set values to
12191211
<x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
12201212
<Color x:Key="SfAIAssistViewScrollToBottomButtonBackground">Orange</Color>
12211213
<Color x:Key="SfAIAssistViewScrollToBottomButtonIconColor">White</Color>
1222-
<Color x:Key="SfAIAssistViewHoveredScrollToBottomButtonBackground">DarkOrange</Color>
1223-
<Color x:Key="SfAIAssistViewPressedScrollToBottomButtonBackground">Red</Color>
12241214
</ResourceDictionary>
12251215
</core:SyncfusionThemeDictionary.MergedDictionaries>
12261216
</core:SyncfusionThemeDictionary>
@@ -1236,8 +1226,6 @@ public MainPage()
12361226
dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
12371227
dictionary.Add("SfAIAssistViewScrollToBottomButtonBackground", Colors.Orange);
12381228
dictionary.Add("SfAIAssistViewScrollToBottomButtonIconColor", Colors.White);
1239-
dictionary.Add("SfAIAssistViewHoveredScrollToBottomButtonBackground", Colors.DarkOrange);
1240-
dictionary.Add("SfAIAssistViewPressedScrollToBottomButtonBackground", Colors.Red);
12411229
this.Resources.Add(dictionary);
12421230
}
12431231

@@ -1250,24 +1238,24 @@ To style the action button view based on its appearance, set values to the in-bu
12501238

12511239
<table>
12521240
<tr>
1253-
<th>Key</th>
1254-
<th>Description</th>
1241+
<th> Key </th>
1242+
<th> Description </th>
12551243
</tr>
12561244
<tr>
1257-
<td>ActionButtonBackground</td>
1258-
<td>Background color of the action button.</td>
1245+
<td> SfAIAssistViewActionButtonBackground </td>
1246+
<td> Background color of the action button. </td>
12591247
</tr>
12601248
<tr>
1261-
<td>ActionButtonIconColor</td>
1262-
<td>Color of the action button.</td>
1249+
<td> SfAIAssistViewActionButtonIconColor </td>
1250+
<td> Color of the action button. </td>
12631251
</tr>
12641252
<tr>
1265-
<td>ActionButtonTextColor</td>
1266-
<td>Text color of an item in the action button.</td>
1253+
<td> SfAIAssistViewActionButtonViewTextColor </td>
1254+
<td> Text color of an item in the action button. </td>
12671255
</tr>
12681256
<tr>
1269-
<td>ActionButtonViewBackground</td>
1270-
<td>Background color of the action buttons view.</td>
1257+
<td> SfAIAssistViewActionButtonsPopupBackground </td>
1258+
<td> Background color of the action buttons view. </td>
12711259
</tr>
12721260
</table>
12731261

@@ -1281,8 +1269,8 @@ To style the action button view based on its appearance, set values to the in-bu
12811269
<x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
12821270
<Color x:Key="SfAIAssistViewActionButtonBackground">Orange</Color>
12831271
<Color x:Key="SfAIAssistViewActionButtonIconColor">White</Color>
1284-
<Color x:Key="SfAIAssistViewActionButtonTextColor">Black</Color>
1285-
<Color x:Key="SfAIAssistViewActionButtonViewBackground">LightGray</Color>
1272+
<Color x:Key="SfAIAssistViewActionButtonViewTextColor">Black</Color>
1273+
<Color x:Key="SfAIAssistViewActionButtonsPopupBackground">LightGray</Color>
12861274
</ResourceDictionary>
12871275
</core:SyncfusionThemeDictionary.MergedDictionaries>
12881276
</core:SyncfusionThemeDictionary>
@@ -1298,10 +1286,63 @@ public MainPage()
12981286
dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
12991287
dictionary.Add("SfAIAssistViewActionButtonBackground", Colors.Orange);
13001288
dictionary.Add("SfAIAssistViewActionButtonIconColor", Colors.White);
1301-
dictionary.Add("SfAIAssistViewActionButtonTextColor", Colors.Black);
1302-
dictionary.Add("SfAIAssistViewActionButtonViewBackground", Colors.LightGray);
1289+
dictionary.Add("SfAIAssistViewActionButtonViewTextColor", Colors.Black);
1290+
dictionary.Add("SfAIAssistViewActionButtonsPopupBackground", Colors.LightGray);
1291+
this.Resources.Add(dictionary);
1292+
}
1293+
1294+
{% endhighlight %}
1295+
{% endtabs %}
1296+
1297+
## Response suggestion header text style
1298+
1299+
To style the response suggestion header text view based on its appearance, set values to the in-built keys in the resource dictionary.
1300+
1301+
<table>
1302+
<tr>
1303+
<th> Key </th>
1304+
<th> Description </th>
1305+
</tr>
1306+
<tr>
1307+
<td> SfAIAssistViewSuggestionHeaderTextColor </td>
1308+
<td> Text color of response suggestion header text. </td>
1309+
</tr>
1310+
<tr>
1311+
<td> SfAIAssistViewSuggestionHeaderFontSize </td>
1312+
<td> Font size of response suggestion header text. </td>
1313+
</tr>
1314+
</table>
1315+
1316+
{% tabs %}
1317+
{% highlight xaml %}
1318+
1319+
<ContentPage.Resources>
1320+
<syncTheme:SyncfusionThemeDictionary>
1321+
<syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
1322+
<ResourceDictionary>
1323+
<x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
1324+
<Color x:Key="SfAIAssistViewSuggestionHeaderTextColor">DarkBlue</Color>
1325+
<x:Double x:Key="SfAIAssistViewSuggestionHeaderFontSize">14</x:Double>
1326+
</ResourceDictionary>
1327+
</syncTheme:SyncfusionThemeDictionary.MergedDictionaries>
1328+
</syncTheme:SyncfusionThemeDictionary>
1329+
</ContentPage.Resources>
1330+
1331+
{% endhighlight %}
1332+
{% highlight c# %}
1333+
1334+
public MainPage()
1335+
{
1336+
....
1337+
InitializeComponent();
1338+
ResourceDictionary dictionary = new ResourceDictionary();
1339+
dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
1340+
dictionary.Add("SfAIAssistViewSuggestionHeaderTextColor", Colors.DarkBlue);
1341+
dictionary.Add("SfAIAssistViewSuggestionHeaderFontSize", 14.0);
13031342
this.Resources.Add(dictionary);
1343+
....
13041344
}
13051345

13061346
{% endhighlight %}
1307-
{% endtabs %}
1347+
{% endtabs %}
1348+

‎MAUI/AIAssistView/suggestions.md‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,42 @@ The [AssistItemSuggestion.ItemSpacing](https://help.syncfusion.com/cr/maui/Syncf
384384
{% endhighlight %}
385385
{% endtabs %}
386386

387+
### Response item suggestion header
388+
389+
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.
390+
391+
{% tabs %}
392+
{% highlight c# tabtitle="ViewModel.cs" hl_lines="19" %}
393+
394+
...
395+
private async Task GetResult(AssistItem requestItem)
396+
{
397+
await Task.Delay(1000).ConfigureAwait(true);
398+
399+
AssistItem responseItem = new AssistItem()
400+
{
401+
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",
402+
};
403+
404+
var assistSuggestions = new AssistItemSuggestion();
405+
406+
suggestions = new ObservableCollection<ISuggestion>();
407+
suggestions.Add(new AssistSuggestion() { Text = "Get started with .NET MAUI" });
408+
suggestions.Add(new AssistSuggestion() { Text = "Build your first MAUI app" });
409+
410+
assistSuggestions.Items = suggestions;
411+
412+
assistSuggestions.SuggestionHeaderText = "Related Topics";
413+
414+
// Assign suggestions to response item.
415+
responseItem.Suggestion = assistSuggestions;
416+
this.AssistItems.Add(responseItem);
417+
}
418+
...
419+
420+
{% endhighlight %}
421+
{% endtabs %}
422+
387423
### Response item suggestion customization
388424
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.
389425

@@ -435,7 +471,6 @@ public partial class MainPage : ContentPage
435471

436472
![Suggestion Template in .NET MAUI AI AssistView](Images/suggestions/maui-aiassistview-suggestiontemplate.png)
437473

438-
439474
## Event and Commands
440475

441476
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/working-with-aiassistview.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/custom-control-
267267

268268
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.
269269

270-
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.
270+
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.
271271

272272
![Edit Option in .NET MAUI AI AssistView](Images/working-with-aiassistview/maui-aiassistview-editoption.gif)
273273

@@ -276,7 +276,7 @@ N> Interaction: On desktop (Windows, macOS), hover over a request to reveal the
276276
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.
277277

278278
{% tabs %}
279-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="13" %}
279+
{% highlight xaml tabtitle="XAML" hl_lines="13" %}
280280

281281
<ContentPage.Resources>
282282
<ResourceDictionary>
@@ -340,14 +340,14 @@ public partial class MainPage : ContentPage
340340
The `SfAIAssistView` can display a quick action icon inside the editor. To enable the action button, set the `ShowActionButtons` property to `true`.
341341

342342
{% tabs %}
343-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}
343+
{% highlight xaml hl_lines="2" %}
344344

345345
<syncfusion:SfAIAssistView x:Name="sfAIAssistView"
346346
ShowActionButtons="True" />
347347

348348
{% endhighlight %}
349349

350-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="10" %}
350+
{% highlight c# hl_lines="10" %}
351351

352352
using Syncfusion.Maui.AIAssistView;
353353

@@ -376,7 +376,7 @@ Bind the `ActionButtons` collection with one or more `ActionButton` items to pop
376376
- `CommandParameter`: Passes a parameter to the command when executed.
377377

378378
{% tabs %}
379-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="4 5 6 7 8" %}
379+
{% highlight xaml tabtitle="XAML" hl_lines="4 5 6 7 8" %}
380380

381381
<syncfusion:SfAIAssistView x:Name="sfAIAssistView"
382382
ShowActionButtons="True"
@@ -390,7 +390,7 @@ Bind the `ActionButtons` collection with one or more `ActionButton` items to pop
390390

391391
{% endhighlight %}
392392

393-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="15 17 23 29" %}
393+
{% highlight c# hl_lines="15 17 23 29" %}
394394

395395
using Syncfusion.Maui.AIAssistView;
396396

@@ -1008,14 +1008,14 @@ public partial class MainPage : ContentPage
10081008
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`.
10091009

10101010
{% tabs %}
1011-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="3" %}
1011+
{% highlight xaml hl_lines="3" %}
10121012

10131013
<syncfusion:SfAIAssistView x:Name="sfAIAssistView"
10141014
AssistItems="{Binding AssistItems}"
10151015
ShowScrollToBottomButton="True" />
10161016

10171017
{% endhighlight %}
1018-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="10" %}
1018+
{% highlight c# hl_lines="10" %}
10191019

10201020
using Syncfusion.Maui.AIAssistView;
10211021

@@ -1041,7 +1041,7 @@ public partial class MainPage : ContentPage
10411041
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.
10421042

10431043
{% tabs %}
1044-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="12" %}
1044+
{% highlight xaml hl_lines="12" %}
10451045

10461046
<ContentPage.Resources>
10471047
<ResourceDictionary>
@@ -1057,7 +1057,7 @@ The `SfAIAssistView` control allows you to fully customize the scroll-to-bottom
10571057
ScrollToBottomButtonTemplate="{StaticResource scrollToBottomButtonTemplate}" />
10581058

10591059
{% endhighlight %}
1060-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="10" %}
1060+
{% highlight c# hl_lines="10" %}
10611061

10621062
using Syncfusion.Maui.AIAssistView;
10631063

0 commit comments

Comments
 (0)