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

packages/global/core/workflow/template/input.ts

@@ -1,7 +1,7 @@
 import { NodeInputKeyEnum } from '../constants';
 import { FlowNodeInputTypeEnum } from '../node/constant';
 import { WorkflowIOValueTypeEnum } from '../constants';
-import { chatNodeSystemPromptTip } from './tip';
+import { chatNodeSystemPromptTip, systemPromptTip } from './tip';
 import { FlowNodeInputItemType } from '../type/io';
 import { i18nT } from '../../../../web/i18n/utils';
 
@@ -55,7 +55,7 @@ export const Input_Template_System_Prompt: FlowNodeInputItemType = {
   max: 3000,
   valueType: WorkflowIOValueTypeEnum.string,
   label: i18nT('common:core.ai.Prompt'),
-  description: chatNodeSystemPromptTip,
+  description: systemPromptTip,
   placeholder: chatNodeSystemPromptTip
 };
 

packages/global/core/workflow/template/system/aiChat/index.ts

@@ -19,7 +19,7 @@ import {
   Input_Template_UserChatInput,
   Input_Template_Text_Quote
 } from '../../input';
-import { chatNodeSystemPromptTip } from '../../tip';
+import { chatNodeSystemPromptTip, systemPromptTip } from '../../tip';
 import { getHandleConfig } from '../../utils';
 import { i18nT } from '../../../../../../web/i18n/utils';
 
@@ -94,7 +94,7 @@ export const AiChatModule: FlowNodeTemplateType = {
     {
       ...Input_Template_System_Prompt,
       label: i18nT('common:core.ai.Prompt'),
-      description: chatNodeSystemPromptTip,
+      description: systemPromptTip,
       placeholder: chatNodeSystemPromptTip
     },
     Input_Template_History,

packages/global/core/workflow/template/system/tools.ts

@@ -16,7 +16,7 @@ import {
   Input_Template_System_Prompt,
   Input_Template_UserChatInput
 } from '../input';
-import { chatNodeSystemPromptTip } from '../tip';
+import { chatNodeSystemPromptTip, systemPromptTip } from '../tip';
 import { LLMModelTypeEnum } from '../../../ai/constants';
 import { getHandleConfig } from '../utils';
 import { i18nT } from '../../../../../web/i18n/utils';
@@ -62,7 +62,7 @@ export const ToolModule: FlowNodeTemplateType = {
     {
       ...Input_Template_System_Prompt,
       label: i18nT('common:core.ai.Prompt'),
-      description: chatNodeSystemPromptTip,
+      description: systemPromptTip,
       placeholder: chatNodeSystemPromptTip
     },
     Input_Template_History,

packages/global/core/workflow/template/tip.ts

@@ -1 +1,2 @@
 export const chatNodeSystemPromptTip = 'core.app.tip.chatNodeSystemPromptTip';
+export const systemPromptTip = 'core.app.tip.systemPromptTip';

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}

packages/web/i18n/en/common.json

@@ -340,7 +340,8 @@
   "core.app.share.Not share link": "No Share Link Created",
   "core.app.share.Role check": "Identity Verification",
   "core.app.tip.Add a intro to app": "Give the app an introduction",
-  "core.app.tip.chatNodeSystemPromptTip": "Fixed guide words for the model. By adjusting this content, you can guide the model's chat direction. This content will be fixed at the beginning of the context. You can use / to insert variables.\nIf a Dataset is associated, you can also guide the model when to call the Dataset search by appropriate description. For example:\nYou are an assistant for the movie 'Interstellar'. When users ask about content related to 'Interstellar', please search the Dataset and answer based on the search results.",
+  "core.app.tip.chatNodeSystemPromptTip": "Enter a prompt here",
+  "core.app.tip.systemPromptTip": "Fixed guide words for the model. By adjusting this content, you can guide the model's chat direction. This content will be fixed at the beginning of the context. You can use / to insert variables.\nIf a Dataset is associated, you can also guide the model when to call the Dataset search by appropriate description. For example:\nYou are an assistant for the movie 'Interstellar'. When users ask about content related to 'Interstellar', please search the Dataset and answer based on the search results.",
   "core.app.tip.variableTip": "Before the conversation starts, you can ask the user to fill in some content as specific variables for this round of conversation. This module is located after the opening guide.\nVariables can be injected into other modules' string type inputs in the form of {{variable key}}, such as prompts, delimiters, etc.",
   "core.app.tip.welcomeTextTip": "Before each conversation starts, send an initial content. Supports standard Markdown syntax. Additional tags that can be used:\n[Quick Key]: Users can directly send the question by clicking",
   "core.app.tool_label.doc": "Documentation",

packages/web/i18n/zh/common.json

@@ -339,7 +339,8 @@
   "core.app.share.Not share link": "没有创建分享链接",
   "core.app.share.Role check": "身份校验",
   "core.app.tip.Add a intro to app": "快来给应用一个介绍~",
-  "core.app.tip.chatNodeSystemPromptTip": "模型固定的引导词，通过调整该内容，可以引导模型聊天方向。该内容会被固定在上下文的开头。可通过输入 / 插入选择变量\n如果关联了知识库，你还可以通过适当的描述，来引导模型何时去调用知识库搜索。例如：\n你是电影《星际穿越》的助手，当用户询问与《星际穿越》相关的内容时，请搜索知识库并结合搜索结果进行回答。",
+  "core.app.tip.chatNodeSystemPromptTip": "在此输入提示词",
+  "core.app.tip.systemPromptTip": "模型固定的引导词，通过调整该内容，可以引导模型聊天方向。该内容会被固定在上下文的开头。可通过输入 / 插入选择变量\n如果关联了知识库，你还可以通过适当的描述，来引导模型何时去调用知识库搜索。例如：\n你是电影《星际穿越》的助手，当用户询问与《星际穿越》相关的内容时，请搜索知识库并结合搜索结果进行回答。",
   "core.app.tip.variableTip": "可以在对话开始前，要求用户填写一些内容作为本轮对话的特定变量。该模块位于开场引导之后。\n变量可以通过 {{变量key}} 的形式注入到其他模块 string 类型的输入中，例如：提示词、限定词等",
   "core.app.tip.welcomeTextTip": "每次对话开始前，发送一个初始内容。支持标准 Markdown 语法，可使用的额外标记：\n[快捷按键]：用户点击后可以直接发送该问题",
   "core.app.tool_label.doc": "使用文档",