Components

Chat

Der Chat kombiniert den MessageThread mit einer Texteingabe zur Darstellung eines vollständigen Chat-Interfaces.GitHub

Playground

Verwende <Chat />, um einen Chat darzustellen.

Der Chat kombiniert dabei den MessageThread mit einem Textinput. Mit der height Property lässt sich die Höhe des Chats festlegen. Gleichzeitig sorgt sie dafür, dass die Texteingabe am unteren Rand platziert wird.

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

<Chat height={400}>
  <MessageThread>
    <MessageSeparator>Ticket geöffnet</MessageSeparator>
    <Message>
      <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, 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>
    <Message type="sender">
      <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.
        </Text>
      </Content>
    </Message>
  </MessageThread>
  <TextArea
    aria-label="Nachricht"
    rows={3}
    autoResizeMaxRows={10}
  />
  <Button color="accent">Senden</Button>
</Chat>

Kombiniere mit ...

Upload

Ein Chat kann um eine Uploadfunktion erweitert werden. Dafür sollte ein FileField genutzt werden, über das User Dateien auswählen können. Die hochgeladenen Dateien können dann in einer FileCardList dargestellt werden.

  • Hochgeladene Datei 1
  • Hochgeladene Datei 2

React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component Form (React Hook Form) zu finden.

Markdown Editor

Statt einer TextArea kann auch der MarkdownEditor verwendet werden.

Overview