blazor-devexpress-dot-aiintegration-dot-blazor-dot-chat-10bddb1d.md
Defines an individual chat message.
Namespace : DevExpress.AIIntegration.Blazor.Chat
Assembly : DevExpress.AIIntegration.Blazor.Chat.v25.2.dll
NuGet Package : DevExpress.AIIntegration.Blazor.Chat
public class BlazorChatMessage
The following members return BlazorChatMessage objects:
The BlazorChatMessage class implements the functionality of an individual message displayed in the DxAIChat component. Use the class properties to get information about the message.
<DxAIChat CssClass="demo-chat">
<MessageTemplate>
<div class="@GetMessageClasses(context)">
@if(context.Typing) {
<span>Loading...</span>
} else {
<div class="demo-chat-content">
@context.Content
</div>
}
</div>
</MessageTemplate>
</DxAIChat>
@code {
string GetMessageClasses(BlazorChatMessage message) {
if(message.Role == ChatMessageRole.Assistant) {
return "demo-chat-message demo-assistant-message";
} else if(message.Role == ChatMessageRole.User) {
return "demo-chat-message demo-user-message";
} else if(message.Role == ChatMessageRole.Error) {
return "demo-chat-message demo-error-message";
}
return "demo-chat-message";
}
}
.demo-chat {
width: 100%;
height: 400px;
}
.demo-chat .demo-chat-message {
padding: 10px;
border-radius: 10px;
width: calc(100% - 60px);
box-shadow: 0px 2px 6px -2px;
}
.demo-chat .demo-chat-message.demo-assistant-message {
background-color: rgba(76, 255, 0, 0.2);
align-self: self-start;
}
.demo-chat .demo-chat-message.demo-user-message {
background-color: #FFF;
align-self: self-end;
}
.demo-chat .demo-chat-message.demo-error-message {
background-color: rgb(255, 0, 0, 0.2);
align-self: center;
}
You can use the ToMessage(Object) method to convert BlazorChatMessage objects to Microsoft.Extensions.AI.ChatMessage objects compatible with AI services.
Object BlazorChatMessage
See Also