DxAIChat.MessageContentTemplate Property

Specifies a template used to display message bubble content.

Namespace: DevExpress.AIIntegration.Blazor.Chat

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

NuGet Package: DevExpress.AIIntegration.Blazor.Chat

Declaration

[Parameter]
public RenderFragment<BlazorChatMessage> MessageContentTemplate { get; set; }

Property Value

Type	Description
RenderFragment<BlazorChatMessage>	The content of a message bubble.

Remarks

Use the MessageContentTemplate property to display any render fragment in a message bubble. This template does not affect the default bubble rendering, such as paddings or inner content alignment.

The MessageContentTemplate accepts a BlazorChatMessage object as the context parameter.

Razor

<DxAIChat CssClass="demo-chat"
          Initialized="ChatInitialized"
          ResponseContentFormat="ResponseContentFormat.Markdown">
        <MessageContentTemplate>
            <div class="demo-chat-content">
                @(new MarkupString(Markdig.Markdown.ToHtml(context.Content).Trim()))
            </div>
        </MessageContentTemplate>
    </DxAIChat>
</div>

@code {
    void ChatInitialized(IAIChat chat) {
        chat.LoadMessages(new[] {
            new BlazorChatMessage(Microsoft.Extensions.AI.ChatRole.User, "Hello, AI!"),
            new BlazorChatMessage(Microsoft.Extensions.AI.ChatRole.Assistant, "Hey there, human! What's on your mind? 😊")
        });
    }
}

CSS

 .demo-chat {
    width: 100%;
    height: 400px;
}
     .demo-chat .demo-chat-content > p:last-child {
        margin-bottom: 0;
    }

Run Demo: AI Chat - Rich Formatted Response View Example: AI Chat for Blazor - How to add DxAIChat component in Blazor, MAUI, WPF, and WinForms applications