Events in Vue AI AssistView component
17 Dec 202524 minutes to read
This section describes the AI AssistView events that will be triggered when appropriate actions are performed. The following events are available in the AI AssistView component.
created
The AI AssistView component triggers the created event when the component rendering is completed.
<template>
<div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
<br>
<ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-request="onPromptRequest" :created="created"></ejs-aiassistview>
</div>
</template>
<script setup>
import { AIAssistViewComponent as EjsAiassistview } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";
let aiassist = ref(null);
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.';
aiassist.value.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
}, 2000);
};
const created = () => {
// Your required action here
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
<br>
<ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-request="onPromptRequest" :created="created"></ejs-aiassistview>
</div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data: function () {
return {
}
},
methods: {
onPromptRequest: function (args) {
setTimeout(() => {
let defaultAiassist = this.$refs.aiassist.ej2Instances;
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.';
defaultAiassist.addPromptResponse(defaultResponse);
}, 1000);
},
created: () => {
// Your required action here
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>promptRequest
The promptRequest event is triggered when the prompt request is made in the AI AssistView control.
<template>
<div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
<br>
<ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-request="onPromptRequest"></ejs-aiassistview>
</div>
</template>
<script setup>
import { AIAssistViewComponent as EjsAiassistview } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";
let aiassist = ref(null);
const onPromptRequest = (args) => {
// Your required action here
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.';
aiassist.value.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
}, 2000);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
<br>
<ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-request="onPromptRequest"></ejs-aiassistview>
</div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data: function () {
return {
}
},
methods: {
onPromptRequest: function (args) {
// Your required action here
setTimeout(() => {
let defaultAiassist = this.$refs.aiassist.ej2Instances;
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.';
defaultAiassist.addPromptResponse(defaultResponse);
}, 1000);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>promptChanged
The promptChanged event is triggered when the prompt text is changed in the AI AssistView control.
<template>
<div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
<br>
<ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-request="onPromptRequest" :prompt-changed="promptChanged"></ejs-aiassistview>
</div>
</template>
<script setup>
import { AIAssistViewComponent as EjsAiassistview } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";
let aiassist = ref(null);
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.';
aiassist.value.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
}, 2000);
};
const promptChanged = () => {
// Your required action here
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
<br>
<ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-request="onPromptRequest" :prompt-changed="promptChanged"></ejs-aiassistview>
</div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data: function () {
return {
}
},
methods: {
onPromptRequest: function (args) {
setTimeout(() => {
let defaultAiassist = this.$refs.aiassist.ej2Instances;
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.';
defaultAiassist.addPromptResponse(defaultResponse);
}, 1000);
},
promptChanged: () => {
// Your required action here
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>beforeAttachmentUpload
The beforeAttachmentUpload event is triggered before the attached files upload begins in the AI AssistView
<template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :beforeAttachmentUpload="beforeAttachmentUpload" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"></ejs-aiassistview>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent as EjsAiassistview } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
const aiassist = ref(null);
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
// Prompt request handler
const onPromptRequest = () => {
setTimeout(() => {
const aiAssistInstance = aiassist.value?.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
};
const beforeAttachmentUpload = (args) => {
// Your required action here
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :beforeAttachmentUpload="beforeAttachmentUpload" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data() {
return {
attachmentSettings: {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
}
};
},
methods: {
onPromptRequest() {
setTimeout(() => {
const aiAssistInstance = this.$refs.aiassist.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
},
beforeAttachmentUpload(args) {
// your code will be here
}
}
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>attachmentUploadSuccess
The attachmentUploadSuccess event is triggered when the attached file is successfully uploaded in the AI AssistView.
<template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :attachmentUploadSuccess="onAttachmentUploadSuccess" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent as EjsAiassistview } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
const aiassist = ref(null);
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
// Prompt request handler
const onPromptRequest = () => {
setTimeout(() => {
const aiAssistInstance = aiassist.value?.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
};
const onAttachmentUploadSuccess = () => {
// Your required action here
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :attachmentUploadSuccess="onAttachmentUploadSuccess" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data() {
return {
attachmentSettings: {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
}
};
},
methods: {
onPromptRequest() {
setTimeout(() => {
const aiAssistInstance = this.$refs.aiassist.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
},
onAttachmentUploadSuccess() {
// your code will be here
}
}
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>attachmentUploadFailure
The attachmentUploadFailure event is triggered when the attached file upload fails in the AI AssistView.
<template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :attachmentUploadFailure="attachmentUploadFailure" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent as EjsAiassistview } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
const aiassist = ref(null);
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
// Prompt request handler
const onPromptRequest = () => {
setTimeout(() => {
const aiAssistInstance = aiassist.value?.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
};
const attachmentUploadFailure = () => {
// Your required action here
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :attachmentUploadFailure="attachmentUploadFailure" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data() {
return {
attachmentSettings: {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
}
};
},
methods: {
onPromptRequest() {
setTimeout(() => {
const aiAssistInstance = this.$refs.aiassist.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
},
attachmentUploadFailure() {
// your code will be here
}
}
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>attachmentRemoved
The attachmentRemoved event is triggered when an attached file is removed in the AI AssistView.
<template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :attachmentRemoved="attachmentRemoved" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent as EjsAiassistview } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
const aiassist = ref(null);
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
};
// Prompt request handler
const onPromptRequest = () => {
setTimeout(() => {
const aiAssistInstance = aiassist.value?.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
};
const attachmentRemoved = () => {
// Your required action here
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :attachmentRemoved="attachmentRemoved" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data() {
return {
attachmentSettings: {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
}
};
},
methods: {
onPromptRequest() {
setTimeout(() => {
const aiAssistInstance = this.$refs.aiassist.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
},
attachmentRemoved() {
// your code will be here
}
}
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>attachmentClick
The attachmentClick event is triggered when an attached file is clicked in the AI AssistView.
<template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent as EjsAiassistview } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
const aiassist = ref(null);
const attachmentSettings = {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
attachmentClick: attachmentClick
};
// Prompt request handler
const onPromptRequest = () => {
setTimeout(() => {
const aiAssistInstance = aiassist.value?.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
};
const attachmentClick = () => {
// Your required action here
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style><template>
<div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
<br />
<ejs-aiassistview id="aiAssistView" ref="aiassist" :promptRequest="onPromptRequest" :enableAttachments="true" :attachmentSettings="attachmentSettings"
></ejs-aiassistview>
</div>
</template>
<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { AIAssistViewComponent } from '@syncfusion/ej2-vue-interactive-chat';
enableRipple(true);
export default {
components: {
'ejs-aiassistview': AIAssistViewComponent
},
data() {
return {
attachmentSettings: {
saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove',
attachmentClick: this.attachmentClick
}
};
},
methods: {
onPromptRequest() {
setTimeout(() => {
const aiAssistInstance = this.$refs.aiassist.ej2Instances;
const 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.';
aiAssistInstance.addPromptResponse(defaultResponse);
}, 1000);
},
attachmentClick() {
// your code will be here
}
}
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>