Message

Overview

Message renders a single chat turn. It picks layout, alignment and surface treatment from the from role ("user" vs "assistant"), then lets you compose the inside with content, attachments, a toolbar and branch navigation. The streaming markdown is rendered by MessageResponse, which is memoized to keep large turns smooth while tokens stream in.

Use it as the atomic unit of any conversation: one Message per turn, composed with siblings like Reasoning, Sources or InlineCitation.

Preview

Assistant with toolbar

User message

Rich markdown response

import { Message } from "@gremorie/rx-ai";

User and assistant pair

Installation

Usage

import {
  Message,
  MessageContent,
  MessageResponse,
} from "@gremorie/rx-ai";

export function Example() {
  return (
    <Message from="assistant">
      <MessageContent>
        <MessageResponse>{markdown}</MessageResponse>
      </MessageContent>
    </Message>
  );
}

import { Component } from "@angular/core";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@gremorie/ng-ai";

@Component({
selector: "app-example",
standalone: true,
imports: [Message, MessageContent, MessageResponse],
template: `     <message from="assistant">
      <message-content>
        <message-response>{{ markdown }}</message-response>
      </message-content>
    </message>
  `,
})
export class ExampleComponent {
readonly markdown = "Hello! How can I help you today?";
}

API

<Message>

Extends all HTMLAttributes<HTMLDivElement>.

<MessageContent>

Container for the turn body. Picks up styling from the parent Message via group selectors (e.g. user turns get a rounded secondary surface).

Extends all HTMLAttributes<HTMLDivElement>.

<MessageResponse>

Wraps Streamdown for incremental token-by-token rendering.

<MessageAttachments> / <MessageAttachment>

<MessageToolbar> / <MessageActions> / <MessageAction>

<MessageBranch> (compound)

Provides context for MessageBranchContent, MessageBranchSelector, MessageBranchPrevious, MessageBranchNext and MessageBranchPage.

Composition

1. <Message> sets alignment and exposes the role via group classes.
2. <MessageContent> is the surface that adapts to user vs assistant.
3. <MessageResponse> renders streaming markdown inside the content.
4. <MessageAttachments> / <MessageAttachment> sit above the content for file previews.
5. <MessageToolbar> + <MessageActions> + <MessageAction> appear under the content for copy, regenerate, like and other affordances.
6. <MessageBranch> wraps several <MessageBranchContent> siblings so users can step through alternate completions.

Variations

Streaming assistant response

Use while tokens are still arriving. Pair with Reasoning to expose thinking.

<Message from="assistant">
  <MessageContent>
    <Reasoning isStreaming={status === "streaming"}>
      <ReasoningTrigger />
      <ReasoningContent>{thinking}</ReasoningContent>
    </Reasoning>
    <MessageResponse>{partialMarkdown}</MessageResponse>
  </MessageContent>
</Message>

User turn with attachments

User attachments float above the bubble. The attachment row aligns to the trailing edge to match the bubble's right alignment.

<Message from="user">
  <MessageAttachments>
    {files.map((file) => (
      <MessageAttachment
        key={file.url}
        data={file}
        onRemove={() => removeFile(file.url)}
      />
    ))}
  </MessageAttachments>
  <MessageContent>{prompt}</MessageContent>
</Message>

Assistant turn with branch navigation and toolbar

Lets users walk through regenerated alternates and act on the current one.

<Message from="assistant">
  <MessageBranch>
    <MessageBranchContent>
      <MessageContent>
        <MessageResponse>{variantA}</MessageResponse>
      </MessageContent>
    </MessageBranchContent>
    <MessageBranchContent>
      <MessageContent>
        <MessageResponse>{variantB}</MessageResponse>
      </MessageContent>
    </MessageBranchContent>
  </MessageBranch>
  <MessageToolbar>
    <MessageBranchSelector from="assistant">
      <MessageBranchPrevious />
      <MessageBranchPage />
      <MessageBranchNext />
    </MessageBranchSelector>
    <MessageActions>
      <MessageAction tooltip="Copy" onClick={copy}>
        <CopyIcon />
      </MessageAction>
      <MessageAction tooltip="Regenerate" onClick={regenerate}>
        <RefreshIcon />
      </MessageAction>
    </MessageActions>
  </MessageToolbar>
</Message>

Accessibility

• Keyboard: MessageAction and branch controls are real Buttons, so they participate in normal Tab order and respond to Enter / Space.
• ARIA: MessageAction reads tooltip (or label) as sr-only text, so icon-only actions still announce. MessageBranchPrevious and MessageBranchNext carry explicit aria-labels ("Previous branch", "Next branch"). MessageAttachment remove buttons announce as "Remove attachment".
• Screen readers: Branch controls disable themselves (and announce as disabled) whenever there is only one branch. The selector hides itself entirely below two branches.
• Focus management: Toolbar actions stay in document order so screen readers narrate the turn before its affordances.

Related

• Conversation - scroll-to-bottom container for a stream of messages
• Reasoning - collapsible thinking block to embed inside a Message
• Sources - cite the documents an assistant turn used
• InlineCitation - inline footnote-style citations inside MessageResponse