syncfusion-blazor-ai-assistview

Syncfusion Blazor AI AssistView

使用 Syncfusion Blazor AI AssistView 组件构建对话式 AI 界面。本技能提供完整指南，帮助你在 Blazor Server、WebAssembly 和 Web App 项目中创建交互式聊天应用、AI 助手界面和提示词-响应系统。

组件概述

SfAIAssistView 组件是一种专用 UI 控件，用于构建 AI 驱动的聊天应用。它管理提示词-响应对话的呈现和交互模式，并内置以下支持：

• 提示词管理： 输入文本、建议、占位文本
• 响应处理： 异步处理、Markdown 渲染、流式传输支持
• 自定义： 头像图标、样式、主题集成
• UX 功能： 滚动到底部指示器、对话历史记录
• 事件集成： 用于 AI 服务回调的 PromptRequested 事件

导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置
• 基本组件结构和初始化
• PromptRequested 事件处理程序实现
• 包含异步响应的最小可运行示例

提示词配置

📄 阅读： references/prompt-configuration.md

• 设置初始提示词文本
• 配置提示词占位文本
• 管理提示词-响应集合
• 异步处理提示词事件

提示词建议

📄 阅读： references/prompt-suggestions.md

• 添加建议列表，为用户提供指引
• 自定义建议标题
• 构建建议-响应映射
• 使用建议的用户交互模式

自定义与图标

📄 阅读： references/customization-styling.md

• 使用 PromptIconCss 自定义用户头像
• 使用 ResponseIconCss 自定义 AI 头像
• 应用特定主题的图标
• CSS 类和图标集成

高级功能

📄 阅读： references/advanced-features.md

• 在 AI 响应中渲染 Markdown
• 滚动到底部导航（EnableScrollToBottom）
• 使用 Prompts 集合管理对话历史记录
• 常见模式和用例

AI 服务集成

📄 阅读： references/ai-service-integration.md

• OpenAI API 集成（非流式和流式）
• Azure OpenAI 部署
• 本地托管 Ollama LLM
• 自定义后端模式
• 错误处理和速率限制策略

附件

📄 阅读： references/attachments.md

• 启用文件附件
• 配置附件设置（文件类型、大小限制）
• 处理附件事件（上传、单击、移除）
• AttachmentRemoving 事件（在移除文件前触发；可取消）
• 服务端上传实现
• 安全与验证最佳实践

多视图支持

📄 阅读： references/multi-view-support.md

• 创建多个专用 AI 视图
• 管理和切换活动视图
• 特定视图的配置
• 每个视图分别保存对话历史记录
• 基于角色和工作区的视图

工具栏

📄 阅读： references/toolbars.md

• 自定义提示词工具栏
• 响应工具栏操作（复制、点赞、重新生成）
• 使用导航和预加载重新生成响应
• 配置页脚工具栏
• 页脚工具栏项目对齐（ItemAlign.Left / ItemAlign.Right）
• 自定义工具栏项目和模板
• 处理工具栏事件

模板

📄 阅读： references/templates.md

• 用于初始／空状态的 BannerTemplate
• 用于自定义提示词渲染的 PromptItemTemplate
• 用于自定义响应渲染的 ResponseItemTemplate
• 用于自定义响应生成时加载指示器的 ResponseAnimationTemplate
• 用于自定义建议的 PromptSuggestionItemTemplate
• FooterTemplate 和 ViewTemplate 自定义
• 模板上下文和可用属性

语音识别与合成

📄 阅读： references/speech.md

• 用于文本转语音（TTS）配置和说话人设置的 TextToSpeechSettings
• 语音输入集成（语音转文本，STT）
• 麦克风访问和音频输入处理
• 自定义语音合成（音高、语速、音量、语言）
• 错误处理和浏览器兼容性

流式响应

📄 阅读： references/streaming.md

• 启用流式模式
• 使用 UpdateResponseAsync 逐步更新
• 实时渲染响应
• 与 OpenAI、Azure 和 Ollama 流式 API 集成
• 停止响应功能
• 性能优化

生成式 UI

📄 阅读： references/generative-ui.md

• 使用 ToolUIBlock 标记指令注册自定义工具
• 使用 TextBlock 和 ToolBlock（IResponseBlock）构建结构化响应
• 通过 Props 字典向工具传递参数
• 在单个响应中组合文本块和工具块
• 配置 AI 服务以返回 blocks JSON 数组
• 通过 Prompts 集合预加载生成式 UI 对话

思维链

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

• 使用 ThinkingBlock 和 BlockType.Thinking 渲染推理块
• 使用 ThinkingStage、ThinkingStageStatus 和内联 ThinkingContextItem 标签添加结构化的 Stages
• 多步流式处理模式（模型推理时追加新的思考块）
• 使用 ThinkingStageTemplate 标记自定义阶段渲染
• 在单个响应中组合思考块、文本块和工具块

方法与编程 API

📄 阅读： references/methods-api.md

• 使用 ExecutePromptAsync 执行自动化提示词
• 使用 UpdateResponseAsync 更新流式响应
• 使用 RefreshUIAsync 手动刷新 UI
• 使用 ScrollToBottomAsync 控制滚动
• 自动化工作流和批处理

快速开始

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 600px;">
    <SfAIAssistView 
        Prompt="What is Blazor?" 
        PromptRequested="@OnPromptRequested">
    </SfAIAssistView>
</div>

@code {
    private async Task OnPromptRequested(AssistViewPromptRequestedEventArgs args)
    {
        // Add delay to simulate AI processing
        await Task.Delay(1000);
        
        // Connect to your AI service here (OpenAI, Azure, etc.)
        var response = await GetAIResponse(args.Prompt);
        args.Response = response;
    }
    
    private async Task<string> GetAIResponse(string prompt)
    {
        // Call your AI service API
        // For testing: return a simple response
        return $"<div>Processing your prompt: {prompt}</div>";
    }
}

常见模式

模式 1：预初始化对话

加载带有现有对话历史的组件：

<SfAIAssistView 
    Prompts="@conversationHistory" 
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<AssistViewPrompt> conversationHistory = new()
    {
        new AssistViewPrompt { 
            Prompt = "What is C#?", 
            Response = "<div>C# is a modern object-oriented programming language...</div>" 
        }
    };
}

模式 2：引导式建议

使用建议帮助用户完善提示词：

<SfAIAssistView 
    PromptSuggestions="@suggestions"
    PromptSuggestionsHeader="Try asking about:"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<string> suggestions = new()
    {
        "How does dependency injection work?",
        "Explain async/await patterns",
        "What are Blazor components?"
    };
}

模式 3：自定义头像

使用自定义图标个性化用户和 AI 身份：

<SfAIAssistView 
    PromptIconCss="e-icons e-user"
    ResponseIconCss="e-icons e-bullet-2"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

关键属性

属性	类型	用途
Prompt	string	要显示的初始提示词文本
PromptPlaceholder	string	输入框中的占位文本（默认值："Type prompt for assistance..."）
PromptSuggestions	List<string>	为用户提供引导的建议提示词列表
PromptSuggestionsHeader	string	建议项上方的标题文本
Prompts	List<AssistViewPrompt>	提示词与回复对的集合（对话历史记录）
PromptIconCss	string	用户头像图标的 CSS 类
ResponseIconCss	string	AI 头像图标的 CSS 类（默认值："e-assistview-icon"）
EnableScrollToBottom	bool	显示滚动到底部指示器（默认值：true）
EnableStreaming	bool	启用流式模式，逐步显示回复
ActiveView	int	当前活动视图的索引（用于多视图）
ShowHeader	bool	显示/隐藏组件标题栏（默认值：true）
Width	string	组件宽度（默认值："100%"）
Height	string	组件高度（默认值："100%"）
CssClass	string	用于设置样式的自定义 CSS 类
EnableRtl	bool	启用从右到左布局（默认值：false）
ID	string	设置组件的 id 属性

常见用例

1. 客户支持聊天机器人 - 结合知识库回答常见问题
2. 编码助手 - 实时提供代码建议和解释
3. 内容生成器 - 交互式写作和编辑助手
4. 学习界面 - 用于教育内容的问答系统
5. API 文档 - 提供示例的交互式 API 助手