# Chat

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

## Overview

# Playground

Verwende `<Chat />`, um einen Chat darzustellen.

Der Chat kombiniert dabei den
[MessageThread](/04-components/chat/message-thread/overview) 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.

```tsx
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](/04-components/form-controls/file-field/overview) genutzt werden,
über das User Dateien auswählen können. Die hochgeladenen Dateien können dann in
einer [FileCardList](/04-components/upload/file-card-list/overview) dargestellt
werden.

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

<Chat>
  <MessageThread>
    <Message>
      <Header>
        <Align>
          <Avatar>
            <Initials>Max Mustermann</Initials>
          </Avatar>
          <Text>
            <strong>Max Mustermann</strong>
          </Text>
        </Align>
      </Header>
      <Content>
        <Text>
          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>
  </MessageThread>

  <TextArea
    aria-label="Nachricht"
    rows={3}
    autoResizeMaxRows={10}
  />

  <FileField>
    <Button variant="outline" color="secondary">
      Datei anhängen
    </Button>
  </FileField>
  <Button color="accent">Senden</Button>
  <FileCardList>
    <FileCard name="Hochgeladene Datei 1" />
    <FileCard name="Hochgeladene Datei 2" />
  </FileCardList>
</Chat>
```

---

## React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component
[Form (React Hook Form)](/04-components/react-hook-form/form/overview) zu
finden.

```tsx
import {
  Align,
  Avatar,
  Chat,
  Content,
  Header,
  Initials,
  Message,
  MessageThread,
  Text,
  TextArea,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Field,
  Form,
  SubmitButton,
} from "@mittwald/flow-react-components/react-hook-form";

export default () => {
  const form = useForm<{ message: string }>();

  return (
    <Chat>
      <MessageThread>
        <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>
      </MessageThread>
      <Form
        form={form}
        onSubmit={() => {
          console.log("submitted");
        }}
      >
        <Field name="message">
          <TextArea
            aria-label="message"
            rows={3}
            autoResizeMaxRows={10}
          />
        </Field>
        <SubmitButton color="accent">Submit</SubmitButton>
      </Form>
    </Chat>
  );
}
```

## Markdown Editor

Statt einer TextArea kann auch der
[MarkdownEditor](/04-components/form-controls/markdown-editor/overview)
verwendet werden.

```tsx
import {
  Align,
  Avatar,
  Button,
  Chat,
  Content,
  Header,
  Initials,
  MarkdownEditor,
  Message,
  MessageSeparator,
  MessageThread,
  Text,
} 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>
  <MarkdownEditor
    aria-label="Nachricht"
    rows={3}
    autoResizeMaxRows={10}
  />
  <Button color="accent">Senden</Button>
</Chat>
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `height` | `Height<string \| number>` | - | - |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |


## Guidelines

# Grundlagen

Die Chat-Component dient dem Aufbau eines vollständigen Chat-Interfaces. Sie
kombiniert einzelne Components wie den
[MessageThread](/04-components/chat/message-thread/overview) und die Texteingabe
durch die [TextArea](/04-components/form-controls/text-area/overview) zu einer
funktionalen Einheit. Dadurch entfällt für Entwickler die Notwendigkeit, diese
Components manuell zusammenzustellen.

## Best practices

Achte bei der Verwendung einer Chat-Component darauf, dass ...

- das `aria-label` der Texteingabe bei abweichender Funktionalität angepasst
  wird.
- der Wert der `height` Property gut gewählt ist, um ausreichend Platz zum Lesen
  des Chats zu gewährleisten.

## Verwendung

Verwende die Chat-Component, um einen konsistenten und wiederverwendbaren
Chatbereich in einer Anwendung bereitzustellen.