Properties of AI Assistant

18 Nov 201817 minutes to read

The AIAssistantSettings class provides the following properties for complete customization:

Property	Type	Default	Description
`commands`	`AICommands[]`	Predefined commands	Defines the predefined AI command options displayed in the command dropdown menu.
`popupMaxHeight`	`string \\| number`	`'400px'`	Sets the maximum height of the AI Assistant popup. Accepts CSS height values or numbers (treated as pixels).
`popupWidth`	`string \\| number`	`'600px'`	Sets the width of the AI Assistant popup. Accepts CSS width values or numbers (treated as pixels).
`placeholder`	`string`	`'Ask AI to rewrite or generate content.'`	Specifies the placeholder text shown in the AI prompt textarea.
`headerToolbarSettings`	`(AssitantHeaderToolbarItems \\| IAIAssistantToolbarItem)[]`	`['AIcommands', 'Close']`	Configures the toolbar in the header section of the AI Assistant interface.
`promptToolbarSettings`	`(AssistantPromptToolbarItems \\| IAIAssistantToolbarItem)[]`	`['Edit', 'Copy']`	Configures the toolbar in the prompt editor (user input) section.
`responseToolbarSettings`	`(AssistantResponseToolbarItems \\| IAIAssistantToolbarItem)[]`	`['Regenerate', 'Copy', '\\|', 'Insert']`	Configures the toolbar in the AI response viewer section.
`prompts`	`PromptModel[]`	`[]`	Defines the collection of predefined prompts and their corresponding responses.
`suggestions`	`string[]`	`[]`	Defines suggestion prompts displayed to the user as guidance.
`bannerTemplate`	`string \\| Function`	`''`	Specifies the template for the banner in the AI Assistant component.
`maxPromptHistory`	`number`	`20`	Defines the maximum number of prompts that can be stored in the editor’s history stack.

The aiAssistantSettings property of the Rich Text Editor allows you to configure the following:

AI Commands Dropdown menu items
Preloaded conversations and suggestions in the AI Assistant
AI Assistant popup height and width
AI Assistant banner configuration
Maximum length of prompt history
Additional toolbar items in the AI Assistant Header, Prompt, and Response sections

To configure the items displayed in the AI Commands Dropdown menu, the commands property of the aiAssistantSettings can be used. The commands come with predefined prompts for writing, summarizing, and translating content. The commands property can be configured to add items or nested items to the dropdown menu.

Example

In the below example, a set of prompts and texts are configured to demonstrate the commands property usage.

app.component.html
app.component.ts
<ejs-richtexteditor [toolbarSettings]="toolbarSettings" [aiAssistantSettings]="aiAssistantSettings">
</ejs-richtexteditor>
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, AIAssistantSettingsModel, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    templateUrl: 'app.component.html',
    selector: 'app-root',
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService],
})
export class AppComponent {
    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    public aiAssistantSettings: AIAssistantSettingsModel = {
        commands: [
            { text: 'Rewrite', prompt: 'Rewrite the content to be more refined.' },
            { text: 'Elaborate', prompt: 'Expand on the following content with more detail and explanation:' },
            {
                text: 'Change Tone',
                items: [
                    { text: 'Professional', prompt: 'Rewrite the following content in a professional tone:' },
                    { text: 'Casual', prompt: 'Rewrite the following content in a casual, conversational tone:' },
                    { text: 'Direct', prompt: 'Rewrite the following content to be more direct and to the point:' },
                ],
            },
        ]
    };
}

Preloading Prompts, Response and Suggestions

To preload conversations and add suggested prompts to the AI Assistant use the prompts and suggestions properties of the aiAssistantSettings. This is helpful when conversation history needs to be loaded for a returning user, or to load the AI Assistant with default prompts for a new user.

Example

In the below sample, the prompts and suggestions properties of the aiAssistantSettings are used to preload the prompts, responses, and suggestions.

app.component.html
app.component.ts
<ejs-richtexteditor [toolbarSettings]="toolbarSettings" [aiAssistantSettings]="aiAssistantSettings">
</ejs-richtexteditor>
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, AIAssistantSettingsModel, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    templateUrl: 'app.component.html',
    selector: 'app-root',
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService],
})
export class AppComponent {
    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    public aiAssistantSettings: AIAssistantSettingsModel = {
        prompts: [
			{ 
				prompt: 'What is Essential Studio ?',
				response: 'Essential Studio is a software toolkit by Syncfusion that offers a variety of UI controls, frameworks, and libraries for developing applications on web, desktop, and mobile platforms. It aims to streamline application development with customizable, pre-built components.'
			}
		],
		suggestions: [
			'What are the popular components of Essential Studio?',
    		'Which web frameworks are supported by Essential Studio?'
		]
    };
}

To configure the item order and add custom items to the header, prompt, and response sections, use the headerToolbarSettings, promptToolbarSettings, and responseToolbarSettings properties of the aiAssistantSettings.

The following table lists the available toolbar items for the Header, Prompt, and Response toolbars:

Toolbar	Items & Their Use
Header	AIcommands – Opens AI-related command options. Close – Closes the current panel or window. Clear - Clear the current conversations.
Prompt	Edit – Allows you to modify the prompt text. Copy – Copies the prompt to your clipboard.
Response	Regenerate – Produces a new response for the same prompt. Copy – Copies the AI response. \| – Visual separator between actions. Insert – Inserts the generated response into the target editor or field.

The default toolbar configurations are:

Header Toolbar: ['AIcommands', 'Close']
Prompt Toolbar: ['Edit', 'Copy']
Response Toolbar: ['Regenerate', 'Copy', '|', 'Insert']

Example

In the below sample, the toolbar settings are configured to modify the order and items are displayed.

app.component.html
app.component.ts
<ejs-richtexteditor [toolbarSettings]="toolbarSettings" [aiAssistantSettings]="aiAssistantSettings">
</ejs-richtexteditor>
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, AIAssistantSettingsModel, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    templateUrl: 'app.component.html',
    selector: 'app-root',
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService],
})
export class AppComponent {
    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    public aiAssistantSettings: AIAssistantSettingsModel = {
        headerToolbarSettings: ['AIcommands', 'Clear', 'Close'],
        promptToolbarSettings: ['Edit'],
        responseToolbarSettings: ['Copy', '|', 'Insert'],
        prompts: [
			{ 
				prompt: 'What is Essential Studio ?',
				response: 'Essential Studio is a software toolkit by Syncfusion that offers a variety of UI controls, frameworks, and libraries for developing applications on web, desktop, and mobile platforms. It aims to streamline application development with customizable, pre-built components.'
			}
		]
    };
}

To customize the dimensions of the AI Assistant popup based on the editor width, use the popupWidth and popupMaxHeight properties of the aiAssistantSettings. The default minimum height of the popup is 100px, and the popupMaxHeight property customizes the maximum height of the popup up to which the content can grow.

Example

In the below sample, the popup width and maximum height are configured.

app.component.html
app.component.ts
<ejs-richtexteditor [toolbarSettings]="toolbarSettings" [aiAssistantSettings]="aiAssistantSettings">
</ejs-richtexteditor>
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, AIAssistantSettingsModel, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    templateUrl: 'app.component.html',
    selector: 'app-root',
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService],
})
export class AppComponent {
    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    public aiAssistantSettings: AIAssistantSettingsModel = {
        popupMaxHeight: 500,
        popupWidth: 500
    };
}

Setting Maximum Conversation History Length

To set the maximum conversation history length, use the maxPromptHistory property of the aiAssistantSettings. The default amount of conversation that can be loaded is 20 prompts. The conversation will be cleared when closing the popup. To retrieve all conversation history, use the getAIPromptHistory() method. This method is useful for loading previous conversations and populating the prompts property when you need to restore or display earlier chat sessions.

Example

In the below sample, the maximum prompt history is configured to 30, and when a save button is clicked the conversation history is retrieved using the getAIPromptHistory() method.

app.component.html
app.component.ts
<ejs-richtexteditor #editor [toolbarSettings]="toolbarSettings" [aiAssistantSettings]="aiAssistantSettings">
</ejs-richtexteditor>
<br>
<button class="e-btn e-primary" (click)="onSaveBtnClick()"><span class="e-icons e-save"></span>Save</button>
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, AIAssistantSettingsModel, ToolbarSettingsModel, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
import { PromptModel } from '@syncfusion/ej2-interactive-chat';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    templateUrl: 'app.component.html',
    selector: 'app-root',
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService],
})
export class AppComponent {
    @ViewChild('editor')
    public editor!: RichTextEditorComponent;

    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    public aiAssistantSettings: AIAssistantSettingsModel = {
        prompts: [
			{ 
				prompt: 'What is Essential Studio ?',
				response: 'Essential Studio is a software toolkit by Syncfusion that offers a variety of UI controls, frameworks, and libraries for developing applications on web, desktop, and mobile platforms. It aims to streamline application development with customizable, pre-built components.'
			}
		],
        maxPromptHistory: 30
    };

    public onSaveBtnClick(): void {
        const promptHistory: PromptModel[] = this.editor.getAIPromptHistory();
        console.log(promptHistory);
        // Handle DB Post and save history to the DB.
    }
}

To set the banner content displayed on top of the AI Assistant popup, use the bannerTemplate property of the aiAssistantSettings. This can be used to display welcome messages, instructions, or other relevant information.

Example

In the below sample, a custom banner template is applied to the AI Assistant.

app.component.html
app.component.ts
<ejs-richtexteditor [toolbarSettings]="toolbarSettings" [aiAssistantSettings]="aiAssistantSettings">
</ejs-richtexteditor>
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, AIAssistantSettingsModel, ToolbarSettingsModel, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    templateUrl: 'app.component.html',
    selector: 'app-root',
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService],
})
export class AppComponent {

    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    public aiAssistantSettings: AIAssistantSettingsModel = {
        bannerTemplate: `<div class="banner-content">
            <div class="e-icons e-assistview-icon"></div>
            <h3>AI Assistant</h3>
            <i>AI-generated results can be error-prone; review them carefully.</i>
        </div>`
    };
}

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Properties of AI Assistant

Preloading Prompts, Response and Suggestions

Setting Maximum Conversation History Length

Setting the Banner

Properties of AI Assistant

Adding items to the AI Commands Dropdown menu

Preloading Prompts, Response and Suggestions

Header, Prompt and Response Toolbar

Available Toolbar Items

Default Toolbar Items

Popup Dimensions

Setting Maximum Conversation History Length

Setting the Banner