extend chat area content examples

Author: haschek

src/components/Chat/stories/ChatArea.stories.tsx

@@ -1,8 +1,17 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatArea, ChatContent, ChatContentCollapsed, ChatField } from "../../../index";
+import {
+    ChatArea,
+    ChatContent,
+    ChatContentCollapsed,
+    ChatField,
+    ContentGroup,
+    Spacing,
+    TitleSubsection,
+} from "../../../index";
 
+import { BasicExample as ContentGroupExample } from "./../../ContentGroup/ContentGroup.stories";
 import { Default as ShortChatBubble, LongChatBubble } from "./ChatContent.stories";
 import { Default as ChatFieldExample } from "./ChatField.stories";
 
@@ -24,7 +33,21 @@ Default.args = {
     chatField: <ChatField {...ChatFieldExample.args} />,
     children: [
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
-        <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
+        <ChatContentCollapsed textReducerProps={{ maxNodes: 1 }}>
+            <ChatContent
+                avatar={undefined}
+                displayType="free"
+                statusLine={
+                    <>
+                        <strong>Bot</strong> right now
+                    </>
+                }
+            >
+                <TitleSubsection>Some technical content</TitleSubsection>
+                <Spacing size="small" />
+                <ContentGroup {...ContentGroupExample.args} style={{ marginRight: "2px" }} />
+            </ChatContent>
+        </ChatContentCollapsed>,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContentCollapsed>
             <ChatContent {...LongChatBubble.args} />

src/components/Chat/stories/ChatContent.stories.tsx

@@ -54,7 +54,7 @@ LongChatBubble.args = {
     displayType: "simple",
     children: (
         <HtmlContentBlock>
-            <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+            <LoremIpsum p={7} avgSentencesPerParagraph={7} random={false} />
         </HtmlContentBlock>
     ),
     limitHeight: true,