minor adjustment

frontend/app/element/chatinput.stories.tsx

@@ -54,6 +54,10 @@ export const DefaultChatInput: Story = {
     render: (args) => {
         const [message, setMessage] = useState("");
 
+        const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setMessage(e.target.value);
+        };
+
         return (
             <div
                 style={{
@@ -65,7 +69,7 @@ export const DefaultChatInput: Story = {
                     justifyContent: "center",
                 }}
             >
-                <ChatInput {...args} value={message} onChange={setMessage} />
+                <ChatInput {...args} value={message} onChange={handleChange} />
             </div>
         );
     },
@@ -81,6 +85,10 @@ export const ChatInputWithLongText: Story = {
     render: (args) => {
         const [message, setMessage] = useState("This is a long message that will expand the textarea.");
 
+        const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setMessage(e.target.value);
+        };
+
         return (
             <div
                 style={{
@@ -92,7 +100,7 @@ export const ChatInputWithLongText: Story = {
                     justifyContent: "center",
                 }}
             >
-                <ChatInput {...args} value={message} onChange={setMessage} />
+                <ChatInput {...args} value={message} onChange={handleChange} />
             </div>
         );
     },

frontend/app/element/chatinput.tsx

@@ -7,7 +7,7 @@ import "./chatinput.less";
 interface ChatInputProps {
     value?: string;
     className?: string;
-    onChange?: (value: string) => void;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onFocus?: () => void;
     onBlur?: () => void;
@@ -69,7 +69,7 @@ const ChatInput = ({
 
     const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         setInternalValue(e.target.value);
-        onChange && onChange(e.target.value);
+        onChange?.(e);
 
         // Adjust the height of the textarea after text change
         adjustTextareaHeight();

frontend/app/element/input.less

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-.input {
+.input-wrapper {
     display: flex;
     align-items: center;
     border-radius: 6px;
@@ -103,7 +103,7 @@
     }
 
     /* Ensure the input elements inside the group behave correctly */
-    .input {
+    .input-wrapper {
         border: none; /* Remove the individual input border */
         flex-grow: 1;
         margin: 0;
@@ -117,13 +117,13 @@
             border-color: transparent; /* Make sure individual input error doesn't override group error */
         }
 
-        .input-inner {
+        .input-wrapper-inner {
             display: flex;
             flex-direction: column;
             position: relative;
             flex-grow: 1;
 
-            .input-inner-label {
+            .label {
                 padding: var(--inner-padding);
                 font-size: 12.5px;
                 transition: all 0.3s;
@@ -132,7 +132,7 @@
                 user-select: none;
             }
 
-            .input-inner-input {
+            .input {
                 width: 100%;
                 height: 100%;
                 border: none;
@@ -141,23 +141,10 @@
                 background-color: transparent;
                 color: var(--form-element-text-color);
                 line-height: 24;
-                padding: 0 5px;
-
-                &:placeholder-shown {
-                    user-select: none;
-                }
+                padding: 0 7px;
             }
 
-            .input-inner-textarea {
-                padding: 0 5px;
-                resize: vertical;
-                // overflow-y: auto;
-                line-height: 1.5;
-                color: var(--form-element-text-color);
-            }
-
-            .input-inner-input,
-            .input-inner-textarea {
+            .input {
                 background-color: transparent;
             }
         }

frontend/app/element/input.tsx

@@ -124,19 +124,19 @@ const Input = forwardRef<HTMLDivElement, InputProps>(
         return (
             <div
                 ref={ref}
-                className={clsx("input", className, {
+                className={clsx("input-wrapper", className, {
                     disabled: disabled,
                 })}
             >
-                <div className="input-inner">
+                <div className="input-wrapper-inner">
                     {label && (
-                        <label className={clsx("input-inner-label")} htmlFor={label}>
+                        <label className={clsx("label")} htmlFor={label}>
                             {label}
                         </label>
                     )}
 
                     <input
-                        className={clsx("input-inner-input")}
+                        className={clsx("input")}
                         ref={inputRef}
                         value={inputValue}
                         onChange={handleInputChange}