# Message

Eine Message stellt Nachrichten mit Autor-Informationen, Datum und Aktionen übersichtlich dar.

```tsx
import {
  Combine,
  Avatar,
  Button,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Header,
  Initials,
  MenuItem,
  Message,
  Text,
} from "@mittwald/flow-react-components";

<Message>
  <Header>
    <ContextMenuTrigger>
      <Button />
      <ContextMenu>
        <MenuItem>Bearbeiten</MenuItem>
        <MenuItem>Löschen</MenuItem>
      </ContextMenu>
    </ContextMenuTrigger>
    <Combine>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <strong>Max Mustermann</strong>
        Organisationsinhaber
      </Text>
    </Combine>
    <Text>01.09.2024, 12:45</Text>
  </Header>

  <Content>
    <Text>
      Lorem ipsum dolor sit amet, consetetur sadipscing
      elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet.
    </Text>
  </Content>
</Message>
```

---

# Best Practices

- Gruppiere mehrere Messages in einem
  [MessageThread](https://flow.mittwald.de/04-components/chat/message-thread).
- Halte das [ContextMenu](https://flow.mittwald.de/04-components/actions/context-menu) schlank. Es
  enthält nur direkt relevante Aktionen wie Bearbeiten und Löschen.

---

# Type

Eine Message hat im Default den Type `responder`. Mit dem Type `sender` ändern
sich Hintergrundfarbe und Anordnung der Message.

```tsx
import {
  Combine,
  Avatar,
  Button,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Header,
  Initials,
  MenuItem,
  Message,
  Text,
} from "@mittwald/flow-react-components";

<Message type="sender">
  <Header>
    <ContextMenuTrigger>
      <Button />
      <ContextMenu>
        <MenuItem>Bearbeiten</MenuItem>
        <MenuItem>Löschen</MenuItem>
      </ContextMenu>
    </ContextMenuTrigger>
    <Combine>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <strong>Max Mustermann</strong>
        Organisationsinhaber
      </Text>
    </Combine>
    <Text>01.09.2024, 12:45</Text>
  </Header>

  <Content>
    <Text>
      Lorem ipsum dolor sit amet, consetetur sadipscing
      elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet.
    </Text>
  </Content>
</Message>
```

---

# Custom Color

Über die `color` Property lässt sich eine Message gezielt hervorheben, etwa als
System-Nachricht oder interne Notiz. Setze für den Text eine statische Farbe wie
`dark-static` oder `light-static`, damit er unabhängig vom Theme lesbar bleibt.

```tsx
import {
  Content,
  Message,
  Text,
} from "@mittwald/flow-react-components";

<Message color="#ffeedd">
  <Content>
    <Text color="dark-static">
      Lorem ipsum dolor sit amet, consetetur sadipscing
      elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet.
    </Text>
  </Content>
</Message>
```

---

# Kombiniere mit ...

## ActionGroup

Ergänze eine Message um einen [Button](https://flow.mittwald.de/04-components/actions/button) oder eine
[ActionGroup](https://flow.mittwald.de/04-components/actions/action-group). Die Actions sollten immer in
direktem Bezug zum Inhalt der Message stehen.

```tsx
import {
  Combine,
  Avatar,
  Button,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Header,
  Initials,
  MenuItem,
  Message,
  Text,
  ActionGroup,
} from "@mittwald/flow-react-components";

<Message>
  <Header>
    <ContextMenuTrigger>
      <Button />
      <ContextMenu>
        <MenuItem>Bearbeiten</MenuItem>
        <MenuItem>Löschen</MenuItem>
      </ContextMenu>
    </ContextMenuTrigger>
    <Combine>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <b>Max Mustermann</b>
        Organisationsinhaber
      </Text>
    </Combine>
    <Text>01.09.2024, 12:45</Text>
  </Header>

  <Content>
    <Text>
      Lorem ipsum dolor sit amet, consetetur sadipscing
      elitr, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet.
    </Text>
  </Content>
  <ActionGroup>
    <Button variant="soft" color="secondary">
      Secondary
    </Button>
    <Button>Primary</Button>
  </ActionGroup>
</Message>
```

## Markdown

Nutze die [Markdown](https://flow.mittwald.de/04-components/content/markdown)-Component, um den Text
einer Message als Markdown zu rendern.

```tsx
import {
  Combine,
  Avatar,
  Button,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Header,
  Initials,
  MenuItem,
  Message,
  Text,
  Markdown,
} from "@mittwald/flow-react-components";

<Message>
  <Header>
    <ContextMenuTrigger>
      <Button />
      <ContextMenu>
        <MenuItem>Bearbeiten</MenuItem>
        <MenuItem>Löschen</MenuItem>
      </ContextMenu>
    </ContextMenuTrigger>
    <Combine>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <strong>Max Mustermann</strong>
        Organisationsinhaber
      </Text>
    </Combine>
    <Text>01.09.2024, 12:45</Text>
  </Header>

  <Content>
    <Markdown>
      Lorem ipsum dolor sit amet, consetetur **sadipscing
      elitr**, sed diam nonumy eirmod tempor invidunt ut
      labore et dolore magna aliquyam erat, sed *diam
      voluptua*. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum ***dolor sit amet***.
    </Markdown>
  </Content>
</Message>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |
| `color` | `string` | - | A custom background color of the message as a CSS color value. |
| `elementType` | `"article" \| ExoticComponent<{}> \| "li"` | - | The HTML element or React component rendered as the elements root. |
| `type` | `"responder" \| "sender"` | `"responder"` | Determines the color and orientation of the message. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |