syncfusion-aspnetcore-inline-ai-assist

Syncfusion ASP.NET Core Inline AI Assist Control

Overview

The Inline AI Assist is a Syncfusion ASP.NET Core control that provides intelligent text processing capabilities with:

• Real-time prompt processing connected to AI services (OpenAI, Azure Cognitive Services)
• Multiple response modes: Inline (in-place updates) or Popup (floating dialog)
• Command popups with built-in and custom command items
• Response action items for user feedback and content acceptance
• Event lifecycle: created, promptRequest, open, close
• Public methods: addResponse, executePrompt, showPopup, hidePopup, showCommandPopup, hideCommandPopup
• Template support: Custom editor templates and response templates
• Globalization: Localization (L10n) and RTL support

Documentation Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Prerequisites and system requirements
• ASP.NET Core project setup with Razor pages
• NuGet package installation (Syncfusion.EJ2.AspNet.Core)
• Tag helper configuration in _ViewImports.cshtml
• Script and stylesheet resources setup
• Basic control rendering and first run

Positioning and Response Modes

📄 Read: references/positioning-and-modes.md

• Configure relateTo property (position relative to elements)
• Configure target property (where control appends)
• ResponseMode property: Inline vs Popup modes
• Dynamic mode switching
• Complete positioning examples with use cases

Command Configuration

📄 Read: references/command-configuration.md

• CommandSettings and command items
• Command properties (id, label, prompt, iconCss, disabled, groupBy, tooltip)
• PopupWidth and PopupHeight configuration
• Command grouping and organization
• ItemSelect event handling
• Advanced command scenarios

Events and Handlers

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

• created event (control rendering completion)
• promptRequest event (with async handling)
• open event (popup opened)
• close event (popup closed)
• Event flow and lifecycle
• Best practices for event handlers

Public Methods and APIs

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

• addResponse() - Add response programmatically
• executePrompt() - Execute prompt dynamically
• showPopup() - Open popup with optional positioning
• hidePopup() - Close popup
• showCommandPopup() - Show command menu
• hideCommandPopup() - Hide command menu

Inline Assist Features

📄 Read: references/inline-assist-features.md

• Prompt property configuration
• Prompts collection (history management)
• Placeholder text customization
• Z-index property
• Popup width and height configuration
• CssClass for custom styling
• Managing prompt-response collections

Response Settings and Templates

📄 Read: references/response-settings-templates.md

• ResponseSettings configuration
• Built-in response items (accept/reject)
• Custom response items and grouping
• EditorTemplate for footer customization
• ResponseTemplate for response items
• Template syntax and context variables
• ItemSelect event handling

Advanced Features

📄 Read: references/advanced-features.md

• Public methods (addResponse, executePrompt, showPopup, hidePopup, showCommandPopup, hideCommandPopup)
• Inline toolbar settings and positioning
• Toolbar items (type, text, iconCss, alignment, tooltip)
• TabIndex for keyboard navigation
• Globalization: L10n and localization
• RTL (enableRtl property)
• Accessibility features

Quick Start Example

@using Syncfusion.EJ2.InteractiveChat;

<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>

<div class="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" onclick="onSummarizeClick()">Summarize</button>
    <div id="editableText" contenteditable="true">
        <p>Add your content here for AI processing...</p>
    </div>
    
    <ejs-inlineaiassist id="defaultInlineAssist" 
        relateTo="#summarizeBtn" 
        created="onCreated" 
        promptRequest="onPromptRequest">
        <e-inlineaiassist-responsesettings itemSelect="onItemSelect"></e-inlineaiassist-responsesettings>
    </ejs-inlineaiassist>
</div>

<script>
    var inlineAssist;
    
    function onCreated() {
        inlineAssist = this;
    }
    
    function onPromptRequest(args) {
        setTimeout(function () {
            var response = 'Connect to your AI service for real processing...';
            inlineAssist.addResponse(response);
        }, 1000);
    }
    
    function onItemSelect(args) {
        if (args.command.label === 'Accept') {
            document.getElementById('editableText').innerHTML = 
                '<p>' + inlineAssist.prompts[inlineAssist.prompts.length - 1].response + '</p>';
            inlineAssist.hidePopup();
        }
    }
    
    function onSummarizeClick() {
        if (inlineAssist) {
            inlineAssist.showPopup();
        }
    }
</script>

Common Patterns

1. Setup Inline vs Popup Modes

<!-- Popup mode (default) -->
<ejs-inlineaiassist id="assist1" responseMode="Popup" relateTo="#btn"></ejs-inlineaiassist>

<!-- Inline mode (updates content in-place) -->
<ejs-inlineaiassist id="assist2" responseMode="Inline" relateTo="#btn"></ejs-inlineaiassist>

2. Add Command Popups

<ejs-inlineaiassist id="assist3" relateTo="#btn">
    <e-inlineaiassist-commandsettings 
        commands="commandsData" 
        popupWidth="250px" 
        popupHeight="200px"
        itemSelect="onCommandSelect">
    </e-inlineaiassist-commandsettings>
</ejs-inlineaiassist>

3. Handle Events

<ejs-inlineaiassist id="assist4" 
    created="onCreated"
    promptRequest="onPromptRequest" 
    open="onOpen" 
    close="onClose">
</ejs-inlineaiassist>

4. Use Public Methods

// Show popup at current position
inlineAssist.showPopup();

// Execute prompt dynamically
inlineAssist.executePrompt('Your prompt text');

// Add response programmatically
inlineAssist.addResponse('Response text');

// Hide popup
inlineAssist.hidePopup();

Key Props

Property	Purpose	Example
relateTo	Position control relative to DOM element	relateTo="#btn" or relateTo=".container"
target	Specify where control appends in DOM	target="#container"
responseMode	Display mode for responses	responseMode="Popup" or "Inline"
prompt	Default prompt text	prompt="What are benefits?"
popupWidth	Control width	popupWidth="400px"
popupHeight	Control height	popupHeight="auto"
placeholder	Textarea placeholder text	placeholder="Type prompt here..."
zIndex	Stacking context	zIndex="4000"
enableRtl	Right-to-left layout	enableRtl="true"
locale	Localization language	locale="de"
cssClass	Custom CSS class	cssClass="custom-class"

Common Use Cases

1. Content Summarization Tool

   • Place button near text editor
   • Use Popup mode for full interface
   • Add Accept/Reject response items
   • Connect promptRequest to summarization API

2. Inline Text Suggestions

   • Use Inline mode for in-place updates
   • Minimal UI footprint
   • Quick acceptance workflow
   • Stream responses for real-time feedback

3. Multi-Command Workflow

   • Show command popup for quick actions
   • Group commands by category (Improve, Edit)
   • Handle each command's promptRequest differently
   • Dynamic response handling per command

4. Accessibility-Focused Implementation

   • Enable RTL for Arabic/Hebrew content
   • Use localization for multiple languages
   • Configure tab navigation with tabIndex
   • Use semantic templates

---