Templates in React AI AssistView component

14 Dec 202424 minutes to read

The AI AssistView provides several template options to customize the banner, prompt, response, suggestions and footer items.

Banner template

You can use the bannerTemplate property to display additional information, such as a welcome note, and more in the AI AssistView. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView.

index.jsx

import { AIAssistViewComponent } 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 bannerTemplate = '<div class="banner-content"><div class="e-icons e-assistview-icon"></div><h3>AI Assistance</h3><div>Your everyday AI companion.</div></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 (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} bannerTemplate={bannerTemplate}></AIAssistViewComponent>
    );
}

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

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs } 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 bannerTemplate: string = '<div class="banner-content"><div class="e-icons e-assistview-icon"></div><h3>AI Assistance</h3><div>Your everyday AI companion.</div></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 (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} bannerTemplate={bannerTemplate}></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;
}
.banner-content {
    text-align: center;
}
#aiAssistView .e-view-container {
    margin: auto;
}
#aiAssistView .e-banner-view {
    margin-left: 0;
}
.banner-content .e-assistview-icon:before {
    font-size: 35px;
}

Prompt item template

You can use the promptItemTemplate property to customize the prompt items in the AI AssistView. The template context includes prompt, toolbarItems and index items.

index.jsx

import { AIAssistViewComponent } 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 promptItemContent = (props) => {
        var prompt = props.prompt.replace('<span class="e-icons e-circle-info"></span>', '');
        return (
            <div class="promptItemContent">
                <div class="prompt-header">You
                    <span class="e-icons e-user"></span>
                </div>
                <div class="prompt-content">{prompt}</div>
            </div>
        );
    }; 

    const prompts = [
        {
            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>"
        }
    ];

    const onPromptRequest = (args) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} prompts={prompts} promptRequest={onPromptRequest} promptItemTemplate={promptItemContent}></AIAssistViewComponent>
    );
}

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

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs, PromptModel } 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 promptItemContent = (props: any) => {
        var prompt = props.prompt.replace('<span class="e-icons e-circle-info"></span>', '');
        return (
            <div class="promptItemContent">
                <div class="prompt-header">You
                    <span class="e-icons e-user"></span>
                </div>
                <div class="prompt-content">{prompt}</div>
            </div>
        );
    }; 

    const prompts: PromptModel[] = [
        {
            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>"
        }
    ];

    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} prompts={prompts} promptRequest={onPromptRequest} promptItemTemplate={promptItemContent}></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;
}

.promptItemContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promptItemContent {
  align-items: flex-end;
  margin-right: 20px
}

.promptItemContent .prompt-header {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.promptItemContent .prompt-header span {
  margin-left: 10px;
}

.promptItemContent .prompt-content {
  margin-right: 35px;
}

Response item template

You can use the responseItemTemplate property to customize response items within the AI AssistView. The template context includes the prompt, response, index, toolbarItems and output items.

index.jsx

import { AIAssistViewComponent } 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 responseTemplate = (props) => {
        return (
            <div className="responseItemContent">
                <div className="response-header">
                    <span className="e-icons e-assistview-icon"></span>
                    AI Assist
                </div>
                <div className="assist-response-content" dangerouslySetInnerHTML=></div>
            </div>
        );
    };

    const prompts = [
        {
            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>"
        }
    ];

    const onPromptRequest = (args) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} prompts={prompts} promptRequest={onPromptRequest} responseItemTemplate={responseTemplate}></AIAssistViewComponent>
    );
}

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

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs, PromptModel } 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 responseTemplate = (props: any) => {
        return (
            <div className="responseItemContent">
                <div className="response-header">
                    <span className="e-icons e-assistview-icon"></span>
                    AI Assist
                </div>
                <div className="assist-response-content" dangerouslySetInnerHTML=></div>
            </div>
        );
    };

    const prompts: PromptModel[] = [
        {
            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>"
        }
    ];

    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} prompts={prompts} promptRequest={onPromptRequest} responseItemTemplate={responseTemplate}></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;
}

.response-header .e-assistview-icon:before {
  margin-right: 10px;
}

.responseItemContent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 20px
}

.responseItemContent .response-header {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.responseItemContent .assist-response-content {
  margin-left: 35px;
}

.responseItemContent .response-header .e-assistview-icon:before {
  margin-right: 10px;
}

#aiAssistView .e-response-item-template .e-toolbar-items {
  margin-left: 35px;
}

Prompt suggestion item template

You can use the promptSuggestionItemTemplate property to customize the prompt suggestion items in the AI AssistView. The template context includes the index and promptSuggestion.

index.jsx

import { AIAssistViewComponent } 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 promptSuggestions = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];

    const promptSuggestionItemTemplate = (props) => {
        return (
            <div className='suggestion-item active'>
                <span className="e-icons e-circle-info"></span>
                <div className="assist-suggestion-content">{props.promptSuggestion}</div>
            </div>
        );
    };

    const onPromptRequest = (args) => {
        setTimeout(() => {
            let response1 = "Use clear naming, break code into small functions, avoid repetition, write tests, and follow coding standards.";
            let response2 = "Install useful extensions, set up shortcuts, enable linting, and customize settings for smoother development.";
            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(args.prompt === assistInstance.current.promptSuggestions[0] ? response1 : args.prompt === assistInstance.current.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions} promptSuggestionItemTemplate={promptSuggestionItemTemplate}></AIAssistViewComponent>
    );
}

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

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs, PromptModel } 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 promptSuggestions: string[] = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];

    const promptSuggestionItemTemplate = (props: any) => {
        return (
            <div className='suggestion-item active'>
                <span className="e-icons e-circle-info"></span>
                <div className="assist-suggestion-content">{props.promptSuggestion}</div>
            </div>
        );
    };

    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let response1 = "Use clear naming, break code into small functions, avoid repetition, write tests, and follow coding standards.";
            let response2 = "Install useful extensions, set up shortcuts, enable linting, and customize settings for smoother development.";
            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(args.prompt === assistInstance.current.promptSuggestions[0] ? response1 : args.prompt === assistInstance.current.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions} promptSuggestionItemTemplate={promptSuggestionItemTemplate}></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;
}

.e-aiassistview .e-views .e-suggestions .e-suggestion-list li {
  padding: 0;
  border: none;
  box-shadow: none;
}

.suggestion-item {
  display: flex;
  align-items: center;
  background-color: #686868;
  color: white;
  padding: 4px 10px;
  opacity: 0.8;
  gap: 5px;
  height: 35px;
  border-radius: 5px;
}

.suggestion-item .assist-suggestion-content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Footer template

You can use the footerTemplate property to customize the default footer area and manage prompt request actions in the AI AssistView. This allows users to create unique footers that meet their specific needs.

index.jsx

import { AIAssistViewComponent } 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 textAreaRef = React.useRef(null);
    
    const footerTemplate = () => {
        return (
            <div className="custom-footer">
                <textarea id="promptTextArea" ref={textAreaRef} className="e-input" rows="2" placeholder="Enter your prompt here..."></textarea>
                <button id="sendPrompt" onClick={handleSendClick} className="e-btn e-primary">Generate</button>
            </div>
        );
    }; 

    const handleSendClick = () => {
        if (textAreaRef.current) {
            textAreaRef.current.value = '';
            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);
        }
    };
  
    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} footerTemplate={footerTemplate}></AIAssistViewComponent>
    );
}

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

index.tsx

import { AIAssistViewComponent, PromptRequestEventArgs } 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 textAreaRef = React.useRef<HTMLTextAreaElement>(null);
    
    const footerTemplate = () => {
        return (
            <div className="custom-footer">
                <textarea id="promptTextArea" ref={textAreaRef} className="e-input" rows="2" placeholder="Enter your prompt here..."></textarea>
                <button id="sendPrompt" onClick={handleSendClick} className="e-btn e-primary">Generate</button>
            </div>
        );
    }; 

    const handleSendClick = () => {
        if (textAreaRef.current) {
            textAreaRef.current.value = '';
            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);
        }
    };
  
    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} footerTemplate={footerTemplate}></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;
}
.custom-footer {
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: transparent;
}

#promptTextArea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 0;
}

#sendPrompt {
  padding: 5px 15px;
  align-self: flex-end;
}