feat: enhance component picker and workflow variable block functionality

web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx

@@ -21,7 +21,11 @@ import {
 } from '@floating-ui/react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
-import { KEY_ESCAPE_COMMAND } from 'lexical'
+import {
+  $getRoot,
+  $insertNodes,
+  KEY_ESCAPE_COMMAND,
+} from 'lexical'
 import {
   Fragment,
   memo,
@@ -41,6 +45,7 @@ import { INSERT_ERROR_MESSAGE_BLOCK_COMMAND } from '../error-message-block'
 import { INSERT_LAST_RUN_BLOCK_COMMAND } from '../last-run-block'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
 import { INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND } from '../workflow-variable-block'
+import { $createWorkflowVariableBlockNode } from '../workflow-variable-block/node'
 import { useOptions } from './hooks'
 
 type ComponentPickerProps = {
@@ -161,6 +166,16 @@ const ComponentPicker = ({
       const needRemove = $splitNodeContainingQuery(checkForTriggerMatch(triggerString, editor)!)
       if (needRemove)
         needRemove.remove()
+
+      const root = $getRoot()
+      const firstChild = root.getFirstChild()
+      if (firstChild) {
+        const selection = firstChild.selectStart()
+        if (selection) {
+          const workflowVariableBlockNode = $createWorkflowVariableBlockNode([agent.id, 'text'], {}, undefined)
+          $insertNodes([workflowVariableBlockNode])
+        }
+      }
     })
     agentBlock?.onSelect?.(agent)
     handleClose()

web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx

@@ -21,6 +21,7 @@ import {
   VariableLabelInEditor,
 } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 import { Type } from '@/app/components/workflow/nodes/llm/types'
+import { BlockEnum } from '@/app/components/workflow/types'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
 import { useSelectOrDelete } from '../../hooks'
 import {
@@ -66,6 +67,7 @@ const WorkflowVariableBlockComponent = ({
   )()
   const [localWorkflowNodesMap, setLocalWorkflowNodesMap] = useState<WorkflowNodesMap>(workflowNodesMap)
   const node = localWorkflowNodesMap![variables[isRagVar ? 1 : 0]]
+  const isAgentVariable = node?.type === BlockEnum.Agent
 
   const isException = isExceptionVariable(varName, node?.type)
   const variableValid = useMemo(() => {
@@ -134,6 +136,9 @@ const WorkflowVariableBlockComponent = ({
     })
   }, [node, reactflow, store])
 
+  if (isAgentVariable)
+    return <span className="hidden" ref={ref} />
+
   const Item = (
     <VariableLabelInEditor
       nodeType={node?.type}

web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx

@@ -6,6 +6,7 @@ import type {
 import {
   memo,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react'
@@ -78,6 +79,11 @@ const MixedVariableTextInput = ({
 
   const [selectedAgent, setSelectedAgent] = useState<{ id: string, title: string } | null>(null)
 
+  useEffect(() => {
+    if (!detectedAgentFromValue && selectedAgent)
+      setSelectedAgent(null)
+  }, [detectedAgentFromValue, selectedAgent])
+
   const agentNodes = useMemo(() => {
     return availableNodes
       .filter(node => node.data.type === BlockEnum.Agent)
@@ -89,13 +95,7 @@ const MixedVariableTextInput = ({
 
   const handleAgentSelect = useCallback((agent: { id: string, title: string }) => {
     setSelectedAgent(agent)
-    if (onChange) {
-      const agentVar = `{{#${agent.id}.text#}}`
-      const newValue = value ? `${agentVar}${value}` : agentVar
-      onChange(newValue)
-      setControlPromptEditorRerenderKey(Date.now())
-    }
-  }, [onChange, value, setControlPromptEditorRerenderKey])
+  }, [])
 
   const handleAgentRemove = useCallback(() => {
     const agentNodeId = detectedAgentFromValue?.nodeId || selectedAgent?.id