AIAssistViewComponent

1 Oct 202524 minutes to read

Represents the Essential JS 2 Angular AIAssistView Component.

<ejs-aiassistview></ejs-aiassistview>

Properties

activeView number

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

Defaults to 0

attachmentSettings AttachmentSettingsModel

Specifies the settings for the attachments in the AIAssistView component.
Represents the configuration for the uploader associated with footer.

Defaults to null

bannerTemplate string|object

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.

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

import { Component, ViewEncapsulation } from "@angular/core";
import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {}

Defaults to ’’

cssClass string

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

Defaults to ’’

enableAttachments boolean

Specifies whether the attachments is enabled in the AIAssistView component.

Defaults to false

enablePersistence boolean

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

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

footerTemplate string|object

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.

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

import { Component, ViewEncapsulation } from "@angular/core";
import { AIAssistViewModule } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {}

Defaults to ’’

height string|number

Specifies the height of the AIAssistView component.

Defaults to ‘100%’

locale string

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

Defaults to ’’

prompt string

Specifies the text input prompt for the AIAssistView component.

Defaults to ’’

promptIconCss string

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

Defaults to null

promptItemTemplate string|object

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.

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview id="prompt-item" #aiAssistViewComponent [prompts]="promptsData" (promptRequest)="onPromptRequest($event)">
            <ng-template #promptItemTemplate let-data>
                <div>{{data.prompt}}</div>
            </ng-template>
        </div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public 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>`
        }
    ];
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to ’’

promptPlaceholder string

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

Defaults to ‘Type prompt for assistance…’

promptSuggestionItemTemplate string|object

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.

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview id="suggestions-template" #aiAssistViewComponent [promptSuggestions]="promptSuggestions" (promptRequest)="onPromptRequest($event)">
            <ng-template #promptSuggestionItemTemplate let-data>
                <div>{{data.promptSuggestion}}</div>
            </ng-template>
        </div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public promptSuggestions: string[] = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to ’’

promptSuggestions string[]

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

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [promptSuggestions]="promptSuggestions"></div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public promptSuggestions: string[] = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to null

promptSuggestionsHeader string

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

Defaults to ’’

promptToolbarSettings PromptToolbarSettingsModel

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

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [promptToolbarSettings]="promptToolbarSettings" [prompts]="promptsData"></div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs, PromptToolbarSettingsModel } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public 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>`
        }
    ];
    public promptToolbarSettings: PromptToolbarSettingsModel = {
      items: [
        { type: 'Button', iconCss: 'e-icons e-edit' }
      ]
    };
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to null

prompts PromptModel[]

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

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [prompts]="promptsData"></div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public 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>`
        }
    ];
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to []

responseIconCss string

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

Defaults to null

responseItemTemplate string|object

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.

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview id="response-item" #aiAssistViewComponent [prompts]="promptsData" (promptRequest)="onPromptRequest($event)">
            <ng-template #responseItemTemplate let-data>
                <div [innerHTML]='data.response'></div>
            </ng-template>
        </div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public 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>`
        }
    ];
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to ’’

responseToolbarSettings ResponseToolbarSettingsModel

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

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [responseToolbarSettings]="responseToolbarSettings" [prompts]="promptsData"></div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs, ResponseToolbarSettingsModel } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public 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>`
        }
    ];
    public responseToolbarSettings: ResponseToolbarSettingsModel = {
        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' },
        ]
    };
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to []

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.

Defaults to false

showHeader boolean

Specifies whether the header is displayed in the AIAssistView component.

Defaults to true

toolbarSettings ToolbarSettingsModel

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

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview #aiAssistViewComponent (promptRequest)="onPromptRequest($event)" [toolbarSettings]="toolbarSettings"></div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs, ToolbarSettingsModel } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public toolbarSettings: ToolbarSettingsModel = {
        items: [ { type: 'Button', iconCss: 'e-icons e-user', align: 'Right', disabled: true } ]
    };
    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to []

views AssistViewModel[]

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

    <div id='assistview-container' style="height: 350px; width: 650px;">
        <div ejs-aiassistview #aiAssistViewComponent (promptRequest)="onPromptRequest($event)">
            <e-views>
                <e-view type="Assist" name="Prompt"></e-view>
                <e-view type="Custom" name="Response" iconCss="e-icons e-comment-show" [viewTemplate]="viewTemplate">
                    <ng-template #viewTemplate>
                        <div class="view-container"><h5>Response view content</h5></div>
                    </ng-template>
                </e-view>
            </e-views>
        </div>
    </div>

import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
import { AIAssistViewModule, AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-angular-interactive-chat';
@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [AIAssistViewModule]
})
export class AppComponent {
    @ViewChild('aiAssistViewComponent')
    public aiAssistViewComponent!: AIAssistViewComponent;

    public onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            this.aiAssistViewComponent.addPromptResponse('Connect the AIAssistView component to OpenAI or Azure Cognitive Services for real-time prompts, using API credentials for authentication.');
        }, 1000);
    };
}

Defaults to null

width string|number

Specifies the width of the AIAssistView component.

Defaults to ‘100%’

Methods

addPromptResponse

Adds a response to the last prompt or appends a new prompt data in the AIAssistView component.

Parameter	Type	Description
outputResponse	string | Object	The response to be added. Can be a string representing the response or an object containing both the prompt and the response. - If outputResponse is a string, it updates the response for the last prompt in the prompts collection. - If outputResponse is an object, it can either update the response of an existing prompt if the prompt matches or append a new prompt data.
isFinalUpdate (optional)	boolean	Indicates whether this response is the final one, to hide the stop response button.

Returns void

executePrompt

Executes the specified prompt in the AIAssistView component. The method accepts a string representing the prompt.

Parameter	Type	Description
prompt	string	The prompt text to be executed. It must be a non-empty string.

Returns void

scrollToBottom

Scrolls the view to the bottom to display the most recent response in the AIAssistView component.
This method programmatically scrolls the view to the bottom,
typically used when new responses are added or to refocus on the latest response.

Returns void

Events

attachmentRemoved EmitType<object>

Event triggered when an attachment is removed.
Provides details about the removed file.

attachmentUploadFailure EmitType<object>

Event triggered on attachment upload failure.
Provides details about the failed file and error message.

attachmentUploadSuccess EmitType<object>

Event triggered on successful attachment upload.
Provides details about the uploaded file.

beforeAttachmentUpload EmitType<BeforeUploadEventArgs>

Event triggered before an attachment upload is initiated.
Provides details about the file to be uploaded.

created EmitType<Object>

Event triggers when the component 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.

stopRespondingClick EmitType<StopRespondingEventArgs>

Triggers when the ‘Stop Responding’ button is clicked while a prompt request is in progress.
This event allows users to handle stopping the response generation and update the UI accordingly.