feat: support choose var in tool config in sandbox prompt editor

web/app/components/base/prompt-editor/index.tsx

@@ -16,6 +16,8 @@ import type {
   VariableBlockType,
   WorkflowVariableBlockType,
 } from './types'
+import type { Node } from '@/app/components/workflow/types'
+import type { EventPayload } from '@/context/event-emitter'
 import { CodeNode } from '@lexical/code'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
@@ -52,12 +54,12 @@ import {
   UPDATE_HISTORY_EVENT_EMITTER,
 } from './constants'
 import ComponentPickerBlock from './plugins/component-picker-block'
+
 import {
   ContextBlock,
   ContextBlockNode,
   ContextBlockReplacementBlock,
 } from './plugins/context-block'
-
 import {
   CurrentBlock,
   CurrentBlockNode,
@@ -153,6 +155,7 @@ const EnterCommandPlugin: FC<{ onEnter?: (event: KeyboardEvent) => void }> = ({
 
 export type PromptEditorProps = {
   instanceId?: string
+  nodeId?: string
   compact?: boolean
   wrapperClassName?: string
   className?: string
@@ -184,6 +187,7 @@ export type PromptEditorProps = {
 
 const PromptEditor: FC<PromptEditorProps> = ({
   instanceId,
+  nodeId,
   compact,
   wrapperClassName,
   className,
@@ -251,15 +255,30 @@ const PromptEditor: FC<PromptEditorProps> = ({
     eventEmitter?.emit({
       type: UPDATE_DATASETS_EVENT_EMITTER,
       payload: contextBlock?.datasets,
-    } as any)
+    } as EventPayload)
   }, [eventEmitter, contextBlock?.datasets])
   useEffect(() => {
     eventEmitter?.emit({
       type: UPDATE_HISTORY_EVENT_EMITTER,
       payload: historyBlock?.history,
-    } as any)
+    } as EventPayload)
   }, [eventEmitter, historyBlock?.history])
 
+  const availableNodes = React.useMemo<Node[] | undefined>(() => {
+    if (!workflowVariableBlock?.workflowNodesMap)
+      return undefined
+    return Object.entries(workflowVariableBlock.workflowNodesMap).map(([id, data]) => ({
+      id,
+      data: {
+        title: data.title,
+        type: data.type,
+      } as any,
+      position: data.position ?? { x: 0, y: 0 },
+      width: data.width,
+      height: data.height,
+    })) as Node[]
+  }, [workflowVariableBlock?.workflowNodesMap])
+
   const toolBlockContextValue = React.useMemo(() => {
     if (!onToolMetadataChange)
       return null
@@ -267,8 +286,11 @@ const PromptEditor: FC<PromptEditorProps> = ({
       metadata: toolMetadata,
       onMetadataChange: onToolMetadataChange,
       useModal: true,
+      nodeId,
+      nodesOutputVars: workflowVariableBlock?.variables,
+      availableNodes,
     }
-  }, [onToolMetadataChange, toolMetadata])
+  }, [availableNodes, nodeId, onToolMetadataChange, toolMetadata, workflowVariableBlock?.variables])
 
   const sandboxPlaceHolder = React.useMemo(() => {
     if (!isSupportSandbox)

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -267,6 +267,7 @@ const Editor: FC<Props> = ({
                       placeholder={placeholder}
                       placeholderClassName={placeholderClassName}
                       instanceId={instanceId}
+                      nodeId={nodeId}
                       compact
                       className={cn('min-h-[56px]', inputClassName)}
                       style={isExpand ? { height: editorExpandHeight - 5 } : {}}

web/app/components/workflow/nodes/llm/components/config-prompt.tsx

@@ -419,6 +419,7 @@ const ConfigPrompt: FC<Props> = ({
             <div>
               <Editor
                 instanceId={`${nodeId}-chat-workflow-llm-prompt-editor`}
+                nodeId={nodeId}
                 title={<span className="capitalize">{t(`${i18nPrefix}.prompt`, { ns: 'workflow' })}</span>}
                 value={((payload as PromptItem).edition_type === EditionType.basic || !(payload as PromptItem).edition_type) ? (payload as PromptItem).text : ((payload as PromptItem).jinja2_text || '')}
                 onChange={handleCompletionPromptChange}

web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx

@@ -535,7 +535,10 @@ const ToolBlockComponent = ({
         currentTool={currentTool}
         value={toolValue}
         onChange={handleToolValueChange}
-        nodeId={undefined}
+        nodeId={toolBlockContext?.nodeId}
+        nodesOutputVars={toolBlockContext?.nodesOutputVars}
+        availableNodes={toolBlockContext?.availableNodes}
+        enableVariableReference={useModal}
       />
       {readmeEntrance}
     </div>

web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-block-context.tsx

@@ -1,9 +1,13 @@
+import type { Node, NodeOutPutVar } from '@/app/components/workflow/types'
 import { createContext, useContext } from 'react'
 
 type ToolBlockContextValue = {
   metadata?: Record<string, unknown>
   onMetadataChange?: (metadata: Record<string, unknown>) => void
   useModal?: boolean
+  nodeId?: string
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
 }
 
 const ToolBlockContext = createContext<ToolBlockContextValue | null>(null)

web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx

@@ -611,7 +611,10 @@ const ToolGroupBlockComponent = ({
         currentTool={currentTool}
         value={toolValue}
         onChange={handleToolValueChange}
-        nodeId={undefined}
+        nodeId={toolBlockContext?.nodeId}
+        nodesOutputVars={toolBlockContext?.nodesOutputVars}
+        availableNodes={toolBlockContext?.availableNodes}
+        enableVariableReference={useModal}
       />
     </div>
   )

web/app/components/workflow/skill/editor/skill-editor/tool-setting/tool-settings-section.tsx

@@ -2,7 +2,7 @@
 
 import type { Tool } from '@/app/components/tools/types'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
-import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { Node, NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -34,6 +34,9 @@ type ToolSettingsSectionProps = {
   currentTool?: Tool
   value?: ToolValue
   nodeId?: string
+  nodesOutputVars?: NodeOutPutVar[]
+  availableNodes?: Node[]
+  enableVariableReference?: boolean
   onChange?: (value: ToolValue) => void
 }
 
@@ -42,10 +45,13 @@ const ToolSettingsSection = ({
   currentTool,
   value,
   nodeId,
+  nodesOutputVars,
+  availableNodes,
+  enableVariableReference = false,
   onChange,
 }: ToolSettingsSectionProps) => {
   const { t } = useTranslation()
-  const safeNodeId = nodeId ?? ''
+  const resolvedNodeId = enableVariableReference ? (nodeId || 'workflow') : undefined
 
   const currentToolSettings = useMemo(() => {
     if (!currentTool)
@@ -144,8 +150,10 @@ const ToolSettingsSection = ({
           value={getSafeConfigValue(value?.settings as ToolConfigValueMap, settingsFormSchemas)}
           onChange={handleSettingsFormChange}
           schemas={settingsFormSchemas}
-          nodeId={safeNodeId}
-          disableVariableReference
+          nodeId={resolvedNodeId}
+          nodeOutputVars={nodesOutputVars}
+          availableNodes={availableNodes}
+          disableVariableReference={!enableVariableReference}
         />
       )}
       {showParamsSection && (
@@ -153,8 +161,10 @@ const ToolSettingsSection = ({
           value={getSafeConfigValue(value?.parameters as ToolConfigValueMap, paramsFormSchemas)}
           onChange={handleParamsFormChange}
           schemas={paramsFormSchemas}
-          nodeId={safeNodeId}
-          disableVariableReference
+          nodeId={resolvedNodeId}
+          nodeOutputVars={nodesOutputVars}
+          availableNodes={availableNodes}
+          disableVariableReference={!enableVariableReference}
         />
       )}
     </>

web/eslint-suppressions.json

@@ -1429,7 +1429,7 @@
   },
   "app/components/base/prompt-editor/index.tsx": {
     "ts/no-explicit-any": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/base/prompt-editor/plugins/component-picker-block/index.tsx": {