# Chat Der Chat kombiniert den MessageThread mit einer Texteingabe. ```tsx import { Combine, Avatar, Button, Chat, Content, Header, Initials, Message, MessageSeparator, MessageThread, Text, TextArea, } from "@mittwald/flow-react-components"; Ticket geöffnet

Max Mustermann 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, 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.

John Doe John Doe

<Button color="success">Senden</Button>
</Chat>
```

---

# Best Practices

- Setze immer ein `aria-label` an der Texteingabe, da sie in der Regel kein
  sichtbares Label hat.
- Wähle die `height` Property so, dass genug Platz zum Lesen bleibt.

---

# Kombiniere mit ...

## FileField

Erweitere einen Chat um eine Uploadfunktion: Über ein
[FileField](https://flow.mittwald.de/components/form-controls/file-field) wählen User Dateien aus, die
dann in einer [FileCardList](https://flow.mittwald.de/components/upload/file-card-list) dargestellt
werden.

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

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

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

## Markdown Editor

Statt einer [TextArea](https://flow.mittwald.de/components/form-controls/text-area) kann auch der
[MarkdownEditor](https://flow.mittwald.de/components/form-controls/markdown-editor) als Texteingabe
verwendet werden.

```tsx
import {
  Combine,
  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>
        <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, 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>
        <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.
        </Text>
      </Content>
    </Message>
  </MessageThread>
  <MarkdownEditor
    aria-label="Nachricht"
    rows={3}
    autoResizeMaxRows={10}
  />
  <Button color="success">Senden</Button>
</Chat>
```

## React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component
[Form (React Hook Form)](https://flow.mittwald.de/components/react-hook-form/form).

```tsx
import {
  Combine,
  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>
            <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,
              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>Submit</SubmitButton>
      </Form>
    </Chat>
  );
}
```

---

# Properties

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