perf: prompt textarea (#625)

41115a96 · Archer · GitHub · b14a1db2 · 41115a96 · 41115a96
Commit 41115a96 authored Dec 18, 2023 by Archer Committed by GitHub Dec 18, 2023
5 changed files
--- a/projects/app/src/components/common/Textarea/PromptTextarea/index.tsx
+++ b/projects/app/src/components/common/Textarea/PromptTextarea/index.tsx
-import React, { useMemo, useState } from 'react';
+import React, { useRef } from 'react';
 import {
  Box,
@@ -16,11 +16,13 @@ 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;
@@ -28,21 +30,30 @@ const PromptTextarea = (props: Props) => {
  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,
+  onOpenModal,
-  onSetModalMode,
+  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} />
+      <Textarea ref={textareaRef} wordBreak={'break-all'} maxW={'100%'} {...props} />
-      {showSetModalModeIcon && (
+      {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>
-  );
-});
--- 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
+              defaultValue={getValues(ModuleInputKeyEnum.aiChatQuoteTemplate)}
-              value={getValues(ModuleInputKeyEnum.aiChatQuoteTemplate)}
+              onBlur={(e) => {
-              onChange={(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
+              defaultValue={getValues(ModuleInputKeyEnum.aiChatQuotePrompt)}
-              value={getValues(ModuleInputKeyEnum.aiChatQuotePrompt)}
+              onBlur={(e) => {
-              onChange={(e) => {
                setValue(ModuleInputKeyEnum.aiChatQuotePrompt, e.target.value);
                setRefresh(!refresh);
              }}

--- a/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/Textarea.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/Textarea.tsx
-import React from 'react';
+import React, { useCallback } from 'react';
 import type { RenderInputProps } from '../type';
 import { onChangeNode } from '../../../../FlowProvider';
 import { useTranslation } from 'next-i18next';
@@ -6,6 +6,22 @@ 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({
+        update(e.target.value);
-          moduleId,
-          type: 'updateInput',
-          key: item.key,
-          value: {
-            ...item,
-            value: e.target.value
-          }
-        });
      }}
    />
  );

--- 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[]) => {

--- 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
+                  defaultValue={getValues('aiSettings.systemPrompt')}
-                  value={getValues('aiSettings.systemPrompt')}
+                  onBlur={(e) => {
-                  onChange={(e) => {
                    setValue('aiSettings.systemPrompt', e.target.value || '');
                    setRefresh(!refresh);
                  }}