syncfusion-aspnetcore-ai-assistview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion ASP.NET Core AI AssistView Control

Syncfusion ASP.NET Core AI AssistView 控件

Overview

概述

The Syncfusion AI AssistView is a comprehensive component for building AI-powered assistance interfaces in ASP.NET Core applications. It provides support for:

Configurable prompt suggestions with custom headers
Prompt-response collections with markdown rendering
File attachments with validation and size restrictions
Custom views and templates for complete UI control
Event-driven architecture for real-time interaction
Toolbar customization for both header and footer areas
Icon customization for prompts and responses

Syncfusion AI AssistView 是一个用于在ASP.NET Core应用中构建AI驱动辅助界面的综合性组件。它支持以下功能：

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

Key Features

核心功能

Prompt Suggestions: Guide users with predefined suggestions
Markdown Support: Render formatted content with built-in markdown converter
Custom Templates: Customize banners, prompts, responses, and suggestions
File Attachments: Enable users to attach files with the prompt
Multiple Views: Support for Assist and Custom view types
Toolbar Customization: Customize header and footer toolbar items
Icon Customization: Personalize prompt and response avatars
Stop Responding: Cancel in-progress AI responses with the stop responding button
Header Visibility: Show or hide the header bar via
```
showHeader
```
Helpful Feedback: Mark responses as helpful using
```
PromptModel.isResponseHelpful
```
Event Driven: Full event lifecycle for complete control
Methods: Dynamic prompt execution and response management

提示建议：通过预定义建议引导用户
Markdown支持：借助内置Markdown转换器渲染格式化内容
自定义模板：自定义横幅、提示、响应和建议
文件附件：允许用户随提示附加文件
多视图：支持辅助视图和自定义视图类型
工具栏自定义：自定义页眉和页脚工具栏项
图标自定义：个性化提示和响应头像
停止响应：通过停止响应按钮取消进行中的AI响应
页眉可见性：通过
```
showHeader
```
显示或隐藏页眉栏
有用反馈：使用
```
PromptModel.isResponseHelpful
```
标记响应是否有用
事件驱动：完整的事件生命周期，提供全面控制
方法：动态提示执行和响应管理

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and NuGet package setup
TagHelper registration and configuration
CSS/script resource linking
Basic control initialization
Prompt suggestions and responses configuration

📄 阅读： references/getting-started.md

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

Configuring Prompts and Responses

配置提示与响应

📄 Read: references/assist-view-configuration.md

Setting prompt text and placeholders
Prompt-response collection initialization
Markdown response rendering
Prompt suggestions with headers
Avatar customization (prompt and response icons)
Clear button and scroll-to-bottom features
Show or hide the header bar (
```
showHeader
```
)
Marking a response as helpful (
```
PromptModel.isResponseHelpful
```
)

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

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

Appearance and Styling

外观与样式

📄 Read: references/appearance-customization.md

Width and height configuration
CSS class customization
Custom styling and theming
Component container styling

📄 阅读： references/appearance-customization.md

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

Handling Events

事件处理

📄 Read: references/events-handling.md

Created event for initialization
PromptRequest event for handling prompts (with
```
cancel
```
,
```
attachedFiles
```
,
```
promptSuggestions
```
)
PromptChanged event for text changes (with
```
value
```
,
```
previousValue
```
)
StopRespondingClick event for cancelling in-progress responses
Attachment events (upload, success, failure, removed, click)

📄 阅读： references/events-handling.md

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

Using Methods and APIs

使用方法与API

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

addPromptResponse() method for string and object responses
executePrompt() method for dynamic prompt execution
Public method signatures and usage patterns

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

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

Templates and Custom Views

模板与自定义视图

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

Banner templates for welcome messages
Prompt item templates for custom prompt rendering
Response item templates for response customization
Suggestion item templates
Footer templates for custom actions
Custom view types and active view configuration

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

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

Toolbar Configuration

工具栏配置

📄 Read: references/toolbar-and-items.md

Footer toolbar items and positioning
Header toolbar configuration with icons
Item types (Button, Separator, Input)
Item alignment, visibility, and disabled states
Tooltip text and CSS classes
Built-in toolbar items for prompts and responses
Custom toolbar items with templates and events
```
ToolbarItemClickedEventArgs
```
— item, dataIndex, cancel, event, name
```
itemClicked
```
event for prompt and response toolbar items

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

页脚工具栏项和定位
带图标的页眉工具栏配置
项类型（按钮、分隔符、输入框）
项对齐方式、可见性和禁用状态
提示文本和CSS类
提示和响应的内置工具栏项
带模板和事件的自定义工具栏项
```
ToolbarItemClickedEventArgs
```
— item、dataIndex、cancel、event、name
提示和响应工具栏项的
```
itemClicked
```
事件

File Attachments

文件附件

📄 Read: references/file-attachments.md

Enabling file attachments
Setting save and remove URLs
File type restrictions (
```
allowedFileTypes
```
)
Maximum file size configuration
Maximum attachment count limits
Pre-loading attached files in prompts (
```
PromptModel.attachedFiles
```
)

📄 阅读： references/file-attachments.md

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

Quick Start

快速开始

razor

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

razor

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

Common Patterns

常见模式

Pattern 1: Adding Prompt Suggestions

模式1：添加提示建议

razor

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

razor

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

Pattern 2: Markdown Response Rendering

模式2：Markdown响应渲染

razor

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

razor

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

Pattern 3: File Attachments

模式3：文件附件

razor

@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 
            saveUrl=@Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save") 
            removeUrl=@Url.Content("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>

razor

@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 
            saveUrl=@Url.Content("https://services.syncfusion.com/aspnet/production/api/FileUploader/Save") 
            removeUrl=@Url.Content("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>