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

Prop	Type	Default	Description
`message`	`TrackedChatMessage`	—	The message object to display.
`children`	`ReactNode`	—	Sub-components to render inside the message.

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

Prop	Type	Default	Description
`data-role`	`"user"	"assistant"	"system"`
`data-status`	`"pending"	"sent"	"error"`

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;
}

Standalone message display component.

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

Parts

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";

### Inside Chat.Messages

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

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

---

### Data Attributes

### Styling

```css
/* 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;
}