;
+}
+
+/**
+ * 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" ? {children} : children;
+
+ const chatitem = (
+
+ {statusLine && (
+
+ {statusLine}
+
+
+ )}
+ {content}
+
+ );
+
+ const indentationSizes = {
+ small: "8%",
+ medium: "21%",
+ large: "34%",
+ };
+
+ return (
+
+
+ {avatar && (
+
+ {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
+
+ )}
+ {chatitem}
+ {actionButton && (
+
+ {actionButton}
+
+ )}
+
+
+ );
+};
+
+export default ChatContent;
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;
+ /**
+ * 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;
+ /**
+ * 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(collapsed);
+
+ const childrenAsTextline = (
+
+ {typeof children.props.children === "string" ? (
+ {children.props.children}
+ ) : (
+ children.props.children
+ )}
+
+ );
+
+ return React.cloneElement(children, {
+ children: displayCollapsed ? childrenAsTextline : children.props.children,
+ actionButton: (
+ setDispayCollapsed(!displayCollapsed)}
+ />
+ ),
+ });
+};
+
+export default ChatContentCollapsed;
diff --git a/src/components/Chat/ChatField.tsx b/src/components/Chat/ChatField.tsx
new file mode 100644
index 000000000..e024efd1c
--- /dev/null
+++ b/src/components/Chat/ChatField.tsx
@@ -0,0 +1,75 @@
+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 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.
+ */
+ onTextSubmit?: (value: string) => void;
+}
+
+/**
+ * Component to input chat text.
+ * Based on `TextArea` component.
+ */
+export const ChatField = ({
+ className,
+ onTextSubmit,
+ onChange,
+ onKeyDown,
+ rightElement,
+ ...otherTextAreaProps
+}: ChatFieldProps) => {
+ const chatvalue = React.useRef(otherTextAreaProps.children ?? "");
+
+ const onContentChange = (value: string) => {
+ chatvalue.current = value;
+ };
+
+ const onEnter = (e: React.KeyboardEvent) => {
+ if (onKeyDown) onKeyDown(e);
+ if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
+ e.preventDefault();
+ onTextSubmit(chatvalue.current);
+ }
+ };
+
+ return (
+