MessageThread

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

Grundlagen

Der MessageThread gruppiert einzelne Messages übersichtlich und macht so Gesprächsverläufe besser verständlich. Typischerweise wird er in einem Chat eingesetzt

Best Practices

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

die zeitliche Abfolge der Messages konsistent ist.
Absender und Antwortender in einer Message ü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 übersichtlich zu strukturieren.
ihn im Chat mit einer Texteingabe zu einem vollständigen Chat-Interface zu kombinieren.

Playground

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

Message by
Max Mustermann
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.
Message by
John Doe
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.
Status update
Ticket geschlossen
Message by
Max Mustermann
Lorem ipsum dolor sit amet.

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>

Properties