Chat

TwMessage

TwMessage is a Blazor chat message row with an avatar, the author, the time, the message content and a footer, aligned to the start or end of a conversation.

Last updated 20 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Give TwMessage an Author and a Timestamp, and put the message itself in a TwBubble. The avatar shows the author's initials. Wrap the conversation in a container with role="log" so screen readers announce new messages.

Jane Doe9:30 AM

Has the release gone out yet?

Sam Lee9:32 AM

Not yet, the last build is still running.

RAZOR

<div role="log" aria-label="Conversation" class="flex flex-col gap-6">
    <TwMessage Author="Jane Doe" Timestamp="@_sentAt">
        <TwBubble>Has the release gone out yet?</TwBubble>
    </TwMessage>
    <TwMessage Author="Sam Lee" Timestamp="@_sentAt.AddMinutes(2)" AvatarColor="Color.Primary">
        <TwBubble>Not yet, the last build is still running.</TwBubble>
    </TwMessage>
</div>

CSHARP

@code {
    private readonly DateTime _sentAt = new(2026, 10, 19, 9, 30, 0, DateTimeKind.Local);
}

Your own messages

Set Align to MessageAlign.End for the current user's messages. The avatar moves to the end edge, and any TwBubble inside follows the alignment and points its tip at the avatar.

Assistant9:30 AM

How can I help today?

You9:31 AM

Summarise yesterday's support tickets, please.

RAZOR

<div role="log" aria-label="Conversation" class="flex flex-col gap-6">
    <TwMessage Author="Assistant" AvatarIcon="Icon.Robot" AvatarColor="Color.Info" Timestamp="@_sentAt">
        <TwBubble>How can I help today?</TwBubble>
    </TwMessage>
    <TwMessage Author="You" Align="MessageAlign.End" Timestamp="@_sentAt.AddMinutes(1)" AvatarColor="Color.Primary">
        <TwBubble Variant="BubbleVariant.Filled">Summarise yesterday's support tickets, please.</TwBubble>
    </TwMessage>
</div>

CSHARP

@code {
    private readonly DateTime _sentAt = new(2026, 10, 19, 9, 30, 0, DateTimeKind.Local);
}

Continued messages

Set Continued on a message that follows another from the same author. Its avatar and header are hidden from view so the messages read as one group, but the author and time are still read out to screen readers.

Jane Doe9:30 AM

Quick update on the launch.

The copy is signed off.

Images are going in this afternoon.

RAZOR

<div role="log" aria-label="Conversation" class="flex flex-col gap-2">
    <TwMessage Author="Jane Doe" Timestamp="@_sentAt">
        <TwBubble>Quick update on the launch.</TwBubble>
    </TwMessage>
    <TwMessage Author="Jane Doe" Timestamp="@_sentAt" Continued>
        <TwBubble Tail="false">The copy is signed off.</TwBubble>
    </TwMessage>
    <TwMessage Author="Jane Doe" Timestamp="@_sentAt.AddMinutes(1)" Continued>
        <TwBubble Tail="false">Images are going in this afternoon.</TwBubble>
    </TwMessage>
</div>

CSHARP

@code {
    private readonly DateTime _sentAt = new(2026, 10, 19, 9, 30, 0, DateTimeKind.Local);
}

Footer

Use Footer for actions or a delivery state under the message. Give icon buttons an AriaLabel.

Assistant9:30 AM

Here is a draft reply for the customer.

Generated in 2.1s

RAZOR

<TwMessage Author="Assistant" AvatarIcon="Icon.Robot" AvatarColor="Color.Info" Timestamp="@_sentAt">
    <ChildContent>
        <TwBubble>Here is a draft reply for the customer.</TwBubble>
    </ChildContent>
    <Footer>
        <TwIcon Icon="Icon.Clipboard" AriaLabel="Copy reply" Tooltip="Copy" OnClick="@(() => { })" />
        <TwIcon Icon="Icon.Arrow_Clockwise" AriaLabel="Regenerate reply" Tooltip="Regenerate" OnClick="@(() => { })" />
        <span>Generated in 2.1s</span>
    </Footer>
</TwMessage>

CSHARP

@code {
    private readonly DateTime _sentAt = new(2026, 10, 19, 9, 30, 0, DateTimeKind.Local);
}

An assistant conversation

The chat components work together: TwMarker for the steps an assistant took and for date separators, TwAttachment for files, and TwBubble reactions for feedback.

Today

You9:30 AM

q3-sales.xlsx47.1 KB · XLSX

Which region grew the most last quarter?

Assistant9:31 AM

Read q3-sales.xlsx0.4s

Compared regions1.2s

The North region grew the most, with sales up 18% on the quarter before.

RAZOR

<div role="log" aria-label="Conversation with the assistant" class="flex flex-col gap-6">
    <TwMarker Variant="MarkerVariant.Separator" Label="Today" />
    <TwMessage Author="You" Align="MessageAlign.End" Timestamp="@_sentAt" AvatarColor="Color.Primary">
        <TwAttachment FileName="q3-sales.xlsx" FileSize="48_230" />
        <TwBubble Variant="BubbleVariant.Filled">Which region grew the most last quarter?</TwBubble>
    </TwMessage>
    <TwMessage Author="Assistant" AvatarIcon="Icon.Robot" AvatarColor="Color.Info" Timestamp="@_sentAt.AddMinutes(1)">
        <TwMarker Status="MarkerStatus.Succeeded" Label="Read q3-sales.xlsx" Detail="0.4s" />
        <TwMarker Status="MarkerStatus.Succeeded" Label="Compared regions" Detail="1.2s" />
        <TwBubble Reactions="@_reactions" OnReactionClick="ToggleReaction">The North region grew the most, with sales up 18% on the quarter before.</TwBubble>
    </TwMessage>
</div>

CSHARP

@code {
    private readonly List<BubbleReaction> _reactions =
    [
        new() { Emoji = "👍", Label = "Helpful", Count = 2 },
        new() { Emoji = "👎", Label = "Not helpful", Count = 0 }
    ];
    
    private static void ToggleReaction(BubbleReaction reaction)
    {
        reaction.Reacted = !reaction.Reacted;
        reaction.Count += reaction.Reacted ? 1 : -1;
    }
}

Accessibility

Each message is an article named by its author and time, so screen reader users can jump from message to message. The avatar is decoration, since the author's name is written beside it. A continued message keeps its author and time for screen readers. Put the conversation in a container with role="log" and an aria-label, so new messages are announced politely as they arrive.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwMessageTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Base`	string
`AvatarSpacer`	string
`Content`	string
`Header`	string
`Author`	string
`Timestamp`	string
`Footer`	string

Full reference: TwMessageTheme on the API docs.

TwMessage

Basic usage

Your own messages

Continued messages

Footer

An assistant conversation

Accessibility

Keyboard navigation

Theme configuration