perf: prompt textarea (#625)

labring · Dec 18, 2023 · 41115a9 · 41115a9
1 parent b14a1db
commit 41115a9
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 65 deletions.
diff --git a/projects/app/src/components/common/Textarea/PromptTextarea/index.tsx b/projects/app/src/components/common/Textarea/PromptTextarea/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useRef } from 'react';
 
 import {
   Box,
@@ -16,33 +16,44 @@ import MyModal from '@/components/MyModal';
 
 type Props = TextareaProps & {
   title?: string;
-  showSetModalModeIcon?: boolean;
   // variables: string[];
 };
 
 const PromptTextarea = (props: Props) => {
+  const ModalTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const TextareaRef = useRef<HTMLTextAreaElement>(null);
+
   const { t } = useTranslation();
   const { title = t('core.app.edit.Prompt Editor'), value, ...childProps } = props;
 
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
     <>
-      <Editor {...childProps} value={value} showSetModalModeIcon onSetModalMode={onOpen} />
+      <Editor textareaRef={TextareaRef} {...childProps} onOpenModal={onOpen} />
       {isOpen && (
         <MyModal iconSrc="/imgs/modal/edit.svg" title={title} isOpen onClose={onClose}>
           <ModalBody>
             <Editor
+              textareaRef={ModalTextareaRef}
               {...childProps}
-              value={value}
               minH={'300px'}
               maxH={'auto'}
               minW={['100%', '512px']}
-              showSetModalModeIcon={false}
             />
           </ModalBody>
           <ModalFooter>
-            <Button onClick={onClose}>{t('common.Confirm')}</Button>
+            <Button
+              onClick={() => {
+                if (ModalTextareaRef.current && TextareaRef.current) {
+                  TextareaRef.current.value = ModalTextareaRef.current.value;
+                }
+
+                onClose();
+              }}
+            >
+              {t('common.Confirm')}
+            </Button>
           </ModalFooter>
         </MyModal>
       )}
@@ -53,23 +64,26 @@ const PromptTextarea = (props: Props) => {
 export default PromptTextarea;
 
 const Editor = React.memo(function Editor({
-  showSetModalModeIcon = true,
-  onSetModalMode,
+  onOpenModal,
+  textareaRef,
   ...props
-}: Props & { onSetModalMode?: () => void }) {
+}: Props & {
+  textareaRef: React.RefObject<HTMLTextAreaElement>;
+  onOpenModal?: () => void;
+}) {
   const { t } = useTranslation();
 
   return (
     <Box h={'100%'} w={'100%'} position={'relative'}>
-      <Textarea wordBreak={'break-all'} maxW={'100%'} {...props} />
-      {showSetModalModeIcon && (
+      <Textarea ref={textareaRef} wordBreak={'break-all'} maxW={'100%'} {...props} />
+      {onOpenModal && (
         <Box
           zIndex={1}
           position={'absolute'}
           bottom={1}
           right={2}
           cursor={'pointer'}
-          onClick={onSetModalMode}
+          onClick={onOpenModal}
         >
           <MyTooltip label={t('common.ui.textarea.Magnifying')}>
             <MyIcon name={'fullScreenLight'} w={'14px'} color={'myGray.600'} />
@@ -79,35 +93,3 @@ const Editor = React.memo(function Editor({
     </Box>
   );
 });
-
-const VariableSelectBlock = React.memo(function VariableSelectBlock({
-  variables
-}: {
-  variables: string[];
-}) {
-  return <></>;
-});
-
-const Placeholder = React.memo(function Placeholder({
-  placeholder = ''
-}: {
-  placeholder?: string;
-}) {
-  return (
-    <Box
-      zIndex={0}
-      userSelect={'none'}
-      color={'myGray.400'}
-      px={3}
-      py={2}
-      position={'absolute'}
-      top={0}
-      right={0}
-      bottom={0}
-      left={0}
-      fontSize={'sm'}
-    >
-      {placeholder}
-    </Box>
-  );
-});
diff --git a/projects/app/src/components/core/module/AIChatSettingsModal.tsx b/projects/app/src/components/core/module/AIChatSettingsModal.tsx
@@ -194,9 +194,8 @@ const AIChatSettingsModal = ({
               placeholder={t('template.Quote Content Tip', {
                 default: Prompt_QuoteTemplateList[0].value
               })}
-              showSetModalModeIcon
-              value={getValues(ModuleInputKeyEnum.aiChatQuoteTemplate)}
-              onChange={(e) => {
+              defaultValue={getValues(ModuleInputKeyEnum.aiChatQuoteTemplate)}
+              onBlur={(e) => {
                 setValue(ModuleInputKeyEnum.aiChatQuoteTemplate, e.target.value);
                 setRefresh(!refresh);
               }}
@@ -220,9 +219,8 @@ const AIChatSettingsModal = ({
               placeholder={t('template.Quote Prompt Tip', {
                 default: Prompt_QuotePromptList[0].value
               })}
-              showSetModalModeIcon
-              value={getValues(ModuleInputKeyEnum.aiChatQuotePrompt)}
-              onChange={(e) => {
+              defaultValue={getValues(ModuleInputKeyEnum.aiChatQuotePrompt)}
+              onBlur={(e) => {
                 setValue(ModuleInputKeyEnum.aiChatQuotePrompt, e.target.value);
                 setRefresh(!refresh);
               }}

diff --git a/.../app/src/components/core/module/Flow/components/render/RenderInput/templates/Textarea.tsx b/.../app/src/components/core/module/Flow/components/render/RenderInput/templates/Textarea.tsx
@@ -1,11 +1,27 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import type { RenderInputProps } from '../type';
 import { onChangeNode } from '../../../../FlowProvider';
 import { useTranslation } from 'next-i18next';
 import PromptTextarea from '@/components/common/Textarea/PromptTextarea';
 
 const TextareaRender = ({ item, moduleId }: RenderInputProps) => {
   const { t } = useTranslation();
+
+  const update = useCallback(
+    (value: string) => {
+      onChangeNode({
+        moduleId,
+        type: 'updateInput',
+        key: item.key,
+        value: {
+          ...item,
+          value
+        }
+      });
+    },
+    [item, moduleId]
+  );
+
   return (
     <PromptTextarea
       title={t(item.label)}
@@ -15,15 +31,7 @@ const TextareaRender = ({ item, moduleId }: RenderInputProps) => {
       resize={'both'}
       defaultValue={item.value}
       onBlur={(e) => {
-        onChangeNode({
-          moduleId,
-          type: 'updateInput',
-          key: item.key,
-          value: {
-            ...item,
-            value: e.target.value
-          }
-        });
+        update(e.target.value);
       }}
     />
   );

diff --git a/projects/app/src/pages/app/detail/components/AdEdit/Header.tsx b/projects/app/src/pages/app/detail/components/AdEdit/Header.tsx
@@ -62,7 +62,7 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
       });
 
       if (unconnected) {
-        const msg = `【${item.name}】存在未填或未连接参数`;
+        const msg = `【${t(item.name)}】存在未填或未连接参数`;
 
         toast({
           status: 'warning',
@@ -72,7 +72,7 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
       }
     }
     return modules;
-  }, [edges, nodes, toast]);
+  }, [edges, nodes, t, toast]);
 
   const { mutate: onclickSave, isLoading } = useRequest({
     mutationFn: async (modules: ModuleItemType[]) => {

diff --git a/projects/app/src/pages/app/detail/components/SimpleEdit/index.tsx b/projects/app/src/pages/app/detail/components/SimpleEdit/index.tsx
@@ -337,9 +337,8 @@ function ConfigForm({
                   bg={'myWhite.400'}
                   rows={5}
                   placeholder={chatNodeSystemPromptTip}
-                  showSetModalModeIcon
-                  value={getValues('aiSettings.systemPrompt')}
-                  onChange={(e) => {
+                  defaultValue={getValues('aiSettings.systemPrompt')}
+                  onBlur={(e) => {
                     setValue('aiSettings.systemPrompt', e.target.value || '');
                     setRefresh(!refresh);
                   }}