syncfusion-blazor-inline-ai-assist

Blazor 内联 AI 助手组件技能

Inline AI Assist 组件帮助开发者在 Blazor 应用中构建由 AI 驱动的文本编辑体验。它提供灵活的提示词输入界面、可配置的 AI 提供商集成，以及丰富的自定义选项，适用于企业应用。

组件概述

SfInlineAIAssist 组件可让用户向 AI 服务发送提示词，并直接在界面中接收智能回复，同时提供灵活的显示模式和丰富的自定义选项，例如：

• 双响应模式： 在光标位置内联显示 AI 回复，或在弹出层中显示，灵活适配 UI 集成需求。
• 命令操作： 通过类似提及的弹出窗口显示预定义命令和快捷操作建议，并可通过 CommandMenu 自定义分组和图标。
• 响应操作： 通过 ResponseActions 配置 Accept、Discard 和自定义项等操作，以管理 AI 生成的内容。
• 操作工具栏： 在提示词输入区域中包含带发送按钮和自定义操作的工具栏。
• Markdown： 自动将 Markdown 回复转换为 HTML，以呈现丰富内容。
• 流式响应： 支持逐字或分块流式传输，并提供实时视觉反馈和停止控件。
• 指示器： 通过内联指示器和弹出模式下的骨架屏显示处理状态。
• 语音转文本： 基于 Web Speech API 提供内置语音输入，支持免手动输入提示词，并可通过 InlineAIAssistSpeechToText 子标记选择语言、查看临时结果以及接收生命周期事件。
• 自定义： 支持自定义模板、外观和响应呈现方式。

导航指南

入门

📄 阅读： references/getting-started.md

• WebAssembly 应用设置（Visual Studio、VS Code、.NET CLI）
• 使用交互式呈现模式设置 Web 应用
• 安装 NuGet 包（Syncfusion.Blazor.InteractiveChat）
• 导入命名空间并初次渲染组件
• 用于验证设置的最简可运行示例

事件和方法

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

• 事件：Created、PromptRequested、Opened、Closed
• 方法：AddResponse、RefreshContent、ShowPopupAsync、HidePopupAsync
• 事件处理模式和错误管理
• 响应生命周期和管理
• 实际事件场景

命令和工具栏

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

• 配置命令的标签、提示词、图标和分组
• CommandMenu 标记帮助器和命令弹出窗口尺寸
• 带自定义操作按钮的内联工具栏
• 命令的 ItemSelect 事件和工具栏的 ItemClick 事件
• 实际命令示例（总结、改写、翻译）

AI 提供商集成

📄 阅读： references/ai-integration.md

• Microsoft.Extensions.AI 框架设置
• Azure OpenAI 集成分步指南
• OpenAI 直接集成
• Ollama 本地大模型集成
• Gemini API 集成
• LiteLLM 代理设置和配置
• 提供商比较和选择指南

自定义和响应设置

📄 阅读： references/customization-and-response.md

• ResponseMode 属性（Inline 与 Popup 显示模式、动态切换）
• PopupWidth、PopupHeight、ZIndex 配置
• Placeholder、RelateTo、Target、EnableStreaming 属性
• 响应设置（流式传输、格式化、模板）
• 自定义响应项配置
• 使用 CSSClass 自定义外观
• EditorTemplate 和 ResponseTemplate 的用法
• 响应式设计模式

语音转文本

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

• 使用 InlineAIAssistSpeechToText 子标签启用语音输入
• 配置识别语言和中间结果
• 生命周期事件：RecognitionStart、RecognitionStop、TranscriptChanged、RecognitionError
• 将语音转文本项添加到自定义 InlineToolbar
• 错误处理模式和浏览器兼容性
• 结合语音输入与内容摘要的真实示例

无障碍功能和全球化

📄 阅读： references/accessibility-and-globalization.md

• 符合 WCAG 2.2 AA 标准的功能
• 键盘导航支持（Tab、方向键、Enter）
• ARIA 属性和屏幕阅读器支持
• 全球化和 RTL（从右到左）支持
• 本地化配置
• 移动设备无障碍功能

快速入门示例

以下是一个用于验证设置的最小可运行示例：

@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Buttons

<div style="height: 350px; width: 650px;">
    <SfButton id="aiButton" IsPrimary="true" @onclick="OnButtonClick">
        Ask AI
    </SfButton>
    <div id="editableText" contenteditable="true" style="border: 1px solid #ddd; padding: 10px; margin-top: 10px;">
        <p>Enter your text here for AI processing...</p>
    </div>
    <SfInlineAIAssist @ref="inlineAssist" 
                      RelateTo="#aiButton" 
                      PromptRequested="OnPromptRequested">
        <ResponseActions ItemSelect="OnResponseItemSelect"></ResponseActions>
    </SfInlineAIAssist>
</div>

@code {
    private SfInlineAIAssist inlineAssist = new();

    private async Task OnButtonClick()
    {
        await inlineAssist.ShowPopupAsync();
    }

    private async Task OnPromptRequested(PromptRequestedEventArgs args)
    {
        // Connect to your AI provider here (Azure OpenAI, OpenAI, etc.)
        // For this example, return a simple response
        string response = $"Processing your request: {args.Prompt}";
        await inlineAssist.UpdateResponseAsync(response, true);
    }

    private async Task OnResponseItemSelect(ResponseItemSelectEventArgs args)
    {
        if (args.Item.Label == "Accept")
        {
            await inlineAssist.HidePopupAsync();
        }
        else if (args.Item.Label == "Discard")
        {
            await inlineAssist.HidePopupAsync();
        }
    }
}

常见模式

模式 1：内容摘要

<SfButton id="summarizeButton" @onclick="OnSummarizeClick">
    Summarize
</SfButton>

<SfInlineAIAssist @ref="inlineAssist" 
                  RelateTo="#summarizeButton"
                  PromptRequested="OnSummarizeRequest">
</SfInlineAIAssist>

@code {
    private async Task OnSummarizeClick()
    {
        await inlineAssist.ShowPopupAsync();
    }

    private async Task OnSummarizeRequest(PromptRequestedEventArgs args)
    {
        // Send to AI provider with system prompt:
        // "Summarize the following text in 2-3 sentences: " + selectedText
        await inlineAssist.UpdateResponseAsync(summaryResult, true);
    }
}

模式 2：自定义命令

<SfInlineAIAssist @ref="inlineAssist" PromptRequested="OnPromptRequested">
    <CommandMenu Commands="commandItems"></CommandMenu>
</SfInlineAIAssist>

@code {
    private List<CommandItem> commandItems = new List<CommandItem>
    {
        new CommandItem { Label = "Summarize", Prompt = "Summarize this text", IconCss = "e-icons e-collapse-2" },
        new CommandItem { Label = "Translate", Prompt = "Translate to Spanish", IconCss = "e-icons e-translate" },
        new CommandItem { Label = "Rewrite", Prompt = "Rewrite in professional tone", IconCss = "e-icons e-edit" }
    };
}

模式 3：响应管理

<SfInlineAIAssist @ref="inlineAssist" PromptRequested="OnPromptRequested">
    <ResponseActions Items="customResponseItems" ItemSelect="OnResponseAction">
    </ResponseActions>
</SfInlineAIAssist>

@code {
    private List<ResponseItem> customResponseItems = new()
    {
        new ResponseItem { Label = "Regenerate", IconCss = "e-icons e-refresh", Tooltip = "Generate new response" },
        new ResponseItem { Label = "Copy", IconCss = "e-icons e-copy", Tooltip = "Copy to clipboard" },
        new ResponseItem { Label = "Insert", IconCss = "e-icons e-insert", Tooltip = "Insert into document" }
    };
}

主要属性

属性	类型	用途
RelateTo	string	用于定位弹出窗口的锚点元素选择器（例如 "#aiButton"）
Target	string	组件容器要添加到的 DOM 选择器（例如 "body"、"#app"）
Placeholder	string	输入字段的占位文本（默认值："Enter prompt"）
ResponseMode	ResponseDisplayMode	显示模式：Inline（光标处）或 Popup（叠加层）
PopupWidth	string	ResponseMode 为 Popup 时的弹出窗口宽度（例如 "400px"）
PopupHeight	string	响应显示区域的弹出窗口高度（例如 "300px" 或 "auto"）
ZIndex	int	用于弹出窗口分层的 CSS z-index
EnableStreaming	bool	启用逐词流式响应（默认值：false）
CssClass	string	用于设置样式的自定义 CSS 类
PromptRequested	EventCallback<PromptRequestedEventArgs>	用户提交提示词时触发
Created	EventCallback	组件创建并就绪时触发
Opened	EventCallback<OpenEventArgs>	弹出窗口打开时触发
Closed	EventCallback	弹出窗口关闭时触发
Prompts	IEnumerable<PromptRecord>	已提交提示词及其响应的只读集合

编程方法

Inline AI Assist 组件提供用于编程控制的异步方法：

ShowPopupAsync()

在 RelatedTo 元素的位置打开 AI Assist 弹出窗口：

@ref="inlineAssist"

private SfInlineAIAssist inlineAssist;

private async Task OpenAIAssist()
{
    await inlineAssist.ShowPopupAsync();
}

HidePopupAsync()

关闭 AI Assist 弹出窗口：

private async Task CloseAIAssist()
{
    await inlineAssist.HidePopupAsync();
}

UpdateResponseAsync(string response, bool isFinal)

设置或流式传输 AI 响应内容：

private async Task OnPromptRequested(PromptRequestedEventArgs args)
{
    // Non-streaming response
    await inlineAssist.UpdateResponseAsync("Generated response", true);
    
    // Streaming response (call multiple times)
    foreach (var chunk in streamedResponse)
    {
        await inlineAssist.UpdateResponseAsync(chunk, false);
    }
    // Final call with isFinal=true
    await inlineAssist.UpdateResponseAsync(lastChunk, true);
}

ExecutePromptAsync(string prompt)

以编程方式执行提示词，无需用户输入：

private async Task ExecuteSamplePrompt()
{
    await inlineAssist.ExecutePromptAsync("Summarize the selected text in 2 sentences");
}

ShowCommandPopupAsync()

以编程方式打开命令菜单弹出窗口。应先打开主弹出窗口。

private async Task OpenCommands()
{
    await inlineAssist.ShowPopupAsync();
    await inlineAssist.ShowCommandPopupAsync();
}

HideCommandPopupAsync()

以编程方式关闭命令菜单弹出窗口。

private async Task CloseCommands()
{
    await inlineAssist.HideCommandPopupAsync();
}

常见用例

1. 内容摘要 - 使用 AI 总结选中的文本
2. 语法和语气润色 - 以专业语气改写内容
3. 翻译 - 将选中的文本翻译成其他语言
4. 代码生成 - 根据描述生成代码片段
5. 撰写电子邮件 - 借助 AI 起草电子邮件
6. 填写表单 - 使用 AI 建议自动填充表单字段