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

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

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, Depiction, HtmlContentBlock, 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/ChatContent",
+    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: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={5} random={false} />
+        </HtmlContentBlock>
+    ),
+    avatar: <Depiction image={<Icon name={"application-useraccount"} />} />,
+    statusLine: (
+        <OverflowText>
+            <strong>Username</strong> 25 minutes ago
+        </OverflowText>
+    ),
+};
+
+export const LongChatBubble = TemplateFull.bind({});
+LongChatBubble.args = {
+    ...Default.args,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={10} avgSentencesPerParagraph={10} random={false} />
+        </HtmlContentBlock>
+    ),
+    limitHeight: true,
+};

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

package/src/components/Icon/IconButton.tsx

@@ -50,7 +50,7 @@ export const IconButton = ({
     const defaultIconTooltipProps = {
         hoverOpenDelay: 1000,
         openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined,
-        swapPlaceholderDelay: 1,
+        swapPlaceholderDelay: 10,
     };
     const iconProps = {
         small: restProps.small,

package/src/components/Icon/canonicalIconNames.tsx

@@ -8,6 +8,7 @@ const canonicalIcons = {
     "application-homepage": icons.Workspace,
     "application-legacygui": icons.ResetAlt,
     "application-mapping": icons.ModelBuilder,
+    "application-colors": icons.ColorPalette,
     "application-queries": icons.DataView,
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
@@ -50,6 +51,7 @@ const canonicalIcons = {
     "artefact-workflow": icons.ModelBuilder,
 
     "data-boolean": icons.Boolean,
+    "data-color": icons.ColorPalette,
     "data-sourcepath": icons.Data_2,
     "data-targetpath": icons.Data_1,
     "data-string": icons.StringText,
@@ -145,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,

package/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"}

package/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({});

package/src/components/Tooltip/Tooltip.tsx

@@ -134,7 +134,15 @@ export const Tooltip = ({
                         (target as HTMLElement).focus();
                         break;
                     case "afterhover":
-                        (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+                        // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up
+                        (target as HTMLElement).addEventListener(
+                            "mouseover",
+                            () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })),
+                            {
+                                capture: true,
+                                once: true,
+                            }
+                        );
                         break;
                 }
             }

package/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";

package/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";

package/src/extensions/react-flow/_react-flow_v12.scss

@@ -1,5 +1,12 @@
-.react-flow .react-flow__edges svg {
+// needed styles from "@xyflow/react/dist/style.css" to ensure proper functionality
+svg.react-flow__connectionline {
+    position: absolute;
+    z-index: 1001;
     overflow: visible;
+}
+
+.react-flow .react-flow__edges svg {
     position: absolute;
+    overflow: visible;
     pointer-events: none;
 }