Syncfusion AI Assistant

How can I help you?

Methods in Angular Inline AI Assist component

23 Mar 202623 minutes to read

Adding response

You can use the addResponse public method to add the response to the Inline AI Assist.

<div id="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onClick()">Add Response</button>
    <div id="editableText" contenteditable="true">
        <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
        <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
    </div>
    <ejs-inlineaiassist id="defaultInlineAssist" #inlineAssistComponent
        [relateTo]="'#summarizeBtn'"
        [responseSettings] = "responseSetting"
        popupWidth="500px"
        (promptRequest)="onPromptRequest($event)">
    </ejs-inlineaiassist>
</div>
import { ViewChild, Component } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';


@Component({
    imports: [InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement | null;
            if (editable) {
                editable.innerHTML = '<p>' + this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1 ].response + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
        } else if (args.command.label === 'Discard') {
            this.inlineAssistComponent.hidePopup();
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect:  this.itemSelect
    }
    
    onClick(): void {
        this.inlineAssistComponent.showPopup();
        // addResponse method - adds a dynamic response to the component
        this.inlineAssistComponent.addResponse('Dynamic response');
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
        let defaultResponse = 'For real-time prompt processing, connect 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.';

        this.inlineAssistComponent.addResponse(defaultResponse);

        }, 1000);
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-interactive-chat/styles/material.css';

#editableText {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
}

Executing prompt

You can use the executePrompt method to execute the prompts dynamically in the Inline AI Assist. It accepts prompts as string values, which triggers the promptRequest event and performs the callback actions.

<div id="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onClick()">Execute Prompt</button>
    <div id="editableText" contenteditable="true">
        <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
        <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
    </div>
    <ejs-inlineaiassist id="defaultInlineAssist" #inlineAssistComponent
        [relateTo]="'#summarizeBtn'"
        [responseSettings] = "responseSetting"
        popupWidth="500px"
        (promptRequest)="onPromptRequest($event)">
    </ejs-inlineaiassist>
</div>
import { ViewChild, Component } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';


@Component({
    imports: [InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement | null;
            if (editable) {
                editable.innerHTML = '<p>' + this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1 ].response + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
        } else if (args.command.label === 'Discard') {
            this.inlineAssistComponent.hidePopup();
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect:  this.itemSelect
    }
    
    onClick(): void {
        this.inlineAssistComponent.showPopup();
        // executePrompt method - executes a specific prompt
        this.inlineAssistComponent.executePrompt('What is the current temperature?');
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
        let defaultResponse = 'For real-time prompt processing, connect 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.';

        this.inlineAssistComponent.addResponse(defaultResponse);

        }, 1000);
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-interactive-chat/styles/material.css';

#editableText {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
}

Showing popup

You can use showPopup method to open the Inline AI Assist popup and optionally position it at specified coordinates.

Hiding popup

You can use hidePopup method to close the Inline AI Assist popup.

Below sample demonstrates the usage of showPopup and hidePopup methods in Inline Assist component.

<div id="container" style="height: 350px; width: 650px;">
    <button id="showCommandsBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onShowCommandPopup()">Show Commands</button>
    <button id="hideCommandsBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onHideCommandPopup()">Hide Commands</button>
    <div id="editableText" contenteditable="true">
        <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
        <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
    </div>
    <ejs-inlineaiassist id="defaultInlineAssist" #inlineAssistComponent
        [relateTo]="'#showCommandsBtn'"
        [commandSettings]="commandSettings"
        [responseSettings]="responseSetting"
        (close)="close()"
        (promptRequest)="onPromptRequest($event)">
    </ejs-inlineaiassist>
</div>
import { ViewChild, Component } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs, CommandSettingsModel } from '@syncfusion/ej2-angular-interactive-chat';


@Component({
    imports: [InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public showPopup: boolean = false;

    // Command settings with sample commands
    public commandSettings: CommandSettingsModel = {
        commands: [
            {
                label: 'Summarize',
                prompt: 'Summarize the content'
            },
            {
                label: 'Shorten',
                prompt: 'Shorten the content'
            },
            {
                label: 'Translate',
                prompt: 'Translate the content'
            },
            {
                label: 'Make professional',
                prompt: 'Make the content more professional'
            }
        ]
    };

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement | null;
            if (editable) {
                editable.innerHTML = '<p>' + this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1 ].response + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
            this.showPopup = false;
        } else if (args.command.label === 'Discard') {
            this.inlineAssistComponent.hidePopup();
            this.showPopup = false;
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect:  this.itemSelect
    }

    // showCommandPopup method - displays command popup with commands
    onShowCommandPopup(): void {
        this.inlineAssistComponent.showPopup();
        this.inlineAssistComponent.commandSettings = this.commandSettings;
        this.inlineAssistComponent.dataBind();
        this.showPopup = true;
        // showCommandPopup method - displays the command action popup
        this.inlineAssistComponent.showCommandPopup();
    }

    // hideCommandPopup method - hides the command popup
    onHideCommandPopup(): void {
        this.inlineAssistComponent.hideCommandPopup();
        this.showPopup = false;
    }
    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
        let defaultResponse = 'For real-time prompt processing, connect 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.';

        this.inlineAssistComponent.addResponse(defaultResponse);

        }, 1000);
    };

    public close = () => {
        if (this.showPopup) {
            this.inlineAssistComponent.showPopup();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-interactive-chat/styles/material.css';

#editableText {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
}

Showing command popup

Use showCommandPopup to open the command action popup; it only opens when the Inline AI Assist popup is already opened.

Hiding command popup

You can use hideCommandPopup to close the command action popup in the Inline AI Assist component.

Below sample demonstrates the usage of showCommandPopup and hideCommandPopup methods in Inline Assist component.

<div id="container" style="height: 350px; width: 650px;">
    <button id="showBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onShowPopup()">Show Popup</button>
    <button id="hideBtn" class="e-btn e-primary" style="margin-bottom: 10px;" (click)="onHidePopup()">Hide Popup</button>
    <div id="editableText" contenteditable="true">
        <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to understand context and deliver precise suggestions. Users can seamlessly integrate AI-powered features into their applications.</p>
        <p>With real-time response streaming and customizable prompts, developers can create interactive experiences. The component supports multiple response modes including inline editing and popup-based interactions.</p>
    </div>
    <ejs-inlineaiassist id="defaultInlineAssist" #inlineAssistComponent
        [relateTo]="'#showBtn'"
        [responseSettings]="responseSetting"
        popupWidth="500px"
        (promptRequest)="onPromptRequest($event)">
    </ejs-inlineaiassist>
</div>
import { ViewChild, Component } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';


@Component({
    imports: [InlineAIAssistModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

    public isPopupOpen: boolean = false;

    public itemSelect = (args: ResponseItemSelectEventArgs) => {
        if (args.command.label === 'Accept') {
            const editable = document.getElementById('editableText') as HTMLElement | null;
            if (editable) {
                editable.innerHTML = '<p>' + this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1 ].response + '</p>';
            }
            this.inlineAssistComponent.hidePopup();
            this.isPopupOpen = false;
        } else if (args.command.label === 'Discard') {
            this.inlineAssistComponent.hidePopup();
            this.isPopupOpen = false;
        }
    }

    public responseSetting: ResponseSettingsModel = {
        itemSelect:  this.itemSelect
    }
    
    // showPopup method - displays the component popup
    onShowPopup(): void {
        this.inlineAssistComponent.showPopup();
        this.isPopupOpen = true;
    }

    // hidePopup method - hides the component popup
    onHidePopup(): void {
        if (this.inlineAssistComponent.element.classList.contains('e-popup-open')) {
            this.inlineAssistComponent.hidePopup();
            this.isPopupOpen = false;
        }
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
        let defaultResponse = 'For real-time prompt processing, connect 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.';

        this.inlineAssistComponent.addResponse(defaultResponse);

        }, 1000);
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import 'node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-interactive-chat/styles/material.css';

#editableText {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
}