DevExpress Blazor控件为使用C#为Blazor服务器和Blazor WebAssembly创建高影响力的用户体验，其附带了70+个原生的Blazor组件（包括DataGrid、Pivot Table、Scheduler、图表、数据编辑器和报表）。

在上文中（点击这里回顾>>）为大家介绍了DevExpress Blazor v26.1在辅助功能方面的增强，本文将继续介绍新版本中的Blazor AI Chat，希望能帮助到大家~欢迎点赞关注哦，不定期更新~

DevExpress新旧版本帮助文档下载可进QQ qun获取：169725316

Blazor AI Chat

与供应商无关的AI聊天

为了改善整体用户体验，并使AI聊天与常见的DevExpress Blazor模式保持一致，产品团队在v26.1中引入了一组突破性的更改。这些更改标准化了AI-Chat API界面，增加了与基于代理和不依赖供应商的模型的集成，并最大限度地减少了组件、模型和使用场景之间的配置冲突。

使用DevExpress Project Converter自动更新通用代码模式。请密切关注以下应用程序领域：

• AI服务注册
• 引用键控聊天服务或推理参数的组件配置
• 编程消息处理

消息流增强功能

DevExpress Blazor AI Chat现在包括更灵活的消息发送事件模型，新的API为用户提供了对长时间运行的操作和自定义消息工作流的精确控制。使用它们来预处理用户输入、调用外部服务或将其他响应附加到聊天：

• 调用AppendMessageAsync将消息添加到聊天历史记录中，而不将其发送到AI服务（例如，追加系统提示、助手消息或补充上下文）。
• 使用SendMessageAsync方法将用户消息提交给聊天服务。
• 调用ShowLoadingIndicatorAsync和HideLoadingindicatorAsSync方法，在耗时的操作期间显示内置加载指示器。

Razor

<DxAIChat MessageSending="OnMessageSending" /> @code { private async Task OnMessageSending(MessageSendingEventArgs args) { await args.Chat.AppendMessageAsync($"Translate message to Spanish", ChatRole.System); await args.Chat.ShowLoadingIndicatorAsync("Fetching additional context..."); /* ... */ await args.Chat.HideLoadingIndicatorAsync(); } }

用户可以处理MessageSending事件来记录用于诊断、遥测或审核目的的用户消息，该事件不拦截消息传递。除非明确取消，否则组件将继续发送和显示消息。

Razor

<DxAIChat MessageSending="LogUserMessages" FileUploadEnabled="true" /> @code { private async Task LogUserMessages(MessageSendingEventArgs args) { StringBuilder logMessage = new StringBuilder(); logMessage.AppendLine($@"User message: ""{args.Text}"""); if(args.Files != null && args.Files.Count > 0) { logMessage.AppendLine($"Attachments: {string.Join(", ", args.Files.Select(f => f.Name))}"); } LogConversationHistory(logMessage.ToString()); } }

AIContent API

DevExpress Blazor AI Chat公开在应用程序和AI服务之间传输的单个AIContent项目，用户可以使用自定义模板呈现丰富的内容，以编程方式提交结构化AI请求，并隐藏特定消息。

提供了以下新的API：

• BlazorChatMessage.Contents:返回消息中包含的AIContent项的集合。
• ResponseReceivedEventArgs.Messages:返回上次AI响应中的所有`BlazorChatMessage`对象。
• DxAIChat.SendMessageAsync：将组合文本、图像、文档和其他内容类型的多模式消息发送到AI服务。
• BlazorChatMessage.Visible：指定聊天历史记录中的消息可见性。

与推理模型一起使用时，BlazorChatMessage.Contents集合可以包括模型的思想链以及最终响应。在MessageContentTemplate中，检查消息内容来在聊天中检测和呈现这些想法。

Razor

<DxAIChat ResponseContentFormat="ResponseContentFormat.Markdown"> <MessageContentTemplate> @foreach(var item in context.Contents) { if(item is TextReasoningContent reasoning) { <details> <summary>Model Thoughts</summary> <p>@ToHtml(reasoning.Text)</p> </details> } else if(item is TextContent text) { <p>@ToHtml(text.Text)</p> } } </MessageContentTemplate> </DxAIChat> @code { private readonly HtmlSanitizer sanitizer = new HtmlSanitizer(); MarkupString ToHtml(string markdown) { string html = Markdown.ToHtml(markdown); html = sanitizer.Sanitize(html); return new MarkupString(html); } }

改进AI聊天打字体验

DevExpress Blazor AI Chat允许用户控制何时将输入文本与聊天消息缓冲区同步。

用户可以在每次击键、输入框失去焦点或用户在指定的间隔内停止键入后更新缓冲区，为其的特定使用方案选择最平衡响应性和处理负载的选项。在交互式Web部件和自动呈现模式中，延迟更新减少了输入时不必要的状态更改，并提高了较慢设备或资源密集型页面上的聊天响应能力。

Razor

<DxAIChat BindValueMode="BindValueMode.OnDelayedInput" InputDelay="1000" />

空聊天自定义

DevExpress Blazor AI Chat允许用户自定义对话开始前显示的文本：

• EmptyMessageAreaText指定在空消息区域中显示的文本。
• InputBoxNullText指定聊天输入框为空时的提示文本。

Razor

<DxAIChat EmptyMessageAreaText="How can I help you today?" InputBoxNullText="Ask a question or describe a task..." />

UI/UX增强

官方简化了空消息区域，来改善最初的DevExpress Blazor AI聊天体验。