Chat-CustomMessage.razor

@page "/custommessage"
@using DevExpress.AIIntegration.Blazor.Chat
@using AIIntegration.Services.Chat;

<DxAIChat CssClass="my-chat">
    <MessageTemplate>
        <div class="@GetMessageClasses(context)">
            @if(context.Typing) {
                <span>Loading...</span>
            } else {
                <div class="my-chat-content">
                    @context.Content
                </div>
            }
        </div>
    </MessageTemplate>
</DxAIChat>

@code {
    string GetMessageClasses(ChatMessage message) {
        if(message.Role == ChatMessageRole.Assistant) {
            return "my-chat-message my-assistant-message";
        } else if(message.Role == ChatMessageRole.User) {
            return "my-chat-message my-user-message";
        } else if(message.Role == ChatMessageRole.Error) {
            return "my-chat-message my-error-message";
        }
        return "my-chat-message";
    }
}