Components

Integrations

MessageThread

Der MessageThread gruppiert Messages zu einem Gesprächsverlauf.
GitHubMarkdown
  • 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 {
  Combine,
  Avatar,
  Content,
  Header,
  Initials,
  Message,
  MessageSeparator,
  MessageThread,
  Text,
} from "@mittwald/flow-react-components";

<MessageThread>
  <Message type="sender">
    <Header>
      <Combine>
        <Avatar>
          <Initials>Max Mustermann</Initials>
        </Avatar>
        <Text>
          <strong>Max Mustermann</strong>
        </Text>
      </Combine>
    </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>
      <Combine>
        <Avatar>
          <Initials>John Doe</Initials>
        </Avatar>
        <Text>
          <strong>John Doe</strong>
        </Text>
      </Combine>
    </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>
      <Combine>
        <Avatar>
          <Initials>Max Mustermann</Initials>
        </Avatar>
        <Text>
          <strong>Max Mustermann</strong>
        </Text>
      </Combine>
    </Header>
    <Content>
      <Text>Lorem ipsum dolor sit amet.</Text>
    </Content>
  </Message>
</MessageThread>

Best Practices

  • Halte die zeitliche Abfolge der Messages konsistent.
  • Zeichne Absender und Antwortender über das type-Property als sender bzw. responder aus.
  • Hebe wichtige Ereignisse mit einem <MessageSeparator /> hervor. Dazu zählen etwa Statusänderungen oder der Eintritt neuer Teilnehmer.

Properties

PropertyTypeDefaultDescription
childrenReactNode-
classNamestring-The elements class name.
wrapWithReactElement<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.
refRef<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
keyKey-

Auf dieser Seite