Skip to content

Commit 6afbb86

Browse files
IndrajithSrinivasanIndrajithSrinivasan
authored
Merge pull request #4683 from syncfusion-content/998680-footerToolbarUG
Config(998680): Added UG for the AI Assistview Footer toolbar support in Core and MVC
2 parents 7b774f5 + 0e926df commit 6afbb86

File tree

19 files changed

+401
-37
lines changed

19 files changed

+401
-37
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` 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="FooterToolbar.cs" %}
26+
{% include code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs %}
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
![FooterToolbar](images/enable-attachments.png)
31+
32+
### Toolbar positioning
33+
34+
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`.
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="ToolbarPosition.cs" %}
43+
{% include code-snippet/ai-assistview/toolbar-items/footerPosition/footerPosition.cs %}
44+
{% endhighlight %}
45+
{% endtabs %}
46+
47+
![ToolbarPosition](images/toolbarPosition.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](#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="CustomFooter.cs" %}
60+
{% include code-snippet/ai-assistview/toolbar-items/custom-footer/custom-footer.cs %}
61+
{% endhighlight %}
62+
{% endtabs %}
63+
64+
![CustomFooter](images/custom-footer.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="FooterItemClick.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="FooterToolbar.cs" %}
26+
{% include code-snippet/ai-assistview/file-attachments/enable-attachments/enable-attachments.cs %}
27+
{% endhighlight %}
28+
{% endtabs %}
29+
30+
![FooterToolbar](images/enable-attachments.png)
31+
32+
### Toolbar positioning
33+
34+
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`.
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+
![ToolbarPosition](images/toolbarPosition.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](#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+
![CustomFooter](images/custom-footer.png)
59+
60+
### Item click
61+
62+
The `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/ai-assistview/images/custom-footer.png‎

28 KB
Loading

‎ej2-asp-core-mvc/ai-assistview/images/toolbarPosition.png‎

29.7 KB
Loading

‎ej2-asp-core-mvc/code-snippet/ai-assistview/methods/execute-prompt/razor‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@using Syncfusion.EJ2.InteractiveChat
22

33
<div class="aiassist-container" style="height: 350px; width: 650px;">
4-
<button id="executePrompt">Execute Prompt</button>
4+
<button id="executePrompt" onclick="executePrompt()">Execute Prompt</button>
55
@Html.EJS().AIAssistView("aiAssistView").PromptRequest("onPromptRequest").Created("onCreated").Render()
66
</div>
77

@@ -17,11 +17,9 @@
1717
assistObj.addPromptResponse(defaultResponse);
1818
}, 2000);
1919
}
20-
document.addEventListener('click', function (event) {
21-
if (event.target && event.target.id === 'executePrompt') {
22-
assistObj.executePrompt('What is the current temperature?');
23-
}
24-
});
20+
function executePrompt() {
21+
assistObj.executePrompt('What is the current temperature?');
22+
}
2523
</script>
2624

2725
<style>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/methods/execute-prompt/tagHelper‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@using Syncfusion.EJ2.InteractiveChat;
22

33
<div class="aiassist-container" style="height: 350px; width: 650px;">
4-
<button id="executePrompt">Execute Prompt</button>
4+
<button id="executePrompt" onclick="executePrompt()">Execute Prompt</button>
55
<ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
66
</div>
77

@@ -17,11 +17,9 @@
1717
assistObj.addPromptResponse(defaultResponse);
1818
}, 2000);
1919
}
20-
document.addEventListener('click', function (event) {
21-
if (event.target && event.target.id === 'executePrompt') {
22-
assistObj.executePrompt('What is the current temperature?');
23-
}
24-
});
20+
function executePrompt() {
21+
assistObj.executePrompt('What is the current temperature?');
22+
}
2523
</script>
2624

2725
<style>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/methods/response-object/razor‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@using Syncfusion.EJ2.InteractiveChat
22

33
<div class="aiassist-container" style="height: 350px; width: 650px;">
4-
<button id="addObjectResponse">Add Object Response</button>
4+
<button id="addObjectResponse" onclick="getPromptResponse()">Add Object Response</button>
55
@Html.EJS().AIAssistView("aiAssistView").PromptRequest("onPromptRequest").Created("onCreated").Render()
66
</div>
77

@@ -16,11 +16,9 @@
1616
assistObj.addPromptResponse(defaultResponse);
1717
}, 2000);
1818
}
19-
document.addEventListener('click', function (event) {
20-
if (event.target && event.target.id === 'addObjectResponse') {
21-
assistObj.addPromptResponse({ prompt: 'What is AI?', response: 'AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.' });
22-
}
23-
});
19+
function getPromptResponse() {
20+
assistObj.addPromptResponse({ prompt: 'What is AI?', response: 'AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.' });
21+
}
2422
</script>
2523

2624
<style>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/methods/response-object/tagHelper‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@using Syncfusion.EJ2.InteractiveChat;
22

33
<div class="aiassist-container" style="height: 350px; width: 650px;">
4-
<button id="addObjectResponse">Add Object Response</button>
4+
<button id="addObjectResponse" onclick="getPromptResponse()">Add Object Response</button>
55
<ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
66
</div>
77

@@ -16,11 +16,9 @@
1616
assistObj.addPromptResponse(defaultResponse);
1717
}, 2000);
1818
}
19-
document.addEventListener('click', function (event) {
20-
if (event.target && event.target.id === 'addObjectResponse') {
21-
assistObj.addPromptResponse({ prompt: 'What is AI?', response: 'AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.' });
22-
}
23-
});
19+
function getPromptResponse() {
20+
assistObj.addPromptResponse({ prompt: 'What is AI?', response: 'AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.' });
21+
}
2422
</script>
2523

2624
<style>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/methods/response-string/razor‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@using Syncfusion.EJ2.InteractiveChat
22

33
<div class="aiassist-container" style="height: 350px; width: 650px;">
4-
<button id="addStringResponse">Add String Response</button>
4+
<button id="addStringResponse" onclick="getPromptResponse()">Add String Response</button>
55
@Html.EJS().AIAssistView("aiAssistView").PromptRequest("onPromptRequest").Created("onCreated").Render()
66
</div>
77

@@ -16,11 +16,9 @@
1616
assistObj.addPromptResponse(defaultResponse);
1717
}, 2000);
1818
}
19-
document.addEventListener('click', function (event) {
20-
if (event.target && event.target.id === 'addStringResponse') {
21-
assistObj.addPromptResponse('Dynamic response');
22-
}
23-
});
19+
function getPromptResponse() {
20+
assistObj.addPromptResponse('Dynamic response');
21+
}
2422
</script>
2523

2624
<style>

‎ej2-asp-core-mvc/code-snippet/ai-assistview/methods/response-string/tagHelper‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@using Syncfusion.EJ2.InteractiveChat;
22

33
<div class="aiassist-container" style="height: 350px; width: 650px;">
4-
<button id="addStringResponse">Add String Response</button>
4+
<button id="addStringResponse" onclick="getPromptResponse()">Add String Response</button>
55
<ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
66
</div>
77

@@ -16,11 +16,9 @@
1616
assistObj.addPromptResponse(defaultResponse);
1717
}, 2000);
1818
}
19-
document.addEventListener('click', function (event) {
20-
if (event.target && event.target.id === 'addStringResponse') {
19+
function getPromptResponse() {
2120
assistObj.addPromptResponse('Dynamic response');
22-
}
23-
});
21+
}
2422
</script>
2523

2624
<style>

0 commit comments

Comments
 (0)