From 65723cb6f3382d98f765f3df79c9defbaec1f922 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 26 Aug 2025 16:47:33 +0200
Subject: [PATCH 01/29] fix story re storybook changes

---
 src/components/Tooltip/Tooltip.stories.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 7d0787537..671d7cf5b 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Tooltip } from "../../index";
 
@@ -34,6 +35,7 @@ Default.args = {
     children: "hover me",
     content: testContent,
     addIndicator: true,
+    onOpening: fn(),
 };
 
 export const MarkdownSupport = Template.bind({});

From dad204f9fdc6b4a060d5c54d7f86d5b42d11fdb0 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 26 Aug 2025 16:48:16 +0200
Subject: [PATCH 02/29] add component to display single chat contents

---
 CHANGELOG.md                                  |   5 +
 src/components/Chat/ChatContent.tsx           | 102 ++++++++++++++++++
 src/components/Chat/_chat.scss                |  41 +++++++
 src/components/Chat/index.ts                  |   1 +
 .../Chat/stories/ChatContent.stories.tsx      |  43 ++++++++
 src/components/index.scss                     |   1 +
 src/components/index.ts                       |   1 +
 7 files changed, 194 insertions(+)
 create mode 100644 src/components/Chat/ChatContent.tsx
 create mode 100644 src/components/Chat/_chat.scss
 create mode 100644 src/components/Chat/index.ts
 create mode 100644 src/components/Chat/stories/ChatContent.stories.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16a219613..ff1d4e884 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<ChatContent />`
+    -   displays single chat contents in a bubble, including options to add status line and avatar
+
 ## [24.4.1] - 2025-08-25
 
 ### Fixed
diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
new file mode 100644
index 000000000..90f37e7f7
--- /dev/null
+++ b/src/components/Chat/ChatContent.tsx
@@ -0,0 +1,102 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { DepictionProps } from "./../Depiction/Depiction";
+import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
+import { Spacing } from "./../Separation/Spacing";
+import { HtmlContentBlock, OverflowTextProps, WhiteSpaceContainer } from "./../Typography";
+
+export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
+    /**
+     * Should be a line of text, e.g. username, timestamp, ...
+     */
+    statusLine?: React.ReactElement<OverflowTextProps>;
+    /**
+     * How the chat content box is displayed.
+     */
+    displayType?: "free" | "simple" | "bubble";
+    /**
+     * A depiction used as avatar next to the content box.
+     */
+    avatar?: React.ReactElement<DepictionProps>;
+    /**
+     * If indented then the content box has some white space on one side.
+     */
+    indentation?: boolean;
+    /**
+     * How the content box and avatar is aligned.
+     * If `left` is set then the avatar is on the left side, and the indentation on the right side.
+     */
+    alignment?: "left" | "right" | "block";
+    /**
+     * 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.
+     */
+    markdownProps?: Omit<MarkdownProps, "children">;
+}
+
+/**
+ * Component to display singe chat contents, including avatar and status line.
+ */
+export const ChatContent = ({
+    className,
+    children,
+    statusLine,
+    avatar,
+    displayType = "bubble",
+    indentation = true,
+    alignment = "left",
+    markdownProps,
+    ...otherDivProps
+}: ChatContentProps) => {
+    const content = (
+        <div
+            className={
+                `${eccgui}-chat__content` +
+                ` ${eccgui}-chat__content--display-${displayType}` +
+                ` ${eccgui}-chat__content--align-${alignment}` +
+                (className ? ` ${className}` : "")
+            }
+            {...otherDivProps}
+        >
+            {statusLine && (
+                <HtmlContentBlock small>
+                    {statusLine}
+                    <Spacing size="small" />
+                </HtmlContentBlock>
+            )}
+            {markdownProps && typeof children === "string" ? (
+                <Markdown {...markdownProps}>{children}</Markdown>
+            ) : (
+                children
+            )}
+        </div>
+    );
+
+    return (
+        <WhiteSpaceContainer
+            marginLeft={alignment === "right" && indentation ? "xlarge" : undefined}
+            marginRight={alignment === "left" && indentation ? "xlarge" : undefined}
+        >
+            {avatar ? (
+                <FlexibleLayoutContainer noEqualItemSpace gapSize="tiny">
+                    <FlexibleLayoutItem
+                        growFactor={0}
+                        shrinkFactor={0}
+                        style={alignment === "right" ? { order: 1 } : undefined}
+                    >
+                        {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
+                    </FlexibleLayoutItem>
+                    <FlexibleLayoutItem>{content}</FlexibleLayoutItem>
+                </FlexibleLayoutContainer>
+            ) : (
+                content
+            )}
+        </WhiteSpaceContainer>
+    );
+};
+
+export default ChatContent;
diff --git a/src/components/Chat/_chat.scss b/src/components/Chat/_chat.scss
new file mode 100644
index 000000000..433e75f60
--- /dev/null
+++ b/src/components/Chat/_chat.scss
@@ -0,0 +1,41 @@
+.#{$eccgui}-chat__content {
+    --#{$eccgui}-chat__content-background: #{$light-gray5};
+
+    position: relative;
+    min-height: $button-height;
+    padding: $eccgui-size-inline-whitespace;
+    background-color: var(--#{$eccgui}-chat__content-background);
+    border-radius: $pt-border-radius;
+}
+
+.#{$eccgui}-chat__content--display-free {
+    padding: 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;
+
+        &::before {
+            right: calc(-0.5 * #{$eccgui-size-block-whitespace} + 1px);
+            left: auto;
+            clip-path: polygon(100% 50%, 50% 0%, 50% 100%);
+        }
+    }
+}
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
new file mode 100644
index 000000000..884f4c4d5
--- /dev/null
+++ b/src/components/Chat/index.ts
@@ -0,0 +1 @@
+export * from "./ChatContent";
diff --git a/src/components/Chat/stories/ChatContent.stories.tsx b/src/components/Chat/stories/ChatContent.stories.tsx
new file mode 100644
index 000000000..5ca7b837e
--- /dev/null
+++ b/src/components/Chat/stories/ChatContent.stories.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, Depiction, Icon, OverflowText } from "../../../index";
+
+import canonicalIcons from "./../../Icon/canonicalIconNames";
+
+const allIcons = new Map([
+    ...Object.keys(canonicalIcons).map((keyId) => {
+        return [`Icon: ${keyId}`, <Depiction image={<Icon name={keyId} />} />];
+    }),
+]);
+
+const exampleImages = {
+    None: undefined,
+    ...Object.fromEntries(allIcons),
+};
+
+export default {
+    title: "Components/Chat",
+    component: ChatContent,
+    argTypes: {
+        avatar: {
+            control: "select",
+            options: Object.keys(exampleImages),
+            mapping: exampleImages,
+        },
+    },
+} as Meta<typeof ChatContent>;
+
+const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />,
+    avatar: <Depiction image={<Icon name={"application-useraccount"} />} />,
+    statusLine: (
+        <OverflowText>
+            <strong>Username</strong> 25 minutes ago
+        </OverflowText>
+    ),
+};
diff --git a/src/components/index.scss b/src/components/index.scss
index 2455a2bac..3e244f890 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -3,6 +3,7 @@
 @import "./Breadcrumb/breadcrumb";
 @import "./Button/button";
 @import "./Card/card";
+@import "./Chat/chat";
 @import "./Checkbox/checkbox";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
diff --git a/src/components/index.ts b/src/components/index.ts
index 9538a98de..9dcb7b042 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,6 +8,7 @@ export * from "./Badge/Badge";
 export * from "./Breadcrumb";
 export * from "./Button/Button";
 export * from "./Card";
+export * from "./Chat";
 export * from "./Checkbox/Checkbox";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";

From a338caccf4a3d1ac316ee612b949698d4e6d76c9 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 10:17:04 +0200
Subject: [PATCH 03/29] prevent hight smaller than right element button

---
 src/components/TextField/TextArea.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TextField/TextArea.tsx b/src/components/TextField/TextArea.tsx
index 842e80bac..52c463ca0 100644
--- a/src/components/TextField/TextArea.tsx
+++ b/src/components/TextField/TextArea.tsx
@@ -91,7 +91,7 @@ export const TextArea = ({
                             leftIconElementRect.width ?? 0
                         }px)`
                     );
-                    leftIconElement.addEventListener("click", (_event: MouseEvent) => {
+                    leftIconElement.addEventListener("click", () => {
                         textAreaElement.focus();
                     });
                 }
@@ -157,7 +157,7 @@ export const TextArea = ({
             rows={
                 rows && !otherBlueprintTextAreaProps.autoResize && !otherBlueprintTextAreaProps.growVertically
                     ? rows
-                    : 1
+                    : 2
             }
             {...otherBlueprintTextAreaProps}
             dir={"auto"}

From a907b714107d71013435311af8b58e515d247099 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 10:18:06 +0200
Subject: [PATCH 04/29] add ChatField component to enter texts

---
 CHANGELOG.md                                  |  2 +
 src/components/Chat/ChatContent.tsx           |  2 +-
 src/components/Chat/ChatField.tsx             | 52 +++++++++++++++++++
 src/components/Chat/_chat.scss                |  6 +++
 src/components/Chat/index.ts                  |  1 +
 .../Chat/stories/ChatContent.stories.tsx      |  2 +-
 .../Chat/stories/ChatField.stories.tsx        | 18 +++++++
 7 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Chat/ChatField.tsx
 create mode 100644 src/components/Chat/stories/ChatField.stories.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff1d4e884..2ecfbfece 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ChatContent />`
     -   displays single chat contents in a bubble, including options to add status line and avatar
+-   `<ChatField />`
+    -   let the user input texts, calls `onSubmit` handler on enter key and submit button
 
 ## [24.4.1] - 2025-08-25
 
diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index 90f37e7f7..79954ca50 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -65,7 +65,7 @@ export const ChatContent = ({
             {statusLine && (
                 <HtmlContentBlock small>
                     {statusLine}
-                    <Spacing size="small" />
+                    <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
             {markdownProps && typeof children === "string" ? (
diff --git a/src/components/Chat/ChatField.tsx b/src/components/Chat/ChatField.tsx
new file mode 100644
index 000000000..f921982da
--- /dev/null
+++ b/src/components/Chat/ChatField.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IconButton } from "../Icon/IconButton";
+import { TextArea, TextAreaProps } from "../TextField/TextArea";
+
+export interface ChatFieldProps extends Pick<TextAreaProps, "className">, TestableComponent {
+    /**
+     * Default input to start with.
+     */
+    children?: string;
+    /**
+     * Callback handler to process the input of the field when `Enter` is pressed or the submit button is clicked.
+     */
+    onSubmit: (value: string) => void;
+}
+
+/**
+ * Component to input chat text.
+ * Based on `TextArea` component.
+ */
+export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFieldProps) => {
+    const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
+
+    const onContentChange = (value: string) => {
+        chatvalue.current = value;
+    };
+
+    const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.keyCode === 13 && e.shiftKey === false) {
+            e.preventDefault();
+            onSubmit(chatvalue.current);
+        }
+    };
+
+    return (
+        <TextArea
+            fill
+            autoResize
+            className={`${eccgui}-chat__inputfield` + (className ? ` ${className}` : "")}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                onContentChange(e.target.value);
+            }}
+            onKeyDown={onEnter}
+            rightElement={<IconButton name={"navigation-forth"} onClick={() => onSubmit(chatvalue.current)} />}
+            {...otherTextAreaProps}
+        />
+    );
+};
+
+export default ChatField;
diff --git a/src/components/Chat/_chat.scss b/src/components/Chat/_chat.scss
index 433e75f60..174e3f925 100644
--- a/src/components/Chat/_chat.scss
+++ b/src/components/Chat/_chat.scss
@@ -39,3 +39,9 @@
         }
     }
 }
+
+.eccgui-chat__inputfield {
+    min-height: mini-units(9);
+    max-height: 39vh;
+    resize: none !important;
+}
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
index 884f4c4d5..54cc97720 100644
--- a/src/components/Chat/index.ts
+++ b/src/components/Chat/index.ts
@@ -1 +1,2 @@
 export * from "./ChatContent";
+export * from "./ChatField";
diff --git a/src/components/Chat/stories/ChatContent.stories.tsx b/src/components/Chat/stories/ChatContent.stories.tsx
index 5ca7b837e..099554f41 100644
--- a/src/components/Chat/stories/ChatContent.stories.tsx
+++ b/src/components/Chat/stories/ChatContent.stories.tsx
@@ -18,7 +18,7 @@ const exampleImages = {
 };
 
 export default {
-    title: "Components/Chat",
+    title: "Components/Chat/ChatContent",
     component: ChatContent,
     argTypes: {
         avatar: {
diff --git a/src/components/Chat/stories/ChatField.stories.tsx b/src/components/Chat/stories/ChatField.stories.tsx
new file mode 100644
index 000000000..06e6fdb9c
--- /dev/null
+++ b/src/components/Chat/stories/ChatField.stories.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatField } from "../../../index";
+
+export default {
+    title: "Components/Chat/ChatField",
+    component: ChatField,
+    argTypes: {},
+} as Meta<typeof ChatField>;
+
+let forceupdate = 0;
+const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} key={forceupdate++} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    onSubmit: (value) => alert(value),
+};

From da459a10f79c5afe45b1ad9bce18daf0d3b9e01c Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 13:10:25 +0200
Subject: [PATCH 05/29] add property to limit bubble height easily

---
 src/components/Chat/ChatContent.tsx           |  9 +++-
 src/components/Chat/_chat.scss                | 42 ++++++++++++-------
 .../Chat/stories/ChatContent.stories.tsx      | 13 +++++-
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index 79954ca50..508a1afe9 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/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
diff --git a/src/components/Chat/_chat.scss b/src/components/Chat/_chat.scss
index 174e3f925..8fd0202c1 100644
--- a/src/components/Chat/_chat.scss
+++ b/src/components/Chat/_chat.scss
@@ -1,15 +1,14 @@
 .#{$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;
 }
@@ -17,29 +16,40 @@
 .#{$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;
diff --git a/src/components/Chat/stories/ChatContent.stories.tsx b/src/components/Chat/stories/ChatContent.stories.tsx
index 099554f41..9dbf1c797 100644
--- a/src/components/Chat/stories/ChatContent.stories.tsx
+++ b/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,
+};

From 97d96850e1db79a65ba79f1b6f9960a25e97d605 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 13:38:33 +0200
Subject: [PATCH 06/29] add shadow border to bubble

---
 src/components/Chat/_chat.scss | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/Chat/_chat.scss b/src/components/Chat/_chat.scss
index 8fd0202c1..45044bd55 100644
--- a/src/components/Chat/_chat.scss
+++ b/src/components/Chat/_chat.scss
@@ -1,23 +1,27 @@
 .#{$eccgui}-chat__content {
+    @extend .bp5-elevation-1;
+
     position: relative;
+    z-index: 0;
     min-height: $button-height;
     padding: $eccgui-size-inline-whitespace;
     overflow: auto;
     background-color: var(--#{$eccgui}-chat__content-background);
-    border-radius: $pt-border-radius;
+    border-radius: 3 * $pt-border-radius;
 }
 
 .#{$eccgui}-chat__content--display-free {
-    padding: 1px 0;
-
     --#{$eccgui}-chat__content-background: transparent;
+
+    padding: 1px 0;
+    box-shadow: none;
 }
 
 .#{$eccgui}-chat__content--display-bubble {
-    margin-left: 0.5 * $eccgui-size-block-whitespace;
+    margin-left: 0.75 * $eccgui-size-block-whitespace;
 
     &.#{$eccgui}-chat__content--align-right {
-        margin-right: 0.5 * $eccgui-size-block-whitespace;
+        margin-right: 0.75 * $eccgui-size-block-whitespace;
         margin-left: none;
     }
 }
@@ -28,20 +32,25 @@
         position: relative;
 
         &::before {
+            @extend .bp5-elevation-1;
+
             position: absolute;
             top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});
-            left: 0;
+            left: 0.25 * $eccgui-size-block-whitespace;
+            z-index: 1;
             width: $eccgui-size-block-whitespace;
             height: $eccgui-size-block-whitespace;
             content: " ";
             background-color: var(--#{$eccgui}-chat__content-background);
+            clip-path: polygon(-5px calc(100% + 5px), -5px -5px, calc(100% + 5px) calc(100% + 5px));
             transform: rotate(45deg);
         }
     }
     &:has(.#{$eccgui}-chat__content--display-bubble.#{$eccgui}-chat__content--align-right) {
         &::before {
-            right: 0;
+            right: 0.25 * $eccgui-size-block-whitespace;
             left: auto;
+            transform: rotate(225deg);
         }
     }
 }

From 94c18a87dc792b8a9dcdf6d4eebb8d2c77d810d3 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 14:21:16 +0200
Subject: [PATCH 07/29] improve indentation settings and display

---
 src/components/Chat/ChatContent.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index 508a1afe9..e99b479f8 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -7,7 +7,7 @@ import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
 import { Spacing } from "./../Separation/Spacing";
-import { HtmlContentBlock, OverflowTextProps, WhiteSpaceContainer } from "./../Typography";
+import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
 
 export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
     /**
@@ -23,14 +23,14 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     avatar?: React.ReactElement<DepictionProps>;
     /**
-     * If indented then the content box has some white space on one side.
+     * If indented then the content box has some white space on the opposite side to the alignment
      */
-    indentation?: boolean;
+    indentationSize?: "small" | "medium" | "large";
     /**
      * How the content box and avatar is aligned.
      * If `left` is set then the avatar is on the left side, and the indentation on the right side.
      */
-    alignment?: "left" | "right" | "block";
+    alignment?: "left" | "right";
     /**
      * 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.
@@ -52,7 +52,7 @@ export const ChatContent = ({
     statusLine,
     avatar,
     displayType = "bubble",
-    indentation = true,
+    indentationSize,
     alignment = "left",
     limitHeight,
     markdownProps,
@@ -83,10 +83,18 @@ export const ChatContent = ({
         </div>
     );
 
+    const indentationSizes = {
+        small: "8%",
+        medium: "21%",
+        large: "34%",
+    };
+
     return (
-        <WhiteSpaceContainer
-            marginLeft={alignment === "right" && indentation ? "xlarge" : undefined}
-            marginRight={alignment === "left" && indentation ? "xlarge" : undefined}
+        <div
+            style={{
+                marginLeft: alignment === "right" && indentationSize ? indentationSizes[indentationSize] : undefined,
+                marginRight: alignment === "left" && indentationSize ? indentationSizes[indentationSize] : undefined,
+            }}
         >
             {avatar ? (
                 <FlexibleLayoutContainer noEqualItemSpace gapSize="tiny">
@@ -102,7 +110,7 @@ export const ChatContent = ({
             ) : (
                 content
             )}
-        </WhiteSpaceContainer>
+        </div>
     );
 };
 

From d444b2bb95401f504cd2a0458a8164ec24835606 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 14:25:48 +0200
Subject: [PATCH 08/29] fix display without avatar

---
 src/components/Chat/ChatContent.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index e99b479f8..f5ea208e0 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -96,20 +96,19 @@ export const ChatContent = ({
                 marginRight: alignment === "left" && indentationSize ? indentationSizes[indentationSize] : undefined,
             }}
         >
-            {avatar ? (
-                <FlexibleLayoutContainer noEqualItemSpace gapSize="tiny">
+            <FlexibleLayoutContainer noEqualItemSpace gapSize="tiny">
+                {avatar && (
                     <FlexibleLayoutItem
+                        className={`${eccgui}-chat__content-avatar`}
                         growFactor={0}
                         shrinkFactor={0}
                         style={alignment === "right" ? { order: 1 } : undefined}
                     >
                         {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
                     </FlexibleLayoutItem>
-                    <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{content}</FlexibleLayoutItem>
-                </FlexibleLayoutContainer>
-            ) : (
-                content
-            )}
+                )}
+                <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{content}</FlexibleLayoutItem>
+            </FlexibleLayoutContainer>
         </div>
     );
 };

From a1ec63072c6a3462142d77826da7834884e20c69 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 14:51:53 +0200
Subject: [PATCH 09/29] use new send button for chat input

---
 src/components/Chat/ChatField.tsx          | 2 +-
 src/components/Icon/canonicalIconNames.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Chat/ChatField.tsx b/src/components/Chat/ChatField.tsx
index f921982da..c1313a7f7 100644
--- a/src/components/Chat/ChatField.tsx
+++ b/src/components/Chat/ChatField.tsx
@@ -43,7 +43,7 @@ export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFi
                 onContentChange(e.target.value);
             }}
             onKeyDown={onEnter}
-            rightElement={<IconButton name={"navigation-forth"} onClick={() => onSubmit(chatvalue.current)} />}
+            rightElement={<IconButton name={"operation-send"} onClick={() => onSubmit(chatvalue.current)} />}
             {...otherTextAreaProps}
         />
     );
diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
index afee3ae07..4f22e8ced 100644
--- a/src/components/Icon/canonicalIconNames.tsx
+++ b/src/components/Icon/canonicalIconNames.tsx
@@ -147,6 +147,7 @@ const canonicalIcons = {
     "operation-merge": icons.DirectionMerge,
     "operation-redo": icons.Redo,
     "operation-search": icons.Search,
+    "operation-send": icons.Send,
     "operation-sharelink": icons.CopyLink,
     "operation-transform": icons.Calculation,
     "operation-translate": icons.Translate,

From 9b93f0a7b23191106a8f3ac4fcad2cc65b31bfef Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 16:19:05 +0200
Subject: [PATCH 10/29] add component for chat area

---
 src/components/Chat/ChatArea.tsx              | 94 +++++++++++++++++++
 src/components/Chat/_chat.scss                | 17 +++-
 src/components/Chat/index.ts                  |  1 +
 .../Chat/stories/ChatArea.stories.tsx         | 33 +++++++
 4 files changed, 144 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Chat/ChatArea.tsx
 create mode 100644 src/components/Chat/stories/ChatArea.stories.tsx

diff --git a/src/components/Chat/ChatArea.tsx b/src/components/Chat/ChatArea.tsx
new file mode 100644
index 000000000..fb96598f3
--- /dev/null
+++ b/src/components/Chat/ChatArea.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { FlexibleLayoutContainer, FlexibleLayoutContainerProps, FlexibleLayoutItem } from "./../FlexibleLayout";
+import { Spacing, SpacingProps } from "./../Separation/Spacing";
+import { ChatFieldProps } from "./ChatField";
+
+export interface ChatAreaProps
+    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">,
+        TestableComponent {
+    /**
+     * The inut field for the chat.
+     */
+    chatField?: React.ReactElement<ChatFieldProps>;
+    /**
+     * Set the position of the chat field.
+     */
+    chatFieldPosition?: "top" | "bottom";
+    /**
+     * Sets the maximum width for chat contents and input.
+     */
+    contentWidth?: "small" | "medium" | "large" | "full";
+    /**
+     * Put in chat content in a list and add spacings automatically.
+     * Works best if each child represents one chat content item.
+     */
+    autoSpacingSize?: SpacingProps["size"];
+}
+
+/**
+ * Component to display a full chat, containing chat content bubbles and text input.
+ */
+export const ChatArea = ({
+    children,
+    className,
+    chatField,
+    chatFieldPosition = "bottom",
+    contentWidth = "medium",
+    autoSpacingSize,
+    gapSize = "medium",
+    ...otherFlexibleLayoutContainerProps
+}: ChatAreaProps) => {
+    return (
+        <FlexibleLayoutContainer
+            className={
+                `${eccgui}-chat__area` + ` ${eccgui}-chat__area--${contentWidth}` + (className ? ` ${className}` : "")
+            }
+            vertical
+            noEqualItemSpace
+            gapSize={gapSize}
+            {...otherFlexibleLayoutContainerProps}
+        >
+            {chatField && (
+                <FlexibleLayoutItem
+                    className={`${eccgui}-chat__area-contents`}
+                    growFactor={0}
+                    shrinkFactor={0}
+                    style={chatFieldPosition === "bottom" ? { order: 1 } : undefined}
+                >
+                    {chatField}
+                </FlexibleLayoutItem>
+            )}
+            <FlexibleLayoutItem
+                className={`${eccgui}-chat__area-contents`}
+                style={
+                    otherFlexibleLayoutContainerProps.useAbsoluteSpace
+                        ? {
+                              overflow: "auto",
+                              minHeight: 0,
+                              paddingRight: "0.25rem",
+                          }
+                        : undefined
+                }
+            >
+                {autoSpacingSize && children ? (
+                    <ul>
+                        {React.Children.toArray(children).map((child) => (
+                            <li>
+                                {child}
+                                <Spacing size={autoSpacingSize} />
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    children
+                )}
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    );
+};
+
+export default ChatArea;
diff --git a/src/components/Chat/_chat.scss b/src/components/Chat/_chat.scss
index 45044bd55..5f282a2df 100644
--- a/src/components/Chat/_chat.scss
+++ b/src/components/Chat/_chat.scss
@@ -59,8 +59,23 @@
     max-height: 50vh;
 }
 
-.eccgui-chat__inputfield {
+.#{$eccgui}-chat__inputfield {
     min-height: mini-units(9);
     max-height: 39vh;
     resize: none !important;
 }
+
+.#{$eccgui}-chat__area-contents {
+    width: 100%;
+    margin: 0 auto;
+
+    .#{$eccgui}-chat__area--small > & {
+        max-width: 40rem;
+    }
+    .#{$eccgui}-chat__area--medium > & {
+        max-width: 60rem;
+    }
+    .#{$eccgui}-chat__area--large > & {
+        max-width: 80rem;
+    }
+}
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
index 54cc97720..efe183ce8 100644
--- a/src/components/Chat/index.ts
+++ b/src/components/Chat/index.ts
@@ -1,2 +1,3 @@
+export * from "./ChatArea";
 export * from "./ChatContent";
 export * from "./ChatField";
diff --git a/src/components/Chat/stories/ChatArea.stories.tsx b/src/components/Chat/stories/ChatArea.stories.tsx
new file mode 100644
index 000000000..998531ef6
--- /dev/null
+++ b/src/components/Chat/stories/ChatArea.stories.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatArea, ChatContent, ChatField } from "../../../index";
+
+import { Default as ShortChatBubble, LongChatBubble } from "./ChatContent.stories";
+import { Default as ChatFieldExample } from "./ChatField.stories";
+
+export default {
+    title: "Components/Chat/ChatArea",
+    component: ChatArea,
+    argTypes: {},
+} as Meta<typeof ChatArea>;
+
+let forceupdate = 0;
+const TemplateFull: StoryFn<typeof ChatArea> = (args) => (
+    <div style={args.useAbsoluteSpace ? { position: "relative", height: "75vh" } : undefined}>
+        <ChatArea {...args} key={forceupdate++} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    chatField: <ChatField {...ChatFieldExample.args} />,
+    children: [
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContent {...LongChatBubble.args} />,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContent {...ShortChatBubble.args} />,
+    ],
+};

From d4ae8751b65a5fa95228106d39d7d1917d32e718 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 16:21:35 +0200
Subject: [PATCH 11/29] update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ecfbfece..077b16ba9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   displays single chat contents in a bubble, including options to add status line and avatar
 -   `<ChatField />`
     -   let the user input texts, calls `onSubmit` handler on enter key and submit button
+-   `<ChatArea />`
+    -   combine a list of chat contents and user input box
 
 ## [24.4.1] - 2025-08-25
 

From e3904afbbefadf0326176f5659eb1081ed556624 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Wed, 27 Aug 2025 18:27:43 +0200
Subject: [PATCH 12/29] move scrollbar to parent container border

---
 src/components/Chat/ChatArea.tsx              | 30 +++++++++----------
 src/components/Chat/_chat.scss                |  8 ++---
 .../Chat/stories/ChatContent.stories.tsx      |  6 +++-
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/Chat/ChatArea.tsx b/src/components/Chat/ChatArea.tsx
index fb96598f3..76e19902d 100644
--- a/src/components/Chat/ChatArea.tsx
+++ b/src/components/Chat/ChatArea.tsx
@@ -54,16 +54,14 @@ export const ChatArea = ({
         >
             {chatField && (
                 <FlexibleLayoutItem
-                    className={`${eccgui}-chat__area-contents`}
                     growFactor={0}
                     shrinkFactor={0}
                     style={chatFieldPosition === "bottom" ? { order: 1 } : undefined}
                 >
-                    {chatField}
+                    <div className={`${eccgui}-chat__area-contentwidth`}>{chatField}</div>
                 </FlexibleLayoutItem>
             )}
             <FlexibleLayoutItem
-                className={`${eccgui}-chat__area-contents`}
                 style={
                     otherFlexibleLayoutContainerProps.useAbsoluteSpace
                         ? {
@@ -74,18 +72,20 @@ export const ChatArea = ({
                         : undefined
                 }
             >
-                {autoSpacingSize && children ? (
-                    <ul>
-                        {React.Children.toArray(children).map((child) => (
-                            <li>
-                                {child}
-                                <Spacing size={autoSpacingSize} />
-                            </li>
-                        ))}
-                    </ul>
-                ) : (
-                    children
-                )}
+                <div className={`${eccgui}-chat__area-contentwidth`}>
+                    {autoSpacingSize && children ? (
+                        <ul>
+                            {React.Children.toArray(children).map((child) => (
+                                <li>
+                                    {child}
+                                    <Spacing size={autoSpacingSize} />
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        children
+                    )}
+                </div>
             </FlexibleLayoutItem>
         </FlexibleLayoutContainer>
     );
diff --git a/src/components/Chat/_chat.scss b/src/components/Chat/_chat.scss
index 5f282a2df..effd6c97d 100644
--- a/src/components/Chat/_chat.scss
+++ b/src/components/Chat/_chat.scss
@@ -65,17 +65,17 @@
     resize: none !important;
 }
 
-.#{$eccgui}-chat__area-contents {
+.#{$eccgui}-chat__area-contentwidth {
     width: 100%;
     margin: 0 auto;
 
-    .#{$eccgui}-chat__area--small > & {
+    .#{$eccgui}-chat__area--small & {
         max-width: 40rem;
     }
-    .#{$eccgui}-chat__area--medium > & {
+    .#{$eccgui}-chat__area--medium & {
         max-width: 60rem;
     }
-    .#{$eccgui}-chat__area--large > & {
+    .#{$eccgui}-chat__area--large & {
         max-width: 80rem;
     }
 }
diff --git a/src/components/Chat/stories/ChatContent.stories.tsx b/src/components/Chat/stories/ChatContent.stories.tsx
index 9dbf1c797..f0da0277f 100644
--- a/src/components/Chat/stories/ChatContent.stories.tsx
+++ b/src/components/Chat/stories/ChatContent.stories.tsx
@@ -33,7 +33,11 @@ const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...arg
 
 export const Default = TemplateFull.bind({});
 Default.args = {
-    children: <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={5} random={false} />
+        </HtmlContentBlock>
+    ),
     avatar: <Depiction image={<Icon name={"application-useraccount"} />} />,
     statusLine: (
         <OverflowText>

From 109a177158efa4cb0e332e53e5bb0488f471159e Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 28 Aug 2025 11:38:13 +0200
Subject: [PATCH 13/29] prevent cutted bubble borders

---
 src/components/Chat/ChatArea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Chat/ChatArea.tsx b/src/components/Chat/ChatArea.tsx
index 76e19902d..227dff9b5 100644
--- a/src/components/Chat/ChatArea.tsx
+++ b/src/components/Chat/ChatArea.tsx
@@ -67,7 +67,7 @@ export const ChatArea = ({
                         ? {
                               overflow: "auto",
                               minHeight: 0,
-                              paddingRight: "0.25rem",
+                              padding: "2px 0",
                           }
                         : undefined
                 }

From d9cffd31f8f98a6183ffc0b1e0d779082f8d15db Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 28 Aug 2025 13:06:58 +0200
Subject: [PATCH 14/29] option to scroll to the most recent chat content

---
 src/components/Chat/ChatArea.tsx | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Chat/ChatArea.tsx b/src/components/Chat/ChatArea.tsx
index 227dff9b5..ed516ea15 100644
--- a/src/components/Chat/ChatArea.tsx
+++ b/src/components/Chat/ChatArea.tsx
@@ -23,10 +23,15 @@ export interface ChatAreaProps
      */
     contentWidth?: "small" | "medium" | "large" | "full";
     /**
-     * Put in chat content in a list and add spacings automatically.
-     * Works best if each child represents one chat content item.
+     * Put chat content in a list and add spacings automatically.
+     * Works best if each `ChatArea` child represents one chat content item.
      */
     autoSpacingSize?: SpacingProps["size"];
+    /**
+     * Scrolls content to the first or last child automatically.
+     * The correct value depends on the place where you insert the most recent chat item.
+     */
+    autoScrollTo?: "first" | "last";
 }
 
 /**
@@ -40,8 +45,23 @@ export const ChatArea = ({
     contentWidth = "medium",
     autoSpacingSize,
     gapSize = "medium",
+    autoScrollTo,
     ...otherFlexibleLayoutContainerProps
 }: ChatAreaProps) => {
+    const chatcontents = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (chatcontents.current && children && autoScrollTo) {
+            const chatitems = chatcontents.current.getElementsByClassName(`${eccgui}-chat__content`);
+            if (chatitems.length > 0) {
+                chatitems[autoScrollTo === "first" ? 0 : chatitems.length - 1].scrollIntoView({
+                    behavior: "instant",
+                    block: autoScrollTo === "first" ? "start" : "end",
+                });
+            }
+        }
+    }, [chatcontents, children, autoScrollTo]);
+
     return (
         <FlexibleLayoutContainer
             className={
@@ -72,7 +92,7 @@ export const ChatArea = ({
                         : undefined
                 }
             >
-                <div className={`${eccgui}-chat__area-contentwidth`}>
+                <div className={`${eccgui}-chat__area-contentwidth`} ref={chatcontents}>
                     {autoSpacingSize && children ? (
                         <ul>
                             {React.Children.toArray(children).map((child) => (

From 8ea9346bcf5404c7e5f937ebaf9ba7fc46096a13 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 28 Aug 2025 18:31:28 +0200
Subject: [PATCH 15/29] add expand/shrink option to chat content

---
 package.json                                  |  7 +-
 src/components/Chat/ChatContent.tsx           | 97 +++++++++++++++++--
 .../Chat/stories/ChatArea.stories.tsx         |  5 +-
 .../Chat/stories/ChatContent.stories.tsx      |  4 +-
 yarn.lock                                     |  9 +-
 5 files changed, 109 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index afaac9666..a93daa1b5 100644
--- a/package.json
+++ b/package.json
@@ -91,10 +91,11 @@
         "n3": "^1.25.1",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
-        "react-dom": "^16.13.1",
+        "react-dom": "^16.14.0",
         "react-flow-renderer": "9.7.4",
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
+        "react-is": "^16.13.1",
         "react-markdown": "^10.1.0",
         "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
         "react-syntax-highlighter": "^15.6.1",
@@ -138,6 +139,7 @@
         "@types/jshint": "^2.12.4",
         "@types/lodash": "^4.17.16",
         "@types/n3": "^1.24.2",
+        "@types/react-is": "^19.0.0",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@typescript-eslint/eslint-plugin": "^8.30.1",
         "@typescript-eslint/parser": "^8.30.1",
@@ -174,8 +176,7 @@
     },
     "peerDependencies": {
         "@blueprintjs/core": ">=5",
-        "react": ">=16",
-        "react-dom": ">=16"
+        "react": ">=16"
     },
     "resolutions": {
         "**/@types/react": "^17.0.85",
diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index f5ea208e0..172e9998f 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { renderToString } from "react-dom/server";
+import * as ReactIs from "react-is";
 
 import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -6,8 +8,9 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
+import { IconButton } from "./../Icon/IconButton";
 import { Spacing } from "./../Separation/Spacing";
-import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
+import { HtmlContentBlock, OverflowText, OverflowTextProps } from "./../Typography";
 
 export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
     /**
@@ -35,12 +38,30 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
      * 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;
+    limitHeight?: React.ReactChild;
     /**
      * 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.
      */
     markdownProps?: Omit<MarkdownProps, "children">;
+    /**
+     * Callback handler if content should be expanded.
+     * Button to shrink/expand is displayed, depending on `shrinked` value.
+     * If this handler is given then the component never will change the `shrinked` state automatically.
+     */
+    onToggleSize?: () => void;
+    /**
+     * Content should dislayed shrinked.
+     * Button to expand content is displayed.
+     * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
+     * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
+     */
+    shrinked?: boolean;
+    /**
+     * Children elements are automatically shrinked to one line.
+     * If `shrinked` are not given then `shrinked=true` is infered.
+     */
+    autoShrink?: boolean;
 }
 
 /**
@@ -56,9 +77,56 @@ export const ChatContent = ({
     alignment = "left",
     limitHeight,
     markdownProps,
+    shrinked,
+    autoShrink,
+    onToggleSize,
     ...otherDivProps
 }: ChatContentProps) => {
-    const content = (
+    const [displayShrinked, setDispayShrinked] = React.useState<boolean>(
+        shrinked === true || (autoShrink === true && typeof shrinked === "undefined")
+    );
+
+    const toggleSize = () => {
+        if (onToggleSize) {
+            onToggleSize();
+        } else {
+            setDispayShrinked(!displayShrinked);
+        }
+    };
+
+    const content =
+        markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
+
+    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
+        if (children instanceof Array) {
+            return children
+                .map((child: React.ReactNode) => {
+                    return onlyText(child);
+                })
+                .join(" ");
+        }
+
+        return React.Children.toArray(children)
+            .map((child) => {
+                if (ReactIs.isFragment(child)) {
+                    return onlyText(child.props?.children);
+                }
+                if (typeof child === "string") {
+                    return child;
+                }
+                if (typeof child === "number") {
+                    return child.toString();
+                }
+                if (ReactIs.isElement(child)) {
+                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
+                    return renderToString(<span>{child}</span>);
+                }
+                return "";
+            })
+            .join(" ");
+    };
+
+    const chatitem = (
         <div
             className={
                 `${eccgui}-chat__content` +
@@ -75,10 +143,12 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {markdownProps && typeof children === "string" ? (
-                <Markdown {...markdownProps}>{children}</Markdown>
+            {displayShrinked && autoShrink ? (
+                <OverflowText passDown>
+                    <Markdown removeMarkup>{onlyText(content)}</Markdown>
+                </OverflowText>
             ) : (
-                children
+                content
             )}
         </div>
     );
@@ -107,7 +177,20 @@ export const ChatContent = ({
                         {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
                     </FlexibleLayoutItem>
                 )}
-                <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{content}</FlexibleLayoutItem>
+                <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
+                {(displayShrinked || onToggleSize || autoShrink) && (
+                    <FlexibleLayoutItem
+                        className={`${eccgui}-chat__content-sizetoggle`}
+                        growFactor={0}
+                        shrinkFactor={0}
+                        style={alignment === "right" ? { order: -1 } : undefined}
+                    >
+                        <IconButton
+                            name={displayShrinked ? "toggler-showmore" : "toggler-showless"}
+                            onClick={() => toggleSize()}
+                        />
+                    </FlexibleLayoutItem>
+                )}
             </FlexibleLayoutContainer>
         </div>
     );
diff --git a/src/components/Chat/stories/ChatArea.stories.tsx b/src/components/Chat/stories/ChatArea.stories.tsx
index 998531ef6..f8aa529f3 100644
--- a/src/components/Chat/stories/ChatArea.stories.tsx
+++ b/src/components/Chat/stories/ChatArea.stories.tsx
@@ -26,8 +26,11 @@ Default.args = {
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
-        <ChatContent {...LongChatBubble.args} />,
+        <ChatContent {...LongChatBubble.args} autoShrink />,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContent {...ShortChatBubble.args} />,
     ],
+    autoSpacingSize: "medium",
+    autoScrollTo: "last",
+    useAbsoluteSpace: true,
 };
diff --git a/src/components/Chat/stories/ChatContent.stories.tsx b/src/components/Chat/stories/ChatContent.stories.tsx
index f0da0277f..12818562a 100644
--- a/src/components/Chat/stories/ChatContent.stories.tsx
+++ b/src/components/Chat/stories/ChatContent.stories.tsx
@@ -29,7 +29,8 @@ export default {
     },
 } as Meta<typeof ChatContent>;
 
-const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} />;
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} key={update++} />;
 
 export const Default = TemplateFull.bind({});
 Default.args = {
@@ -44,6 +45,7 @@ Default.args = {
             <strong>Username</strong> 25 minutes ago
         </OverflowText>
     ),
+    onToggleSize: undefined,
 };
 
 export const LongChatBubble = TemplateFull.bind({});
diff --git a/yarn.lock b/yarn.lock
index 1b4164965..4671b72c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3373,6 +3373,13 @@
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.26.tgz#fa7891ba70fd39ddbaa7e85b6ff9175bb546bc1b"
   integrity sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==
 
+"@types/react-is@^19.0.0":
+  version "19.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-19.0.0.tgz#eccf45556cf1858e9116eed1f9e7b51496501a7a"
+  integrity sha512-71dSZeeJ0t3aoPyY9x6i+JNSvg5m9EF2i2OlSZI5QoJuI8Ocgor610i+4A10TQmURR+0vLwcVCEYFpXdzM1Biw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.20":
   version "7.1.34"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.34.tgz#83613e1957c481521e6776beeac4fd506d11bd0e"
@@ -10127,7 +10134,7 @@ react-docgen@^7.0.0:
     resolve "^1.22.1"
     strip-indent "^4.0.0"
 
-react-dom@^16.13.1:
+react-dom@^16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
   integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==

From 4a2d8e9964301bad267429c92f2adfd2c435692d Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 28 Aug 2025 18:40:38 +0200
Subject: [PATCH 16/29] add simple display to chat area itself

---
 src/components/Chat/_chat.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Chat/_chat.scss b/src/components/Chat/_chat.scss
index effd6c97d..2a1204415 100644
--- a/src/components/Chat/_chat.scss
+++ b/src/components/Chat/_chat.scss
@@ -65,6 +65,11 @@
     resize: none !important;
 }
 
+.#{$eccgui}-chat__area {
+    padding: 0.25rem;
+    background-color: $card-background-color;
+}
+
 .#{$eccgui}-chat__area-contentwidth {
     width: 100%;
     margin: 0 auto;

From d434ca48f870f43aaca783329aacf46df98c1ecb Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 1 Sep 2025 09:20:25 +0200
Subject: [PATCH 17/29] open up ChatField for a more complex usages but still
 supporting a simple mode by onTextSubmit handler

---
 src/components/Chat/ChatField.tsx             | 24 +++++++++++++------
 .../Chat/stories/ChatField.stories.tsx        |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/Chat/ChatField.tsx b/src/components/Chat/ChatField.tsx
index c1313a7f7..836fcfffc 100644
--- a/src/components/Chat/ChatField.tsx
+++ b/src/components/Chat/ChatField.tsx
@@ -5,22 +5,23 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { IconButton } from "../Icon/IconButton";
 import { TextArea, TextAreaProps } from "../TextField/TextArea";
 
-export interface ChatFieldProps extends Pick<TextAreaProps, "className">, TestableComponent {
+export interface ChatFieldProps extends TextAreaProps, TestableComponent {
     /**
      * Default input to start with.
      */
     children?: string;
     /**
      * Callback handler to process the input of the field when `Enter` is pressed or the submit button is clicked.
+     * If you use it together with your own handlers for `onChange` and `onKeyDown` it won't work properly.
      */
-    onSubmit: (value: string) => void;
+    onTextSubmit?: (value: string) => void;
 }
 
 /**
  * Component to input chat text.
  * Based on `TextArea` component.
  */
-export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFieldProps) => {
+export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextAreaProps }: ChatFieldProps) => {
     const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
 
     const onContentChange = (value: string) => {
@@ -28,9 +29,9 @@ export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFi
     };
 
     const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        if (e.keyCode === 13 && e.shiftKey === false) {
+        if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
             e.preventDefault();
-            onSubmit(chatvalue.current);
+            onTextSubmit(chatvalue.current);
         }
     };
 
@@ -42,8 +43,17 @@ export const ChatField = ({ className, onSubmit, ...otherTextAreaProps }: ChatFi
             onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
                 onContentChange(e.target.value);
             }}
-            onKeyDown={onEnter}
-            rightElement={<IconButton name={"operation-send"} onClick={() => onSubmit(chatvalue.current)} />}
+            onKeyDown={onTextSubmit ? onEnter : undefined}
+            rightElement={
+                (onTextSubmit || rightElement) && (
+                    <>
+                        {onTextSubmit && (
+                            <IconButton name={"operation-send"} onClick={() => onTextSubmit(chatvalue.current)} />
+                        )}
+                        {rightElement}
+                    </>
+                )
+            }
             {...otherTextAreaProps}
         />
     );
diff --git a/src/components/Chat/stories/ChatField.stories.tsx b/src/components/Chat/stories/ChatField.stories.tsx
index 06e6fdb9c..9adf4fd81 100644
--- a/src/components/Chat/stories/ChatField.stories.tsx
+++ b/src/components/Chat/stories/ChatField.stories.tsx
@@ -14,5 +14,5 @@ const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} k
 
 export const Default = TemplateFull.bind({});
 Default.args = {
-    onSubmit: (value) => alert(value),
+    onTextSubmit: (value) => alert(value),
 };

From 1077361e0e1d21bd02a5c02b9035d8ab7e03ed08 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 1 Sep 2025 10:21:06 +0200
Subject: [PATCH 18/29] move autoshrink element creation from chat into own
 reusable component

---
 CHANGELOG.md                                  |  2 +
 src/components/Chat/ChatContent.tsx           | 42 +------------
 .../ContentShrinker.stories.tsx               | 25 ++++++++
 .../ContentShrinker/ContentShrinker.tsx       | 59 +++++++++++++++++++
 src/components/index.ts                       |  1 +
 5 files changed, 90 insertions(+), 39 deletions(-)
 create mode 100644 src/components/ContentShrinker/ContentShrinker.stories.tsx
 create mode 100644 src/components/ContentShrinker/ContentShrinker.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 077b16ba9..9859edb88 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   let the user input texts, calls `onSubmit` handler on enter key and submit button
 -   `<ChatArea />`
     -   combine a list of chat contents and user input box
+-   `<ContentShrinker />`
+    -   displays all HTML content as only 1 ellipsed text line
 
 ## [24.4.1] - 2025-08-25
 
diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index 172e9998f..ae743a372 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { renderToString } from "react-dom/server";
-import * as ReactIs from "react-is";
 
 import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { ContentShrinker } from "./../ContentShrinker/ContentShrinker";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
 import { IconButton } from "./../Icon/IconButton";
 import { Spacing } from "./../Separation/Spacing";
-import { HtmlContentBlock, OverflowText, OverflowTextProps } from "./../Typography";
+import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
 
 export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
     /**
@@ -97,35 +96,6 @@ export const ChatContent = ({
     const content =
         markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
 
-    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
-        if (children instanceof Array) {
-            return children
-                .map((child: React.ReactNode) => {
-                    return onlyText(child);
-                })
-                .join(" ");
-        }
-
-        return React.Children.toArray(children)
-            .map((child) => {
-                if (ReactIs.isFragment(child)) {
-                    return onlyText(child.props?.children);
-                }
-                if (typeof child === "string") {
-                    return child;
-                }
-                if (typeof child === "number") {
-                    return child.toString();
-                }
-                if (ReactIs.isElement(child)) {
-                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
-                    return renderToString(<span>{child}</span>);
-                }
-                return "";
-            })
-            .join(" ");
-    };
-
     const chatitem = (
         <div
             className={
@@ -143,13 +113,7 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {displayShrinked && autoShrink ? (
-                <OverflowText passDown>
-                    <Markdown removeMarkup>{onlyText(content)}</Markdown>
-                </OverflowText>
-            ) : (
-                content
-            )}
+            {displayShrinked && autoShrink ? <ContentShrinker>{content}</ContentShrinker> : content}
         </div>
     );
 
diff --git a/src/components/ContentShrinker/ContentShrinker.stories.tsx b/src/components/ContentShrinker/ContentShrinker.stories.tsx
new file mode 100644
index 000000000..4c8e757f5
--- /dev/null
+++ b/src/components/ContentShrinker/ContentShrinker.stories.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ContentShrinker, HtmlContentBlock } from "../../../index";
+
+export default {
+    title: "Components/ContentShrinker",
+    component: ContentShrinker,
+    argTypes: {},
+} as Meta<typeof ContentShrinker>;
+
+const TemplateFull: StoryFn<typeof ContentShrinker> = (args) => <ContentShrinker {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: (
+        <>
+            simple text child
+            <HtmlContentBlock>
+                <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+            </HtmlContentBlock>
+        </>
+    ),
+};
diff --git a/src/components/ContentShrinker/ContentShrinker.tsx b/src/components/ContentShrinker/ContentShrinker.tsx
new file mode 100644
index 000000000..37991e760
--- /dev/null
+++ b/src/components/ContentShrinker/ContentShrinker.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import * as ReactIs from "react-is";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Markdown } from "./../../cmem/markdown/Markdown";
+import { OverflowText, OverflowTextProps } from "./../Typography";
+
+export type ContentShrinkerProps = Omit<OverflowTextProps, "passDown" | "useHtmlElement">;
+
+/**
+ * Component to shrink HTML markup content to 1 single text line.
+ * Display is based on `OverflowText`.
+ */
+export const ContentShrinker = ({ className, children, ...otherOverflowProps }: ContentShrinkerProps) => {
+    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
+        if (children instanceof Array) {
+            return children
+                .map((child: React.ReactNode) => {
+                    return onlyText(child);
+                })
+                .join(" ");
+        }
+
+        return React.Children.toArray(children)
+            .map((child) => {
+                if (ReactIs.isFragment(child)) {
+                    return onlyText(child.props?.children);
+                }
+                if (typeof child === "string") {
+                    return child;
+                }
+                if (typeof child === "number") {
+                    return child.toString();
+                }
+                if (ReactIs.isElement(child)) {
+                    // for some reasons `renderToString` returns empty string if not wrappe in a `span`
+                    return renderToString(<span>{child}</span>);
+                }
+                return "";
+            })
+            .join(" ");
+    };
+
+    return (
+        <OverflowText
+            className={`${eccgui}-contentshrinker` + (className ? ` ${className}` : "")}
+            passDown
+            {...otherOverflowProps}
+        >
+            <Markdown removeMarkup inheritBlock>
+                {onlyText(children)}
+            </Markdown>
+        </OverflowText>
+    );
+};
+
+export default ContentShrinker;
diff --git a/src/components/index.ts b/src/components/index.ts
index 9dcb7b042..578add833 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,6 +10,7 @@ export * from "./Button/Button";
 export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
+export * from "./ContentShrinker/ContentShrinker";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";

From ca6937f7d520bbf83e16d79d08bc77901ce57ce4 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 1 Sep 2025 17:33:40 +0200
Subject: [PATCH 19/29] remove line breaks to prevent multiple markdown
 paragraphs

---
 src/components/ContentShrinker/ContentShrinker.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ContentShrinker/ContentShrinker.tsx b/src/components/ContentShrinker/ContentShrinker.tsx
index 37991e760..21dc620c0 100644
--- a/src/components/ContentShrinker/ContentShrinker.tsx
+++ b/src/components/ContentShrinker/ContentShrinker.tsx
@@ -40,7 +40,8 @@ export const ContentShrinker = ({ className, children, ...otherOverflowProps }:
                 }
                 return "";
             })
-            .join(" ");
+            .join(" ")
+            .replaceAll("\n", " ");
     };
 
     return (

From c3ee50b400790714b280382c031711aef0bc6dd5 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 1 Sep 2025 17:43:20 +0200
Subject: [PATCH 20/29] remove any markup from ContentShrinker children

---
 src/components/ContentShrinker/ContentShrinker.stories.tsx | 2 +-
 src/components/ContentShrinker/ContentShrinker.tsx         | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ContentShrinker/ContentShrinker.stories.tsx b/src/components/ContentShrinker/ContentShrinker.stories.tsx
index 4c8e757f5..99cc59826 100644
--- a/src/components/ContentShrinker/ContentShrinker.stories.tsx
+++ b/src/components/ContentShrinker/ContentShrinker.stories.tsx
@@ -16,7 +16,7 @@ export const Default = TemplateFull.bind({});
 Default.args = {
     children: (
         <>
-            simple text child
+            simple text child http://example.com/
             <HtmlContentBlock>
                 <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
             </HtmlContentBlock>
diff --git a/src/components/ContentShrinker/ContentShrinker.tsx b/src/components/ContentShrinker/ContentShrinker.tsx
index 21dc620c0..b7a820987 100644
--- a/src/components/ContentShrinker/ContentShrinker.tsx
+++ b/src/components/ContentShrinker/ContentShrinker.tsx
@@ -47,10 +47,9 @@ export const ContentShrinker = ({ className, children, ...otherOverflowProps }:
     return (
         <OverflowText
             className={`${eccgui}-contentshrinker` + (className ? ` ${className}` : "")}
-            passDown
             {...otherOverflowProps}
         >
-            <Markdown removeMarkup inheritBlock>
+            <Markdown removeMarkup inheritBlock allowedElements={[]}>
                 {onlyText(children)}
             </Markdown>
         </OverflowText>

From 7cc81e6977fda88012a93f5a7f4e1080073f3680 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 1 Sep 2025 18:07:52 +0200
Subject: [PATCH 21/29] fix property value type

---
 src/components/Chat/ChatContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index ae743a372..a5ad77127 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -37,7 +37,7 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
      * 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?: React.ReactChild;
+    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.

From 7a9f947e62a54a134b52a0a22c2f83e50f49b300 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Mon, 1 Sep 2025 18:47:26 +0200
Subject: [PATCH 22/29] allow action button in handler if there is no collapse
 handler

---
 src/components/ContentGroup/ContentGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ContentGroup/ContentGroup.tsx b/src/components/ContentGroup/ContentGroup.tsx
index 521e4092f..4ce4172db 100644
--- a/src/components/ContentGroup/ContentGroup.tsx
+++ b/src/components/ContentGroup/ContentGroup.tsx
@@ -189,7 +189,7 @@ export const ContentGroup = ({
                                 </div>
                             </ToolbarSection>
                         )}
-                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                    {(!isCollapsed || !handlerToggleCollapse) && actionOptions && (
                         <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
                             <Spacing vertical size="small" />
                             {actionOptions}

From 95ab59688f5668765f3e39faa6ea60d2c4193e50 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 4 Sep 2025 12:29:25 +0200
Subject: [PATCH 23/29] make usage of Overflowtext optional

---
 src/components/Chat/ChatContent.tsx           |  6 ++-
 .../ContentShrinker.stories.tsx               | 18 ++++++++-
 .../ContentShrinker/ContentShrinker.tsx       | 39 ++++++++++++++-----
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index a5ad77127..337b70e0d 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -113,7 +113,11 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {displayShrinked && autoShrink ? <ContentShrinker>{content}</ContentShrinker> : content}
+            {displayShrinked && autoShrink ? (
+                <ContentShrinker useOverflowTextWrapper>{content}</ContentShrinker>
+            ) : (
+                content
+            )}
         </div>
     );
 
diff --git a/src/components/ContentShrinker/ContentShrinker.stories.tsx b/src/components/ContentShrinker/ContentShrinker.stories.tsx
index 99cc59826..ce7466cd0 100644
--- a/src/components/ContentShrinker/ContentShrinker.stories.tsx
+++ b/src/components/ContentShrinker/ContentShrinker.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ContentShrinker, HtmlContentBlock } from "../../../index";
+import { ContentShrinker, HtmlContentBlock, Markdown } from "../../../index";
 
 export default {
     title: "Components/ContentShrinker",
@@ -16,10 +16,24 @@ export const Default = TemplateFull.bind({});
 Default.args = {
     children: (
         <>
-            simple text child http://example.com/
+            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+            Simple text with URL http://example.com/ that should not get parsed.
+            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown.`}</Markdown>
             <HtmlContentBlock>
+                <h1>Block with sub elements</h1>
                 <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
             </HtmlContentBlock>
         </>
     ),
 };
+
+export const WithOverflowText = TemplateFull.bind({});
+WithOverflowText.args = {
+    ...Default.args,
+    useOverflowTextWrapper: true,
+    overflowTextProps: {
+        className: "my-extra-class",
+        "data-test-id": "my-test-id",
+        ellipsis: "reverse",
+    },
+};
diff --git a/src/components/ContentShrinker/ContentShrinker.tsx b/src/components/ContentShrinker/ContentShrinker.tsx
index b7a820987..36ad2d508 100644
--- a/src/components/ContentShrinker/ContentShrinker.tsx
+++ b/src/components/ContentShrinker/ContentShrinker.tsx
@@ -7,13 +7,23 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { Markdown } from "./../../cmem/markdown/Markdown";
 import { OverflowText, OverflowTextProps } from "./../Typography";
 
-export type ContentShrinkerProps = Omit<OverflowTextProps, "passDown" | "useHtmlElement">;
+export interface ContentShrinkerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Wrap returned content automatically in a `OverflowText` component.
+     * This way you always will get a element returned that displays only 1 single text line.
+     */
+    useOverflowTextWrapper?: boolean;
+    /**
+     * Specify more `OverflowText` properties that were used when `useOverflowTextWrapper` is set to `true`.
+     */
+    overflowTextProps?: Omit<OverflowTextProps, "passDown">;
+}
 
 /**
- * Component to shrink HTML markup content to 1 single text line.
- * Display is based on `OverflowText`.
+ * Component to reduce HTML markup content to simple text.
+ * Display can be wrapped easily in `OverflowText`.
  */
-export const ContentShrinker = ({ className, children, ...otherOverflowProps }: ContentShrinkerProps) => {
+export const ContentShrinker = ({ children, useOverflowTextWrapper, overflowTextProps }: ContentShrinkerProps) => {
     const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
         if (children instanceof Array) {
             return children
@@ -44,15 +54,24 @@ export const ContentShrinker = ({ className, children, ...otherOverflowProps }:
             .replaceAll("\n", " ");
     };
 
-    return (
+    const shrinkedContent = (
+        <Markdown removeMarkup inheritBlock allowedElements={[]}>
+            {onlyText(children)}
+        </Markdown>
+    );
+
+    return useOverflowTextWrapper ? (
         <OverflowText
-            className={`${eccgui}-contentshrinker` + (className ? ` ${className}` : "")}
-            {...otherOverflowProps}
+            {...overflowTextProps}
+            className={
+                `${eccgui}-contentshrinker` +
+                (overflowTextProps && overflowTextProps.className ? ` ${overflowTextProps.className}` : "")
+            }
         >
-            <Markdown removeMarkup inheritBlock allowedElements={[]}>
-                {onlyText(children)}
-            </Markdown>
+            {shrinkedContent}
         </OverflowText>
+    ) : (
+        shrinkedContent
     );
 };
 

From 2bd1e092bd07edeecca3857069f7969632895903 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 4 Sep 2025 14:47:32 +0200
Subject: [PATCH 24/29] provide properties to control the reduced content a bit
 more

---
 .../ContentShrinker.stories.tsx               | 20 ++++++---
 .../ContentShrinker/ContentShrinker.tsx       | 44 ++++++++++++++-----
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/components/ContentShrinker/ContentShrinker.stories.tsx b/src/components/ContentShrinker/ContentShrinker.stories.tsx
index ce7466cd0..855c1de79 100644
--- a/src/components/ContentShrinker/ContentShrinker.stories.tsx
+++ b/src/components/ContentShrinker/ContentShrinker.stories.tsx
@@ -14,17 +14,25 @@ const TemplateFull: StoryFn<typeof ContentShrinker> = (args) => <ContentShrinker
 
 export const Default = TemplateFull.bind({});
 Default.args = {
-    children: (
+    children: [
+        <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
+        "Simple text with URL http://example.com/ that should not get parsed.",
+        "a < b to test equations in text like b > a.",
         <>
-            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
-            Simple text with URL http://example.com/ that should not get parsed.
             <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown.`}</Markdown>
             <HtmlContentBlock>
                 <h1>Block with sub elements</h1>
-                <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+                <LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} />
             </HtmlContentBlock>
-        </>
-    ),
+        </>,
+    ],
+};
+
+export const UseMaximumContraints = TemplateFull.bind({});
+UseMaximumContraints.args = {
+    ...Default.args,
+    maxNodes: 3,
+    maxLength: 130,
 };
 
 export const WithOverflowText = TemplateFull.bind({});
diff --git a/src/components/ContentShrinker/ContentShrinker.tsx b/src/components/ContentShrinker/ContentShrinker.tsx
index 36ad2d508..1ea429159 100644
--- a/src/components/ContentShrinker/ContentShrinker.tsx
+++ b/src/components/ContentShrinker/ContentShrinker.tsx
@@ -4,17 +4,25 @@ import * as ReactIs from "react-is";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-import { Markdown } from "./../../cmem/markdown/Markdown";
 import { OverflowText, OverflowTextProps } from "./../Typography";
 
 export interface ContentShrinkerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Maximum number of nodes that are used from the HTML content.
+     * An HTML element with multiple sub elements is count as only 1 node.
+     */
+    maxNodes?: number;
+    /**
+     * Set maximum string length of returned content.
+     */
+    maxLength?: number;
     /**
      * Wrap returned content automatically in a `OverflowText` component.
      * This way you always will get a element returned that displays only 1 single text line.
      */
     useOverflowTextWrapper?: boolean;
     /**
-     * Specify more `OverflowText` properties that were used when `useOverflowTextWrapper` is set to `true`.
+     * Specify more `OverflowText` properties used when `useOverflowTextWrapper` is set to `true`.
      */
     overflowTextProps?: Omit<OverflowTextProps, "passDown">;
 }
@@ -23,20 +31,34 @@ export interface ContentShrinkerProps extends Pick<React.HTMLAttributes<HTMLElem
  * Component to reduce HTML markup content to simple text.
  * Display can be wrapped easily in `OverflowText`.
  */
-export const ContentShrinker = ({ children, useOverflowTextWrapper, overflowTextProps }: ContentShrinkerProps) => {
-    const onlyText = (children: React.ReactNode | React.ReactNode[]): string => {
+export const ContentShrinker = ({
+    children,
+    maxNodes,
+    maxLength,
+    useOverflowTextWrapper,
+    overflowTextProps,
+}: ContentShrinkerProps) => {
+    const nodesCount = 0;
+
+    const onlyText = (children: React.ReactNode | React.ReactNode[], maxNodes?: number): string => {
+        if (typeof maxNodes !== "undefined" && nodesCount >= maxNodes) {
+            return "";
+        }
+
         if (children instanceof Array) {
             return children
+                .slice(0, maxNodes)
                 .map((child: React.ReactNode) => {
-                    return onlyText(child);
+                    return onlyText(child, maxNodes);
                 })
                 .join(" ");
         }
 
         return React.Children.toArray(children)
+            .slice(0, maxNodes)
             .map((child) => {
                 if (ReactIs.isFragment(child)) {
-                    return onlyText(child.props?.children);
+                    return onlyText(child.props?.children, maxNodes);
                 }
                 if (typeof child === "string") {
                     return child;
@@ -54,11 +76,9 @@ export const ContentShrinker = ({ children, useOverflowTextWrapper, overflowText
             .replaceAll("\n", " ");
     };
 
-    const shrinkedContent = (
-        <Markdown removeMarkup inheritBlock allowedElements={[]}>
-            {onlyText(children)}
-        </Markdown>
-    );
+    const shrinkedContent = onlyText(children, maxNodes)
+        .replaceAll(/<[^\s][^>]*>/g, "")
+        .slice(0, maxLength);
 
     return useOverflowTextWrapper ? (
         <OverflowText
@@ -71,7 +91,7 @@ export const ContentShrinker = ({ children, useOverflowTextWrapper, overflowText
             {shrinkedContent}
         </OverflowText>
     ) : (
-        shrinkedContent
+        <>{shrinkedContent}</>
     );
 };
 

From 1e067629b965f05da3db27a809adef207535a930 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 4 Sep 2025 15:01:08 +0200
Subject: [PATCH 25/29] rename element

---
 CHANGELOG.md                                           |  4 ++--
 src/components/Chat/ChatContent.tsx                    |  8 ++------
 .../TextReducer.stories.tsx}                           | 10 +++++-----
 .../TextReducer.tsx}                                   | 10 +++++-----
 src/components/index.ts                                |  2 +-
 5 files changed, 15 insertions(+), 19 deletions(-)
 rename src/components/{ContentShrinker/ContentShrinker.stories.tsx => TextReducer/TextReducer.stories.tsx} (80%)
 rename src/components/{ContentShrinker/ContentShrinker.tsx => TextReducer/TextReducer.tsx} (92%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9859edb88..cd2a97359 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,8 +14,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   let the user input texts, calls `onSubmit` handler on enter key and submit button
 -   `<ChatArea />`
     -   combine a list of chat contents and user input box
--   `<ContentShrinker />`
-    -   displays all HTML content as only 1 ellipsed text line
+-   `<TextReducer />`
+    -   reduces HTML to simple text and can display it as one ellipsed line
 
 ## [24.4.1] - 2025-08-25
 
diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index 337b70e0d..37a438aad 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -4,11 +4,11 @@ import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
-import { ContentShrinker } from "./../ContentShrinker/ContentShrinker";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
 import { IconButton } from "./../Icon/IconButton";
 import { Spacing } from "./../Separation/Spacing";
+import { TextReducer } from "./../TextReducer/TextReducer";
 import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
 
 export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
@@ -113,11 +113,7 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {displayShrinked && autoShrink ? (
-                <ContentShrinker useOverflowTextWrapper>{content}</ContentShrinker>
-            ) : (
-                content
-            )}
+            {displayShrinked && autoShrink ? <TextReducer useOverflowTextWrapper>{content}</TextReducer> : content}
         </div>
     );
 
diff --git a/src/components/ContentShrinker/ContentShrinker.stories.tsx b/src/components/TextReducer/TextReducer.stories.tsx
similarity index 80%
rename from src/components/ContentShrinker/ContentShrinker.stories.tsx
rename to src/components/TextReducer/TextReducer.stories.tsx
index 855c1de79..b81250463 100644
--- a/src/components/ContentShrinker/ContentShrinker.stories.tsx
+++ b/src/components/TextReducer/TextReducer.stories.tsx
@@ -2,15 +2,15 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ContentShrinker, HtmlContentBlock, Markdown } from "../../../index";
+import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
 
 export default {
-    title: "Components/ContentShrinker",
-    component: ContentShrinker,
+    title: "Components/TextReducer",
+    component: TextReducer,
     argTypes: {},
-} as Meta<typeof ContentShrinker>;
+} as Meta<typeof TextReducer>;
 
-const TemplateFull: StoryFn<typeof ContentShrinker> = (args) => <ContentShrinker {...args} />;
+const TemplateFull: StoryFn<typeof TextReducer> = (args) => <TextReducer {...args} />;
 
 export const Default = TemplateFull.bind({});
 Default.args = {
diff --git a/src/components/ContentShrinker/ContentShrinker.tsx b/src/components/TextReducer/TextReducer.tsx
similarity index 92%
rename from src/components/ContentShrinker/ContentShrinker.tsx
rename to src/components/TextReducer/TextReducer.tsx
index 1ea429159..d02fc02b8 100644
--- a/src/components/ContentShrinker/ContentShrinker.tsx
+++ b/src/components/TextReducer/TextReducer.tsx
@@ -6,7 +6,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { OverflowText, OverflowTextProps } from "./../Typography";
 
-export interface ContentShrinkerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
+export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
     /**
      * Maximum number of nodes that are used from the HTML content.
      * An HTML element with multiple sub elements is count as only 1 node.
@@ -31,13 +31,13 @@ export interface ContentShrinkerProps extends Pick<React.HTMLAttributes<HTMLElem
  * Component to reduce HTML markup content to simple text.
  * Display can be wrapped easily in `OverflowText`.
  */
-export const ContentShrinker = ({
+export const TextReducer = ({
     children,
     maxNodes,
     maxLength,
     useOverflowTextWrapper,
     overflowTextProps,
-}: ContentShrinkerProps) => {
+}: TextReducerProps) => {
     const nodesCount = 0;
 
     const onlyText = (children: React.ReactNode | React.ReactNode[], maxNodes?: number): string => {
@@ -84,7 +84,7 @@ export const ContentShrinker = ({
         <OverflowText
             {...overflowTextProps}
             className={
-                `${eccgui}-contentshrinker` +
+                `${eccgui}-textreducer` +
                 (overflowTextProps && overflowTextProps.className ? ` ${overflowTextProps.className}` : "")
             }
         >
@@ -95,4 +95,4 @@ export const ContentShrinker = ({
     );
 };
 
-export default ContentShrinker;
+export default TextReducer;
diff --git a/src/components/index.ts b/src/components/index.ts
index 578add833..980860bf0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,7 +10,7 @@ export * from "./Button/Button";
 export * from "./Card";
 export * from "./Chat";
 export * from "./Checkbox/Checkbox";
-export * from "./ContentShrinker/ContentShrinker";
+export * from "./TextReducer/TextReducer";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";

From b98a6cb8770246870995a819c087205d503c3059 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 4 Sep 2025 16:17:25 +0200
Subject: [PATCH 26/29] fix array rendering

---
 src/components/Chat/ChatArea.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/ChatArea.tsx b/src/components/Chat/ChatArea.tsx
index ed516ea15..d854d022a 100644
--- a/src/components/Chat/ChatArea.tsx
+++ b/src/components/Chat/ChatArea.tsx
@@ -95,8 +95,8 @@ export const ChatArea = ({
                 <div className={`${eccgui}-chat__area-contentwidth`} ref={chatcontents}>
                     {autoSpacingSize && children ? (
                         <ul>
-                            {React.Children.toArray(children).map((child) => (
-                                <li>
+                            {React.Children.toArray(children).map((child, index) => (
+                                <li key={index}>
                                     {child}
                                     <Spacing size={autoSpacingSize} />
                                 </li>

From 445097312d9c88c82577ef2129b7145cb97437c6 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 4 Sep 2025 16:28:10 +0200
Subject: [PATCH 27/29] move shrinking functionality to own component

---
 CHANGELOG.md                                  |  2 +
 src/components/Chat/ChatContent.tsx           | 49 +++-----------
 src/components/Chat/ChatContentCollapsed.tsx  | 64 +++++++++++++++++++
 src/components/Chat/index.ts                  |  1 +
 .../Chat/stories/ChatArea.stories.tsx         |  6 +-
 .../Chat/stories/ChatContent.stories.tsx      |  3 +-
 .../stories/ChatContentCollapsed.stories.tsx  | 24 +++++++
 7 files changed, 106 insertions(+), 43 deletions(-)
 create mode 100644 src/components/Chat/ChatContentCollapsed.tsx
 create mode 100644 src/components/Chat/stories/ChatContentCollapsed.stories.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd2a97359..67e7c7905 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ChatContent />`
     -   displays single chat contents in a bubble, including options to add status line and avatar
+-   `<ChatContentCollapsed />`
+    -   can collapse (and expand) `<ChatContent />` automatically for convenience
 -   `<ChatField />`
     -   let the user input texts, calls `onSubmit` handler on enter key and submit button
 -   `<ChatArea />`
diff --git a/src/components/Chat/ChatContent.tsx b/src/components/Chat/ChatContent.tsx
index 37a438aad..ad60c14db 100644
--- a/src/components/Chat/ChatContent.tsx
+++ b/src/components/Chat/ChatContent.tsx
@@ -4,11 +4,11 @@ import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { ContextMenuProps } from "./../ContextOverlay/ContextMenu";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
-import { IconButton } from "./../Icon/IconButton";
+import { IconButtonProps } from "./../Icon/IconButton";
 import { Spacing } from "./../Separation/Spacing";
-import { TextReducer } from "./../TextReducer/TextReducer";
 import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
 
 export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
@@ -44,27 +44,13 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     markdownProps?: Omit<MarkdownProps, "children">;
     /**
-     * Callback handler if content should be expanded.
-     * Button to shrink/expand is displayed, depending on `shrinked` value.
-     * If this handler is given then the component never will change the `shrinked` state automatically.
+     * Could be used to add some type of toggle button or to include a context menu.
      */
-    onToggleSize?: () => void;
-    /**
-     * Content should dislayed shrinked.
-     * Button to expand content is displayed.
-     * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
-     * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
-     */
-    shrinked?: boolean;
-    /**
-     * Children elements are automatically shrinked to one line.
-     * If `shrinked` are not given then `shrinked=true` is infered.
-     */
-    autoShrink?: boolean;
+    actionButton?: React.ReactElement<IconButtonProps> | React.ReactElement<ContextMenuProps>;
 }
 
 /**
- * Component to display singe chat contents, including avatar and status line.
+ * Component to display single chat contents, including avatar and status line.
  */
 export const ChatContent = ({
     className,
@@ -76,23 +62,9 @@ export const ChatContent = ({
     alignment = "left",
     limitHeight,
     markdownProps,
-    shrinked,
-    autoShrink,
-    onToggleSize,
+    actionButton,
     ...otherDivProps
 }: ChatContentProps) => {
-    const [displayShrinked, setDispayShrinked] = React.useState<boolean>(
-        shrinked === true || (autoShrink === true && typeof shrinked === "undefined")
-    );
-
-    const toggleSize = () => {
-        if (onToggleSize) {
-            onToggleSize();
-        } else {
-            setDispayShrinked(!displayShrinked);
-        }
-    };
-
     const content =
         markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
 
@@ -113,7 +85,7 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {displayShrinked && autoShrink ? <TextReducer useOverflowTextWrapper>{content}</TextReducer> : content}
+            {content}
         </div>
     );
 
@@ -142,17 +114,14 @@ export const ChatContent = ({
                     </FlexibleLayoutItem>
                 )}
                 <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
-                {(displayShrinked || onToggleSize || autoShrink) && (
+                {actionButton && (
                     <FlexibleLayoutItem
                         className={`${eccgui}-chat__content-sizetoggle`}
                         growFactor={0}
                         shrinkFactor={0}
                         style={alignment === "right" ? { order: -1 } : undefined}
                     >
-                        <IconButton
-                            name={displayShrinked ? "toggler-showmore" : "toggler-showless"}
-                            onClick={() => toggleSize()}
-                        />
+                        {actionButton}
                     </FlexibleLayoutItem>
                 )}
             </FlexibleLayoutContainer>
diff --git a/src/components/Chat/ChatContentCollapsed.tsx b/src/components/Chat/ChatContentCollapsed.tsx
new file mode 100644
index 000000000..4b10f937e
--- /dev/null
+++ b/src/components/Chat/ChatContentCollapsed.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { IconButton } from "../Icon/IconButton";
+import { TextReducer, TextReducerProps } from "../TextReducer/TextReducer";
+
+import { ChatContentProps } from "./ChatContent";
+
+export interface ChatContentCollapsedProps {
+    children: React.ReactElement<ChatContentProps>;
+    /**
+     * Set this to `false` if the compoment should initally start in an expanded state.
+     */
+    collapsed?: boolean;
+    /**
+     * Use this to set extra `TextReducer` properties.
+     * This is used to create the collapsed variant of the given content.
+     */
+    textReducerProps?: Omit<TextReducerProps, "children">;
+    /**
+     * Text for collapse button.
+     */
+    textCollapse?: string;
+    /**
+     * Text for expand button.
+     */
+    textExpand?: string;
+}
+
+/**
+ * Adds an auto collapsing feature for convenience to `ChatContent`.
+ */
+export const ChatContentCollapsed = ({
+    children,
+    collapsed = true,
+    textReducerProps = {},
+    textCollapse = "Collapse",
+    textExpand = "Expand",
+}: ChatContentCollapsedProps) => {
+    const [displayCollapsed, setDispayCollapsed] = React.useState<boolean>(collapsed);
+
+    const childrenAsTextline = (
+        <TextReducer useOverflowTextWrapper {...textReducerProps}>
+            {typeof children.props.children === "string" ? (
+                <Markdown>{children.props.children}</Markdown>
+            ) : (
+                children.props.children
+            )}
+        </TextReducer>
+    );
+
+    return React.cloneElement(children, {
+        children: displayCollapsed ? childrenAsTextline : children.props.children,
+        actionButton: (
+            <IconButton
+                text={displayCollapsed ? textExpand : textCollapse}
+                name={displayCollapsed ? "toggler-showmore" : "toggler-showless"}
+                onClick={() => setDispayCollapsed(!displayCollapsed)}
+            />
+        ),
+    });
+};
+
+export default ChatContentCollapsed;
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
index efe183ce8..95b42594f 100644
--- a/src/components/Chat/index.ts
+++ b/src/components/Chat/index.ts
@@ -1,3 +1,4 @@
 export * from "./ChatArea";
 export * from "./ChatContent";
+export * from "./ChatContentCollapsed";
 export * from "./ChatField";
diff --git a/src/components/Chat/stories/ChatArea.stories.tsx b/src/components/Chat/stories/ChatArea.stories.tsx
index f8aa529f3..5bfcdc64a 100644
--- a/src/components/Chat/stories/ChatArea.stories.tsx
+++ b/src/components/Chat/stories/ChatArea.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatArea, ChatContent, ChatField } from "../../../index";
+import { ChatArea, ChatContent, ChatContentCollapsed, ChatField } from "../../../index";
 
 import { Default as ShortChatBubble, LongChatBubble } from "./ChatContent.stories";
 import { Default as ChatFieldExample } from "./ChatField.stories";
@@ -26,7 +26,9 @@ Default.args = {
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContent {...ShortChatBubble.args} avatar={undefined} displayType="free" />,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
-        <ChatContent {...LongChatBubble.args} autoShrink />,
+        <ChatContentCollapsed>
+            <ChatContent {...LongChatBubble.args} />
+        </ChatContentCollapsed>,
         <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
         <ChatContent {...ShortChatBubble.args} />,
     ],
diff --git a/src/components/Chat/stories/ChatContent.stories.tsx b/src/components/Chat/stories/ChatContent.stories.tsx
index 12818562a..36c4a8cac 100644
--- a/src/components/Chat/stories/ChatContent.stories.tsx
+++ b/src/components/Chat/stories/ChatContent.stories.tsx
@@ -45,12 +45,13 @@ Default.args = {
             <strong>Username</strong> 25 minutes ago
         </OverflowText>
     ),
-    onToggleSize: undefined,
 };
 
 export const LongChatBubble = TemplateFull.bind({});
 LongChatBubble.args = {
     ...Default.args,
+    avatar: undefined,
+    displayType: "simple",
     children: (
         <HtmlContentBlock>
             <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
diff --git a/src/components/Chat/stories/ChatContentCollapsed.stories.tsx b/src/components/Chat/stories/ChatContentCollapsed.stories.tsx
new file mode 100644
index 000000000..ed0e1d489
--- /dev/null
+++ b/src/components/Chat/stories/ChatContentCollapsed.stories.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, ChatContentCollapsed } from "../../../index";
+
+import { LongChatBubble } from "./ChatContent.stories";
+
+export default {
+    title: "Components/Chat/ChatContentCollapsed",
+    component: ChatContentCollapsed,
+    argTypes: {},
+} as Meta<typeof ChatContentCollapsed>;
+
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContentCollapsed> = (args) => (
+    <div key={update++}>
+        <ChatContentCollapsed {...args} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: <ChatContent {...LongChatBubble.args} />,
+};

From 43a4bbd65662069ffc89fb3137cd29501b18374b Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 4 Sep 2025 16:41:03 +0200
Subject: [PATCH 28/29] extend chat area content examples

---
 .../Chat/stories/ChatArea.stories.tsx         | 27 +++++++++++++++++--
 .../Chat/stories/ChatContent.stories.tsx      |  2 +-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Chat/stories/ChatArea.stories.tsx b/src/components/Chat/stories/ChatArea.stories.tsx
index 5bfcdc64a..532f0ef1f 100644
--- a/src/components/Chat/stories/ChatArea.stories.tsx
+++ b/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} />
diff --git a/src/components/Chat/stories/ChatContent.stories.tsx b/src/components/Chat/stories/ChatContent.stories.tsx
index 36c4a8cac..9a7a74d1e 100644
--- a/src/components/Chat/stories/ChatContent.stories.tsx
+++ b/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,

From 4b92f4bd4ca2a153973c0b7485cbbedaa789e757 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 4 Sep 2025 16:55:14 +0200
Subject: [PATCH 29/29] forward events when text submit handler is given

---
 src/components/Chat/ChatField.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Chat/ChatField.tsx b/src/components/Chat/ChatField.tsx
index 836fcfffc..e024efd1c 100644
--- a/src/components/Chat/ChatField.tsx
+++ b/src/components/Chat/ChatField.tsx
@@ -21,7 +21,14 @@ export interface ChatFieldProps extends TextAreaProps, TestableComponent {
  * Component to input chat text.
  * Based on `TextArea` component.
  */
-export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextAreaProps }: ChatFieldProps) => {
+export const ChatField = ({
+    className,
+    onTextSubmit,
+    onChange,
+    onKeyDown,
+    rightElement,
+    ...otherTextAreaProps
+}: ChatFieldProps) => {
     const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
 
     const onContentChange = (value: string) => {
@@ -29,6 +36,7 @@ export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextA
     };
 
     const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (onKeyDown) onKeyDown(e);
         if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
             e.preventDefault();
             onTextSubmit(chatvalue.current);
@@ -40,10 +48,15 @@ export const ChatField = ({ className, onTextSubmit, rightElement, ...otherTextA
             fill
             autoResize
             className={`${eccgui}-chat__inputfield` + (className ? ` ${className}` : "")}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                onContentChange(e.target.value);
-            }}
-            onKeyDown={onTextSubmit ? onEnter : undefined}
+            onChange={
+                onTextSubmit
+                    ? (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                          onContentChange(e.target.value);
+                          if (onChange) onChange(e);
+                      }
+                    : onChange
+            }
+            onKeyDown={onTextSubmit ? onEnter : onKeyDown}
             rightElement={
                 (onTextSubmit || rightElement) && (
                     <>