feat: get node variables in prompt editor

packages/global/core/workflow/utils.ts

@@ -3,7 +3,8 @@ import {
   WorkflowIOValueTypeEnum,
   NodeInputKeyEnum,
   VariableInputEnum,
-  variableMap
+  variableMap,
+  VARIABLE_NODE_ID
 } from './constants';
 import { FlowNodeInputItemType, FlowNodeOutputItemType } from './type/io.d';
 import { StoreNodeItemType } from './type/node';
@@ -226,3 +227,47 @@ export const updatePluginInputByVariables = (
       : node
   );
 };
+
+export function replaceVariableLabel(
+  text: any,
+  nodes: RuntimeNodeItemType[],
+  obj: Record<string, string | number>,
+  customInputs: {
+    nodeId: string;
+    id: string;
+    value: string | number;
+  }[]
+) {
+  if (!(typeof text === 'string')) return text;
+
+  const globalVariables = Object.keys(obj).map((key) => {
+    return {
+      nodeId: VARIABLE_NODE_ID,
+      id: key,
+      value: obj[key]
+    };
+  });
+
+  const nodeVariables = nodes
+    .map((node) => {
+      return node.outputs.map((output) => {
+        return {
+          nodeId: node.nodeId,
+          id: output.id,
+          value: output.value
+        };
+      });
+    })
+    .flat();
+
+  const allVariables = [...globalVariables, ...nodeVariables, ...customInputs];
+
+  for (const key in allVariables) {
+    const val = allVariables[key];
+    if (!['string', 'number'].includes(typeof val.value)) continue;
+    const regex = new RegExp(`\\{\\{\\$(${val.nodeId}\\.${val.id})\\$\\}\\}`, 'g');
+
+    text = text.replace(regex, String(val.value));
+  }
+  return text || '';
+}

packages/service/core/workflow/dispatch/index.ts

@@ -19,6 +19,7 @@ import {
 import { replaceVariable } from '@fastgpt/global/common/string/tools';
 import { responseWriteNodeStatus } from '../../../common/response';
 import { getSystemTime } from '@fastgpt/global/common/time/timezone';
+import { replaceVariableLabel } from '@fastgpt/global/core/workflow/utils';
 
 import { dispatchWorkflowStart } from './init/workflowStart';
 import { dispatchChatCompletion } from './chat/oneapi';
@@ -54,6 +55,7 @@ import { surrenderProcess } from '../../../common/system/tools';
 import { dispatchRunCode } from './code/run';
 import { dispatchTextEditor } from './tools/textEditor';
 import { dispatchCustomFeedback } from './tools/customFeedback';
+import { ReferenceValueProps } from '@fastgpt/global/core/workflow/type/io';
 
 const callbackMap: Record<FlowNodeTypeEnum, Function> = {
   [FlowNodeTypeEnum.workflowStart]: dispatchWorkflowStart,
@@ -291,6 +293,25 @@ export async function dispatchWorkFlow(data: Props): Promise<DispatchFlowRespons
       // replace {{}} variables
       let value = replaceVariable(input.value, variables);
 
+      // replace {{$$}} variables
+      const customInputs = node.inputs.flatMap((item) => {
+        if (Array.isArray(item.value)) {
+          return [
+            {
+              id: item.key,
+              value: getReferenceVariableValue({
+                value: item.value as ReferenceValueProps,
+                nodes: runtimeNodes,
+                variables
+              }),
+              nodeId: node.nodeId
+            }
+          ];
+        }
+        return [];
+      });
+      value = replaceVariableLabel(value, runtimeNodes, variables, customInputs);
+
       // replace reference variables
       value = getReferenceVariableValue({
         value,

packages/web/components/common/Avatar/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image } from '@chakra-ui/react';
+import { Box, Flex, Image } from '@chakra-ui/react';
 import type { ImageProps } from '@chakra-ui/react';
 import { LOGO_ICON } from '@fastgpt/global/common/system/constants';
 import MyIcon from '../Icon';
@@ -10,12 +10,13 @@ const Avatar = ({ w = '30px', src, ...props }: ImageProps) => {
   const isIcon = !!iconPaths[src as any];
 
   return isIcon ? (
-    <MyIcon name={src as any} w={w} borderRadius={props.borderRadius} />
+    <Box {...props}>
+      <MyIcon name={src as any} w={w} borderRadius={props.borderRadius} />
+    </Box>
   ) : (
     <Image
       fallbackSrc={LOGO_ICON}
       fallbackStrategy={'onError'}
-      // borderRadius={'md'}
       objectFit={'contain'}
       alt=""
       w={w}

packages/web/components/common/Icon/constants.ts

@@ -198,6 +198,7 @@ export const iconPaths = {
   'core/workflow/template/textConcat': () =>
     import('./icons/core/workflow/template/textConcat.svg'),
   'core/workflow/template/toolCall': () => import('./icons/core/workflow/template/toolCall.svg'),
+  'core/workflow/template/variable': () => import('./icons/core/workflow/template/variable.svg'),
   'core/workflow/template/variableUpdate': () =>
     import('./icons/core/workflow/template/variableUpdate.svg'),
   'core/workflow/template/workflowStart': () =>

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

@@ -5,7 +5,7 @@ import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
-import VariablePickerPlugin from './plugins/VariablePickerPlugin';
+import VariableLabelPickerPlugin from './plugins/VariableLabelPickerPlugin';
 import { Box } from '@chakra-ui/react';
 import styles from './index.module.scss';
 import VariablePlugin from './plugins/VariablePlugin';
@@ -18,6 +18,8 @@ import { getNanoid } from '@fastgpt/global/common/string/tools';
 import FocusPlugin from './plugins/FocusPlugin';
 import { textToEditorState } from './utils';
 import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
+import { VariableLabelNode } from './plugins/VariableLabelPlugin/node';
+import VariableLabelPlugin from './plugins/VariableLabelPlugin';
 
 export default function Editor({
   h = 200,
@@ -51,7 +53,7 @@ export default function Editor({
 
   const initialConfig = {
     namespace: 'promptEditor',
-    nodes: [VariableNode],
+    nodes: [VariableNode, VariableLabelNode],
     editorState: textToEditorState(value),
     onError: (error: Error) => {
       throw error;
@@ -127,8 +129,9 @@ export default function Editor({
             });
           }}
         />
-        <VariablePickerPlugin variables={variables} />
+        <VariableLabelPickerPlugin variables={variables} />
         <VariablePlugin variables={variables} />
+        <VariableLabelPlugin variables={variables} />
         <OnBlurPlugin onBlur={onBlur} />
       </LexicalComposer>
       {showResize && (

packages/web/components/common/Textarea/PromptEditor/index.module.scss

@@ -2,10 +2,11 @@
   position: relative;
   height: 100%;
   width: 100%;
-  border: 1px solid var(--chakra-colors-borderColor-base);
+  border: 1px solid rgb(232, 235, 240);
   border-radius: var(--chakra-radii-md);
   padding: 8px 12px;
-  background: var(--chakra-colors-gray-50);
+  background: #fff;
+
   font-size: var(--chakra-fontSizes-sm);
   overflow-y: auto;
 }