# Standalone Message Display Component

```tsx
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.

```tsx title="Message display"
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.

```tsx title="Inside Chat"
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"` | —       | Set on Message.Root. The message role.              |
| `data-status`| `"pending" | "sent" | "error"`  | —       | Set on Message.Root. Delivery status of the message.|

### Styling

```css title="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;
}
```

Standalone message display component.

```tsx
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.

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