Custom views in EJ2 JavaScript AI AssistView control

13 Dec 202413 minutes to read

Adding custom views

By using the views property you can define the collection of different assist view models in the AI AssistView. You can customize the default and the custom views added.

Setting view type

You can set the type of view by using the type property. It accepts two values such as Assist, and Custom.

index.js
var aiAssistView = new ej.interactivechat.AIAssistView({
    views: [
        { type: 'Assist' },
        { type: 'Custom' }
    ],
});
aiAssistView.appendTo('#aiAssistView');

Setting name

You can use the name property to specifies the header name of the Assist or Custom views in the AI AssistView.

index.js
var aiAssistView = new ej.interactivechat.AIAssistView({
    views: [
        { type: 'Assist', name: "Prompt" },
        { type: 'Custom', name: 'Response' }
    ],
});
aiAssistView.appendTo('#aiAssistView');

Setting iconCss

You can customize the view icons by using the iconCss property. By default the e-assistview-icon class is added as built-in header icon for the AI AssistView.

index.js
var aiAssistView = new ej.interactivechat.AIAssistView({
    views: [
        { type: 'Assist', name: "Prompt", iconCss: 'e-icons e-assistview-icon' },
        { type: 'Custom', name: 'Response', iconCss: 'e-icons e-comment-show' }
    ],
});
aiAssistView.appendTo('#aiAssistView');

The following example illustrates how types, name, and iconCss are used in a AI AssistView control.

index.js
index.html
ej.base.enableRipple(true);

// Initializes the AI Assist control
var aiAssistView = new ej.interactivechat.AIAssistView({
    views: [
        {
            type: 'Assist',
            name: "Prompt",
            iconCss: 'e-icons e-assistview-icon'
        },
        {
            type: 'Custom',
            name: 'Response',
            iconCss: 'e-icons e-comment-show',
            viewTemplate: '<div class="view-container"><h5>Response view content</h5></div>'
        }
    ],
    promptRequest: function () {
        setTimeout(function () {
            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.';
            aiAssistView.addPromptResponse(defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#type');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .view-container {
            height: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="type"></div>
    </div>
</body>
</html>

Setting view template

You can use the viewTemplate property to add the view content of the multiple views added in the AI AssistView.

index.js
index.html
ej.base.enableRipple(true);

// Initializes the AI Assist control
var aiAssistView = new ej.interactivechat.AIAssistView({
    views: [
        {
            type: 'Assist',
            name: "Prompt",
            viewTemplate: '<div class="view-container"><h5>Prompt view content</h5></div>'
        },
        {
            type: 'Custom',
            name: 'Response',
            viewTemplate: '<div class="view-container"><h5>Response view content</h5></div>'
        }
    ]
});

// Render initialized AI Assist.
aiAssistView.appendTo('#view-template');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .view-container {
            margin: 20px auto;
            width: 80%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="width: max(50%, 500px); margin: 30px auto;">
        <div id="view-template"></div>
    </div>
</body>
</html>

Setting active view

You can use the activeView property to set the active view in the AI AssistView. By default, the value is 0.

index.js
index.html
ej.base.enableRipple(true);

// Initializes the AI Assist control
var aiAssistView = new ej.interactivechat.AIAssistView({
    views: [
        {
            type: 'Assist',
            name: "Prompt"
        },
        {
            type: 'Custom',
            name: 'Response',
            iconCss: 'e-icons e-comment-show',
            viewTemplate: '<div class="view-container"><h5>Response view content</h5></div>'
        }
    ],
    activeView: 1,
    promptRequest: () => {
        setTimeout(() => {
            let 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.';
            aiAssistView.addPromptResponse(defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#active-view');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .view-container {
            height: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="active-view"></div>
    </div>
</body>
</html>