# MessageThread

Der MessageThread gruppiert mehrere Messages in einem zusammenhängenden Gesprächsverlauf.

## Overview

# Playground

Schließe mehrere [Messages](/04-components/chat/message/overview) in einem
`<MessageThread />` ein, um diese übersichtlich darzustellen. Nutze einen
`<MessageSeparator />`, um wichtige Ereignisse (z. B. Statusänderungen oder der
Eintritt neuer Teilnehmer) hervorzuheben.

```tsx
import {
  Align,
  Avatar,
  Content,
  Header,
  Initials,
  Message,
  MessageSeparator,
  MessageThread,
  Text,
} from "@mittwald/flow-react-components";

<MessageThread>
  <Message type="sender">
    <Header>
      <Align>
        <Avatar>
          <Initials>Max Mustermann</Initials>
        </Avatar>
        <Text>
          <strong>Max Mustermann</strong>
        </Text>
      </Align>
    </Header>
    <Content>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Cumque eius quam quas vel voluptas, ullam
        aliquid fugit. Voluptate harum accusantium rerum
        ullam modi blanditiis vitae.
      </Text>
    </Content>
  </Message>

  <Message type="responder">
    <Header>
      <Align>
        <Avatar>
          <Initials>John Doe</Initials>
        </Avatar>
        <Text>
          <strong>John Doe</strong>
        </Text>
      </Align>
    </Header>
    <Content>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Cumque eius quam quas vel voluptas, ullam
        aliquid fugit. Voluptate harum accusantium rerum
        ullam modi blanditiis vitae, laborum ea tempore,
        dolore voluptas. Earum pariatur, similique corrupti
        id officia perferendis. Labore, similique. Earum,
        quas in. At dolorem corrupti blanditiis nulla
        deserunt laborum! Corrupti delectus aspernatur nihil
        nulla obcaecati ipsam porro sequi rem? Quam.
      </Text>
    </Content>
  </Message>

  <MessageSeparator>Ticket geschlossen</MessageSeparator>

  <Message type="sender">
    <Header>
      <Align>
        <Avatar>
          <Initials>Max Mustermann</Initials>
        </Avatar>
        <Text>
          <strong>Max Mustermann</strong>
        </Text>
      </Align>
    </Header>
    <Content>
      <Text>Lorem ipsum dolor sit amet.</Text>
    </Content>
  </Message>
</MessageThread>
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |


## Guidelines

# Grundlagen

Der MessageThread gruppiert einzelne
[Messages](/04-components/chat/message/overview) übersichtlich und macht so
Gesprächsverläufe besser verständlich. Typischerweise wird er in einem
[Chat](/04-components/chat/chat/overview) eingesetzt

## Best practices

Achte bei der Verwendung des MessageThread darauf, dass ...

- die zeitliche Abfolge der Messages konsistent ist.
- Absender und Antwortender in einer
  [Message](/04-components/chat/message/overview) über das `type`-Property
  korrekt als `sender` bzw. `responder` ausgezeichnet werden.
- wichtige Ereignisse (z. B. Statusänderungen oder der Eintritt neuer
  Teilnehmer) mittels `<MessageSeparator />` hervorgehoben werden.

## Verwendung

Verwende den MessageThread, um ...

- einen Gesprächsverlauf mit mehreren
  [Messages](/04-components/chat/message/overview) übersichtlich zu
  strukturieren.
- ihn im [Chat](/04-components/chat/chat/overview) mit einer Texteingabe zu
  einem vollständigen Chat-Interface zu kombinieren.