Custom views in React AI AssistView component

28 Aug 202517 minutes to read

The AI AssistView component supports multiple views that allow you to organize different types of content within the same component.

Adding custom views

The ViewsDirective tag enables you to define a collection of different view models within the AI AssistView component. Each view can be independently customized with different appearances and content.

Setting view type

You can specify the type of view using the type property within the ViewDirective tag. It accepts two values such as Assist, and Custom.

import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView">
            <ViewsDirective>
                <ViewDirective type='Assist'></ViewDirective>
                <ViewDirective type='Custom'></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Setting name

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

import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView">
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt'></ViewDirective>
                <ViewDirective type='Custom' name='Response'></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Setting iconCss

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

import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView">
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt' iconCss='e-assistview-icon'></ViewDirective>
                <ViewDirective type='Custom' name='Response' iconCss='e-comment-show'></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

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

index.jsx

import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);
    const responseViewTemplate = '<div class="view-container"><h5>Response view content</h5></div>';

    const onPromptRequest = (args) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest}>
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt' iconCss='e-assistview-icon'></ViewDirective>
                <ViewDirective type='Custom' name='Response' iconCss='e-comment-show' viewTemplate={responseViewTemplate}></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
    const responseViewTemplate: string = '<div class="view-container"><h5>Response view content</h5></div>';

    const onPromptRequest = (args: PromptRequestEventArgs) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest}>
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt' iconCss='e-assistview-icon'></ViewDirective>
                <ViewDirective type='Custom' name='Response' iconCss='e-comment-show' viewTemplate={responseViewTemplate}></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

index.css

/* Represents the styles for loader */
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#container {
    margin: 20px auto;
}

#aiAssistView .view-container {
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

Setting view template

The viewTemplate property allows to define custom content for multiple views within the AI AssistView.

index.jsx

import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const promptViewTemplate = '<div class="view-container"><h5>Prompt view content</h5></div>';
    const responseViewTemplate = '<div class="view-container"><h5>Response view content</h5></div>';
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance}>
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt' viewTemplate={promptViewTemplate}></ViewDirective>
                <ViewDirective type='Custom' name='Response' iconCss='e-comment-show' viewTemplate={responseViewTemplate}></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);

    const promptViewTemplate: string = '<div class="view-container"><h5>Prompt view content</h5></div>';
    const responseViewTemplate: string = '<div class="view-container"><h5>Response view content</h5></div>';
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance}>
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt' viewTemplate={promptViewTemplate}></ViewDirective>
                <ViewDirective type='Custom' name='Response' iconCss='e-comment-show' viewTemplate={responseViewTemplate}></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

index.css

/* Represents the styles for loader */
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#container {
    margin: 20px auto;
}

.view-container {
    margin: 20px auto;
    width: 80%;
  }

Setting active view

You can use the activeView property to specify which view should be displayed when the AI AssistView component initializes. By default, the first view (index 0) is set as active.

index.jsx

import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);
    const responseViewTemplate = '<div class="view-container"><h5>Response view content</h5></div>';

    const onPromptRequest = (args) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} activeView={1}>
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt'></ViewDirective>
                <ViewDirective type='Custom' name='Response' iconCss='e-comment-show' viewTemplate={responseViewTemplate}></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
    const responseViewTemplate: string = '<div class="view-container"><h5>Response view content</h5></div>';

    const onPromptRequest = (args: PromptRequestEventArgs) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} activeView={1}>
            <ViewsDirective>
                <ViewDirective type='Assist' name='Prompt'></ViewDirective>
                <ViewDirective type='Custom' name='Response' iconCss='e-comment-show' viewTemplate={responseViewTemplate}></ViewDirective>
            </ViewsDirective>
        </AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

index.css

/* Represents the styles for loader */
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#container {
    margin: 20px auto;
}

#aiAssistView .view-container {
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}