perf: support prompt editor dynamic height increase & modify aichat placeholder (#2817)

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -32,9 +32,9 @@ import { useDeepCompareEffect } from 'ahooks';
 import VariablePickerPlugin from './plugins/VariablePickerPlugin';
 
 export default function Editor({
-  h = 200,
+  minH = 200,
+  maxH = 400,
   maxLength,
-  showResize = true,
   showOpenModal = true,
   onOpenModal,
   variables,
@@ -46,9 +46,9 @@ export default function Editor({
   isFlow,
   bg = 'white'
 }: {
-  h?: number;
+  minH?: number;
+  maxH?: number;
   maxLength?: number;
-  showResize?: boolean;
   showOpenModal?: boolean;
   onOpenModal?: () => void;
   variables: EditorVariablePickerType[];
@@ -62,7 +62,6 @@ export default function Editor({
 }) {
   const [key, setKey] = useState(getNanoid(6));
   const [_, startSts] = useTransition();
-  const [height, setHeight] = useState(h);
   const [focus, setFocus] = useState(false);
 
   const initialConfig = {
@@ -74,25 +73,6 @@ export default function Editor({
     }
   };
 
-  const initialY = useRef(0);
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    initialY.current = e.clientY;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaY = e.clientY - initialY.current;
-      setHeight((prevHeight) => (prevHeight + deltaY < h * 0.5 ? h * 0.5 : prevHeight + deltaY));
-      initialY.current = e.clientY;
-    };
-
-    const handleMouseUp = () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  }, []);
-
   useDeepCompareEffect(() => {
     if (focus) return;
     setKey(getNanoid(6));
@@ -103,7 +83,6 @@ export default function Editor({
       className="nowheel"
       position={'relative'}
       width={'full'}
-      h={`${height}px`}
       cursor={'text'}
       color={'myGray.700'}
       bg={focus ? 'white' : bg}
@@ -114,6 +93,10 @@ export default function Editor({
           contentEditable={
             <ContentEditable
               className={isFlow ? styles.contentEditable_isFlow : styles.contentEditable}
+              style={{
+                minHeight: `${minH}px`,
+                maxHeight: `${maxH}px`
+              }}
             />
           }
           placeholder={
@@ -158,19 +141,6 @@ export default function Editor({
         <VariablePickerPlugin variables={variableLabels.length > 0 ? [] : variables} />
         <OnBlurPlugin onBlur={onBlur} />
       </LexicalComposer>
-      {showResize && (
-        <Box
-          position={'absolute'}
-          right={'0'}
-          bottom={'-1'}
-          zIndex={9}
-          cursor={'ns-resize'}
-          px={'2px'}
-          onMouseDown={handleMouseDown}
-        >
-          <MyIcon name={'common/editor/resizer'} width={'14px'} height={'14px'} />
-        </Box>
-      )}
       {showOpenModal && (
         <Box
           zIndex={10}

packages/web/components/common/Textarea/PromptEditor/index.tsx

@@ -10,13 +10,13 @@ import { useCallback } from 'react';
 
 const PromptEditor = ({
   showOpenModal = true,
-  showResize = true,
   variables = [],
   variableLabels = [],
   value,
   onChange,
   onBlur,
-  h,
+  minH,
+  maxH,
   maxLength,
   placeholder,
   title,
@@ -24,13 +24,13 @@ const PromptEditor = ({
   bg = 'white'
 }: {
   showOpenModal?: boolean;
-  showResize?: boolean;
   variables?: EditorVariablePickerType[];
   variableLabels?: EditorVariableLabelPickerType[];
   value?: string;
   onChange?: (text: string) => void;
   onBlur?: (text: string) => void;
-  h?: number;
+  minH?: number;
+  maxH?: number;
   maxLength?: number;
   placeholder?: string;
   title?: string;
@@ -58,12 +58,12 @@ const PromptEditor = ({
   return (
     <>
       <Editor
-        showResize={showResize}
         showOpenModal={showOpenModal}
         onOpenModal={onOpen}
         variables={variables}
         variableLabels={variableLabels}
-        h={h}
+        minH={minH}
+        maxH={maxH}
         maxLength={maxLength}
         value={value}
         onChange={onChangeInput}
@@ -75,9 +75,9 @@ const PromptEditor = ({
       <MyModal isOpen={isOpen} onClose={onClose} iconSrc="modal/edit" title={title} w={'full'}>
         <ModalBody>
           <Editor
-            h={400}
+            minH={400}
+            maxH={400}
             maxLength={maxLength}
-            showResize
             showOpenModal={false}
             variables={variables}
             variableLabels={variableLabels}