From dcaf97276742f43ba0570d9d1bab641c6bdfde93 Mon Sep 17 00:00:00 2001
From: heheer <71265218+newfish-cmyk@users.noreply.github.com>
Date: Tue, 23 Jul 2024 22:02:36 +0800
Subject: [PATCH] fix: variable dynamic refresh & space match (#2142)

* fix: variable dynamic refresh & space match

* fix variable picker filter
---
 .../common/Textarea/PromptEditor/Editor.tsx   |  5 ++--
 .../VariableLabelPickerPlugin/index.tsx       |  2 +-
 .../plugins/VariableLabelPlugin/index.tsx     | 23 +++++++++++--------
 .../plugins/VariableLabelPlugin/utils.ts      |  2 +-
 .../render/RenderInput/templates/Textarea.tsx |  3 +--
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
index 758a85558..6396e84fa 100644
--- a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
@@ -20,6 +20,7 @@ import { textToEditorState } from './utils';
 import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
 import { VariableLabelNode } from './plugins/VariableLabelPlugin/node';
 import VariableLabelPlugin from './plugins/VariableLabelPlugin';
+import { useDeepCompareEffect } from 'ahooks';
 
 export default function Editor({
   h = 200,
@@ -79,10 +80,10 @@ export default function Editor({
     document.addEventListener('mouseup', handleMouseUp);
   };
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (focus) return;
     setKey(getNanoid(6));
-  }, [value, variables.length]);
+  }, [value, variables]);
 
   return (
     <Box position={'relative'} width={'full'} h={`${height}px`} cursor={'text'}>
diff --git a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPickerPlugin/index.tsx b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPickerPlugin/index.tsx
index 5d241e2dc..5ea710440 100644
--- a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPickerPlugin/index.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPickerPlugin/index.tsx
@@ -77,7 +77,7 @@ export default function VariableLabelPickerPlugin({
       onQueryChange={setQueryString}
       onSelectOption={onSelectOption}
       triggerFn={checkForTriggerMatch}
-      options={variables}
+      options={variableFilter(variables, queryString || '')}
       menuRenderFn={(
         anchorElementRef,
         { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }
diff --git a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/index.tsx b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/index.tsx
index 1588c2ee4..1281e9bfb 100644
--- a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/index.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/index.tsx
@@ -20,15 +20,18 @@ export default function VariableLabelPlugin({
       throw new Error('VariableLabelPlugin: VariableLabelPlugin not registered on editor');
   }, [editor]);
 
-  const createVariableLabelPlugin = useCallback((textNode: TextNode): VariableLabelNode => {
-    const [parentKey, childrenKey] = textNode.getTextContent().slice(3, -3).split('.');
-    const currentVariable = variables.find(
-      (item) => item.parent?.id === parentKey && item.key === childrenKey
-    );
-    const variableLabel = `${currentVariable && currentVariable.parent?.label}.${currentVariable?.label}`;
-    const nodeAvatar = currentVariable?.parent?.avatar || '';
-    return $createVariableLabelNode(textNode.getTextContent(), variableLabel, nodeAvatar);
-  }, []);
+  const createVariableLabelPlugin = useCallback(
+    (textNode: TextNode): VariableLabelNode => {
+      const [parentKey, childrenKey] = textNode.getTextContent().slice(3, -3).split('.');
+      const currentVariable = variables.find(
+        (item) => item.parent?.id === parentKey && item.key === childrenKey
+      );
+      const variableLabel = `${currentVariable && currentVariable.parent?.label}.${currentVariable?.label}`;
+      const nodeAvatar = currentVariable?.parent?.avatar || '';
+      return $createVariableLabelNode(textNode.getTextContent(), variableLabel, nodeAvatar);
+    },
+    [variables]
+  );
 
   const getVariableMatch = useCallback((text: string) => {
     const matches = REGEX.exec(text);
@@ -52,7 +55,7 @@ export default function VariableLabelPlugin({
         createVariableLabelPlugin
       )
     );
-  }, [createVariableLabelPlugin, editor, getVariableMatch]);
+  }, [createVariableLabelPlugin, editor, getVariableMatch, variables]);
 
   return null;
 }
diff --git a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/utils.ts b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/utils.ts
index c942d31f5..2f287974b 100644
--- a/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/utils.ts
+++ b/packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/utils.ts
@@ -221,7 +221,7 @@ export function getHashtagRegexString(): string {
   const hashtag =
     `(${hashLeftCharList})` +
     `(${hashLeftCharList})` +
-    `(${hashMiddleCharList})([a-zA-Z0-9_\\.]{0,100})(${hashMiddleCharList})` +
+    `(${hashMiddleCharList})([a-zA-Z0-9_\\.\\s]{0,100})(${hashMiddleCharList})` +
     `(${hashRightCharList})(${hashRightCharList})`;
 
   return hashtag;
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Textarea.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Textarea.tsx
index dc4554aa2..97cf3f7c9 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Textarea.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Textarea.tsx
@@ -8,7 +8,6 @@ import { WorkflowContext } from '@/pages/app/detail/components/WorkflowComponent
 import { computedNodeInputReference } from '@/web/core/workflow/utils';
 import { useCreation } from 'ahooks';
 import { AppContext } from '@/pages/app/detail/components/context';
-import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
 
 const TextareaRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
   const { t } = useTranslation();
@@ -65,7 +64,7 @@ const TextareaRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
     const formatSourceNodeVariables = formatEditorVariablePickerIcon(sourceNodeVariables);
 
     return [...nodeVariables, ...formatSourceNodeVariables];
-  }, [nodeList, inputs, t]);
+  }, [nodeList, edges, inputs, t]);
 
   const onChange = useCallback(
     (e: string) => {