Integrate components to display user chat (CMEM-6775)

CHANGELOG.md

@@ -8,6 +8,16 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+-   `<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 />`
+    -   combine a list of chat contents and user input box
+-   `<TextReducer />`
+    -   reduces HTML to simple text and can display it as one ellipsed line
 -   `<Tooltip />`
     -   prove useage of `usePlaceholder` by jest test coverage
 
@@ -20,7 +30,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<Tooltip />`
     -   re-check hover state after swapping the placeholder before triggering the event bubbling
 
-## Changed
+### Changed
 
 -   `<IconButton/>`
     -   increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended

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",

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, index) => (
+                                <li key={index}>
+                                    {child}
+                                    <Spacing size={autoSpacingSize} />
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    );
+};
+
+export default ChatArea;

src/components/Chat/ChatContent.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+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 { IconButtonProps } from "./../Icon/IconButton";
+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">;
+    /**
+     * Could be used to add some type of toggle button or to include a context menu.
+     */
+    actionButton?: React.ReactElement<IconButtonProps> | React.ReactElement<ContextMenuProps>;
+}
+
+/**
+ * Component to display single chat contents, including avatar and status line.
+ */
+export const ChatContent = ({
+    className,
+    children,
+    statusLine,
+    avatar,
+    displayType = "bubble",
+    indentationSize,
+    alignment = "left",
+    limitHeight,
+    markdownProps,
+    actionButton,
+    ...otherDivProps
+}: ChatContentProps) => {
+    const content =
+        markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
+
+    const chatitem = (
+        <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>
+            )}
+            {content}
+        </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`}>{chatitem}</FlexibleLayoutItem>
+                {actionButton && (
+                    <FlexibleLayoutItem
+                        className={`${eccgui}-chat__content-sizetoggle`}
+                        growFactor={0}
+                        shrinkFactor={0}
+                        style={alignment === "right" ? { order: -1 } : undefined}
+                    >
+                        {actionButton}
+                    </FlexibleLayoutItem>
+                )}
+            </FlexibleLayoutContainer>
+        </div>
+    );
+};
+
+export default ChatContent;

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;