Syncfusion AI Assistant

How can I help you?

Commands configuration in EJ2 TypeScript Inline AI Assist control

2 Apr 202612 minutes to read

You can render and use the command action popup by using the commands property in the commandSettings property. This property helps to supply commands, control popup dimensions, and customize behavior.

Configure command items

You can use the commandSettings property to add commands that populate the command popup. Each command item can perform a quick request based on the configured prompt.

Each command item object can include the following properties:

Property Type Default Description
label string ’’ Specifies the display label of the command item.
prompt string ’’ Specifies the prompt text executed when the item is selected.
iconCss string ’’ Specifies the CSS class for the item’s icon.
disabled boolean false Specifies whether the command is disabled and unselectable.
groupBy string ’’ Specifies the group category for organizing related commands.
id string ’’ Specifies a unique identifier for the command item.
tooltip string ’’ Specifies the tooltip text displayed on hover.

Command interactions

The itemSelect event is triggered when a command item is selected from the command popup in the Inline AI Assist control. This event allows developers to handle custom actions based on user selections.

Customization of AI commands popup

Setting popup width

Configure the popup width using the popupWidth property in the commandSettings. This property accepts CSS values such as ‘300px’, ‘50%’, or numeric values in pixels.

Setting popup height

Configure the popup height using the popupHeight property in the commandSettings. Use fixed height values to enable vertical scrolling when displaying large command lists.

Code Example

Below sample demonstrates the usage of command settings in Inline Assist control

import { InlineAIAssist, CommandItemSelectEventArgs } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initializes the Inline AI Assist control
let inlineAIAssist: InlineAIAssist = new InlineAIAssist({
    relateTo: '#summarizeBtn',
    promptRequest: () => {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the Inline AI Assist component 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.';
            inlineAIAssist.addResponse(defaultResponse);
        }, 1000);
    },
    commandSettings: {
        popupHeight: '200px',
        popupWidth: '250px',
        commands: [
            {
                label: 'Summarize',
                prompt: 'Summarize the content',
                groupBy: 'Improve content',
                iconCss: 'e-icons e-collapse-2',
                tooltip: 'Summarize'
            },
            {
                label: 'Shorten',
                prompt: 'Shorten the content',
                groupBy: 'Improve content',
                iconCss: 'e-icons e-shorten',
                tooltip: 'Shorten',
                disabled: true
            },
            {
                label: 'Translate',
                prompt: 'Translate the content',
                groupBy: 'Edit content',
                iconCss: 'e-icons e-translate'
            },
            {
                label: 'Make professional',
                prompt: 'Make the content more professional',
                groupBy: 'Edit content',
                iconCss: 'e-icons e-elaborate'
            }
        ],
        itemSelect: (args: CommandItemSelectEventArgs): void => {
            inlineAIAssist.addResponse('Processing "' + args.command.label + '"...');
            setTimeout(() => {
                inlineAIAssist.addResponse('Result for "' + args.command.label + '": This is a sample transformed content returned by the Inline AI Assist.');
            }, 1000);
        }
    },
    responseSettings: {
        itemSelect: (args: any): void => {
            if (args.command && args.command.label === 'Accept') {
                const editable = document.getElementById('editableText') as HTMLElement | null;
                const last = inlineAIAssist.prompts && inlineAIAssist.prompts[inlineAIAssist.prompts.length - 1];
                if (editable && last) {
                    editable.innerHTML = '<p>' + (last.response || '') + '</p>';
                }
                inlineAIAssist.hidePopup();
            } else if (args.command && args.command.label === 'Discard') {
                inlineAIAssist.hidePopup();
            }
        }
    }
});

// Render initialized Inline AI Assist.
inlineAIAssist.appendTo('#command-settings');
const summarizeBtn: HTMLElement | null = document.querySelector('#summarizeBtn');
if (summarizeBtn) {
    summarizeBtn.addEventListener('click', () => {
        inlineAIAssist.showPopup();
    });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Inline AI Assist</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript Inline AI Assist Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-interactive-chat/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #editableText {
            width: 100%;
            min-height: 120px;
            max-height: 300px;
            overflow-y: auto;
            font-size: 16px;
            padding: 12px;
            border-radius: 4px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="width: 650px;">
        <button id="summarizeBtn" class="e-btn e-primary" style="margin-bottom: 10px;">Content Summarize</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>
        <div id="command-settings"></div>
    </div>
</body>
</html>

See Also