syncfusion-aspnetcore-inline-ai-assist

Syncfusion ASP.NET Core 内联 AI 助手控件

概述

Inline AI Assist 是一款 Syncfusion ASP.NET Core 控件，提供智能文本处理功能，包括：

• 实时提示词处理：连接 AI 服务（OpenAI、Azure Cognitive Services）
• 多种响应模式：内联（就地更新）或弹出窗口（浮动对话框）
• 命令弹出窗口：内置和自定义命令项
• 响应操作项：供用户反馈和接受内容
• 事件生命周期：created、promptRequest、open、close
• 公共方法：addResponse、executePrompt、showPopup、hidePopup、showCommandPopup、hideCommandPopup
• 模板支持：自定义编辑器模板和响应模板
• 全球化：本地化（L10n）和 RTL 支持

文档导航指南

入门

📄 阅读： references/getting-started.md

• 先决条件和系统要求
• 使用 Razor 页面设置 ASP.NET Core 项目
• 安装 NuGet 包（Syncfusion.EJ2.AspNet.Core）
• 在 _ViewImports.cshtml 中配置标记帮助程序
• 配置脚本和样式表资源
• 基本控件渲染和首次运行

定位和响应模式

📄 阅读： references/positioning-and-modes.md

• 配置 relateTo 属性（相对于元素定位）
• 配置 target 属性（控件追加到的位置）
• ResponseMode 属性：Inline 与 Popup 模式
• 动态切换模式
• 完整的定位示例及其使用场景

命令配置

📄 阅读： references/command-configuration.md

• CommandSettings 和命令项
• 命令属性（id、label、prompt、iconCss、disabled、groupBy、tooltip）
• 配置 PopupWidth 和 PopupHeight
• 命令分组和整理
• 处理 ItemSelect 事件
• 高级命令场景

事件和处理程序

📄 阅读： references/events-and-handlers.md

• created 事件（控件渲染完成）
• promptRequest 事件（支持异步处理）
• open 事件（弹出窗口已打开）
• close 事件（弹出窗口已关闭）
• 事件流程和生命周期
• 事件处理程序的最佳实践

公共方法和 API

📄 阅读： references/methods-and-apis.md

• addResponse() - 以编程方式添加响应
• executePrompt() - 动态执行提示词
• showPopup() - 打开弹出窗口，可选设置位置
• hidePopup() - 关闭弹出窗口
• showCommandPopup() - 显示命令菜单
• hideCommandPopup() - 隐藏命令菜单

Inline Assist 功能

📄 阅读： references/inline-assist-features.md

• 配置 Prompt 属性
• Prompts 集合（历史记录管理）
• 自定义占位符文本
• Z-index 属性
• 配置弹出窗口的宽度和高度
• 使用 CssClass 自定义样式
• 管理提示词-响应集合

响应设置和模板

📄 阅读： references/response-settings-templates.md

• 配置 ResponseSettings
• 内置响应项（接受/拒绝）
• 自定义响应项和分组
• 用于自定义页脚的 EditorTemplate
• 用于响应项的 ResponseTemplate
• 模板语法和上下文变量
• 处理 ItemSelect 事件

高级功能

📄 阅读： references/advanced-features.md

• 公共方法（addResponse、executePrompt、showPopup、hidePopup、showCommandPopup、hideCommandPopup）
• 内联工具栏设置和定位
• 工具栏项（type、text、iconCss、alignment、tooltip）
• 用于键盘导航的 TabIndex
• 全球化：L10n 和本地化
• RTL（enableRtl 属性）
• 无障碍功能

快速入门示例

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

常见模式

1. 设置内联与弹出窗口模式

<ejs-inlineaiassist id="assist1" responseMode="Popup" relateTo="#btn"></ejs-inlineaiassist>


<ejs-inlineaiassist id="assist2" responseMode="Inline" relateTo="#btn"></ejs-inlineaiassist>

2. 添加命令弹出窗口

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

3. 处理事件

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

4. 使用公共方法

// 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();

关键属性

属性	用途	示例
relateTo	控制相对于 DOM 元素的位置	relateTo="#btn" 或 relateTo=".container"
target	指定控件在 DOM 中的挂载位置	target="#container"
responseMode	响应的显示模式	responseMode="Popup" 或 "Inline"
prompt	默认提示词文本	prompt="What are benefits?"
popupWidth	控制宽度	popupWidth="400px"
popupHeight	控制高度	popupHeight="auto"
placeholder	文本区域的占位文本	placeholder="Type prompt here..."
zIndex	堆叠上下文	zIndex="4000"
enableRtl	从右向左的布局	enableRtl="true"
locale	本地化语言	locale="de"
cssClass	自定义 CSS 类	cssClass="custom-class"

常见用例

1. 内容摘要工具

   • 将按钮放在文本编辑器附近
   • 使用 Popup 模式显示完整界面
   • 添加接受/拒绝响应项
   • 将 promptRequest 连接到摘要 API

2. 内联文本建议

   • 使用 Inline 模式进行原位更新
   • 尽量减少 UI 占用
   • 快速接受工作流
   • 流式传输响应，以便实时反馈

3. 多命令工作流

   • 显示命令弹出窗口，以便快速执行操作
   • 按类别对命令分组（改进、编辑）
   • 针对每条命令分别处理其 promptRequest
   • 根据每条命令动态处理响应

4. 以无障碍访问为重点的实现

   • 为阿拉伯语/希伯来语内容启用 RTL
   • 使用本地化支持多种语言
   • 使用 tabIndex 配置 Tab 导航
   • 使用语义化模板

---