@eccenca/gui-elements 24.4.0-fixpreventwronglydisplayedtooltipscmem6858.0 → 24.4.1-featurechatcomponentscmem6775.0

package/dist/esm/components/TextField/TextArea.js

@@ -60,7 +60,7 @@ export var TextArea = function (_a) {
                 }
                 leftIconElement.style.setProperty("left", textAreaStyle.paddingLeft);
                 textAreaElement.style.setProperty("padding-left", "calc(".concat(leftIconElementRect.width ? 2 : 1, " * ").concat(textAreaStyle.paddingLeft, " + ").concat((_l = leftIconElementRect.width) !== null && _l !== void 0 ? _l : 0, "px)"));
-                leftIconElement.addEventListener("click", function (_event) {
+                leftIconElement.addEventListener("click", function () {
                     textAreaElement.focus();
                 });
             }
@@ -98,7 +98,7 @@ export var TextArea = function (_a) {
             ? intent
             : undefined, spellCheck: intent === "removed" ? false : undefined, rows: rows && !otherBlueprintTextAreaProps.autoResize && !otherBlueprintTextAreaProps.growVertically
             ? rows
-            : 1 }, otherBlueprintTextAreaProps, { dir: "auto", onChange: maybeWrappedOnChange })));
+            : 2 }, otherBlueprintTextAreaProps, { dir: "auto", onChange: maybeWrappedOnChange })));
     var _d = wrapperDivProps !== null && wrapperDivProps !== void 0 ? wrapperDivProps : {}, wrapperClassName = _d.className, otherWrapperDivProps = __rest(_d, ["className"]);
     return wrapperDivProps || leftIcon || rightElement ? (React.createElement("div", __assign({ className: "".concat(eccgui, "-textarea__wrapper") + (wrapperClassName ? " ".concat(wrapperClassName) : "") }, otherWrapperDivProps),
         textarea,

package/dist/esm/components/TextField/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/TextField/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,OAAO,IAAI,mBAAmB,EAG9B,QAAQ,IAAI,iBAAiB,GAEhC,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAe,MAAM,qBAAqB,CAAC;AACpF,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAkC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA4BxF,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,EAST;IARZ,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,YAAQ,EAAR,IAAI,mBAAG,CAAC,KAAA,EACR,yBAAyB,+BAAA,EACzB,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,MAAM,YAAA,EACH,2BAA2B,cART,2GASxB,CADiC;IAE9B,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACtC,UAAC,eAAoC;;QACjC,IAAI,eAAe,IAAI,OAAO,eAAe,KAAK,QAAQ,EAAE,CAAC;YACzD,IAAI,aAAa,SAAqB,CAAC;YACvC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBACrC,aAAa,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;gBAClD,eAAe,CAAC,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;gBAC1C,eAAe,CAAC,OAAO,CAAC,UAAU,GAAG,MAAA,aAAa,CAAC,UAAU,mCAAI,KAAK,CAAC;gBACvE,eAAe,CAAC,OAAO,CAAC,WAAW,GAAG,MAAA,aAAa,CAAC,WAAW,mCAAI,KAAK,CAAC;gBACzE,eAAe,CAAC,OAAO,CAAC,YAAY,GAAG,MAAA,aAAa,CAAC,YAAY,mCAAI,KAAK,CAAC;YAC/E,CAAC;iBAAM,CAAC;gBACJ,aAAa,GAAG;oBACZ,UAAU,EAAE,MAAA,eAAe,CAAC,OAAO,CAAC,UAAU,mCAAI,KAAK;oBACvD,WAAW,EAAE,MAAA,eAAe,CAAC,OAAO,CAAC,WAAW,mCAAI,KAAK;oBACzD,YAAY,EAAE,MAAA,eAAe,CAAC,OAAO,CAAC,YAAY,mCAAI,KAAK;iBACvC,CAAC;YAC7B,CAAC;YACD,IAAM,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;YACpE,IAAM,cAAc,GAAG,eAAe,CAAC,aAAa,CAAC;YAErD,IAAI,QAAQ,IAAI,cAAc,EAAE,CAAC;gBAC7B,IAAM,eAAe,GAAG,cAAc,CAAC,aAAa,CAAC,WAAI,MAAM,oBAAiB,CAAgB,CAAC;gBACjG,IAAM,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;gBACpE,IACI,QAAQ,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAA,mBAAmB,CAAC,MAAM,mCAAI,CAAC,CAAC;oBAC9E,CAAC,MAAA,mBAAmB,CAAC,MAAM,mCAAI,CAAC,CAAC,EACnC,CAAC;oBACC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;gBACvE,CAAC;qBAAM,CAAC;oBACJ,eAAe,CAAC,KAAK,CAAC,WAAW,CAC7B,KAAK,EACL,UAAG,CAAC,CAAC,MAAA,mBAAmB,CAAC,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,mBAAmB,CAAC,MAAM,mCAAI,CAAC,CAAC,CAAC,GAAG,GAAG,OAAI,CACvF,CAAC;gBACN,CAAC;gBACD,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;gBACrE,eAAe,CAAC,KAAK,CAAC,WAAW,CAC7B,cAAc,EACd,eAAQ,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAM,aAAa,CAAC,WAAW,gBACpE,MAAA,mBAAmB,CAAC,KAAK,mCAAI,CAAC,QAC7B,CACR,CAAC;gBACF,eAAe,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAC,MAAkB;oBACzD,eAAe,CAAC,KAAK,EAAE,CAAC;gBAC5B,CAAC,CAAC,CAAC;YACP,CAAC;YAED,IAAI,YAAY,IAAI,cAAc,EAAE,CAAC;gBACjC,IAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CACpD,WAAI,MAAM,uBAAoB,CAClB,CAAC;gBACjB,IAAM,uBAAuB,GAAG,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;gBAC5E,IACI,QAAQ,CAAC,aAAa,CAAC,UAAU,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAA,uBAAuB,CAAC,MAAM,mCAAI,CAAC,CAAC;oBAClF,CAAC,MAAA,mBAAmB,CAAC,MAAM,mCAAI,CAAC,CAAC,EACnC,CAAC;oBACC,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;gBAC3E,CAAC;qBAAM,CAAC;oBACJ,mBAAmB,CAAC,KAAK,CAAC,WAAW,CACjC,KAAK,EACL,UAAG,CAAC,CAAC,MAAA,mBAAmB,CAAC,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,uBAAuB,CAAC,MAAM,mCAAI,CAAC,CAAC,CAAC,GAAG,GAAG,OAAI,CAC3F,CAAC;gBACN,CAAC;gBACD,mBAAmB,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;gBAC3E,eAAe,CAAC,KAAK,CAAC,WAAW,CAC7B,eAAe,EACf,eAAQ,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAM,aAAa,CAAC,YAAY,gBACzE,MAAA,uBAAuB,CAAC,KAAK,mCAAI,CAAC,QACjC,CACR,CAAC;YACN,CAAC;QACL,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,EAAE,YAAY,CAAC,CAC3B,CAAC;IAEF,IAAI,UAAU,CAAC;IACf,QAAQ,MAAM,EAAE,CAAC;QACb,KAAK,QAAQ;YACT,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC;YACpC,MAAM;QACV,KAAK,SAAS;YACV,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC;YACtC,MAAM;QACV;YACI,UAAU,GAAG,MAAqB,CAAC;YACnC,MAAM;IACd,CAAC;IAED,IAAM,oBAAoB,GAAG,iBAAiB,uBAAM,2BAA2B,KAAE,yBAAyB,2BAAA,IAAG,CAAC;IAE9G,IAAM,QAAQ,GAAG,CACb,oBAAC,iBAAiB,aACd,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EACL,UAAG,MAAM,cAAW;YACpB,CAAC,MAAM,CAAC,CAAC,CAAC,WAAI,MAAM,sBAAY,MAAM,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9C,CAAC,SAAS,CAAC,CAAC,CAAC,WAAI,SAAS,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAEtC,MAAM,EACF,MAAM,IAAI,CAAC,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC;YAChE,CAAC,CAAE,MAA0B;YAC7B,CAAC,CAAC,SAAS,EAEnB,UAAU,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACpD,IAAI,EACA,IAAI,IAAI,CAAC,2BAA2B,CAAC,UAAU,IAAI,CAAC,2BAA2B,CAAC,cAAc;YAC1F,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,CAAC,IAEP,2BAA2B,IAC/B,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,oBAAoB,IAChC,CACL,CAAC;IAEF,IAAM,KAA2D,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,EAAnE,gBAAgB,eAAA,EAAK,oBAAoB,cAAtD,aAAwD,CAAwB,CAAC;IAEvF,OAAO,eAAe,IAAI,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,CACjD,sCACI,SAAS,EAAE,UAAG,MAAM,uBAAoB,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAI,gBAAgB,CAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IACvF,oBAAoB;QAEvB,QAAQ;QACR,QAAQ,IAAI,CACT,6BAAK,SAAS,EAAE,UAAG,MAAM,oBAAiB,IACrC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC5B,oBAAC,IAAI,IACD,IAAI,EAAE,QAAyB,EAC/B,SAAS,EAAE,mBAAmB,CAAC,IAAI,EACnC,MAAM,EAAE,UAAqC,GAC/C,CACL,CAAC,CAAC,CAAC,CACA,8BAAM,SAAS,EAAE,mBAAmB,CAAC,IAAI,IAAG,QAAQ,CAAQ,CAC/D,CACC,CACT;QACA,YAAY,IAAI,6BAAK,SAAS,EAAE,UAAG,MAAM,uBAAoB,IAAG,YAAY,CAAO,CAClF,CACT,CAAC,CAAC,CAAC,CACA,QAAQ,CACX,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/TextField/TextArea.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/index.js

@@ -8,6 +8,7 @@ export * from "./Badge/Badge.js";
 export * from "./Breadcrumb/index.js";
 export * from "./Button/Button.js";
 export * from "./Card/index.js";
+export * from "./Chat/index.js";
 export * from "./Checkbox/Checkbox.js";
 export * from "./ContextOverlay/index.js";
 export * from "./Depiction/Depiction.js";

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAE5C,cAAc,cAAc,CAAC"}

package/dist/types/common/index.d.ts

@@ -1,3 +1,4 @@
+export type { IntentTypes as IntentBaseTypes } from "./Intent";
 export declare const utils: {
     openInNewTab: (event: React.MouseEvent<HTMLAnchorElement>, handler?: (e: React.MouseEvent<HTMLAnchorElement>) => void, url?: string) => void;
     decideContrastColorValue: ({ testColor, lightColor, darkColor, }: import("./utils/colorDecideContrastvalue").decideContrastColorValueProps) => string;

package/dist/types/components/Chat/ChatArea.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { TestableComponent } from "../../components/interfaces";
+import { FlexibleLayoutContainerProps } from "./../FlexibleLayout";
+import { 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 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";
+}
+/**
+ * Component to display a full chat, containing chat content bubbles and text input.
+ */
+export declare const ChatArea: ({ children, className, chatField, chatFieldPosition, contentWidth, autoSpacingSize, gapSize, autoScrollTo, ...otherFlexibleLayoutContainerProps }: ChatAreaProps) => React.JSX.Element;
+export default ChatArea;

package/dist/types/components/Chat/ChatContent.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { TestableComponent } from "../../components/interfaces";
+import { MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { DepictionProps } from "./../Depiction/Depiction";
+import { OverflowTextProps } 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 the opposite side to the alignment
+     */
+    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";
+    /**
+     * 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.
+     */
+    markdownProps?: Omit<MarkdownProps, "children">;
+}
+/**
+ * Component to display singe chat contents, including avatar and status line.
+ */
+export declare const ChatContent: ({ className, children, statusLine, avatar, displayType, indentationSize, alignment, limitHeight, markdownProps, ...otherDivProps }: ChatContentProps) => React.JSX.Element;
+export default ChatContent;

package/dist/types/components/Chat/ChatField.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { TestableComponent } from "../../components/interfaces";
+import { 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 declare const ChatField: ({ className, onSubmit, ...otherTextAreaProps }: ChatFieldProps) => React.JSX.Element;
+export default ChatField;

package/dist/types/components/Chat/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ChatArea";
+export * from "./ChatContent";
+export * from "./ChatField";

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -7,6 +7,7 @@ declare const canonicalIcons: {
     "application-homepage": icons.CarbonIconType;
     "application-legacygui": icons.CarbonIconType;
     "application-mapping": icons.CarbonIconType;
+    "application-colors": icons.CarbonIconType;
     "application-queries": icons.CarbonIconType;
     "application-useraccount": icons.CarbonIconType;
     "application-vocabularies": icons.CarbonIconType;
@@ -47,6 +48,7 @@ declare const canonicalIcons: {
     "artefact-uncategorized": icons.CarbonIconType;
     "artefact-workflow": icons.CarbonIconType;
     "data-boolean": icons.CarbonIconType;
+    "data-color": icons.CarbonIconType;
     "data-sourcepath": icons.CarbonIconType;
     "data-targetpath": icons.CarbonIconType;
     "data-string": icons.CarbonIconType;
@@ -136,6 +138,7 @@ declare const canonicalIcons: {
     "operation-merge": icons.CarbonIconType;
     "operation-redo": icons.CarbonIconType;
     "operation-search": icons.CarbonIconType;
+    "operation-send": icons.CarbonIconType;
     "operation-sharelink": icons.CarbonIconType;
     "operation-transform": icons.CarbonIconType;
     "operation-translate": icons.CarbonIconType;

package/dist/types/components/index.d.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";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.4.0-fixpreventwronglydisplayedtooltipscmem6858.0",
+    "version": "24.4.1-featurechatcomponentscmem6775.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/common/index.ts

@@ -4,6 +4,7 @@ import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
+export type { IntentTypes as IntentBaseTypes } from "./Intent";
 
 export const utils = {
     openInNewTab,

package/src/components/Chat/ChatArea.tsx

@@ -0,0 +1,114 @@
+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 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";
+}
+
+/**
+ * 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",
+    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={
+                `${eccgui}-chat__area` + ` ${eccgui}-chat__area--${contentWidth}` + (className ? ` ${className}` : "")
+            }
+            vertical
+            noEqualItemSpace
+            gapSize={gapSize}
+            {...otherFlexibleLayoutContainerProps}
+        >
+            {chatField && (
+                <FlexibleLayoutItem
+                    growFactor={0}
+                    shrinkFactor={0}
+                    style={chatFieldPosition === "bottom" ? { order: 1 } : undefined}
+                >
+                    <div className={`${eccgui}-chat__area-contentwidth`}>{chatField}</div>
+                </FlexibleLayoutItem>
+            )}
+            <FlexibleLayoutItem
+                style={
+                    otherFlexibleLayoutContainerProps.useAbsoluteSpace
+                        ? {
+                              overflow: "auto",
+                              minHeight: 0,
+                              padding: "2px 0",
+                          }
+                        : undefined
+                }
+            >
+                <div className={`${eccgui}-chat__area-contentwidth`} ref={chatcontents}>
+                    {autoSpacingSize && children ? (
+                        <ul>
+                            {React.Children.toArray(children).map((child) => (
+                                <li>
+                                    {child}
+                                    <Spacing size={autoSpacingSize} />
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    );
+};
+
+export default ChatArea;

package/src/components/Chat/ChatContent.tsx

@@ -0,0 +1,116 @@
+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 } 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 the opposite side to the alignment
+     */
+    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";
+    /**
+     * 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.
+     */
+    markdownProps?: Omit<MarkdownProps, "children">;
+}
+
+/**
+ * Component to display singe chat contents, including avatar and status line.
+ */
+export const ChatContent = ({
+    className,
+    children,
+    statusLine,
+    avatar,
+    displayType = "bubble",
+    indentationSize,
+    alignment = "left",
+    limitHeight,
+    markdownProps,
+    ...otherDivProps
+}: ChatContentProps) => {
+    const content = (
+        <div
+            className={
+                `${eccgui}-chat__content` +
+                ` ${eccgui}-chat__content--display-${displayType}` +
+                ` ${eccgui}-chat__content--align-${alignment}` +
+                (limitHeight ? ` ${eccgui}-chat__content--limitheight` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherDivProps}
+        >
+            {statusLine && (
+                <HtmlContentBlock small>
+                    {statusLine}
+                    <Spacing size="tiny" />
+                </HtmlContentBlock>
+            )}
+            {markdownProps && typeof children === "string" ? (
+                <Markdown {...markdownProps}>{children}</Markdown>
+            ) : (
+                children
+            )}
+        </div>
+    );
+
+    const indentationSizes = {
+        small: "8%",
+        medium: "21%",
+        large: "34%",
+    };
+
+    return (
+        <div
+            style={{
+                marginLeft: alignment === "right" && indentationSize ? indentationSizes[indentationSize] : undefined,
+                marginRight: alignment === "left" && indentationSize ? indentationSizes[indentationSize] : undefined,
+            }}
+        >
+            <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>
+        </div>
+    );
+};
+
+export default ChatContent;

package/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={"operation-send"} onClick={() => onSubmit(chatvalue.current)} />}
+            {...otherTextAreaProps}
+        />
+    );
+};
+
+export default ChatField;

package/src/components/Chat/_chat.scss

@@ -0,0 +1,81 @@
+.#{$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: 3 * $pt-border-radius;
+}
+
+.#{$eccgui}-chat__content--display-free {
+    --#{$eccgui}-chat__content-background: transparent;
+
+    padding: 1px 0;
+    box-shadow: none;
+}
+
+.#{$eccgui}-chat__content--display-bubble {
+    margin-left: 0.75 * $eccgui-size-block-whitespace;
+
+    &.#{$eccgui}-chat__content--align-right {
+        margin-right: 0.75 * $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 {
+            @extend .bp5-elevation-1;
+
+            position: absolute;
+            top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});
+            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.25 * $eccgui-size-block-whitespace;
+            left: auto;
+            transform: rotate(225deg);
+        }
+    }
+}
+
+.#{$eccgui}-chat__content--limitheight {
+    max-height: 50vh;
+}
+
+.#{$eccgui}-chat__inputfield {
+    min-height: mini-units(9);
+    max-height: 39vh;
+    resize: none !important;
+}
+
+.#{$eccgui}-chat__area-contentwidth {
+    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;
+    }
+}

package/src/components/Chat/index.ts

@@ -0,0 +1,3 @@
+export * from "./ChatArea";
+export * from "./ChatContent";
+export * from "./ChatField";

package/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} />,
+    ],
+};