diff --git a/web/app/components/base/chat/chat/chat-input-area/hooks.ts b/web/app/components/base/chat/chat/chat-input-area/hooks.ts index 5f54012a0..6b6e80107 100644 --- a/web/app/components/base/chat/chat/chat-input-area/hooks.ts +++ b/web/app/components/base/chat/chat/chat-input-area/hooks.ts @@ -3,23 +3,22 @@ import { useRef, useState, } from 'react' -import type { TextAreaRef } from 'rc-textarea' export const useTextAreaHeight = () => { const wrapperRef = useRef(null) - const textareaRef = useRef(null) + const textareaRef = useRef(undefined) const textValueRef = useRef(null) const holdSpaceRef = useRef(null) const [isMultipleLine, setIsMultipleLine] = useState(false) const handleComputeHeight = useCallback(() => { - const textareaElement = textareaRef.current?.resizableTextArea.textArea + const textareaElement = textareaRef.current + if (wrapperRef.current && textareaElement && textValueRef.current && holdSpaceRef.current) { const { width: wrapperWidth } = wrapperRef.current.getBoundingClientRect() const { height: textareaHeight } = textareaElement.getBoundingClientRect() const { width: textValueWidth } = textValueRef.current.getBoundingClientRect() const { width: holdSpaceWidth } = holdSpaceRef.current.getBoundingClientRect() - if (textareaHeight > 32) { setIsMultipleLine(true) } diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx index ec3b764ff..d7b5f8b39 100644 --- a/web/app/components/base/chat/chat/chat-input-area/index.tsx +++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx @@ -3,7 +3,7 @@ import { useRef, useState, } from 'react' -import Textarea from 'rc-textarea' +import Textarea from 'react-textarea-autosize' import { useTranslation } from 'react-i18next' import Recorder from 'js-audio-recorder' import type { @@ -174,18 +174,18 @@ const ChatInputArea = ({ {query}