BlazorChatMessage Class

Defines an individual chat message.

Namespace: DevExpress.AIIntegration.Blazor.Chat

Assembly: DevExpress.AIIntegration.Blazor.Chat.v24.2.dll

NuGet Package: DevExpress.AIIntegration.Blazor.Chat

Declaration

public class BlazorChatMessage

Remarks

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.

Razor

<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";
    }
}

CSS

 .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.

Inheritance

Object

BlazorChatMessage