Assist view in React AI AssistView component
28 Aug 202524 minutes to read
Setting prompt text
The prompt property allows you to define initial or default text that appears in the prompt input area. This property is useful for pre-filling the input with context or guidance for users.
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 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} prompt={'What tools or apps can help me prioritize tasks?'}></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 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} prompt={'What tools or apps can help me prioritize tasks?'}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Setting prompt placeholder
The promptPlaceholder property defines the placeholder text displayed in the prompt textarea when it’s empty. The default placeholder text is Type prompt for assistance....
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 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} promptPlaceholder={'Type a message...'}></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 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} promptPlaceholder={'Type a message...'}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Prompt-response collection
The prompts property enables you to initialize the component with pre-configured conversation data or retrieve the complete history of user interactions.
The prompts collection automatically stores all user inputs and corresponding AI responses generated during the session, providing a complete conversation history that can be accessed programmatically.
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 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 (
// specifies the tag for render the AI AssistView component
<AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts}></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 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 (
// specifies the tag for render the AI AssistView component
<AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Configuring prompt suggestions
The promptSuggestions property provides users with helpful suggestions that can appear initially or on-demand. These suggestions help users formulate better prompts and discover available functionality, enhancing the overall user experience.
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 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}></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 promptSuggestions: string[] = [
"Best practices for clean, maintainable code?",
"How to optimize code editor for speed?"
];
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}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Customizing suggestions header
The promptSuggestionsHeader property allows you to set a descriptive header text that appears above the prompt suggestions.
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 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} promptSuggestionsHeader='Suggested Prompts'></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 promptSuggestions: string[] = [
"Best practices for clean, maintainable code?",
"How to optimize code editor for speed?"
];
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} promptSuggestionsHeader='Suggested Prompts'></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Customizing user avatar appearance
The promptIconCss property enables customization of the user avatar icon that appears alongside user prompts.
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 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 (
// specifies the tag for render the AI AssistView component
<AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} promptIconCss='e-icons e-user'></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 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 (
// specifies the tag for render the AI AssistView component
<AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} promptIconCss='e-icons e-user'></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Adding response iconCss
The responseIconCss property allows customization of the AI assistant avatar that appears alongside AI responses. By default, the e-assistview-icon class is added as the built-in AI AssistView response icon.
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 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 (
// specifies the tag for render the AI AssistView component
<AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} responseIconCss='e-icons e-bullet-4'></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 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 (
// specifies the tag for render the AI AssistView component
<AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} responseIconCss='e-icons e-bullet-4'></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Show or hide clear button
The showClearButton property controls the visibility of the clear button in the prompt input area. By default, its value is false, When the clear button is clicked, only the current prompt text is cleared, while the conversation history remains intact.
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 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} prompt={'What tools or apps can help me prioritize tasks?'} showClearButton={true}></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 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} prompt={'What tools or apps can help me prioritize tasks?'} showClearButton={true}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));