syncfusion-aspnetcore-ai-assistview

Syncfusion ASP.NET Core AI AssistView 控件

概述

Syncfusion AI AssistView 是一个功能全面的组件，可用于在 ASP.NET Core 应用程序中构建 AI 驱动的辅助界面。它支持：

• 可配置的提示词建议和自定义标题
• 带有 Markdown 渲染功能的提示词-响应集合
• 带验证和大小限制的文件附件
• 可完全控制 UI 的自定义视图和模板
• 支持实时交互的事件驱动架构
• 可自定义标题栏和页脚区域的工具栏
• 可自定义提示词和响应的图标

主要功能

• 提示词建议：通过预定义的建议引导用户
• Markdown 支持：使用内置 Markdown 转换器渲染格式化内容
• 自定义模板：自定义横幅、提示词、响应和建议
• 文件附件：允许用户在提示词中附加文件
• 多种视图：支持 Assist 和 Custom 视图类型
• 工具栏自定义：自定义标题栏和页脚工具栏项
• 图标自定义：个性化提示词和响应头像
• 停止响应：使用“停止响应”按钮取消正在进行的 AI 响应
• 标题栏可见性：通过 showHeader 显示或隐藏标题栏
• 有帮助的反馈：使用 PromptModel.isResponseHelpful 标记有帮助的响应
• 事件驱动：提供完整的事件生命周期，实现全面控制
• 方法：动态执行提示词并管理响应
• 重新生成响应：无需重新提交，即可为现有提示词请求其他 AI 响应
• 思考能力：通过思维链块可视化 AI 推理阶段和工作流
• 生成式 UI：在 AI 响应中渲染动态交互式工具和 UI 元素
• 文本转语音：使用可自定义的语音设置，将 AI 响应转换为语音
• 语音转文本：使用设备麦克风将语音转换为文本，以便通过语音输入提示词

导航指南

入门

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置
• TagHelper 注册和配置
• CSS/脚本资源链接
• 基本控件初始化
• 提示词建议和响应配置

配置提示词和响应

📄 阅读： references/assist-view-configuration.md

• 设置提示词文本和占位符
• 初始化提示词-响应集合
• Markdown 响应渲染
• 带标题的提示词建议
• 头像自定义（提示词和响应图标）
• 清除按钮和滚动到底部功能
• 显示或隐藏标题栏（showHeader）
• 将响应标记为有帮助（PromptModel.isResponseHelpful）

外观和样式

📄 阅读： references/appearance-customization.md

• 宽度和高度配置
• CSS 类自定义
• 自定义样式和主题
• 组件容器样式

处理事件

📄 阅读： references/events-handling.md

• 用于初始化的 Created 事件
• 用于处理提示词的 PromptRequest 事件（包含 cancel、attachedFiles、promptSuggestions）
• 用于文本变更的 PromptChanged 事件（包含 value、previousValue）
• 用于取消正在进行的响应的 StopRespondingClick 事件
• 附件事件（上传、成功、失败、移除、点击）

使用方法和 API

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

• 用于添加字符串和对象响应的 addPromptResponse() 方法
• 用于动态执行提示词的 executePrompt() 方法
• 公共方法签名和使用模式

模板和自定义视图

📄 阅读： references/templates-and-views.md

• 欢迎消息的横幅模板
• 用于自定义提示词渲染的提示词条目模板
• 用于自定义响应的响应条目模板
• 建议条目模板
• 用于自定义操作的页脚模板
• 自定义视图类型和活动视图配置

工具栏配置

📄 阅读： references/toolbar-and-items.md

• 页脚工具栏项及其位置
• 带图标的页眉工具栏配置
• 项目类型（按钮、分隔符、输入框）
• 项目对齐方式、可见性和禁用状态
• 工具提示文本和 CSS 类
• 用于提示词和响应的内置工具栏项
• 带模板和事件的自定义工具栏项
• ToolbarItemClickedEventArgs — item、dataIndex、cancel、event、name
• 用于提示词和响应工具栏项的 itemClicked 事件
• 通过替代响应导航重新生成响应

文件附件

📄 阅读： references/file-attachments.md

• 启用文件附件
• 设置保存和移除 URL
• 文件类型限制（allowedFileTypes）
• 最大文件大小配置
• 最大附件数量限制
• 自定义附件模板（attachmentTemplate）
• 在提示词中预加载附件（PromptModel.attachedFiles）

高级响应功能

思考能力

📄 阅读： references/chain-of-thoughts.md

• 可视化 AI 推理阶段（思考块、阶段、状态更新）
• 使用 blockType、title、content 和 collapsed 状态配置思考块
• 添加带完成状态的阶段（completed、inprogress、failed）
• 阶段中的内联上下文项，带可点击徽章
• 用于自定义上下文操作的 editableContextClicked 事件
• 块模板和项目模板自定义

生成式 UI

📄 阅读： references/generative-ui.md

• 使用 registerToolUI 方法注册自定义工具
• 用于动态 UI 渲染的工具模板和处理程序
• 通过 blocks 属性向提示词响应添加工具
• 配置 AI 服务系统提示词以生成响应
• 使用 toolName 和 props 创建交互式组件的工具块

文本转语音

📄 阅读： references/text-to-speech.md

• 使用 e-assist-audio 图标启用内置文本转语音功能
• 将 AI 响应转换为语音（Web Speech API）
• 使用 e-aiassistview-textToSpeechSettings 标签帮助程序配置语音设置
• 语音自定义属性（language、speechPitch、speechRate、volume、voice）

语音转文本

📄 阅读： references/speech-to-text.md

• 为语音输入启用内置语音转文本功能
• 使用 Web Speech API 将语音转换为文本
• 使用 e-aiassistview-speechToTextSettings 标签帮助程序配置语音识别
• 语音识别属性（language、buttonSettings、tooltipSettings、allowInterimResults）
• 处理语音事件（onStart、onStop、transcriptChanged、onError）
• 支持中间结果的实时转录

快速开始

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" promptRequest="onPromptRequest" created="onCreated"></ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView control 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.';
            assistObj.addPromptResponse(defaultResponse);
        }, 2000);
    }
</script>

常见模式

模式 1：添加提示词建议

@using Syncfusion.EJ2.InteractiveChat;

@{
    var suggestions = new string[] { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        promptSuggestions="@suggestions" 
        promptRequest="onPromptRequest" 
        created="onCreated">
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            assistObj.addPromptResponse('Response for: ' + args.prompt);
        }, 2000);
    }
</script>

模式 2：Markdown 响应渲染

@using Syncfusion.EJ2.InteractiveChat;
@using System.Text.Json;

@{
   var markdownData = new[]
    {
        new {
            prompt = "What is Markdown?",
            response = "# Markdown Guide\n\nMarkdown is a lightweight markup language:\n\n- **Headers:** Use `#`, `##`, `###`\n- **Bold:** `**text**` for bold\n- **Lists:** Use `-` for bullet points",
            suggestions = new string[] {"How do I use bold?"}
        }
    };
    var promptsJson = JsonSerializer.Serialize(markdownData);
}

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        prompts="@markdownData" 
        promptRequest="onPromptRequest" 
        created="onCreated">
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    var prompts = @Html.Raw(promptsJson);
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            var foundPrompt = prompts.find(prompt => prompt.prompt == args.prompt);
            if (foundPrompt) {
                assistObj.addPromptResponse(foundPrompt.response);
            }
        }, 2000);
    }
</script>

模式 3：文件附件

@using Syncfusion.EJ2.InteractiveChat;

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <ejs-aiassistview id="aiAssistView" 
        enableAttachments="true" 
        promptRequest="onPromptRequest" 
        created="onCreated">
        <e-aiassistview-attachmentsettings 
            [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save") 
            [email protected]("https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove")>
        </e-aiassistview-attachmentsettings>
    </ejs-aiassistview>
</div>

<script>
    var assistObj;
    function onCreated() {
        assistObj = this;
    }
    function onPromptRequest(args) {
        setTimeout(() => {
            assistObj.addPromptResponse('Processing your prompt with attachments');
        }, 2000);
    }
</script>