# Message

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

## Overview

# Playground

Verwende `<Message />`, um eine Message darzustellen.

```tsx
import {
  Align,
  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>
    <Align>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <strong>Max Mustermann</strong>
        Organisationsinhaber
      </Text>
    </Align>
    <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>
```

---

# Type

Eine Message hat im Default den Type `responder`. Stellt man diese Property auf
`sender`, ändert sich die Hintergrundfarbe und Anordnung der Message.

```tsx
import {
  Align,
  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>
    <Align>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <strong>Max Mustermann</strong>
        Organisationsinhaber
      </Text>
    </Align>
    <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>
```

---

# Mit Action

Eine Message kann um einen [Button ](/04-components/actions/button/overview)
oder eine [ActionGroup](/04-components/actions/action-group/overview) erweitert
werden. Die Actions sollten dabei immer in direktem Bezug zum Inhalt der Message
stehen und passende Interaktion ermöglichen.

```tsx
import {
  Align,
  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>
    <Align>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <b>Max Mustermann</b>
        Organisationsinhaber
      </Text>
    </Align>
    <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>
```

---

# Custom Color

Im Default sind `sender` blau und `responder` grau hinterlegt. Wenn eine
Nachricht gezielt hervorgehoben werden soll, zum Beispiel als System-Nachricht
oder als interne Notiz, kann der Message eine customColor mitgegeben werden.
Dabei muss der Entwickler selbst auf einen ausreichenden Kontrast zur Textfarbe
achten.

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

<Message color="#ffeedd">
  <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>
```

---

# Kombiniere mit ...

## Markdown

Um eine Texteingabe innerhalb der Message als
[Markdown](/04-components/content/markdown/overview) zu rendern, kann die
`<Markdown />`-Component verwendet werden.

```tsx
import {
  Align,
  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>
    <Align>
      <Avatar>
        <Initials>Max Mustermann</Initials>
      </Avatar>
      <Text>
        <strong>Max Mustermann</strong>
        Organisationsinhaber
      </Text>
    </Align>
    <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>
```