DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創(chuàng)建高影響力的用戶體驗(yàn)，這個(gè)UI自建庫提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調(diào)度程序、圖表、數(shù)據(jù)編輯器和報(bào)表等）。

AI服務(wù)提供各種量身定制的模型來滿足用戶需求、偏好和資源限制，模型有優(yōu)點(diǎn)和缺點(diǎn)——有些是為編碼任務(wù)而優(yōu)化的，而另一些則更適合于創(chuàng)造性寫作或?qū)崟r(shí)信息檢索。

為了選擇合適的模型，您通常需要平衡性能和成本。例如，像GPT-4.1這樣的高級(jí)模型可以提供出色的結(jié)果，但需要更多的計(jì)算資源。相比之下，GPT-4.1 Mini或Nano等較輕的模型提供更快的響應(yīng)速度和更低的成本，使其成為追求效率和響應(yīng)能力的理想選擇。

對(duì)于企業(yè)應(yīng)用程序來說，連接到基于云的AI服務(wù)能力——可以選擇回退到在受限環(huán)境中運(yùn)行的離線模型，這通常是必須的。

DevExpress技術(shù)交流群11：749942875      歡迎一起進(jìn)群討論

在這篇文章中，我們將向您展示如何使用DevExpress Blazor AI Chat和ComboBox組件構(gòu)建一個(gè)多l(xiāng)lm（大型語言模型）聊天應(yīng)用程序，您將學(xué)習(xí)如何實(shí)現(xiàn)IChatClient接口來管理多個(gè)聊天客戶端及其各自的會(huì)話歷史（以及如何使用DevExpress Blazor ComboBox在聊天會(huì)話期間切換llm）。

開始

要開始您必須首先將DxAIChat組件集成到應(yīng)用程序中（有關(guān)這方面的其他信息，請(qǐng)參閱官方指南）：。

在本指南中，我們將使用兩個(gè)LLMs: 來自Azure OpenAI的GPT-4o和來自O(shè)llama的本地運(yùn)行的Phi4。

以下是從Program.cs代碼單元中為兩個(gè)聊天客戶端注冊(cè)的示例，請(qǐng)注意，我們將LLM憑據(jù)和設(shè)置存儲(chǔ)在應(yīng)用程序配置文件（appSettings.Development.json）中，您可以修改以下代碼來滿足具體要求：

using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
...
var openAiServiceSettings = builder.Configuration.GetSection("OpenAISettings").Get<OpenAIServiceSettings>();
var ollamaSettings = builder.Configuration.GetSection("OllamaSettings").Get<OllamaSettings>();

IChatClient azureChatClient = new AzureOpenAIClient(
new Uri(openAiServiceSettings.Endpoint),
new AzureKeyCredential(openAiServiceSettings.Key))
.AsChatClient(openAiServiceSettings.DeploymentName);

IChatClient ollamaChatClient = new OllamaChatClient(
new Uri(ollamaSettings.Uri),
ollamaSettings.ModelName);

注意：要安裝、運(yùn)行和下載Ollama模型，請(qǐng)參考幫助主題。

接下來，我們將實(shí)現(xiàn)用于跟蹤每個(gè)客戶端及其歷史記錄的基礎(chǔ)設(shè)施。

CompositeChatClient實(shí)現(xiàn)

首先，聲明代表單個(gè)LLM會(huì)話的ChatClientSession類（包括用戶友好的模型/服務(wù)名稱，客戶端實(shí)例和消息歷史）：

using Microsoft.Extensions.AI;
//...
public class ChatClientSession {
public string Name { get; set; }
public IChatClient Client { get; }
public List<BlazorChatMessage> Messages { get; set; }

public ChatClientSession(IChatClient client, string name) {
Name = name;
Client = client ?? throw new ArgumentNullException(nameof(client));
Messages = new List<BlazorChatMessage>();
}
}

接下來，定義CompositeChatClient類，該類實(shí)現(xiàn)了IChatClient接口，并充當(dāng)多個(gè)聊天客戶端的容器。通過在單個(gè)接口實(shí)現(xiàn)中封裝多個(gè)客戶端，可以將此功能與DevExpress Blazor AI Chat組件（依賴于IChatClient接口）集成。

該類旨在支持LLM切換，同時(shí)保留個(gè)人對(duì)話歷史。主要考慮因素包括：

• 聊天客戶端管理：存儲(chǔ)ChatClientSession對(duì)象的列表，其中每個(gè)對(duì)象代表一個(gè)LLM及其關(guān)聯(lián)的聊天歷史記錄。
• 消息處理：將消息路由到當(dāng)前選定的聊天客戶端并檢索響應(yīng)。

下面是實(shí)現(xiàn)：

using Microsoft.Extensions.AI;
//...
public class CompositeChatClient : IChatClient {
public List<ChatClientSession> AvailableChatClients { get; }
public ChatClientSession? SelectedSession { get; set; }
public CompositeChatClient(params ChatClientSession[] chatClients) {
AvailableChatClients = chatClients.ToList();
SelectedSession = AvailableChatClients[0];
}

public Task<ChatResponse> GetResponseAsync(IEnumerable<ChatMessage> messages, ChatOptions? options = null,
CancellationToken cancellationToken = new CancellationToken()) {
return SelectedSession?.Client.GetResponseAsync(messages, options, cancellationToken);
}

public IAsyncEnumerable<ChatResponseUpdate> GetStreamingResponseAsync(IEnumerable<ChatMessage> messages, ChatOptions? options = null,
CancellationToken cancellationToken = new CancellationToken()) {
return SelectedSession?.Client.GetStreamingResponseAsync(messages, options, cancellationToken);
}

public void Dispose() {
for (int i = 0; i < AvailableChatClients.Count; i++) {
AvailableChatClients[i].Client.Dispose();
AvailableChatClients[i].Messages.Clear();
}
}
public object? GetService(Type serviceType, object? serviceKey = null) {
throw new NotImplementedException();
}
}

最后，切換回Program.cs并注冊(cè)CompositeChatClient，如下所示：

// Register both clients within a single instance of the IChatClient
var compositeChatClient = new CompositeChatClient(
new ChatClientSession(azureChatClient, "Azure Open AI — GPT4o"),
new ChatClientSession(ollamaChatClient, "Ollama — Phi 4"));

builder.Services.AddScoped<IChatClient>((provider) => compositeChatClient);
builder.Services.AddDevExpressAI();

使用組合框選擇LLM

為了允許LLM選擇，使用DxAIChat組件打開razor頁面，并添加DevExpress Blazor ComboBox。主要考慮因素包括：

• CompositeChatClient注入：將CompositeChatClient注入到頁面中，它為UI應(yīng)用程序提供了一個(gè)可用聊天客戶端列表。
• LLM選擇：DxComboBox組件綁定到客戶端列表，并在選擇更改時(shí)觸發(fā)回調(diào)。
• 聊天會(huì)話管理：OnModelChanged回調(diào)處理聊天歷史保存和加載操作（當(dāng)用戶在llm之間切換時(shí)）。

下面是實(shí)現(xiàn)的一個(gè)片段：

@page "/"
@using DevExpress.AIIntegration.Blazor.Chat
@using DXBlazorChatSelector.Services
@using Microsoft.Extensions.AI

<div class="main-container">
<div class="top-container">
<DxComboBox Data="@ModelsList"
CssClass="selector-container-combo-editor"
TextFieldName="@nameof(ChatClientSession.Name)"
Value="ChatClientProvider.SelectedSession"
ValueChanged="@((ChatClientSession session) => OnModelChanged(session))"/>
</div>
<DxAIChat @ref="DxAiChat" CssClass="my-chat"></DxAIChat>
</div>

@code{

[Inject]
IChatClient? ChatClient { get; set; }
CompositeChatClient ChatClientProvider => ChatClient as CompositeChatClient;
DxAIChat? DxAiChat { get; set; }
List<ChatClientSession> ModelsList => ChatClientProvider?.AvailableChatClients;

private void OnModelChanged(ChatClientSession value) {
SaveLastAssistantMessage(DxAiChat.SaveMessages());
ChatClientProvider.SelectedSession = value;
DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
}

private void SaveLastAssistantMessage(IEnumerable<BlazorChatMessage> saveMessages) {
if(ChatClientProvider.SelectedSession != null) {
ChatClientProvider.SelectedSession.Messages.Clear();
ChatClientProvider.SelectedSession.Messages.AddRange(saveMessages);
}
}
}

開始新的聊天實(shí)現(xiàn)

要清除所選LLM的消息歷史記錄并開始新的聊天會(huì)話，我們將添加DxButton并將其放置在Index.razor頁面中的DxComboBox附近。主要考慮因素包括：

• 按鈕樣式：按鈕使用在CSS中聲明的SVG圖標(biāo)。
• 會(huì)話重置：?jiǎn)螕艉螅摪粹o清除所選LLM的消息歷史記錄并更新聊天UI。

更新后的Index.razor頁面代碼：

@page "/"
@using DevExpress.AIIntegration.Blazor.Chat
@using DXBlazorChatSelector.Services
@using Microsoft.Extensions.AI

<div class="main-container">
<div class="top-container">
<DxButton RenderStyle="ButtonRenderStyle.Primary"
RenderStyleMode="ButtonRenderStyleMode.Contained"
IconCssClass="refresh"
IconPosition="ButtonIconPosition.BeforeText"
CssClass="refresh-button"
Text="Start New Chat"
Click="ClearHistory"/>
<DxComboBox Data="@ModelsList"
CssClass="selector-container-combo-editor"
TextFieldName="@nameof(ChatClientSession.Name)"
Value="ChatClientProvider.SelectedSession"
ValueChanged="@((ChatClientSession session) => OnModelChanged(session))"/>
</div>
<DxAIChat @ref="DxAiChat" CssClass="my-chat"></DxAIChat>
</div>

@code{

[Inject]
IChatClient? ChatClient { get; set; }
CompositeChatClient ChatClientProvider => ChatClient as CompositeChatClient;
DxAIChat? DxAiChat { get; set; }
List<ChatClientSession> ModelsList => ChatClientProvider?.AvailableChatClients;

private void ClearHistory() {
ChatClientProvider.SelectedSession.Messages.Clear();
DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
}
private void OnModelChanged(ChatClientSession value) {
SaveLastAssistantMessage(DxAiChat.SaveMessages());
ChatClientProvider.SelectedSession = value;
DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
}

private void SaveLastAssistantMessage(IEnumerable<BlazorChatMessage> saveMessages) {
if(ChatClientProvider.SelectedSession != null) {
ChatClientProvider.SelectedSession.Messages.Clear();
ChatClientProvider.SelectedSession.Messages.AddRange(saveMessages);
}
}
}

最終結(jié)果

下面圖片展示了我們的實(shí)現(xiàn)：

更多產(chǎn)品資訊及授權(quán)，歡迎來電咨詢：023-68661681

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競(jìng)爭(zhēng)優(yōu)勢(shì)。

慧都科技是DevExpress的中國(guó)區(qū)的合作伙伴，DevExpress作為用戶界面領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)高效構(gòu)建權(quán)限管理、數(shù)據(jù)可視化（如網(wǎng)格/圖表/儀表盤）、跨平臺(tái)系統(tǒng)（WinForms/ASP.NET/.NET MAUI）及行業(yè)定制解決方案，加速開發(fā)并強(qiáng)化交互體驗(yàn)。