syncfusion-angular-inline-ai-assist

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

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

Key Properties and Configuration

Property	Purpose	Example
`relateTo`	Position relative to DOM element	`[relateTo]="'#button'"`
`target`	Append location in DOM	`[target]="'#container'"`
`responseMode`	Display mode (Popup/Inline)	`[responseMode]="'Popup'"`
`popupWidth` / `popupHeight`	Popup dimensions	`popupWidth="500px"`
`placeholder`	Prompt textarea placeholder	`[placeholder]="'Ask AI...'"`
`cssClass`	Custom CSS styling	`[cssClass]="'custom'"`
`enableStreaming`	Real-time streaming responses	`[enableStreaming]="true"`
`enablePersistence`	Preserve state across reloads	`[enablePersistence]="true"`
`commandSettings`	Predefined AI commands	`[commandSettings]="cmdSettings"`
`responseSettings`	Response action items	`[responseSettings]="respSettings"`
`inlineToolbarSettings`	Inline toolbar items	`[inlineToolbarSettings]="toolbar"`
`editorTemplate`	Custom prompt input template	`[editorTemplate]="template"`
`responseTemplate`	Custom response display template	`[responseTemplate]="template"`
`speechToTextSettings`	Built-in speech-to-text (Web Speech API)	`[speechToTextSettings]="sttSettings"`
`locale`	Language/localization	`[locale]="'de'"`
`enableRtl`	Right-to-left text direction	`[enableRtl]="true"`

Common Use Cases

Text Summarization: Create a button that triggers content summarization via AI
Grammar & Style: Help users improve writing with grammar and style suggestions
Content Translation: Add quick translation options for multiple languages
Code Generation: Assist users in generating code snippets based on descriptions
Email Composition: Enhance email writing with AI suggestions and rephrasing
Document Enhancement: Improve document quality with AI-powered editing
Accessibility Support: Provide AI assistance for users with accessibility needs
Multilingual Support: Enable global applications with localized AI assistance
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
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