BlazorChatMessage.Role Property

Returns the role of the message owner.

Namespace : DevExpress.AIIntegration.Blazor.Chat

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

NuGet Package : DevExpress.AIIntegration.Blazor.Chat

Declaration

csharp

public virtual ChatMessageRole Role { get; }

Property Value

Type	Description
ChatMessageRole

The owner role.

Available values:

Name	Description
User

Indicates that the message is sent by a user.

| | Assistant |

Indicates that the message is generated by the assistant.

| | System |

Indicates that the message is sent by the system.

| | Error |

Indicates the error message.

Remarks

Use the Role property to determine who sent the message.

Razor
CSS

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

Run Demo: AI Chat - Customize Message Appearance View Example: AI Chat for Blazor - How to add DxAIChat component in Blazor, MAUI, WPF, and WinForms applications