Vue
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

AIAssistViewModel API in Vue Ai Assist View API component

Interface for a class AIAssistView

Properties

created

EmitType<Object>

Event triggers when the SfAIAssistView is created.

promptChanged

EmitType<PromptChangedEventArgs>

Event triggered when the prompt text changed in the AIAssistView component.

promptRequest

EmitType<PromptRequestEventArgs>

Event triggered when a prompt request is made in the AIAssistView component. Provides details about the prompt request, including whether it should be cancelled, the prompt text, output, and toolbar items.

activeView

number

Specifies the index of the active view in the AIAssistView component. Determines the currently active and visible view.

bannerTemplate

string | function

Specifies the template for the banner in the AIAssistView component. Represents the content or layout used to render the banner. Can be a string or a function.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' bannerTemplate="bannerTemplate">
      <template v-slot:bannerTemplate="">
        <div class="banner-content">
          <div class="e-icons e-assistview-icon"></div>
          <h3>AI Assistance</h3>
        </div>
      </template>
    </ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  data: function () {
    return {};
  }
});
</script>

cssClass

string

Specifies custom CSS classes for the AIAssistView component. Allows for additional custom styling.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

footerTemplate

string | function

Specifies the template for the footer in the AIAssistView component. Defines the content or layout used to render the footer. Can be a string or a function.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' footer-template="footerTemplate">
      <template v-slot:footerTemplate="">
        <div><textarea id="promptTextArea" class="e-input"></textarea><button>Generate</button></div>
      </template>
    </ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  data: function () {
    return {};
  }
});
</script>

height

string | number

Specifies the height of the AIAssistView component.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

prompt

string

Specifies the text input prompt for the AIAssistView component.

promptIconCss

string

Specifies the CSS class for the prompter avatar in the AIAssistView component. Allows custom styling for the prompt avatar.

promptItemTemplate

string | function

Specifies the template for rendering prompt items in the AIAssistView component. Defines the content or layout used to render prompt items, and can be either a string or a function. The template context includes prompt text and toolbar items.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' promptItemTemplate="promptItemTemplate" :prompts="prompts" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:promptItemTemplate="{data}">
          <div>{{data.prompt}}</div>
      </template>
    </ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  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: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

promptPlaceholder

string

Specifies the placeholder text for the prompt input text area in the AIAssistView component.

promptSuggestionItemTemplate

string | function

Specifies the template for rendering prompt suggestion items in the AIAssistView component. Defines the content or layout used to render prompt suggestion items, and can be either a string or a function. The template context includes the index and suggestion text.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' promptSuggestionItemTemplate="promptSuggestionItemTemplate" :prompt-suggestions="promptSuggestions" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:promptSuggestionItemTemplate="{data}">
          <div class="assist-suggestion-content">{{data.promptSuggestion}}</div>
      </template>
    </ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  data: function () {
    return {
      promptSuggestions: [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
      ]
    }
  },
  methods: {
    onPromptRequest: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

promptSuggestions

string[]

Specifies the list of prompt suggestions in the AIAssistView component. Contains suggestions that can be used as prompts.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' :prompt-suggestions="promptSuggestions" :prompt-request="onPromptRequest" ref="aiassist"></ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  data: function () {
    return {
      promptSuggestions: [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
      ]
    }
  },
  methods: {
    onPromptRequest: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

promptSuggestionsHeader

string

Specifies the header text for the prompt suggestions in the AIAssistView component. Provides a header for the list of suggestions.

promptToolbarSettings

PromptToolbarSettingsModel

Specifies the settings for the prompt toolbar in the AIAssistView component. Represents the configuration for the toolbar associated with prompt items.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' :prompts="promptsData" :prompt-toolbar-settings="promptToolbarSettings" :prompt-request="onPromptRequest" ref="aiassist"></ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  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>`
        }
      ],
      promptToolbarSettings: {
        items: [
          { type: 'Button', iconCss: 'e-icons e-edit' }
        ]
      }
    }
  },
  methods: {
    onPromptRequest: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

prompts

PromptModel[]

Specifies the collection of prompts and their responses in the AIAssistView component.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' :prompts="promptsData" :prompt-request="onPromptRequest" ref="aiassist"></ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  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: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

responseIconCss

string

Specifies the CSS class for the responder avatar in the AIAssistView component. Allows custom styling for the responder avatar.

responseItemTemplate

string | function

Specifies the template for rendering response items in the AIAssistView component. Defines the content or layout used to render response items, and can be either a string or a function. The template context includes the prompt text, response text, and toolbar items.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' responseItemTemplate="responseItemTemplate" :prompts="prompts" :prompt-request="onPromptRequest" ref="aiassist">
      <template v-slot:responseItemTemplate="{data}">
          <div v-html="data.response"></div>
      </template>
    </ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  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: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

responseToolbarSettings

ResponseToolbarSettingsModel

Specifies the settings for the response toolbar in the AIAssistView component. Represents the configuration for the toolbar associated with response items.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' :prompts="promptsData" :response-toolbar-settings="responseToolbarSettings" :prompt-request="onPromptRequest" ref="aiassist"></ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  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>`
        }
      ],
      responseToolbarSettings: {
        items: [
          { type: 'Button', iconCss: 'e-icons e-download' },
          { type: 'Button', iconCss: 'e-icons e-refresh' },
          { type: 'Button', iconCss: 'e-icons e-assist-like' },
          { type: 'Button', iconCss: 'e-icons e-assist-dislike' },
        ]
      }
    }
  },
  methods: {
    onPromptRequest: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

showClearButton

boolean

Specifies whether the clear button of text area is displayed in the AIAssistView component. Determines if a button for clearing the prompt text area is shown or hidden.

showHeader

boolean

Specifies whether the header is displayed in the AIAssistView component.

toolbarSettings

ToolbarSettingsModel

Specifies the toolbar settings for the AIAssistView component. Represents the configuration for toolbar items and actions within the component.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' :toolbar-settings="toolbarSettings" :prompt-request="onPromptRequest" ref="aiassist"></ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  data: function () {
    return {
      toolbarSettings: {
        items: [
          { type: 'Button', iconCss: 'e-icons e-user', align: 'Right', disabled: true }
        ]
      }
    }
  },
  methods: {
    onPromptRequest: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

views

AssistViewModel[]

Specifies the collection of assist view models in the AIAssistView component. Represents the views available in the assist view.

<template>
  <div id='container' style="height: 350px; width: 650px;">
    <ejs-aiassistview id='aiAssistView' :prompt-request="onPromptRequest" ref="aiassist">
      <ejs-views>
        <ejs-view type="Assist" name="Prompt"></ejs-view>
        <ejs-view type="Custom" name="Response" icon-css="e-icons e-comment-show" view-template="viewTemplate">
          <template v-slot:viewTemplate="">
            <div class="view-container"><h3>Response view content</h3></div>
          </template>
        </ejs-view>
      </ejs-views>
    </ejs-aiassistview>
  </div>
</template>

<script>
import Vue from "vue";
import { AIAssistViewPlugin } from "@syncfusion/ej2-vue-interactive-chat";
Vue.use(AIAssistViewPlugin);

export default Vue.extend({
  data: function () {
    return {}
  },
  methods: {
    onPromptRequest: (args) => {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        defaultAiassist.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
      }, 1000);
    }
  }
});
</script>

width

string | number

Specifies the width of the AIAssistView component.

Previous
Next