Playground
Wird für den Chat eine Höhe über das height Property festgelegt, wird der
Bereich der Eingabe-Elemente ganz unten platziert, außerdem wird der
MessageThread scrollbar, sobald der verfügbare Platz nicht mehr ausreicht.
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> <b>Max Mustermann</b> </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> <b>John Doe</b> </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={1} autoResizeMaxRows={4} /> <Button color="accent">Senden</Button> </Chat>
Mit Upload
Hochgeladene Datei 1
Hochgeladene Datei 2
import { FileCard, FileCardList, Align, Avatar, Button, Chat, Content, Header, Initials, Message, MessageThread, Text, TextArea, IconAttachment, } from "@mittwald/flow-react-components"; <Chat> <MessageThread> <Message> <Header> <Align> <Avatar> <Initials>Max Mustermann</Initials> </Avatar> <Text> <b>Max Mustermann</b> </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> <Button color="secondary" variant="plain" aria-label="Datei anhängen" > <IconAttachment /> </Button> <TextArea aria-label="Nachricht" rows={1} autoResizeMaxRows={4} /> <Button color="accent">Senden</Button> <FileCardList> <FileCard name="Hochgeladene Datei 1" /> <FileCard name="Hochgeladene Datei 2" /> </FileCardList> </Chat>
Mit Form
import { Align, Avatar, Button, Chat, Content, Header, Initials, Message, MessageThread, Text, TextArea, } from "@mittwald/flow-react-components"; import { useForm } from "react-hook-form"; import { Field, Form, } 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> <b>Max Mustermann</b> </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={1} autoResizeMaxRows={4} /> </Field> <Button color="accent" type="submit"> Submit </Button> </Form> </Chat> ); }