Toolbar items in ASP.NET CORE AI AssistView control

23 Sep 202424 minutes to read

You can render the AI AssistView toolbar items by using the items property in the e-aiassistview-toolbarsettings, e-aiassistview-responsetoolbarsettings & e-aiassistview-prompttoolbarsettings tag helpers.

Adding header toolbar items

Items

The AI AssistView toolbar’s can be rendered by defining an array of items. Items can be constructed with the following built-in command types or item template.

Adding iconCss

You can customize the toolbar icons by using the iconCss property.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Align.cs

public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();

public ActionResult Align()
{
    Items.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-refresh" });
    ViewBag.Items = Items;
    return View();
}

public class ToolbarItemModel
{
    public string align { get; set; }

    public string iconCss { get; set; }
}

Setting item type

You can change the toolbar item type by using the type property. The type supports three types of items such as Button, Separator and Input. By default, the type is Button.

In the following example, toolbar item type is set as Button.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Itemtype.cs

public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();
public ActionResult ItemType()
{
    Items.Add(new ToolbarItemModel { type = "Button", iconCss = "e-icons e-refresh", align = "Right" });
    ViewBag.Items = Items;
    return View();
}

public class ToolbarItemModel
{
    public string iconCss { get; set; }
    public string align { get; set; }
    public string type { get; set; }
}

Setting text

You can use the text property to set the text for toolbar item.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Text.cs

using Syncfusion.EJ2.Navigations;

public List<ToolbarItem> Items = new List<ToolbarItem>();
public ActionResult Text()
{
    Items.Add(new ToolbarItem { Text = "Welcome User !", Align = ItemAlign.Right });
    ViewBag.Items = Items;
    return View();
}

Show or hide toolbar item

You can use the visible property to specify whether to show or hide the toolbar item. By default, its value is true.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Visible.cs

using Syncfusion.EJ2.Navigations;

public List<ToolbarItem> Items = new List<ToolbarItem>();
public ActionResult Visible()
{
    Items.Add(new ToolbarItem { Visible = false, Align = ItemAlign.Right, CssClass = "e-icons e-refresh" });
    ViewBag.Items = Items;
    return View();
}

Setting disabled

You can use the disabled property to disable the toolbar item. By default, its value is false.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Disabled.cs

public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();
public ActionResult CustomResponse()
{
    Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right", disabled = true });
    Items.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-user" });
    ViewBag.Items = Items;
    return View();
}

public class ToolbarItemModel
{
    public string iconCss { get; set; }
    public string align { get; set; }
    public bool disabled { get; set; }
}

Setting tooltip text

You can use the tooltip property to specify the tooltip text to be displayed on hovering the toolbar item.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Tooltip.cs

public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();
public ActionResult Tooltip()
{
    Items.Add(new ToolbarItemModel { type = "Button", iconCss = "e-icons e-refresh", align = "Right", tooltip = "Refresh" });
    ViewBag.Items = Items;
    return View();
}

public class ToolbarItemModel
{
    public string type { get; set; }
    public string iconCss { get; set; }
    public string align { get; set; }
    public string tooltip { get; set; }
}

Setting cssClass

You can use the cssClass property to customize the toolbar item.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

<style>
    .custom-btn .e-user::before {
        color: blue;
        font-size: 15px;
    }
    .custom-btn.e-toolbar-item button.e-tbar-btn {
        border: 1px solid #dcdcdc;
    }
</style>

CssClass.cs

public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();

public ActionResult CssClass()
{
    Items.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-user", cssClass = "custom-btn", type = "Button" });
    ViewBag.Items = Items;
    return View();
}

public class ToolbarItemModel
{
    public string align { get; set; }
    public string iconCss { get; set; }
    public string type { get; set; }
    public string cssClass { get; set; }
}

Setting alignment

You can change the alignment of toolbar item by using the align property. It supports three types of alignments such as Left, Center and Right. By default, the value is Left.

In the following example, toolbar item type is set with Right.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

Align.cs

public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();

public ActionResult Align()
{
    Items.Add(new ToolbarItemModel { align = "Right", iconCss = "e-icons e-refresh" });
    ViewBag.Items = Items;
    return View();
}

public class ToolbarItemModel
{
    public string align { get; set; }

    public string iconCss { get; set; }
}

Enabling tab key navigation in toolbar

The tabIndex property of a Toolbar item is used to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the tabIndex property allows you to switch between items using the Tab and Shift+Tab keys as well.

To use the tabIndex property, you need to set it for each Toolbar item that you want to enable tab key navigation. The tabIndex property should be set to a positive integer value. A value of 0 or a negative value will disable tab key navigation for the item.

For example, to enable tab key navigation for two Toolbar items, you can use the following code:

CSHTML

<ejs-aiassistview id="aiAssistView">
    <e-aiassistview-toolbarsettings items="ViewBag.ToolbarItems"></e-aiassistview-toolbarsettings>
</ejs-aiassistview>
....

Tabkeynavigation.cs

public List<ToolbarItem> Items = new List<ToolbarItem>();

public ActionResult Index()
{
    Items.Add(new ToolbarItem { Text = "Item 1", TabIndex = 1 });
    Items.Add(new ToolbarItem { Text = "Item 2", TabIndex = 2 });
    ViewBag.ToolbarItems = Items;
}
....

With the above code, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, in addition to using the arrow keys. The items will be navigated in the order specified by the tabIndex values.

If you set the tabIndex value to 0 for all Toolbar items, tab key navigation will be based on the element order rather than the tabIndex values. For example:

CSHTML

<ejs-aiassistview id="aiAssistView">
    <e-aiassistview-toolbarsettings items="ViewBag.ToolbarItems"></e-aiassistview-toolbarsettings>
</ejs-aiassistview>
....

Tabkeynavigation.cs

public List<ToolbarItem> Items = new List<ToolbarItem>();

public ActionResult Index()
{
    Items.Add(new ToolbarItem { Text = "Item 1", TabIndex = 0 });
    Items.Add(new ToolbarItem { Text = "Item 2", TabIndex = 0 });
    ViewBag.ToolbarItems = Items;
}
....

In this case, the user can switch between the two Toolbar items using the Tab and Shift+Tab keys, and the items will be navigated in the order in which they appear in the DOM.

Setting template

You can use the template property to add custom toolbar item in the AI AssistView.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="ViewBag.Items"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
        var splitBtnObj = new ej.splitbuttons.DropDownButton({
            items: [
                { text: 'हिंदी' },
                { text: 'தமிழ்' },
                { text: 'తెలుగు' }
            ],
            content: 'English',
            iconCss: 'e-icons e-translate',
            cssClass: 'custom-dropdown'
        });
        splitBtnObj.appendTo('#ddMenu');
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

<style>
    .custom-dropdown.e-dropdown-popup ul {
        min-width: 100px;
    }
</style>

Template.cs

using Syncfusion.EJ2.Navigations;

public List<ToolbarItem> Items = new List<ToolbarItem>();
public ActionResult Template()
{
    Items.Add(new ToolbarItem { Type = ItemType.Input, Template = "<div id=\"ddMenu\"></div>", Align = ItemAlign.Center });
    ViewBag.Items = Items;
    return View();
}

Item clicked

The itemClicked event is triggered when the header toolbar item is clicked.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-toolbarsettings items="@Model.Items" itemClicked="function(args){ itemClicked(args) }"></e-aiassistview-toolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

<script>
    function itemClicked(args) {
        // your required action here..
    }
</script>

ItemClicked.cs

public List<ToolbarItemModel> Items { get; set; } = new List<ToolbarItemModel>();
public ActionResult ItemClicked()
{
    Items.Add(new ToolbarItemModel { iconCss = "e-icons e-refresh", align = "Right" });
    ViewBag.Items = Items;
    return View();
}

public class ToolbarItemModel
{
    public string iconCss { get; set; }
    public string align { get; set; }
}

Built-in toolbar items

Prompt

By default, the prompt toolbar renders the built-in items such as edit and copy items. These allow users to edit the prompt text or copy as needed.

In the following example, AI AssistView control rendered with built-in toolbar items such as edit and copy items.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
    var promptsData = new[]
    {
        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> { } }
    };

    var promptsJson = JsonSerializer.Serialize(promptsData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
            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.';
            assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 2000);
    }
</script>

Setting width

You can use the width property to set the width of the prompt toolbar in the AI AssistView.

Item clicked

The itemClicked event is triggered when the prompt toolbar item is clicked.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
    var promptsData = new[]
    {
        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> { } }
    };

    var promptsJson = JsonSerializer.Serialize(promptsData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-prompttoolbarsettings itemClicked="function(args){ promptItemClicked(args) }"></e-aiassistview-prompttoolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
            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.';
            assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 2000);
    }
</script>

<script>
    function promptItemClicked(args) {
        // your required action here..
    }
</script>

Response

By default, the response toolbar renders the built-in items like copy, like, and dislike items to perform response copy and perform rating actions.

In the following example, AI AssistView renders with built-in toolbar items.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
    var promptsData = new[]
    {
        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> { } }
    };

    var promptsJson = JsonSerializer.Serialize(promptsData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
            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.';
            assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 2000);
    }
</script>

Setting width

You can use the width property to set the width of the response toolbar in the AI AssistView.

Item clicked

The itemClicked event is triggered when the response toolbar item is clicked.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
    var promptsData = new[]
    {
        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> { } }
    };

    var promptsJson = JsonSerializer.Serialize(promptsData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-responsetoolbarsettings itemClicked="function(args){ responseItemClicked(args) }"></e-aiassistview-responsetoolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
            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.';
            assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 2000);
    }
</script>

<script>
    function responseItemClicked(args) {
        // your required action here..
    }
</script>

Adding custom toolbar items

You can also add custom toolbar items in the AI AssistView by using the e-aiassistview-toolbarsettings, e-aiassistview-responsetoolbarsettings & e-aiassistview-prompttoolbarsettings tag helpers.

Prompt

You can use the e-aiassistview-prompttoolbarsettings tag helper to add custom items for the prompt toolbar in the AI AssistView.

To know more about the items, please refer to the items section.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
    var promptsData = new[]
    {
        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> { } }
    };

    var promptsJson = JsonSerializer.Serialize(promptsData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-prompttoolbarsettings items="ViewBag.Items"></e-aiassistview-prompttoolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let 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.';
            assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 2000);
    }
</script>

Response

You can use the e-aiassistview-responsetoolbarsettings tag helper to add custom response toolbar in the AI AssistView.

To know more about the items, please refer to the items section.

CSHTML

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
    var promptsData = new[]
    {
        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> { } }
    };

    var promptsJson = JsonSerializer.Serialize(promptsData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" prompts="@promptsData" promptRequest="onPromptRequest" created="onCreated">
        <e-aiassistview-responsetoolbarsettings items="ViewBag.Items"></e-aiassistview-responsetoolbarsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let 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.';
            assistObj.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 2000);
    }
</script>

Item clicked

The itemClicked event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items.