Events in React AI AssistView component
15 Dec 202524 minutes to read
The React AI AssistView component provides a comprehensive set of events that enable developers to customize behavior and handle user interactions effectively. The following events are available in the AI AssistView component.
created
The created event is triggered when the AI AssistView component rendering is completed.
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 created = () => {
// Your required action here
}
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} created={created}></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 created = () => {
// Your required action here
}
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} created={created}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));promptRequest
The promptRequest event is triggered when a user sends a prompt request in the AI AssistView component.
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) => {
// Your required action here
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}></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) => {
// Your required action here
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}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));promptChanged
The promptChanged event is triggered whenever the prompt text is modified in the AI AssistView component.
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 promptChanged = () => {
// Your required action here
}
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} promptChanged={promptChanged}></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 promptChanged = () => {
// Your required action here
}
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} promptChanged={promptChanged}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));beforeAttachmentUpload
The beforeAttachmentUpload event is triggered before attached files begin uploading in the AI AssistView.
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef(null);
const beforeAttachmentUpload = (args) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} beforeAttachmentUpload={beforeAttachmentUpload}></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 attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef<AIAssistViewComponent>(null);
const beforeAttachmentUpload = (args: UploadingEventArgs) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} beforeAttachmentUpload={beforeAttachmentUpload}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));attachmentUploadSuccess
The attachmentUploadSuccess event is triggered when an attached file is successfully uploaded in the AI AssistView.
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef(null);
const attachmentUploadSuccess = (args) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} attachmentUploadSuccess={attachmentUploadSuccess}></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 attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef<AIAssistViewComponent>(null);
const attachmentUploadSuccess = (args: UploadingEventArgs) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} attachmentUploadSuccess={attachmentUploadSuccess}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));attachmentUploadFailure
The attachmentUploadFailure event is triggered when an attached file upload fails in the AI AssistView.
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef(null);
const attachmentUploadFailure = (args) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} attachmentUploadFailure={attachmentUploadFailure}></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 attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef<AIAssistViewComponent>(null);
const attachmentUploadFailure = (args: UploadingEventArgs) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} attachmentUploadFailure={attachmentUploadFailure}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));attachmentRemoved
The attachmentRemoved event is triggered when an attached file is removed from the AI AssistView.
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef(null);
const attachmentRemoved = (args) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} attachmentRemoved={attachmentRemoved}></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 attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
const assistInstance = React.useRef<AIAssistViewComponent>(null);
const attachmentRemoved = (args: UploadingEventArgs) => {
// Your required action here
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} attachmentRemoved={attachmentRemoved}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));attachmentClick
The attachmentClick event is triggered when an attached file is clicked in the AI AssistView.
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 attachmentClick = (args) => {
// Your required action here
};
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
attachmentClick: (args) => attachmentClick(args)
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings} ></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 attachmentClick = (args) => {
// Your required action here
};
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
attachmentClick: (args) => attachmentClick(args)
};
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} enableAttachments={true} attachmentSettings= {attachmentSettings}></AIAssistViewComponent>
);
}
ReactDOM.render(<App />, document.getElementById('container'));