Syncfusion Angular Inline AI Assist Component

Component Overview

The Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity. It leverages advanced natural language processing to enable AI-powered text suggestions, content generation, and editing features directly within Angular applications.

Key Capabilities:

• Response Modes - Popup (floating) or Inline (in-place) response display with configurable dimensions
• Command System - Predefined AI operations with icons, grouping, and custom command items
• Response Actions - Custom response toolbar items for accept/reject workflows
• Template System - Flexible editor and response templates for custom layouts
• Events & Interactions - Comprehensive events for lifecycle (created, open, close) and user interactions
• Speech-to-Text - Built-in microphone button powered by the Web Speech API with configurable language, interim results, button/tooltip settings, and four lifecycle events (onStart, onStop, transcriptChanged, onError)
• Toolbar Configuration - Inline toolbar with custom items, positioning, and alignment
• Methods - Programmatically add prompts, update responses, open/close popups, and control behavior
• Globalization - Multi-language support with RTL capabilities and locale-based formatting
• Customizable UI - CSS classes, z-index control, popup dimensions, and theme integration

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup
• Angular environment configuration
• Basic component implementation
• CSS imports and theme setup
• Initial configuration with relateTo and target properties

Core Configuration

📄 Read: references/core-configuration.md

• Prompt text and placeholder configuration
• Prompt/response collection management
• Response display modes (Popup vs Inline)
• Popup dimensions (width, height, z-index)
• CSS customization and styling

Commands and Responses

📄 Read: references/commands-and-responses.md

• Command settings and command items
• Adding preset AI operations with grouping
• Response settings and response items
• Built-in accept/reject actions
• Custom response toolbar items and event handling

Templates and Toolbars

📄 Read: references/templates-and-toolbars.md

• Editor template customization
• Response template layout
• Inline toolbar configuration and items
• Toolbar positioning, alignment, and styling
• Tab key navigation in toolbars

Events and Methods

📄 Read: references/events-and-methods.md

• Lifecycle events (created, open, close)
• Prompt request event handling
• Component methods (addResponse, executePrompt, showPopup, hidePopup)
• Event arguments and callback patterns

Speech to Text

📄 Read: references/speech-to-text.md

• Enabling the built-in microphone button with speechToTextSettings.enable
• Configuring the recognition language with lang (BCP-47 codes like en-US, es-ES, fr-FR)
• Customizing the microphone button via buttonSettings (content, stopContent, iconCss, stopIconCss)
• Showing live transcription with allowInterimResults
• Customizing the microphone tooltip with tooltipSettings
• Reacting to recognition lifecycle with onStart, onStop, transcriptChanged, and onError
• Browser compatibility notes for the Web Speech API

Localization and Styling

📄 Read: references/localization-and-styling.md

• Localization and multi-language support
• Right-to-left (RTL) text direction
• Custom CSS class styling
• Theme integration
• Text content customization

Quick Start Example

import { Component, ViewChild } from '@angular/core';
import { InlineAIAssistModule, InlineAIAssistComponent, InlinePromptRequestEventArgs, ResponseSettingsModel, ResponseItemSelectEventArgs } from '@syncfusion/ej2-angular-interactive-chat';

@Component({
    imports: [InlineAIAssistModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div id="container" style="height: 350px; width: 650px;">
            <button id="summarizeBtn" class="e-btn e-primary" (click)="onClick()">Content Summarize</button>
            <div id="editableText" contenteditable="true">
                <p>Inline AI Assist component provides intelligent text processing capabilities that enhance user productivity.</p>
            </div>
            <ejs-inlineaiassist id="inlineAssist" #inlineAssistComponent
                [relateTo]="'#summarizeBtn'"
                [responseSettings]="responseSetting"
                popupWidth="500px"
                (promptRequest)="onPromptRequest($event)">
            </ejs-inlineaiassist>
        </div>
    `,
    styles: [`#editableText { width: 100%; min-height: 120px; padding: 12px; border: 1px solid; }`]
})
export class AppComponent {
    @ViewChild('inlineAssistComponent')
    public inlineAssistComponent!: InlineAIAssistComponent;

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

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

    onClick(): void {
        this.inlineAssistComponent.showPopup();
    }

    public onPromptRequest = (args: InlinePromptRequestEventArgs) => {
        setTimeout(() => {
            let response = 'Connect this component to OpenAI or Azure AI services for real-time prompt processing.';
            this.inlineAssistComponent.addResponse(response);
        }, 1000);
    };
}

Common Patterns

Pattern 1: Response Handling with Item Selection

// Handle accept/reject responses
public itemSelect = (args: ResponseItemSelectEventArgs) => {
    if (args.command.label === 'Accept') {
        // Apply the AI response to your content
        const content = this.inlineAssistComponent.prompts[this.inlineAssistComponent.prompts.length - 1].response;
        this.applyResponse(content);
        this.inlineAssistComponent.hidePopup();
    } else if (args.command.label === 'Discard') {
        this.inlineAssistComponent.hidePopup();
    }
}

Pattern 2: Executing Predefined Prompts

// Execute a specific prompt with custom command
public executeCommand(prompt: string) => {
    this.inlineAssistComponent.showPopup();
    this.inlineAssistComponent.executePrompt(prompt);
}

// Example usage: Summarize, Translate, or Make Professional
this.executeCommand('Summarize the content');

Pattern 3: Command Groups for Organization

// Organize commands into logical groups
public commandSetting: CommandSettingsModel = {
    commands: [
        { label: 'Summarize', prompt: 'Summarize...', groupBy: 'Improve content' },
        { label: 'Shorten', prompt: 'Shorten...', groupBy: 'Improve content' },
        { label: 'Translate', prompt: 'Translate...', groupBy: 'Edit content' },
    ]
}

Pattern 4: Inline vs Popup Modes

// Toggle between response display modes
public responseMode: string = 'Popup'; // or 'Inline'

// Use Inline for seamless in-place editing
// Use Popup for review-based workflows

Pattern 5: Voice-Driven Prompts with Speech-to-Text

1. Enable the microphone button by setting speechToTextSettings = { enable: true }
2. Set lang to a BCP-47 code ('en-US', 'es-ES', 'fr-FR') for the target audience
3. Set allowInterimResults: true to stream partial transcripts while the user speaks
4. Customize the button via buttonSettings (text + icons for idle/recording) and the tooltip via tooltipSettings
5. Hook onStart / onStop to drive a recording indicator, and transcriptChanged to display a live transcript
6. Always handle onError for permission-denied, no-microphone, and unsupported-browser scenarios

Key Properties and Configuration

Common Use Cases

1. Text Summarization: Create a button that triggers content summarization via AI
2. Grammar & Style: Help users improve writing with grammar and style suggestions
3. Content Translation: Add quick translation options for multiple languages
4. Code Generation: Assist users in generating code snippets based on descriptions
5. Email Composition: Enhance email writing with AI suggestions and rephrasing
6. Document Enhancement: Improve document quality with AI-powered editing
7. Accessibility Support: Provide AI assistance for users with accessibility needs
8. Multilingual Support: Enable global applications with localized AI assistance
9. Voice-Driven Prompts: Add the built-in speechToTextSettings microphone button so users can dictate prompts via the Web Speech API, with configurable language, button/tooltip, and onStart / onStop / transcriptChanged / onError events
10. Live Transcription UI: Combine allowInterimResults: true with the transcriptChanged event to surface interim transcripts in real time before the final transcript is committed to the prompt editor