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 (
-
- {onOpenModal && (
+