Templates in React AI AssistView component

28 Aug 202524 minutes to read

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

The bannerTemplate property allows for the display of custom content, such as a welcome note or introductory instructions, at the top of the AI AssistView’s conversation area.

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'));
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'));
/* 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

To customize the appearance of prompt items, use the promptItemTemplate. The template’s context provides:

  • prompt: The text content of the user’s message
  • toolbarItems: Available toolbar actions for this prompt
  • index: The numerical position of this prompt in the conversation sequence
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'));
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'));
/* 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

The responseItemTemplate can be utilized to modify the layout of response items. The available context includes :

  • prompt: The original user prompt that triggered this response
  • response: The text content of the AI’s response
  • index: The numerical position in the conversation
  • toolbarItems: Available toolbar actions for this response
  • output: Additional output data associated with the response
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'));
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'));
/* 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

For customizing the prompt suggestion items, the promptSuggestionItemTemplate property can be implemented. The context for this template includes :

  • index: The position of this suggestion in the suggestions list
  • promptSuggestion: The suggestion object containing text and other properties
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'));
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'));
/* 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;
}

The footerTemplate property offers a way to replace the default footer and manage prompt request actions. This enables the creation of unique footers that can include custom functionalities, such as a character counter or a button to clear the conversation.

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'));
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'));
/* 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;
}