From 025facbc2d3e2bd6a89527c68e0ae35e7269da99 Mon Sep 17 00:00:00 2001
From: heheer <heheer@sealos.io>
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({
         <FocusPlugin focus={focus} setFocus={setFocus} />
         <OnChangePlugin
           onChange={(editorState, editor) => {
+            const rootElement = editor.getRootElement();
+            setScrollHeight(rootElement?.scrollHeight || 0);
             startSts(() => {
               onChange?.(editorState, editor);
             });
@@ -139,7 +142,7 @@ export default function Editor({
         <VariablePickerPlugin variables={variableLabels.length > 0 ? [] : variables} />
         <OnBlurPlugin onBlur={onBlur} />
       </LexicalComposer>
-      {showOpenModal && (
+      {showOpenModal && scrollHeight > maxH && (
         <Box
           zIndex={10}
           position={'absolute'}
diff --git a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/components/VariableLabel.tsx b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/components/VariableLabel.tsx
index 87be5af7b..2190c65e0 100644
--- a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/components/VariableLabel.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/components/VariableLabel.tsx
@@ -11,7 +11,9 @@ export default function VariableLabel({
   nodeAvatar: string;
 }) {
   const { t } = useTranslation();
-  const [parentLabel, childLabel] = variableLabel.split('.');
+  // avoid including '.' in the variable name.
+  const [parentLabel, ...childLabels] = variableLabel.split('.');
+  const childLabel = childLabels.join('.');
 
   return (
     <>
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<HTMLTextAreaElement, Props>(function MyTextarea(props, ref) {
@@ -28,6 +29,10 @@ const MyTextarea = React.forwardRef<HTMLTextAreaElement, Props>(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<HTMLTextAreaElement, Props>(function MyTexta
 
   return (
     <>
-      <Editor textareaRef={TextareaRef} {...childProps} onOpenModal={onOpen} />
+      <Editor
+        textareaRef={TextareaRef}
+        autoHeight={autoHeight}
+        onChange={onChange}
+        maxH={maxH}
+        minH={minH}
+        showResize={!autoHeight}
+        {...childProps}
+        onOpenModal={onOpen}
+      />
       {isOpen && (
         <MyModal iconSrc={iconSrc} title={title} isOpen onClose={onClose}>
           <ModalBody>
             <Editor
               textareaRef={ModalTextareaRef}
+              onChange={onChange}
               {...childProps}
-              minH={'300px'}
-              maxH={'auto'}
+              maxH={500}
+              minH={500}
               minW={['100%', '512px']}
+              showResize={false}
             />
           </ModalBody>
           <ModalFooter>
@@ -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<HTMLTextAreaElement>;
   onOpenModal?: () => void;
+  showResize?: boolean;
 }) {
   const { t } = useTranslation();
+  const [scrollHeight, setScrollHeight] = useState(0);
 
   return (
     <Box h={'100%'} w={'100%'} position={'relative'}>
-      <Textarea ref={textareaRef} maxW={'100%'} {...props} />
-      {onOpenModal && (
+      <Textarea
+        ref={textareaRef}
+        maxW={'100%'}
+        as={autoHeight ? ResizeTextarea : undefined}
+        sx={
+          !showResize
+            ? {
+                '::-webkit-resizer': {
+                  display: 'none'
+                }
+              }
+            : {}
+        }
+        {...props}
+        maxH={`${maxH}px`}
+        minH={`${minH}px`}
+        onChange={(e) => {
+          setScrollHeight(e.target.scrollHeight);
+          onChange?.(e);
+        }}
+      />
+      {onOpenModal && maxH && scrollHeight > Number(maxH) && (
         <Box
           zIndex={1}
           position={'absolute'}
diff --git a/projects/app/src/components/core/app/DatasetParamsModal.tsx b/projects/app/src/components/core/app/DatasetParamsModal.tsx
index 251cc644d..dde5982e7 100644
--- a/projects/app/src/components/core/app/DatasetParamsModal.tsx
+++ b/projects/app/src/components/core/app/DatasetParamsModal.tsx
@@ -23,12 +23,12 @@ import { DatasetSearchModeMap } from '@fastgpt/global/core/dataset/constants';
 import MyRadio from '@/components/common/MyRadio';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
-import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import SelectAiModel from '@/components/Select/AIModelSelector';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
+import MyTextarea from '@/components/common/Textarea/MyTextarea';
 
 export type DatasetParamsProps = {
   searchMode: `${DatasetSearchModeEnum}`;
@@ -317,14 +317,14 @@ const DatasetParamsModal = ({
                     ></QuestionTip>
                   </Flex>
                   <Box mt={1}>
-                    <PromptEditor
+                    <MyTextarea
+                      autoHeight
                       minH={150}
                       maxH={300}
-                      showOpenModal={false}
                       placeholder={t('common:core.module.QueryExtension.placeholder')}
                       value={cfbBgDesc}
                       onChange={(e) => {
-                        setValue('datasetSearchExtensionBg', e);
+                        setValue('datasetSearchExtensionBg', e.target.value);
                       }}
                     />
                   </Box>
diff --git a/projects/app/src/components/core/app/WelcomeTextConfig.tsx b/projects/app/src/components/core/app/WelcomeTextConfig.tsx
index e4d156f75..170251a7a 100644
--- a/projects/app/src/components/core/app/WelcomeTextConfig.tsx
+++ b/projects/app/src/components/core/app/WelcomeTextConfig.tsx
@@ -24,6 +24,9 @@ const WelcomeTextConfig = (props: TextareaProps) => {
         fontSize={'sm'}
         bg={'myGray.50'}
         placeholder={t('common:core.app.tip.welcomeTextTip')}
+        autoHeight
+        minH={100}
+        maxH={200}
         {...props}
       />
     </>
diff --git a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx b/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
index 2d6cf5b2c..17d1dd360 100644
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Controller, UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 import {
   Box,
   Button,
   Card,
-  Input,
   NumberDecrementStepper,
   NumberIncrementStepper,
   NumberInput,
@@ -24,7 +23,7 @@ import { ChatBoxContext } from '../Provider';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import { useDeepCompareEffect } from 'ahooks';
 import { VariableItemType } from '@fastgpt/global/core/app/type';
-import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
+import MyTextarea from '@/components/common/Textarea/MyTextarea';
 
 export const VariableInputItem = ({
   item,
@@ -60,13 +59,13 @@ export const VariableInputItem = ({
         {item.description && <QuestionTip ml={1} label={item.description} />}
       </Box>
       {item.type === VariableInputEnum.input && (
-        <PromptEditor
-          value={item.defaultValue}
-          onChange={(e) => setValue(item.key, e)}
-          bg={'myGray.50'}
+        <MyTextarea
+          autoHeight
           minH={40}
-          maxH={150}
-          showOpenModal={false}
+          maxH={160}
+          bg={'myGray.50'}
+          value={item.defaultValue}
+          onChange={(e) => setValue(item.key, e.target.value)}
         />
       )}
       {item.type === VariableInputEnum.textarea && (
diff --git a/projects/app/src/components/core/chat/components/AIResponseBox.tsx b/projects/app/src/components/core/chat/components/AIResponseBox.tsx
index 93585b917..055161484 100644
--- a/projects/app/src/components/core/chat/components/AIResponseBox.tsx
+++ b/projects/app/src/components/core/chat/components/AIResponseBox.tsx
@@ -38,7 +38,7 @@ import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/consta
 import { useTranslation } from 'react-i18next';
 import { Controller, useForm } from 'react-hook-form';
 import MySelect from '@fastgpt/web/components/common/MySelect';
-import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
+import MyTextarea from '@/components/common/Textarea/MyTextarea';
 
 type props = {
   value: UserChatItemValueItemType | AIChatItemValueItemType;
@@ -221,12 +221,15 @@ const RenderUserFormInteractive = React.memo(function RenderFormInput({
             {input.description && <QuestionTip ml={1} label={input.description} />}
           </Flex>
           {input.type === FlowNodeInputTypeEnum.input && (
-            <PromptEditor
-              value={input.value}
-              onChange={(e) => setValue(input.label, e)}
+            <MyTextarea
+              isDisabled={interactive.params.submitted}
+              {...register(input.label, {
+                required: input.required
+              })}
+              bg={'white'}
+              autoHeight
               minH={40}
               maxH={100}
-              showOpenModal={false}
             />
           )}
           {input.type === FlowNodeInputTypeEnum.textarea && (
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useDebug.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useDebug.tsx
index 1dffe626e..1632e464c 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useDebug.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useDebug.tsx
@@ -33,7 +33,7 @@ import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
 import { AppContext } from '../../../context';
 import { VariableInputItem } from '@/components/core/chat/ChatContainer/ChatBox/components/VariableInput';
 import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
-import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
+import MyTextarea from '@/components/common/Textarea/MyTextarea';
 
 const MyRightDrawer = dynamic(
   () => import('@fastgpt/web/components/common/MyDrawer/MyRightDrawer')
@@ -270,16 +270,16 @@ export const useDebug = () => {
               const RenderInput = (() => {
                 if (input.valueType === WorkflowIOValueTypeEnum.string) {
                   return (
-                    <PromptEditor
+                    <MyTextarea
+                      autoHeight
+                      minH={40}
+                      maxH={160}
+                      bg={'myGray.50'}
+                      placeholder={t(input.placeholder || ('' as any))}
                       value={getValues(`nodeVariables.${input.key}`)}
                       onChange={(e) => {
-                        setValue(`nodeVariables.${input.key}`, e);
+                        setValue(`nodeVariables.${input.key}`, e.target.value);
                       }}
-                      minH={50}
-                      maxH={150}
-                      showOpenModal={false}
-                      placeholder={t(input.placeholder || ('' as any))}
-                      bg={'myGray.50'}
                     />
                   );
                 }
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
index 9b63095f8..750706b79 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
@@ -34,7 +34,7 @@ import { useFieldArray, UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import DndDrag, { Draggable } from '@fastgpt/web/components/common/DndDrag';
-import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
+import MyTextarea from '@/components/common/Textarea/MyTextarea';
 
 type ListValueType = { id: string; value: string; label: string }[];
 
@@ -316,15 +316,12 @@ const InputTypeConfig = ({
                 </NumberInput>
               )}
               {inputType === FlowNodeInputTypeEnum.input && (
-                <PromptEditor
-                  value={defaultValue}
-                  onChange={(e) => {
-                    setValue('defaultValue', e);
-                  }}
-                  minH={40}
-                  maxH={200}
-                  showOpenModal={false}
+                <MyTextarea
+                  {...register('defaultValue')}
                   bg={'myGray.50'}
+                  autoHeight
+                  minH={40}
+                  maxH={100}
                 />
               )}
               {inputType === FlowNodeInputTypeEnum.JSONEditor && (
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/NodePluginConfig.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/NodePluginConfig.tsx
index 7e50440dd..d426adf32 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/NodePluginConfig.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/NodePluginConfig.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, useMemo, useState } from 'react';
+import React, { Dispatch, useMemo } from 'react';
 import { NodeProps } from 'reactflow';
 import NodeCard from '../render/NodeCard';
 import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/node.d';
@@ -10,7 +10,7 @@ import MyTextarea from '@/components/common/Textarea/MyTextarea';
 import { AppContext } from '../../../../context';
 import { AppChatConfigType, AppDetailType } from '@fastgpt/global/core/app/type';
 import { getAppChatConfig } from '@fastgpt/global/core/workflow/utils';
-import { useCreation, useMount } from 'ahooks';
+import { useMount } from 'ahooks';
 import ChatFunctionTip from '@/components/core/app/Tip';
 import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 import { WorkflowContext } from '../../../context';
@@ -96,6 +96,9 @@ function Instruction({ chatConfig: { instruction }, setAppDetail }: ComponentPro
         resize={'both'}
         placeholder={t('workflow:plugin.Instruction_Tip')}
         value={instruction}
+        autoHeight
+        minH={100}
+        maxH={240}
         onChange={(e) => {
           setAppDetail((state) => ({
             ...state,