feat: enhance agent integration in prompt editor and mixed-variable text input

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

@@ -1,3 +1,4 @@
+import type { AgentBlockType } from '@/app/components/base/prompt-editor/types'
 import type {
   Node,
   NodeOutPutVar,
@@ -6,6 +7,7 @@ import {
   memo,
   useCallback,
   useMemo,
+  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import PromptEditor from '@/app/components/base/prompt-editor'
@@ -74,19 +76,44 @@ const MixedVariableTextInput = ({
     return null
   }, [value, nodesByIdMap])
 
+  const [selectedAgent, setSelectedAgent] = useState<{ id: string, title: string } | null>(null)
+
+  const agentNodes = useMemo(() => {
+    return availableNodes
+      .filter(node => node.data.type === BlockEnum.Agent)
+      .map(node => ({
+        id: node.id,
+        title: node.data.title,
+      }))
+  }, [availableNodes])
+
+  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(() => {
-    if (!detectedAgentFromValue || !onChange)
+    const agentNodeId = detectedAgentFromValue?.nodeId || selectedAgent?.id
+    if (!agentNodeId || !onChange)
       return
 
     const pattern = /\{\{#([^#]+)#\}\}/g
     const valueWithoutAgentVars = value.replace(pattern, (match, variablePath) => {
       const nodeId = variablePath.split('.')[0]
-      return nodeId === detectedAgentFromValue.nodeId ? '' : match
+      return nodeId === agentNodeId ? '' : match
     }).trim()
 
     onChange(valueWithoutAgentVars)
+    setSelectedAgent(null)
     setControlPromptEditorRerenderKey(Date.now())
-  }, [detectedAgentFromValue, value, onChange, setControlPromptEditorRerenderKey])
+  }, [detectedAgentFromValue?.nodeId, selectedAgent?.id, value, onChange, setControlPromptEditorRerenderKey])
+
+  const displayedAgent = detectedAgentFromValue || (selectedAgent ? { nodeId: selectedAgent.id, name: selectedAgent.title } : null)
 
   return (
     <div className={cn(
@@ -95,9 +122,9 @@ const MixedVariableTextInput = ({
       'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
     )}
     >
-      {detectedAgentFromValue && (
+      {displayedAgent && (
         <AgentHeaderBar
-          agentName={detectedAgentFromValue.name}
+          agentName={displayedAgent.name}
           onRemove={handleAgentRemove}
           onViewInternals={onViewInternals}
         />
@@ -127,7 +154,12 @@ const MixedVariableTextInput = ({
           showManageInputField,
           onManageInputField,
         }}
-        placeholder={<Placeholder disableVariableInsertion={disableVariableInsertion} />}
+        agentBlock={{
+          show: agentNodes.length > 0 && !displayedAgent,
+          agentNodes,
+          onSelect: handleAgentSelect,
+        } as AgentBlockType}
+        placeholder={<Placeholder disableVariableInsertion={disableVariableInsertion} hasSelectedAgent={!!displayedAgent} />}
         onChange={onChange}
       />
     </div>

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

@@ -7,9 +7,10 @@ import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/cust
 
 type PlaceholderProps = {
   disableVariableInsertion?: boolean
+  hasSelectedAgent?: boolean
 }
 
-const Placeholder = ({ disableVariableInsertion = false }: PlaceholderProps) => {
+const Placeholder = ({ disableVariableInsertion = false, hasSelectedAgent = false }: PlaceholderProps) => {
   const { t } = useTranslation()
   const [editor] = useLexicalComposerContext()
 
@@ -44,17 +45,21 @@ const Placeholder = ({ disableVariableInsertion = false }: PlaceholderProps) =>
             >
               {t('nodes.tool.insertPlaceholder2', { ns: 'workflow' })}
             </div>
-            <div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder">@</div>
-            <div
-              className="system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
-              onMouseDown={((e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                handleInsert('@')
-              })}
-            >
-              {t('nodes.tool.insertPlaceholder3', { ns: 'workflow' })}
-            </div>
+            {!hasSelectedAgent && (
+              <>
+                <div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder">@</div>
+                <div
+                  className="system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
+                  onMouseDown={((e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    handleInsert('@')
+                  })}
+                >
+                  {t('nodes.tool.insertPlaceholder3', { ns: 'workflow' })}
+                </div>
+              </>
+            )}
           </>
         )}
       </div>