add property to limit bubble height easily

Author: haschek

src/components/Chat/ChatContent.tsx

@@ -31,6 +31,11 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
      * If `left` is set then the avatar is on the left side, and the indentation on the right side.
      */
     alignment?: "left" | "right" | "block";
+    /**
+     * If set then the chat bubble only grows to a height of 50% of the viewport.
+     * In case you need to set other maximum heights then use the `style` property directly.
+     */
+    limitHeight?: boolean;
     /**
      * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
      * `children` need to a `string` then, otherwise it cannot be parsed.
@@ -49,6 +54,7 @@ export const ChatContent = ({
     displayType = "bubble",
     indentation = true,
     alignment = "left",
+    limitHeight,
     markdownProps,
     ...otherDivProps
 }: ChatContentProps) => {
@@ -58,6 +64,7 @@ export const ChatContent = ({
                 `${eccgui}-chat__content` +
                 ` ${eccgui}-chat__content--display-${displayType}` +
                 ` ${eccgui}-chat__content--align-${alignment}` +
+                (limitHeight ? ` ${eccgui}-chat__content--limitheight` : "") +
                 (className ? ` ${className}` : "")
             }
             {...otherDivProps}
@@ -90,7 +97,7 @@ export const ChatContent = ({
                     >
                         {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
                     </FlexibleLayoutItem>
-                    <FlexibleLayoutItem>{content}</FlexibleLayoutItem>
+                    <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{content}</FlexibleLayoutItem>
                 </FlexibleLayoutContainer>
             ) : (
                 content

src/components/Chat/_chat.scss

@@ -1,45 +1,55 @@
 .#{$eccgui}-chat__content {
-    --#{$eccgui}-chat__content-background: #{$light-gray5};
-
     position: relative;
     min-height: $button-height;
     padding: $eccgui-size-inline-whitespace;
+    overflow: auto;
     background-color: var(--#{$eccgui}-chat__content-background);
     border-radius: $pt-border-radius;
 }
 
 .#{$eccgui}-chat__content--display-free {
-    padding: 0;
+    padding: 1px 0;
 
     --#{$eccgui}-chat__content-background: transparent;
 }
 
 .#{$eccgui}-chat__content--display-bubble {
     margin-left: 0.5 * $eccgui-size-block-whitespace;
 
-    &::before {
-        position: absolute;
-        top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});
-        left: calc(-0.5 * #{$eccgui-size-block-whitespace} + 1px);
-        width: $eccgui-size-block-whitespace;
-        height: $eccgui-size-block-whitespace;
-        content: " ";
-        background-color: var(--#{$eccgui}-chat__content-background);
-        clip-path: polygon(0% 50%, 50% 0%, 50% 100%);
-    }
-
     &.#{$eccgui}-chat__content--align-right {
         margin-right: 0.5 * $eccgui-size-block-whitespace;
         margin-left: none;
+    }
+}
 
+.#{$eccgui}-chat__content-wrapper {
+    --#{$eccgui}-chat__content-background: #{$light-gray5};
+    &:has(.#{$eccgui}-chat__content--display-bubble) {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});
+            left: 0;
+            width: $eccgui-size-block-whitespace;
+            height: $eccgui-size-block-whitespace;
+            content: " ";
+            background-color: var(--#{$eccgui}-chat__content-background);
+            transform: rotate(45deg);
+        }
+    }
+    &:has(.#{$eccgui}-chat__content--display-bubble.#{$eccgui}-chat__content--align-right) {
         &::before {
-            right: calc(-0.5 * #{$eccgui-size-block-whitespace} + 1px);
+            right: 0;
             left: auto;
-            clip-path: polygon(100% 50%, 50% 0%, 50% 100%);
         }
     }
 }
 
+.#{$eccgui}-chat__content--limitheight {
+    max-height: 50vh;
+}
+
 .eccgui-chat__inputfield {
     min-height: mini-units(9);
     max-height: 39vh;

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

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatContent, Depiction, Icon, OverflowText } from "../../../index";
+import { ChatContent, Depiction, HtmlContentBlock, Icon, OverflowText } from "../../../index";
 
 import canonicalIcons from "./../../Icon/canonicalIconNames";
 
@@ -41,3 +41,14 @@ Default.args = {
         </OverflowText>
     ),
 };
+
+export const LongChatBubble = TemplateFull.bind({});
+LongChatBubble.args = {
+    ...Default.args,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+        </HtmlContentBlock>
+    ),
+    limitHeight: true,
+};