From b985b445e717c1c528b85a9afea1a0becbeb1ea2 Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Sun, 20 Oct 2024 22:17:08 +0800 Subject: [PATCH] fix styles --- frontend/app/element/chatinput.less | 32 ++++++------- frontend/app/element/chatinput.stories.tsx | 2 +- frontend/app/element/chatinput.tsx | 54 ++++++++++++---------- 3 files changed, 45 insertions(+), 43 deletions(-) diff --git a/frontend/app/element/chatinput.less b/frontend/app/element/chatinput.less index 630b66f15..7243cc836 100644 --- a/frontend/app/element/chatinput.less +++ b/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 */ - line-height: 1.5; + overflow-y: auto; + 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 { + .emoji-palette-wrapper { display: flex; - align-items: flex-end; /* Aligns the emoji palette button to the bottom */ - justify-content: center; - height: 100%; /* Ensure full height */ - min-width: 40px; /* Set a minimum width for the emoji button area */ + align-items: flex-end; + + button { + padding: 3px 4px; + } } } diff --git a/frontend/app/element/chatinput.stories.tsx b/frontend/app/element/chatinput.stories.tsx index dc2887df8..fe471127f 100644 --- a/frontend/app/element/chatinput.stories.tsx +++ b/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, }, }; diff --git a/frontend/app/element/chatinput.tsx b/frontend/app/element/chatinput.tsx index ffc8addd8..cbddd0e20 100644 --- a/frontend/app/element/chatinput.tsx +++ b/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) => { - if (textareaRef.current) { - textareaRef.current.style.height = "auto"; // Reset height - const maxHeight = maxRows * lineHeight; // Calculate max height - const newHeight = Math.min(textareaRef.current.scrollHeight, maxHeight); - textareaRef.current.style.height = `${newHeight}px`; // Set height dynamically - } + // Function to count the number of lines in the textarea value + const countLines = (text: string) => { + return text.split("\n").length; + }; + 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) => { 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) { - 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`; - } + adjustTextareaHeight(); // Adjust the height when the component mounts or value changes }, [value, maxRows, lineHeight]); const inputValue = value ?? internalValue; @@ -118,7 +122,7 @@ const ChatInput = ({ : "hidden", }} /> -
+