fix: variable dynamic refresh & space match (#2142)

* fix: variable dynamic refresh & space match

* fix variable picker filter

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -20,6 +20,7 @@ import { textToEditorState } from './utils';
 import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
 import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
 import { VariableLabelNode } from './plugins/VariableLabelPlugin/node';
 import { VariableLabelNode } from './plugins/VariableLabelPlugin/node';
 import VariableLabelPlugin from './plugins/VariableLabelPlugin';
 import VariableLabelPlugin from './plugins/VariableLabelPlugin';
+import { useDeepCompareEffect } from 'ahooks';
 
 
 export default function Editor({
 export default function Editor({
   h = 200,
   h = 200,
@@ -79,10 +80,10 @@ export default function Editor({
     document.addEventListener('mouseup', handleMouseUp);
     document.addEventListener('mouseup', handleMouseUp);
   };
   };
 
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (focus) return;
     if (focus) return;
     setKey(getNanoid(6));
     setKey(getNanoid(6));
-  }, [value, variables.length]);
+  }, [value, variables]);
 
 
   return (
   return (
     <Box position={'relative'} width={'full'} h={`${height}px`} cursor={'text'}>
     <Box position={'relative'} width={'full'} h={`${height}px`} cursor={'text'}>

packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPickerPlugin/index.tsx

@@ -77,7 +77,7 @@ export default function VariableLabelPickerPlugin({
       onQueryChange={setQueryString}
       onQueryChange={setQueryString}
       onSelectOption={onSelectOption}
       onSelectOption={onSelectOption}
       triggerFn={checkForTriggerMatch}
       triggerFn={checkForTriggerMatch}
-      options={variables}
+      options={variableFilter(variables, queryString || '')}
       menuRenderFn={(
       menuRenderFn={(
         anchorElementRef,
         anchorElementRef,
         { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }
         { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }

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');
       throw new Error('VariableLabelPlugin: VariableLabelPlugin not registered on editor');
   }, [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 getVariableMatch = useCallback((text: string) => {
     const matches = REGEX.exec(text);
     const matches = REGEX.exec(text);
@@ -52,7 +55,7 @@ export default function VariableLabelPlugin({
         createVariableLabelPlugin
         createVariableLabelPlugin
       )
       )
     );
     );
-  }, [createVariableLabelPlugin, editor, getVariableMatch]);
+  }, [createVariableLabelPlugin, editor, getVariableMatch, variables]);
 
 
   return null;
   return null;
 }
 }

packages/web/components/common/Textarea/PromptEditor/plugins/VariableLabelPlugin/utils.ts

@@ -221,7 +221,7 @@ export function getHashtagRegexString(): string {
   const hashtag =
   const hashtag =
     `(${hashLeftCharList})` +
     `(${hashLeftCharList})` +
     `(${hashLeftCharList})` +
     `(${hashLeftCharList})` +
-    `(${hashMiddleCharList})([a-zA-Z0-9_\\.]{0,100})(${hashMiddleCharList})` +
+    `(${hashMiddleCharList})([a-zA-Z0-9_\\.\\s]{0,100})(${hashMiddleCharList})` +
     `(${hashRightCharList})(${hashRightCharList})`;
     `(${hashRightCharList})(${hashRightCharList})`;
 
 
   return hashtag;
   return hashtag;

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 { computedNodeInputReference } from '@/web/core/workflow/utils';
 import { useCreation } from 'ahooks';
 import { useCreation } from 'ahooks';
 import { AppContext } from '@/pages/app/detail/components/context';
 import { AppContext } from '@/pages/app/detail/components/context';
-import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
 
 
 const TextareaRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
 const TextareaRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
   const { t } = useTranslation();
   const { t } = useTranslation();
@@ -65,7 +64,7 @@ const TextareaRender = ({ inputs = [], item, nodeId }: RenderInputProps) => {
     const formatSourceNodeVariables = formatEditorVariablePickerIcon(sourceNodeVariables);
     const formatSourceNodeVariables = formatEditorVariablePickerIcon(sourceNodeVariables);
 
 
     return [...nodeVariables, ...formatSourceNodeVariables];
     return [...nodeVariables, ...formatSourceNodeVariables];
-  }, [nodeList, inputs, t]);
+  }, [nodeList, edges, inputs, t]);
 
 
   const onChange = useCallback(
   const onChange = useCallback(
     (e: string) => {
     (e: string) => {