Skip to content

Commit 3ec61ac

Browse files
kmuthukumarmkmkmuthukumarmkm
authored
Merge branch 'development' into 999227-MCP-Changes
2 parents b6253d9 + f3e44aa commit 3ec61ac

30 files changed

+4647
-596
lines changed

‎blazor-toc.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1584,6 +1584,7 @@
15841584
<li><a href="/blazor/chat-ui/mention">Mention Integration</a></li>
15851585
<li><a href="/blazor/chat-ui/header">Header</a></li>
15861586
<li><a href="/blazor/chat-ui/footer">Footer</a></li>
1587+
<li><a href="/blazor/chat-ui/file-attachments">File attachments</a></li>
15871588
<li><a href="/blazor/chat-ui/templates">Templates</a></li>
15881589
<li><a href="/blazor/chat-ui/speech-to-text">Speech to Text</a></li>
15891590
<li><a href="/blazor/chat-ui/appearance">Appearance</a></li>
@@ -4869,6 +4870,7 @@
48694870
</li>
48704871
<li> <a href="/blazor/treegrid/data-binding">Data Binding</a></li>
48714872
<li> <a href="/blazor/treegrid/custom-binding">Custom Binding</a></li>
4873+
<li> <a href="/blazor/treegrid/graphql">GraphQL Adaptor</a></li>
48724874
<li>
48734875
<a href="/blazor/treegrid/columns/columns">Columns</a>
48744876
<ul>

‎blazor/Release-Notes/32.1.19.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ documentation: ug
77

88
# Essential Studio for Blazor - v32.1.19 Release Notes
99

10-
{% include release-info.html date="December 15, 2025" version="v32.1.19" passed="78027" failed="0" %}
10+
{% include release-info.html date="December 16, 2025" version="v32.1.19" passed="78027" failed="0" %}
1111

1212
{% directory path: _includes/release-notes/v32.1.19 %}
1313

‎blazor/ai-assistview/events.md‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,21 +82,20 @@ The [PromptChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inte
8282
}
8383
```
8484

85-
## AttachmentUploadStart
85+
## OnAttachmentUploadReady
8686

87-
The [AttachmentUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentUploadStart) event is triggered before the attached files upload begins in the AI AssistView
87+
The [OnAttachmentUploadReady](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_OnAttachmentUploadReady) event is triggered before the attached files upload begins in the AI AssistView
8888

8989
```cshtml
9090
9191
@using Syncfusion.Blazor.InteractiveChat
92-
@using Syncfusion.Blazor.Inputs
9392
9493
<div class="aiassist-container" style="height: 350px; width: 650px;">
95-
<SfAIAssistView AttachmentUploadStart="AttachmentUploadStart" AttachmentSettings="attachmentSettings" PromptRequested="PromptRequest"></SfAIAssistView>
94+
<SfAIAssistView OnAttachmentUploadReady="OnAttachmentUploadReady" AttachmentSettings="attachmentSettings" PromptRequested="PromptRequest"></SfAIAssistView>
9695
</div>
9796
9897
@code {
99-
private void AttachmentUploadStart(UploadingEventArgs args)
98+
private void OnAttachmentUploadReady(AttachmentUploadReadyEventArgs args)
10099
{
101100
// Your required action here
102101
}
@@ -213,3 +212,35 @@ The [AttachmentRemoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
213212
}
214213
}
215214
```
215+
216+
## AttachmentClick
217+
218+
The [AttachmentClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentClick) event is triggered when an attached file is clicked in the AI AssistView.
219+
220+
```cshtml
221+
222+
@using Syncfusion.Blazor.InteractiveChat
223+
224+
<div class="aiassist-container" style="height: 350px; width: 650px;">
225+
<SfAIAssistView AttachmentClick="OnAttachmentClick" AttachmentSettings="attachmentSettings" PromptRequested="PromptRequest"></SfAIAssistView>
226+
</div>
227+
228+
@code {
229+
private void OnAttachmentClick(AttachmentClickEventArgs args)
230+
{
231+
// Your required action here
232+
}
233+
private AssistViewAttachmentSettings attachmentSettings = new AssistViewAttachmentSettings()
234+
{
235+
Enable = true,
236+
SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save",
237+
RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"
238+
};
239+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
240+
{
241+
await Task.Delay(1000);
242+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
243+
args.Response = defaultResponse;
244+
}
245+
}
246+
```

‎blazor/ai-assistview/file-attachments.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,37 @@ You can use the `MaxFileSize` property to allow the maximum file size of the upl
127127
```
128128

129129
![Blazor AI AssistView Attachment Enable](./images/fileSizeFailure.png)
130+
131+
### Setting maximum count
132+
133+
Restrict how many files can be attached at once using `MaximumCount` property. The default value is `10`. If users select more than the allowed count, the maximum count reached error will be displayed.
134+
135+
```cshtml
136+
@using Syncfusion.Blazor.InteractiveChat
137+
138+
<div class="aiassist-container" style="height: 350px; width: 650px;">
139+
<SfAIAssistView AttachmentSettings="attachmentSettings" PromptRequested="PromptRequest"></SfAIAssistView>
140+
</div>
141+
142+
@code {
143+
private void OnAttachmentClick(AttachmentClickEventArgs args)
144+
{
145+
// Your required action here
146+
}
147+
private AssistViewAttachmentSettings attachmentSettings = new AssistViewAttachmentSettings()
148+
{
149+
Enable = true,
150+
SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save",
151+
RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove",
152+
MaximumCount = 5
153+
};
154+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
155+
{
156+
await Task.Delay(1000);
157+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
158+
args.Response = defaultResponse;
159+
}
160+
}
161+
```
162+
163+
![Blazor AI AssistView Attachment Enable](./images/maximum-count.png)

‎blazor/ai-assistview/images/footer-toolbar-item.png‎

20.3 KB
Loading

‎blazor/ai-assistview/images/footer-toolbar-position.png‎

21.6 KB
Loading

‎blazor/ai-assistview/images/maximum-count.png‎

27.2 KB
Loading

‎blazor/ai-assistview/toolbar-items.md‎

Lines changed: 148 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,157 @@ documentation: ug
99

1010
# Toolbar items in Blazor AI AssistView component
1111

12-
You can render the AI AssistView toolbar items by using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) & [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directives.
12+
You can render the AI AssistView toolbar items by using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html), [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) & `AssistViewFooterToolbar` tag directives.
13+
14+
## Configure footer toolbar
15+
16+
By default, the footer toolbar renders the `send`, if attachment is enabled the `attachment` item will also be rendered which allows users to send the prompt text or attach files as needed.
17+
18+
In the following example, AI AssistView component rendered with footer toolbar items such as `send` and `attachment` icons.
19+
20+
```cshtml
21+
@using Syncfusion.Blazor.InteractiveChat
22+
23+
<div class="aiassist-container" style="height: 350px; width: 650px;">
24+
<SfAIAssistView AttachmentSettings="attachmentSettings" PromptRequested="PromptRequest"></SfAIAssistView>
25+
</div>
26+
27+
@code {
28+
private AssistViewAttachmentSettings attachmentSettings = new AssistViewAttachmentSettings()
29+
{
30+
Enable = true,
31+
SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save",
32+
RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"
33+
};
34+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
35+
{
36+
await Task.Delay(1000);
37+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
38+
args.Response = defaultResponse;
39+
}
40+
}
41+
```
42+
![Blazor AI AssistView Attachment Enable](./images/enableAttachment.png)
43+
44+
### Toolbar positioning
45+
46+
You can use the `ToolbarPosition` property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the ToolbarPosition is `Inline`.
47+
48+
By setting ToolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area .
49+
50+
```cshtml
51+
52+
@using Syncfusion.Blazor.InteractiveChat
53+
54+
<div class="aiassist-container" style="height: 350px; width: 650px;">
55+
<button id="toolbarBtn" class="e-btn" @onclick="UpdateToolbarPosition">UpdateToolbarPosition</button>
56+
<SfAIAssistView PromptRequested="PromptRequest" Prompts="@prompts">
57+
<AssistViewFooterToolbar ToolbarPosition="@toolbarPosition">
58+
<AssistViewFooterToolbarItem></AssistViewFooterToolbarItem>
59+
</AssistViewFooterToolbar>
60+
</SfAIAssistView>
61+
</div>
62+
63+
@code {
64+
private ToolbarPosition toolbarPosition = ToolbarPosition.Bottom;
65+
private List<AssistViewPrompt> prompts = new List<AssistViewPrompt>()
66+
{
67+
new AssistViewPrompt() { Prompt = "What is AI?", Response = "<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>" }
68+
};
69+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
70+
{
71+
await Task.Delay(1000);
72+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
73+
args.Response = defaultResponse;
74+
}
75+
private void UpdateToolbarPosition()
76+
{
77+
toolbarPosition = toolbarPosition == ToolbarPosition.Bottom ? ToolbarPosition.Inline : ToolbarPosition.Bottom;
78+
}
79+
}
80+
81+
<style>
82+
#toolbarBtn {
83+
margin-bottom: 10px;
84+
}
85+
</style>
86+
87+
```
88+
89+
![Blazor AI AssistView Footer Toolbar Position](./images/footer-toolbar-position.png)
90+
91+
### Adding custom items
92+
93+
You can use the `AssistViewFooterToolbarItem` tag directive within the `AssistViewFooterToolbar` to add custom items for the footer toolbar in the AI AssistView.
94+
95+
> To know more about the items, please refer to the [Items](./toolbar-items#items) section.
96+
97+
```cshtml
98+
99+
@using Syncfusion.Blazor.InteractiveChat
100+
@using Syncfusion.Blazor.Navigations
101+
102+
<div class="aiassist-container" style="height: 350px; width: 650px;">
103+
<SfAIAssistView PromptRequested="PromptRequest" Prompts="@prompts">
104+
<AssistViewFooterToolbar ToolbarPosition="ToolbarPosition.Bottom">
105+
<AssistViewFooterToolbarItem IconCss="e-icons e-assistview-icon" Align="ItemAlign.Left"></AssistViewFooterToolbarItem>
106+
</AssistViewFooterToolbar>
107+
</SfAIAssistView>
108+
</div>
109+
110+
@code {
111+
private List<AssistViewPrompt> prompts = new List<AssistViewPrompt>()
112+
{
113+
new AssistViewPrompt() { Prompt = "What is AI?", Response = "<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>" }
114+
};
115+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
116+
{
117+
await Task.Delay(1000);
118+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
119+
args.Response = defaultResponse;
120+
}
121+
}
122+
123+
```
124+
125+
![Blazor AI AssistView Footer Toolbar custom item](./images/footer-toolbar-item.png)
126+
127+
### Item click
128+
The [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_ItemClick) event is triggered when the footer toolbar item is clicked.
129+
130+
```cshtml
131+
132+
@using Syncfusion.Blazor.InteractiveChat
133+
134+
<div class="aiassist-container" style="height: 350px; width: 650px;">
135+
<SfAIAssistView PromptRequested="PromptRequest" Prompts="@prompts">
136+
<AssistViewFooterToolbar ItemClick="FooterToolbarItemClicked">
137+
</AssistViewFooterToolbar>
138+
</SfAIAssistView>
139+
</div>
140+
141+
@code {
142+
private void FooterToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
143+
{
144+
// Your required action here
145+
}
146+
private List<AssistViewPrompt> prompts = new List<AssistViewPrompt>()
147+
{
148+
new AssistViewPrompt() { Prompt = "What is AI?", Response = "<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>" }
149+
};
150+
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
151+
{
152+
await Task.Delay(1000);
153+
var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
154+
args.Response = defaultResponse;
155+
}
156+
}
157+
158+
```
13159

14160
## Adding header toolbar items
15161

16-
The AI AssistView component allows you to add header toolbar items using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html) tag directive within the [AssistViewToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html).
162+
The AI AssistView component allows you to add header toolbar items using the `AssistViewToolbarItem` tag directive within the `AssistViewToolbar`.
17163

18164
### Items
19165

‎blazor/blockeditor/built-in-blocks/embed.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ You can render an `Image` block by setting the `BlockType` property to `Image` i
2121

2222
#### Global Image Settings
2323

24-
You can configure global settings for image blocks using the `ImageBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for all images in the editor.
24+
You can configure global settings for image blocks using the `BlockEditorImageBlock` tag directive. This ensures consistent behavior for all images in the editor.
2525

26-
The `ImageBlockSettings` property supports the following options:
26+
The `BlockEditorImageBlock` tag directive supports the following options:
2727

2828
| Property | Description | Default Value |
2929
|----------|-------------|---------------|

‎blazor/blockeditor/built-in-blocks/inline-content.md‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -74,30 +74,24 @@ The Block Editor comes with different built-in label items. These includes:
7474
- **Progress**: In-progress, On-hold, Done
7575
- **Priority**: High, Medium, Low
7676

77-
### Customize label
77+
### Global label settings
7878

79-
You can customize the labels by using the `Properties` property along with `ContentType` as `Label`.
79+
You can configure global settings for all label inline contents using the `BlockEditorLabel` tag directive.
8080

81-
### ContentType and Properties
81+
The `BlockEditorLabel` tag directive supports the following options:
8282

83-
```cshtml
84-
// Adding inline label
85-
new BlockModel
86-
{
87-
BlockType = BlockType.Paragraph,
88-
Content = {new ContentModel{ContentType = ContentType.Label, Properties = new LabelContentSettings {
89-
LabelID = "progress"
90-
}}}
91-
}
92-
```
83+
| Property | Description |
84+
|----------|-------------|
85+
| TriggerChar | Specifies the character that opens the label suggestions popup. |
86+
| Items | Specifies the label items. |
9387

94-
### Trigger Character configuration
88+
#### Trigger Character configuration
9589

9690
Use the `TriggerChar` property to define the character that opens the label suggestions popup. The default trigger character is `$`.
9791

98-
### Label items configuration
92+
#### Label items configuration
9993

100-
Define the available labels using the `Items` array. When a user types the trigger character, a popup will show matching items.
94+
Define the available labels using the `Items` property present in the `BlockEditorLabel` tag directive. When a user types the trigger character, a popup will show matching items.
10195

10296
Each item supports the following properties:
10397

@@ -112,7 +106,24 @@ Each item supports the following properties:
112106

113107
When users type the trigger character, a popup will appear showing matching label items from which they can select. The selected label will be inserted into the content as a Label content item.
114108

115-
### Using labels with group headers
109+
#### Customize label
110+
111+
You can customize the labels by using the `Properties` property along with `ContentType` as `Label`.
112+
113+
#### ContentType and Properties
114+
115+
```cshtml
116+
// Adding inline label
117+
new BlockModel
118+
{
119+
BlockType = BlockType.Paragraph,
120+
Content = {new ContentModel{ContentType = ContentType.Label, Properties = new LabelContentSettings {
121+
LabelID = "progress"
122+
}}}
123+
}
124+
```
125+
126+
#### Using labels with group headers
116127

117128
Labels with the same `GroupBy` value will be grouped together in the label selection popup:
118129

0 commit comments

Comments
 (0)