Message

Standalone message display component.

import { Message } from "@arlopass/react-ui";

---

Parts

Name	Element	Purpose
Message.Root	div	Outermost wrapper. Provides message context to children.
Message.Content	div	Renders the text/markdown content of the message.
Message.Role	span	Displays the message role (user, assistant, system).
Message.Timestamp	time	Renders the message timestamp.
Message.Status	span	Shows message delivery status (pending, sent, error).
Message.ToolCalls	div	Slot for rendering tool-call information within the message.

---

Message.Root props

---

Standalone usage

Use Message on its own to render a single message outside of a Chat context.

import { Message } from "@arlopass/react-ui";

function SingleMessage({ msg }) {
  return (
    <Message.Root message={msg}>
      <Message.Role />
      <Message.Content />
      <Message.Timestamp />
      <Message.Status />
      <Message.ToolCalls />
    </Message.Root>
  );
}

Inside Chat.Messages

Compose with Chat.Message inside the Chat.Messages render prop for full chat integration.

import { Chat, Message } from "@arlopass/react-ui";

<Chat.Root systemPrompt="You are helpful.">
  <Chat.Messages>
    {(messages) =>
      messages.map((msg) => (
        <Chat.Message key={msg.id} message={msg}>
          <Message.Root message={msg}>
            <Message.Role />
            <Message.Content />
          </Message.Root>
        </Chat.Message>
      ))
    }
  </Chat.Messages>
  <Chat.Input />
  <Chat.SendButton>Send</Chat.SendButton>
</Chat.Root>;

---

Data attributes

Styling

/* Role-based message styling */
[data-role="user"] {
  justify-content: flex-end;
}

[data-role="assistant"] {
  justify-content: flex-start;
}

[data-status="error"] {
  border-left: 3px solid red;
}