fix styles

frontend/app/element/chatinput.less

@@ -1,25 +1,22 @@
 .chat-group {
     display: flex;
-    align-items: stretch; /* Make both textarea and palette stretch equally */
+    align-items: stretch;
     border-radius: 6px;
     position: relative;
     width: 100%;
     border: 2px solid var(--form-element-border-color);
     background: var(--form-element-bg-color);
     padding: 5px;
-    gap: 5px;
+    gap: 10px;
 
-    /* Focus style */
     &.focused {
         border-color: var(--form-element-primary-color);
     }
 
-    /* Error state */
     &.error {
         border-color: var(--form-element-error-color);
     }
 
-    /* Disabled state */
     &.disabled {
         opacity: 0.75;
     }
@@ -36,31 +33,32 @@
         justify-content: center;
     }
 
-    /* Textarea */
     .chat-textarea {
-        flex-grow: 1; /* Textarea should take up remaining space */
+        flex-grow: 1;
         margin: 0;
-        padding: 5px;
         border: none;
         box-shadow: none;
+        box-sizing: border-box;
         background-color: transparent;
         resize: none;
-        overflow-y: auto; /* Only scroll when the max height is reached */
+        overflow-y: auto;
-        line-height: 1.5;
+        line-height: 1.4;
         color: var(--form-element-text-color);
-        min-height: 24px;
+        vertical-align: top;
+        height: auto;
+        padding: 0;
 
         &:focus-visible {
             outline: none;
         }
     }
 
-    /* Emoji palette container, stays at the bottom */
+    .emoji-palette-wrapper {
-    .emoji-palette {
         display: flex;
-        align-items: flex-end; /* Aligns the emoji palette button to the bottom */
+        align-items: flex-end;
-        justify-content: center;
+
-        height: 100%; /* Ensure full height */
+        button {
-        min-width: 40px; /* Set a minimum width for the emoji button area */
+            padding: 3px 4px;
+        }
     }
 }

frontend/app/element/chatinput.stories.tsx

@@ -98,7 +98,7 @@ export const ChatInputWithLongText: Story = {
     },
     args: {
         placeholder: "Type a long message...",
-        rows: 2,
+        rows: 1,
         maxRows: 10,
     },
 };

frontend/app/element/chatinput.tsx

@@ -1,6 +1,3 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
 import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
 import { EmojiPalette } from "./emojipalette";
@@ -47,16 +44,35 @@ const ChatInput = ({
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [lineHeight, setLineHeight] = useState(24); // Default line height fallback of 24px
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    // Function to count the number of lines in the textarea value
-        if (textareaRef.current) {
+    const countLines = (text: string) => {
-            textareaRef.current.style.height = "auto"; // Reset height
+        return text.split("\n").length;
-            const maxHeight = maxRows * lineHeight; // Calculate max height
+    };
-            const newHeight = Math.min(textareaRef.current.scrollHeight, maxHeight);
-            textareaRef.current.style.height = `${newHeight}px`; // Set height dynamically
-        }
 
+    const adjustTextareaHeight = () => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto"; // Reset height to auto first
+
+            const maxHeight = maxRows * lineHeight; // Max height based on maxRows
+            const currentLines = countLines(textareaRef.current.value); // Count the number of lines
+            const newHeight = Math.min(textareaRef.current.scrollHeight, maxHeight); // Calculate new height
+
+            // If the number of lines is less than or equal to maxRows, set height accordingly
+            const calculatedHeight = currentLines <= maxRows ? `${lineHeight * currentLines}px` : `${newHeight}px`;
+
+            textareaRef.current.style.height = calculatedHeight; // Set new height based on lines or scrollHeight
+            if (actionWrapperRef.current) {
+                actionWrapperRef.current.style.height = calculatedHeight; // Adjust emoji palette wrapper height
+            }
+        }
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         setInternalValue(e.target.value);
         onChange && onChange(e.target.value);
+
+        // Adjust the height of the textarea after text change
+        adjustTextareaHeight();
     };
 
     const handleFocus = () => {
@@ -73,25 +89,13 @@ const ChatInput = ({
         if (textareaRef.current) {
             const computedStyle = window.getComputedStyle(textareaRef.current);
             let lineHeightValue = computedStyle.lineHeight;
-
-            if (lineHeightValue === "normal") {
-                const fontSize = parseFloat(computedStyle.fontSize);
-                lineHeightValue = `${fontSize * 1.2}px`; // Fallback to 1.2 ratio of font size
-            }
-
             const detectedLineHeight = parseFloat(lineHeightValue);
-            setLineHeight(detectedLineHeight || 24); // Fallback if detection fails
+            setLineHeight(detectedLineHeight);
         }
     }, [textareaRef]);
 
     useEffect(() => {
-        if (textareaRef.current) {
+        adjustTextareaHeight(); // Adjust the height when the component mounts or value changes
-            textareaRef.current.style.height = "auto";
-            const maxHeight = maxRows * lineHeight;
-            const newHeight = Math.min(textareaRef.current.scrollHeight, maxHeight);
-            textareaRef.current.style.height = `${newHeight}px`;
-            actionWrapperRef.current.style.height = `${newHeight}px`;
-        }
     }, [value, maxRows, lineHeight]);
 
     const inputValue = value ?? internalValue;
@@ -118,7 +122,7 @@ const ChatInput = ({
                             : "hidden",
                 }}
             />
-            <div ref={actionWrapperRef}>
+            <div ref={actionWrapperRef} className="emoji-palette-wrapper">
                 <EmojiPalette placement="top-end" />
             </div>
         </div>