DxAIChat.MessageContentTemplate Property

Specifies a template used to display message bubble content.

Namespace: DevExpress.AIIntegration.Blazor.Chat

Assembly: DevExpress.AIIntegration.Blazor.Chat.v25.2.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.

Important

Always sanitize HTML generated from Markdown to prevent cross-site scripting (XSS). Use a trusted sanitizer (for example, the HtmlSanitizer package) to allow only safe tags and attributes before the browser renders content.

Razor

@using Markdig
@using Ganss.Xss

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

@code {
    private readonly HtmlSanitizer sanitizer = new HtmlSanitizer();

    MarkupString ToHtml(string markdown) {
        string html = Markdown.ToHtml(markdown);
        // Sanitize the HTML to prevent XSS attacks
        html = sanitizer.Sanitize(html);
        return new MarkupString(html);
    }

    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