BlazorChatMessage.Typing Property

Identifies whether the message is being generated by the AI assistant or it is complete.

Namespace: DevExpress.AIIntegration.Blazor.Chat

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

NuGet Package: DevExpress.AIIntegration.Blazor.Chat

Declaration

public bool Typing { get; set; }

Property Value

Type	Description
Boolean	true if the message is being generated; false if the message is complete.

Remarks

Use the Typing property to identify messages that are being generated. This property returns true in the following cases:

• The AI assistant is generating the response before sending it back.
• The AI assistant is streaming the response (when the UseStreaming property is set to true).

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