Templates in Vue AI AssistView component

30 Nov 202424 minutes to read

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

Banner template

You can use the bannerTemplate property to display additional information, such as a welcome note, and more in the AI AssistView. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView.

Composition API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' bannerTemplate="bannerTemplate" ref="aiassist" :prompt-request="onPromptRequest">
      <template v-slot:bannerTemplate="">
        <div class="banner-content">
          <div class="e-icons e-assistview-icon"></div>
          <h3>AI Assistance</h3>
          <div>Your everyday AI companion.</div>
        </div>
      </template>
    </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 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.';
    aiassist.value.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";

#aiAssistView .e-view-container {
  margin: auto;
}
#aiAssistView .e-banner-view {
  margin-left: 0;
}
.banner-content .e-assistview-icon:before {
  font-size: 35px;
}
.banner-content {
  text-align: center;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' bannerTemplate="bannerTemplate" ref="aiassist" :prompt-request="onPromptRequest">
      <template v-slot:bannerTemplate="">
        <div class="banner-content">
          <div class="e-icons e-assistview-icon"></div>
          <h3>AI Assistance</h3>
          <div>Your everyday AI companion.</div>
        </div>
      </template>
    </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);
    }
  }
}
</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";

#aiAssistView .e-view-container {
  margin: auto;
}
#aiAssistView .e-banner-view {
  margin-left: 0;
}
.banner-content .e-assistview-icon:before {
  font-size: 35px;
}
.banner-content {
  text-align: center;
}
</style>

Prompt item template

You can use the promptItemTemplate property to customize the prompt items in the AI AssistView. The template context includes prompt, toolbarItems and index items.

Composition API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' promptItemTemplate="promptItemTemplate" :prompts="promptsData" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:promptItemTemplate="{data}">
        <div class="promptItemContent">
          <div class="prompt-header">You
            <span class="e-icons e-user"></span>
          </div>
          <div class="assist-prompt-content"></div>
        </div>
      </template>
    </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 = promptsData.find((promptObj) => promptObj.prompt === args.prompt);
    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.';
    aiassist.value.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
  }, 1000);
};

const cleanPrompt = (prompt) => {
  return prompt.replace('<span class="e-icons e-circle-info"></span>', '');
};

const promptsData = [
  {
    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>`
  }
];
</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";

.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 .content {
  margin-right: 35px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' promptItemTemplate="promptItemTemplate" :prompts="prompts" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:promptItemTemplate="{data}">
        <div class="promptItemContent">
          <div class="prompt-header">You
            <span class="e-icons e-user"></span>
          </div>
          <div class="assist-prompt-content"></div>
        </div>
      </template>
    </ejs-aiassistview>
  </div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";

export default {
  components: {
    'ejs-aiassistview': AIAssistViewComponent
  },
  data: function () {
    return {
      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>`
        }
      ]
    }
  },
  methods: {
    onPromptRequest: function (args) {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        let foundPrompt = this.prompts.find((promptObj) => promptObj.prompt === args.prompt);
        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(foundPrompt ? foundPrompt.response : defaultResponse);
      }, 1000);
    },
    cleanPrompt: (prompt) => {
      return prompt.replace('<span class="e-icons e-circle-info"></span>', '');
    }
  }
}
</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";

.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 .content {
  margin-right: 35px;
}
</style>

Response item template

You can use the responseItemTemplate property to customize response items within the AI AssistView. The template context includes the prompt, response, index, toolbarItems and output items.

Composition API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' responseItemTemplate="responseItemTemplate" :prompts="promptsData" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:responseItemTemplate="{data}">
        <div class="responseItemContent">
          <div class="response-header">
            <span class="e-icons e-assistview-icon"></span>
            AI Assist
          </div>
          <div class="assist-response-content" v-html="data.response"></div>
        </div>
      </template>
    </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 = promptsData.find((promptObj) => promptObj.prompt === args.prompt);
    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.';
    aiassist.value.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
  }, 1000);
};

const promptsData = [
  {
    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>`
  }
];
</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";

.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;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' responseItemTemplate="responseItemTemplate" :prompts="promptsData" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:responseItemTemplate="{data}">
        <div class="responseItemContent">
          <div class="response-header">
            <span class="e-icons e-assistview-icon"></span>
            AI Assist
          </div>
          <div class="assist-response-content" v-html="data.response"></div>
        </div>
      </template>
    </ejs-aiassistview>
  </div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";

export default {
  components: {
    'ejs-aiassistview': AIAssistViewComponent
  },
  data: function () {
    return {
      promptsData: [
        {
          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>`
        }
      ]
    }
  },
  methods: {
    onPromptRequest: function (args) {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        let foundPrompt = this.promptsData.find((promptObj) => promptObj.prompt === args.prompt);
        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(foundPrompt ? foundPrompt.response : 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";

.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;
}
</style>

Prompt suggestion item template

You can use the promptSuggestionItemTemplate property to customize the prompt suggestion items in the AI AssistView. The template context includes the index and promptSuggestion.

Composition API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' promptSuggestionItemTemplate="promptSuggestionItemTemplate" :prompt-suggestions="promptSuggestions" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:promptSuggestionItemTemplate="{data}">
        <div class='suggestion-item active'>
          <span class="e-icons e-circle-info"></span>
          <div class="assist-suggestion-content"></div>
        </div>
      </template>
    </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 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.';
    aiassist.value.addPromptResponse(args.prompt === aiassist.value.promptSuggestions[0] ? response1 : args.prompt === aiassist.value.promptSuggestions[1] ? response2 : 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";

.e-aiassistview .e-views .e-suggestions 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 .content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' promptSuggestionItemTemplate="promptSuggestionItemTemplate" :prompt-suggestions="promptSuggestions" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:promptSuggestionItemTemplate="{data}">
        <div class='suggestion-item active'>
          <span class="e-icons e-circle-info"></span>
          <div class="assist-suggestion-content"></div>
        </div>
      </template>
    </ejs-aiassistview>
  </div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";

export default {
  components: {
    'ejs-aiassistview': AIAssistViewComponent
  },
  data: function () {
    return {
      promptSuggestions: [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
      ]
    }
  },
  methods: {
    onPromptRequest: function (args) {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        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.';
        defaultAiassist.addPromptResponse(args.prompt === defaultAiassist.promptSuggestions[0] ? response1 : args.prompt === defaultAiassist.promptSuggestions[1] ? response2 : 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";

.e-aiassistview .e-views .e-suggestions 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 .content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>

Footer template

You can use the footerTemplate property to customize the default footer area and manage prompt request actions in the AI AssistView. This allows users to create unique footers that meet their specific needs.

Composition API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' footer-template="footerTemplate" ref="aiassist">
      <template v-slot:footerTemplate="">
        <div class="custom-footer">
          <textarea id="promptTextArea" class="e-input" rows="2" placeholder="Enter your prompt here"></textarea>
          <button id="sendPrompt" class="e-btn e-primary" @click="buttonClick">Generate</button>
        </div>
      </template>
    </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 buttonClick = () => {
  const textArea = document.getElementById('promptTextArea');
  if (textArea) {
    textArea.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.';
    aiassist.value.addPromptResponse(defaultResponse);
  }
};
</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";

.custom-footer {
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: transparent;
}

#promptTextArea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#sendPrompt {
  padding: 5px 15px;
  align-self: flex-end;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' footer-template="footerTemplate" ref="aiassist">
      <template v-slot:footerTemplate="">
        <div class="custom-footer">
          <textarea id="promptTextArea" class="e-input" rows="2" placeholder="Enter your prompt here"></textarea>
          <button id="sendPrompt" class="e-btn e-primary" @click="buttonClick">Generate</button>
        </div>
      </template>
    </ejs-aiassistview>
  </div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";

export default {
  components: {
    'ejs-aiassistview': AIAssistViewComponent
  },
  data: function () {
    return {
    }
  },
  methods: {
    buttonClick: function () {
      let defaultAiassist = this.$refs.aiassist.ej2Instances;
      const textArea = document.getElementById('promptTextArea');
      if (textArea) {
        textArea.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.';
        defaultAiassist.addPromptResponse(defaultResponse);
      }
    }
  }
}
</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";

.custom-footer {
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: transparent;
}

#promptTextArea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#sendPrompt {
  padding: 5px 15px;
  align-self: flex-end;
}
</style>