add ChatField component to enter texts

Author: haschek

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
 

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" ? (

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;

src/components/Chat/_chat.scss

@@ -39,3 +39,9 @@
         }
     }
 }
+
+.eccgui-chat__inputfield {
+    min-height: mini-units(9);
+    max-height: 39vh;
+    resize: none !important;
+}

src/components/Chat/index.ts

@@ -1 +1,2 @@
 export * from "./ChatContent";
+export * from "./ChatField";

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: {

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