HelpBot Assistant

How can I help you?

Customization of AI Assistant

9 Jan 202619 minutes to read

The AI Assistant feature is designed to be easily customizable using its properties, public methods, and events. The following examples demonstrate the customizations in the AI Assistant by adding custom toolbar buttons to the Prompt, Response, and Header toolbars, styling the AI Assistant popup, and using public methods to demonstrate a proofread use case.

Custom Toolbar Buttons in AI Assistant

To add the custom toolbar items to the AI Assistant Header, Prompt, and Response toolbar, the headerToolbarSettings, promptToolbarSettings, and responseToolbarSettings properties of the aiAssistantSettings can be used. The aiAssistantToolbarClick event allows you to execute custom logic when toolbar buttons are clicked.

The Custom items can be added to the headerToolbarSettings, promptToolbarSettings, and responseToolbarSettings with the following properties.

Property Description
command Specifies the primary command to execute when the toolbar item action is triggered.
subCommand Specifies the secondary or sub-command to execute when the toolbar item action is triggered.
iconCss Specifies the CSS class for the icon displayed in the toolbar item.
text Specifies the display text of the toolbar item.
type Specifies the type of the toolbar item (default is Button).
align Specifies the alignment of the toolbar item within the toolbar (default is Left).
visible Determines whether the toolbar item is visible (default is true).
disabled Determines whether the toolbar item is disabled and non-interactive (default is false).
tooltip Specifies the tooltip text shown when hovering over the toolbar item.
cssClass Specifies additional CSS classes applied to the toolbar item for styling.
template Specifies a custom template for rendering the toolbar item; can be a string or a function depending on the framework.
tabIndex Specifies the tab order of the toolbar item for keyboard navigation (default is -1).

Example

In the following example, custom toolbar items are added to the Header, Prompt, and Response toolbars of the AI Assistant, along with corresponding event handling logic.

  1. Custom Header Toolbar Item

    • A User Profile dropdown is added as a custom header toolbar item using a template.
    • The DropDownButton component is dynamically initialized in the beforePopupOpen event when the AI Assistant popup opens.
    • The dropdown instance is properly destroyed in the beforePopupClose event to ensure clean resource management.

  2. Custom Prompt Toolbar Item

    • A Search in Google toolbar button is added to the prompt toolbar.
    • When the button is clicked, the current prompt text is retrieved and used to open a new browser tab with the corresponding Google search results.

  3. Custom Response Toolbar Item

    • A Save toolbar button is added to the response toolbar.
    • On clicking the button, the generated AI response content is extracted from the response container and can be processed further (for example, saving it to a database or local storage).
<ejs-richtexteditor [toolbarSettings]="toolbarSettings" [aiAssistantSettings]="aiAssistantSettings" (aiAssistantToolbarClick)="onAIAssistantToolbarClick($event)"
    (beforePopupOpen)="beforePopupOpen($event)" (beforePopupClose)="beforePopupClose($event)">
</ejs-richtexteditor>
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, AIAssistantSettingsModel, ToolbarSettingsModel, AIAssitantToolbarClickEventArgs, BeforePopupOpenCloseEventArgs } from '@syncfusion/ej2-angular-richtexteditor';
import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@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 userDropDown!: DropDownButton;

    public aiAssistantSettings: AIAssistantSettingsModel = {
        promptToolbarSettings: ['Edit', 'Copy', { command: 'Prompt', subCommand: 'Search', iconCss: 'e-icons e-open-link', tooltip: 'Search in Google' }],
        responseToolbarSettings: [{ command: 'Response', subCommand: 'Save', iconCss: 'e-icons e-save', tooltip: 'Save Response' }, 'Regenerate', 'Copy', '|', 'Insert'],
        headerToolbarSettings: ['AIcommands', 
            { command: 'Header', subCommand: 'Profile', template: '<button id="profileDropDown" class="e-rte-dropdown-menu"></button>', align: 'Right' }, 'Close',],
        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.',
            },
        ],
    };

    onAIAssistantToolbarClick(args: AIAssitantToolbarClickEventArgs) {
        if (args.item.iconCss === 'e-icons e-open-link') {
            const target: HTMLElement= args.originalEvent.target as HTMLElement;
            const promptContainer: HTMLElement = target.closest('.e-prompt-container') as HTMLElement;
            const prompt = (promptContainer.querySelector('.e-prompt-text') as HTMLElement).textContent;
            window.open(`https://www.google.com/search?q=${prompt}`, '_blank')
        } else if (args.item.iconCss === 'e-icons e-save') {
            const response = (args as any).event.currentTarget.closest('.e-output-container').querySelector('.e-content-body').innerHTML;
            console.log(response); // Handle Saving response here.
        }
    };

    beforePopupOpen(event: BeforePopupOpenCloseEventArgs) {
        if (event.type === 'AIAssistant') {
            this.userDropDown = new DropDownButton({
                items: [
                    { text: 'Usage', iconCss: 'e-icons e-chart' },
                    { text: 'Saved Response' , iconCss: 'e-icons e-save'},
                    { separator: true },
                    { text: 'Log out', iconCss: 'e-icons e-view-side' }
                ],
                iconCss: 'e-icons e-user',
                cssClass: 'e-caret-hide',
            }, event.element.querySelector('#profileDropDown') as HTMLButtonElement);
        }
    }

    beforePopupClose(event: BeforePopupOpenCloseEventArgs) {
        if (event.type === 'AIAssistant') {
            this.userDropDown.destroy();
        }
    }
}

Styling the Popup

The AI Assistant Popup can be styled by using the following css.

.e-rte-aiquery-popup {
    padding:2px;
}

The AI Assistant Popup processing state can be styled by using the following css.

.e-rte-aiquery-popup.processing {
    padding:2px;
    color: white;
    background: white;
    z-index: 1;
}

Example

In the following example, a CSS animation is applied to the popup while the request is in progress.

.e-rte-aiquery-popup.processing {
    padding:2px;
    color: white;
    background: white;
    z-index: 1;
}

.e-rte-aiquery-popup.processing::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(270deg, #ff0080, #7928ca, #2afadf, #ff0080);
    background-size: 600% 600%;
    border-radius: 10px;
    animation: gradient-animation 8s ease infinite;
}

.e-rte-aiquery-popup.processing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:white;
    border-radius: 6px;
    z-index: -1;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
<ejs-richtexteditor #editor [toolbarSettings]="toolbarSettings" (aiAssistantPromptRequest)="onPromptRequest($event)">
</ejs-richtexteditor>
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, ToolbarSettingsModel, AIAssistantPromptRequestArgs, editAreaClick, RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    templateUrl: 'app.component.html',
    styleUrl:  'app.component.css',
    selector: 'app-root',
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService],
})
export class AppComponent {
    @ViewChild('editor')
    public editor!: RichTextEditorComponent;
    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    onPromptRequest(event:AIAssistantPromptRequestArgs): void {
        setTimeout(() => {
            this.editor.addAIPromptResponse('Demonstration of the AI Assistant Popup styling.', false);
            this.editor.addAIPromptResponse('Demonstration of the AI Assistant Popup styling.', true);
        }, 5000);
    }
}

Use Case

Using the public methods, you can build custom workflows with the AI Assistant. Actions such as retrieving conversation history, executing prompts, adding responses, showing or hiding the AI Assistant, and clearing conversation history can all be achieved using the following public methods programmatically.

Method Description
getAIPromptHistory() Get conversation history.
executeAIPrompt(prompt: string) Send a prompt to the AI Assistant.
addAIPromptResponse(outputResponse: string \| Object, isFinalUpdate?: boolean) Adds the Response to the AI Assistant.
showAIAssistantPopup() Show the AI Assistant popup.
hideAIAssistantPopup() Hide the AI Assistant popup.
clearAIPromptHistory() Clear all conversation history.

Example

The following example demonstrates a Proofread use case by rendering a button outside the editor. On clicking the Proofread button:

  1. Launches the AI Assistant popup using the showAIAssistantPopup method.
  2. Executes a prompt using the executeAIPrompt method.
<ejs-richtexteditor #editor [toolbarSettings]="toolbarSettings" (aiAssistantPromptRequest)="onPromptRequest($event)">
    <ng-template #valueTemplate>
        <p>Dear valued costumer,</p>
        <p>We are writting to inform you that there has been a recent change to our policy’s which may effect your account. Please take a moment to review the detials below carefuly.</p>
        <p>Starting from next monday, all user must update there personal information before accessing the system. Failure to do so may result in temporary suspension of you’re account, and loss of acces to certain feature.</p>
        <p>If you have any question or concern, feel free to contact our support team at <a href="mailto:support&#64;companyname.com">support&#64;companyname.com</a> they are avalible 24/7 and happy help.</p>
        <p>Thank you for you’re time and coorperation. We appologize for any inconvenient this may cause.</p>
        <p>Best Regard,</p>
        <p>Customer Support Team</p>
        <p>Company Name</p>
    </ng-template>
</ejs-richtexteditor>

<br>
<button class="e-btn e-primary" (click)="reviewContent()"><span class="e-icons e-btn-icon e-check-large"></span>Proof read</button>
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, AIAssistantService, ToolbarSettingsModel, AIAssistantPromptRequestArgs, editAreaClick, 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 {
    @ViewChild('editor')
    public editor!: RichTextEditorComponent;
    public toolbarSettings: ToolbarSettingsModel = { items: ['AICommands', 'AIQuery'] };

    onPromptRequest(event:AIAssistantPromptRequestArgs): void {
        setTimeout(() => {
            const aiResponse: string = `Dear Valued Customer,

We are writing to inform you that there has been a recent change to our policies that may affect your account. Please take a moment to review the details below carefully.

Starting next Monday, all users must update their personal information before accessing the system. Failure to do so may result in the temporary suspension of your account and loss of access to certain features.

If you have any questions or concerns, please feel free to contact our support team at [[email protected]](mailto:[email protected]). They are available 24/7 and happy to help.

Thank you for your time and cooperation. We apologize for any inconvenience this may cause.

Best regards,
Customer Support Team
Company Name
`;
            this.editor.addAIPromptResponse(aiResponse, false);
            this.editor.addAIPromptResponse(aiResponse, true);
        }, 300); // For demonstration purpose.
    }

    reviewContent(): void {
        this.editor.showAIAssistantPopup();
        this.editor.executeAIPrompt('Proof read the editor content.');
    }
}