Attachments in Vue AI AssistView control

17 Dec 202518 minutes to read

The Attachment support in AI AssistView specifies user to include file attachments along with their prompts in the AI AssistView. This enhances the interaction by allowing users to provide additional context through files. You can enable this feature using the enableAttachments property, and customize its behavior using the attachmentSettings configuration.

Enable attachment

You can enable the attachment by using the enableAttachments property. By default, it is set to false.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
   <div id="container" style="height: 350px; width: 650px; margin: 0 auto;">
    <br />
    <ejs-aiassistview id="aiAssistView" ref="aiassist" :promptRequest="onPromptRequest" :enableAttachments="true" ></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);

// 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);
};
</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" 
    ></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 {
    
    };
  },
  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);
    },
  }
};
</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>

Configuring attachments

You can use the attachmentSettings property to configure the attachments in the AI AssistView.

Setting saveUrl and removeUrl

You can use the saveUrl and removeUrl property to add the save and remove the URL for the file uploaded in the AI AssistView.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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'
};

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

Setting file type

You can use the allowedFileType property to upload the specific file types in the attachment.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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',
  allowedFileType: '.png'
};

// 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);
};
</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); // Enable ripple globally

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',
        allowedFileType: '.png'
      }
    };
  },
  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);
    },
  }
};
</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>

Setting file size

You can use the maxFileSize property to allow the maximum file size of the upload file in the AI AssistView. By default, it is set to 2000000 bytes.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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',
  maxFileSize: 1000000
};

// 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);
};
</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); // Enable ripple globally

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',
        maxFileSize: 1000000
      }
    };
  },
  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);
    },
  }
};
</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>

Setting maximum count

Restrict how many files can be attached at once using maximumCount property. The default value is 10. If users select more than the allowed count, the maximum count reached error will be displayed.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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',
  maximumCount: 5
};

// 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);
};
</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-navigations/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',
        maximumCount: 5
      }
    };
  },
  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);
    },
  }
};
</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-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
</style>

Search docs

Ask HelpBot