Skip to content

Commit 547e3a2

Browse files
Yuvaraj-SF5089Yuvaraj-SF5089
committed
998680: Added UG content for footer toolbar in ASCoreMVC
1 parent ea3e303 commit 547e3a2

File tree

11 files changed

+382
-2
lines changed

11 files changed

+382
-2
lines changed

‎ej2-asp-core-mvc/ai-assistview/EJ2_ASP.MVC/toolbar-items.md‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,71 @@ documentation: ug
1010

1111
# Toolbar items in ##Platform_Name## AI AssistView control
1212

13-
You can render the AI AssistView toolbar items by using the [Items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewToolbarSettings_Items) property in the [ToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewToolbarSettings.html), [ResponseToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewResponseToolbarSettings.html) & [PromptToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewPromptToolbarSettings.html) properties.
13+
You can render the AI AssistView toolbar items by using the [Items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewToolbarSettings_Items) property in the [ToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewToolbarSettings.html), [ResponseToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewResponseToolbarSettings.html), [PromptToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewPromptToolbarSettings.html) & [FooterToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewFooterToolbarSettings.html) properties.
14+
15+
## Configure footer toolbar
16+
17+
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.
18+
19+
In the following example, AI AssistView component rendered with footer toolbar items such as `send` and `attachment` icons.
20+
21+
{% tabs %}
22+
{% highlight razor tabtitle="CSHTML" %}
23+
{% include code-snippet/ai-assistview/file-attachments/enable-attachments/razor %}
24+
{% endhighlight %}
25+
{% highlight c# tabtitle="Enable-attachments.cs" %}
26+
{% include code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs %}
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
![EnableAttachments](images/enable-attachments.png)
31+
32+
### Toolbar positioning
33+
34+
You can use the [ToolbarPosition](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewFooterToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewFooterToolbarSettings_ToolbarPosition) property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the toolbarPosition is `Inline`.
35+
36+
By settings toolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area .
37+
38+
{% tabs %}
39+
{% highlight razor tabtitle="CSHTML" %}
40+
{% include code-snippet/ai-assistview/toolbar-items/footerPosition/razor %}
41+
{% endhighlight %}
42+
{% highlight c# tabtitle="CustomFooter.cs" %}
43+
{% include code-snippet/ai-assistview/toolbar-items/footerPosition/footerPosition.cs %}
44+
{% endhighlight %}
45+
{% endtabs %}
46+
47+
![CustomPrompt](images/custom-prompt.png)
48+
49+
### Adding custom items
50+
51+
You can use the `FooterToolbarSettings` property to add custom items for the footer toolbar in the AI AssistView. The custom items will be added with the existing built-in items in the footer toolbar.
52+
53+
> To know more about the items, please refer to the [Items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewFooterToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewFooterToolbarSettings_Items) section.
54+
55+
{% tabs %}
56+
{% highlight razor tabtitle="CSHTML" %}
57+
{% include code-snippet/ai-assistview/toolbar-items/custom-footer/razor %}
58+
{% endhighlight %}
59+
{% highlight c# tabtitle="CustomPrompt.cs" %}
60+
{% include code-snippet/ai-assistview/toolbar-items/custom-footer/custom-footer.cs %}
61+
{% endhighlight %}
62+
{% endtabs %}
63+
64+
![CustomPrompt](images/custom-prompt.png)
65+
66+
### Item click
67+
68+
The [ItemClick](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewResponseToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewResponseToolbarSettings_ItemClick) event is triggered when the footer toolbar item is clicked.
69+
70+
{% tabs %}
71+
{% highlight razor tabtitle="CSHTML" %}
72+
{% include code-snippet/ai-assistview/toolbar-items/footerItemClick/razor %}
73+
{% endhighlight %}
74+
{% highlight c# tabtitle="PromptItemClick.cs" %}
75+
{% include code-snippet/ai-assistview/toolbar-items/footerItemClick/footerItemClick.cs %}
76+
{% endhighlight %}
77+
{% endtabs %}
1478

1579
## Adding header toolbar items
1680

‎ej2-asp-core-mvc/ai-assistview/EJ2_ASP.NETCORE/toolbar-items.md‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,62 @@ documentation: ug
1010

1111
# Toolbar items in ##Platform_Name## AI AssistView control
1212

13-
You can render the AI AssistView toolbar items by using the [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewToolbarSettings_Items) property in the `e-aiassistview-toolbarsettings`, `e-aiassistview-responsetoolbarsettings` & `e-aiassistview-prompttoolbarsettings` tag helpers.
13+
You can render the AI AssistView toolbar items by using the [items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewToolbarSettings_Items) property in the `e-aiassistview-toolbarsettings`, `e-aiassistview-responsetoolbarsettings`, `e-aiassistview-prompttoolbarsettings` & `e-aiassistview-footertoolbarsettings` tag helpers.
14+
15+
## Configure footer toolbar
16+
17+
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.
18+
19+
In the following example, AI AssistView component rendered with footer toolbar items such as `send` and `attachment` icons.
20+
21+
{% tabs %}
22+
{% highlight razor tabtitle="CSHTML" %}
23+
{% include code-snippet/ai-assistview/file-attachments/enable-attachments/razor %}
24+
{% endhighlight %}
25+
{% highlight c# tabtitle="BannerTemplate.cs" %}
26+
{% include code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs %}
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
![EnableAttachments](images/enable-attachments.png)
31+
32+
### Toolbar positioning
33+
34+
You can use the [ToolbarPosition](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewFooterToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewFooterToolbarSettings_ToolbarPosition) property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the toolbarPosition is `Inline`.
35+
36+
By settings toolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area .
37+
38+
{% tabs %}
39+
{% highlight razor tabtitle="CSHTML" %}
40+
{% include code-snippet/ai-assistview/toolbar-items/footerPosition/tagHelper %}
41+
{% endhighlight %}
42+
{% endtabs %}
43+
44+
![CustomPrompt](images/custom-prompt.png)
45+
46+
### Adding custom items
47+
48+
You can use the `e-aiassistview-footertoolbarsettings` tag helper to add custom items for the footer toolbar in the AI AssistView. The custom items will be added with the existing built-in items in the footer toolbar.
49+
50+
> To know more about the items, please refer to the [Items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewFooterToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewFooterToolbarSettings_Items) section.
51+
52+
{% tabs %}
53+
{% highlight razor tabtitle="CSHTML" %}
54+
{% include code-snippet/ai-assistview/toolbar-items/custom-footer/tagHelper %}
55+
{% endhighlight %}
56+
{% endtabs %}
57+
58+
![CustomResponse](images/custom-response.png)
59+
60+
### Item click
61+
62+
The [ItemClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.InteractiveChat.AIAssistViewFooterToolbarSettings.html#Syncfusion_EJ2_InteractiveChat_AIAssistViewFooterToolbarSettings_ItemClick) event is triggered when the footer toolbar item is clicked.
63+
64+
{% tabs %}
65+
{% highlight razor tabtitle="CSHTML" %}
66+
{% include code-snippet/ai-assistview/toolbar-items/footerItemClick/tagHelper %}
67+
{% endhighlight %}
68+
{% endtabs %}
1469

1570
## Adding header toolbar items
1671

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/custom-footer/custom-footer.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();
2+
public ActionResult CustomFooter()
3+
{
4+
Items.Add(new ToolbarItemModel {iconCss = "e-icons e-assistview-icon", align = "Left"});
5+
ViewBag.Items = Items;
6+
return View();
7+
}
8+
9+
public class ToolbarItemModel
10+
{
11+
public string iconCss { get; set; }
12+
public string align { get; set; }
13+
}

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/custom-footer/razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@using Syncfusion.EJ2.InteractiveChat
2+
@using Newtonsoft.Json
3+
4+
@{
5+
var promptsData = new[]
6+
{
7+
new { 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 >", suggestionData = new List<string> { } }
8+
};
9+
var promptsJson = @Html.Raw(JsonConvert.SerializeObject(promptsData));
10+
}
11+
12+
<div class="aiassist-container" style="height: 350px; width: 650px;">
13+
@Html.EJS().AIAssistView("aiAssistView").Prompts(promptsData).PromptRequest("onPromptRequest").Created("onCreated").FooterToolbarSettings(new AIAssistViewFooterToolbarSettings()
14+
{
15+
ToolbarPosition = 'Bottom',
16+
Items = ViewBag.Items
17+
}).Render()
18+
</div>
19+
20+
<script>
21+
var assistObj;
22+
var prompts = @Html.Raw(promptsJson);
23+
function onCreated() {
24+
assistObj = this;
25+
}
26+
function onPromptRequest(args) {
27+
setTimeout(function () {
28+
var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
29+
var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control 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.';
30+
assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
31+
}, 2000);
32+
}
33+
</script>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/custom-footer/tagHelper‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@using Syncfusion.EJ2.InteractiveChat;
2+
@using System.Text.Json;
3+
4+
@{
5+
var promptsData = new[]
6+
{
7+
new { 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 >", suggestionData = new List<string> { } }
8+
};
9+
10+
var promptsJson = JsonSerializer.Serialize(promptsData);
11+
}
12+
13+
<div class="aiassist-container" style="height: 350px; width: 650px;">
14+
<ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated">
15+
<e-aiassistview-footertoolbarsettings ToolbarPosition="Bottom" items="ViewBag.Items"></e-aiassistview-footertoolbarsettings>
16+
</ejs-aiassistview>
17+
</div>
18+
19+
<script>
20+
var assistObj;
21+
var prompts = @Html.Raw(promptsJson);
22+
function onCreated() {
23+
assistObj = this;
24+
}
25+
function onPromptRequest(args) {
26+
setTimeout(() => {
27+
var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
28+
var defaultResponse = 'For real-time prompt processing, connect the AIAssistView 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.';
29+
assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
30+
}, 2000);
31+
}
32+
</script>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/footerItemClick/footerItemClick.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult FooterItemClick()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/footerItemClick/razor‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@using Syncfusion.EJ2.InteractiveChat
2+
@using Newtonsoft.Json
3+
4+
@{
5+
var promptsData = new[]
6+
{
7+
new { 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 >", suggestionData = new List<string> { } }
8+
};
9+
var promptsJson = @Html.Raw(JsonConvert.SerializeObject(promptsData));
10+
}
11+
12+
<div class="aiassist-container" style="height: 350px; width: 650px;">
13+
@Html.EJS().AIAssistView("aiAssistView").Prompts(promptsData).PromptRequest("onPromptRequest").Created("onCreated").FooterToolbarSettings(new AIAssistViewFooterToolbarSettings()
14+
{
15+
ItemClick = "footerItemClicked"
16+
}).Render()
17+
</div>
18+
19+
<script>
20+
var assistObj;
21+
var prompts = @Html.Raw(promptsJson);
22+
function onCreated() {
23+
assistObj = this;
24+
}
25+
function onPromptRequest(args) {
26+
setTimeout(function () {
27+
var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
28+
var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control 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.';
29+
assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
30+
}, 2000);
31+
}
32+
</script>
33+
34+
<script>
35+
function footerItemClicked(args) {
36+
// your required action here..
37+
}
38+
</script>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/footerItemClick/tagHelper‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@using Syncfusion.EJ2.InteractiveChat;
2+
@using System.Text.Json;
3+
4+
@{
5+
var promptsData = new[]
6+
{
7+
new { 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 >", suggestionData = new List<string> { } }
8+
};
9+
10+
var promptsJson = JsonSerializer.Serialize(promptsData);
11+
}
12+
13+
<div class="aiassist-container" style="height: 350px; width: 650px;">
14+
<ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated">
15+
<e-aiassistview-footertoolbarsettings itemClick="function(args){ footerItemClicked(args) }"></e-aiassistview-footertoolbarsettings>
16+
</ejs-aiassistview>
17+
</div>
18+
19+
<script>
20+
var assistObj;
21+
var prompts = @Html.Raw(promptsJson);
22+
function onCreated() {
23+
assistObj = this;
24+
}
25+
function onPromptRequest(args) {
26+
setTimeout(() => {
27+
var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
28+
var defaultResponse = 'For real-time prompt processing, connect the AIAssistView 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.';
29+
assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
30+
}, 2000);
31+
}
32+
</script>
33+
34+
<script>
35+
function footerItemClicked(args) {
36+
// your required action here..
37+
}
38+
</script>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/footerPosition/footerPosition.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult FooterPosition()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/ai-assistview/toolbar-items/footerPosition/razor‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@using Syncfusion.EJ2.InteractiveChat
2+
@using Newtonsoft.Json
3+
4+
@{
5+
var promptsData = new[]
6+
{
7+
new { 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 >", suggestionData = new List<string> { } }
8+
};
9+
var promptsJson = @Html.Raw(JsonConvert.SerializeObject(promptsData));
10+
}
11+
12+
<div class="aiassist-container" style="height: 350px; width: 650px;">
13+
<button id="toolbarBtn" class="e-btn">UpdateToolbarPosition</button>
14+
@Html.EJS().AIAssistView("aiAssistView").Prompts(promptsData).PromptRequest("onPromptRequest").Created("onCreated").FooterToolbarSettings(new AIAssistViewFooterToolbarSettings()
15+
{
16+
ToolbarPosition = 'Bottom'
17+
}).Render()
18+
</div>
19+
20+
<script>
21+
var assistObj;
22+
var prompts = @Html.Raw(promptsJson);
23+
function onCreated() {
24+
assistObj = this;
25+
}
26+
function onPromptRequest(args) {
27+
setTimeout(function () {
28+
var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
29+
var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control 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.';
30+
assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
31+
}, 2000);
32+
}
33+
document.addEventListener('click', function (event) {
34+
if (event.target && event.target.id === 'toolbarBtn') {
35+
if (assistObj.FooterToolbarSettings.ToolbarPosition === 'Inline') {
36+
assistObj.FooterToolbarSettings.ToolbarPosition = 'Bottom';
37+
}
38+
else {
39+
assistObj.FooterToolbarSettings.ToolbarPosition = 'Inline';
40+
}
41+
}
42+
});
43+
</script>
44+
45+
<style>
46+
#toolbarBtn {
47+
margin-bottom: 10px;
48+
}
49+
</style>

0 commit comments

Comments
 (0)