From 025facbc2d3e2bd6a89527c68e0ae35e7269da99 Mon Sep 17 00:00:00 2001 From: heheer Date: Tue, 22 Oct 2024 18:33:02 +0800 Subject: [PATCH] perf:textarea auto height (#2967) * perf:textarea auto height * optimize editor height & fix variable label split --- .../common/Textarea/PromptEditor/Editor.tsx | 5 +- .../components/VariableLabel.tsx | 4 +- projects/app/package.json | 1 + .../common/Textarea/MyTextarea/index.tsx | 57 ++++++++++++++++--- .../core/app/DatasetParamsModal.tsx | 8 +-- .../components/core/app/WelcomeTextConfig.tsx | 3 + .../ChatBox/components/VariableInput.tsx | 17 +++--- .../core/chat/components/AIResponseBox.tsx | 13 +++-- .../Flow/hooks/useDebug.tsx | 16 +++--- .../nodes/NodePluginIO/InputTypeConfig.tsx | 15 ++--- .../nodes/NodePluginIO/NodePluginConfig.tsx | 7 ++- 11 files changed, 100 insertions(+), 46 deletions(-) diff --git a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx index 322283400..4fdb78351 100644 --- a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx +++ b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx @@ -61,6 +61,7 @@ export default function Editor({ const [key, setKey] = useState(getNanoid(6)); const [_, startSts] = useTransition(); const [focus, setFocus] = useState(false); + const [scrollHeight, setScrollHeight] = useState(0); const initialConfig = { namespace: 'promptEditor', @@ -128,6 +129,8 @@ export default function Editor({ { + const rootElement = editor.getRootElement(); + setScrollHeight(rootElement?.scrollHeight || 0); startSts(() => { onChange?.(editorState, editor); }); @@ -139,7 +142,7 @@ export default function Editor({ 0 ? [] : variables} /> - {showOpenModal && ( + {showOpenModal && scrollHeight > maxH && ( diff --git a/projects/app/package.json b/projects/app/package.json index a29a4daec..b184a1440 100644 --- a/projects/app/package.json +++ b/projects/app/package.json @@ -57,6 +57,7 @@ "react-i18next": "14.1.2", "react-markdown": "^9.0.1", "react-syntax-highlighter": "^15.5.0", + "react-textarea-autosize": "^8.5.4", "reactflow": "^11.7.4", "rehype-external-links": "^3.0.0", "rehype-katex": "^7.0.0", diff --git a/projects/app/src/components/common/Textarea/MyTextarea/index.tsx b/projects/app/src/components/common/Textarea/MyTextarea/index.tsx index 1fbe5881b..6d1b9cd3f 100644 --- a/projects/app/src/components/common/Textarea/MyTextarea/index.tsx +++ b/projects/app/src/components/common/Textarea/MyTextarea/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { Box, @@ -13,11 +13,12 @@ import MyTooltip from '@fastgpt/web/components/common/MyTooltip'; import { useTranslation } from 'next-i18next'; import MyIcon from '@fastgpt/web/components/common/Icon'; import MyModal from '@fastgpt/web/components/common/MyModal'; +import ResizeTextarea from 'react-textarea-autosize'; type Props = TextareaProps & { title?: string; iconSrc?: string; - // variables: string[]; + autoHeight?: boolean; }; const MyTextarea = React.forwardRef(function MyTextarea(props, ref) { @@ -28,6 +29,10 @@ const MyTextarea = React.forwardRef(function MyTexta const { title = t('common:core.app.edit.Prompt Editor'), iconSrc = 'modal/edit', + autoHeight = false, + onChange, + maxH, + minH, ...childProps } = props; @@ -35,16 +40,27 @@ const MyTextarea = React.forwardRef(function MyTexta return ( <> - + {isOpen && ( @@ -71,17 +87,44 @@ export default React.memo(MyTextarea); const Editor = React.memo(function Editor({ onOpenModal, textareaRef, + autoHeight = false, + onChange, + maxH, + minH, + showResize, ...props }: Props & { textareaRef: React.RefObject; onOpenModal?: () => void; + showResize?: boolean; }) { const { t } = useTranslation(); + const [scrollHeight, setScrollHeight] = useState(0); return ( -